diff --git a/packages/components/psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-bulleted-list/CHANGELOG.md index 225e91cbde..2dd71c8ee9 100644 --- a/packages/components/psammead-bulleted-list/CHANGELOG.md +++ b/packages/components/psammead-bulleted-list/CHANGELOG.md @@ -2,7 +2,7 @@ | Version | Description | | ------------- | --------------------------------------------------------------------------------------------------------------------------- | -| 3.1.0 | [PR#4529](https://github.com/bbc/psammead/pull/4529) Allow bullet point shape to be square | +| 3.1.0 | [PR#4529](https://github.com/bbc/psammead/pull/4529) Allow bullet point shape and colour to be customised | | 3.0.18 | [PR#4497](https://github.com/bbc/psammead/pull/4497) Bump psammead-styles | | 3.0.17 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies | | 3.0.15 | [PR#4420](https://github.com/bbc/psammead/pull/4420) bumps 3rd-party dependencies | diff --git a/packages/components/psammead-bulleted-list/README.md b/packages/components/psammead-bulleted-list/README.md index bd62336565..be027dfc42 100644 --- a/packages/components/psammead-bulleted-list/README.md +++ b/packages/components/psammead-bulleted-list/README.md @@ -12,12 +12,13 @@ npm install @bbc/psammead-bulleted-list --save ## Props -| Argument | Type | Required | Default | Example | -| ---------------- | ----------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| dir | string | No | `'ltr'` | One of `'rtl'` `'ltr'` | -| script | script | Yes | N/A | { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, } | -| service | string | Yes | N/A | `'news'` | -| bulletPointShape | `'round'` or `'square'` | No | N/A | `'round'` | +| Argument | Type | Required | Default | Example | +| ----------------- | ----------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| dir | string | No | `'ltr'` | One of `'rtl'` `'ltr'` | +| script | script | Yes | N/A | { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, } | +| service | string | Yes | N/A | `'news'` | +| bulletPointShape | `'round'` or `'square'` | No | N/A | `'round'` | +| bulletPointColour | CSS Colour | No | `'#3F3F42'` | `'#ff0000'` | ## Usage diff --git a/packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap index 6039325011..7e91df8a0b 100644 --- a/packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap @@ -144,7 +144,7 @@ exports[`PsammeadBulletedList should render correctly from rtl 1`] = ` `; -exports[`PsammeadBulletedList should render correctly when bulletPointShape is square 1`] = ` +exports[`PsammeadBulletedList should render correctly with custom bulletPointShape and bulletPointColour 1`] = ` .emotion-0 { font-size: 0.9375rem; line-height: 1.25rem; @@ -178,8 +178,8 @@ exports[`PsammeadBulletedList should render correctly when bulletPointShape is s content: ' '; position: absolute; border-width: 1rem; - border: 0.1875rem solid #3F3F42; - background-color: #3F3F42; + border: 0.1875rem solid #f00; + background-color: #f00; border-radius: 0; left: -1rem; } diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index f794006d42..7ea8e529a4 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -21,8 +21,8 @@ const BulletedList = styled.ul` content: ' '; position: absolute; border-width: 1rem; - border: 0.1875rem solid ${C_SHADOW}; - background-color: ${C_SHADOW}; + border: 0.1875rem solid ${({ bulletPointColour }) => bulletPointColour}; + background-color: ${({ bulletPointColour }) => bulletPointColour}; border-radius: ${({ bulletPointShape }) => bulletPointShape === 'round' ? '50%' : '0'}; ${({ dir }) => (dir === 'rtl' ? 'right: -1rem;' : 'left: -1rem;')} @@ -34,12 +34,14 @@ BulletedList.propTypes = { dir: oneOf(['ltr', 'rtl']), service: string.isRequired, bulletPointShape: oneOf(['round', 'square']), + bulletPointColour: string, }; BulletedList.defaultProps = { dir: 'ltr', role: 'list', bulletPointShape: 'round', + bulletPointColour: C_SHADOW, }; export const BulletedListItem = styled.li` diff --git a/packages/components/psammead-bulleted-list/src/index.stories.jsx b/packages/components/psammead-bulleted-list/src/index.stories.jsx index c0724c0c8c..ca1db5b53d 100644 --- a/packages/components/psammead-bulleted-list/src/index.stories.jsx +++ b/packages/components/psammead-bulleted-list/src/index.stories.jsx @@ -25,13 +25,14 @@ storiesOf('Components/BulletedList', module) { notes }, ) .add( - 'square bullets', + 'red square bullets', ({ text, script, service, dir }) => ( {text} diff --git a/packages/components/psammead-bulleted-list/src/index.test.jsx b/packages/components/psammead-bulleted-list/src/index.test.jsx index c8e13baaed..108fcf7427 100644 --- a/packages/components/psammead-bulleted-list/src/index.test.jsx +++ b/packages/components/psammead-bulleted-list/src/index.test.jsx @@ -53,8 +53,12 @@ describe('PsammeadBulletedList', () => { }); shouldMatchSnapshot( - 'should render correctly when bulletPointShape is square', - + 'should render correctly with custom bulletPointShape and bulletPointColour', + First item on the list Second item on the list Final list item