feat: initial main menu rewrite with base component

config/emulsify-core/storybook/preview.js

@@ -1,3 +1,4 @@
-// Import additional stylesheets just for storybook.
-import '../../../dist/storybook/storybook-base.css';
-import '../../../dist/storybook/storybook-components.css';
+// export global parameters as config overrides.
+// This is useful for reorganizing your stories.
+// See https://storybook.js.org/docs/writing-stories/parameters#story-parameters.
+export const projectParams = '';

src/components/button/button.stories.js

@@ -1,26 +1,39 @@
-import template from './button.twig';
-import { props } from './button.component.yml';
-import figma from '../../../config/configma.json';
-
-const buttonData = props.properties.button__additional_classes.data;
+import buttonTwig from './button.twig';
 
 export default {
   title: 'Components/Button',
   decorators: [(story) => `${story()}`],
-};
-
-export const Button = () => `
-  <p>Default:</p>
-  ${template()}
-  <p>Hover:</p>
-  ${template({ button__additional_classes: [`${buttonData[0]}`] })}
-  <p>Focus:</p>
-  ${template({ button__additional_classes: [`${buttonData[1]}`] })}
-`;
-
-Button.parameters = {
-  design: {
-    type: 'figma',
-    url: figma.url + figma.button,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    buttonElement: {
+      type: 'select',
+      name: 'Button Element',
+      options: {
+        '<button>': 'button',
+        '<a>': 'a',
+      },
+    },
+    buttonStyle: {
+      type: 'select',
+      name: 'Button Style',
+      options: {
+        Primary: 'primary',
+        Secondary: 'secondary',
+      },
+    },
+  },
+  args: {
+    buttonElement: 'button',
+    buttonStyle: 'filled',
   },
 };
+
+export const Button = ({ buttonElement, buttonStyle }) =>
+  buttonTwig({
+    button__element: buttonElement,
+    button__href: '#',
+    button__content: `${buttonStyle} Button`,
+    button__style: buttonStyle,
+  });

src/components/button/button.twig

