From 27997f8949ee6ea16a10a3f438ddd5f0c8a4df3d Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Mon, 10 May 2021 14:40:31 -0400
Subject: [PATCH] ISTWCMS-4790: updating tabs to use links and active trail
---
css/styles.css | 3 +++
.../_patterns/04-components/tabs/_tabs.scss | 24 ++++++++++++++-----
.../_patterns/04-components/tabs/_tabs.twig | 3 +--
.../tabs/tabs--content/tabs--content.yml | 1 -
.../tabs/tabs--link/tabs--link.twig | 5 ----
.../tabs/tabs--link/tabs--link.yml | 8 ++++++-
6 files changed, 29 insertions(+), 15 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index f158d55d..404dbd8a 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -6949,6 +6949,9 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
.block-local-tasks-block nav nav ul li a {
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
+.uw-tablinks.active {
+ border-bottom: 0.4rem solid #4e4e4e; }
+
.tag-list {
list-style-type: none;
margin: 0;
diff --git a/source/_patterns/04-components/tabs/_tabs.scss b/source/_patterns/04-components/tabs/_tabs.scss
index fa58e2db..f9e3ab91 100644
--- a/source/_patterns/04-components/tabs/_tabs.scss
+++ b/source/_patterns/04-components/tabs/_tabs.scss
@@ -4,6 +4,7 @@
.uw-tabs{
margin:gesso-spacing(sm) auto;
width: 100%;
+
.hide-js{
display:none;
html:not(.js) &{
@@ -14,19 +15,22 @@
}
}
}
-//buttons wrapper
+//buttons wrapper
.uw-tab {
display:flex;
+
html:not(.js) &{
display:none;
}
}
-//button
+
+// button
.uw-tablinks {
border-bottom: 0.4rem solid #fff;
margin:0 0 0 0.15rem;
max-width: inherit;
+
&[aria-selected="true"] {
background: $button-background-color-hover;
border-bottom: 0.4rem solid $button-text-color-hover;
@@ -35,6 +39,7 @@
border-bottom: 0.4rem solid #ddd;
}
}
+
&:hover{
border-bottom: 0.4rem solid #fff;
}
@@ -48,32 +53,39 @@
&[hidden] {
display:none;
}
-
}
-html:not(.js) .uw-tabcontent[role="tabpanel"][hidden]{
+html:not(.js) .uw-tabcontent[role="tabpanel"][hidden]{
display: flex;
}
.uw-tabcontent[role="tabpanel"] .card{
width:100%;
+
@include small{
flex-grow: 1;
width: 45%;
}
+
@include large{
width: 32%;
}
}
+
// lineup the top of the date with the title in blog teaser
.uw-tabcontent[role="tabpanel"] .card.teaser--blog .card__title{
margin-top:0;
}
-
-
.block-local-tasks-block{
nav nav ul li a {
font-family: gesso-font-family(systemmedium);
}
}
+
+.uw-tablinks {
+ &.active {
+ border-bottom: 0.4rem solid #4e4e4e;
+
+ }
+}
diff --git a/source/_patterns/04-components/tabs/_tabs.twig b/source/_patterns/04-components/tabs/_tabs.twig
index 5a82e04b..5b48c890 100644
--- a/source/_patterns/04-components/tabs/_tabs.twig
+++ b/source/_patterns/04-components/tabs/_tabs.twig
@@ -1,10 +1,9 @@
-TABS
<div class="uw-tabs">
<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 }} is-active-trail">{{ type.text }}</a>
+ <a href="{{ type.url }}" class="uw-tablinks {{ button_modifier_classes }} {% if type.active %}active{% endif %} %}">{{ type.text }}</a>
{% else %}
<button role="tab" class="uw-tablinks {{ button_modifier_classes }} " {% if loop.index == 1 %} aria-selected="true" {% else %} aria-selected="false" {% endif %} aria-controls="{{ type }}" id="tab-{{ loop.index }}" tabindex="0">{{ type }}</button>
{% endif %}
diff --git a/source/_patterns/04-components/tabs/tabs--content/tabs--content.yml b/source/_patterns/04-components/tabs/tabs--content/tabs--content.yml
index 68674d84..f69e8f1a 100644
--- a/source/_patterns/04-components/tabs/tabs--content/tabs--content.yml
+++ b/source/_patterns/04-components/tabs/tabs--content/tabs--content.yml
@@ -1,6 +1,5 @@
---
modifier_classes: ''
-is_demo: true
content_list:
- Tab1
- Tab2
diff --git a/source/_patterns/04-components/tabs/tabs--link/tabs--link.twig b/source/_patterns/04-components/tabs/tabs--link/tabs--link.twig
index 8db0a81f..882626b1 100644
--- a/source/_patterns/04-components/tabs/tabs--link/tabs--link.twig
+++ b/source/_patterns/04-components/tabs/tabs--link/tabs--link.twig
@@ -2,11 +2,6 @@
button button--large {{ modifier_classes }}
{%- endset %}
-{% for cl in content_list %}
- {{ cl.url }} {{ cl.text }} <br />
-{% endfor %}
-
-LINK
{% include "@components/tabs/_tabs.twig" with {
tab_type: 'link',
content_list: content_list,
diff --git a/source/_patterns/04-components/tabs/tabs--link/tabs--link.yml b/source/_patterns/04-components/tabs/tabs--link/tabs--link.yml
index 7928c4b8..cf833155 100644
--- a/source/_patterns/04-components/tabs/tabs--link/tabs--link.yml
+++ b/source/_patterns/04-components/tabs/tabs--link/tabs--link.yml
@@ -1,6 +1,5 @@
---
modifier_classes: ''
-is_demo: true
content_list:
-
url: 'https://google.ca'
@@ -8,3 +7,10 @@ content_list:
-
url: 'https://google.ca'
text: 'Link2'
+ active: 1
+ -
+ url: 'https://google.ca'
+ text: 'Link3'
+ -
+ url: 'https://google.ca'
+ text: 'Link4'
--
GitLab