Add service variant compatiablity

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

@@ -1,4 +1,4 @@
-const LANGUAGE_VARIANTS = {
+const EXAMPLES = {
   afaanoromoo: {
     text:
       "Gammadoo ta'uun akkanumaan hin dhufu, waan shaakalamuudha jetti saantoos.",
@@ -145,11 +145,15 @@ const LANGUAGE_VARIANTS = {
     locale: 'ru',
   },
   serbianCyr: {
+    service: 'serbian',
+    variant: 'cyr',
     text: 'Караџић се годинама крио пре него што је ухапшен 2008. године',
     script: 'cyrillic',
     locale: 'sr-cyrl',
   },
   serbianLat: {
+    service: 'serbian',
+    variant: 'cyr',
     text: 'Karadžić se godinama krio pre nego što je uhapšen 2008. godine',
     script: 'latin',
     locale: 'sr',
@@ -190,11 +194,15 @@ const LANGUAGE_VARIANTS = {
     locale: 'tr',
   },
   ukChinaSimp: {
+    service: 'ukchina',
+    variant: 'simp',
     text: '该计划的批评者说，这个政策不能解决住房短缺的问题（Credit: Alamy）',
     script: 'chinese',
     locale: 'zh-cn',
   },
   ukChinaTrad: {
+    service: 'ukchina',
+    variant: 'trad',
     text: '該計劃的批評者說，這個政策不能解決住房短缺的問題（Credit: Alamy）',
     script: 'chinese',
     locale: 'zh-tw',
@@ -228,6 +236,20 @@ const LANGUAGE_VARIANTS = {
     script: 'latin',
     locale: 'yo',
   },
+  zhongwenSimp: {
+    service: 'zhongwen',
+    variant: 'simp',
+    text: '该计划的批评者说，这个政策不能解决住房短缺的问题（Credit: Alamy）',
+    script: 'chinese',
+    locale: 'zh-cn',
+  },
+  zhongwenTrad: {
+    service: 'zhongwen',
+    variant: 'trad',
+    text: '該計劃的批評者說，這個政策不能解決住房短缺的問題（Credit: Alamy）',
+    script: 'chinese',
+    locale: 'zh-tw',
+  },
 };
 
-export default LANGUAGE_VARIANTS;
+export default EXAMPLES;

packages/utilities/psammead-storybook-helpers/src/withServicesKnob.jsx

@@ -2,20 +2,41 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { select } from '@storybook/addon-knobs';
 import * as scripts from '@bbc/gel-foundations/scripts';
-import LANGUAGE_VARIANTS from './text-variants';
+import EXAMPLES from './text-variants';
+
+const DEFAULT_SERVICE = 'news';
+const SERVICES_LIST = Object.keys(EXAMPLES);
 
 export default ({
-  defaultService = 'news',
-  services = Object.keys(LANGUAGE_VARIANTS),
+  defaultService = DEFAULT_SERVICE,
+  services = SERVICES_LIST,
 } = {}) => storyFn => {
-  const includesService = service => services.includes(service);
-  const service = select(
+  const getServiceAndVariant = selectedItem =>
+    EXAMPLES[selectedItem].variant
+      ? {
+          service: EXAMPLES[selectedItem].service,
+          variant: EXAMPLES[selectedItem].variant,
+        }
+      : { service: selectedItem };
+
+  const includesSelectedService = selectedItem =>
+    services.includes(selectedItem);
+
+  const selectedItem = select(
     'Select a service',
-    services.filter(includesService),
+    services.filter(includesSelectedService),
     defaultService,
   );
-  const { text, script, locale, dir = 'ltr' } = LANGUAGE_VARIANTS[service];
-  const storyProps = { text, script: scripts[script], locale, dir, service };
+
+  const { text, script, locale, dir = 'ltr' } = EXAMPLES[selectedItem];
+
+  const storyProps = {
+    text,
+    script: scripts[script],
+    locale,
+    dir,
+    ...getServiceAndVariant(selectedItem),
+  };
   return (
     <>
       <Helmet htmlAttributes={{ dir }} />

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

@@ -2,7 +2,7 @@ import { render, waitForDomChange } from '@testing-library/react';
 import * as knobs from '@storybook/addon-knobs';
 import * as scripts from '@bbc/gel-foundations/scripts';
 import withServicesKnob from './withServicesKnob';
-import LANGUAGE_VARIANTS from './text-variants';
+import EXAMPLES from './text-variants';
 
 it('should correctly configure the default story book dropdown', () => {
   const storyFn = () => {};
@@ -12,7 +12,7 @@ it('should correctly configure the default story book dropdown', () => {
 
   expect(knobs.select).toHaveBeenCalledWith(
     'Select a service',
-    Object.keys(LANGUAGE_VARIANTS),
+    Object.keys(EXAMPLES),
     'news',
   );
 });
@@ -87,3 +87,21 @@ it('should pass the correct chosen service props to the story function', () => {
 
   expect(mockStoryFn).toHaveBeenCalledWith(expected);
 });
+
+it('should pass the correct chosen service props to the story function', () => {
+  const mockStoryFn = jest.fn();
+  knobs.select = () => 'ukChinaSimp';
+
+  withServicesKnob()(mockStoryFn);
+
+  const expected = {
+    script: scripts.chinese,
+    service: 'ukchina',
+    text: '该计划的批评者说，这个政策不能解决住房短缺的问题（Credit: Alamy）',
+    dir: 'ltr',
+    locale: 'zh-cn',
+    variant: 'simp',
+  };
+
+  expect(mockStoryFn).toHaveBeenCalledWith(expected);
+});