Task/tup-674 Fix hanging indent

[R-Tomas-Gonzalez]

Overview

Fixes hanging indent when an a tag is inside of a p tag that is a child of a card

Related

• TUP-674
• TUP-486 ( work was previously done for this ticket, that did not capture or account for the a tag inside of a p tag

Changes

• adds in :--c-card > p > a:only-child:not(:--c-button) selector to display: flex

Testing

I created a test element in _c-card--many-variable.hbs as such, to test the anchor tag wraps as wanted:

<article class="c-card c-card--plain">
    <h3>Card - BLAH BLAH BLAH</h3>

    <p>If you wrap actions ("Action N") in a <kbd>&lt;p&gt;</kbd> tag, then spacing will be wrong.*</p>

    <p>
        <a href="#" class="c-button c-button--primary">Action 1</a>
        <a href="#" class="c-button c-button--primary">Action 2</a>
    </p>
    <p>
        <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more Learn more Learn more Learn more Learn more</a>
    </p>
</article>

I deleted this and did not submit it up as to not clutter the card template. @wesleyboar please let me know if you'd like me to keep this in, or if you'd like to adjust more for the same situation :--c-card > p > a

UI

[wesleyboar]

Works 👍

Regarding how to test in demo, I have a different solution that does not edit the .hbs files, but thank you for providing a way. Expect a separate but related PR from me soon.

[wesleyboar]

@R-Tomas-Gonzalez, whoops. Yes, new link in demo for link that is long enough to have hanging indent would be good. (I was mixing up context of #290 and #289 when I answered.) Either you or I can add it as time allows. Lowest priority.