Update translated example for Character Count in the review app

[romaricpascal]

• Updates the character counting component with translations
• Adds a word counting component, to illustrate variations between "one", "two" and "other"
• Adds a warning notification banner to tell not to use our translations (which I'd be very happy for the wording to be tweaked if necessary @claireashworth).

A shortcut to the resulting page: https://govuk-frontend-pr-2934.herokuapp.com/examples/translated

This should be the last step to close #2701 🎉

[colinrotherham]

Think we should go with the Full page examples approach instead?
https://github.com/alphagov/govuk-frontend/blob/main/app/views/full-page-examples/index.njk#L17

Don't think Notification Banner fits the purpose

Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.

If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. Use inset text or warning text if it needs to stand out.

[colinrotherham]

Something plain and simple? @claireashworth

<h1 class="govuk-heading-xl">
  Translated examples
</h1>

<p class="govuk-body-l">These examples are designed to test how patterns and components can be translated.</p>

<p class="govuk-body">Please do not use these translations directly in your application.</p>

[claireashworth]

If possible, I would swap the second 2 lines to make extra sure the user sees the warning.
And how about this:

'These examples only illustrate how our components display translated text.'

[romaricpascal]

Good spot on the misuse of the component, @colinrotherham. I've amended the way the warning is displayed (and used a warning text to make sure the warning stands out @claireashworth).

[colinrotherham]

Thanks @romaricpascal

I can see pushes going up with different text changes being tried out

Think we need to apply the "two thirds" column layout, maybe keep govuk-body-l on the opening text, and go with the --xl break like some of the other pages do (compare the two visually?) but I'll take a 2nd opinion

Try this:

<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">Translated examples</h1>

    <p class="govuk-body-l">
      These examples only illustrate how our components display translated text.
      We do not guarantee that they are accurate.
    </p>

    {{ govukWarningText({
      text: "Please do not use these translations directly in your application.",
      iconFallbackText: "Warning"
    }) }}

    <hr class="govuk-section-break govuk-section-break--xl">
  </div>
</div>

☝️ @claireashworth suggested putting the warning first to make sure it's seen, but not sure if that's necessary now we're using govukWarningText() so I've swapped back

[romaricpascal]

Updated with Colin's latest proposal for the style of the warning, which had a much nicer hierarchy 🙌🏻 .

At the end of the day, that warning only appears to people that would stumble upon one our review apps, so I'm not sure how much back-and-forth we should have about it given its very limited audience, as long as it's clear enough 😄