From 5d5a309a2bb43e8a74f513db97b152a1129d8da7 Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 26 Mar 2020 15:46:28 +0100 Subject: [PATCH 1/2] refactor(demo): Language list, optional/mandatory knobs, fixing the notes plugin - FRONT-925 --- .../demo/data--overlay.js | 16 +-- .../demo/data--splash.js | 14 +-- .../ecl-language-list-item.html.twig | 61 +++++----- .../language-list.story.js | 114 ++++++++++++------ utils/storybook-addon-notes/src/index.js | 38 +++++- 5 files changed, 148 insertions(+), 95 deletions(-) diff --git a/src/ec/packages/ec-component-language-list/demo/data--overlay.js b/src/ec/packages/ec-component-language-list/demo/data--overlay.js index d1a4e26d8..82fcd70ed 100644 --- a/src/ec/packages/ec-component-language-list/demo/data--overlay.js +++ b/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); diff --git a/src/ec/packages/ec-component-language-list/demo/data--splash.js b/src/ec/packages/ec-component-language-list/demo/data--splash.js index c20c77eea..b6abf5161 100644 --- a/src/ec/packages/ec-component-language-list/demo/data--splash.js +++ b/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); diff --git a/src/ec/packages/ec-component-language-list/ecl-language-list-item.html.twig b/src/ec/packages/ec-component-language-list/ecl-language-list-item.html.twig index 18d817987..b6c7ac574 100644 --- a/src/ec/packages/ec-component-language-list/ecl-language-list-item.html.twig +++ b/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 %} diff --git a/src/ec/packages/ec-component-language-list/language-list.story.js b/src/ec/packages/ec-component-language-list/language-list.story.js index f089aacd2..edc5363f1 100644 --- a/src/ec/packages/ec-component-language-list/language-list.story.js +++ b/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 }, + }); diff --git a/utils/storybook-addon-notes/src/index.js b/utils/storybook-addon-notes/src/index.js index 82e786f4a..9a5f5c201 100644 --- a/utils/storybook-addon-notes/src/index.js +++ b/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('}'); From 920a411ce11345d3fa53de1f650110d37fa4bcaa Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 26 Mar 2020 15:56:39 +0100 Subject: [PATCH 2/2] refactor(language-list): Forgotten file, FRONT-925 --- .../ec-component-language-list/adapter.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/ec/packages/ec-component-language-list/adapter.js diff --git a/src/ec/packages/ec-component-language-list/adapter.js b/src/ec/packages/ec-component-language-list/adapter.js new file mode 100644 index 000000000..4922de3e2 --- /dev/null +++ b/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;