Add panel component

[davidhunter08]

Description

Add panel component for use on confirmation pages.

Large screens

Small screens

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[edwardhorsford]

@davidhunter08 can you add some screenshots?

[davidhunter08]

Font sizes

After reviewing the panel font sizes, taking into consideration the proposed type scale updates, I've change the panel body font size to 24px(20px on mobile).

[anandamaryon1]

@davidhunter08 Thoughts on padding? I can see this totals 40px with the border and padding. Our cards tend to have 32px padding. I wonder whether this should have the same padding amount as cards? Possibly not an issue since they shouldn't ever appear on the same page. But worth considering?

Side note, any idea why the panel includes a 4px border? I assume for print/high-contrast styles?

[davidhunter08]

@davidhunter08 Thoughts on padding? I can see this totals 40px with the border and padding. Our cards tend to have 32px padding. I wonder whether this should have the same padding amount as cards? Possibly not an issue since they shouldn't ever appear on the same page. But worth considering?

It makes sense and looks ok having the padding 32px.

32px	40px

Side note, any idea why the panel includes a 4px border? I assume for print/high-contrast styles?

I presumed this was for changed/forced colours, same as the buttons, but I haven't tested it. We can test in the accessibility lab.

[anandamaryon1]

Tested on Windows with high contrast, 4px transparent border shows white 👍

[frankieroberto]

Looks good to me. Left some minor suggestions.

I also tested it locally without the body as I don’t think that’ll always be needed, and looks good.