Merge branch 'DES/enhancement/732-vlc-refactor/navbar-toolbar' into D…

…ES/enhancement/#732-vlc-refactor
kanselarij-vlaanderen · Apr 16, 2021 · 025679c · 025679c
2 parents 5646045 + cdfa8d3
commit 025679c
Show file tree

Hide file tree

Showing 60 changed files with 292 additions and 566 deletions.
diff --git a/app/components/access-level-pill.hbs b/app/components/access-level-pill.hbs
@@ -54,7 +54,7 @@
     {{/if}}
     <button
       type="button"
-      class="auk-button auk-button--muted-borderless auk-button--icon vlc-toolbar__item"
+      class="auk-button auk-button--muted-borderless auk-button--icon auk-toolbar-complex__item"
       disabled={{not this.session.isEditor}}
       {{on "click" (perform this.changeConfidentiality)}}
     >

diff --git a/app/components/agenda/agenda-detail/sidebar.hbs b/app/components/agenda/agenda-detail/sidebar.hbs
@@ -1,13 +1,13 @@
-<div class="vlc-toolbar vlc-agenda-detail-sidebar-section-header vlc-agenda-detail-sidebar-section-header--border-bottom">
-  <div class="vlc-toolbar__left">
-    <div class="vlc-toolbar__item">
+<div class="auk-toolbar-complex vlc-agenda-detail-sidebar-section-header vlc-agenda-detail-sidebar-section-header--border-bottom">
+  <div class="auk-toolbar-complex__left">
+    <div class="auk-toolbar-complex__item">
       <h3 class="auk-h3 auk-u-m-0 vlc-agenda-detail-sidebar-section-header__title">
         {{t "agendaitems-subtitle"}}
       </h3>
     </div>
   </div>
-  <div class="vlc-toolbar__right">
-    <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex__right">
+    <div class="auk-toolbar-complex__item">
       <WebComponents::AuButtonLink
         class="vlc-agenda-items-section-header__link"
         {{on "click" @toggleShowModifiedOnly}}

diff --git a/app/components/agenda/agenda-header.hbs b/app/components/agenda/agenda-header.hbs
@@ -1,6 +1,6 @@
-<div class="vlc-toolbar">
-  <div class="vlc-toolbar__left">
-    <div class="vlc-toolbar__item">
+<div class="auk-toolbar-complex">
+  <div class="auk-toolbar-complex__left">
+    <div class="auk-toolbar-complex__item">
       <h1 class="vlc-page-header__title auk-u-pb vlc-page-header__title--bordered"
           data-test-agenda-header-title>
         {{t "agenda-of"}}
@@ -12,9 +12,9 @@
         </span>
       </h1>
       <div class="vlc-page-header__sub">
-        <div class="vlc-toolbar vlc-toolbar--auto">
-          <div class="vlc-toolbar__left">
-            <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+          <div class="auk-toolbar-complex__left">
+            <div class="auk-toolbar-complex__item">
               {{!-- TODO: Fix this symbol into a custom icon based of the figma file --}}
               {{!-- template-lint-disable no-bare-strings  --}}
               <LinkTo @route="agendas.overview" class="vlc-backlink auk-button-link">
