feat(stories): Third batch - FRONT-3514

src/implementations/twig/components/blockquote/blockquote.story.js

@@ -5,11 +5,13 @@ import defaultData from '@ecl/specs-component-blockquote/demo/data';
 import blockquote from './blockquote.html.twig';
 import notes from './README.md';
 
+const demoImage = { ...defaultData.image };
+
 const getArgs = (data) => {
   return {
+    show_image: false,
     citation: data.citation,
     author: data.author,
-    show_image: false,
   };
 };
 
@@ -47,14 +49,12 @@ const getArgTypes = () => {
       description: 'Toggle image visibility',
       table: {
         type: { summary: 'boolean' },
-        category: 'Content',
+        category: 'Optional',
       },
     },
   };
 };
 
-const demoImage = defaultData.image;
-
 const prepareData = (data, args) => {
   data.image = args.show_image ? demoImage : null;
   return Object.assign(data, args);

src/implementations/twig/components/breadcrumb-core/breadcrumb-core.story.js

@@ -3,17 +3,15 @@ import withCode from '@ecl/storybook-addon-code';
 import { correctSvgPath } from '@ecl/story-utils';
 import getSystem from '@ecl/builder/utils/getSystem';
 
-import dataSimpleEU from '@ecl/specs-component-breadcrumb/demo/data-simple--eu';
-import dataSimpleEC from '@ecl/specs-component-breadcrumb/demo/data-simple--ec';
-import dataLongEU from '@ecl/specs-component-breadcrumb/demo/data--eu';
-import dataLongEC from '@ecl/specs-component-breadcrumb/demo/data--ec';
+import dataDefaultEU from '@ecl/specs-component-breadcrumb/demo/data--eu';
+import dataDefaultEC from '@ecl/specs-component-breadcrumb/demo/data--ec';
 
 import breadcrumb from './breadcrumb-core.html.twig';
 import notes from './README.md';
 
 const system = getSystem();
-const dataSimple = system === 'eu' ? { ...dataSimpleEU } : { ...dataSimpleEC };
-const dataLong = system === 'eu' ? { ...dataLongEU } : { ...dataLongEC };
+const dataDefault =
+  system === 'eu' ? { ...dataDefaultEU } : { ...dataDefaultEC };
 
 const getArgs = (data) => {
   const args = {};
@@ -60,20 +58,10 @@ export default {
   parameters: { layout: 'fullscreen' },
 };
 
-export const Simple = (args) => breadcrumb(prepareData(dataSimple, args));
+export const Default = (args) => breadcrumb(prepareData(dataDefault, args));
 
-Simple.args = getArgs(dataSimple);
-Simple.argTypes = getArgTypes(dataSimple);
-Simple.storyName = 'simple';
-Simple.parameters = {
-  notes: { markdown: notes, json: dataSimple },
-};
-
-export const Long = (args) => breadcrumb(prepareData(dataLong, args));
-
-Long.args = getArgs(dataLong);
-Long.argTypes = getArgTypes(dataLong);
-Long.storyName = 'long';
-Long.parameters = {
-  notes: { markdown: notes, json: dataLong },
+Default.args = getArgs(dataDefault);
+Default.argTypes = getArgTypes(dataDefault);
+Default.parameters = {
+  notes: { markdown: notes, json: dataDefault },
 };

src/implementations/twig/components/breadcrumb-harmonised/breadcrumb-harmonised.story.js

@@ -3,17 +3,15 @@ import withCode from '@ecl/storybook-addon-code';
 import { correctSvgPath } from '@ecl/story-utils';
 import getSystem from '@ecl/builder/utils/getSystem';
 
-import dataSimpleEU from '@ecl/specs-component-breadcrumb/demo/data-simple--eu';
-import dataSimpleEC from '@ecl/specs-component-breadcrumb/demo/data-simple--ec';
-import dataLongEU from '@ecl/specs-component-breadcrumb/demo/data--eu';
-import dataLongEC from '@ecl/specs-component-breadcrumb/demo/data--ec';
+import dataDefaultEU from '@ecl/specs-component-breadcrumb/demo/data--eu';
+import dataDefaultEC from '@ecl/specs-component-breadcrumb/demo/data--ec';
 
 import breadcrumb from './breadcrumb-harmonised.html.twig';
 import notes from './README.md';
 
 const system = getSystem();
-const dataSimple = system === 'eu' ? { ...dataSimpleEU } : { ...dataSimpleEC };
-const dataLong = system === 'eu' ? { ...dataLongEU } : { ...dataLongEC };
+const dataDefault =
+  system === 'eu' ? { ...dataDefaultEU } : { ...dataDefaultEC };
 
 const getArgs = (data) => {
   const args = {};
@@ -61,20 +59,10 @@ export default {
   parameters: { layout: 'fullscreen' },
 };
 
-export const Simple = (args) => breadcrumb(prepareData(dataSimple, args));
+export const Default = (args) => breadcrumb(prepareData(dataDefault, args));
 
-Simple.args = getArgs(dataSimple);
-Simple.argTypes = getArgTypes(dataSimple);
-Simple.storyName = 'simple';
-Simple.parameters = {
-  notes: { markdown: notes, json: dataSimple },
-};
-
-export const Long = (args) => breadcrumb(prepareData(dataLong, args));
-
-Long.args = getArgs(dataLong);
-Long.argTypes = getArgTypes(dataLong);
-Long.storyName = 'long';
-Long.parameters = {
-  notes: { markdown: notes, json: dataLong },
+Default.args = getArgs(dataDefault);
+Default.argTypes = getArgTypes(dataDefault);
+Default.parameters = {
+  notes: { markdown: notes, json: dataDefault },
 };

src/implementations/twig/components/breadcrumb-standardised/breadcrumb-standardised.story.js

@@ -3,17 +3,15 @@ import withCode from '@ecl/storybook-addon-code';
 import { correctSvgPath } from '@ecl/story-utils';
 import getSystem from '@ecl/builder/utils/getSystem';
 
-import dataSimpleEU from '@ecl/specs-component-breadcrumb/demo/data-simple--eu';
-import dataSimpleEC from '@ecl/specs-component-breadcrumb/demo/data-simple--ec';
-import dataLongEU from '@ecl/specs-component-breadcrumb/demo/data--eu';
-import dataLongEC from '@ecl/specs-component-breadcrumb/demo/data--ec';
+import dataDefaultEU from '@ecl/specs-component-breadcrumb/demo/data--eu';
+import dataDefaultEC from '@ecl/specs-component-breadcrumb/demo/data--ec';
 
 import breadcrumb from './breadcrumb-standardised.html.twig';
 import notes from './README.md';
 
 const system = getSystem();
-const dataSimple = system === 'eu' ? { ...dataSimpleEU } : { ...dataSimpleEC };
-const dataLong = system === 'eu' ? { ...dataLongEU } : { ...dataLongEC };
+const dataDefault =
+  system === 'eu' ? { ...dataDefaultEU } : { ...dataDefaultEC };
 
 const getArgs = (data) => {
   const args = {};
@@ -61,20 +59,10 @@ export default {
   parameters: { layout: 'fullscreen' },
 };
 
-export const Simple = (args) => breadcrumb(prepareData(dataSimple, args));
+export const Default = (args) => breadcrumb(prepareData(dataDefault, args));
 
-Simple.args = getArgs(dataSimple);
-Simple.argTypes = getArgTypes(dataSimple);
-Simple.storyName = 'simple';
-Simple.parameters = {
-  notes: { markdown: notes, json: dataSimple },
-};
-
-export const Long = (args) => breadcrumb(prepareData(dataLong, args));
-
-Long.args = getArgs(dataLong);
-Long.argTypes = getArgTypes(dataLong);
-Long.storyName = 'long';
-Long.parameters = {
-  notes: { markdown: notes, json: dataLong },
+Default.args = getArgs(dataDefault);
+Default.argTypes = getArgTypes(dataDefault);
+Default.parameters = {
+  notes: { markdown: notes, json: dataDefault },
 };

src/implementations/twig/components/datepicker/datepicker.story.js

@@ -13,37 +13,45 @@ const dataDefault = system === 'eu' ? specsEu : specsEc;
 
 const getArgs = (data) => {
   return {
+    show_label: true,
+    show_helper: true,
+    show_error: true,
     label: data.label || '',
     helper_text: data.helper_text,
     invalid_text: data.invalid_text,
-    optional_text: data.optional_text,
-    required_text: data.required_text,
     invalid: data.invalid || false,
     disabled: data.disabled || false,
     required: data.required,
-    autoinit: data.autoinit,
     placeholder: data.placeholder,
   };
 };
 
 const getArgTypes = (data) => {
   return {
     ...getFormControls(data, 'element'),
-    autoinit: {
-      name: 'autoinit',
-      type: 'boolean',
-      description: 'Initializes the javascript behaviours.',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: false },
-        category: 'States',
-      },
-    },
   };
 };
 
 const prepareData = (data, args) => {
-  return Object.assign(correctSvgPath(data), args);
+  Object.assign(data, args);
+
+  if (!args.show_label) {
+    data.label = '';
+  }
+  if (!args.show_error) {
+    data.invalid_text = '';
+  }
+  if (!args.show_helper) {
+    data.helper_text = '';
+  }
+
+  delete data.show_label;
+  delete data.show_helper;
+  delete data.show_error;
+
+  correctSvgPath(data);
+
+  return data;
 };
 
 export default {

src/implementations/twig/components/fact-figures/fact-figures.story.js

@@ -6,7 +6,6 @@ import getSystem from '@ecl/builder/utils/getSystem';
 import iconsAllEc from '@ecl/resources-ec-icons/dist/lists/all.json';
 import iconsAllEu from '@ecl/resources-eu-icons/dist/lists/all.json';
 import data3Col from '@ecl/specs-component-fact-figures/demo/data--3-col';
-import data4Col from '@ecl/specs-component-fact-figures/demo/data--4-col';
 
 import factFigures from './fact-figures.html.twig';
 import notes from './README.md';
@@ -17,17 +16,47 @@ const viewAll = { ...data3Col.view_all };
 
 const getArgs = (data) => {
   return {
+    viewAll: true,
+    displayIcons: true,
+    column: 3,
     icon: data.items[0].icon.name,
     value: data.items[0].value,
     title: data.items[0].title,
     description: data.items[0].description,
-    viewAll: true,
-    displayIcons: true,
   };
 };
 
 const getArgTypes = () => {
   return {
+    viewAll: {
+      name: 'view all link',
+      type: { name: 'boolean' },
+      description: 'Link in the component footer',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '{}' },
+        category: 'Optional',
+      },
+    },
+    displayIcons: {
+      name: 'icons',
+      type: { name: 'boolean' },
+      description: 'Toggle visibility of the icons',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+        category: 'Optional',
+      },
+    },
+    column: {
+      description: 'Number of columns',
+      control: { type: 'range', min: 3, max: 4, step: 1 },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '3' },
+        category: 'Layout',
+      },
+    },
     icon: {
       description: 'Name of the icon',
       type: 'select',
@@ -65,31 +94,11 @@ const getArgTypes = () => {
         category: 'Content (first item)',
       },
     },
-    viewAll: {
-      name: 'view all link',
-      type: { name: 'boolean' },
-      description: 'Link in the component footer',
-      table: {
-        type: { summary: 'object' },
-        defaultValue: { summary: '{}' },
-        category: 'Others',
-      },
-    },
-    displayIcons: {
-      name: 'icons visibility',
-      type: { name: 'boolean' },
-      description: 'Toggle visibility of the icons',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: true },
-        category: 'Others',
-      },
-    },
   };
 };
 
 const prepareData = (data, args) => {
-  if (system === 'ec') {
+  if (system === 'ec' && args.displayIcons) {
     data.items.forEach((item, i) => {
       data.items[i].icon.size = 'm';
     });
@@ -103,6 +112,7 @@ const prepareData = (data, args) => {
   }
   data.view_all = args.viewAll ? viewAll : {};
   data.display_icons = args.displayIcons;
+  data.column = args.column;
 
   return data;
 };
@@ -112,18 +122,9 @@ export default {
   decorators: [withNotes, withCode],
 };
 
-export const Columns3 = (args) =>
+export const Default = (args) =>
   factFigures(prepareData(correctSvgPath(data3Col), args));
 
-Columns3.storyName = '3 Columns';
-Columns3.args = getArgs(data3Col);
-Columns3.argTypes = getArgTypes();
-Columns3.parameters = { notes: { markdown: notes, json: data3Col } };
-
-export const Columns4 = (args) =>
-  factFigures(prepareData(correctSvgPath(data4Col), args));
-
-Columns4.storyName = '4 Columns';
-Columns4.args = getArgs(data4Col);
-Columns4.argTypes = getArgTypes();
-Columns4.parameters = { notes: { markdown: notes, json: data4Col } };
+Default.args = getArgs(data3Col);
+Default.argTypes = getArgTypes();
+Default.parameters = { notes: { markdown: notes, json: data3Col } };