From bffcee13f6e1b0eba28e6ef06a097ddf21a2a8d9 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Mon, 21 Oct 2019 17:09:56 +0100 Subject: [PATCH 01/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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 ba4b57a889b6a269c718eb4aab81d5cbf1500aab Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Wed, 23 Oct 2019 08:41:14 +0100 Subject: [PATCH 10/10] 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'], }); });