Expose a divider component to be used to divide up content on a page with a thin line
💰 User value
Reduce the need for end developers to re invent the wheel
AC
Config
Given that a divider component is being configured
When setting its properties
Then the following suggested properties can be set:
• Appearance – Default (default), Light, Dark, Theme
• Style – Solid (default), Dashed
• Weight – Very thin (default), Thin, Medium, Thick, Very thick
• Orientation – Horizontal (default), Vertical
• Label position – No label (default), Left-aligned, Centred, Right-aligned, Top, Bottom
(Label could be a Boolean with true/ false. And then these options are uncovered).
Sizing
Given that a divider component is being implemented
When configuring it
Then its width can be set to a custom value
And any text labels should wrap onto multiple lines if then required
Given that a divider component is being implemented
When configuring it
Then its height can be set to a custom value
Given that a divider component is being implemented
When configuring it
Then its weight can be set to a value of either 1px, 2px, 4px, 8px, 12px
And any text labels should wrap onto multiple lines if then required
And the width of the label is constant (default – 1px)
Given that a divider component is being implemented
When configuring it
Then its orientation can be set to Horizontal or Vertical
And its width can be set to a custom value
Given that a divider component is being implemented
When configuring it
Then its padding can be set to a custom value
Content
Given that a divider component is being implemented with a label
When configuring it
Then the label text should wrap.
Given that a vertical divider component is being implemented with a label
When configuring it
Then the label text should be on the left side of the divider
And can be set to Top, Centre, Bottom.
Accessibility – (How we want it to be announced by a screen reader)
Given that a divider component is being implemented with a label
When configuring it
Then the rendered element should be changed to a plain
using the component prop
And the setting should be changed to role= ‘presentation’ to ensure that it is not announced by screen readers while still preserving the semantics of the elements inside it.
Given that a divider component is being implemented with an accessible label
When configuring it
Then additional context to a label that is not displayed visually should be provided
And the additional context should be announced by a screen reader
Summary
Expose a divider component to be used to divide up content on a page with a thin line
💰 User value
Reduce the need for end developers to re invent the wheel
AC
Config Given that a divider component is being configured When setting its properties Then the following suggested properties can be set: • Appearance – Default (default), Light, Dark, Theme • Style – Solid (default), Dashed • Weight – Very thin (default), Thin, Medium, Thick, Very thick • Orientation – Horizontal (default), Vertical • Label position – No label (default), Left-aligned, Centred, Right-aligned, Top, Bottom (Label could be a Boolean with true/ false. And then these options are uncovered).
Sizing Given that a divider component is being implemented When configuring it Then its width can be set to a custom value And any text labels should wrap onto multiple lines if then required
Given that a divider component is being implemented When configuring it Then its height can be set to a custom value
Given that a divider component is being implemented When configuring it Then its weight can be set to a value of either 1px, 2px, 4px, 8px, 12px And any text labels should wrap onto multiple lines if then required And the width of the label is constant (default – 1px)
Given that a divider component is being implemented When configuring it Then its orientation can be set to Horizontal or Vertical And its width can be set to a custom value
Given that a divider component is being implemented When configuring it Then its padding can be set to a custom value
Content Given that a divider component is being implemented with a label When configuring it Then the label text should wrap.
Given that a vertical divider component is being implemented with a label When configuring it Then the label text should be on the left side of the divider And can be set to Top, Centre, Bottom.
Accessibility – (How we want it to be announced by a screen reader)
Given that a divider component is being implemented with a label When configuring it Then the rendered element should be changed to a plain
Given that a divider component is being implemented with an accessible label When configuring it Then additional context to a label that is not displayed visually should be provided And the additional context should be announced by a screen reader
Assuming this does not need a component page, however, any ideas on how the developers are made aware of its availability?
I think for that reason, it'd need a component page, even if it is very basic
This ticket needs ACs (acceptance criteria) @GCHQ-Designer-777
Added now ^
Design still have a bit of work to do on this, they'll hand it back when they're done
Handed over to engineering, outstanding questions addressed.
Theme tokens created in branch 2527