Notice refactor

[ianmcburnie]

DON'T SQUASH.

Issue #1001

Reworks the structure to incorporate the visible text into the heading structure, instead of around the icon. While I did like the idea of the region beginning with a heading (in the same way I wish item tiles could start with a heading instead of an image), it just started to feel a bit weird not having the visible text as the heading. Hence these changes.

Before:

<section class="page-notice page-notice--confirmation" role="region" aria-labelledby="confirmation-status">
    <h2 class="page-notice__status" id="confirmation-status">
        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" aria-label="Success">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
    </h2>
    <div class="page-notice__content">
        <p><strong>Congrats!</strong> You just listed <a href="#">"Spam and Eggs From the Cow's Perspective</a> (paperback)."</p>
    </div>
</section>

After

<section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
    <div class="page-notice__header">
        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
            <use xlink:href="#icon-confirmation-filled"></use>
        </svg>
    </div>
    <div class="page-notice__main">
        <h2 class="page-notice__title">Title copy goes here</h2>
        <p>Details...</p>
    </div>
</section>

Issue #1150

Normalized all notices and split them apart into separate components.

While there is a little bit of duplication, mainly in terms of the flexbox layout, I find the modules now much easier to reason with compared to the grouped selectors we had before. So it seems like a good tradeoff. We can minimise some duplication with mixins if we like.

Visually page notices are now in a half way state between ds4 and ds6.

We can either

a) leave them as is
b) add color background (like ds6)
c) reinstate the grey border colour and thicker top border using system of variables/properties in the base file (i.e. not like we had before, which created a code split in the ds4 and ds6 files)

I don't consider this as a huge priority right now, and will tackle it either way just before we release.

DS4 Page notice before normalization:

DS4 Page notice after normalization:

DS6 Page Notice

[agliga]

I think it looks good. Just one comment.
The only thing I would say maybe we should think about common things as mixins, although I don't see very many things that can be put into a common mixin. Maybe the different attention/confirmations/information sections, but it's probably fine.

[ianmcburnie]

Yeah, I think there is definitely the potential to leverage some mixins. Will leave that for a future enhancement.