ISTWCMS-5656: adding tabs

src/patterns/04-components/tabs/_tabs.scss

+// @file
+// Styles for UW Tabs.
+@use '../../../01-core' as *;
+
+.uw-tabs {
+  margin: var(--size-1) auto;
+
+  &.catalog {
+
+    @include medium {
+      padding: 0;
+    }
+  }
+
+  width: 100%;
+
+  .hide-js{
+    display: none;
+
+    html:not(.js) & {
+      border-bottom: 2px solid $button-background-color-hover;
+      display: block;
+      margin-bottom: var(--size-1);
+      padding-bottom: var(--size-1);
+    }
+  }
+}
+
+//buttons wrapper
+.uw-tab {
+  @include flexbox();
+
+  @supports (scrollbar-width: none) {
+    scrollbar-width: none;
+  }
+
+  overflow-y: scroll;
+
+  @include medium {
+    overflow-y: initial;
+  }
+
+  html:not(.js) & {
+    display:none;
+  }
+
+  a {
+    white-space: nowrap;
+  }
+}
+
+.uw-tab::-webkit-scrollbar {
+  display: none;
+}
+
+// button
+.uw-tablinks {
+  border-bottom: 0.4rem solid #fff;
+  font-weight: inherit;
+  margin: 0 0 0 0.15rem;
+  max-width: inherit;
+  padding: 1rem 2rem;
+
+  @include medium {
+    border-bottom: 0.4rem solid var(--uw-white);
+    font-weight: inherit;
+    margin: 0 0 0 0.15rem;
+    max-width: inherit;
+    padding: 1rem 2rem;
+  }
+
+  &[aria-selected="true"] {
+    background: $button-background-color-hover;
+    border-bottom: 0.4rem solid $button-text-color-hover;
+    color: $button-text-color-hover;
+
+    &:hover{
+      border-bottom: 0.4rem solid #ddd;
+    }
+  }
+
+  &:hover{
+    border-bottom: 0.4rem solid var(--uw-white);
+  }
+}
+
+.uw-tabcontent[role="tabpanel"] {
+  @include uw-flex-grid();
+  padding-top: var(--size-2);
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+html:not(.js) .uw-tabcontent[role="tabpanel"][hidden]{
+ @include flexbox();
+}
+
+.uw-tabcontent[role="tabpanel"] .card{
+  @include uw-flex-grid-item();
+}
+
+
+.block-local-tasks-block{
+  nav nav ul li a {
+    font-family: var(--font-systemmedium);
+  }
+}
+
+.uw-tablinks {
+  &.active {
+    border-bottom: 0.4rem solid #4e4e4e;
+  }
+}

src/patterns/04-components/tabs/_tabs.twig

+<div class="uw-tabs{% if tabs_modifier_class %} {{ tabs_modifier_class }}{% endif %}">
+
+  <div class="uw-tab" role="tablist" aria-label="Multi-tab-list">
+    {% for type in content_list %}
+      {% if tab_type == "link" %}
+        <a href="{{ type.url }}" class="uw-tablinks {{ button_modifier_classes }}{% if type.active %} active{% endif %}">{{ type.text }}</a>
+      {% elseif tab_type == "button" %}
+        {% set button_class -%}
+          uw-tablinks {{ button_modifier_classes }}{% if type.button_class %} {{ type.button_class }}{% endif %}
+        {%- endset %}
+        <button class="{{ button_class }}"{% if uuid %} data-uuid="{{ uuid }}"{% endif %}>{{ type.text }}</button>
+      {% else %}
+        {% set button_class -%}
+          uw-tablinks {{ button_modifier_classes }}{% if type.button_class %} {{ type.button_class }}{% endif %}
+        {%- endset %}
+        <button role="tab" class="{{ button_class }}" {% if loop.index == 1 %} aria-selected="true"  {% else %} aria-selected="false" {%  endif %} aria-controls="{{ type }}" id="tab-{{ loop.index }}" tabindex="0" data-uuid="{{ rand }}">{{ type }}</button>
+      {% endif %}
+    {% endfor %}
+  </div>
+
+  {% if tab_type == "content" %}
+    {% for type in content_list %}
+      <h2 class="hide-js"> {{ type }}</h2>
+      <div id="{{ type }}" class="uw-tabcontent" role="tabpanel" tabindex="0" aria-labelledby="tab-{{ loop.index }}" {% if loop.index > 1 %} hidden {%  endif %} >
+
+        {% if loop.index == 1 %}
+          {% block content_area_1 %}
+            Content area 1
+          {% endblock %}
+        {% elseif loop.index == 2 %}
+          {% block content_area_2 %}
+            Content area 2
+          {% endblock %}
+        {% elseif loop.index == 3 %}
+          {% block content_area_3 %}
+            Content area 3
+          {% endblock %}
+        {% elseif loop.index == 4 %}
+          {% block content_area_4 %}
+            Content area 4
+          {% endblock %}
+        {% elseif loop.index == 5 %}
+          {% block content_area_5 %}
+            Content area 5
+          {% endblock %}
+        {% endif %}
+
+      </div>
+    {% endfor %}
+  {% endif %}
+</div>

src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.twig

+{% include "@components/tabs/_tabs.twig" with {
+  tab_type: 'button',
+  content_list: content_list,
+  button_modifier_classes: button_modifier_classes,
+  tabs_modifier_class: tabs_modifier_class,
+  exp_col_all: exp_col_all,
+  uuid: uuid,
+} %}

src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.yml

+---
+modifier_classes: ''
+content_list:
+  -
+    text: 'Button1'
+  -
+    text: 'Button2'
+  -
+    text: 'Button3'
+  -
+    text: 'Button4'

src/patterns/04-components/tabs/tabs--content/tabs--content.twig

+{% set button_modifier_classes -%}
+  button  button--large  {{ modifier_classes }}
+{%- endset %}
+
+{% include "@components/tabs/_tabs.twig" with {
+  tab_type: 'content',
+  content_list: content_list,
+  button_modifier_classes: button_modifier_classes,
+} %}
\ No newline at end of file

src/patterns/04-components/tabs/tabs--content/tabs--content.yml

+---
+modifier_classes: ''
+content_list:
+  - Tab1
+  - Tab2
+  - Tab3

src/patterns/04-components/tabs/tabs--exp-col-all/tabs--exp-col-all.twig

+{% set content_list = {
+  '0': {
+    'text': 'Expand all',
+    'button_class': 'uw-exp-col-expand-all',
+  },
+  '1': {
+    'text': 'Collapse all',
+    'button_class': 'uw-exp-col-collapse-all',
+  }
+} %}
+
+{% include '@components/tabs/tabs--buttons/tabs--buttons.twig' with {
+  content_list: content_list,
+  tabs_modifier_class: 'uw-exp-col',
+  button_modifier_classes: 'uw-exp-col-button',
+  uuid: uuid,
+} %}
\ No newline at end of file

src/patterns/04-components/tabs/tabs--link/tabs--link.twig

+{% set button_modifier_classes -%}
+  button  button--large  {{ modifier_classes }}
+{%- endset %}
+
+{% include "@components/tabs/_tabs.twig" with {
+  tab_type: 'link',
+  content_list: content_list,
+  button_modifier_classes: button_modifier_classes,
+  tabs_modifier_class: tabs_modifier_class,
+} %}

src/patterns/04-components/tabs/tabs--link/tabs--link.yml

+---
+modifier_classes: ''
+content_list:
+  -
+    url: 'https://google.ca'
+    text: 'Link1'
+  -
+    url: 'https://google.ca'
+    text: 'Link2'
+    active: 1
+  -
+    url: 'https://google.ca'
+    text: 'Link3'
+  -
+    url: 'https://google.ca'
+    text: 'Link4'

src/patterns/04-components/tabs/tabs.js

+/**
+ * @file
+ */
+
+(function ($, Drupal) {
+  'use strict';
+  Drupal.behaviors.tabs = {
+    attach: function () {
+      $(document).ready(function () {
+
+        $('.uw-contact-expand-all').click(function () {
+          $('.uw-contact details').each(function () {
+            console.log($(this));
+            $(this).attr('open', '');
+          });
+        });
+
+        $('.uw-contact-collapse-all').click(function () {
+          $('.uw-contact details').each(function () {
+            console.log($(this));
+            $(this).removeAttr('open');
+          });
+        });
+
+      });
+    }
+  };
+})(jQuery, Drupal);

src/patterns/04-components/tabs/tabs.md

+---
+el: .tabs
+title: Tabs
+---
+
+__Variables:__
+* modifier_classes: [string] Classes to modify the default component styling.
+* heading: [string] Accessible heading of the tabs.
+* tabs: [array] Tab items. Each item is an object containing:
+  * active: [boolean] Whether the item is active.
+  * url: [string] URL of the item.
+  * text: [string] Text of the item.

src/patterns/04-components/tabs/tabs.yml

+---
+modifier_classes: ''
+is_demo: true
+lists:
+  Tab-1:
+        -
+  Tab-2:
+        -
+  Tab-3:
+        -