Patterns restructure

[GCHQ-Developer-718]

Description

Split the Patterns page into the following sections

Forms

Layout

Split into guidance and code. Guidance: current form layout guidance. Add some guidance on making sure the layout is responsive (link to "Page and component layout") Code: Example of correctly marked up

using ICDS inputs and submit/reset buttons. Link to "Coding for accessibility"

Validation

As it is now. Add tone of voice section like app errors and link to general voice and tone guidance (Styles)

Communicating state

Errors

App errors pattern as it is now Add tone of voice to contents page and link to general voice and tone guidance (Styles). Could link to empty state component.

Focus

Move focus indicator guidance from Styles and use this guidance here. Add some colour contrast guidance specifically for focusable components.

Success

Guidance as it is now

Loading

When to use component in a loading state vs using skeleton component vs loading indicator. Make sure that relevant components link to this information and this information links to relevant components

Toggle dark mode

Note: This is intended to be a pattern in a future "User customisation options" section, with additional pattern for switching between different user settings (e.g. high/low contrast modes, different fonts etc.).

Use information in current "Dark mode" pattern. Add links between this page and Components > Theming and customisation > Theme.

Navigation

As it is, after #1665.

Page and component layout

Add links between this section and Components > Theming and customisation > Customise ICDS (#1663). Add links between this section and Components > Layout > Grid (#1664).

8 Pixel square

From Styles > Layout and spacing Explain how it is used for internal components and how it should be used for custom components Link to spacing tokens

Fluid column grid

From Styles > Layout and spacing Link to breakpoint tokens Consider adding a code example using the Layout Grid

Fixed column grid

From Styles > Layout and spacing Link to breakpoint tokens Consider adding a code example using the Layout Grid

Why do we need it?

Aligns more closely with where users expected to find grid and 8 pixel square guidance. Categories will keep the patterns organised as more are created.

🚨 Urgency (low, medium or high)

Priority 2/5

If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.

Related open issues

After the following:

• #1665
• #1664
• #1663

[MI6-255]

Includes adding an example of a form

[MI6-255]

Check the site for any broken links when doing this