fix: wip

compound/02-molecules/accordion/_accordion-item.twig → src/components/accordion/_accordion-item.twig

@@ -21,16 +21,16 @@
 }) %}
 
 {% set accordion__item__button__content %}
-  {{ accordion__item__heading }}
-  {% include "@atoms/images/icons/_icon.twig" with {
+{{ accordion__item__heading }}
+{% include "@components/icons/_icon.twig" with {
     icon__name: 'chevron-down',
     icon__blockname: accordion__item__base_class,
     icon__decorative: true,
   } %}
 {% endset %}
 
 {% set accordion__item__heading__content %}
-  {% include "@atoms/buttons/button.twig" with {
+{% include "@components/button/button.twig" with {
     button__content: accordion__item__button__content,
     button__base_class: 'toggle',
     button__additional_classes: ['js-accordion-item__toggle'],
@@ -42,16 +42,16 @@
 {% endset %}
 
 <div {{ add_attributes(accordion__item__attributes) }}>
-  {% include "@atoms/text/headings/_heading.twig" with {
+	{% include "@components/text/headings/_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 "@atoms/text/text/01-paragraph.twig" with {
+	<div {{ add_attributes(accordion__item__content__attributes) }}>
+		{% block accordion__item__content %}
+			{% include "@components/text/text/01-paragraph.twig" with {
         paragraph_content: accordion__item__content,
       } %}
-    {% endblock %}
-  </div>
+		{% endblock %}
+	</div>
 </div>

src/components/accordion/_accordion.scss

@@ -0,0 +1,131 @@
+@use '../../stylesheets/mixins.scss';
+
+$accordion_icon_size: var(--size-xl);
+
+// --accordion-color-body: #00202e;
+// --accordion-color-header: #007fb6;
+// --accordion-color-header-hover: #33b2e9;
+// --accordion-divider-color: #545f64;
+
+
+// The accordion group.
+.accordion {
+  padding-block: var(--spacing-sm);
+}
+
+.accordion__controls {
+  @include list-reset;
+
+  display: flex;
+  gap: var(--spacing-md)
+}
+
+.accordion__controls__item {
+  &:not(:last-child) {
+    padding-right: var(--spacing-sm);
+    margin-right: var(--spacing-sm);
+  }
+}
+
+.accordion-item__toggle {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+  width: 100%;
+
+  &:hover {
+    color: clr(link);
+  }
+}
+
+.accordion__toggle-all {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+
+  display: flex;
+  color: var(--accordion-color-header);
+  font-size: var(--font-size-small);
+  gap: var(--spacing-sm);
+  align-items: center;
+
+  &:hover {
+    color: var(--accordion-color-header-hover);
+
+    .accordion__icon {
+      fill: var(--accordion-color-header-hover);
+    }
+  }
+
+  .accordion__icon {
+    fill: var(--accordion-color-header);
+    height: var(--size-lg);
+    width: var(--size-lg);
+  }
+}
+
+.accordion__icon {
+  height: var(--size-xl);
+  width: var(--size-xl);
+  pointer-events: none;
+
+  .accordion__toggle-all--collapse & {
+    transform: rotate(180deg);
+  }
+}
+
+// Individual accordion items.
+.accordion-item {
+  border-bottom: 1px solid var(--accordion-divider-color);
+  padding-top: var(--spacing-lg);
+}
+
+.accordion-item__heading {
+  @include heading-medium;
+  display: flex;
+  margin: 0 0 var(--spacing-lg);
+  color: var(--accordion-color-header);
+
+  &:hover {
+    color: var(--accordion-color-header-hover);
+
+    .accordion-item__icon {
+      fill: var(--accordion-color-header-hover);
+    }
+  }
+}
+
+.accordion-item__icon {
+  margin-left: auto;
+  height: $accordion_icon_size;
+  width: $accordion_icon_size;
+  fill: var(--accordion-color-header);
+
+  [aria-expanded='true']>& {
+    transform: rotate(180deg);
+  }
+}
+
+.accordion-item__content {
+  overflow: hidden;
+
+  [data-accordion-expanded='true'] & {
+    margin-bottom: var(--spacing-sm);
+  }
+
+  [data-accordion-expanded='false'] & {
+    max-height: 0;
+  }
+}

compound/02-molecules/accordion/accordion.stories.js → src/components/accordion/accordion.stories.js

@@ -8,7 +8,7 @@ import './accordion';
  * Storybook Definition.
  */
 export default {
-  title: 'Molecules/Accordion',
+  title: 'Components/Accordion',
   argTypes: {
     heading: {
       name: 'Heading',
@@ -21,6 +21,10 @@ export default {
       defaultValue: accordionData.accordion__item__content,
     },
   },
+  decorators: [
+    (story) =>
+      `<div style="max-width: 700px; margin: 0 auto;">${story()}</div>`,
+  ],
 };
 
 export const Accordion = ({ heading, content }) =>

compound/02-molecules/accordion/accordion.twig → src/components/accordion/accordion.twig

@@ -9,16 +9,16 @@
 {% set accordion__base_class = 'accordion' %}
 
 {% set expand_all__content %}
-  Expand All
-  {% include "@atoms/images/icons/_icon.twig" with {
+Expand All
+{% include "@components/icons/_icon.twig" with {
     icon__name: 'chevron-down',
     icon__blockname: accordion__base_class,
   } %}
 {% endset %}
 
 {% set collapse_all__content %}
-  Collapse All
-  {% include "@atoms/images/icons/_icon.twig" with {
+Collapse All
+{% include "@components/icons/_icon.twig" with {
     icon__name: 'chevron-down',
     icon__blockname: accordion__base_class,
   } %}
@@ -29,63 +29,65 @@
 } %}
 
 <div {{ add_attributes(accordion__attibutes) }}>
-  {% if accordion__heading %}
-    {% include "@atoms/text/headings/_heading.twig" with {
+	{% if accordion__heading %}
+		{% include "@components/text/headings/_heading.twig" with {
       heading__level: '2',
       heading__blockname: accordion__base_class,
       heading: accordion__heading,
     } %}H
-  {% endif %}
-  {% embed "@atoms/lists/list.twig" with {
+	{% endif %}
+	{% 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 "@atoms/lists/_list-item.twig" with {
+		{% 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 "@atoms/buttons/button.twig" with {
+				{% block list__item__content %}
+					{% include "@components/button/button.twig" with {
             button__content: expand_all__content,
             button__base_class: 'toggle-all',
             button__modifiers: ['expand'],
             button__blockname: accordion__base_class,
             button__additional_classes: ['js-accordion__toggle-all--expand'],
           } %}
-        {% endblock %}
-      {% endembed %}
-      {% embed "@atoms/lists/_list-item.twig" with {
+				{% 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 "@atoms/buttons/button.twig" with {
+				{% block list__item__content %}
+					{% include "@components/button/button.twig" with {
             button__content: collapse_all__content,
             button__base_class: 'toggle-all',
             button__modifiers: ['collapse'],
             button__blockname: accordion__base_class,
             button__additional_classes: ['js-accordion__toggle-all--collapse'],
           } %}
-        {% endblock %}
-      {% endembed %}
-    {% endblock %}
-  {% endembed %}
-  {% block accordion__items %}
-    {% for item in accordion__items %}
-      {# Create a unique ID for each accordion item #}
-      {% set unique_id = random('1234567890') ~ random('1234567890') ~ random('1234567890') ~ random('1234567890') %}
-      {% set accordion__item__content__id = 'accordion__item-' ~ unique_id ~ '-' ~ loop.index %}
-      {% include "@molecules/accordion/_accordion-item.twig" with {
+				{% endblock %}
+			{% endembed %}
+		{% endblock %}
+	{% endembed %}
+
+	{% block accordion__items %}
+		{% for item in accordion__items %}
+			{# Create a unique ID for each accordion item #}
+			{% set unique_id = random('1234567890') ~ random('1234567890') ~ random('1234567890') ~ random('1234567890') %}
+			{% set accordion__item__content__id = 'accordion__item-' ~ unique_id ~ '-' ~ loop.index %}
+			{% include "@components/accordion/_accordion-item.twig" with {
         accordion__item__heading: item.accordion__item__heading,
         accordion__item__content: item.accordion__item__content,
         accordion__item__heading__level: accordion__heading ? '3' : '2',
         accordion__item__content__attributes: {
           'id': accordion__item__content__id,
         }
       } %}
-    {% endfor %}
-  {% endblock %}
+		{% endfor %}
+	{% endblock %}
+
 </div>