From bffcee13f6e1b0eba28e6ef06a097ddf21a2a8d9 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Mon, 21 Oct 2019 17:09:56 +0100 Subject: [PATCH 01/15] build all or some rtl variant substories --- .../psammead-paragraph/src/index.stories.jsx | 7 +++- .../src/buildRTLSubstories.js | 36 +++++++++++++---- .../src/buildRTLSubstories.test.js | 39 +++++++++++++------ 3 files changed, 62 insertions(+), 20 deletions(-) diff --git a/packages/components/psammead-paragraph/src/index.stories.jsx b/packages/components/psammead-paragraph/src/index.stories.jsx index b63817db19..3b4c85f824 100644 --- a/packages/components/psammead-paragraph/src/index.stories.jsx +++ b/packages/components/psammead-paragraph/src/index.stories.jsx @@ -7,8 +7,11 @@ import InlineLink from '@bbc/psammead-inline-link'; import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; import notes from '../README.md'; import Paragraph from './index'; +import { buildRTLSubstories } from '../../../utilities/psammead-storybook-helpers/src'; -storiesOf('Components|Paragraph', module) +const stories = storiesOf('Components|Paragraph', module); + +stories .addDecorator(withKnobs) .addDecorator(withServicesKnob()) .add( @@ -32,3 +35,5 @@ storiesOf('Components|Paragraph', module) { notes, knobs: { escapeHTML: false } }, ); + +buildRTLSubstories({ stories }); diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js index 5da8c90e0c..701f2f94eb 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js @@ -1,12 +1,32 @@ import { getStorybook, storiesOf } from '@storybook/react'; import withServicesKnob from './withServicesKnob'; -export default () => { - getStorybook().forEach(({ kind, stories }) => { - stories.forEach(({ name, render }) => { - storiesOf(`${kind}/RTL`, module) - .addDecorator(withServicesKnob({ defaultService: 'arabic' })) - .add(`RTL - ${name}`, render); - }); - }); +const matchesStoryKind = kind => story => story.kind === kind; + +const matchesStoryName = name => story => story.name === name; + +const buildRTLSubstory = (kind, name, storyFn) => + storiesOf(`${kind}/RTL`, module) + .addDecorator(withServicesKnob({ defaultService: 'arabic' })) + .add(`RTL - ${name}`, storyFn); + +export default ({ stories = {}, include = [] }) => { + const allStories = getStorybook(); + const storyKind = allStories.find(matchesStoryKind(stories.kind)); + + if (storyKind) { + if (include.length) { + include.forEach(name => { + const story = storyKind.stories.find(matchesStoryName(name)); + + if (story) { + buildRTLSubstory(stories.kind, name, story.render); + } + }); + } else { + storyKind.stories.forEach(({ name, render }) => + buildRTLSubstory(stories.kind, name, render), + ); + } + } }; diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js index ef03375c1f..f46c65776f 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js @@ -42,34 +42,51 @@ jest.mock('@storybook/react', () => ({ ]), })); -buildRTLSubstories(); +afterEach(jest.clearAllMocks); it('should get all stories', () => { + const stories = { kind: 'Components|Brand' }; + buildRTLSubstories({ stories }); + expect(getStorybook).toHaveBeenCalled(); }); -it('should add the withServicesKnob decorator', () => { +it('should add the withServicesKnob decorator so that the default service is configured', () => { + const stories = { kind: 'Components|Brand' }; + buildRTLSubstories({ stories }); + expect(withServicesKnob.default).toHaveBeenCalledWith({ defaultService: 'arabic', }); expect(mockAddDecorator).toHaveBeenCalledWith('withServicesKnob'); }); -it('should create the substories', () => { +it("should build RTL variants of story kind's full suite of stories", () => { + const stories = { kind: 'Components|Brand' }; + buildRTLSubstories({ stories }); + expect(storiesOf.mock.calls[0][0]).toEqual('Components|Brand/RTL'); expect(mockAddStory.mock.calls[0][0]).toEqual('RTL - without brand link'); expect(storiesOf.mock.calls[1][0]).toEqual('Components|Brand/RTL'); expect(mockAddStory.mock.calls[1][0]).toEqual('RTL - with brand link'); - expect(storiesOf.mock.calls[2][0]).toEqual('Components|Caption/RTL'); - expect(mockAddStory.mock.calls[2][0]).toEqual('RTL - default'); + expect(mockAddStory.mock.calls[2]).toBeUndefined(); + expect(mockAddStory.mock.calls[2]).toBeUndefined(); +}); + +it("should build RTL variants of story kind's specified stories", () => { + const stories = { kind: 'Components|Brand' }; + buildRTLSubstories({ stories, include: ['with brand link'] }); + + expect(storiesOf.mock.calls[0][0]).toEqual('Components|Brand/RTL'); + expect(mockAddStory.mock.calls[0][0]).toEqual('RTL - with brand link'); + + expect(storiesOf.mock.calls[1]).toBeUndefined(); +}); - expect(storiesOf.mock.calls[3][0]).toEqual('Components|Caption/RTL'); - expect(mockAddStory.mock.calls[3][0]).toEqual('RTL - with offscreen text'); +it('should not create RTL substories when no params', () => { + buildRTLSubstories({}); - expect(storiesOf.mock.calls[4][0]).toEqual('Components|Caption/RTL'); - expect(mockAddStory.mock.calls[4][0]).toEqual( - 'RTL - containing an inline link', - ); + expect(mockAddStory).not.toHaveBeenCalled(); }); From c6da23f845c558c596f068278b696a65e0d14ae4 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Tue, 22 Oct 2019 10:11:49 +0100 Subject: [PATCH 02/15] refactoring --- .../src/buildRTLSubstories.js | 37 +++++++++---------- .../src/buildRTLSubstories.test.js | 23 +++++------- 2 files changed, 27 insertions(+), 33 deletions(-) diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js index 701f2f94eb..956b90f30e 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js @@ -5,28 +5,25 @@ const matchesStoryKind = kind => story => story.kind === kind; const matchesStoryName = name => story => story.name === name; -const buildRTLSubstory = (kind, name, storyFn) => - storiesOf(`${kind}/RTL`, module) - .addDecorator(withServicesKnob({ defaultService: 'arabic' })) - .add(`RTL - ${name}`, storyFn); +const buildRTLSubstory = (kind, name, storyFn) => { + const arabicServiceDecorator = withServicesKnob({ defaultService: 'arabic' }); + storiesOf(`${kind}/RTL`, module).add(`RTL - ${name}`, () => + arabicServiceDecorator(storyFn), + ); +}; -export default ({ stories = {}, include = [] }) => { +export default ({ storyKind = '', include = [] }) => { const allStories = getStorybook(); - const storyKind = allStories.find(matchesStoryKind(stories.kind)); - - if (storyKind) { - if (include.length) { - include.forEach(name => { - const story = storyKind.stories.find(matchesStoryName(name)); + const { stories } = allStories.find(matchesStoryKind(storyKind)); - if (story) { - buildRTLSubstory(stories.kind, name, story.render); - } - }); - } else { - storyKind.stories.forEach(({ name, render }) => - buildRTLSubstory(stories.kind, name, render), - ); - } + if (include.length) { + include.forEach(name => { + const { render } = stories.find(matchesStoryName(name)); + buildRTLSubstory(storyKind, name, render); + }); + } else { + stories.forEach(({ name, render }) => + buildRTLSubstory(storyKind, name, render), + ); } }; diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js index f46c65776f..8819c36aa2 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js @@ -3,13 +3,12 @@ import buildRTLSubstories from './buildRTLSubstories'; import * as withServicesKnob from './withServicesKnob'; const mockAddStory = jest.fn(); -const mockAddDecorator = jest.fn(() => ({ add: mockAddStory })); withServicesKnob.default = jest.fn(() => 'withServicesKnob'); jest.mock('@storybook/react', () => ({ storiesOf: jest.fn(() => ({ - addDecorator: mockAddDecorator, + add: mockAddStory, })), getStorybook: jest.fn(() => [ { @@ -45,25 +44,24 @@ jest.mock('@storybook/react', () => ({ afterEach(jest.clearAllMocks); it('should get all stories', () => { - const stories = { kind: 'Components|Brand' }; - buildRTLSubstories({ stories }); + const storyKind = 'Components|Brand'; + buildRTLSubstories({ storyKind }); expect(getStorybook).toHaveBeenCalled(); }); it('should add the withServicesKnob decorator so that the default service is configured', () => { - const stories = { kind: 'Components|Brand' }; - buildRTLSubstories({ stories }); + const storyKind = 'Components|Brand'; + buildRTLSubstories({ storyKind }); expect(withServicesKnob.default).toHaveBeenCalledWith({ defaultService: 'arabic', }); - expect(mockAddDecorator).toHaveBeenCalledWith('withServicesKnob'); }); it("should build RTL variants of story kind's full suite of stories", () => { - const stories = { kind: 'Components|Brand' }; - buildRTLSubstories({ stories }); + const storyKind = 'Components|Brand'; + buildRTLSubstories({ storyKind }); expect(storiesOf.mock.calls[0][0]).toEqual('Components|Brand/RTL'); expect(mockAddStory.mock.calls[0][0]).toEqual('RTL - without brand link'); @@ -76,8 +74,8 @@ it("should build RTL variants of story kind's full suite of stories", () => { }); it("should build RTL variants of story kind's specified stories", () => { - const stories = { kind: 'Components|Brand' }; - buildRTLSubstories({ stories, include: ['with brand link'] }); + const storyKind = 'Components|Brand'; + buildRTLSubstories({ storyKind, include: ['with brand link'] }); expect(storiesOf.mock.calls[0][0]).toEqual('Components|Brand/RTL'); expect(mockAddStory.mock.calls[0][0]).toEqual('RTL - with brand link'); @@ -86,7 +84,6 @@ it("should build RTL variants of story kind's specified stories", () => { }); it('should not create RTL substories when no params', () => { - buildRTLSubstories({}); - + expect(() => buildRTLSubstories()).toThrow(); expect(mockAddStory).not.toHaveBeenCalled(); }); From f1cf1d31b630be7f20282a1d56f0c6391bd604e5 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Tue, 22 Oct 2019 10:28:24 +0100 Subject: [PATCH 03/15] update readme --- .../psammead-storybook-helpers/README.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/utilities/psammead-storybook-helpers/README.md b/packages/utilities/psammead-storybook-helpers/README.md index 4e5e545dbd..8861417ac2 100644 --- a/packages/utilities/psammead-storybook-helpers/README.md +++ b/packages/utilities/psammead-storybook-helpers/README.md @@ -22,7 +22,7 @@ The `withServicesKnob` function accepts an options argument with 2 properties: - `defaultService`(String): The default selected service of the services dropdown e.g. `arabic`. The default is `news`. - `services`(Array): A list of services that the dropdown will display. The default is all services. -`buildRTLSubstories` - a function that gets all stories and creates right-to-left variants as substories. Internally it uses the `withServicesKnob` to set the default service as `arabic`. The appropriate place to use this function is in `storybook/config.js`. +`buildRTLSubstories` - a function to create right-to-left variants of stories as substories. Internally it uses the `withServicesKnob` to set the default service as `arabic`. ## Installation @@ -105,12 +105,20 @@ The above example dismisses the use of the `addDecorator` method and decorates t ### buildRTLSubstories ```jsx -// storybook/config.js +import { buildRTLSubstories } from '@bbc/psammead-storybook-helpers'; + +// create RTL variants of all stories of a kind +buildRTLSubstories({ storyKind: 'Components|Paragraph' }); +``` +```jsx import { buildRTLSubstories } from '@bbc/psammead-storybook-helpers'; -// must be placed after the storybook configure function -buildRTLSubstories(); +// create RTL variants of specific stories of a kind +buildRTLSubstories({ + storyKind: 'Components|Paragraph', + include: ['containing an inline link'], +}); ``` ## Contributing From 25a55ac12bed89fafdc8d4e181b097c4a105ffbd Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Tue, 22 Oct 2019 10:41:02 +0100 Subject: [PATCH 04/15] Bump package version for psammead-storybook-helpers --- .../components/psammead-paragraph/src/index.stories.jsx | 6 +++--- .../utilities/psammead-storybook-helpers/package-lock.json | 2 +- packages/utilities/psammead-storybook-helpers/package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-paragraph/src/index.stories.jsx b/packages/components/psammead-paragraph/src/index.stories.jsx index 3b4c85f824..d5d14a8ef1 100644 --- a/packages/components/psammead-paragraph/src/index.stories.jsx +++ b/packages/components/psammead-paragraph/src/index.stories.jsx @@ -9,9 +9,9 @@ import notes from '../README.md'; import Paragraph from './index'; import { buildRTLSubstories } from '../../../utilities/psammead-storybook-helpers/src'; -const stories = storiesOf('Components|Paragraph', module); +const storyKind = 'Components|Paragraph'; -stories +storiesOf(storyKind, module) .addDecorator(withKnobs) .addDecorator(withServicesKnob()) .add( @@ -36,4 +36,4 @@ stories { notes, knobs: { escapeHTML: false } }, ); -buildRTLSubstories({ stories }); +buildRTLSubstories({ storyKind }); diff --git a/packages/utilities/psammead-storybook-helpers/package-lock.json b/packages/utilities/psammead-storybook-helpers/package-lock.json index d17d24d42f..c398b59ecf 100644 --- a/packages/utilities/psammead-storybook-helpers/package-lock.json +++ b/packages/utilities/psammead-storybook-helpers/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-storybook-helpers", - "version": "7.0.0", + "version": "8.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/utilities/psammead-storybook-helpers/package.json b/packages/utilities/psammead-storybook-helpers/package.json index 65040aa5cf..754d102730 100644 --- a/packages/utilities/psammead-storybook-helpers/package.json +++ b/packages/utilities/psammead-storybook-helpers/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-storybook-helpers", - "version": "7.0.0", + "version": "8.0.0", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, From c277a5776a5336852b857c433a227ade1ed51386 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Tue, 22 Oct 2019 10:45:40 +0100 Subject: [PATCH 05/15] Update changelog for psammead-storybook-helpers --- packages/utilities/psammead-storybook-helpers/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/utilities/psammead-storybook-helpers/CHANGELOG.md b/packages/utilities/psammead-storybook-helpers/CHANGELOG.md index 32aa8479ab..6077eadd2c 100644 --- a/packages/utilities/psammead-storybook-helpers/CHANGELOG.md +++ b/packages/utilities/psammead-storybook-helpers/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 8.0.0 | [PR#2453](https://github.com/bbc/psammead/pull/2453) ability to create RTL variants of all stories of a specific kind or specific stories of specific kind | | 7.0.0 | [PR#2404](https://github.com/bbc/psammead/pull/2404) replace inputProvider and dirDecorator with withServicesInput | | 6.2.0 | [PR#2407](https://github.com/bbc/psammead/pull/2407) adds buildRTLSubstories to create right-to-left variants of all stories | | 6.1.0 | [PR#2402](https://github.com/bbc/psammead/pull/2402) adds withServicesKnob decorator | From c808668724339ca0675cc36c5a4517ebfda4a1d6 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Tue, 22 Oct 2019 10:54:58 +0100 Subject: [PATCH 06/15] revert paragraph stories --- .../components/psammead-paragraph/src/index.stories.jsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/components/psammead-paragraph/src/index.stories.jsx b/packages/components/psammead-paragraph/src/index.stories.jsx index d5d14a8ef1..b63817db19 100644 --- a/packages/components/psammead-paragraph/src/index.stories.jsx +++ b/packages/components/psammead-paragraph/src/index.stories.jsx @@ -7,11 +7,8 @@ import InlineLink from '@bbc/psammead-inline-link'; import { withServicesKnob } from '@bbc/psammead-storybook-helpers'; import notes from '../README.md'; import Paragraph from './index'; -import { buildRTLSubstories } from '../../../utilities/psammead-storybook-helpers/src'; -const storyKind = 'Components|Paragraph'; - -storiesOf(storyKind, module) +storiesOf('Components|Paragraph', module) .addDecorator(withKnobs) .addDecorator(withServicesKnob()) .add( @@ -35,5 +32,3 @@ storiesOf(storyKind, module) { notes, knobs: { escapeHTML: false } }, ); - -buildRTLSubstories({ storyKind }); From 0ba6bec7446dbf888315aad10b99e828cf77f99c Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Tue, 22 Oct 2019 11:01:12 +0100 Subject: [PATCH 07/15] remove duplicate assertion --- .../psammead-storybook-helpers/src/buildRTLSubstories.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js index 8819c36aa2..7765a7876a 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js @@ -70,7 +70,6 @@ it("should build RTL variants of story kind's full suite of stories", () => { expect(mockAddStory.mock.calls[1][0]).toEqual('RTL - with brand link'); expect(mockAddStory.mock.calls[2]).toBeUndefined(); - expect(mockAddStory.mock.calls[2]).toBeUndefined(); }); it("should build RTL variants of story kind's specified stories", () => { From 9458337fac5ea2e367efe9b96231067d43235337 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Tue, 22 Oct 2019 11:02:24 +0100 Subject: [PATCH 08/15] refactoring --- .../src/buildRTLSubstories.test.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js index 7765a7876a..5172658a15 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js @@ -44,15 +44,13 @@ jest.mock('@storybook/react', () => ({ afterEach(jest.clearAllMocks); it('should get all stories', () => { - const storyKind = 'Components|Brand'; - buildRTLSubstories({ storyKind }); + buildRTLSubstories({ storyKind: 'Components|Brand' }); expect(getStorybook).toHaveBeenCalled(); }); it('should add the withServicesKnob decorator so that the default service is configured', () => { - const storyKind = 'Components|Brand'; - buildRTLSubstories({ storyKind }); + buildRTLSubstories({ storyKind: 'Components|Brand' }); expect(withServicesKnob.default).toHaveBeenCalledWith({ defaultService: 'arabic', @@ -60,8 +58,7 @@ it('should add the withServicesKnob decorator so that the default service is con }); it("should build RTL variants of story kind's full suite of stories", () => { - const storyKind = 'Components|Brand'; - buildRTLSubstories({ storyKind }); + buildRTLSubstories({ storyKind: 'Components|Brand' }); expect(storiesOf.mock.calls[0][0]).toEqual('Components|Brand/RTL'); expect(mockAddStory.mock.calls[0][0]).toEqual('RTL - without brand link'); @@ -73,8 +70,10 @@ it("should build RTL variants of story kind's full suite of stories", () => { }); it("should build RTL variants of story kind's specified stories", () => { - const storyKind = 'Components|Brand'; - buildRTLSubstories({ storyKind, include: ['with brand link'] }); + buildRTLSubstories({ + storyKind: 'Components|Brand', + include: ['with brand link'], + }); expect(storiesOf.mock.calls[0][0]).toEqual('Components|Brand/RTL'); expect(mockAddStory.mock.calls[0][0]).toEqual('RTL - with brand link'); From 3476942fec884e06af7a7c03c13047dad947a647 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Tue, 22 Oct 2019 11:41:11 +0100 Subject: [PATCH 09/15] refactoring --- .../utilities/psammead-storybook-helpers/README.md | 11 ++++++++--- .../src/buildRTLSubstories.js | 3 ++- .../src/buildRTLSubstories.test.js | 13 +++++-------- .../psammead-storybook-helpers/src/index.js | 2 +- 4 files changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/utilities/psammead-storybook-helpers/README.md b/packages/utilities/psammead-storybook-helpers/README.md index 8861417ac2..2c35cf428a 100644 --- a/packages/utilities/psammead-storybook-helpers/README.md +++ b/packages/utilities/psammead-storybook-helpers/README.md @@ -24,6 +24,12 @@ The `withServicesKnob` function accepts an options argument with 2 properties: `buildRTLSubstories` - a function to create right-to-left variants of stories as substories. Internally it uses the `withServicesKnob` to set the default service as `arabic`. +The `buildRTLSubstories` function accepts 2 arguments. + +- `storyKind`(String) - This is the story kind that you want you want to create RTL substories from. This will normally be the first argument you pass into `storiesOf` e.g. `storiesOf('Components|Paragraph', module)`. This parameter is required. +- `options`(Object) - Available options: + - `include`(Array) - A list of specific story names to create RTL substories of. If this is not provided then all stories will have RTL substories. + ## Installation ```sh @@ -108,15 +114,14 @@ The above example dismisses the use of the `addDecorator` method and decorates t import { buildRTLSubstories } from '@bbc/psammead-storybook-helpers'; // create RTL variants of all stories of a kind -buildRTLSubstories({ storyKind: 'Components|Paragraph' }); +buildRTLSubstories('Components|Paragraph'); ``` ```jsx import { buildRTLSubstories } from '@bbc/psammead-storybook-helpers'; // create RTL variants of specific stories of a kind -buildRTLSubstories({ - storyKind: 'Components|Paragraph', +buildRTLSubstories('Components|Paragraph', { include: ['containing an inline link'], }); ``` diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js index 956b90f30e..caf499a6e3 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js @@ -12,7 +12,8 @@ const buildRTLSubstory = (kind, name, storyFn) => { ); }; -export default ({ storyKind = '', include = [] }) => { +// eslint-disable-next-line import/prefer-default-export +export const buildRTLSubstories = (storyKind = '', { include = [] } = {}) => { const allStories = getStorybook(); const { stories } = allStories.find(matchesStoryKind(storyKind)); diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js index 5172658a15..c6622d1691 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js @@ -1,5 +1,5 @@ import { getStorybook, storiesOf } from '@storybook/react'; -import buildRTLSubstories from './buildRTLSubstories'; +import { buildRTLSubstories } from './buildRTLSubstories'; import * as withServicesKnob from './withServicesKnob'; const mockAddStory = jest.fn(); @@ -44,13 +44,13 @@ jest.mock('@storybook/react', () => ({ afterEach(jest.clearAllMocks); it('should get all stories', () => { - buildRTLSubstories({ storyKind: 'Components|Brand' }); + buildRTLSubstories('Components|Brand'); expect(getStorybook).toHaveBeenCalled(); }); it('should add the withServicesKnob decorator so that the default service is configured', () => { - buildRTLSubstories({ storyKind: 'Components|Brand' }); + buildRTLSubstories('Components|Brand'); expect(withServicesKnob.default).toHaveBeenCalledWith({ defaultService: 'arabic', @@ -58,7 +58,7 @@ it('should add the withServicesKnob decorator so that the default service is con }); it("should build RTL variants of story kind's full suite of stories", () => { - buildRTLSubstories({ storyKind: 'Components|Brand' }); + buildRTLSubstories('Components|Brand'); expect(storiesOf.mock.calls[0][0]).toEqual('Components|Brand/RTL'); expect(mockAddStory.mock.calls[0][0]).toEqual('RTL - without brand link'); @@ -70,10 +70,7 @@ it("should build RTL variants of story kind's full suite of stories", () => { }); it("should build RTL variants of story kind's specified stories", () => { - buildRTLSubstories({ - storyKind: 'Components|Brand', - include: ['with brand link'], - }); + buildRTLSubstories('Components|Brand', { include: ['with brand link'] }); expect(storiesOf.mock.calls[0][0]).toEqual('Components|Brand/RTL'); expect(mockAddStory.mock.calls[0][0]).toEqual('RTL - with brand link'); diff --git a/packages/utilities/psammead-storybook-helpers/src/index.js b/packages/utilities/psammead-storybook-helpers/src/index.js index b5645f895a..314023b59b 100644 --- a/packages/utilities/psammead-storybook-helpers/src/index.js +++ b/packages/utilities/psammead-storybook-helpers/src/index.js @@ -1,5 +1,5 @@ import withServicesKnob from './withServicesKnob'; -import buildRTLSubstories from './buildRTLSubstories'; +import { buildRTLSubstories } from './buildRTLSubstories'; import LANGUAGE_VARIANTS from './text-variants'; export { LANGUAGE_VARIANTS, withServicesKnob, buildRTLSubstories }; From bdb97ffe3f68e6fa52d953e4ec8cfa587004f451 Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 22 Oct 2019 12:15:29 +0100 Subject: [PATCH 10/15] Fix storybook bug --- .../psammead-sitewide-links/src/index.stories.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-sitewide-links/src/index.stories.jsx b/packages/components/psammead-sitewide-links/src/index.stories.jsx index b817da8fa9..3c2cc79bc2 100644 --- a/packages/components/psammead-sitewide-links/src/index.stories.jsx +++ b/packages/components/psammead-sitewide-links/src/index.stories.jsx @@ -10,10 +10,11 @@ const buildLink = text => ({ href: 'https://www.bbc.co.uk/news', }); -const links = Array(7) - .fill() - .map((el, n) => `link ${n}`) - .map(buildLink); +const links = (text, service) => + Array(7) + .fill() + .map((el, n) => (service === 'news' ? `link ${n}` : `${text} ${n}`)) + .map(buildLink); storiesOf('Components|SitewideLinks', module) .addDecorator(withKnobs) @@ -22,7 +23,7 @@ storiesOf('Components|SitewideLinks', module) 'default', ({ text, service }) => ( Date: Tue, 22 Oct 2019 12:27:58 +0100 Subject: [PATCH 11/15] Update version --- packages/components/psammead-sitewide-links/CHANGELOG.md | 1 + packages/components/psammead-sitewide-links/package-lock.json | 2 +- packages/components/psammead-sitewide-links/package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-sitewide-links/CHANGELOG.md b/packages/components/psammead-sitewide-links/CHANGELOG.md index 660844b945..11cdd6f726 100644 --- a/packages/components/psammead-sitewide-links/CHANGELOG.md +++ b/packages/components/psammead-sitewide-links/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 3.1.17 | [PR#2457](https://github.com/bbc/psammead/pull/2457) Fix storybook bug with links for services | | 3.1.16 | [PR#2440](https://github.com/bbc/psammead/pull/2440) Talos - Bump Dependencies - @bbc/psammead-styles | | 3.1.15 | [PR#2404](https://github.com/bbc/psammead/pull/2404) replace inputProvider and dirDecorator with withServicesInput | | 3.1.14 | [PR#2351](https://github.com/bbc/psammead/pull/2351) Fix styling for IE11 | diff --git a/packages/components/psammead-sitewide-links/package-lock.json b/packages/components/psammead-sitewide-links/package-lock.json index 55fd05aef4..a170a1a744 100644 --- a/packages/components/psammead-sitewide-links/package-lock.json +++ b/packages/components/psammead-sitewide-links/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-sitewide-links", - "version": "3.1.16", + "version": "3.1.17", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-sitewide-links/package.json b/packages/components/psammead-sitewide-links/package.json index a65504f08a..b3889b43e7 100644 --- a/packages/components/psammead-sitewide-links/package.json +++ b/packages/components/psammead-sitewide-links/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-sitewide-links", - "version": "3.1.16", + "version": "3.1.17", "description": "React styled component for a sitewide-links", "main": "dist/index.js", "module": "esm/index.js", From 1240614dffda986ef7aa7203a5c6fe1bf8953cec Mon Sep 17 00:00:00 2001 From: Olha Lyubinets Date: Tue, 22 Oct 2019 13:30:54 +0100 Subject: [PATCH 12/15] Update changelog description --- packages/components/psammead-sitewide-links/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-sitewide-links/CHANGELOG.md b/packages/components/psammead-sitewide-links/CHANGELOG.md index 11cdd6f726..93addeb45e 100644 --- a/packages/components/psammead-sitewide-links/CHANGELOG.md +++ b/packages/components/psammead-sitewide-links/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 3.1.17 | [PR#2457](https://github.com/bbc/psammead/pull/2457) Fix storybook bug with links for services | +| 3.1.17 | [PR#2457](https://github.com/bbc/psammead/pull/2457) Show relevant link text when selecting service in storybook | | 3.1.16 | [PR#2440](https://github.com/bbc/psammead/pull/2440) Talos - Bump Dependencies - @bbc/psammead-styles | | 3.1.15 | [PR#2404](https://github.com/bbc/psammead/pull/2404) replace inputProvider and dirDecorator with withServicesInput | | 3.1.14 | [PR#2351](https://github.com/bbc/psammead/pull/2351) Fix styling for IE11 | From ac0b9c388221a992b064f14c5531b04db619cce4 Mon Sep 17 00:00:00 2001 From: Fahad Khan Date: Tue, 22 Oct 2019 14:55:23 +0100 Subject: [PATCH 13/15] convert default export to named export and edit imports --- packages/components/psammead-image/src/index.amp.stories.jsx | 2 +- packages/components/psammead-image/src/index.stories.jsx | 2 +- .../components/psammead-image/src/testHelpers/stories.jsx | 4 +--- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-image/src/index.amp.stories.jsx b/packages/components/psammead-image/src/index.amp.stories.jsx index c430a81f7b..23c44c4fb3 100644 --- a/packages/components/psammead-image/src/index.amp.stories.jsx +++ b/packages/components/psammead-image/src/index.amp.stories.jsx @@ -1,5 +1,5 @@ import AmpImg from './index.amp'; -import stories from './testHelpers/stories'; +import { stories } from './testHelpers/stories'; import { ampDecorator } from '../../../../.storybook/config'; const additionalProps = { diff --git a/packages/components/psammead-image/src/index.stories.jsx b/packages/components/psammead-image/src/index.stories.jsx index 64b9bc0e3c..e8932bfbf7 100644 --- a/packages/components/psammead-image/src/index.stories.jsx +++ b/packages/components/psammead-image/src/index.stories.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { withKnobs } from '@storybook/addon-knobs'; import { Img } from '.'; -import stories, { getProps } from './testHelpers/stories'; +import { stories, getProps } from './testHelpers/stories'; import { landscape } from './testHelpers/fixtureData'; import notes from '../README.md'; diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx index 4ca9ccd79f..026d2a66e6 100644 --- a/packages/components/psammead-image/src/testHelpers/stories.jsx +++ b/packages/components/psammead-image/src/testHelpers/stories.jsx @@ -18,7 +18,7 @@ export function getProps(image, includeHeight, type) { return props; } -const stories = ( +export const stories = ( Component, title, includeHeight = false, @@ -79,5 +79,3 @@ const stories = ( ), { notes }, ); - -export default stories; From 8064d77d5744d7f360279671d2b0f96cbb2c16f2 Mon Sep 17 00:00:00 2001 From: Fahad Khan Date: Tue, 22 Oct 2019 16:30:32 +0100 Subject: [PATCH 14/15] bumping --- packages/components/psammead-image/CHANGELOG.md | 1 + packages/components/psammead-image/package-lock.json | 2 +- packages/components/psammead-image/package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md index 57079e46e2..9f95a83edf 100644 --- a/packages/components/psammead-image/CHANGELOG.md +++ b/packages/components/psammead-image/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 1.2.3 | [PR#2460](https://github.com/bbc/psammead/pull/2460) Fix Storybook console errors | | 1.2.2 | [PR#1942](https://github.com/bbc/psammead/pull/1942) Talos - Bump React to 16.9.0 | | 1.2.1 | [PR#1803](https://github.com/bbc/psammead/pull/1803/) Patches broken links on badges in documentation | | 1.2.0 | [PR#1794](https://github.com/bbc/psammead/pull/1794) Add david dependency badges | diff --git a/packages/components/psammead-image/package-lock.json b/packages/components/psammead-image/package-lock.json index 7c157fa4bd..e58230f0e8 100644 --- a/packages/components/psammead-image/package-lock.json +++ b/packages/components/psammead-image/package-lock.json @@ -1,5 +1,5 @@ { "name": "@bbc/psammead-image", - "version": "1.2.2", + "version": "1.2.3", "lockfileVersion": 1 } diff --git a/packages/components/psammead-image/package.json b/packages/components/psammead-image/package.json index eb37cbec8d..79657c1fd2 100644 --- a/packages/components/psammead-image/package.json +++ b/packages/components/psammead-image/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-image", - "version": "1.2.2", + "version": "1.2.3", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, From ba4b57a889b6a269c718eb4aab81d5cbf1500aab Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Wed, 23 Oct 2019 08:41:14 +0100 Subject: [PATCH 15/15] limit services knob to rtl services --- .../psammead-storybook-helpers/src/buildRTLSubstories.js | 7 +++++-- .../src/buildRTLSubstories.test.js | 3 ++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js index caf499a6e3..3dd0354e31 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.js @@ -6,9 +6,12 @@ const matchesStoryKind = kind => story => story.kind === kind; const matchesStoryName = name => story => story.name === name; const buildRTLSubstory = (kind, name, storyFn) => { - const arabicServiceDecorator = withServicesKnob({ defaultService: 'arabic' }); + const rtlServiceDecorator = withServicesKnob({ + defaultService: 'arabic', + services: ['arabic', 'persian', 'urdu', 'pashto'], + }); storiesOf(`${kind}/RTL`, module).add(`RTL - ${name}`, () => - arabicServiceDecorator(storyFn), + rtlServiceDecorator(storyFn), ); }; diff --git a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js index c6622d1691..f35ed51f47 100644 --- a/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js +++ b/packages/utilities/psammead-storybook-helpers/src/buildRTLSubstories.test.js @@ -49,11 +49,12 @@ it('should get all stories', () => { expect(getStorybook).toHaveBeenCalled(); }); -it('should add the withServicesKnob decorator so that the default service is configured', () => { +it('should add the withServicesKnob decorator so that the default service and service options are configured', () => { buildRTLSubstories('Components|Brand'); expect(withServicesKnob.default).toHaveBeenCalledWith({ defaultService: 'arabic', + services: ['arabic', 'persian', 'urdu', 'pashto'], }); });