Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Commit

Permalink
Merge pull request #4529 from bbc/square-bullets
Browse files Browse the repository at this point in the history 
Bulleted List - Customisable Shape and Colour
  • Loading branch information
@ryanmccombe
ryanmccombe authored Jul 30, 2021
2 parents 52a7bbe + cef8ee5 commit 416bed9
Show file tree
Hide file tree
Showing 8 changed files with 179 additions and 64 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
105 changes: 53 additions & 52 deletions packages/components/psammead-bulleted-list/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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. |
16 changes: 9 additions & 7 deletions packages/components/psammead-bulleted-list/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
};

<BulletedList {...props}>
<BulletedListItem>A list item</BulletedListItem>
<BulletedListItem>Another item</BulletedListItem>
</BulletedList>

```

### When to use this component
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-bulleted-list/package.json
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
Loading

0 comments on commit 416bed9

Please sign in to comment.