refactor(demo): Language list, optional/mandatory knobs, fixing the notes plugin - FRONT-925

src/ec/packages/ec-component-language-list/adapter.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { formatLinkAlt } from '@ecl-twig/data-utils';
+
+const adapter = initialData => {
+  // Copy reference specification demo adaptedData.
+  const adaptedData = JSON.parse(JSON.stringify(initialData));
+  adaptedData.items = adaptedData.items.map(formatLinkAlt);
+  adaptedData.icon_path = '/icons.svg';
+  if (initialData.logoAlt) {
+    adaptedData.logo = {
+      alt: initialData.logoAlt,
+      path: '/logo--mute.svg',
+    };
+    delete adaptedData.logoAlt;
+  }
+  if (initialData.closeLabel) {
+    adaptedData.close_label = initialData.closeLabel;
+    delete adaptedData.closeLabel;
+  }
+
+  return adaptedData;
+};
+
+export default adapter;

src/ec/packages/ec-component-language-list/demo/data--overlay.js

@@ -1,14 +1,6 @@
-import { formatLinkAlt } from '@ecl-twig/data-utils';
 import specDataOverlay from '@ecl/ec-specs-language-list/demo/data--overlay';
+import adapter from '../adapter';
 
-export default {
-  overlay: true,
-  icon_path: '/icons.svg',
-  close_label: specDataOverlay.closeLabel,
-  title: specDataOverlay.title,
-  items: specDataOverlay.items.map(formatLinkAlt),
-  logo: {
-    alt: specDataOverlay.logoAlt,
-    path: '/logo--mute.svg',
-  },
-};
+specDataOverlay.overlay = true;
+
+export default adapter(specDataOverlay);

src/ec/packages/ec-component-language-list/demo/data--splash.js

@@ -1,12 +1,6 @@
 import specDataSplash from '@ecl/ec-specs-language-list/demo/data--splash';
-import { formatLinkAlt } from '@ecl-twig/data-utils';
+import adapter from '../adapter';
 
-export default {
-  items: specDataSplash.items.map(formatLinkAlt),
-  overlay: false,
-  icon_path: '/icons.svg',
-  logo: {
-    alt: specDataSplash.logoAlt,
-    path: '/logo--mute.svg',
-  },
-};
+specDataSplash.overlay = false;
+
+export default adapter(specDataSplash);

src/ec/packages/ec-component-language-list/ecl-language-list-item.html.twig

