Panel - Back button and navigation structure

[MrDinsdale]

Expected Behaviour

The Design library now features back button placement for panels, we should add styling for this to improve consistency.

Current Behaviour

Each implementation is custom on our panels so often placement and size is inconsistent.

Designs

[joe-bell]

Wondering if this is better being a generic link class for use outside of panels?

Very much like .c-link-external, we could have .c-link-back

[MrDinsdale]

Yeah, the only thing I'd point out with that is the fact we need to consider the positioning of the link as well as it's appearance.

[joe-bell]

We can do a cheeky BEM mix 🔥

"c-link-back c-panel__link-back"

[joe-bell]

Replicating the following designs from Sketch:

---

@mikejgregory just checking that it's intentional for the back link to be blue like a standard link when the close button is text-coloured?

[mikejgregory]

@joebell93 Currently yes in this instance the back button is blue, however we should be building these components so the colour as well as the icon plus it's placement (left or right) should be flexible.

[joe-bell]

It's a little complicated to explain, but the answer to that is yes and no due to us using pngs. I'll have a chat later with you

[joe-bell]

@sky-uk/toolkit-owners I'm thinking we split this into a short-term and long-term option:

---

Short-term

<article class="c-panel is-open">
  <div class="c-panel__content">
    <a class="c-panel__back c-link-back" href="#1">Back</a>
    <a class="c-panel__toggle" href="#1">Close</a>
    <div class="o-container">
      ...
    </div>
  </div>
</article>

---

Long-term

The extra c-panel__nav would remove any need to absolutely position navigation, however, it would drastically change the padding of the panel at the top edge (one for 3.0)

<article class="c-panel is-open">
  <div class="c-panel__content">
    <div class="c-panel__nav">
      <a class="c-panel__back c-link-back" href="#1">Back</a>
      <a class="c-panel__toggle" href="#1">Close</a>
    </div>
    <div class="o-container">
      ...
    </div>
  </div>
</article>

[joe-bell]

@mikejgregory has also confirmed to me that the panel navigation should be sitting within the container; this would be a breaking change to as it would require restructuring of our Panel padding