@@ -1,13 +1,118 @@
-{% set button__tag = button__tag|default('button') %}
+{#
+ # Available props
+ # Reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#associated_aria_roles_states_and_properties
+ # - aria_expanded: whether the controlled grouping is expanded or not
+ # - button__hover_style: fade (default), rise, or swipe
+ # - button__radius: none (default), soft, or pill
+ # - button__style: filled (defualt) or outline
+ # - button__outline_weight: 1 (default), 2, or 4
+ #
+ # Available variables:
+ # - button__content - the content of the button (typically text)
+ #
+ # Available blocks:
+ # - button__content - used to replace the content of the button with something other than text
+ #   for example: to insert an icon
+ #}
+
 {% set button__base_class = button__base_class|default('button') %}
+{% set button__element = button__element|default('button') %}
+{% set button__additional_classes = button__additional_classes|default('') %}
 {% set button__attributes = button__attributes|default([]) %}
+
 {% set button__attributes = button__attributes|merge({
   'class': bem(button__base_class, button__modifiers, button__blockname, button__additional_classes),
+  'data-button-style': button__style|default('filled'),
 }) %}
-{% set button__content = button__content|default('Button Label') %}
 
-<{{button__tag}} {{ add_attributes(button__attributes) }}>
-	{% block button__content %}
-		{{ button__content }}
+{% if aria_expanded is defined %}
+	{% set button__attributes = button__attributes|merge({
+    'aria-expanded': aria_expanded,
+  }) %}
+{% endif %}
+
+{% if button__icon is defined %}
+	{# Default to right alignment #}
+	{% set button__attributes = button__attributes|merge({
+      'data-button-alignment': 'right',
+  }) %}
+
+	{% if button__icon.left is defined %}
+		{% set button__attributes = button__attributes|merge({
+      'data-button-alignment': 'left',
+    }) %}
+	{% endif %}
+{% endif %}
+
+{% if button__label_display is defined %}
+	{% set button__attributes = button__attributes|merge({
+    'data-button-label': button__label_display,
+  }) %}
+{% endif %}
+
+{% if button__element == 'a' and button__href is defined %}
+	{% set button__attributes = button__attributes|merge({
+    href: button__href,
+  }) %}
+	{% set button__element = 'a' %}
+{% endif %}
+
+{% if button__element == 'a' and button__external %}
+	{% set button__attributes = button__attributes|merge({
+    'target': '_blank',
+  }) %}
+{% endif %}
+
+{% if button__type is defined %}
+	{% set button__attributes = button__attributes|merge({
+    'button-action': button__type,
+  }) %}
+{% endif %}
+
+{% if aria_controls is defined %}
+	{% set button__attributes = button__attributes|merge({
+    'aria-controls': aria_controls,
+  }) %}
+{% endif %}
+
+{% if aria_hidden is defined %}
+	{% set button__attributes = button__attributes|merge({
+    'aria-hidden': aria_hidden,
+  }) %}
+{% endif %}
+
+{% if not button__content %}
+	{% set button__attributes = button__attributes|merge({
+		'aria-label': button__icon_only,
+  }) %}
+{% endif %}
+
+{% set icon %}
+<span {{ bem('icon', [], button__base_class) }}>
+	{% block button__icon %}
+		{% include "@components/icons/_icon.twig" with {
+			icon__name: button__icon.name,
+			icon__role: button__icon.role,
+			icon__title: button__icon.title,
+			icon__desc: button__icon.desc,
+			icon__decorative: button__icon.decorative,
+		} %}
 	{% endblock %}
-</{{button__tag}}>
+</span>
+{% endset %}
+
+<{{button__element}} {{add_attributes(button__attributes)}}>
+	{% if button__icon.left is defined %}
+		{{- icon -}}
+	{% endif %}
+	{% if button__content is defined %}
+		{% block button__content %}
+			<span {{ bem('content', [], button__base_class) }}>
+				{{- button__content -}}
+			</span>
+		{% endblock %}
+	{% endif %}
+	{% if button__icon.right is defined %}
+		{{- icon -}}
+	{% endif %}
+</{{button__element}}>

src/components/card/card.scss

@@ -1,5 +1,5 @@
 @use '../../foundation/typography/typography' as *;
-@use '../links/link/link.scss' as *;
+@use '../link/link.scss' as *;
 
 .card {
   display: flex;

src/components/card/card.twig

@@ -99,12 +99,12 @@
 		{% endif %}
 		{# Link #}
 		{% if card__link__url %}
-			{% include "@components/links/link/link.twig" with {
-        link_base_class: card__link__base_class|default('link'),
-        link_blockname: card__base_class,
-        link_attributes: card__link__attributes,
-        link_content: card__link__text,
-        link_url: card__link__url,
+			{% include "@components/link/link.twig" with {
+        link__base_class: card__link__base_class|default('link'),
+        link__blockname: card__base_class,
+        link__attributes: card__link__attributes,
+        link__content: card__link__text,
+        link__url: card__link__url,
       } %}
 		{% endif %}
 	</div>

src/components/icons/_icon.twig

@@ -2,46 +2,31 @@
 /**
  * Available variables:
  * - icon__base_class - base class name
- * - icon_modifiers - modifiers for icons (array)
+ * - icon__modifiers - modifiers for icons (array)
  * - icon__blockname - blockname prepended to the base classname
  * - icon__name - the name of the icon
- * - icon_role - a11y role
- * - icon_title - a11y title
- * - icon_desc - a11y description
+ * - icon__role - a11y role
+ * - icon__title - a11y title
+ * - icon__desc - a11y description
  */
 #}
-{% set icon__base_class = icon__base_class|default('icon') %}
+{% set icon__base_class = icon_base_class|default('icon') %}
 {# If `directory` is defined, set the path relative for Drupal.
  # Otherwise, set the path relative to the Component Library. #}
-{% set icon_url = directory ? '/' ~ directory ~ '/dist/' %}
+{% set icon__url = directory ? '/' ~ directory ~ '/dist/' %}
 
-{# IE 11 support for SVG use - remove if not needed.
-## See also emulsify.libraries.yml to remove library.
-#}
-{{ attach_library('emulsify/sprite') }}
-{% set unique_name = icon__name ~ '-' ~ random() %}
-
-<svg {{ bem(icon__base_class, icon_modifiers, icon__blockname, icon_extra_class) }}
-
-  {% if icon_decorative %}
-    aria-hidden="true" role="img"
-  {% elseif icon_role %}
-    role="{{ icon_role }}"
-  {% endif %}
+{% if directory is null %}
+	{% set icon_url = 'themes/custom/smith/dist/' %}
+{% endif %}
 
-  {% if icon_title %}
-    aria-labelledby="title-{{ unique_name }}"
-  {% endif %}
+{% set unique__name = icon__name ~ '-' ~ random() %}
 
-  {% if icon_desc %}
-    aria-describedby="desc-{{ unique_name }}"
-  {% endif %}
->
-  {% if icon_title %}
-    <title id="title-{{ unique_name }}">{{ icon_title }}</title>
-  {% endif %}
-  {% if icon_desc %}
-    <desc id="desc-{{ unique_name }}">{{ icon_desc }}</desc>
-  {% endif %}
-  <use xlink:href="{{ icon_url }}icons.svg#{{ icon__name }}"></use>
+<svg {{ bem(icon__base_class, icon__modifiers, icon__blockname, icon__extra_class) }} {% if icon__decorative %} aria-hidden="true" role="img" {% elseif icon__role %} role="{{ icon_role }}" {% endif %} {% if icon_title %} aria-labelledby="title-{{ unique_name }}" {% endif %} {% if icon_desc %} aria-describedby="desc-{{ unique_name }}" {% endif %}>
+	{% if icon_title %}
+		<title id="title-{{ unique_name }}">{{ icon__title }}</title>
+	{% endif %}
+	{% if icon__desc %}
+		<desc id="desc-{{ unique__name }}">{{ icon__desc }}</desc>
+	{% endif %}
+	<use xlink:href="{{ icon__url }}icons-1.svg#{{ icon__name }}"></use>
 </svg>

src/components/links/link/link.scss → src/components/link/link.scss

@@ -1,7 +1,12 @@
-@mixin link {
+@mixin link($style: underline) {
   color: var(--link-color-default);
+  text-decoration: underline;
   transition: all 0.15s;
 
+  @if $style == no-underline {
+    text-decoration: none;
+  }
+
   &:hover {
     color: var(--link-color-hover);
   }

src/components/link/link.twig

@@ -0,0 +1,45 @@
+{#
+ # Available variables:
+ # - link__content - the content of the link (typically text)
+ # - link__url - the url this link should poing to
+ # - link__attributes - array of attribute,value pairs
+ # - link__base_class - the base class name
+ # - link__modifiers - array of modifiers to add to the base classname
+ # - link__blockname - blockname prepended to the base classname
+ #
+ # Available blocks:
+ # - link__content - used to replace the content of the link
+ #     Example: to insert the image component
+ #}
+
+{% set link__base_class = link__base_class|default('link') %}
+
+{# If link__attributes is not defined, set it to an empty object by default #}
+{% set link__attributes = link__attributes|default({}) %}
+
+{% set link__attributes = link__attributes|merge({
+  'data-link-style': link__style|default('underline'),
+  'class': bem(link__base_class, link__modifiers, link__blockname, link__additional_classes),
+  'href': link__url,
+}) %}
+
+{% if aria_label %}
+	{% set link__attributes = link__attributes|merge({
+    'aria-label': aria_label,
+  }) %}
+{% endif %}
+
+{% if link__external %}
+	{% set link__attributes = link__attributes|merge({
+    'target': '_blank',
+  }) %}
+{% endif %}
+
+{% block link__label %}{% endblock %}
+<a {{ add_attributes(link__attributes) }}> {% block link__prefix %}{% endblock %}
+
+	{% block link__content %}
+		{{- link__content -}}
+	{% endblock %}
+
+</a>

src/components/logo/logo.twig

@@ -13,9 +13,9 @@
 } %}
 
 <div {{ add_attributes(logo__attributes) }}>
-  {% embed "@components/links/link/link.twig" with {
-    link_base_class: 'logo__link',
-    link_url: logo__url|default('/'),
+  {% embed "@components/link/link.twig" with {
+    link__base_class: 'logo__link',
+    link__url: logo__url|default('/'),
   } %}
     {% block link_content %}
       {% include "@components/image/responsive-image.twig" with {