@@ -18,38 +18,39 @@
 {% set _icon_path = icon_path|default('') %}
 
 {# Internal logic - Process properties #}
+{% if _item.path is defined and _item.path is not empty and _item.label is defined and _item.label is not empty %}
+  {% set _item_icon = {} %}
+  {% if _item.active %}
+    {% set _item_icon = {
+      path: _icon_path,
+      type: 'ui',
+      name: 'check',
+      size: 'xs'
+    } %}
+  {% endif %}
 
-{% set _item_icon = {} %}
-{% if _item.active %}
-  {% set _item_icon = {
-    path: _icon_path,
-    type: 'ui',
-    name: 'check',
-    size: 'xs'
-  } %}
-{% endif %}
-
-{% set _item_attribute = [] %}
-{% if _item.lang is not empty %}
-  {% set _item_attribute = _item_attribute|merge([{ name: 'lang', value: _item.lang }]) %}
-  {% set _item_attribute = _item_attribute|merge([{ name: 'hreflang', value: _item.lang }]) %}
-  {% if _overlay %}
-    {% set _item_attribute = _item_attribute|merge([{ name: 'rel', value: 'alternate' }]) %}
+  {% set _item_attribute = [] %}
+  {% if _item.lang is not empty %}
+    {% set _item_attribute = _item_attribute|merge([{ name: 'lang', value: _item.lang }]) %}
+    {% set _item_attribute = _item_attribute|merge([{ name: 'hreflang', value: _item.lang }]) %}
+    {% if _overlay %}
+      {% set _item_attribute = _item_attribute|merge([{ name: 'rel', value: 'alternate' }]) %}
+    {% endif %}
   {% endif %}
-{% endif %}
 
-{# Print the result #}
-
-{% include '@ecl-twig/ec-component-link/ecl-link.html.twig' with {
-  link: {
-    type: 'standalone',
-    label: _item.label,
-    path: _item.path,
-    icon_position: 'after'
-  },
-  icon: _item_icon,
-  extra_classes: 'ecl-language-list__link',
-  extra_attributes: _item_attribute
-} only %}
+  {# Print the result #}
+
+  {% include '@ecl-twig/ec-component-link/ecl-link.html.twig' with {
+    link: {
+      type: 'standalone',
+      label: _item.label,
+      path: _item.path,
+      icon_position: 'after'
+    },
+    icon: _item_icon,
+    extra_classes: 'ecl-language-list__link',
+    extra_attributes: _item_attribute
+  } only %}
+{% endif %}
 
 {% endspaceless %}

src/ec/packages/ec-component-language-list/language-list.story.js

@@ -1,52 +1,92 @@
-import merge from 'deepmerge';
+/* eslint-disable no-param-reassign */
 import { storiesOf } from '@storybook/html';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs, text, select } from '@storybook/addon-knobs';
 import { withNotes } from '@ecl-twig/storybook-addon-notes';
 import withCode from '@ecl-twig/storybook-addon-code';
+import { getExtraKnobs, buttonLabels } from '@ecl-twig/story-utils';
 
 import logoPath from '@ecl/ec-resources-logo/logo--mute.svg';
 import iconPath from '@ecl/ec-resources-icons/dist/sprites/icons.svg';
-
 import dataSplash from './demo/data--splash';
 import dataOverlay from './demo/data--overlay';
-
 import languageList from './ecl-language-list.html.twig';
-
 import notes from './README.md';
 
+const prepareLanguageList = data => {
+  data.icon_path = select(
+    'icon_path',
+    [iconPath],
+    iconPath,
+    buttonLabels.required
+  );
+  if (data.logo) {
+    data.logo.path = select(
+      'logo.path',
+      [logoPath],
+      logoPath,
+      buttonLabels.required
+    );
+    data.logo.alt = select(
+      'logo.alt',
+      [data.logo.alt],
+      data.logo.alt,
+      buttonLabels.required
+    );
+  }
+  if (data.overlay) {
+    data.overlay = select(
+      'overlay',
+      [data.overlay],
+      data.overlay,
+      buttonLabels.required
+    );
+  }
+  if (data.close_label) {
+    data.close_label = text(
+      'close_label',
+      data.close_label,
+      buttonLabels.required
+    );
+  }
+  if (data.title) {
+    data.title = text('title', data.title, buttonLabels.required);
+  }
+
+  data.items.forEach((item, i) => {
+    if (data.items[i].label && data.items[i].path) {
+      item.label = select(
+        `items[${i}].label`,
+        ['none', item.label],
+        item.label,
+        buttonLabels.required
+      );
+      item.path = text(`items[${i}].path`, item.path, buttonLabels.required);
+      item.lang = select(
+        `items[${i}].lang`,
+        [item.lang],
+        item.lang,
+        buttonLabels.required
+      );
+    }
+
+    if (data.items[i].label === 'none') {
+      data.items[i].label = '';
+      data.items[i].path = '';
+    }
+  });
+
+  getExtraKnobs(data);
+
+  return data;
+};
+
 storiesOf('Components/Language list', module)
   .addDecorator(withKnobs)
   .addDecorator(withCode)
   .addDecorator(withNotes)
-  .add(
-    'splash',
-    () =>
-      languageList(
-        merge(dataSplash, {
-          icon_path: iconPath,
-          overlay: boolean('Overlay', false),
-          title: dataOverlay.title,
-          close_label: dataOverlay.close_label,
-          logo: {
-            path: logoPath,
-          },
-        })
-      ),
-    {
-      notes: { markdown: notes, json: dataSplash },
-    }
-  )
-  .add(
-    'overlay',
-    () =>
-      languageList(
-        merge(dataOverlay, {
-          title: text('Title', dataOverlay.title),
-          close_label: text('Close label', dataOverlay.close_label),
-          icon_path: iconPath,
-        })
-      ),
-    {
-      notes: { markdown: notes, json: dataOverlay },
-    }
-  );
+  .add('splash', () => languageList(prepareLanguageList(dataSplash)), {
+    notes: { markdown: notes, json: dataSplash },
+  })
+  .add('overlay', () => languageList(prepareLanguageList(dataOverlay)), {
+    notes: { markdown: notes, json: dataOverlay },
+  });

utils/storybook-addon-notes/src/index.js

@@ -39,17 +39,43 @@ renderer.code = function customCode(code, infostring, escaped) {
 
 function renderMarkdown(text, options, json) {
   if (json) {
-    if (json.extra_classes === '') {
-      delete json.extra_classes;
+    const example = { ...json };
+    if (example.extra_classes === '') {
+      delete example.extra_classes;
+    }
+    if (example.extra_attributes === null) {
+      delete json.extra_attributes;
+    }
+    if (json.items) {
+      example.items = [...json.items];
+      example.items.forEach((item, i) => {
+        if (item.label === '' && item.path === '') {
+          example.items[i] = {};
+        }
+      });
+      example.items = example.items.filter(
+        value => Object.keys(value).length !== 0
+      );
+    }
+    if (json.links) {
+      example.links = [...json.links];
+      example.links.forEach((link, i) => {
+        if (link.label === '' && link.path === '') {
+          example.links[i] = {};
+        }
+      });
+      example.links = example.links.filter(
+        value => Object.keys(value).length !== 0
+      );
     }
     // Fixing the econding of ', mainly
-    Object.keys(json).forEach(e => {
-      if (typeof json[e] === 'string') {
-        json[e] = he.decode(json[e]);
+    Object.keys(example).forEach(e => {
+      if (typeof example[e] === 'string') {
+        example[e] = he.decode(example[e]);
       }
     });
     // Ehm, this is the best format we could get.
-    let specs = JSON.stringify(json, null, '\n..');
+    let specs = JSON.stringify(example, null, '\n..');
     // We only replace the existing example.s
     specs = specs.replace(/"([^"()]+)":/g, '$1:');
     const n = specs.lastIndexOf('}');