ic-ui-kit Divider component

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

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