From 08ae26f5215803494365656f3324f3538a4fd835 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Thu, 7 Nov 2019 21:02:55 +0000 Subject: [PATCH 01/33] Create psammead-bulleted-list --- .../CHANGELOG.md | 5 ++ .../psammead-psammead-bulleted-list/README.md | 53 +++++++++++++++++++ .../package-lock.json | 5 ++ .../package.json | 25 +++++++++ .../src/index.jsx | 5 ++ .../src/index.stories.jsx | 10 ++++ .../src/index.test.jsx | 13 +++++ 7 files changed, 116 insertions(+) create mode 100644 packages/components/psammead-psammead-bulleted-list/CHANGELOG.md create mode 100644 packages/components/psammead-psammead-bulleted-list/README.md create mode 100644 packages/components/psammead-psammead-bulleted-list/package-lock.json create mode 100644 packages/components/psammead-psammead-bulleted-list/package.json create mode 100644 packages/components/psammead-psammead-bulleted-list/src/index.jsx create mode 100644 packages/components/psammead-psammead-bulleted-list/src/index.stories.jsx create mode 100644 packages/components/psammead-psammead-bulleted-list/src/index.test.jsx diff --git a/packages/components/psammead-psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-psammead-bulleted-list/CHANGELOG.md new file mode 100644 index 0000000000..fcfc294286 --- /dev/null +++ b/packages/components/psammead-psammead-bulleted-list/CHANGELOG.md @@ -0,0 +1,5 @@ +# Psammead Bulleted List Changelog + +| Version | Description | +|---------|-------------| +| 0.1.0-alpha.1 | [PR#XX](https://github.com/BBC-News/psammead/pull/XX) Initial creation of package. | diff --git a/packages/components/psammead-psammead-bulleted-list/README.md b/packages/components/psammead-psammead-bulleted-list/README.md new file mode 100644 index 0000000000..4fd81d57e8 --- /dev/null +++ b/packages/components/psammead-psammead-bulleted-list/README.md @@ -0,0 +1,53 @@ +# psammead-psammead-bulleted-list - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-psammead-bulleted-list%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-psammead-bulleted-list%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-psammead-bulleted-list) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-psammead-bulleted-list&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/psammead-bulleted-list--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-psammead-bulleted-list.svg)](https://www.npmjs.com/package/@bbc/psammead-psammead-bulleted-list) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) + +## Description + +The `PsammeadBulletedList` component does... + +## Installation + +```jsx +npm install @bbc/psammead-psammead-bulleted-list --save +``` + +## Props + +| Argument | Type | Required | Default | Example | +| --------- | ---- | -------- | ------- | ------- | +| No props. | | | | | + +## Usage + + + +``` +import PsammeadBulletedList from "@bbc/psammead-psammead-bulleted-list" +``` + +### When to use this component + + + +### When not to use this component + + + +### Accessibility notes + + + +### Roadmap + + + +## Contributing + +Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md). + +### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md) + +We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it. + +### License + +Psammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE). diff --git a/packages/components/psammead-psammead-bulleted-list/package-lock.json b/packages/components/psammead-psammead-bulleted-list/package-lock.json new file mode 100644 index 0000000000..ba219dc202 --- /dev/null +++ b/packages/components/psammead-psammead-bulleted-list/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "@bbc/psammead-psammead-bulleted-list", + "version": "0.1.0-alpha.1", + "lockfileVersion": 1 +} diff --git a/packages/components/psammead-psammead-bulleted-list/package.json b/packages/components/psammead-psammead-bulleted-list/package.json new file mode 100644 index 0000000000..49a93a3522 --- /dev/null +++ b/packages/components/psammead-psammead-bulleted-list/package.json @@ -0,0 +1,25 @@ +{ + "name": "@bbc/psammead-psammead-bulleted-list", + "version": "0.1.0-alpha.1", + "main": "dist/index.js", + "module": "esm/index.js", + "sideEffects": false, + "description": "React styled component for ordered and unordered lists", + "repository": { + "type": "git", + "url": "https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-psammead-bulleted-list" + }, + "author": { + "name": "Psammead Maintainers", + "email": "PsammeadMaintainers@bbc.co.uk" + }, + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/bbc/psammead/issues" + }, + "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-psammead-bulleted-list/README.md", + "dependencies": {}, + "peerDependencies": { + "react": "^16.11.0" + } +} diff --git a/packages/components/psammead-psammead-bulleted-list/src/index.jsx b/packages/components/psammead-psammead-bulleted-list/src/index.jsx new file mode 100644 index 0000000000..a82da876c1 --- /dev/null +++ b/packages/components/psammead-psammead-bulleted-list/src/index.jsx @@ -0,0 +1,5 @@ +import React from 'react'; + +const PsammeadBulletedList = () =>

Hello World

; + +export default PsammeadBulletedList; diff --git a/packages/components/psammead-psammead-bulleted-list/src/index.stories.jsx b/packages/components/psammead-psammead-bulleted-list/src/index.stories.jsx new file mode 100644 index 0000000000..683018d47a --- /dev/null +++ b/packages/components/psammead-psammead-bulleted-list/src/index.stories.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import notes from '../README.md'; +import PsammeadBulletedList from './index'; + +storiesOf('PsammeadBulletedList', module).add( + 'default', + () => , + { notes }, +); diff --git a/packages/components/psammead-psammead-bulleted-list/src/index.test.jsx b/packages/components/psammead-psammead-bulleted-list/src/index.test.jsx new file mode 100644 index 0000000000..0ffeee3847 --- /dev/null +++ b/packages/components/psammead-psammead-bulleted-list/src/index.test.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import { render } from '@testing-library/react'; +import PsammeadBulletedList from './index'; + +describe('PsammeadBulletedList', () => { + shouldMatchSnapshot('should render correctly', ); + + it('should test example template', () => { + const { container } = render(); + expect(container.querySelector('h1').textContent).toEqual('Hello World'); + }); +}); From 4d61078a3cad72f8268d8cba1e3aa8ab49b75d74 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Thu, 7 Nov 2019 21:06:02 +0000 Subject: [PATCH 02/33] Add initial snapshots --- .../src/__snapshots__/index.test.jsx.snap | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 packages/components/psammead-psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap diff --git a/packages/components/psammead-psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap new file mode 100644 index 0000000000..f8ad48563b --- /dev/null +++ b/packages/components/psammead-psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PsammeadBulletedList should render correctly 1`] = ` +

+ Hello World +

