ISTWCMS-4790: updating tabs to use links and active trail

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;

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;
+
+  }
+}

source/_patterns/04-components/tabs/_tabs.twig

-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 %}

source/_patterns/04-components/tabs/tabs--content/tabs--content.yml

 ---
 modifier_classes: ''
-is_demo: true
 content_list:
   - Tab1
   - Tab2

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,

source/_patterns/04-components/tabs/tabs--link/tabs--link.yml

 ---
 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'