Merge branch 'DES/enhancement/705-vl-refactor/tabs' into DES/enhancem…

…ent/#705-vl-refactor # Conflicts: # app/styles/app.scss
kanselarij-vlaanderen · Mar 8, 2021 · dc0a47b · dc0a47b
2 parents 64ee8dc + ce6054a
commit dc0a47b
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 237 deletions.
diff --git a/app/pods/agenda/agendaitems/agendaitem/template.hbs b/app/pods/agenda/agendaitems/agendaitem/template.hbs
@@ -2,12 +2,10 @@
   <div class="vlc-u-box-model-maximize-height vlc-scroll-wrapper">
     <div class="vlc-scroll-wrapper__header">
       <div class="vlc-navbar vlc-navbar--bordered-bottom vlc-navbar--tabs vlc-navbar--tabs-bottom">
-        <div class="vl-tabs__wrapper">
-          <Agenda::Agendaitem::AgendaitemNav
-            @agendaitem={{this.model}}
-            @meetingIsConcluded={{this.meeting.isFinal}}
-          />
-        </div>
+        <Agenda::Agendaitem::AgendaitemNav
+          @agendaitem={{this.model}}
+          @meetingIsConcluded={{this.meeting.isFinal}}
+        />
       </div>
     </div>
     <div class="vlc-scroll-wrapper__body">

