Merge pull request #160 from emulsify-ds/feat-stories-cleanup

feat: Refine stories and remove unused CSS functions/mixins

config/emulsify-core/storybook/main.js

@@ -15,13 +15,6 @@ const configOverrides = {};
 //     '../../../@storybook/addon-themes',
 //     '../../../@storybook/addon-styling-webpack'
 //   ],
-//   core: {
-//     builder: 'webpack5',
-//   },
-//   framework: {
-//     name: '@storybook/html-webpack5',
-//     options: {},
-//   },
 //   docs: {
 //     autodocs: true,
 //   },

package.json

@@ -56,7 +56,7 @@
     ]
   },
   "dependencies": {
-    "@emulsify/core": "^2.2.1",
+    "@emulsify/core": "^2.2.3",
     "@percy/cli": "^1.28.2",
     "@percy/storybook": "^5.0.1"
   },

src/components/accordion/_accordion-controls.twig

@@ -0,0 +1,62 @@
+{#
+ # Available Variables:
+ # - none
+ #}
+
+{% set expand_button__content %}
+  {{'Expand all'}}
+  {% include "@components/icons/_icon.twig" with {
+    icon__name: 'angle-down',
+    icon__blockname: accordion__base_class,
+    icon__decorative: true,
+  } %}
+{% endset %}
+
+{% set collapse_button__content %}
+  {{'Collapse all'}}
+  {% include "@components/icons/_icon.twig" with {
+    icon__name: 'angle-down',
+    icon__blockname: accordion__base_class,
+    icon__decorative: true,
+  } %}
+{% endset %}
+
+{% embed "@components/lists/list.twig" with {
+  list__base_class: 'controls',
+  list__blockname: accordion__base_class,
+  list__addition_classes: ['js-accordion__controls'],
+  list__attributes: {'aria-label': 'Controls to Expand or Collapse all accordion items'},
+  } %}
+	{% block list__content %}
+		{% embed "@components/lists/_list-item.twig" with {
+      list__item__base_class: 'controls__item',
+      list__item__blockname: accordion__base_class,
+      }%}
+			{% block list__item__content %}
+				{% include "@components/button/button.twig" with {
+          button__content: expand_button__content,
+          button__base_class: 'toggle-all',
+          button__modifiers: ['expand'],
+          button__style: 'clean',
+          button__blockname: accordion__base_class,
+          button__additional_classes: ['button', 'js-accordion-item__toggle_all', 'js-accordion__toggle-all--expand'],
+          } %}
+			{% endblock %}
+		{% endembed %}
+		{% embed "@components/lists/_list-item.twig" with {
+      list__item__base_class: 'controls__item',
+      list__item__blockname: accordion__base_class,
+      }%}
+			{% block list__item__content %}
+				{% include "@components/button/button.twig" with {
+          button__content: collapse_button__content,
+          button__base_class: 'toggle-all',
+          button__modifiers: ['collapse'],
+          button__style: 'clean',
+          button__blockname: accordion__base_class,
+          button__additional_classes: ['button', 'js-accordion-item__toggle_all', 'js-accordion__toggle-all--collapse'],
+          } %}
+			{% endblock %}
+		{% endembed %}
+	{% endblock %}
+{% endembed %}

src/components/accordion/_accordion-item.twig

@@ -20,18 +20,25 @@
   'class': bem('content', accordion__item__modifiers, accordion__item__base_class),
 }) %}
 
