feat: Added src-divider

[oliverlloyd]

Divider

Inserts a line on the page acting as a section break dividing content

Install

$ yarn add @guardian/src-divider

Use

import { Divider } from '@guardian/src-divider';

const Content = () => (
    <>
        <p>Some text</p>
        <Divider />
        <p>Some text</p>
        <Divider
            size="small"
            spaceAbove="loose"
            displayText="I am centered inside the divider"
        />
        <p>Some text</p>
    </>
);

Divider Props

size

'partial' | 'full'

full means the divider will span the full width of the content
partual left aligns the divider and limits its length

spaceAbove

'tight' | 'loose'

How much space is given above the divider

displayText

string

This text is centered inside the dividing line

[oliverlloyd]

Relates to #814

[oliverlloyd]

@SiAdcock where did we end up on the layout / not layout discussion? Are you okay keeping this divider as it's own thing?

[SiAdcock]

@oliverlloyd what do you think about adding this to the Development Kitchen (#963)?

To answer your previous question, for now I think Divider makes sense as its own thing

[oliverlloyd]

what do you think about adding this to the Development Kitchen

👍 I'll cook something up

[sndrs]

👍 I'll cook something up

👨‍🍳👌

[SiAdcock]

Lovely stuff, thanks @oliverlloyd . Divide. Conquer. 👍