refactor(demo): Expandable, optional.mandatory knobs - FRONT-1021 (#399)

src/ec/packages/ec-component-expandable/adapter.js

@@ -0,0 +1,21 @@
+const adapter = initialData => {
+  // Copy reference specification demo adaptedData.
+  const adaptedData = JSON.parse(JSON.stringify(initialData));
+  adaptedData.label_expanded = adaptedData.labelExpanded;
+  adaptedData.label_collapsed = adaptedData.labelCollapsed;
+  delete adaptedData.labelExpanded;
+  delete adaptedData.labelCollapsed;
+  adaptedData.extra_dropdown_classes = 'ecl-u-type-paragraph-m';
+  adaptedData.button.icon = {
+    path: '/icons.svg',
+  };
+  // Delete everything that is unneeded for our component to
+  // be properly rendered when we have the values in the template.
+  delete adaptedData.button.icon.shape;
+  delete adaptedData.button.variant;
+  delete adaptedData.button.label;
+
+  return adaptedData;
+};
+
+export default adapter;

src/ec/packages/ec-component-expandable/demo/data.js

@@ -1,24 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies, no-param-reassign */
-import specData from '@ecl/ec-specs-expandable/demo/data';
+import specs from '@ecl/ec-specs-expandable/demo/data';
+import adapter from '../adapter';
 
-const adapter = initialData => {
-  // Copy reference specification demo data.
-  const adaptedData = JSON.parse(JSON.stringify(initialData));
-
-  adaptedData.label_expanded = adaptedData.labelExpanded;
-  adaptedData.label_collapsed = adaptedData.labelCollapsed;
-  adaptedData.extra_dropdown_classes = 'ecl-u-type-paragraph-m';
-
-  const [type, name] = adaptedData.button.icon.shape.split('--');
-
-  adaptedData.button.icon = {
-    type,
-    name,
-    path: '/icons.svg',
-    ...adaptedData.button.icon,
-  };
-
-  return adaptedData;
-};
-
-export default adapter(specData);
+export default adapter(specs);

src/ec/packages/ec-component-expandable/ecl-expandable.html.twig

@@ -61,22 +61,28 @@
 {# Print the result #}
 
 <div class="{{ _css_class }}"{{ _extra_attributes|raw }}>
-  {% set _label = _label_expanded %}
+  {% set _label = _label_collapsed %}
   {% set _button_attributes = [
     { name: 'aria-controls', value: _aria_controls },
     { name: 'data-ecl-expandable-toggle' },
     { name: 'data-ecl-label-expanded', value: _label_expanded },
     { name: 'data-ecl-label-collapsed', value: _label_collapsed },
     { name: 'aria-expanded', value: 'false' }
   ] %}
-  {% include '@ecl-twig/ec-component-button/ecl-button.html.twig' with {
+  {% include '@ecl-twig/ec-component-button/ecl-button.html.twig' with _button|merge({
     label: _label,
     variant: 'secondary',
     type: 'button',
     icon_position: "after",
+    icon: _button.icon|merge({
+    type: 'ui',
+      name: 'corner-arrow',
+      size: 'fluid',
+      transform: 'rotate-180'
+    }),
     extra_classes: 'ecl-expandable__toggle',
     extra_attributes: _button_attributes,
-  }|merge(_button) only %}
+  }) only %}
   <div
     id="{{ _id ~ '-content' }}"
     class="{{ _css_dropdown_class }}"

src/ec/packages/ec-component-expandable/expandable.story.js

@@ -1,6 +1,8 @@
+/* eslint-disable no-param-reassign */
 import { storiesOf } from '@storybook/html';
-import { withKnobs, text } from '@storybook/addon-knobs';
+import { withKnobs, text, select } from '@storybook/addon-knobs';
 import { withNotes } from '@ecl-twig/storybook-addon-notes';
+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';
@@ -9,24 +11,35 @@ import demoData from './demo/data';
 import expandable from './ecl-expandable.html.twig';
 import notes from './README.md';
 
+const prepareExpandable = data => {
+  data.id = select('id', [data.id], data.id, tabLabels.required);
+  data.label_expanded = text(
+    'label_expanded',
+    data.label_expanded,
+    tabLabels.required
+  );
+  data.label_collapsed = text(
+    'label_collapsed',
+    data.label_collapsed,
+    tabLabels.required
+  );
+  data.content = text('content', data.content, tabLabels.required);
+  data.button.icon.path = select(
+    'button.icon.path',
+    [defaultSprite],
+    defaultSprite,
+    tabLabels.required
+  );
+
+  getExtraKnobs(data);
+
+  return data;
+};
+
 storiesOf('Components/Expandables', module)
   .addDecorator(withKnobs)
   .addDecorator(withCode)
   .addDecorator(withNotes)
-  .add(
-    'default',
-    () => {
-      demoData.button.icon.path = defaultSprite;
-      demoData.label_expanded = text('Label Expanded', demoData.labelExpanded);
-      demoData.label_collapsed = text(
-        'Label Collapsed',
-        demoData.labelCollapsed
-      );
-      demoData.content = text('Content', demoData.content);
-
-      return expandable(demoData);
-    },
-    {
-      notes: { markdown: notes },
-    }
-  );
+  .add('default', () => expandable(prepareExpandable(demoData)), {
+    notes: { markdown: notes, json: demoData },
+  });