Update inputProvider to toggle on serviceName not language

packages/utilities/psammead-storybook-helpers/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.0.0   | [PR#674](https://github.com/bbc/psammead/pull/674) Update inpuProvider to pass an object with script, service, dir and inputs |
 | 2.1.1   | [PR#512](https://github.com/bbc/psammead/pull/512) Pass script and dir to storybook function |
 | 2.1.0   | [PR#496](https://github.com/bbc/psammead/pull/496) Add dir storybook decorator |
 | 2.0.0   | [PR#468](https://github.com/bbc/psammead/pull/468) Rewrite of inputProvider |

packages/utilities/psammead-storybook-helpers/README.md

@@ -14,10 +14,11 @@ This package provides a collection of common values that are used in storybook b
     - `defaultText`: String to use when the story is showing English text. Optional.
 - `renderFn`: `function(slotTexts, script, dir)` Required.
   - `slotTexts`: Array of strings to insert into the story. Length and order corresponds to the provided `slots`.
-  - `script`: A [script](https://github.com/bbc/psammead/tree/latest/packages/utilities/gel-foundations#script-support) corresponding to the language selected by the storybook user.
+  - `script`: A [script](https://github.com/bbc/psammead/tree/latest/packages/utilities/gel-foundations#script-support) corresponding to the service selected by the storybook user.
   - `dir`: Either `'ltr'` or `'rtl'`, corresponding to the language currently selected by the storybook user.
+  - `service`: The service selected by the storybook user.
 
-`dirDecorator` - A storybook decorator function that uses `inputProvider` internally to provide direction control. It calls the storybook function with an object containing `dir` and `script`.
+`dirDecorator` - A storybook decorator function that uses `inputProvider` internally to provide direction control. It calls the storybook function with an object containing `dir`, `script` and the `service` name.
 
 ## Installation
 
@@ -39,7 +40,7 @@ const defaultValue = 'This is a caption';
 const groupIdentifier = 'CAPTION VARIANTS';
 
 <Caption>
-  {select(label, LANGUAGE_VARIANTS, LANGUAGE_VARIANTS.english, groupIdentifier).text}
+  {select(label, LANGUAGE_VARIANTS, LANGUAGE_VARIANTS.news, groupIdentifier).text}
 </Caption>;
 ```
 
@@ -62,7 +63,7 @@ storiesOf('Caption', module)
         { name: 'caption', defaultText: 'Students sitting an examination' },
         { name: 'offscreen text', defaultText: 'Image Caption, ' },
       ],
-      ([captionText, offscreenText], script, dir) => (
+      ({ inputs: [captionText, offscreenText], script, dir }) => (
         <Caption script={script} dir={dir}>
           <VisuallyHiddenText>{offscreenText}</VisuallyHiddenText>
           {captionText}

packages/utilities/psammead-storybook-helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-storybook-helpers",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "description": "A collection of common values that are used in storybook by the Psammead components.",
   "repository": {

packages/utilities/psammead-storybook-helpers/src/decorators.js

@@ -2,7 +2,8 @@ import inputProvider from './input-provider';
 
 /* eslint-disable import/prefer-default-export */
 export const dirDecorator = storyFn => {
-  const renderFn = (slotTexts, script, dir) => storyFn({ script, dir });
+  const renderFn = ({ script, dir, service }) =>
+    storyFn({ script, dir, service });
 
   const decoratedComponent = inputProvider(null, renderFn);
   return decoratedComponent();

packages/utilities/psammead-storybook-helpers/src/index.stories.jsx

@@ -22,7 +22,7 @@ storiesOf('Utilities|Input Provider', module)
         },
         { name: 'second slot' },
       ],
-      ([first, second], script, dir) => (
+      ({ inputs: [first, second], script, dir }) => (
         <ul>
           <li>{first}</li>
           <li>{second}</li>

packages/utilities/psammead-storybook-helpers/src/index.test.jsx

@@ -53,45 +53,40 @@ describe('Psammead storybook helpers', () => {
     });
 
     it('always calls the render function with a script and direction', () => {
-      const english = {
-        text: 'Could a computer ever create better art than a human?',
-        script: 'latin',
-        dir: 'ltr',
-      };
-      select.mockReturnValueOnce(english);
+      select.mockReturnValueOnce('news');
 
       underTest.inputProvider([], renderFn)();
 
       expect(renderFn).toHaveBeenCalledTimes(1);
-      expect(renderFn).toHaveBeenCalledWith([], 'LATIN SCRIPT OBJECT', 'ltr');
+      expect(renderFn).toHaveBeenCalledWith({
+        dir: 'ltr',
+        inputs: [],
+        script: 'LATIN SCRIPT OBJECT',
+        service: 'news',
+      });
       expect(select).toHaveBeenCalledTimes(1);
       expect(text).toHaveBeenCalledTimes(0);
     });
 
     it('handles scenario where config is null', () => {
-      const english = {
-        text: 'Could a computer ever create better art than a human?',
-        script: 'latin',
-        dir: 'ltr',
-      };
-      select.mockReturnValueOnce(english);
+      select.mockReturnValueOnce('news');
 
       underTest.inputProvider(null, renderFn)();
 
       expect(renderFn).toHaveBeenCalledTimes(1);
-      expect(renderFn).toHaveBeenCalledWith([], 'LATIN SCRIPT OBJECT', 'ltr');
+      expect(renderFn).toHaveBeenCalledWith({
+        dir: 'ltr',
+        inputs: [],
+        script: 'LATIN SCRIPT OBJECT',
+        service: 'news',
+      });
       expect(select).toHaveBeenCalledTimes(1);
       expect(text).toHaveBeenCalledTimes(0);
     });
 
     describe('calls the render function with slot default text when displaying english', () => {
       it('for a single slot', () => {
-        const english = {
-          text: 'Could a computer ever create better art than a human?',
-          script: 'latin',
-          dir: 'ltr',
-        };
-        select.mockReturnValueOnce(english);
+        select.mockReturnValueOnce('news');
         text.mockImplementation((_, displayText) => displayText);
 
         underTest.inputProvider(
@@ -100,23 +95,19 @@ describe('Psammead storybook helpers', () => {
         )();
 
         expect(renderFn).toHaveBeenCalledTimes(1);
-        expect(renderFn).toHaveBeenCalledWith(
-          ['Sole input'],
-          'LATIN SCRIPT OBJECT',
-          'ltr',
-        );
+        expect(renderFn).toHaveBeenCalledWith({
+          inputs: ['Sole input'],
+          script: 'LATIN SCRIPT OBJECT',
+          dir: 'ltr',
+          service: 'news',
+        });
 
         expect(select).toHaveBeenCalledTimes(1);
         expect(text).toHaveBeenCalledTimes(1);
       });
 
       it('for multiple slots', () => {
-        const english = {
-          text: 'Could a computer ever create better art than a human?',
-          script: 'latin',
-          dir: 'ltr',
-        };
-        select.mockReturnValueOnce(english);
+        select.mockReturnValueOnce('news');
         text.mockImplementation((_, displayText) => displayText);
 
         underTest.inputProvider(
@@ -128,47 +119,38 @@ describe('Psammead storybook helpers', () => {
         )();
 
         expect(renderFn).toHaveBeenCalledTimes(1);
-        expect(renderFn).toHaveBeenCalledWith(
-          ['First input', 'Second input'],
-          'LATIN SCRIPT OBJECT',
-          'ltr',
-        );
+        expect(renderFn).toHaveBeenCalledWith({
+          inputs: ['First input', 'Second input'],
+          script: 'LATIN SCRIPT OBJECT',
+          dir: 'ltr',
+          service: 'news',
+        });
 
         expect(select).toHaveBeenCalledTimes(1);
         expect(text).toHaveBeenCalledTimes(2);
       });
     });
 
     it('displays english snippet when no slot default text provided', () => {
-      const english = {
-        text: 'Could a computer ever create better art than a human?',
-        script: 'latin',
-        dir: 'ltr',
-      };
-      select.mockReturnValueOnce(english);
+      select.mockReturnValueOnce('news');
       text.mockImplementation((_, displayText) => displayText);
 
       underTest.inputProvider([{ name: 'first' }], renderFn)();
 
       expect(renderFn).toHaveBeenCalledTimes(1);
-      expect(renderFn).toHaveBeenCalledWith(
-        ['Could a computer ever create better art than a human?'],
-        'LATIN SCRIPT OBJECT',
-        'ltr',
-      );
+      expect(renderFn).toHaveBeenCalledWith({
+        inputs: ['Could a computer ever create better art than a human?'],
+        script: 'LATIN SCRIPT OBJECT',
+        dir: 'ltr',
+        service: 'news',
+      });
 
       expect(select).toHaveBeenCalledTimes(1);
       expect(text).toHaveBeenCalledTimes(1);
     });
 
     it('defaults to language text for non-english languages', () => {
-      const russian = {
-        text:
-          'Мнение Назарбаева будет иметь приоритетное значение при принятии важных для страны решений, сказал Токаев',
-        script: 'cyrillic',
-        dir: 'ltr',
-      };
-      select.mockReturnValueOnce(russian);
+      select.mockReturnValueOnce('russian');
       text.mockImplementation((_, displayText) => displayText);
 
       underTest.inputProvider(
@@ -177,66 +159,59 @@ describe('Psammead storybook helpers', () => {
       )();
 
       expect(renderFn).toHaveBeenCalledTimes(1);
-      expect(renderFn).toHaveBeenCalledWith(
-        [
+      expect(renderFn).toHaveBeenCalledWith({
+        inputs: [
           'Мнение Назарбаева будет иметь приоритетное значение при принятии важных для страны решений, сказал Токаев',
         ],
-        'CYRILLIC SCRIPT OBJECT',
-        'ltr',
-      );
+        script: 'CYRILLIC SCRIPT OBJECT',
+        dir: 'ltr',
+        service: 'russian',
+      });
     });
 
     describe('text direction', () => {
       it('defaults to ltr when not specified', () => {
-        const russian = {
-          script: 'cyrillic',
-        };
-        select.mockReturnValueOnce(russian);
+        select.mockReturnValueOnce('russian');
         text.mockImplementation((textKnobName, displayText) => displayText);
 
         underTest.inputProvider([], renderFn)();
 
         expect(renderFn).toHaveBeenCalledTimes(1);
-        expect(renderFn).toHaveBeenCalledWith(
-          [],
-          'CYRILLIC SCRIPT OBJECT',
-          'ltr',
-        );
+        expect(renderFn).toHaveBeenCalledWith({
+          inputs: [],
+          script: 'CYRILLIC SCRIPT OBJECT',
+          dir: 'ltr',
+          service: 'russian',
+        });
       });
 
       it('returns value when specified', () => {
-        const arabic = {
-          script: 'arabic',
-          dir: 'rtl',
-        };
-        select.mockReturnValueOnce(arabic);
+        select.mockReturnValueOnce('arabic');
         text.mockImplementation((_, displayText) => displayText);
 
         underTest.inputProvider([], renderFn)();
 
         expect(renderFn).toHaveBeenCalledTimes(1);
-        expect(renderFn).toHaveBeenCalledWith(
-          [],
-          'ARABIC SCRIPT OBJECT',
-          'rtl',
-        );
+        expect(renderFn).toHaveBeenCalledWith({
+          inputs: [],
+          script: 'ARABIC SCRIPT OBJECT',
+          dir: 'rtl',
+          service: 'arabic',
+        });
       });
     });
 
     describe('dirDecorator', () => {
       it('calls the story function with dir and script', () => {
         const storyFn = jest.fn();
-        const english = {
-          script: 'latin',
-          dir: 'ltr',
-        };
-        select.mockReturnValueOnce(english);
+        select.mockReturnValueOnce('news');
 
         underTest.dirDecorator(storyFn);
 
         expect(storyFn).toHaveBeenCalledWith({
           dir: 'ltr',
           script: 'LATIN SCRIPT OBJECT',
+          service: 'news',
         });
       });
     });

packages/utilities/psammead-storybook-helpers/src/input-provider.jsx

@@ -5,15 +5,11 @@ import scripts from '@bbc/gel-foundations/scripts';
 import LANGUAGE_VARIANTS from './text-variants';
 
 const inputProvider = (slots, componentFunction) => () => {
-  const lang = select(
-    'Select a language',
-    LANGUAGE_VARIANTS,
-    LANGUAGE_VARIANTS.english,
-  );
+  const serviceNames = Object.keys(LANGUAGE_VARIANTS);
+  const serviceName = select('Select a service', serviceNames, 'news');
 
-  // `select` doesn't return name of language selected, so test if selection
-  // is English by comparing `text` to English's `text`
-  const isEnglish = lang.text === LANGUAGE_VARIANTS.english.text;
+  const service = LANGUAGE_VARIANTS[serviceName];
+  const isNews = serviceName === 'news';
 
   const inputs = (slots || []).map(({ name, defaultText }) =>
     text(
@@ -24,17 +20,17 @@ const inputProvider = (slots, componentFunction) => () => {
       // When we switch to a language other than English, set the default
       // text for the knob to the snippet from LANGUAGE_VARIANTS for that
       // language.
-      defaultText && isEnglish ? defaultText : lang.text,
+      defaultText && isNews ? defaultText : service.text,
     ),
   );
 
-  const script = scripts[lang.script];
-  const dir = lang.dir || 'ltr';
+  const script = scripts[service.script];
+  const dir = service.dir || 'ltr';
 
   return (
     <Fragment>
       <Helmet htmlAttributes={{ dir }} />
-      {componentFunction(inputs, script, dir)}
+      {componentFunction({ inputs, script, dir, service: serviceName })}
     </Fragment>
   );
 };

packages/utilities/psammead-storybook-helpers/src/text-variants.js

@@ -36,7 +36,7 @@ const LANGUAGE_VARIANTS = {
   },
   chineseSimp: { text: '家长们在学校门口维权。', script: 'chinese' },
   chineseTrad: { text: '家長們在學校門口維權。', script: 'chinese' },
-  english: {
+  news: {
     text: 'Could a computer ever create better art than a human?',
     script: 'latin',
   },