-{% set accordion__item__button__content %}
-{{ accordion__item__heading }}
-{% include "@components/icons/_icon.twig" with {
-    icon__name: 'chevron-down',
+{% if accordion__anchor %}
+	{% set accordion__item__attributes = accordion__item__attributes|merge({
+		'id': accordion__anchor,
+	}) %}
+{% endif %}
+
+{% set accordion__item__cta__content %}
+  {{ accordion__item__heading }}
+  {% include "@components/icons/_icon.twig" with {
+    icon__name: 'angle-down',
     icon__blockname: accordion__item__base_class,
     icon__decorative: true,
   } %}
 {% endset %}
 
 {% set accordion__item__heading__content %}
-{% include "@components/button/button.twig" with {
-    button__content: accordion__item__button__content,
+  {% include "@components/button/button.twig" with {
+    button__content: accordion__item__cta__content,
+    button__style: 'clean',
     button__base_class: 'toggle',
     button__additional_classes: ['js-accordion-item__toggle'],
     button__blockname: accordion__item__base_class,
@@ -42,15 +49,15 @@
 {% endset %}
 
 <div {{ add_attributes(accordion__item__attributes) }}>
-	{% include "@components/text/headings/heading.twig" with {
+	{% include "@components/text/heading/heading.twig" with {
     heading__level: accordion__item__heading__level|default('2'),
     heading__blockname: accordion__item__base_class,
     heading: accordion__item__heading__content,
   } %}
 	<div {{ add_attributes(accordion__item__content__attributes) }}>
 		{% block accordion__item__content %}
-			{% include "@components/text/text/01-paragraph.twig" with {
-        paragraph_content: accordion__item__content,
+			{% include "@components/text/text/text.twig" with {
+        text__content: accordion__item__content,
       } %}
 		{% endblock %}
 	</div>

src/components/accordion/accordion.component.yml

@@ -9,6 +9,16 @@ props:
     - accordion__item__heading
     - accordion__item__content
   properties:
+    accordion__heading:
+      type: string
+      title: Heading
+      description: The heading of the accordion item.
+      data: This is the heading for the entire accordion.
+    accordion__text:
+      type: string
+      title: Accordion item content
+      description: The content of the accordion item.
+      data: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a condimentum justo, a consectetur lacus. Nullam sagittis dignissim tincidunt. Quisque et sodales erat.'
     accordion__item__heading:
       type: string
       title: Heading

src/components/accordion/accordion.js

@@ -2,7 +2,7 @@ Drupal.behaviors.accordion = {
   attach(context) {
     // Selectors
     const items = context.querySelectorAll('.js-accordion-item');
-    const controls = context.querySelectorAll('.js-accordion__controls');
+    const controls = context.querySelectorAll('.accordion__controls__item');
     // Classes
     const itemToggle = '.js-accordion-item__toggle';
     const itemState = 'data-accordion-expanded';
@@ -20,14 +20,58 @@ Drupal.behaviors.accordion = {
       button.setAttribute(buttonState, 'false');
     };
 
+    /* eslint-disable */
+    /**
+     * getUrl
+     * @description Get the value of the anchor link in the URL.
+     * @returns The string value after the hash.
+     */
+    function getUrl() {
+      return (
+        window.location.protocol +
+        '//' +
+        window.location.host +
+        window.location.pathname
+      );
+    }
+    /* eslint-enable */
+
+    /**
+     * getAnchor
+     * @description Get the value of the anchor link in the URL.
+     * @return The string value after the hash.
+     */
+    function getAnchor() {
+      return document.URL.split('#').length > 1
+        ? document.URL.split('#')[1]
+        : null;
+    }
+
     // Toggle accordion content when toggle is activated.
     items.forEach((item) => {
       const button = item.querySelector(itemToggle);
 
+      const anchor = item.id;
+      // eslint-disable-next-line
+      const newUrl = `${getUrl()}` + '#' + `${anchor}`;
+
       // Hide all accordion content sections if JavaScript is enabled.
       collapse(item, button);
 
+      if (item.getAttribute('id') && item.getAttribute('id') === getAnchor()) {
+        expand(item, button);
+      }
+
       button.addEventListener('click', () => {
+        if (window.location.href !== newUrl) {
+          window.history.replaceState('', '', newUrl);
+        } else {
+          window.history.replaceState(
+            '',
+            '',
+            window.location.origin + window.location.pathname,
+          );
+        }
         // Toggle the item's state.
         return button.getAttribute(buttonState) === 'true'
           ? collapse(item, button)
@@ -38,26 +82,28 @@ Drupal.behaviors.accordion = {
     controls.forEach((control) => {
       // Get all items relevant to the control.
       const allItems =
-        control.parentNode.querySelectorAll('.js-accordion-item');
+        control.parentNode.parentNode.querySelectorAll('.js-accordion-item');
       // Add click listener on the parent <ul>
-      control.addEventListener('click', (e) => {
-        // Determine which control was activated. `action` will re turn a
-        // boolean. `true` if the expand control was clicked, otherwise false.
-        const action = e.target.classList.contains(
-          'js-accordion__toggle-all--expand',
-        );
-
-        // Iterate over
-        allItems.forEach((item) => {
-          const button = item.querySelector(itemToggle);
-
-          if (action === false) {
-            collapse(item, button);
-          } else {
-            expand(item, button);
-          }
+      control
+        .querySelector('.js-accordion-item__toggle_all')
+        .addEventListener('click', (e) => {
+          // Determine which control was activated. `action` will re turn a
+          // boolean. `true` if the expand control was clicked, otherwise false.
+          const action = e.target.classList.contains(
+            'js-accordion__toggle-all--expand',
+          );
+
+          // Iterate over
+          allItems.forEach((item) => {
+            const button = item.querySelector(itemToggle);
+
+            if (action === false) {
+              collapse(item, button);
+            } else {
+              expand(item, button);
+            }
+          });
         });
-      });
     });
   },
 };