+`; From 5a9ecf2f0fc55cc4c1cb7e1fb312975635426b37 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Fri, 8 Nov 2019 11:42:39 +0000 Subject: [PATCH 03/33] Rename to psammead-bulleted-list --- .../CHANGELOG.md | 0 .../psammead-bulleted-list/README.md | 53 +++++++++++++++++++ .../package-lock.json | 2 +- .../package.json | 6 +-- .../src/__snapshots__/index.test.jsx.snap | 0 .../src/index.jsx | 0 .../src/index.stories.jsx | 0 .../src/index.test.jsx | 0 .../psammead-psammead-bulleted-list/README.md | 53 ------------------- 9 files changed, 57 insertions(+), 57 deletions(-) rename packages/components/{psammead-psammead-bulleted-list => psammead-bulleted-list}/CHANGELOG.md (100%) create mode 100644 packages/components/psammead-bulleted-list/README.md rename packages/components/{psammead-psammead-bulleted-list => psammead-bulleted-list}/package-lock.json (53%) rename packages/components/{psammead-psammead-bulleted-list => psammead-bulleted-list}/package.json (79%) rename packages/components/{psammead-psammead-bulleted-list => psammead-bulleted-list}/src/__snapshots__/index.test.jsx.snap (100%) rename packages/components/{psammead-psammead-bulleted-list => psammead-bulleted-list}/src/index.jsx (100%) rename packages/components/{psammead-psammead-bulleted-list => psammead-bulleted-list}/src/index.stories.jsx (100%) rename packages/components/{psammead-psammead-bulleted-list => psammead-bulleted-list}/src/index.test.jsx (100%) delete mode 100644 packages/components/psammead-psammead-bulleted-list/README.md diff --git a/packages/components/psammead-psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-bulleted-list/CHANGELOG.md similarity index 100% rename from packages/components/psammead-psammead-bulleted-list/CHANGELOG.md rename to packages/components/psammead-bulleted-list/CHANGELOG.md diff --git a/packages/components/psammead-bulleted-list/README.md b/packages/components/psammead-bulleted-list/README.md new file mode 100644 index 0000000000..ae0b176d96 --- /dev/null +++ b/packages/components/psammead-bulleted-list/README.md @@ -0,0 +1,53 @@ +# psammead-bulleted-list - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-bulleted-list%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-bulleted-list%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-bulleted-list) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-bulleted-list&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/psammead-bulleted-list--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-bulleted-list.svg)](https://www.npmjs.com/package/@bbc/psammead-bulleted-list) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) + +## Description + +The `PsammeadBulletedList` component does... + +## Installation + +```jsx +npm install @bbc/psammead-bulleted-list --save +``` + +## Props + +| Argument | Type | Required | Default | Example | +| --------- | ---- | -------- | ------- | ------- | +| No props. | | | | | + +## Usage + + + +``` +import PsammeadBulletedList from "@bbc/psammead-bulleted-list" +``` + +### When to use this component + + + +### When not to use this component + + + +### Accessibility notes + + + +### Roadmap + + + +## Contributing + +Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md). + +### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md) + +We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it. + +### License + +Psammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE). diff --git a/packages/components/psammead-psammead-bulleted-list/package-lock.json b/packages/components/psammead-bulleted-list/package-lock.json similarity index 53% rename from packages/components/psammead-psammead-bulleted-list/package-lock.json rename to packages/components/psammead-bulleted-list/package-lock.json index ba219dc202..3cb70e7677 100644 --- a/packages/components/psammead-psammead-bulleted-list/package-lock.json +++ b/packages/components/psammead-bulleted-list/package-lock.json @@ -1,5 +1,5 @@ { - "name": "@bbc/psammead-psammead-bulleted-list", + "name": "@bbc/psammead-bulleted-list", "version": "0.1.0-alpha.1", "lockfileVersion": 1 } diff --git a/packages/components/psammead-psammead-bulleted-list/package.json b/packages/components/psammead-bulleted-list/package.json similarity index 79% rename from packages/components/psammead-psammead-bulleted-list/package.json rename to packages/components/psammead-bulleted-list/package.json index 49a93a3522..680dfdfa2c 100644 --- a/packages/components/psammead-psammead-bulleted-list/package.json +++ b/packages/components/psammead-bulleted-list/package.json @@ -1,5 +1,5 @@ { - "name": "@bbc/psammead-psammead-bulleted-list", + "name": "@bbc/psammead-bulleted-list", "version": "0.1.0-alpha.1", "main": "dist/index.js", "module": "esm/index.js", @@ -7,7 +7,7 @@ "description": "React styled component for ordered and unordered lists", "repository": { "type": "git", - "url": "https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-psammead-bulleted-list" + "url": "https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-bulleted-list" }, "author": { "name": "Psammead Maintainers", @@ -17,7 +17,7 @@ "bugs": { "url": "https://github.com/bbc/psammead/issues" }, - "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-psammead-bulleted-list/README.md", + "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-bulleted-list/README.md", "dependencies": {}, "peerDependencies": { "react": "^16.11.0" diff --git a/packages/components/psammead-psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap similarity index 100% rename from packages/components/psammead-psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap rename to packages/components/psammead-bulleted-list/src/__snapshots__/index.test.jsx.snap diff --git a/packages/components/psammead-psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx similarity index 100% rename from packages/components/psammead-psammead-bulleted-list/src/index.jsx rename to packages/components/psammead-bulleted-list/src/index.jsx diff --git a/packages/components/psammead-psammead-bulleted-list/src/index.stories.jsx b/packages/components/psammead-bulleted-list/src/index.stories.jsx similarity index 100% rename from packages/components/psammead-psammead-bulleted-list/src/index.stories.jsx rename to packages/components/psammead-bulleted-list/src/index.stories.jsx diff --git a/packages/components/psammead-psammead-bulleted-list/src/index.test.jsx b/packages/components/psammead-bulleted-list/src/index.test.jsx similarity index 100% rename from packages/components/psammead-psammead-bulleted-list/src/index.test.jsx rename to packages/components/psammead-bulleted-list/src/index.test.jsx diff --git a/packages/components/psammead-psammead-bulleted-list/README.md b/packages/components/psammead-psammead-bulleted-list/README.md deleted file mode 100644 index 4fd81d57e8..0000000000 --- a/packages/components/psammead-psammead-bulleted-list/README.md +++ /dev/null @@ -1,53 +0,0 @@ -# psammead-psammead-bulleted-list - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-psammead-bulleted-list%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-psammead-bulleted-list%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-psammead-bulleted-list) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-psammead-bulleted-list&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/psammead-bulleted-list--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-psammead-bulleted-list.svg)](https://www.npmjs.com/package/@bbc/psammead-psammead-bulleted-list) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) - -## Description - -The `PsammeadBulletedList` component does... - -## Installation - -```jsx -npm install @bbc/psammead-psammead-bulleted-list --save -``` - -## Props - -| Argument | Type | Required | Default | Example | -| --------- | ---- | -------- | ------- | ------- | -| No props. | | | | | - -## Usage - - - -``` -import PsammeadBulletedList from "@bbc/psammead-psammead-bulleted-list" -``` - -### When to use this component - - - -### When not to use this component - - - -### Accessibility notes - - - -### Roadmap - - - -## Contributing - -Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md). - -### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md) - -We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it. - -### License - -Psammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE). From 6684799bf5e9d0f16be16f462e25a8c7dda76a21 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Fri, 15 Nov 2019 12:24:46 +0000 Subject: [PATCH 04/33] Add bullet svg --- packages/components/psammead-bulleted-list/src/bullet.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/components/psammead-bulleted-list/src/bullet.svg diff --git a/packages/components/psammead-bulleted-list/src/bullet.svg b/packages/components/psammead-bulleted-list/src/bullet.svg new file mode 100644 index 0000000000..9e49f8dbfb --- /dev/null +++ b/packages/components/psammead-bulleted-list/src/bullet.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 4e47e48688d418667c8072c2f0b060c7be877257 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Fri, 15 Nov 2019 12:25:15 +0000 Subject: [PATCH 05/33] Create styled components --- .../psammead-bulleted-list/src/index.jsx | 29 +++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index a82da876c1..412569b22a 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -1,5 +1,28 @@ -import React from 'react'; +import styled from 'styled-components'; +import { getBodyCopy } from '@bbc/gel-foundations/typography'; +import { getSansRegular } from '@bbc/psammead-styles/font-styles'; +import { GEL_SPACING_TRPL } from '@bbc/gel-foundations/spacings'; +import Bullet from './bullet.svg'; -const PsammeadBulletedList = () =>

Hello World

; +export const BulletedList = styled.ul` + ${({ script }) => script && getBodyCopy(script)}; + ${({ service }) => getSansRegular(service)} + list-style-type: none; +`; -export default PsammeadBulletedList; +export const BulletedListItem = styled.li` + &::before { + content: '\u00A0'; + background: url(${Bullet}) no-repeat + ${({ dir }) => (dir === 'rtl' ? 'right' : 'left')} center; + display: inline-block; + width: ${GEL_SPACING_TRPL}; + background-size: 30%; + ${({ dir }) => + dir === 'rtl' + ? `margin-right: -${GEL_SPACING_TRPL}` + : `margin-left: -${GEL_SPACING_TRPL}`}; + } +`; + +export default BulletedList; From 5126a282f54949e6a666f5fdd3fc1a7a48edcf64 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Fri, 15 Nov 2019 12:25:40 +0000 Subject: [PATCH 06/33] Create styled stories --- .../src/index.stories.jsx | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.stories.jsx b/packages/components/psammead-bulleted-list/src/index.stories.jsx index 683018d47a..07fc858dba 100644 --- a/packages/components/psammead-bulleted-list/src/index.stories.jsx +++ b/packages/components/psammead-bulleted-list/src/index.stories.jsx @@ -1,10 +1,26 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; +import { withKnobs } from '@storybook/addon-knobs'; +import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; import notes from '../README.md'; -import PsammeadBulletedList from './index'; +import { BulletedList, BulletedListItem } from './index'; -storiesOf('PsammeadBulletedList', module).add( - 'default', - () => , - { notes }, -); +storiesOf('Components|BulletedList', module) + .addDecorator(withKnobs) + .addDecorator(withServicesKnob()) + .add( + 'default', + ({ text, script, service, dir }) => ( + + {text} + + {text} {text} + + {text.substring(0, 10)} + + {text} {text} {text} {text} + + + ), + { notes }, + ); From 78f714d0ee85336d600a801b16d26c04f9706409 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 12:48:44 +0000 Subject: [PATCH 07/33] Update bullet color --- packages/components/psammead-bulleted-list/src/bullet.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/src/bullet.svg b/packages/components/psammead-bulleted-list/src/bullet.svg index 9e49f8dbfb..c0a6a1cc3c 100644 --- a/packages/components/psammead-bulleted-list/src/bullet.svg +++ b/packages/components/psammead-bulleted-list/src/bullet.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file From 631d521b3011fb967604470ce24cb1b26dfd40c3 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 12:49:06 +0000 Subject: [PATCH 08/33] Install jest-svg-transformer --- package-lock.json | 116 ++++++++++++++++++++++++---------------------- package.json | 7 ++- 2 files changed, 67 insertions(+), 56 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7319ae9b37..5c03c786fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13139,7 +13139,7 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true @@ -13153,14 +13153,14 @@ }, "aproba": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": "", + "resolved": false, "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, @@ -13178,7 +13178,7 @@ }, "brace-expansion": { "version": "1.1.11", - "resolved": "", + "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -13189,7 +13189,7 @@ }, "chownr": { "version": "1.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "dev": true, "optional": true @@ -13217,14 +13217,14 @@ }, "core-util-is": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true }, "debug": { "version": "4.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "dev": true, "optional": true, @@ -13234,28 +13234,28 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "", + "resolved": false, "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": "", + "resolved": false, "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "dev": true, "optional": true, @@ -13265,14 +13265,14 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "", + "resolved": false, "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -13289,7 +13289,7 @@ }, "glob": { "version": "7.1.3", - "resolved": "", + "resolved": false, "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "dev": true, "optional": true, @@ -13304,14 +13304,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": "", + "resolved": false, "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, @@ -13321,7 +13321,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": "", + "resolved": false, "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -13331,7 +13331,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "", + "resolved": false, "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -13349,14 +13349,14 @@ }, "ini": { "version": "1.3.5", - "resolved": "", + "resolved": false, "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -13366,14 +13366,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": "", + "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -13390,7 +13390,7 @@ }, "minipass": { "version": "2.3.5", - "resolved": "", + "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, "optional": true, @@ -13401,7 +13401,7 @@ }, "minizlib": { "version": "1.2.1", - "resolved": "", + "resolved": false, "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", "dev": true, "optional": true, @@ -13411,7 +13411,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "", + "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "optional": true, @@ -13421,14 +13421,14 @@ }, "ms": { "version": "2.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "dev": true, "optional": true }, "needle": { "version": "2.3.0", - "resolved": "", + "resolved": false, "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", "dev": true, "optional": true, @@ -13440,7 +13440,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": "", + "resolved": false, "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "dev": true, "optional": true, @@ -13459,7 +13459,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -13470,14 +13470,14 @@ }, "npm-bundled": { "version": "1.0.6", - "resolved": "", + "resolved": false, "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.4.1", - "resolved": "", + "resolved": false, "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", "dev": true, "optional": true, @@ -13488,7 +13488,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -13508,14 +13508,14 @@ }, "object-assign": { "version": "4.1.1", - "resolved": "", + "resolved": false, "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "", + "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -13525,21 +13525,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "", + "resolved": false, "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -13550,21 +13550,21 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": "", + "resolved": false, "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true, "optional": true }, "rc": { "version": "1.2.8", - "resolved": "", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, @@ -13577,7 +13577,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -13586,7 +13586,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "", + "resolved": false, "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, @@ -13602,7 +13602,7 @@ }, "rimraf": { "version": "2.6.3", - "resolved": "", + "resolved": false, "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "dev": true, "optional": true, @@ -13619,42 +13619,42 @@ }, "safer-buffer": { "version": "2.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": "", + "resolved": false, "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.7.0", - "resolved": "", + "resolved": false, "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -13666,7 +13666,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, @@ -13676,7 +13676,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -13686,14 +13686,14 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "tar": { "version": "4.4.8", - "resolved": "", + "resolved": false, "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", "dev": true, "optional": true, @@ -13709,14 +13709,14 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": "", + "resolved": false, "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, @@ -16867,6 +16867,12 @@ "css": "^2.2.4" } }, + "jest-svg-transformer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/jest-svg-transformer/-/jest-svg-transformer-1.0.0.tgz", + "integrity": "sha1-44iEykzYsilc36KgskZnkgw6im0=", + "dev": true + }, "jest-util": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz", diff --git a/package.json b/package.json index 4cc576b7bf..f20086cc7e 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "jest": "^24.9.0", "jest-fetch-mock": "^2.1.2", "jest-styled-components": "^6.3.3", + "jest-svg-transformer": "^1.0.0", "json5": "^2.1.1", "lerna": "^3.18.4", "lint-staged": "^9.4.2", @@ -147,7 +148,11 @@ "testMatch": [ "**/*.test.{js,jsx}", "!**/.yeoman/templates/**" - ] + ], + "transform": { + "^.+\\.jsx?$": "babel-jest", + "^.+\\.svg$": "jest-svg-transformer" + } }, "spec": { "prune": false, From f4a2edad9371f5144929ce09de54e0ea285069b9 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 13:03:56 +0000 Subject: [PATCH 09/33] Move all props to Bulleted List component --- .../components/psammead-bulleted-list/src/index.jsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index 412569b22a..19c8cd4d69 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -4,24 +4,21 @@ import { getSansRegular } from '@bbc/psammead-styles/font-styles'; import { GEL_SPACING_TRPL } from '@bbc/gel-foundations/spacings'; import Bullet from './bullet.svg'; -export const BulletedList = styled.ul` +const BulletedList = styled.ul` ${({ script }) => script && getBodyCopy(script)}; ${({ service }) => getSansRegular(service)} list-style-type: none; -`; - -export const BulletedListItem = styled.li` - &::before { + & > li::before { content: '\u00A0'; - background: url(${Bullet}) no-repeat - ${({ dir }) => (dir === 'rtl' ? 'right' : 'left')} center; display: inline-block; width: ${GEL_SPACING_TRPL}; - background-size: 30%; + background: url(${Bullet}) no-repeat + ${({ dir }) => (dir === 'rtl' ? 'right' : 'left')} center; ${({ dir }) => dir === 'rtl' ? `margin-right: -${GEL_SPACING_TRPL}` : `margin-left: -${GEL_SPACING_TRPL}`}; + background-size: 30%; } `; From b1bbe3f0f94d60d66b304767369cea6c7883f489 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 13:04:11 +0000 Subject: [PATCH 10/33] Update stories to match component --- .../psammead-bulleted-list/src/index.stories.jsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.stories.jsx b/packages/components/psammead-bulleted-list/src/index.stories.jsx index 07fc858dba..938bb86750 100644 --- a/packages/components/psammead-bulleted-list/src/index.stories.jsx +++ b/packages/components/psammead-bulleted-list/src/index.stories.jsx @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; import notes from '../README.md'; -import { BulletedList, BulletedListItem } from './index'; +import BulletedList from './index'; storiesOf('Components|BulletedList', module) .addDecorator(withKnobs) @@ -11,15 +11,15 @@ storiesOf('Components|BulletedList', module) .add( 'default', ({ text, script, service, dir }) => ( - - {text} - + +
  • {text}
  • +
  • {text} {text} - - {text.substring(0, 10)} - +
  • +
  • {text.substring(0, 10)}
  • +
  • {text} {text} {text} {text} - +
  • ), { notes }, From 44c882a30dc36d2cc71c6d1ebf8a214d99afabb1 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 13:04:23 +0000 Subject: [PATCH 11/33] Add tests for rtl and ltr --- .../psammead-bulleted-list/src/index.test.jsx | 37 +++++++++++++++---- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.test.jsx b/packages/components/psammead-bulleted-list/src/index.test.jsx index 0ffeee3847..44047973a6 100644 --- a/packages/components/psammead-bulleted-list/src/index.test.jsx +++ b/packages/components/psammead-bulleted-list/src/index.test.jsx @@ -1,13 +1,36 @@ import React from 'react'; import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; -import { render } from '@testing-library/react'; -import PsammeadBulletedList from './index'; +import { arabic, latin } from '@bbc/gel-foundations/scripts'; +import BulletedList from './index'; + +const ltrProps = { + dir: 'ltr', + script: latin, + service: 'news', +}; + +const rtlProps = { + dir: 'rtl', + script: arabic, + service: 'news', +}; describe('PsammeadBulletedList', () => { - shouldMatchSnapshot('should render correctly', ); + shouldMatchSnapshot( + 'should render correctly from ltr', + +
  • First item on the list
  • +
  • Second item on the list
  • +
  • Final list item
  • +
    , + ); - it('should test example template', () => { - const { container } = render(); - expect(container.querySelector('h1').textContent).toEqual('Hello World'); - }); + shouldMatchSnapshot( + 'should render correctly from rtl', + +
  • العنصر الأول في القائمة
  • +
  • البند الثاني في القائمة
  • +
  • عنصر القائمة النهائية
  • +
    , + ); }); From 1de15cd9a040d713c6a61213aa285247ff1005d4 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 13:24:49 +0000 Subject: [PATCH 12/33] Encode Svg URI --- .../psammead-bulleted-list/src/index.jsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index 19c8cd4d69..1770cd0f61 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -1,9 +1,21 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { getBodyCopy } from '@bbc/gel-foundations/typography'; import { getSansRegular } from '@bbc/psammead-styles/font-styles'; import { GEL_SPACING_TRPL } from '@bbc/gel-foundations/spacings'; import Bullet from './bullet.svg'; +const dirBackground = css` + background: url("${encodeURIComponent(Bullet)}") no-repeat + ${({ dir }) => (dir === 'rtl' ? 'right' : 'left')} center; +`; + +const dirMargin = css` + ${({ dir }) => + dir === 'rtl' + ? `margin-right: -${GEL_SPACING_TRPL}` + : `margin-left: -${GEL_SPACING_TRPL}`}; +`; + const BulletedList = styled.ul` ${({ script }) => script && getBodyCopy(script)}; ${({ service }) => getSansRegular(service)} @@ -12,12 +24,8 @@ const BulletedList = styled.ul` content: '\u00A0'; display: inline-block; width: ${GEL_SPACING_TRPL}; - background: url(${Bullet}) no-repeat - ${({ dir }) => (dir === 'rtl' ? 'right' : 'left')} center; - ${({ dir }) => - dir === 'rtl' - ? `margin-right: -${GEL_SPACING_TRPL}` - : `margin-left: -${GEL_SPACING_TRPL}`}; + ${dirBackground} + ${dirMargin} background-size: 30%; } `; From 396c236dd7779917e386017a5141f0101b02cf8b Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 13:25:00 +0000 Subject: [PATCH 13/33] Update snapshots --- .../src/__snapshots__/index.test.jsx.snap | 68 +++++++++++++++++-- 1 file changed, 64 insertions(+), 4 deletions(-) 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 f8ad48563b..27478edf2b 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 @@ -1,7 +1,67 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PsammeadBulletedList should render correctly 1`] = ` -

    - Hello World -

    +exports[`PsammeadBulletedList should render correctly from ltr 1`] = ` +.c0 { + font-size: 0.9375rem; + line-height: 1.25rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + list-style-type: none; +} + +.c0 > li::before { + content: ' '; + display: inline-block; + width: 1.5rem; + background: url("function%20SvgBullet(props)%20%7B%0A%20%20return%20React.createElement(%0A%20%20%20%20'svg'%2C%20%0A%20%20%20%20Object.assign(%7B%7D%2C%20props%2C%20%7B'data-file-name'%3A%20SvgBullet.name%7D)%0A%20%20)%3B%0A%7D") no-repeat left center; + margin-left: -1.5rem; + background-size: 30%; +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c0 { + font-size: 1rem; + line-height: 1.375rem; + } +} + +@media (min-width:37.5rem) { + .c0 { + font-size: 1rem; + line-height: 1.375rem; + } +} + +
      +
    • + First item on the list +
    • +
    • + Second item on the list +
    • +
    • + Final list item +
    • +
    +`; + +exports[`PsammeadBulletedList should render correctly from rtl 1`] = ` +
      +
    • + العنصر الأول في القائمة +
    • +
    • + البند الثاني في القائمة +
    • +
    • + عنصر القائمة النهائية +
    • +
    `; From 836c20dcc4e0ec42e6b5fa80cf8cd16b45854cc4 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 14:26:36 +0000 Subject: [PATCH 14/33] Update Changelog --- packages/components/psammead-bulleted-list/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/CHANGELOG.md b/packages/components/psammead-bulleted-list/CHANGELOG.md index fcfc294286..9d58c6369b 100644 --- a/packages/components/psammead-bulleted-list/CHANGELOG.md +++ b/packages/components/psammead-bulleted-list/CHANGELOG.md @@ -2,4 +2,4 @@ | Version | Description | |---------|-------------| -| 0.1.0-alpha.1 | [PR#XX](https://github.com/BBC-News/psammead/pull/XX) Initial creation of package. | +| 0.1.0-alpha.1 | [PR#2583](https://github.com/BBC-News/psammead/pull/2583) Initial creation of package. | From 6d174cf3f2c774db0fb64e727a30348b4d7e0c3c Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 14:26:51 +0000 Subject: [PATCH 15/33] Update README --- .../psammead-bulleted-list/README.md | 38 +++++++++++++------ 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/components/psammead-bulleted-list/README.md b/packages/components/psammead-bulleted-list/README.md index ae0b176d96..acd39403be 100644 --- a/packages/components/psammead-bulleted-list/README.md +++ b/packages/components/psammead-bulleted-list/README.md @@ -1,8 +1,12 @@ +# ⛔️ This is an alpha component ⛔️ + +This component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed. + # psammead-bulleted-list - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-bulleted-list%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-bulleted-list%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-bulleted-list) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-bulleted-list)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-bulleted-list&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/psammead-bulleted-list--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-bulleted-list.svg)](https://www.npmjs.com/package/@bbc/psammead-bulleted-list) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) ## Description -The `PsammeadBulletedList` component does... +The `BulletedList` component is a styled bulleted (unordered) list that works for right-to-left and left-to-right languages. ## Installation @@ -14,31 +18,43 @@ npm install @bbc/psammead-bulleted-list --save | Argument | Type | Required | Default | Example | | --------- | ---- | -------- | ------- | ------- | -| No props. | | | | | +| 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'` | ## Usage - +Use `BulletedList` in place of a `ul` element with required props. It styles all its direct `li` children. + +```jsx +import BulletedList from "@bbc/psammead-bulleted-list"; + +const props = { + dir: 'ltr', + script: latin, + service: 'news', +}; + + +
  • A list item
  • +
  • Another item
  • +
    -``` -import PsammeadBulletedList from "@bbc/psammead-bulleted-list" ``` ### When to use this component - +`BulletedLst`s can be used wherever you need a standard GEL unordered list. ### When not to use this component - +It's not ideal for ordered lists or for when you need a custom bullet. Use the standard
      or
        respectively in those cases. ### Accessibility notes - - -### Roadmap +The bullets in `psammead-bulleted-lists` are not read by screen readers and are generated using pseudo-elements. - + ## Contributing From 517156314f8540278007f1eca752c1d4a7c0a779 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 14:28:45 +0000 Subject: [PATCH 16/33] Update README --- packages/components/psammead-bulleted-list/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/README.md b/packages/components/psammead-bulleted-list/README.md index acd39403be..6178bc55a6 100644 --- a/packages/components/psammead-bulleted-list/README.md +++ b/packages/components/psammead-bulleted-list/README.md @@ -48,7 +48,7 @@ const props = { ### When not to use this component -It's not ideal for ordered lists or for when you need a custom bullet. Use the standard
          or
            respectively in those cases. +It's not ideal for when you need a custom bullet. Use the standard
              instead if you need to style your bullets. ### Accessibility notes From 04c4bb4125562f9ea6406098658dc7d3a9fe07b2 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 14:42:11 +0000 Subject: [PATCH 17/33] Update dependencies and set publish tag --- .../components/psammead-bulleted-list/package.json | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-bulleted-list/package.json b/packages/components/psammead-bulleted-list/package.json index 680dfdfa2c..4540ff3ca3 100644 --- a/packages/components/psammead-bulleted-list/package.json +++ b/packages/components/psammead-bulleted-list/package.json @@ -18,8 +18,14 @@ "url": "https://github.com/bbc/psammead/issues" }, "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-bulleted-list/README.md", - "dependencies": {}, + "dependencies": { + "@bbc/gel-foundations": "^3.4.1", + "@bbc/psammead-styles": "^4.1.0" + }, "peerDependencies": { - "react": "^16.11.0" + "styled-components": "^4.3.2" + }, + "publishConfig": { + "tag": "alpha" } } From 665ccc45e11dabd9a849950a91a7c4a5c80609d3 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 14:42:21 +0000 Subject: [PATCH 18/33] Update package lock --- .../psammead-bulleted-list/package-lock.json | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/package-lock.json b/packages/components/psammead-bulleted-list/package-lock.json index 3cb70e7677..f073abbf62 100644 --- a/packages/components/psammead-bulleted-list/package-lock.json +++ b/packages/components/psammead-bulleted-list/package-lock.json @@ -1,5 +1,14 @@ { "name": "@bbc/psammead-bulleted-list", "version": "0.1.0-alpha.1", - "lockfileVersion": 1 + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@bbc/gel-foundations": { + "version": "3.4.1" + }, + "@bbc/psammead-styles": { + "version": "4.1.0" + } + } } From 9bb29a4f52ba0e60df04567f23ed51af76889ee4 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 14:54:10 +0000 Subject: [PATCH 19/33] Fix unexpected semicolon issue --- packages/components/psammead-bulleted-list/src/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index 1770cd0f61..370a8924cc 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -13,7 +13,7 @@ const dirMargin = css` ${({ dir }) => dir === 'rtl' ? `margin-right: -${GEL_SPACING_TRPL}` - : `margin-left: -${GEL_SPACING_TRPL}`}; + : `margin-left: -${GEL_SPACING_TRPL}`} `; const BulletedList = styled.ul` @@ -25,7 +25,7 @@ const BulletedList = styled.ul` display: inline-block; width: ${GEL_SPACING_TRPL}; ${dirBackground} - ${dirMargin} + ${dirMargin}; background-size: 30%; } `; From ec00e9fea5bdeb6167160c6ae1b29ef8cdac6af1 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 15:10:38 +0000 Subject: [PATCH 20/33] Update psammead changelog --- CHANGELOG.md | 1 + package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1036a2396b..b3e844c001 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 2.0.4 | [PR#2583](https://github.com/bbc/psammead/pull/2583) Install jest-svg-transformer | | 2.0.4 | [PR#2650](https://github.com/bbc/psammead/pull/2650) Update codeowners | | 2.0.3 | [PR#2647](https://github.com/bbc/psammead/pull/2647) Talos - Bump Dependencies - @bbc/psammead-assets, @bbc/psammead-image-placeholder, @bbc/psammead-media-indicator | | 2.0.2 | [PR#2645](https://github.com/bbc/psammead/pull/2645) Talos - Bump Dependencies - @bbc/psammead-assets | diff --git a/package-lock.json b/package-lock.json index 38fef266d5..feade21e44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead", - "version": "2.0.4", + "version": "2.0.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 2f7ed618db..f4ddd757bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead", - "version": "2.0.4", + "version": "2.0.5", "description": "Core Components Library Developed & Maintained By The Articles and Reach & Languages Team", "main": "index.js", "private": true, From 6b8f6948533424e9d54b7bc697cc6d452641ae77 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 15:58:25 +0000 Subject: [PATCH 21/33] Fix changelog typo --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b3e844c001..2919387af0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 2.0.4 | [PR#2583](https://github.com/bbc/psammead/pull/2583) Install jest-svg-transformer | +| 2.0.5 | [PR#2583](https://github.com/bbc/psammead/pull/2583) Install jest-svg-transformer | | 2.0.4 | [PR#2650](https://github.com/bbc/psammead/pull/2650) Update codeowners | | 2.0.3 | [PR#2647](https://github.com/bbc/psammead/pull/2647) Talos - Bump Dependencies - @bbc/psammead-assets, @bbc/psammead-image-placeholder, @bbc/psammead-media-indicator | | 2.0.2 | [PR#2645](https://github.com/bbc/psammead/pull/2645) Talos - Bump Dependencies - @bbc/psammead-assets | From 2579e05ab3d5e4f5a9345f26b71e559769cc219d Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 15:58:32 +0000 Subject: [PATCH 22/33] Fix readme typo --- packages/components/psammead-bulleted-list/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/README.md b/packages/components/psammead-bulleted-list/README.md index 6178bc55a6..d480520ffa 100644 --- a/packages/components/psammead-bulleted-list/README.md +++ b/packages/components/psammead-bulleted-list/README.md @@ -44,7 +44,7 @@ const props = { ### When to use this component -`BulletedLst`s can be used wherever you need a standard GEL unordered list. +`BulletedList`s can be used wherever you need a standard GEL unordered list. ### When not to use this component From 7ebef1499519a6a84a3b1b54b58beeb9e4536dbe Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Mon, 18 Nov 2019 15:59:53 +0000 Subject: [PATCH 23/33] Fix arabic service in test --- packages/components/psammead-bulleted-list/src/index.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/src/index.test.jsx b/packages/components/psammead-bulleted-list/src/index.test.jsx index 44047973a6..943e01534a 100644 --- a/packages/components/psammead-bulleted-list/src/index.test.jsx +++ b/packages/components/psammead-bulleted-list/src/index.test.jsx @@ -12,7 +12,7 @@ const ltrProps = { const rtlProps = { dir: 'rtl', script: arabic, - service: 'news', + service: 'arabic', }; describe('PsammeadBulletedList', () => { From c3f2c2a635b3cc9630428a387dd8dd9ee2bc31a0 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Wed, 20 Nov 2019 09:05:29 +0000 Subject: [PATCH 24/33] Move direction methods into Bulleted list style --- .../psammead-bulleted-list/src/index.jsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index 370a8924cc..d19e08df72 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -1,20 +1,11 @@ -import styled, { css } from 'styled-components'; +// import ReactDOMServer from 'react-dom/server'; +import styled from 'styled-components'; import { getBodyCopy } from '@bbc/gel-foundations/typography'; import { getSansRegular } from '@bbc/psammead-styles/font-styles'; import { GEL_SPACING_TRPL } from '@bbc/gel-foundations/spacings'; -import Bullet from './bullet.svg'; +// import { coreIcons } from '@bbc/psammead-assets/svgs'; -const dirBackground = css` - background: url("${encodeURIComponent(Bullet)}") no-repeat - ${({ dir }) => (dir === 'rtl' ? 'right' : 'left')} center; -`; - -const dirMargin = css` - ${({ dir }) => - dir === 'rtl' - ? `margin-right: -${GEL_SPACING_TRPL}` - : `margin-left: -${GEL_SPACING_TRPL}`} -`; +// const Bullet = btoa(ReactDOMServer.renderToString(coreIcons.bullet)); const BulletedList = styled.ul` ${({ script }) => script && getBodyCopy(script)}; @@ -24,8 +15,12 @@ const BulletedList = styled.ul` content: '\u00A0'; display: inline-block; width: ${GEL_SPACING_TRPL}; - ${dirBackground} - ${dirMargin}; + background: url('data:image/svg+xml;base64,') no-repeat; + ${({ dir }) => (dir === 'rtl' ? 'right' : 'left')} center; + ${({ dir }) => + dir === 'rtl' + ? `margin-right: -${GEL_SPACING_TRPL}` + : `margin-left: -${GEL_SPACING_TRPL}`}; background-size: 30%; } `; From bbaf7e2cb46c5a78ca6263ecd2b664d486cf934f Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Wed, 20 Nov 2019 09:05:43 +0000 Subject: [PATCH 25/33] Update snapshots --- .../src/__snapshots__/index.test.jsx.snap | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) 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 27478edf2b..8179a01954 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 @@ -14,7 +14,8 @@ exports[`PsammeadBulletedList should render correctly from ltr 1`] = ` content: ' '; display: inline-block; width: 1.5rem; - background: url("function%20SvgBullet(props)%20%7B%0A%20%20return%20React.createElement(%0A%20%20%20%20'svg'%2C%20%0A%20%20%20%20Object.assign(%7B%7D%2C%20props%2C%20%7B'data-file-name'%3A%20SvgBullet.name%7D)%0A%20%20)%3B%0A%7D") no-repeat left center; + background: url('data:image/svg+xml;base64,') no-repeat; + left: center; margin-left: -1.5rem; background-size: 30%; } @@ -50,8 +51,41 @@ exports[`PsammeadBulletedList should render correctly from ltr 1`] = ` `; exports[`PsammeadBulletedList should render correctly from rtl 1`] = ` +.c0 { + font-size: 1.125rem; + line-height: 1.75rem; + font-family: "BBC Nassim Arabic",Arial,Verdana,Geneva,Helvetica,sans-serif; + font-weight: 400; + font-style: normal; + list-style-type: none; +} + +.c0 > li::before { + content: ' '; + display: inline-block; + width: 1.5rem; + background: url('data:image/svg+xml;base64,') no-repeat; + right: center; + margin-right: -1.5rem; + background-size: 30%; +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c0 { + font-size: 1.375rem; + line-height: 2rem; + } +} + +@media (min-width:37.5rem) { + .c0 { + font-size: 1.375rem; + line-height: 2rem; + } +} +
              • From 7ba5ceaf7442d4064a4676fba34e3e5491755fd8 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Wed, 20 Nov 2019 09:09:10 +0000 Subject: [PATCH 26/33] Remove svg from bulleted-list --- packages/components/psammead-bulleted-list/src/bullet.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 packages/components/psammead-bulleted-list/src/bullet.svg diff --git a/packages/components/psammead-bulleted-list/src/bullet.svg b/packages/components/psammead-bulleted-list/src/bullet.svg deleted file mode 100644 index c0a6a1cc3c..0000000000 --- a/packages/components/psammead-bulleted-list/src/bullet.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From 6a9fb5e236cccdf4c4177898b51f43052386f2ae Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Wed, 20 Nov 2019 09:10:56 +0000 Subject: [PATCH 27/33] Uninstall jest transformer --- package-lock.json | 6 ------ package.json | 7 +------ 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 28cba6fc6e..7d28745d4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16867,12 +16867,6 @@ "css": "^2.2.4" } }, - "jest-svg-transformer": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/jest-svg-transformer/-/jest-svg-transformer-1.0.0.tgz", - "integrity": "sha1-44iEykzYsilc36KgskZnkgw6im0=", - "dev": true - }, "jest-util": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz", diff --git a/package.json b/package.json index a81c57c62b..bcd98f2737 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,6 @@ "jest": "^24.9.0", "jest-fetch-mock": "^2.1.2", "jest-styled-components": "^6.3.4", - "jest-svg-transformer": "^1.0.0", "json5": "^2.1.1", "lerna": "^3.18.4", "lint-staged": "^9.4.3", @@ -148,11 +147,7 @@ "testMatch": [ "**/*.test.{js,jsx}", "!**/.yeoman/templates/**" - ], - "transform": { - "^.+\\.jsx?$": "babel-jest", - "^.+\\.svg$": "jest-svg-transformer" - } + ] }, "spec": { "prune": false, From 9b92989967daad797a48893e373836b515f822ec Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Wed, 20 Nov 2019 09:15:25 +0000 Subject: [PATCH 28/33] Add react-dom to peer dependencies --- packages/components/psammead-bulleted-list/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/package.json b/packages/components/psammead-bulleted-list/package.json index 4540ff3ca3..c8ebeeebfc 100644 --- a/packages/components/psammead-bulleted-list/package.json +++ b/packages/components/psammead-bulleted-list/package.json @@ -23,7 +23,8 @@ "@bbc/psammead-styles": "^4.1.0" }, "peerDependencies": { - "styled-components": "^4.3.2" + "styled-components": "^4.3.2", + "react-dom": "^16.12.0" }, "publishConfig": { "tag": "alpha" From 4d7e3609b24d368fc2df9bcd619668fca0ec120a Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Wed, 20 Nov 2019 10:54:31 +0000 Subject: [PATCH 29/33] Add proptypes to BulletedList --- .../components/psammead-bulleted-list/src/index.jsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index d19e08df72..fd612c8c1f 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -1,8 +1,10 @@ // import ReactDOMServer from 'react-dom/server'; import styled from 'styled-components'; +import { string, oneOf, shape } from 'prop-types'; import { getBodyCopy } from '@bbc/gel-foundations/typography'; import { getSansRegular } from '@bbc/psammead-styles/font-styles'; import { GEL_SPACING_TRPL } from '@bbc/gel-foundations/spacings'; +import { scriptPropType } from '@bbc/gel-foundations/prop-types'; // import { coreIcons } from '@bbc/psammead-assets/svgs'; // const Bullet = btoa(ReactDOMServer.renderToString(coreIcons.bullet)); @@ -25,4 +27,14 @@ const BulletedList = styled.ul` } `; +BulletedList.propTypes = { + script: shape(scriptPropType).isRequired, + dir: oneOf(['ltr', 'rtl']), + service: string.isRequired, +}; + +BulletedList.defaultProps = { + dir: 'ltr', +}; + export default BulletedList; From a93b6ecdd0fab2bc6ebd5c40c20641e662a6999d Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Thu, 21 Nov 2019 08:55:01 +0000 Subject: [PATCH 30/33] Fix svg --- .../psammead-bulleted-list/src/index.jsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index fd612c8c1f..ca892ad352 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -1,13 +1,9 @@ -// import ReactDOMServer from 'react-dom/server'; import styled from 'styled-components'; import { string, oneOf, shape } from 'prop-types'; import { getBodyCopy } from '@bbc/gel-foundations/typography'; import { getSansRegular } from '@bbc/psammead-styles/font-styles'; -import { GEL_SPACING_TRPL } from '@bbc/gel-foundations/spacings'; +import { GEL_SPACING_QUAD } from '@bbc/gel-foundations/spacings'; import { scriptPropType } from '@bbc/gel-foundations/prop-types'; -// import { coreIcons } from '@bbc/psammead-assets/svgs'; - -// const Bullet = btoa(ReactDOMServer.renderToString(coreIcons.bullet)); const BulletedList = styled.ul` ${({ script }) => script && getBodyCopy(script)}; @@ -16,14 +12,11 @@ const BulletedList = styled.ul` & > li::before { content: '\u00A0'; display: inline-block; - width: ${GEL_SPACING_TRPL}; - background: url('data:image/svg+xml;base64,') no-repeat; - ${({ dir }) => (dir === 'rtl' ? 'right' : 'left')} center; + width: ${GEL_SPACING_QUAD}; + background: url("data:image/svg+xml,%3Csvg height='10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='3'%3E%3C/circle%3E%3C/svg%3E") + no-repeat center; ${({ dir }) => - dir === 'rtl' - ? `margin-right: -${GEL_SPACING_TRPL}` - : `margin-left: -${GEL_SPACING_TRPL}`}; - background-size: 30%; + dir === 'rtl' ? `margin-right:` : `margin-left:`} -${GEL_SPACING_QUAD}; } `; From 2e9a03754d80c39f5da5f3428993829e70f96e10 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Thu, 21 Nov 2019 08:56:30 +0000 Subject: [PATCH 31/33] Format readme properly --- packages/components/psammead-bulleted-list/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/README.md b/packages/components/psammead-bulleted-list/README.md index d480520ffa..852220d8b4 100644 --- a/packages/components/psammead-bulleted-list/README.md +++ b/packages/components/psammead-bulleted-list/README.md @@ -48,7 +48,7 @@ const props = { ### When not to use this component -It's not ideal for when you need a custom bullet. Use the standard
                  instead if you need to style your bullets. +It's not ideal for when you need a custom bullet. Use the standard `
                    ` instead if you need to style your bullets. ### Accessibility notes From 9cbf7674d45cffefeb4285d359f4a2fc24a4b859 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Thu, 21 Nov 2019 08:57:32 +0000 Subject: [PATCH 32/33] Update snapshots --- .../src/__snapshots__/index.test.jsx.snap | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) 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 8179a01954..fa79e227ae 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 @@ -13,11 +13,9 @@ exports[`PsammeadBulletedList should render correctly from ltr 1`] = ` .c0 > li::before { content: ' '; display: inline-block; - width: 1.5rem; - background: url('data:image/svg+xml;base64,') no-repeat; - left: center; - margin-left: -1.5rem; - background-size: 30%; + width: 2rem; + background: url("data:image/svg+xml,%3Csvg height='10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center; + margin-left: -2rem; } @media (min-width:20rem) and (max-width:37.4375rem) { @@ -63,11 +61,9 @@ exports[`PsammeadBulletedList should render correctly from rtl 1`] = ` .c0 > li::before { content: ' '; display: inline-block; - width: 1.5rem; - background: url('data:image/svg+xml;base64,') no-repeat; - right: center; - margin-right: -1.5rem; - background-size: 30%; + width: 2rem; + background: url("data:image/svg+xml,%3Csvg height='10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center; + margin-right: -2rem; } @media (min-width:20rem) and (max-width:37.4375rem) { From e73238a19c2c5cff3b8d2f24bf190f51d8c020d8 Mon Sep 17 00:00:00 2001 From: Gerald Pharin Date: Thu, 21 Nov 2019 09:54:47 +0000 Subject: [PATCH 33/33] Fix css parsing issue --- packages/components/psammead-bulleted-list/src/index.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-bulleted-list/src/index.jsx b/packages/components/psammead-bulleted-list/src/index.jsx index ca892ad352..5246e131a7 100644 --- a/packages/components/psammead-bulleted-list/src/index.jsx +++ b/packages/components/psammead-bulleted-list/src/index.jsx @@ -16,7 +16,9 @@ const BulletedList = styled.ul` background: url("data:image/svg+xml,%3Csvg height='10' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center; ${({ dir }) => - dir === 'rtl' ? `margin-right:` : `margin-left:`} -${GEL_SPACING_QUAD}; + dir === 'rtl' + ? `margin-right: -${GEL_SPACING_QUAD};` + : `margin-left: -${GEL_SPACING_QUAD};`} } `;