refactor(demo): Breadcrumb harmonised, optional/mandatory knobs - FRO…

…NT-1017 (#405)

src/ec/packages/ec-component-breadcrumb-harmonised/breadcrumb-harmonised.story.js

@@ -1,7 +1,9 @@
-import merge from 'deepmerge';
+/* eslint-disable no-param-reassign */
 import { storiesOf } from '@storybook/html';
 import { withNotes } from '@ecl-twig/storybook-addon-notes';
 import withCode from '@ecl-twig/storybook-addon-code';
+import { withKnobs, text, select } from '@storybook/addon-knobs';
+import { getExtraKnobs, tabLabels, getLinkKnobs } from '@ecl-twig/story-utils';
 
 import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg';
 import dataSimple from './demo/data--simple';
@@ -10,30 +12,38 @@ import dataLong from './demo/data';
 import breadcrumb from './ecl-breadcrumb-harmonised.html.twig';
 import notes from './README.md';
 
+const prepareBreadcrumbHarmonised = data => {
+  data.icon_file_path = select(
+    'icon_file_path',
+    [defaultSprite],
+    defaultSprite,
+    tabLabels.required
+  );
+  data.navigation_text = text(
+    'navigation_text',
+    data.navigation_text,
+    tabLabels.required
+  );
+  data.ellipsis_label = text(
+    'ellipsis_label',
+    data.ellipsis_label,
+    tabLabels.required
+  );
+
+  getLinkKnobs(data);
+
+  getExtraKnobs(data);
+
+  return data;
+};
+
 storiesOf('Components/Navigation/Breadcrumbs/Breadcrumb Harmonised', module)
   .addDecorator(withNotes)
   .addDecorator(withCode)
-  .add(
-    'simple',
-    () =>
-      breadcrumb(
-        merge(dataSimple, {
-          icon_file_path: defaultSprite,
-        })
-      ),
-    {
-      notes: { markdown: notes, json: dataSimple },
-    }
-  )
-  .add(
-    'long',
-    () =>
-      breadcrumb(
-        merge(dataLong, {
-          icon_file_path: defaultSprite,
-        })
-      ),
-    {
-      notes: { markdown: notes, json: dataLong },
-    }
-  );
+  .addDecorator(withKnobs)
+  .add('simple', () => breadcrumb(prepareBreadcrumbHarmonised(dataSimple)), {
+    notes: { markdown: notes, json: dataSimple },
+  })
+  .add('long', () => breadcrumb(prepareBreadcrumbHarmonised(dataLong)), {
+    notes: { markdown: notes, json: dataLong },
+  });