diff --git a/app/pods/components/agenda/agendaitem/agendaitem-nav/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-nav/template.hbs
@@ -1,68 +1,28 @@
-<ul class="vl-tabs auk-u-m-0" {{did-update this.checkExistance this.agendaitem}}>
-  <li class="vl-tab"  data-test-agenda-agendaitem-tab="agendaitem-case">
-    <LinkTo
-      class="vl-tab__link"
-      @route="agenda.agendaitems.agendaitem.index"
-      @activeClass="active"
-    >
-      {{capitalize (t "case")}}
-    </LinkTo>
-  </li>
-  <li class="vl-tab" data-test-agenda-agendaitem-tab="documents">
-    <LinkTo
-      class="vl-tab__link"
-      @route="agenda.agendaitems.agendaitem.documents"
-      @activeClass="active"
-    >
-      {{capitalize (t "documents")}}
-    </LinkTo>
-  </li>
+<WebComponents::AuTabs {{did-update this.checkExistance this.agendaitem}} data-test-agenda-agendaitem>
+  <WebComponents::AuTab @route="agenda.agendaitems.agendaitem.index" data-test-agenda-agendaitem-tab="agendaitem-case">{{capitalize (t "case")}}</WebComponents::AuTab>
+  <WebComponents::AuTab @route="agenda.agendaitems.agendaitem.documents" data-test-agenda-agendaitem-tab="documents">{{capitalize (t "documents")}}</WebComponents::AuTab>
   {{#if (not this.agendaitem.isApproval) }}
     {{#if
       (or
         this.currentSession.isEditor
         (and @meetingIsConcluded this.decisionsExist)
       )
     }}
-      <li class="vl-tab" data-test-agenda-agendaitem-tab="agendaitem-decision">
-        <LinkTo
-          class="vl-tab__link"
-          @route="agenda.agendaitems.agendaitem.decisions"
-          @activeClass="active"
-        >
-          {{capitalize (t "decision")}}
-        </LinkTo>
-      </li>
+      <WebComponents::AuTab @route="agenda.agendaitems.agendaitem.decisions" data-test-agenda-agendaitem-tab="agendaitem-decision">{{capitalize (t "decision")}}</WebComponents::AuTab>
     {{/if}}
     {{#if
       (or
       this.currentSession.isEditor
       (and @meetingIsConcluded this.newsItemExists))
     }}
-      <li class="vl-tab" data-test-agenda-agendaitem-tab="agendaitem-bestek">
-        <LinkTo
-          class="vl-tab__link"
-          @route="agenda.agendaitems.agendaitem.news-item"
-          @activeClass="active"
-        >
-          {{capitalize (t "newsletter")}}
-        </LinkTo>
-      </li>
+      <WebComponents::AuTab @route="agenda.agendaitems.agendaitem.news-item" data-test-agenda-agendaitem-tab="agendaitem-bestek">{{capitalize (t "newsletter")}}</WebComponents::AuTab>
     {{/if}}
     {{#if
       (or
       this.currentSession.isEditor
       (and @meetingIsConcluded this.pressAgendaitemExists))
     }}
-      <li class="vl-tab" data-test-agenda-agendaitem-tab="agendaitem-press-agenda">
-        <LinkTo
-          class="vl-tab__link"
-          @route="agenda.agendaitems.agendaitem.press-agenda"
-          @activeClass="active"
-        >
-          {{capitalize (t "agendaitem-press-agenda")}}
-        </LinkTo>
-      </li>
+      <WebComponents::AuTab @route="agenda.agendaitems.agendaitem.press-agenda" data-test-agenda-agendaitem-tab="agendaitem-press-agenda">{{capitalize (t "agendaitem-press-agenda")}}</WebComponents::AuTab>
     {{/if}}
   {{/if}}
-</ul>
+</WebComponents::AuTabs>
diff --git a/app/pods/components/m-header/template.hbs b/app/pods/components/m-header/template.hbs
@@ -3,56 +3,52 @@
   <div class="vlc-toolbar vlc-toolbar--auto vlc-toolbar--slide-in">
     <div class="vlc-toolbar__left">
       <div class="vlc-toolbar__item">
-        <ul class="vl-tabs auk-u-m-0">
+        <ul class="auk-tabs">
           {{#if hasPublicationsEnabled}}
-            <li class="vl-tab" data-test-m-header-publications>
+            <li class="auk-tabs__tab" data-test-m-header-publications>
               {{#link-to
                 "publications"
-                class="vl-tab__link"
               }}
-                {{t "publications"}}
+                <span class="auk-tabs__tab-inner">{{t "publications"}}</span>
               {{/link-to}}
             </li>
           {{/if}}
-          <li class="vl-tab" data-test-m-header-agendas>
+          <li class="auk-tabs__tab" data-test-m-header-agendas>
             {{#link-to
               "agendas.overview"
-              class="vl-tab__link"
               current-when="agendas agenda print-overviews.decisions print-overviews.press-agenda"
             }}
-              {{t "agendas"}}
+              <span class="auk-tabs__tab-inner">{{t "agendas"}}</span>
             {{/link-to}}
           </li>
-          <li class="vl-tab" data-test-m-header-cases>
-            {{#link-to "cases" class="vl-tab__link"}}
-              {{t "cases"}}
+          <li class="auk-tabs__tab" data-test-m-header-cases>
+            {{#link-to "cases"}}
+              <span class="auk-tabs__tab-inner">{{t "cases"}}</span>
             {{/link-to}}
           </li>
           {{#if currentSession.isViewer }}
-            <li class="vl-tab" data-test-m-header-newsletters>
+            <li class="auk-tabs__tab" data-test-m-header-newsletters>
               {{#link-to
                 "newsletters"
-                class="vl-tab__link"
                 current-when="newsletters newsletter print-overviews.newsletter"
               }}
-                {{t "newsletter"}}
+                <span class="auk-tabs__tab-inner">{{t "newsletter"}}</span>
               {{/link-to}}
             </li>
           {{/if}}
-          <li class="vl-tab" data-test-m-header-search>
+          <li class="auk-tabs__tab" data-test-m-header-search>
             <LinkTo
-              class="vl-tab__link"
               @route="search.index"
               @current-when="search"
             >
               {{!-- TODO: magnifying glass icon --}}
-              {{capitalize (t "search")}}
+              <span class="auk-tabs__tab-inner">{{capitalize (t "search")}}</span>
             </LinkTo>
           </li>
           {{#if currentSession.isEditor}}
-            <li class="vl-tab" data-test-m-header-settings>
-              {{#link-to "settings.overview" class="vl-tab__link"}}
-                {{t "settings"}}
+            <li class="auk-tabs__tab" data-test-m-header-settings>
+              {{#link-to "settings.overview"}}
+                <span class="auk-tabs__tab-inner">{{t "settings"}}</span>
               {{/link-to}}
             </li>
           {{/if}}

diff --git a/app/pods/search/template.hbs b/app/pods/search/template.hbs
@@ -109,31 +109,28 @@
       </div>
     </div>
 
-
-    <ul class="vl-tabs">
+    <ul class="auk-tabs auk-u-mb-6">
       {{!-- Page-number reset when clicking a search type. It is assumed that users don't want
             to go back and forth between search results for the different types while keeping the
             page-number. --}}
-      <li class="vl-tab">
+      <li class="auk-tabs__tab">
         <LinkTo
-          class="vl-tab__link"
           @route="search.agenda-items"
           @current-when="search.agenda-items"
           @activeClass="active"
           @query={{hash page=0}}
         >
-          {{t "agendaitems"}}
+          <span class="auk-tabs__tab-inner">{{t "agendaitems"}}</span>
         </LinkTo>
       </li>
-      <li class="vl-tab">
+      <li class="auk-tabs__tab">
         <LinkTo
-          class="vl-tab__link"
           @route="search.cases"
           @current-when="search.cases"
           @activeClass="active"
           @query={{hash page=0}}
         >
-          {{t "cases"}}
+          <span class="auk-tabs__tab-inner">{{t "cases"}}</span>
         </LinkTo>
       </li>
     </ul>

diff --git a/app/pods/settings/template.hbs b/app/pods/settings/template.hbs
@@ -6,34 +6,26 @@
         <div class="vlc-toolbar vlc-toolbar--auto">
           <div class="vlc-toolbar__left">
             <div class="vlc-toolbar__item">
-              <ul class="vlc-tabs-reverse" role="tablist">
-                <li class="vlc-tabs-reverse__item" data-test-settings-generalSettings>
+              <ul class="auk-tabs">
+                <li class="auk-tabs__tab" data-test-settings-generalSettings>
                   {{#link-to
                     "settings.overview"
-                    class="vl-tab__link border-left"
-                    activeClass="vl-tab__link--active"
-                    current-when="settings settings.overview"
                   }}
-                    {{t "general-settings"}}
+                    <span class="auk-tabs__tab-inner">{{t "general-settings"}}</span>
                   {{/link-to}}
                 </li>
-                <li class="vlc-tabs-reverse__item vlc-tabs-reverse__item--border-left"
-                    data-test-settings-manageMinisters>
+                <li class="auk-tabs__tab" data-test-settings-manageMinisters>
                   {{#link-to
                     "settings.ministers"
-                    class="vl-tab__link"
-                    activeClass="vl-tab__link--active"
                   }}
-                    {{t "manage-ministers"}}
+                    <span class="auk-tabs__tab-inner">{{t "manage-ministers"}}</span>
                   {{/link-to}}
                 </li>
-                <li class="vlc-tabs-reverse__item vlc-tabs-reverse__item--border-left" data-test-settings-manageUsers>
+                <li class="auk-tabs__tab" data-test-settings-manageUsers>
                   {{#link-to
                     "settings.users"
-                    class="vl-tab__link"
-                    activeClass="vl-tab__link--active"
                   }}
-                    {{t "manage-users"}}
+                    <span class="auk-tabs__tab-inner">{{t "manage-users"}}</span>
                   {{/link-to}}
                 </li>
               </ul>

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -42,7 +42,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/components/_pager';
 @import 'govflanders/components/_pill';
 @import 'govflanders/components/_radio';
-@import 'govflanders/components/_tabs';
 @import 'govflanders/components/_typography';
 @import 'govflanders/components/_upload';
 
@@ -61,7 +60,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/additions/_loader';
 @import 'govflanders/additions/_modal';
 @import 'govflanders/additions/_pill';
-@import 'govflanders/additions/_tabs';
 
 // Additions to existing utilities
 @import 'govflanders/additions/_background';

diff --git a/app/styles/custom-application/power-select.scss b/app/styles/custom-application/power-select.scss
@@ -154,63 +154,6 @@
   }
 }
 
-.vl-tab {
-  a {
-    .ember-power-select-trigger,
-    .ember-basic-dropdown-trigger {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: $blue-gray-lighter;
-      border: none;
-      background-size: 1.1rem;
-      height: auto !important;
-      line-height: 1em;
-      font-size: 1em;
-      padding-left: 0;
-      &:focus {
-        outline: none;
-        border-color: $blue-gray-lighter;
-        box-shadow: inset 0 0 0 0.1rem $blue-gray-lighter;
-      }
-    }
-  }
-}
-
-.vl-tab__link-header {
-  padding: 0.45rem;
-  .vl-tab__link:hover,
-  .vl-tab__link.active {
-    border-bottom: 0;
-  }
-}
-
-.vl-tab__link-header-dropdown {
-  padding: 1rem;
-
-  .ember-power-select-options[role='listbox'] {
-    overflow: hidden;
-  }
-  .ember-power-select-option {
-    padding: 1rem 0rem;
-    background-color: $page-bg;
-    color: $black;
-    border: none;
-    border-bottom: 1px solid $blue-gray-lighter;
-    text-decoration: none;
-    margin-left: 0.5rem;
-  }
-  .ember-power-select-option:hover {
-    color: #005e95;
-    text-decoration: none;
-    border-bottom: 1px solid #005e95;
-    background-image: url('/assets/right-arrow.svg');
-    background-repeat: no-repeat;
-    background-size: 11px 11px;
-    background-position: calc(100% - 1.5rem) 50%;
-  }
-}
-
 .ember-power-select-clear-btn {
   margin-right:0.2em;
   line-height: 1.2em;

diff --git a/app/styles/govflanders/additions/_tabs.scss b/app/styles/govflanders/additions/_tabs.scss