diff --git a/src/ec/packages/ec-component-accordion/accordion.story.js b/src/ec/packages/ec-component-accordion/accordion.story.js index 8525ce4ae..a91f0b5d7 100644 --- a/src/ec/packages/ec-component-accordion/accordion.story.js +++ b/src/ec/packages/ec-component-accordion/accordion.story.js @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, text, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { getExtraKnobs, buttonLabels } from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import demoData from './demo/data'; @@ -18,24 +18,20 @@ const preprareAccordion = data => { `items[${index}].level`, levels, level, - buttonLabels.required - ); - item.id = select(`items[${index}].id`, [id], id, buttonLabels.required); - item.content = text( - `items[${index}].content`, - content, - buttonLabels.required + tabLabels.required ); + item.id = select(`items[${index}].id`, [id], id, tabLabels.required); + item.content = text(`items[${index}].content`, content, tabLabels.required); item.toggle.label = text( `items[${index}].toggle.label`, toggle.label, - buttonLabels.required + tabLabels.required ); item.toggle.icon.path = select( `items[${index}].toggle.icon.path`, [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); getExtraKnobs(data); }); diff --git a/src/ec/packages/ec-component-accordion2/accordion2.story.js b/src/ec/packages/ec-component-accordion2/accordion2.story.js index 6dc9dfd36..07864d147 100644 --- a/src/ec/packages/ec-component-accordion2/accordion2.story.js +++ b/src/ec/packages/ec-component-accordion2/accordion2.story.js @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, text, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { getExtraKnobs, buttonLabels } from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import demoData from './demo/data'; @@ -18,24 +18,20 @@ const prepareAccordion2 = data => { `items[${index}].level`, levels, level, - buttonLabels.required - ); - item.id = select(`items[${index}].id`, [id], id, buttonLabels.required); - item.content = text( - `items[${index}].content`, - content, - buttonLabels.required + tabLabels.required ); + item.id = select(`items[${index}].id`, [id], id, tabLabels.required); + item.content = text(`items[${index}].content`, content, tabLabels.required); item.toggle.label = text( `items[${index}].toggle.label`, toggle.label, - buttonLabels.required + tabLabels.required ); item.toggle.icon.path = select( `items[${index}].toggle.icon.path`, [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); }); diff --git a/src/ec/packages/ec-component-button/button.story.js b/src/ec/packages/ec-component-button/button.story.js index d7f18ea3e..f1558ed66 100644 --- a/src/ec/packages/ec-component-button/button.story.js +++ b/src/ec/packages/ec-component-button/button.story.js @@ -3,11 +3,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, text, select, boolean } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; import withCode from '@ecl-twig/storybook-addon-code'; -import { - getExtraKnobs, - buttonLabels, - getIconKnobs, -} from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels, getIconKnobs } from '@ecl-twig/story-utils'; // Import data for demos import dataPrimary from '@ecl/ec-specs-button/demo/data--primary'; import dataSecondary from '@ecl/ec-specs-button/demo/data--secondary'; @@ -28,14 +24,14 @@ uiIcons.forEach(icon => { // Preserve the adapted specs. const prepareButton = data => { - data.disabled = boolean('disabled', data.disabled, buttonLabels.states); - data.label = text('label', data.label, buttonLabels.required); + data.disabled = boolean('disabled', data.disabled, tabLabels.states); + data.label = text('label', data.label, tabLabels.required); data.variant = select( 'variant', [data.variant], data.variant, - buttonLabels.required + tabLabels.required ); getExtraKnobs(data); @@ -51,7 +47,7 @@ storiesOf('Components/Button', module) 'primary', () => { const data = prepareButton(dataPrimary); - const name = select('icon.name', iconsList, null, buttonLabels.optional); + const name = select('icon.name', iconsList, null, tabLabels.optional); if (name !== null) { getIconKnobs(data, name, 'ui', 'xs'); } @@ -66,7 +62,7 @@ storiesOf('Components/Button', module) 'secondary', () => { const data = prepareButton(dataSecondary); - const name = select('icon.name', iconsList, null, buttonLabels.optional); + const name = select('icon.name', iconsList, null, tabLabels.optional); if (name !== null) { getIconKnobs(data, name, 'ui', 'xs'); } @@ -85,7 +81,7 @@ storiesOf('Components/Button', module) 'icon.name', iconsList, 'corner-arrow', - buttonLabels.optional + tabLabels.optional ); if (name !== null) { getIconKnobs(data, name, 'ui', 'xs', 'default', 'rotate-90'); @@ -101,7 +97,7 @@ storiesOf('Components/Button', module) 'text', () => { const data = prepareButton(dataGhost); - const name = select('icon.name', iconsList, null, buttonLabels.optional); + const name = select('icon.name', iconsList, null, tabLabels.optional); if (name !== null) { getIconKnobs(data, name, 'ui', 'xs'); } @@ -116,7 +112,7 @@ storiesOf('Components/Button', module) 'search', () => { const data = prepareButton(dataSearch); - const name = select('icon.name', iconsList, null, buttonLabels.optional); + const name = select('icon.name', iconsList, null, tabLabels.optional); if (name !== null) { getIconKnobs(data, name, 'ui', 'xs'); } diff --git a/src/ec/packages/ec-component-checkbox/checkbox.story.js b/src/ec/packages/ec-component-checkbox/checkbox.story.js index aafe1a67e..feac8756a 100644 --- a/src/ec/packages/ec-component-checkbox/checkbox.story.js +++ b/src/ec/packages/ec-component-checkbox/checkbox.story.js @@ -2,11 +2,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { - getExtraKnobs, - getFormKnobs, - buttonLabels, -} from '@ecl-twig/story-utils'; +import { getExtraKnobs, getFormKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; @@ -18,23 +14,18 @@ const prepareCheckbox = data => { getFormKnobs(data); data.items.forEach((item, i) => { - item.id = select( - `items[${i}].id`, - [item.id], - item.id, - buttonLabels.required - ); + item.id = select(`items[${i}].id`, [item.id], item.id, tabLabels.required); item.value = select( `items[${i}].value`, [item.value], item.value, - buttonLabels.required + tabLabels.required ); item.icon_path = select( `items[${i}]icon_path`, [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); }); diff --git a/src/ec/packages/ec-component-datepicker/datepicker.story.js b/src/ec/packages/ec-component-datepicker/datepicker.story.js index 0fdc6a6bd..a571cb734 100644 --- a/src/ec/packages/ec-component-datepicker/datepicker.story.js +++ b/src/ec/packages/ec-component-datepicker/datepicker.story.js @@ -3,11 +3,7 @@ import { storiesOf } from '@storybook/html'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; import { withKnobs, text, select } from '@storybook/addon-knobs'; import withCode from '@ecl-twig/storybook-addon-code'; -import { - getExtraKnobs, - buttonLabels, - getFormKnobs, -} from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels, getFormKnobs } from '@ecl-twig/story-utils'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import dataDefault from './demo/data'; @@ -16,19 +12,15 @@ import notes from './README.md'; const prepareDatePicker = data => { getFormKnobs(data); - data.label = text('label', data.label, buttonLabels.required); + data.label = text('label', data.label, tabLabels.required); data.icons_path = select( 'icons_path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); - data.placeholder = text( - 'placeholder', - data.placeholder, - buttonLabels.required - ); + data.placeholder = text('placeholder', data.placeholder, tabLabels.required); getExtraKnobs(data); diff --git a/src/ec/packages/ec-component-file/file.story.js b/src/ec/packages/ec-component-file/file.story.js index 2a8837edc..92df9238a 100644 --- a/src/ec/packages/ec-component-file/file.story.js +++ b/src/ec/packages/ec-component-file/file.story.js @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, text, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { getExtraKnobs, buttonLabels } from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; @@ -13,76 +13,76 @@ import file from './ecl-file.html.twig'; import notes from './README.md'; const prepareFile = data => { - data.title = text('title', data.title, buttonLabels.required); - data.language = text('language', data.language, buttonLabels.required); - data.meta = text('meta', data.meta, buttonLabels.required); + data.title = text('title', data.title, tabLabels.required); + data.language = text('language', data.language, tabLabels.required); + data.meta = text('meta', data.meta, tabLabels.required); data.icon.path = select( 'icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); data.download.link.label = text( 'download.link.label', data.download.link.label, - buttonLabels.required + tabLabels.required ); data.download.icon.path = select( 'download.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); if (data.translation) { data.translation.description = text( 'translation.description', data.translation.description, - buttonLabels.optional + tabLabels.optional ); data.translation.toggle.label = text( 'translation.toggle.label', data.translation.toggle.label, - buttonLabels.required + tabLabels.required ); data.translation.toggle.icon.path = select( 'translation.toggle.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); data.translation.items.forEach((item, i) => { data.translation.items[i].title = text( `data.translation.items[${i}].title`, data.translation.items[i].title, - buttonLabels.required + tabLabels.required ); data.translation.items[i].meta = text( `data.translation.items[${i}].meta`, data.translation.items[i].meta, - buttonLabels.required + tabLabels.required ); data.translation.items[i].lang = text( `data.translation.items[${i}].lang`, data.translation.items[i].lang, - buttonLabels.required + tabLabels.required ); data.translation.items[i].download.link.label = text( `data.translation.items[${i}].download.link.label`, data.translation.items[i].download.link.label, - buttonLabels.required + tabLabels.required ); data.translation.items[i].download.link.path = text( `data.translation.items[${i}].download.link.path`, data.translation.items[i].download.link.path, - buttonLabels.required + tabLabels.required ); data.translation.items[i].download.icon.path = select( `data.translation.items[${i}].download.icon.path`, [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); }); } diff --git a/src/ec/packages/ec-component-gallery/gallery.story.js b/src/ec/packages/ec-component-gallery/gallery.story.js index 8c93229ce..0c22cc73e 100644 --- a/src/ec/packages/ec-component-gallery/gallery.story.js +++ b/src/ec/packages/ec-component-gallery/gallery.story.js @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, text, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { getExtraKnobs, buttonLabels } from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; @@ -17,19 +17,19 @@ const prepareGallery = data => { `items[${i}].share_path`, [item.share_path], item.share_path, - buttonLabels.required + tabLabels.required ); item.description = text( `items[${i}].description`, item.description, - buttonLabels.optional + tabLabels.optional ); - item.meta = text(`items[${i}].meta`, item.meta, buttonLabels.optional); - item.alt = text(`items[${i}].alt`, item.alt, buttonLabels.optional); + item.meta = text(`items[${i}].meta`, item.meta, tabLabels.optional); + item.alt = text(`items[${i}].alt`, item.alt, tabLabels.optional); item.extra_classes = text( `items[${i}].extra_classes`, item.extra_classes, - buttonLabels.optional + tabLabels.optional ); if (!item.extra_attributes) { item.extra_attributes = [{}]; @@ -37,12 +37,12 @@ const prepareGallery = data => { item.extra_attributes[0].name = text( `items[${i}].extra_attributes[0].name`, '', - buttonLabels.optional + tabLabels.optional ); item.extra_attributes[0].value = text( `items[${i}].extra_attributes[0].value`, item.extra_attributes[0].value, - buttonLabels.optional + tabLabels.optional ); if (!item.extra_attributes[0].value) { delete item.extra_attributes[0].value; @@ -55,7 +55,7 @@ const prepareGallery = data => { `items[${i}].icon.path`, [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); } if (item.video) { @@ -63,25 +63,25 @@ const prepareGallery = data => { `items[${i}].video.sources[0].src`, [item.video.sources[0].src], item.video.sources[0].src, - buttonLabels.required + tabLabels.required ); } }); data.items.selected_item_id = text( 'items.selected_item_id', data.items.selected_item_id, - buttonLabels.optional + tabLabels.optional ); // Overlay knobs. data.overlay.counter_separator = text( 'overlay.counter_separator', data.overlay.counter_separator, - buttonLabels.required + tabLabels.required ); data.overlay.extra_classes = text( 'data.overlay.extra_classes', '', - buttonLabels.optional + tabLabels.optional ); if (!data.overlay.extra_attributes) { data.overlay.extra_attributes = [{}]; @@ -89,12 +89,12 @@ const prepareGallery = data => { data.overlay.extra_attributes[0].name = text( 'data.overlay.extra_attributes[0].name', '', - buttonLabels.optional + tabLabels.optional ); data.overlay.extra_attributes[0].value = text( `data.overlay.extra_attributes[0].value`, data.overlay.extra_attributes[0].value, - buttonLabels.optional + tabLabels.optional ); if (!data.overlay.extra_attributes[0].value) { delete data.overlay.extra_attributes[0].value; @@ -105,57 +105,57 @@ const prepareGallery = data => { data.overlay.close.label = text( 'overlay.close.label', data.overlay.close.label, - buttonLabels.required + tabLabels.required ); data.overlay.close.icon.path = select( 'overlay.close.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); data.overlay.previous.label = text( 'overlay.previous.label', data.overlay.previous.label, - buttonLabels.required + tabLabels.required ); data.overlay.previous.icon.path = select( 'overlay.previous.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); data.overlay.next.label = text( 'overlay.next.label', data.overlay.next.label, - buttonLabels.required + tabLabels.required ); data.overlay.next.icon.path = select( 'overlay.next.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); data.overlay.download.link.label = text( 'overlay.download.link.label', data.overlay.download.link.label, - buttonLabels.required + tabLabels.required ); data.overlay.download.link.path = text( 'overlay.download.link.path', data.overlay.download.link.path, - buttonLabels.required + tabLabels.required ); data.overlay.download.icon.path = select( 'overlay.download.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); data.overlay.share.icon.path = select( 'overlay.share.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); getExtraKnobs(data); diff --git a/src/ec/packages/ec-component-hero-banner/hero-banner.story.js b/src/ec/packages/ec-component-hero-banner/hero-banner.story.js index 239d3d909..27f7eb9dd 100644 --- a/src/ec/packages/ec-component-hero-banner/hero-banner.story.js +++ b/src/ec/packages/ec-component-hero-banner/hero-banner.story.js @@ -2,11 +2,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { - getExtraKnobs, - getIconKnobs, - buttonLabels, -} from '@ecl-twig/story-utils'; +import { getExtraKnobs, getIconKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import uiIcons from '@ecl/ec-resources-icons/dist/lists/ui.json'; @@ -22,34 +18,30 @@ import notes from './README.md'; uiIcons.unshift('null'); const prepareBanner = data => { if (data.centered) { - data.centered = boolean('centered', data.centered, buttonLabels.states); + data.centered = boolean('centered', data.centered, tabLabels.states); } - data.type = select('type', [data.type], data.type, buttonLabels.required); - data.title = text('title', data.title, buttonLabels.required); - data.description = text( - 'description', - data.description, - buttonLabels.required - ); + data.type = select('type', [data.type], data.type, tabLabels.required); + data.title = text('title', data.title, tabLabels.required); + data.description = text('description', data.description, tabLabels.required); if (data.image) { - data.image = text('image', data.image, buttonLabels.required); + data.image = text('image', data.image, tabLabels.required); } data.link.link.label = text( 'link.link.label', data.link.link.label, - buttonLabels.required + tabLabels.required ); data.link.link.path = text( 'link.link.path', data.link.link.path, - buttonLabels.required + tabLabels.required ); data.link.icon.name = select( 'link.icon.name', uiIcons, data.link.icon.name, - buttonLabels.optional + tabLabels.optional ); if (data.link.icon.name !== 'null') { getIconKnobs( diff --git a/src/ec/packages/ec-component-icon/icon.story.js b/src/ec/packages/ec-component-icon/icon.story.js index f0efcc91e..7775a82de 100644 --- a/src/ec/packages/ec-component-icon/icon.story.js +++ b/src/ec/packages/ec-component-icon/icon.story.js @@ -1,11 +1,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { - getExtraKnobs, - getIconKnobs, - buttonLabels, -} from '@ecl-twig/story-utils'; +import { getExtraKnobs, getIconKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import brandedIcons from '@ecl/ec-resources-icons/dist/lists/branded.json'; @@ -38,7 +34,7 @@ storiesOf('Components/Icon', module) 'icon.name', brandedIcons, brandedIcons[0], - buttonLabels.required + tabLabels.required ); const dataStory = prepareIcon(dataBranded, iconName); @@ -55,7 +51,7 @@ storiesOf('Components/Icon', module) 'icon.name', generalIcons, generalIcons[0], - buttonLabels.required + tabLabels.required ); const dataStory = prepareIcon(dataGeneral, iconName); @@ -72,7 +68,7 @@ storiesOf('Components/Icon', module) 'icon.name', notificationsIcons, notificationsIcons[0], - buttonLabels.required + tabLabels.required ); const dataStory = prepareIcon(dataNotifications, iconName); @@ -89,7 +85,7 @@ storiesOf('Components/Icon', module) 'icon.name', uiIcons, uiIcons[0], - buttonLabels.required + tabLabels.required ); const dataStory = prepareIcon(dataUi, iconName); diff --git a/src/ec/packages/ec-component-inpage-navigation/inpage-navigation.story.js b/src/ec/packages/ec-component-inpage-navigation/inpage-navigation.story.js index 76ff32bd6..cf4815810 100644 --- a/src/ec/packages/ec-component-inpage-navigation/inpage-navigation.story.js +++ b/src/ec/packages/ec-component-inpage-navigation/inpage-navigation.story.js @@ -4,7 +4,7 @@ import { withKnobs, button } from '@storybook/addon-knobs'; import { loremIpsum } from 'lorem-ipsum'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; import withCode from '@ecl-twig/storybook-addon-code'; -import { buttonLabels } from '@ecl-twig/story-utils'; +import { tabLabels } from '@ecl-twig/story-utils'; import iconPath from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import demoData from './demo/data'; @@ -82,10 +82,10 @@ storiesOf('Components/Navigation/Inpage navigation', module) 'default', () => { // Buttons for the demo. - button(btnLeftLabel, btnLeftHandler, buttonLabels.cases); - button(btnMainLabel, btnMainHandler, buttonLabels.cases); - button(btnIdLabel, btnIdHandler, buttonLabels.cases); - button(btnIdRemoveLabel, btnIdRemoveHandler, buttonLabels.cases); + button(btnLeftLabel, btnLeftHandler, tabLabels.cases); + button(btnMainLabel, btnMainHandler, tabLabels.cases); + button(btnIdLabel, btnIdHandler, tabLabels.cases); + button(btnIdRemoveLabel, btnIdRemoveHandler, tabLabels.cases); let pageFillerHtml = ''; demoData.links.forEach(content => { 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 edc5363f1..ebfcef156 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 @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/html'; 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 { getExtraKnobs, tabLabels } 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'; @@ -17,20 +17,20 @@ const prepareLanguageList = data => { 'icon_path', [iconPath], iconPath, - buttonLabels.required + tabLabels.required ); if (data.logo) { data.logo.path = select( 'logo.path', [logoPath], logoPath, - buttonLabels.required + tabLabels.required ); data.logo.alt = select( 'logo.alt', [data.logo.alt], data.logo.alt, - buttonLabels.required + tabLabels.required ); } if (data.overlay) { @@ -38,18 +38,18 @@ const prepareLanguageList = data => { 'overlay', [data.overlay], data.overlay, - buttonLabels.required + tabLabels.required ); } if (data.close_label) { data.close_label = text( 'close_label', data.close_label, - buttonLabels.required + tabLabels.required ); } if (data.title) { - data.title = text('title', data.title, buttonLabels.required); + data.title = text('title', data.title, tabLabels.required); } data.items.forEach((item, i) => { @@ -58,14 +58,14 @@ const prepareLanguageList = data => { `items[${i}].label`, ['none', item.label], item.label, - buttonLabels.required + tabLabels.required ); - item.path = text(`items[${i}].path`, item.path, buttonLabels.required); + item.path = text(`items[${i}].path`, item.path, tabLabels.required); item.lang = select( `items[${i}].lang`, [item.lang], item.lang, - buttonLabels.required + tabLabels.required ); } diff --git a/src/ec/packages/ec-component-menu/menu.story.js b/src/ec/packages/ec-component-menu/menu.story.js index 32f9ceeb5..240398fce 100644 --- a/src/ec/packages/ec-component-menu/menu.story.js +++ b/src/ec/packages/ec-component-menu/menu.story.js @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, select, text, object } 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 { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import iconPath from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import enData from './demo/data--en'; @@ -12,19 +12,19 @@ import menu from './ecl-menu.html.twig'; import notes from './README.md'; const prepareMenu = data => { - data.title = text('title', data.title, buttonLabels.required); - data.close = text('close', data.close, buttonLabels.required); - data.back = text('back', data.back, buttonLabels.required); + data.title = text('title', data.title, tabLabels.required); + data.close = text('close', data.close, tabLabels.required); + data.back = text('back', data.back, tabLabels.required); data.icon_path = select( 'icon_path', [iconPath], iconPath, - buttonLabels.required + tabLabels.required ); getExtraKnobs(data); - data.items = object('items', data.items, buttonLabels.optional); + data.items = object('items', data.items, tabLabels.optional); return data; }; diff --git a/src/ec/packages/ec-component-message/message.story.js b/src/ec/packages/ec-component-message/message.story.js index 2023e8780..d1fc19ee3 100644 --- a/src/ec/packages/ec-component-message/message.story.js +++ b/src/ec/packages/ec-component-message/message.story.js @@ -3,11 +3,7 @@ import { storiesOf } from '@storybook/html'; 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, - getIconKnobs, -} from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels, getIconKnobs } from '@ecl-twig/story-utils'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; // Import data for demos import dataInfo from './demo/data--info'; @@ -19,30 +15,26 @@ import message from './ecl-message.html.twig'; import notes from './README.md'; const prepareMessage = data => { - data.title = text('title', data.title, buttonLabels.required); - data.description = text( - 'description', - data.description, - buttonLabels.required - ); + data.title = text('title', data.title, tabLabels.required); + data.description = text('description', data.description, tabLabels.required); data.variant = select( 'variant', [data.variant], data.variant, - buttonLabels.required + tabLabels.required ); const name = select( 'icon.name', [data.icon.name], data.icon.name, - buttonLabels.required + tabLabels.required ); getIconKnobs(data, name, 'notifications', 'l', 'primary', 'none'); data.close.icon.path = select( 'close.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); getExtraKnobs(data); diff --git a/src/ec/packages/ec-component-page-banner/page-banner.story.js b/src/ec/packages/ec-component-page-banner/page-banner.story.js index 367e32682..4f05ba13e 100644 --- a/src/ec/packages/ec-component-page-banner/page-banner.story.js +++ b/src/ec/packages/ec-component-page-banner/page-banner.story.js @@ -3,11 +3,7 @@ import { storiesOf } from '@storybook/html'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'; import withCode from '@ecl-twig/storybook-addon-code'; -import { - getExtraKnobs, - buttonLabels, - getIconKnobs, -} from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels, getIconKnobs } from '@ecl-twig/story-utils'; import uiIcons from '@ecl/ec-resources-icons/dist/lists/ui.json'; @@ -23,32 +19,32 @@ import notes from './README.md'; uiIcons.unshift('null'); const preparePageBanner = data => { if (data.centered) { - data.centered = boolean('centered', data.centered, buttonLabels.states); + data.centered = boolean('centered', data.centered, tabLabels.states); } - data.type = select('type', [data.type], data.type, buttonLabels.required); - data.title = text('title', data.title, buttonLabels.required); + data.type = select('type', [data.type], data.type, tabLabels.required); + data.title = text('title', data.title, tabLabels.required); if (data.baseline) { - data.baseline = text('baseline', data.baseline, buttonLabels.required); + data.baseline = text('baseline', data.baseline, tabLabels.required); } if (data.image) { - data.image = text('image', data.image, buttonLabels.required); + data.image = text('image', data.image, tabLabels.required); } data.link.link.label = text( 'Link label', data.link.link.label, - buttonLabels.required + tabLabels.required ); data.link.link.path = text( 'link.link.path', data.link.link.path, - buttonLabels.required + tabLabels.required ); data.link.icon.name = select( 'link.icon.name', uiIcons, data.link.icon.name, - buttonLabels.optional + tabLabels.optional ); if (data.link.icon.name !== 'null') { getIconKnobs( diff --git a/src/ec/packages/ec-component-radio/radio.story.js b/src/ec/packages/ec-component-radio/radio.story.js index a0988c40e..88262c5b6 100644 --- a/src/ec/packages/ec-component-radio/radio.story.js +++ b/src/ec/packages/ec-component-radio/radio.story.js @@ -5,7 +5,7 @@ import { withNotes } from '@ecl-twig/storybook-addon-notes'; import { getExtraKnobs, getFormKnobs, - buttonLabels, + tabLabels, getFormItemKnobs, } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; @@ -41,7 +41,7 @@ storiesOf('Components/Forms/Radio', module) .add( 'binary', () => { - boolean('binary', true, buttonLabels.states); + boolean('binary', true, tabLabels.states); const data = prepareRadio(dataBinary); return radioGroup(data); diff --git a/src/ec/packages/ec-component-search-form/search-form.story.js b/src/ec/packages/ec-component-search-form/search-form.story.js index 75fcdcf72..c81d48055 100644 --- a/src/ec/packages/ec-component-search-form/search-form.story.js +++ b/src/ec/packages/ec-component-search-form/search-form.story.js @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, text, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { getExtraKnobs, buttonLabels } from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; @@ -14,13 +14,13 @@ const prepareSearchForm = data => { data.button.label = text( 'button.label', data.button.label, - buttonLabels.required + tabLabels.required ); data.button.icon.path = select( 'button.icon.path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); getExtraKnobs(data); diff --git a/src/ec/packages/ec-component-select/select.story.js b/src/ec/packages/ec-component-select/select.story.js index 51505ed5f..86bed54b2 100644 --- a/src/ec/packages/ec-component-select/select.story.js +++ b/src/ec/packages/ec-component-select/select.story.js @@ -3,11 +3,7 @@ import { storiesOf } from '@storybook/html'; 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, - getFormKnobs, - buttonLabels, -} from '@ecl-twig/story-utils'; +import { getExtraKnobs, getFormKnobs, tabLabels } from '@ecl-twig/story-utils'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import specData from './demo/data'; @@ -23,19 +19,19 @@ const prepareSelect = data => { 'icon_path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); data.options.forEach((option, i) => { option.label = text( `options[${i}].label`, option.label, - buttonLabels.required + tabLabels.required ); option.value = text( `options[${i}].value`, option.value, - buttonLabels.required + tabLabels.required ); }); diff --git a/src/ec/packages/ec-component-site-header-core/site-header-core.story.js b/src/ec/packages/ec-component-site-header-core/site-header-core.story.js index 0db8d8d95..5be34019f 100644 --- a/src/ec/packages/ec-component-site-header-core/site-header-core.story.js +++ b/src/ec/packages/ec-component-site-header-core/site-header-core.story.js @@ -11,7 +11,7 @@ import { import { withNotes } from '@ecl-twig/storybook-addon-notes'; import { getExtraKnobs, - buttonLabels, + tabLabels, getLogoKnobs, getLoginKnobs, getLanguageSelectorKnobs, @@ -47,26 +47,26 @@ const frBtnHandler = () => { }; const prepareSiteHeaderCore = (data, lang) => { - data.logged = boolean('logged', data.logged, buttonLabels.states); + data.logged = boolean('logged', data.logged, tabLabels.states); data.icon_file_path = select( 'icon_file_path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); if (lang === 'en') { data.logo.src = select( 'logo.src', [englishBanner], englishBanner, - buttonLabels.required + tabLabels.required ); } else { data.logo.src = select( 'logo.src', [frenchBanner], frenchBanner, - buttonLabels.required + tabLabels.required ); } // Logo knobs @@ -79,12 +79,12 @@ const prepareSiteHeaderCore = (data, lang) => { data.search_toggle.label = text( 'search_toggle.label', data.search_toggle.label, - buttonLabels.required + tabLabels.required ); data.search_toggle.href = text( 'search_toggle.href', data.search_toggle.href, - buttonLabels.required + tabLabels.required ); // Search form. getSearchFormKnobs(data, true); @@ -92,7 +92,7 @@ const prepareSiteHeaderCore = (data, lang) => { data.language_selector.overlay = object( 'language_selector.overlay', data.language_selector.overlay, - buttonLabels.required + tabLabels.required ); // Extra classes and extra attributes. getExtraKnobs(data); @@ -107,7 +107,7 @@ storiesOf('Components/Site Headers/Core', module) .add( 'default', () => { - button(btnLabel, enBtnHandler, buttonLabels.cases); + button(btnLabel, enBtnHandler, tabLabels.cases); const dataStory = prepareSiteHeaderCore(enData, 'en'); return siteHeaderCore(dataStory); @@ -120,7 +120,7 @@ storiesOf('Components/Site Headers/Core', module) 'logged in', () => { enData.logged = true; - button(btnLabel, enBtnHandler, buttonLabels.cases); + button(btnLabel, enBtnHandler, tabLabels.cases); const dataStory = prepareSiteHeaderCore(enData, 'en'); return siteHeaderCore(dataStory); @@ -132,7 +132,7 @@ storiesOf('Components/Site Headers/Core', module) .add( 'translated', () => { - button(btnLabel, frBtnHandler, buttonLabels.cases); + button(btnLabel, frBtnHandler, tabLabels.cases); const dataStory = prepareSiteHeaderCore(frData, 'en'); return siteHeaderCore(dataStory); diff --git a/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.story.js b/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.story.js index a32ef5334..909d42168 100644 --- a/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.story.js +++ b/src/ec/packages/ec-component-site-header-harmonised/site-header-harmonised.story.js @@ -10,7 +10,7 @@ import { } from '@storybook/addon-knobs'; import { getExtraKnobs, - buttonLabels, + tabLabels, getLogoKnobs, getLoginKnobs, getLanguageSelectorKnobs, @@ -112,46 +112,41 @@ const btnLoginHandler = () => { const prepareSiteHeaderHarmonised = data => { if (data.login_box) { - data.logged = boolean('logged', data.logged, buttonLabels.states); + data.logged = boolean('logged', data.logged, tabLabels.states); } if (data.group !== 'group3') { data.icon_file_path = select( 'icon_file_path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); } - data.site_name = text('site_name', data.site_name, buttonLabels.required); + data.site_name = text('site_name', data.site_name, tabLabels.required); if (data.group) { - data.group = select( - 'group', - [data.group], - data.group, - buttonLabels.required - ); + data.group = select('group', [data.group], data.group, tabLabels.required); } else { - data.group = select('group', ['group1'], 'group1', buttonLabels.optional); + data.group = select('group', ['group1'], 'group1', tabLabels.optional); } if (data.banner_top && data.banner_top.link) { data.banner_top.link.label = text( 'banner_top.link.label', data.banner_top.link.label, - buttonLabels.optional + tabLabels.optional ); data.banner_top.link.path = text( 'banner_top.link.path', data.banner_top.link.path, - buttonLabels.optional + tabLabels.optional ); } // Logo knobs. if (data.logo) { - let label = buttonLabels.required; + let label = tabLabels.required; let logoDefault = logo; let required = true; if (data.group === 'group3') { - label = buttonLabels.optional; + label = tabLabels.optional; logoDefault = data.logo.src; required = false; } @@ -161,7 +156,7 @@ const prepareSiteHeaderHarmonised = data => { } // Login box and login toggle knobs. if (data.login_box) { - data.logged = boolean('logged', data.logged, buttonLabels.states); + data.logged = boolean('logged', data.logged, tabLabels.states); getLoginKnobs(data, false); } // Search toggle. @@ -169,12 +164,12 @@ const prepareSiteHeaderHarmonised = data => { data.search_toggle.label = text( 'search_toggle.label', data.search_toggle.label, - buttonLabels.optional + tabLabels.optional ); data.search_toggle.href = text( 'search_toggle.href', data.search_toggle.href, - buttonLabels.optional + tabLabels.optional ); } // Search form. @@ -188,7 +183,7 @@ const prepareSiteHeaderHarmonised = data => { data.language_selector.overlay = object( 'language_selector.overlay', data.language_selector.overlay, - buttonLabels.optional + tabLabels.optional ); } // Extra classes and extra attributes. @@ -199,9 +194,9 @@ const prepareSiteHeaderHarmonised = data => { data.menu_label = text( 'data.menu_label', data.menu_label, - buttonLabels.optional + tabLabels.optional ); - data.menu = object('data.menu', data.menu, buttonLabels.optional); + data.menu = object('data.menu', data.menu, tabLabels.optional); } return data; @@ -213,14 +208,14 @@ storiesOf('Components/Site Headers/Harmonised', module) .add( 'group 1', () => { - button(btnLangLabel, btnLangG1Handler, buttonLabels.cases); - button(btnLoginLabel, btnLoginHandler, buttonLabels.cases); - button(btnMenuLabel, btnMenuG1Handler, buttonLabels.cases); - button(btnSearchLabel, btnSearchG1Handler, buttonLabels.cases); + button(btnLangLabel, btnLangG1Handler, tabLabels.cases); + button(btnLoginLabel, btnLoginHandler, tabLabels.cases); + button(btnMenuLabel, btnMenuG1Handler, tabLabels.cases); + button(btnSearchLabel, btnSearchG1Handler, tabLabels.cases); button( 'With or without the Class name', btnClassHandler, - buttonLabels.cases + tabLabels.cases ); dataG1.logged = true; const dataStory = prepareSiteHeaderHarmonised(dataG1); @@ -234,9 +229,9 @@ storiesOf('Components/Site Headers/Harmonised', module) .add( 'group 2', () => { - button(btnLangLabel, btnLangG2Handler, buttonLabels.cases); - button(btnSearchLabel, btnSearchG2Handler, buttonLabels.cases); - button(btnMenuLabel, btnMenuG2Handler, buttonLabels.cases); + button(btnLangLabel, btnLangG2Handler, tabLabels.cases); + button(btnSearchLabel, btnSearchG2Handler, tabLabels.cases); + button(btnMenuLabel, btnMenuG2Handler, tabLabels.cases); const dataStory = prepareSiteHeaderHarmonised(dataG2); return siteHeaderHarmonised(dataStory); @@ -248,7 +243,7 @@ storiesOf('Components/Site Headers/Harmonised', module) .add( 'group 3', () => { - button(btnLogoLabel, btnLogoHandler, buttonLabels.cases); + button(btnLogoLabel, btnLogoHandler, tabLabels.cases); const dataStory = prepareSiteHeaderHarmonised(dataG3); return siteHeaderHarmonised(dataStory); diff --git a/src/ec/packages/ec-component-site-header-standardised/site-header-standardised.story.js b/src/ec/packages/ec-component-site-header-standardised/site-header-standardised.story.js index 518dfaddb..d2174dfa7 100644 --- a/src/ec/packages/ec-component-site-header-standardised/site-header-standardised.story.js +++ b/src/ec/packages/ec-component-site-header-standardised/site-header-standardised.story.js @@ -11,7 +11,7 @@ import { import { withNotes } from '@ecl-twig/storybook-addon-notes'; import { getExtraKnobs, - buttonLabels, + tabLabels, getLogoKnobs, getLoginKnobs, getLanguageSelectorKnobs, @@ -70,36 +70,36 @@ const frBtnLangHandler = () => { }; const prepareSiteHeaderStandardised = (data, lang) => { - data.logged = boolean('logged', data.logged, buttonLabels.states); + data.logged = boolean('logged', data.logged, tabLabels.states); data.banner_top.link.label = text( 'banner_top.link.label', data.banner_top.link.label, - buttonLabels.required + tabLabels.required ); data.banner_top.link.path = text( 'banner_top.link.path', data.banner_top.link.path, - buttonLabels.required + tabLabels.required ); data.icon_file_path = select( 'icon_file_path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); if (lang === 'en') { data.logo.src = select( 'logo.src', [englishBanner], englishBanner, - buttonLabels.required + tabLabels.required ); } else { data.logo.src = select( 'logo.src', [frenchBanner], frenchBanner, - buttonLabels.required + tabLabels.required ); } // Logo knobs @@ -110,12 +110,12 @@ const prepareSiteHeaderStandardised = (data, lang) => { data.search_toggle.label = text( 'search_toggle.label', data.search_toggle.label, - buttonLabels.required + tabLabels.required ); data.search_toggle.href = text( 'search_toggle.href', data.search_toggle.href, - buttonLabels.required + tabLabels.required ); // Search form. getSearchFormKnobs(data, true); @@ -126,19 +126,19 @@ const prepareSiteHeaderStandardised = (data, lang) => { data.language_selector.overlay = object( 'language_selector.overlay', data.language_selector.overlay, - buttonLabels.required + tabLabels.required ); } // Menu label. data.menu_label = text( 'data.menu_label', data.menu_label, - buttonLabels.optional + tabLabels.optional ); // Extra classes and extra attributes. getExtraKnobs(data); // Menu. - data.menu = object('data.menu', data.menu, buttonLabels.optional); + data.menu = object('data.menu', data.menu, tabLabels.optional); return data; }; @@ -150,8 +150,8 @@ storiesOf('Components/Site Headers/Standardised', module) .add( 'default', () => { - button(btnLangLabel, enBtnLangHandler, buttonLabels.cases); - button(btnLoginLabel, enBtnLoginHandler, buttonLabels.cases); + button(btnLangLabel, enBtnLangHandler, tabLabels.cases); + button(btnLoginLabel, enBtnLoginHandler, tabLabels.cases); const dataStory = prepareSiteHeaderStandardised(enData); return siteHeaderStandardised(dataStory); @@ -163,7 +163,7 @@ storiesOf('Components/Site Headers/Standardised', module) .add( 'logged in', () => { - button(btnLangLabel, enBtnLangHandler, buttonLabels.cases); + button(btnLangLabel, enBtnLangHandler, tabLabels.cases); enData.logged = true; const dataStory = prepareSiteHeaderStandardised(enData); @@ -176,8 +176,8 @@ storiesOf('Components/Site Headers/Standardised', module) .add( 'translated', () => { - button(btnLangLabel, frBtnLangHandler, buttonLabels.cases); - button(btnLoginLabel, frBtnLoginHandler, buttonLabels.cases); + button(btnLangLabel, frBtnLangHandler, tabLabels.cases); + button(btnLoginLabel, frBtnLoginHandler, tabLabels.cases); const dataStory = prepareSiteHeaderStandardised(frData); return siteHeaderStandardised(dataStory); diff --git a/src/ec/packages/ec-component-social-media-follow/social-media-follow.story.js b/src/ec/packages/ec-component-social-media-follow/social-media-follow.story.js index cde4fb882..9721485f4 100644 --- a/src/ec/packages/ec-component-social-media-follow/social-media-follow.story.js +++ b/src/ec/packages/ec-component-social-media-follow/social-media-follow.story.js @@ -4,7 +4,7 @@ import { withKnobs, text, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; import { getExtraKnobs, - buttonLabels, + tabLabels, getBrandedIconsOptions, } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; @@ -15,27 +15,23 @@ import SocialMediaFollow from './ecl-social-media-follow.html.twig'; import notes from './README.md'; const prepareSocialMediaFollow = (data, vertical) => { - data.description = text( - 'description', - data.description, - buttonLabels.required - ); + data.description = text('description', data.description, tabLabels.required); if (vertical) { data.variant = select( 'variant', [vertical], 'vertical', - buttonLabels.required + tabLabels.required ); } else { delete data.variant; } data.links.forEach((link, i) => { - let label = buttonLabels.optional; + let label = tabLabels.optional; // Firt item we make it mandatory and not removable. if (i === 0) { - label = buttonLabels.required; + label = tabLabels.required; link.label = select( `links[${i}].label`, getBrandedIconsOptions(true), diff --git a/src/ec/packages/ec-component-social-media-share/social-media-share.story.js b/src/ec/packages/ec-component-social-media-share/social-media-share.story.js index f9ddcf707..eaa251cc7 100644 --- a/src/ec/packages/ec-component-social-media-share/social-media-share.story.js +++ b/src/ec/packages/ec-component-social-media-share/social-media-share.story.js @@ -4,7 +4,7 @@ import { withKnobs, text, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; import { getExtraKnobs, - buttonLabels, + tabLabels, getBrandedIconsOptions, } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; @@ -16,17 +16,13 @@ import SocialMediaShare from './ecl-social-media-share.html.twig'; import notes from './README.md'; const prepareSocialMediaShare = data => { - data.description = text( - 'description', - data.description, - buttonLabels.required - ); + data.description = text('description', data.description, tabLabels.required); data.links.forEach((link, i) => { - let label = buttonLabels.optional; + let label = tabLabels.optional; // Firt item we make it mandatory and not removable. if (i === 0) { - label = buttonLabels.required; + label = tabLabels.required; link.label = select( `links[${i}].label`, getBrandedIconsOptions(true), diff --git a/src/ec/packages/ec-component-table/table.story.js b/src/ec/packages/ec-component-table/table.story.js index 16365a762..d8bd2cf5d 100644 --- a/src/ec/packages/ec-component-table/table.story.js +++ b/src/ec/packages/ec-component-table/table.story.js @@ -1,7 +1,7 @@ /* eslint-disable no-param-reassign */ import { storiesOf } from '@storybook/html'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { getExtraKnobs, buttonLabels } from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import withCode from '@ecl-twig/storybook-addon-code'; import { withKnobs, text, boolean } from '@storybook/addon-knobs'; @@ -18,18 +18,18 @@ const prepareTable = (data, attr) => { if (attr) { defaultAttr = 'data-test data-test-another'; } - data.zebra = boolean('zebra', data.zebra, buttonLabels.cases); + data.zebra = boolean('zebra', data.zebra, tabLabels.cases); data.headers.forEach((headers, i) => { headers.forEach((header, ind) => { header.label = text( `headers[${i}][${ind}].label`, header.label, - buttonLabels.required + tabLabels.required ); header.colspan = text( `headers[${i}][${ind}].colspan`, header.colspan, - buttonLabels.optional + tabLabels.optional ); }); }); @@ -38,33 +38,33 @@ const prepareTable = (data, attr) => { row.extra_classes = text( `rows[${i}].extra_classes`, row.extra_classes, - buttonLabels.optional + tabLabels.optional ); row.extra_attributes = text( `rows[${i}].extra_attributes`, defaultAttr, - buttonLabels.optional + tabLabels.optional ); row.forEach((cell, ind) => { cell.label = text( `rows[${i}][${ind}].label`, cell.label, - buttonLabels.required + tabLabels.required ); cell['data-ecl-table-header'] = text( `rows[${i}][${ind}]['data-ecl-table-header']`, cell['data-ecl-table-header'], - buttonLabels.required + tabLabels.required ); cell.group = boolean( `rows[${i}][${ind}].group`, cell.group, - buttonLabels.optional + tabLabels.optional ); cell['data-ecl-table-header-group'] = text( `rows[${i}][${ind}]['data-ecl-table-header-group']`, cell['data-ecl-table-header-group'], - buttonLabels.optional + tabLabels.optional ); }); }); diff --git a/src/ec/packages/ec-component-tag/tag.story.js b/src/ec/packages/ec-component-tag/tag.story.js index 6ddf8320d..21183da5b 100644 --- a/src/ec/packages/ec-component-tag/tag.story.js +++ b/src/ec/packages/ec-component-tag/tag.story.js @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/html'; 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 { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import dataLink from './demo/data--link'; import dataButton from './demo/data--button'; @@ -17,17 +17,17 @@ const prepareTag = data => { 'tag.type', [data.tag.type], data.tag.type, - buttonLabels.required + tabLabels.required ); - data.tag.label = text('tag.label', data.tag.label, buttonLabels.required); + data.tag.label = text('tag.label', data.tag.label, tabLabels.required); if (data.tag.path) { - data.tag.path = text('tag.path', data.tag.path, buttonLabels.required); + data.tag.path = text('tag.path', data.tag.path, tabLabels.required); } if (data.tag.aria_label) { data.tag.aria_label = text( 'tag.aria_label', data.tag.aria_label, - buttonLabels.required + tabLabels.required ); } if (data.default_icon_path) { @@ -35,7 +35,7 @@ const prepareTag = data => { 'default_icon_path', [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); } getExtraKnobs(data); diff --git a/src/ec/packages/ec-component-timeline/timeline.story.js b/src/ec/packages/ec-component-timeline/timeline.story.js index e629a5775..1a831f2fb 100644 --- a/src/ec/packages/ec-component-timeline/timeline.story.js +++ b/src/ec/packages/ec-component-timeline/timeline.story.js @@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html'; import { withKnobs, number, text, select } from '@storybook/addon-knobs'; import { withNotes } from '@ecl-twig/storybook-addon-notes'; -import { getExtraKnobs, buttonLabels } from '@ecl-twig/story-utils'; +import { getExtraKnobs, tabLabels } from '@ecl-twig/story-utils'; import he from 'he'; import withCode from '@ecl-twig/storybook-addon-code'; @@ -20,39 +20,34 @@ const prepareTimeline = data => { } else { hiddenCount = data.items.length + to - from; } - data.hide.from = number( - 'hide.from', - data.hide.from, - {}, - buttonLabels.required - ); - data.hide.to = number('hide.to', data.hide.to, {}, buttonLabels.required); + data.hide.from = number('hide.from', data.hide.from, {}, tabLabels.required); + data.hide.to = number('hide.to', data.hide.to, {}, tabLabels.required); data.toggle_collapsed = select( 'toggle_collapsed', [`Show ${hiddenCount} more items`], `Show ${hiddenCount} more items`, - buttonLabels.required + tabLabels.required ); data.toggle_expanded = select( 'toggle_expanded', [`Hide ${hiddenCount} items`], `Hide ${hiddenCount} items`, - buttonLabels.required + tabLabels.required ); data.icon_path = select( 'icon_path', [iconPath], iconPath, - buttonLabels.required + tabLabels.required ); data.items.forEach((item, index) => { const { id, label, title, content } = item; - item.id = text(`items[${index}].id`, id, buttonLabels.optional); - item.label = text(`items[${index}].label`, label, buttonLabels.required); - item.title = text(`items[${index}].title`, title, buttonLabels.optional); + item.id = text(`items[${index}].id`, id, tabLabels.optional); + item.label = text(`items[${index}].label`, label, tabLabels.required); + item.title = text(`items[${index}].title`, title, tabLabels.optional); item.content = he.decode( - text(`items[${index}].content`, content, buttonLabels.required) + text(`items[${index}].content`, content, tabLabels.required) ); }); diff --git a/utils/story-utils/src/index.js b/utils/story-utils/src/index.js index 5491d2ee6..3683fd17d 100755 --- a/utils/story-utils/src/index.js +++ b/utils/story-utils/src/index.js @@ -4,7 +4,7 @@ import { text, select, boolean } from '@storybook/addon-knobs'; import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg'; import brandedIcons from '@ecl/ec-resources-icons/dist/lists/branded.json'; -export const buttonLabels = { +export const tabLabels = { required: 'Mandatory elements', optional: 'Optional elements', states: 'States', @@ -12,11 +12,11 @@ export const buttonLabels = { }; export const getExtraKnobs = data => { - data.extra_classes = text('extra_classes', '', buttonLabels.optional); + data.extra_classes = text('extra_classes', '', tabLabels.optional); const attribute1Name = text( 'extra_attributes[0].name', '', - buttonLabels.optional + tabLabels.optional ); // First attribute. if (attribute1Name !== '') { @@ -25,12 +25,12 @@ export const getExtraKnobs = data => { const attribute1Value = text( 'extra_attributes[0].value', '', - buttonLabels.optional + tabLabels.optional ); const attribute2Name = text( 'extra_attributes[1].name', '', - buttonLabels.optional + tabLabels.optional ); attribute.name = attribute1Name; if (attribute1Value !== '') { @@ -42,7 +42,7 @@ export const getExtraKnobs = data => { const attribute2Value = text( 'extra_attributes[1].value', '', - buttonLabels.optional + tabLabels.optional ); attribute = {}; attribute.name = attribute2Name; @@ -124,31 +124,31 @@ export const getIconKnobs = ( `${pref}icon.type`, defaultTypes, defaultType, - buttonLabels.required + tabLabels.required ); icon.path = select( `${pref}icon.path`, [defaultSprite], defaultSprite, - buttonLabels.required + tabLabels.required ); icon.size = select( `${pref}icon.size`, defaultSizes, defaultSize, - buttonLabels.optional + tabLabels.optional ); icon.color = select( `${pref}icon.color`, defaultColors, defaultColor, - buttonLabels.optional + tabLabels.optional ); icon.transform = select( `${pref}icon.transform`, defaultTransforms, defaultTransform, - buttonLabels.optional + tabLabels.optional ); if (icon) { if (data.link && data.link.link) { @@ -160,7 +160,7 @@ export const getIconKnobs = ( 'icon_position', iconPositionSettings, 'after', - buttonLabels.optional + tabLabels.optional ); } } @@ -175,82 +175,73 @@ export const getFormKnobs = data => { medium: 'm', large: 'l', }; - data.invalid = boolean('invalid', false, buttonLabels.states); - data.disabled = boolean('disabled', false, buttonLabels.states); - data.required = boolean('required', false, buttonLabels.states); - data.label = text('label', data.label, buttonLabels.required); + data.invalid = boolean('invalid', false, tabLabels.states); + data.disabled = boolean('disabled', false, tabLabels.states); + data.required = boolean('required', false, tabLabels.states); + data.label = text('label', data.label, tabLabels.required); if (data.invalid) { data.invalid_text = text( 'invalid_text', data.invalid_text, - buttonLabels.required + tabLabels.required ); } else { data.invalid_text = text( 'invalid_text', data.invalid_text, - buttonLabels.optional + tabLabels.optional ); } if (data.required) { data.required_text = text( 'required_text', data.required_text, - buttonLabels.required + tabLabels.required ); data.optional_text = text( 'optional text', data.optional_text, - buttonLabels.optional + tabLabels.optional ); } else { data.required_text = text( 'required_text', data.required_text, - buttonLabels.optional + tabLabels.optional ); data.optional_text = text( 'optional text', data.optional_text, - buttonLabels.required + tabLabels.required ); } - data.helper_text = text( - 'helper_text', - data.helper_text, - buttonLabels.optional - ); - data.width = select('width', inputWidthOptions, 'm', buttonLabels.optional); + data.helper_text = text('helper_text', data.helper_text, tabLabels.optional); + data.width = select('width', inputWidthOptions, 'm', tabLabels.optional); return data; }; export const getFormItemKnobs = data => { data.items.forEach((item, i) => { - item.label = text(`items[${i}].label`, item.label, buttonLabels.required); - item.id = select( - `items[${i}].id`, - [item.id], - item.id, - buttonLabels.required - ); + item.label = text(`items[${i}].label`, item.label, tabLabels.required); + item.id = select(`items[${i}].id`, [item.id], item.id, tabLabels.required); item.value = select( `items[${i}].value`, [item.value], item.value, - buttonLabels.required + tabLabels.required ); item.helper_id = select( `items[${i}].value`, [item.helper_id], item.helper_id, - buttonLabels.optional + tabLabels.optional ); item.helper_text = text( `items[${i}].helper_text`, item.helper_text, - buttonLabels.optional + tabLabels.optional ); }); @@ -258,23 +249,23 @@ export const getFormItemKnobs = data => { }; export const getLogoKnobs = data => { - data.logo.title = text('logo.title', data.logo.title, buttonLabels.required); - data.logo.alt = text('logo.alt', data.logo.alt, buttonLabels.required); - data.logo.href = text('logo.href', data.logo.href, buttonLabels.required); + data.logo.title = text('logo.title', data.logo.title, tabLabels.required); + data.logo.alt = text('logo.alt', data.logo.alt, tabLabels.required); + data.logo.href = text('logo.href', data.logo.href, tabLabels.required); data.logo.language = select( 'logo.language', [data.logo.language], data.logo.language, - buttonLabels.required + tabLabels.required ); return data; }; export const getLoginKnobs = (data, required) => { - let label = buttonLabels.optional; + let label = tabLabels.optional; if (required) { - label = buttonLabels.required; + label = tabLabels.required; } if (data.login_toggle && data.login_box) { data.login_toggle.label_not_logged = text( @@ -309,9 +300,9 @@ export const getLoginKnobs = (data, required) => { }; export const getLanguageSelectorKnobs = (data, required) => { - let label = buttonLabels.optional; + let label = tabLabels.optional; if (required) { - label = buttonLabels.required; + label = tabLabels.required; } data.language_selector.href = text( 'language_selector.href', @@ -333,9 +324,9 @@ export const getLanguageSelectorKnobs = (data, required) => { }; export const getSearchFormKnobs = (data, required) => { - let label = buttonLabels.optional; + let label = tabLabels.optional; if (required) { - label = buttonLabels.required; + label = tabLabels.required; } data.search_form.text_input.id = text( 'search_form.text_input.id',