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

Commit

Permalink
Allow colour to be customised
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryanmccombe
ryanmccombe committed Jul 30, 2021
1 parent 7ce782c commit 47b7283
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 15 deletions.
2 changes: 1 addition & 1 deletion packages/components/psammead-bulleted-list/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
13 changes: 7 additions & 6 deletions packages/components/psammead-bulleted-list/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ exports[`PsammeadBulletedList should render correctly from rtl 1`] = `
</div>
`;

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;
Expand Down Expand Up @@ -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;
}
Expand Down
6 changes: 4 additions & 2 deletions packages/components/psammead-bulleted-list/src/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;')}
Expand All @@ -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`
Expand Down
3 changes: 2 additions & 1 deletion packages/components/psammead-bulleted-list/src/index.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@ storiesOf('Components/BulletedList', module)
{ notes },
)
.add(
'square bullets',
'red square bullets',
({ text, script, service, dir }) => (
<BulletedList
dir={dir}
script={script}
service={service}
bulletPointShape="square"
bulletPointColour="red"
>
<BulletedListItem>{text}</BulletedListItem>
<BulletedListItem>
Expand Down
8 changes: 6 additions & 2 deletions packages/components/psammead-bulleted-list/src/index.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,12 @@ describe('PsammeadBulletedList', () => {
});

shouldMatchSnapshot(
'should render correctly when bulletPointShape is square',
<BulletedList {...ltrProps} bulletPointShape="square">
'should render correctly with custom bulletPointShape and bulletPointColour',
<BulletedList
{...ltrProps}
bulletPointShape="square"
bulletPointColour="#f00"
>
<BulletedListItem>First item on the list</BulletedListItem>
<BulletedListItem>Second item on the list</BulletedListItem>
<BulletedListItem>Final list item</BulletedListItem>
Expand Down

0 comments on commit 47b7283

Please sign in to comment.