diff --git a/package.json b/package.json index 45bc9f21d1..7d494e501e 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@bbc/moment-timezone-include": "1.1.8", "@bbc/psammead-assets": "3.1.9", "@bbc/psammead-brand": "7.3.2", - "@bbc/psammead-bulleted-list": "3.0.18", + "@bbc/psammead-bulleted-list": "3.1.0", "@bbc/psammead-bulletin": "5.0.36", "@bbc/psammead-byline": "3.0.19", "@bbc/psammead-calendars": "2.0.27", diff --git a/packages/components/psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-bulleted-list/CHANGELOG.md index f8df3907ff..2dd71c8ee9 100644 --- a/packages/components/psammead-bulleted-list/CHANGELOG.md +++ b/packages/components/psammead-bulleted-list/CHANGELOG.md @@ -1,54 +1,55 @@ # Psammead Bulleted List Changelog -| Version | Description | -| ------------- | --------------------------------------------------------------------------------------------------------------------- | -| 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 | -| 3.0.14 | [PR#4368](https://github.com/bbc/psammead/pull/4368) use Yarn Workspaces | -| 3.0.13 | [PR#4335](https://github.com/bbc/psammead/pull/4335) switch to yarn for package management | -| 3.0.12 | [PR#4304](https://github.com/bbc/psammead/pull/4304) Talos - Bump Dependencies - @bbc/gel-foundations, @bbc/psammead-styles | -| 3.0.11 | [PR#4303](https://github.com/bbc/psammead/pull/4303) Trigger rebuild following babel config update for emotion 11 | -| 3.0.10 | [PR#4260](https://github.com/bbc/psammead/pull/4260) Talos - Bump Dependencies - @bbc/gel-foundations | -| 3.0.9 | [PR#4256](https://github.com/bbc/psammead/pull/4256) Talos - Bump Dependencies - @bbc/psammead-styles | -| 3.0.8 | [PR#4193](https://github.com/bbc/psammead/pull/4193) Upgrade Emotion to v11 | -| 3.0.7 | [PR#4226](https://github.com/bbc/psammead/pull/4226) Talos - Bump Dependencies - @bbc/psammead-styles | -| 3.0.6 | [PR#4189](https://github.com/bbc/psammead/pull/4189) Talos - Bump Dependencies - @bbc/psammead-styles | -| 3.0.5 | [PR#4072](https://github.com/bbc/psammead/pull/4072) Talos - Bump Dependencies - @bbc/psammead-styles | -| 3.0.4 | [PR#4052](https://github.com/bbc/psammead/pull/4052) Talos - Bump Dependencies - @bbc/gel-foundations | -| 3.0.3 | [PR#4029](https://github.com/bbc/psammead/pull/4029) Talos - Bump Dependencies - @bbc/psammead-styles | -| 3.0.2 | [PR#3944](https://github.com/bbc/psammead/pull/3944) Talos - Bump Dependencies - @bbc/psammead-styles | -| 3.0.1 | [PR#3925](https://github.com/bbc/psammead/pull/3925) Talos - Bump Dependencies - @bbc/psammead-styles | -| 3.0.0 | [PR#3888](https://github.com/bbc/psammead/pull/3888) Migrate to emotion | -| 2.0.3 | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-styles | -| 2.0.2 | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations | -| 2.0.1 | [PR#3854](https://github.com/bbc/psammead/pull/3854) Talos - Bump Dependencies - @bbc/psammead-styles | -| 2.0.0-alpha.0 | [PR#3843](https://github.com/bbc/psammead/pull/3843) Bump Dependencies - @bbc/psammead-styles alpha version | -| 1.0.21 | [PR#3836](https://github.com/bbc/psammead/pull/3836) Talos - Bump Dependencies - @bbc/psammead-styles | -| 1.0.20 | [PR#3816](https://github.com/bbc/psammead/pull/3816) Talos - Bump Dependencies | -| 1.0.19 | [PR#3728](https://github.com/bbc/psammead/pull/3728) Tweaks following Storybook v5.3.19 to v6.0.22 update | -| 1.0.18 | [PR#3811](https://github.com/bbc/psammead/pull/3811) Talos - Bump Dependencies - @bbc/psammead-styles | -| 1.0.17 | [PR#3785](https://github.com/bbc/psammead/pull/3785) Talos - Bump Dependencies - @bbc/gel-foundations | -| 1.0.16 | [PR#3783](https://github.com/bbc/psammead/pull/3783) Fix circle in bullet | -| 1.0.15 | [PR#3725](https://github.com/bbc/psammead/pull/3725) Create a bullet out of CSS rather than using a background image. | -| 1.0.14 | [PR#3710](https://github.com/bbc/psammead/pull/3710) Talos - Bump Dependencies - @bbc/psammead-styles | -| 1.0.13 | [PR#3707](https://github.com/bbc/psammead/pull/3707) Talos - Bump Dependencies - @bbc/psammead-styles | -| 1.0.12 | [PR#3623](https://github.com/bbc/psammead/pull/3623) Talos - Bump Dependencies - @bbc/gel-foundations | -| 1.0.11 | [PR#3604](https://github.com/bbc/psammead/pull/3604) Talos - Bump Dependencies - @bbc/gel-foundations | -| 1.0.10 | [PR#3484](https://github.com/bbc/psammead/pull/3484) Voice Over MacOS bug fix. | -| 1.0.9 | [PR#3467](https://github.com/bbc/psammead/pull/3467) Talos - Bump Dependencies - @bbc/psammead-styles | -| 1.0.8 | [PR#3397](https://github.com/bbc/psammead/pull/3397) Talos - Bump Dependencies - @bbc/psammead-styles | -| 1.0.7 | [PR#3135](https://github.com/bbc/psammead/pull/3135) Talos - Bump Dependencies - @bbc/gel-foundations | -| 1.0.6 | [PR#3129](https://github.com/bbc/psammead/pull/3129) Talos - Bump Dependencies - @bbc/gel-foundations | -| 1.0.5 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles | -| 1.0.4 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations | -| 1.0.3 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles | -| 1.0.2 | [PR#2920](https://github.com/bbc/psammead/pull/2920) Talos - Bump Dependencies - @bbc/gel-foundations | -| 1.0.1 | [PR#2884](https://github.com/bbc/psammead/pull/2884) Remove `ul` top spacing. | -| 1.0.0 | [PR#2809](https://github.com/bbc/psammead/pull/2809) Move bulleted-list out of alpha. | -| 0.2.0-alpha.2 | [PR#2798](https://github.com/bbc/psammead/pull/2798) Convert psammead-bulleted-list bullet svg completely to base64. | -| 0.2.0-alpha.1 | [PR#2746](https://github.com/bbc/psammead/pull/2746) Add a11y role to list and spacing to list item. | -| 0.1.0-alpha.4 | [PR#2698](https://github.com/bbc/psammead/pull/2698) Add test for list styling to psammead-bulleted-lists. | -| 0.1.0-alpha.3 | [PR#2701](https://github.com/bbc/psammead/pull/2701) Talos - Bump Dependencies - @bbc/psammead-styles | -| 0.1.0-alpha.2 | [PR#2697](https://github.com/bbc/psammead/pull/2697) Talos - Bump Dependencies - @bbc/psammead-styles | -| 0.1.0-alpha.1 | [PR#2583](https://github.com/BBC-News/psammead/pull/2583) Initial creation of package. | +| Version | Description | +| ------------- | --------------------------------------------------------------------------------------------------------------------------- | +| 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 | +| 3.0.14 | [PR#4368](https://github.com/bbc/psammead/pull/4368) use Yarn Workspaces | +| 3.0.13 | [PR#4335](https://github.com/bbc/psammead/pull/4335) switch to yarn for package management | +| 3.0.12 | [PR#4304](https://github.com/bbc/psammead/pull/4304) Talos - Bump Dependencies - @bbc/gel-foundations, @bbc/psammead-styles | +| 3.0.11 | [PR#4303](https://github.com/bbc/psammead/pull/4303) Trigger rebuild following babel config update for emotion 11 | +| 3.0.10 | [PR#4260](https://github.com/bbc/psammead/pull/4260) Talos - Bump Dependencies - @bbc/gel-foundations | +| 3.0.9 | [PR#4256](https://github.com/bbc/psammead/pull/4256) Talos - Bump Dependencies - @bbc/psammead-styles | +| 3.0.8 | [PR#4193](https://github.com/bbc/psammead/pull/4193) Upgrade Emotion to v11 | +| 3.0.7 | [PR#4226](https://github.com/bbc/psammead/pull/4226) Talos - Bump Dependencies - @bbc/psammead-styles | +| 3.0.6 | [PR#4189](https://github.com/bbc/psammead/pull/4189) Talos - Bump Dependencies - @bbc/psammead-styles | +| 3.0.5 | [PR#4072](https://github.com/bbc/psammead/pull/4072) Talos - Bump Dependencies - @bbc/psammead-styles | +| 3.0.4 | [PR#4052](https://github.com/bbc/psammead/pull/4052) Talos - Bump Dependencies - @bbc/gel-foundations | +| 3.0.3 | [PR#4029](https://github.com/bbc/psammead/pull/4029) Talos - Bump Dependencies - @bbc/psammead-styles | +| 3.0.2 | [PR#3944](https://github.com/bbc/psammead/pull/3944) Talos - Bump Dependencies - @bbc/psammead-styles | +| 3.0.1 | [PR#3925](https://github.com/bbc/psammead/pull/3925) Talos - Bump Dependencies - @bbc/psammead-styles | +| 3.0.0 | [PR#3888](https://github.com/bbc/psammead/pull/3888) Migrate to emotion | +| 2.0.3 | [PR#3883](https://github.com/bbc/psammead/pull/3883) Talos - Bump Dependencies - @bbc/psammead-styles | +| 2.0.2 | [PR#3855](https://github.com/bbc/psammead/pull/3855) Talos - Bump Dependencies - @bbc/gel-foundations | +| 2.0.1 | [PR#3854](https://github.com/bbc/psammead/pull/3854) Talos - Bump Dependencies - @bbc/psammead-styles | +| 2.0.0-alpha.0 | [PR#3843](https://github.com/bbc/psammead/pull/3843) Bump Dependencies - @bbc/psammead-styles alpha version | +| 1.0.21 | [PR#3836](https://github.com/bbc/psammead/pull/3836) Talos - Bump Dependencies - @bbc/psammead-styles | +| 1.0.20 | [PR#3816](https://github.com/bbc/psammead/pull/3816) Talos - Bump Dependencies | +| 1.0.19 | [PR#3728](https://github.com/bbc/psammead/pull/3728) Tweaks following Storybook v5.3.19 to v6.0.22 update | +| 1.0.18 | [PR#3811](https://github.com/bbc/psammead/pull/3811) Talos - Bump Dependencies - @bbc/psammead-styles | +| 1.0.17 | [PR#3785](https://github.com/bbc/psammead/pull/3785) Talos - Bump Dependencies - @bbc/gel-foundations | +| 1.0.16 | [PR#3783](https://github.com/bbc/psammead/pull/3783) Fix circle in bullet | +| 1.0.15 | [PR#3725](https://github.com/bbc/psammead/pull/3725) Create a bullet out of CSS rather than using a background image. | +| 1.0.14 | [PR#3710](https://github.com/bbc/psammead/pull/3710) Talos - Bump Dependencies - @bbc/psammead-styles | +| 1.0.13 | [PR#3707](https://github.com/bbc/psammead/pull/3707) Talos - Bump Dependencies - @bbc/psammead-styles | +| 1.0.12 | [PR#3623](https://github.com/bbc/psammead/pull/3623) Talos - Bump Dependencies - @bbc/gel-foundations | +| 1.0.11 | [PR#3604](https://github.com/bbc/psammead/pull/3604) Talos - Bump Dependencies - @bbc/gel-foundations | +| 1.0.10 | [PR#3484](https://github.com/bbc/psammead/pull/3484) Voice Over MacOS bug fix. | +| 1.0.9 | [PR#3467](https://github.com/bbc/psammead/pull/3467) Talos - Bump Dependencies - @bbc/psammead-styles | +| 1.0.8 | [PR#3397](https://github.com/bbc/psammead/pull/3397) Talos - Bump Dependencies - @bbc/psammead-styles | +| 1.0.7 | [PR#3135](https://github.com/bbc/psammead/pull/3135) Talos - Bump Dependencies - @bbc/gel-foundations | +| 1.0.6 | [PR#3129](https://github.com/bbc/psammead/pull/3129) Talos - Bump Dependencies - @bbc/gel-foundations | +| 1.0.5 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles | +| 1.0.4 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations | +| 1.0.3 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles | +| 1.0.2 | [PR#2920](https://github.com/bbc/psammead/pull/2920) Talos - Bump Dependencies - @bbc/gel-foundations | +| 1.0.1 | [PR#2884](https://github.com/bbc/psammead/pull/2884) Remove `ul` top spacing. | +| 1.0.0 | [PR#2809](https://github.com/bbc/psammead/pull/2809) Move bulleted-list out of alpha. | +| 0.2.0-alpha.2 | [PR#2798](https://github.com/bbc/psammead/pull/2798) Convert psammead-bulleted-list bullet svg completely to base64. | +| 0.2.0-alpha.1 | [PR#2746](https://github.com/bbc/psammead/pull/2746) Add a11y role to list and spacing to list item. | +| 0.1.0-alpha.4 | [PR#2698](https://github.com/bbc/psammead/pull/2698) Add test for list styling to psammead-bulleted-lists. | +| 0.1.0-alpha.3 | [PR#2701](https://github.com/bbc/psammead/pull/2701) Talos - Bump Dependencies - @bbc/psammead-styles | +| 0.1.0-alpha.2 | [PR#2697](https://github.com/bbc/psammead/pull/2697) Talos - Bump Dependencies - @bbc/psammead-styles | +| 0.1.0-alpha.1 | [PR#2583](https://github.com/BBC-News/psammead/pull/2583) Initial creation of package. | diff --git a/packages/components/psammead-bulleted-list/README.md b/packages/components/psammead-bulleted-list/README.md index 8f863813b2..b6fafb6a98 100644 --- a/packages/components/psammead-bulleted-list/README.md +++ b/packages/components/psammead-bulleted-list/README.md @@ -12,30 +12,32 @@ 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'` | +| 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 Use `BulletedList` in place of a `ul` element with required props and a `BulletedListItem` in place of an `li`. ```jsx -import BulletedList, { BulletedListItem } from "@bbc/psammead-bulleted-list"; +import BulletedList, { BulletedListItem } from '@bbc/psammead-bulleted-list'; const props = { dir: 'ltr', script: latin, service: 'news', + bulletPointShape: 'round', // or 'square' }; A list item Another item - ``` ### When to use this component diff --git a/packages/components/psammead-bulleted-list/package.json b/packages/components/psammead-bulleted-list/package.json index b7abc97bb6..63452377cc 100644 --- a/packages/components/psammead-bulleted-list/package.json +++ b/packages/components/psammead-bulleted-list/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-bulleted-list", - "version": "3.0.18", + "version": "3.1.0", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, 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 9c4654651a..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 @@ -143,3 +143,75 @@ exports[`PsammeadBulletedList should render correctly from rtl 1`] = ` `; + +exports[`PsammeadBulletedList should render correctly with custom bulletPointShape and bulletPointColour 1`] = ` +.emotion-0 { + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + margin-top: 0; + list-style-type: none; +} + +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-0 { + font-size: 1rem; + line-height: 1.375rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-0 { + font-size: 1rem; + line-height: 1.375rem; + } +} + +.emotion-0>li { + position: relative; +} + +.emotion-0>li::before { + top: 0.5rem; + content: ' '; + position: absolute; + border-width: 1rem; + border: 0.1875rem solid #f00; + background-color: #f00; + border-radius: 0; + left: -1rem; +} + +.emotion-2 { + margin-bottom: 1rem; +} + +
+ +
+`; diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index 4207ba2974..7ea8e529a4 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -21,9 +21,10 @@ const BulletedList = styled.ul` content: ' '; position: absolute; border-width: 1rem; - border: 0.1875rem solid ${C_SHADOW}; - background-color: ${C_SHADOW}; - border-radius: 50%; + border: 0.1875rem solid ${({ bulletPointColour }) => bulletPointColour}; + background-color: ${({ bulletPointColour }) => bulletPointColour}; + border-radius: ${({ bulletPointShape }) => + bulletPointShape === 'round' ? '50%' : '0'}; ${({ dir }) => (dir === 'rtl' ? 'right: -1rem;' : 'left: -1rem;')} } `; @@ -32,11 +33,15 @@ BulletedList.propTypes = { script: shape(scriptPropType).isRequired, 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 0000f7c6cc..ca1db5b53d 100644 --- a/packages/components/psammead-bulleted-list/src/index.stories.jsx +++ b/packages/components/psammead-bulleted-list/src/index.stories.jsx @@ -23,4 +23,26 @@ storiesOf('Components/BulletedList', module) ), { notes }, + ) + .add( + 'red square bullets', + ({ text, script, service, dir }) => ( + + {text} + + {text} {text} + + {text.substring(0, 10)} + + {text} {text} {text} {text} + + + ), + { notes }, ); diff --git a/packages/components/psammead-bulleted-list/src/index.test.jsx b/packages/components/psammead-bulleted-list/src/index.test.jsx index 0609e11d6f..108fcf7427 100644 --- a/packages/components/psammead-bulleted-list/src/index.test.jsx +++ b/packages/components/psammead-bulleted-list/src/index.test.jsx @@ -52,6 +52,19 @@ describe('PsammeadBulletedList', () => { expect(style.marginTop).toBe('0px'); }); + shouldMatchSnapshot( + 'should render correctly with custom bulletPointShape and bulletPointColour', + + First item on the list + Second item on the list + Final list item + , + ); + shouldMatchSnapshot( 'should render correctly from ltr',