From 10f2be7ecb0a7bfb97dadb2d27e47184fcda44a5 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Fri, 22 Jul 2022 08:11:36 -0400
Subject: [PATCH] ISTWCMS-5656: adding tabs
---
src/patterns/04-components/tabs/_tabs.scss | 115 ++++++++++++++++++
src/patterns/04-components/tabs/_tabs.twig | 51 ++++++++
.../tabs/tabs--buttons/tabs--buttons.twig | 8 ++
.../tabs/tabs--buttons/tabs--buttons.yml | 11 ++
.../tabs/tabs--content/tabs--content.twig | 9 ++
.../tabs/tabs--content/tabs--content.yml | 6 +
.../tabs--exp-col-all/tabs--exp-col-all.twig | 17 +++
.../tabs/tabs--link/tabs--link.twig | 10 ++
.../tabs/tabs--link/tabs--link.yml | 16 +++
src/patterns/04-components/tabs/tabs.js | 28 +++++
src/patterns/04-components/tabs/tabs.md | 12 ++
src/patterns/04-components/tabs/tabs.yml | 10 ++
12 files changed, 293 insertions(+)
create mode 100644 src/patterns/04-components/tabs/_tabs.scss
create mode 100644 src/patterns/04-components/tabs/_tabs.twig
create mode 100644 src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.twig
create mode 100644 src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.yml
create mode 100644 src/patterns/04-components/tabs/tabs--content/tabs--content.twig
create mode 100644 src/patterns/04-components/tabs/tabs--content/tabs--content.yml
create mode 100644 src/patterns/04-components/tabs/tabs--exp-col-all/tabs--exp-col-all.twig
create mode 100644 src/patterns/04-components/tabs/tabs--link/tabs--link.twig
create mode 100644 src/patterns/04-components/tabs/tabs--link/tabs--link.yml
create mode 100644 src/patterns/04-components/tabs/tabs.js
create mode 100644 src/patterns/04-components/tabs/tabs.md
create mode 100644 src/patterns/04-components/tabs/tabs.yml
diff --git a/src/patterns/04-components/tabs/_tabs.scss b/src/patterns/04-components/tabs/_tabs.scss
new file mode 100644
index 00000000..ae13a39a
--- /dev/null
+++ b/src/patterns/04-components/tabs/_tabs.scss
@@ -0,0 +1,115 @@
+// @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;
+ }
+}
diff --git a/src/patterns/04-components/tabs/_tabs.twig b/src/patterns/04-components/tabs/_tabs.twig
new file mode 100644
index 00000000..10a09fa3
--- /dev/null
+++ b/src/patterns/04-components/tabs/_tabs.twig
@@ -0,0 +1,51 @@
+<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>
diff --git a/src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.twig b/src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.twig
new file mode 100644
index 00000000..dde1833f
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.twig
@@ -0,0 +1,8 @@
+{% 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,
+} %}
diff --git a/src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.yml b/src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.yml
new file mode 100644
index 00000000..3a8ee0f4
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs--buttons/tabs--buttons.yml
@@ -0,0 +1,11 @@
+---
+modifier_classes: ''
+content_list:
+ -
+ text: 'Button1'
+ -
+ text: 'Button2'
+ -
+ text: 'Button3'
+ -
+ text: 'Button4'
diff --git a/src/patterns/04-components/tabs/tabs--content/tabs--content.twig b/src/patterns/04-components/tabs/tabs--content/tabs--content.twig
new file mode 100644
index 00000000..070e6207
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs--content/tabs--content.twig
@@ -0,0 +1,9 @@
+{% 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
diff --git a/src/patterns/04-components/tabs/tabs--content/tabs--content.yml b/src/patterns/04-components/tabs/tabs--content/tabs--content.yml
new file mode 100644
index 00000000..f69e8f1a
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs--content/tabs--content.yml
@@ -0,0 +1,6 @@
+---
+modifier_classes: ''
+content_list:
+ - Tab1
+ - Tab2
+ - Tab3
diff --git a/src/patterns/04-components/tabs/tabs--exp-col-all/tabs--exp-col-all.twig b/src/patterns/04-components/tabs/tabs--exp-col-all/tabs--exp-col-all.twig
new file mode 100644
index 00000000..bb17765f
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs--exp-col-all/tabs--exp-col-all.twig
@@ -0,0 +1,17 @@
+{% 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
diff --git a/src/patterns/04-components/tabs/tabs--link/tabs--link.twig b/src/patterns/04-components/tabs/tabs--link/tabs--link.twig
new file mode 100644
index 00000000..c558818f
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs--link/tabs--link.twig
@@ -0,0 +1,10 @@
+{% 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,
+} %}
diff --git a/src/patterns/04-components/tabs/tabs--link/tabs--link.yml b/src/patterns/04-components/tabs/tabs--link/tabs--link.yml
new file mode 100644
index 00000000..cf833155
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs--link/tabs--link.yml
@@ -0,0 +1,16 @@
+---
+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'
diff --git a/src/patterns/04-components/tabs/tabs.js b/src/patterns/04-components/tabs/tabs.js
new file mode 100644
index 00000000..8b9fc0dd
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs.js
@@ -0,0 +1,28 @@
+/**
+ * @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);
diff --git a/src/patterns/04-components/tabs/tabs.md b/src/patterns/04-components/tabs/tabs.md
new file mode 100644
index 00000000..028f42db
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs.md
@@ -0,0 +1,12 @@
+---
+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.
diff --git a/src/patterns/04-components/tabs/tabs.yml b/src/patterns/04-components/tabs/tabs.yml
new file mode 100644
index 00000000..afb30a63
--- /dev/null
+++ b/src/patterns/04-components/tabs/tabs.yml
@@ -0,0 +1,10 @@
+---
+modifier_classes: ''
+is_demo: true
+lists:
+ Tab-1:
+ -
+ Tab-2:
+ -
+ Tab-3:
+ -
--
GitLab