@@ -30,9 +30,9 @@
     </div>
   </div>
   {{#if currentSessionService.isViewer}}
-    <div class="vlc-toolbar__right">
+    <div class="auk-toolbar-complex__right">
       {{#if currentSessionService.isEditor}}
-        <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex__item">
           <button type="button"
             data-test-agenda-header-showAgendaOptions
             class="auk-button auk-button--primary"
@@ -140,7 +140,7 @@
           </button>
         </div>
       {{/if}}
-      <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__item">
         <button type="button"
           data-test-agenda-header-showActionOptions
           class="auk-button auk-button--secondary"

diff --git a/app/components/agenda/agenda-overview.hbs b/app/components/agenda/agenda-overview.hbs
@@ -6,24 +6,24 @@
       @clearAction={{this.toggleIsEditingOverview}}
     />
   {{/if}}
-  <div class="vlc-toolbar vlc-agenda-items-section-header">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex vlc-agenda-items-section-header">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <h3 class="auk-h3 auk-u-m-0 vlc-agenda-items-section-header__title">
           {{t "agendaitems-subtitle"}}
         </h3>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         <WebComponents::AuButtonLink
           class="vlc-agenda-items-section-header__link"
           {{on "click" @toggleShowModifiedOnly}}
         >
           {{if @showModifiedOnly (t "show-all") (t "show-changes")}}
         </WebComponents::AuButtonLink>
       </div>
-      <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__item">
         {{#if
           (and
             this.currentSessionService.isEditor

diff --git a/app/components/agenda/agendaitem-search.hbs b/app/components/agenda/agendaitem-search.hbs
@@ -1,8 +1,8 @@
 <div class="vlc-scroll-wrapper__header">
-  <div class="vlc-navbar vlc-navbar--bordered-bottom vlc-hide-on-print">
-    <div class="vlc-toolbar vlc-toolbar--auto">
-      <div class="vlc-toolbar__justified">
-        <div class="vlc-toolbar__item vlc-u-box-model-maximize-width">
+  <div class="auk-navbar auk-navbar--bordered-bottom vlc-hide-on-print">
+    <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item vlc-u-box-model-maximize-width">
           <div class="auk-form-group">
             <WebComponents::AuInput
               @icon="search"

diff --git a/app/components/agenda/agendaitem/create-agendaitem.hbs b/app/components/agenda/agendaitem/create-agendaitem.hbs
@@ -21,9 +21,9 @@
       <div class="auk-o-grid auk-u-flex--align-end auk-u-mb-2"
       >
         <div class="auk-o-grid-col-8">
-          <div class="vlc-toolbar vlc-toolbar--auto">
-            <div class="vlc-toolbar__justified custom-table-search">
-              <div class="vlc-toolbar__item" style="width:100%;">
+          <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+            <div class="auk-toolbar-complex__left custom-table-search">
+              <div class="auk-toolbar-complex__item" style="width:100%;">
                 <div class="vl-input-field--inline" data-test-vl-create-agendaitem-search>
                   {{input
                     value=filterParam

diff --git a/app/components/agenda/side-nav.hbs b/app/components/agenda/side-nav.hbs
@@ -1,16 +1,16 @@
 <nav class="vlc-side-nav">
   <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">
-        <div class="vlc-toolbar">
-          <div class="vlc-toolbar__left">
+      <div class="auk-navbar auk-navbar--bordered-bottom">
+        <div class="auk-toolbar-complex">
+          <div class="auk-toolbar-complex__left">
             <h2 class="auk-h4">
               <span>
                 {{t "nav-title"}}
               </span>
             </h2>
           </div>
-          <div class="vlc-toolbar__right">
+          <div class="auk-toolbar-complex__right">
             {{#if agendaMenuOpened}}
               <button type="button" class="auk-button auk-button--borderless auk-button--icon default"
                 {{action "collapseSideMenu"}}>

diff --git a/app/components/cases/cases-header.hbs b/app/components/cases/cases-header.hbs
@@ -1,14 +1,14 @@
 {{#if (not isAddingCase)}}
-  <div class="vlc-toolbar vlc-toolbar--auto">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <h1 class="vlc-page-header__title auk-u-pb" data-test-cases-header-title>
           {{t "cases"}}
         </h1>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__item">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__item">
         {{#if currentSession.isEditor}}
           <button type="button"
             data-test-cases-header-add-case

diff --git a/app/components/cases/new-case.hbs b/app/components/cases/new-case.hbs
@@ -17,19 +17,19 @@
       {{textarea class="auk-textarea" rows="2" value=shortTitle}}
     </div>
   </div>
-  <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-    <div class="vlc-toolbar">
-      <div class="vlc-toolbar__left">
-        <div class="vlc-toolbar__item">
+  <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+    <div class="auk-toolbar-complex">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item">
           <button type="button" data-test-vl-modal-footer-cancel
                   class="auk-button auk-button--borderless"
             {{action "closeAction"}}>
             {{t "cancel"}}
           </button>
         </div>
       </div>
-      <div class="vlc-toolbar__right">
-        <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__right">
+        <div class="auk-toolbar-complex__item">
           {{web-components/vl-save-button
             text=(t "create-case")
             type="submit"

diff --git a/app/components/cases/new-subcase.hbs b/app/components/cases/new-subcase.hbs
@@ -97,10 +97,10 @@
       </div>
     </div>
   </div>
-  <div class="vlc-navbar vlc-navbar--white vlc-navbar--bordered-top">
-    <div class="vlc-toolbar">
-      <div class="vlc-toolbar__left">
-        <div class="vlc-toolbar__item">
+  <div class="auk-navbar auk-navbar--white auk-navbar--bordered-top">
+    <div class="auk-toolbar-complex">
+      <div class="auk-toolbar-complex__left">
+        <div class="auk-toolbar-complex__item">
           <button type="button"
             class="auk-button auk-button--borderless"
             {{action "closeModal"}}
@@ -109,8 +109,8 @@
           </button>
         </div>
       </div>
-      <div class="vlc-toolbar__right">
-        <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__right">
+        <div class="auk-toolbar-complex__item">
           {{web-components/vl-save-button
             text=(t "new-subcase")
             type="submit"

diff --git a/app/components/documents/document-card.hbs b/app/components/documents/document-card.hbs
@@ -5,9 +5,9 @@
   <div class="vlc-document-card" data-test-document-card>
     <div class="vlc-document-card__summary">
       <div class="vlc-document-card__content">
-        <div class="vlc-toolbar vlc-toolbar--auto">
-          <div class="vlc-toolbar__left">
-            <div class="vlc-toolbar__item">
+        <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+          <div class="auk-toolbar-complex__left">
+            <div class="auk-toolbar-complex__item">
               <p class="vlc-subline vlc-document-card__subline">
                 {{#unless this.loadPieceRelatedData.isRunning}}
                   {{this.documentContainer.type.label}}
@@ -16,7 +16,7 @@
             </div>
           </div>
           <div class="vlc-document-card-toolbar__right">
-            <div class="vlc-toolbar__item auk-u-flex">
+            <div class="auk-toolbar-complex__item auk-u-flex">
               {{#unless this.loadPieceRelatedData.isRunning}}
                 <AccessLevelPill
                   @accessLevel={{this.accessLevel}}
@@ -28,7 +28,7 @@
                 />
               {{/unless}}
             </div>
-            <div class="vlc-toolbar__item">
+            <div class="auk-toolbar-complex__item">
               {{#if this.currentSession.isEditor}}
                 <button
                   class="auk-button auk-button--borderless auk-button--icon"

diff --git a/app/components/documents/linked-document-link.hbs b/app/components/documents/linked-document-link.hbs
@@ -8,16 +8,16 @@
       </div>
     </div>
     <div class="vlc-document-card__content">
-      <div class="vlc-toolbar vlc-toolbar--auto">
-        <div class="vlc-toolbar__left">
-          <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+        <div class="auk-toolbar-complex__left">
+          <div class="auk-toolbar-complex__item">
             <p class="vlc-subline" data-test-linkeddocument-type-label>
               {{@documentContainer.type.label}}
             </p>
           </div>
         </div>
         <div class="vlc-document-card-toolbar__right">
-          <div class="vlc-toolbar__item">
+          <div class="auk-toolbar-complex__item">
             {{#if this.lastPiece}}
               <AccessLevelPill
                 @accessLevel={{this.accessLevel}}
@@ -29,7 +29,7 @@
               />
             {{/if}}
           </div>
-          <div class="vlc-toolbar__item">
+          <div class="auk-toolbar-complex__item">
             {{#if currentSession.isEditor}}
               <button class="auk-button auk-button--muted-borderless auk-button--icon"
                 type="button"

diff --git a/app/components/m-header.hbs b/app/components/m-header.hbs
@@ -1,8 +1,8 @@
-<div class="vlc-navbar vlc-navbar--bordered-bottom vlc-navbar--no-padding vlc-navbar--bg-alt vlc-navbar--auto"
+<div class="auk-navbar auk-navbar--bordered-bottom auk-navbar--no-pad auk-navbar--auto l-main-header"
      id="c-main-nav">
-  <div class="vlc-toolbar vlc-toolbar--auto vlc-toolbar--slide-in">
-    <div class="vlc-toolbar__left">
-      <div class="vlc-toolbar__item">
+  <div class="auk-toolbar-complex auk-toolbar-complex--auto l-main-header__toolbar">
+    <div class="auk-toolbar-complex__left">
+      <div class="auk-toolbar-complex__item">
         <ul class="auk-tabs">
           {{#if hasPublicationsEnabled}}
             <li class="auk-tabs__tab" data-test-m-header-publications>
@@ -55,16 +55,16 @@
         </ul>
       </div>
     </div>
-    <div class="vlc-toolbar__right">
-      <div class="vlc-toolbar__right">
+    <div class="auk-toolbar-complex__right">
+      <div class="auk-toolbar-complex__right">
         {{#if showEnvironmentName}}
           <div class="vlc-environment-pill {{environmentClass}}">
             {{environmentName}}
             {{capitalize (t "environment")}}
           </div>
         {{/if}}
       </div>
-      <div class="vlc-toolbar__item">
+      <div class="auk-toolbar-complex__item">
         {{#if currentSession.userContent}}
           <div class="vlc-user">
             <div class="vlc-user__username">

diff --git a/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs b/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs
@@ -102,8 +102,8 @@
       </table>
     </div>
   </div>
-  <div class="vlc-toolbar vlc-toolbar--auto">
-    <div class="vlc-toolbar__left">
+  <div class="auk-toolbar-complex auk-toolbar-complex--auto">
+    <div class="auk-toolbar-complex__left">
       <button
         type="button"
         data-test-mandatee-panel-edit-add-mandatee
@@ -118,7 +118,7 @@
         </div>
       </button>
     </div>
-    <div class="vlc-toolbar__right">
+    <div class="auk-toolbar-complex__right">
       <WebComponents::AuToolbar>
         <WebComponents::AuToolbar::Group @position="right">
           <WebComponents::AuToolbar::Item>

diff --git a/app/components/navbar.hbs b/app/components/navbar.hbs
diff --git a/app/components/navbar.js b/app/components/navbar.js