ConsentBanner stories need translations and knobs

[pjlee11]

Is your feature request related to a problem? Please describe.
Following #667 the ConsentBanner is now in Storybook. We should add stories for non-latin services including translations and typography that match the requested service. Similar to how the Paragraph stories work

Describe the solution you'd like

• Add ConsentBanner translation config for each service from here
• Add Knobs to the ConsentBanner stories that allow for swapping in and out the service

Describe alternatives you've considered
N/A

Testing notes
Manual testing only

Dev insight: Regression of storybook should be performed

Additional context

[dr3]

@pjlee11 Is this saying we should have translations for all our services in psammead as well as simorgh? Seems like a lot to keep in 2 places. Or can we just use generic text from the input provider?

[pjlee11]

I mean generic text. I personally think we should be better at using place holder text rather than real text and it makes it easier to understand that each component in the component library is very flexible.

Ideally we could have fixtures in psammead along the lines of:

• "A short headline"
• "A headline that is a bit longer than other headlines for testing"
• "Some text"
• "Some text that is significantly longer and therefore should carry on filling up space so we can see how it wraps and also interacts within the component it is used within"
• "Yes" (OR "Option 1")
• "No" (OR "Option 2")
• "Some summary text that would describe the story and give more context to what it is about"
  ...

Then our stories can utilise a base of generic translations per service rather than having each component define it's own "real world" translations. Also we can offer input boxes so that any string could be entered to see how it interacts with the given component

[greenc05]

Realistic text would make components easier to review and understand - particularly from a UX and accessibility swarm point of view

[pjlee11]

@greenc05 for offscreen text I agree it should be accurate, but the placeholder text in the component IMO should just be filler

[greenc05]

It can be a filler but it should make sense within the component

[sareh]

Talking with Clare and Laura, they were happy with just having placeholder text rather than having the exact translation used in Storybook, so I've implemented that in the PR: #1366