feat: add social navigation

src/components/navigation/breadcrumbs/breadcrumbs.component.yml

@@ -1,7 +1,7 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
 
 name: Breadcrumbs
-group: Components/Menus
+group: Components/Navigation
 status: stable
 props:
   type: object

src/components/navigation/breadcrumbs/breadcrumbs.scss

@@ -35,7 +35,7 @@
   flex-flow: row nowrap;
   position: relative;
   margin: 0;
-  padding: var(--spacing-md);
+  padding: 0;
   max-width: 100%;
   display: none;
 
@@ -115,8 +115,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: space(3);
-    width: space(3);
+    border: 0;
     z-index: 1;
     opacity: 0;
     visibility: hidden;
@@ -126,10 +125,10 @@
     left: 0;
     background: linear-gradient(
       90deg,
-      #{clr(background)} 75%,
-      #{clr(background, 0)} 100%
+      var(--button-color-bkg) 75%,
+      transparent 100%
     );
-    border-radius: space(2) 0 0 space(2);
+    border-radius: var(--button-radius) 0 0 var(--button-radius);
 
     [data-scroll-indicator='left'] &,
     [data-scroll-indicator='both'] & {
@@ -146,10 +145,10 @@
     right: 0;
     background: linear-gradient(
       90deg,
-      #{clr(background, 0)} 0%,
-      #{clr(background)} 25%
+      transparent 0%,
+      var(--button-color-bkg) 25%
     );
-    border-radius: 0 space(2) space(2) 0;
+    border-radius: 0 var(--button-radius) var(--button-radius) 0;
 
     [data-scroll-indicator='right'] &,
     [data-scroll-indicator='both'] & {
@@ -164,6 +163,12 @@
 
   .scroll__icon {
     display: flex;
+    height: var(--size-xl);
+    width: var(--size-xl);
+  }
+
+  .icon {
+    fill: var(--button-color-label);
   }
 }
 
@@ -173,11 +178,18 @@
   & {
     display: flex;
     white-space: nowrap;
-    background-color: clr(full-white);
-    border-radius: space(2);
-    margin-top: space(1.5);
-    margin-bottom: space(1.5) * -1;
-    padding: space(0.75) (space(1) + space(0.25)) space(0.75) space(2);
+    margin: 0;
+  }
+
+  // Main breadcrumb toggle.
+  .breadcrumbs__wrapper > & {
+    padding-left: var(--size-xl);
+    font-size: var(--font-size-x-small);
+    font-weight: var(--font-weight-primary-regular);
+  }
+
+  .icon {
+    fill: var(--button-color-label);
   }
 
   [data-breadcrumbs-overflow='expanded'] & {

src/components/navigation/breadcrumbs/breadcrumbs.twig

@@ -18,6 +18,7 @@
     button__content: true,
     button__base_class: 'scroll',
     button__blockname: breadcrumbs__base_class,
+    button__style: 'primary',
     button__modifiers: ['left'],
     button__attributes: {
       'aria-hidden': 'true',
@@ -40,6 +41,7 @@
     button__content: true,
     button__base_class: 'scroll',
     button__blockname: breadcrumbs__base_class,
+    button__style: 'primary',
     button__type: 'filled',
     button__modifiers: ['right'],
     button__attributes: {
@@ -91,6 +93,8 @@
           button__content: true,
           button__base_class: 'toggle',
           button__blockname: breadcrumbs__base_class,
+          button__additional_classes: ['button'],
+          button__style: 'primary',
           button__attributes: {
             'aria-hidden': 'true',
             'tabindex': '-1',

src/components/navigation/main/main.component.yml

@@ -1,7 +1,7 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
 
 name: Main Menu
-group: Components/Menus
+group: Components/Navigation
 status: stable
 props:
   type: object

src/components/navigation/social/_social-item.twig

@@ -0,0 +1,63 @@
+{% set item__modifiers = item__modifiers|default([]) %}
+{% set item__modifiers = item__modifiers|default([]) %}
+{% set item__attributes = item__attributes|default({}) %}
+
+{# Set link component as default #}
+{% set list__item %}
+{% if item.title %}
+	{% set link__content = item.title %}
+{% endif %}
+
+{% if item.text %}
+	{% set link__content = item.text %}
+{% endif %}
+
+{% if not item.url and not item.href %}
+	{% set link__attributes = link__attributes|merge({
+		'class': bem('placeholder', item__modifiers, menu__base_class),
+	}) %}
+	<span {{ add_attributes(link__attributes) }}>{{- link__content -}}</span>
+{% else %}
+	{# If drupal stringify the url object #}
+	{# See variable passed to menu_links macro #}
+		{% if directory %}
+			{% if item.url %}
+		{% set link__url = item.url|render %}
+		{% endif %}
+			{% if item.href %}
+		{% set link__url = item.href %}
+		{% endif %}
+	{% else %}
+		{% set link__url = item.url %}
+	{% endif %}
+
+	{% if link__url is empty %}
+		{% set link__base_class = 'placeholder' %}
+		{% set link__url = '#' %}
+	{% else %}
+		{% set link__blockname = menu__base_class %}
+	{% endif %}
+	{% embed "@components/link/link.twig" with {
+    link__style: 'icon',
+  } %}
+    {% block link__content %}
+      {% include "@components/icons/_icon.twig" with {
+        icon__name: item.title|lower,
+        icon__blockname: menu__base_class,
+      } %}
+      <span {{ bem('text', [], menu_class, ['visually-hidden']) }}>{{ item.title }}</span>
+    {% endblock %}
+  {% endembed %}
+{% endif %}
+{% endset %}
+
+{% embed "@components/lists/_list-item.twig" with {
+  list__item__base_class: 'item',
+  list__item__modifiers: item__modifiers,
+  list__item__blockname: item__blockname,
+  list__item__attributes: item__attributes,
+} %}
+	{% block list__item__content %}
+		{{- list__item -}}
+	{% endblock %}
+{% endembed %}

src/components/navigation/social/_social-list.twig

@@ -0,0 +1,20 @@
+{% set item__blockname = menu__base_class %}
+
+{% set menu__item %}
+{% block menu__item__content %}
+	{% for item in items %}
+		{% include "@components/navigation/social/_social-item.twig" %}
+	{% endfor %}
+{% endblock %}
+{% endset %}
+
+{# List #}
+{% embed "@components/lists/list.twig" with {
+  list__base_class: 'menu-list',
+  list__blockname: menu__base_class,
+  list__type: menu__list__type,
+}%}
+  {% block list__content %}
+    {{ menu__item }}
+  {% endblock %}
+{% endembed %}

src/components/navigation/social/social.component.yml

@@ -0,0 +1,27 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Social Menu
+group: Components/Navigation
+status: stable
+props:
+  type: object
+  required:
+    - items
+  properties:
+    items:
+      type: array
+      title: Social menu items
+      description: The items of the social menu.
+      data:
+        - title: 'Twitter'
+          url: '#'
+          icon: 'twitter'
+        - title: 'Facebook'
+          url: '#'
+          icon: 'facebook'
+        - title: 'Instagram'
+          url: '#'
+          icon: 'instagram'
+        - title: 'LinkedIn'
+          url: '#'
+          icon: 'linkedin'

src/components/navigation/social/social.scss

@@ -0,0 +1,35 @@
+@use '../../../foundation/utility/utility' as *;
+@use '../../link/link.scss' as *;
+
+.social-nav__menu-list {
+  @include list-reset;
+
+  & {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: var(--spacing-md);
+  }
+}
+
+.social-nav__link {
+  @include link;
+
+  & {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: var(--spacing-sm);
+    text-decoration: none;
+  }
+
+  &:focus,
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.social-nav__icon {
+  height: var(--size-xl);
+  width: var(--size-xl);
+  fill: currentColor;
+}

src/components/navigation/social/social.stories.js

@@ -0,0 +1,13 @@
+// Markup.
+import socialNavTwig from './social.twig';
+import socialNavDataProps from './social.component.yml';
+
+// Data.
+const socialNavData = socialNavDataProps.props.properties.items.data;
+
+/**
+ * Storybook Definition.
+ */
+export default { title: 'Components/Navigation/Social' };
+
+export const social = () => socialNavTwig({ items: socialNavData });

src/components/navigation/social/social.twig

@@ -0,0 +1,8 @@
+{% embed "@components/navigation/base/menu.twig" with {
+  menu__name: 'Social Navigation',
+  menu__base_class: 'social-nav',
+} %}
+  {% block menu_list__content %}
+    {% include "@components/navigation/social/_social-list.twig" %}
+  {% endblock %}
+{% endembed %}