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

…css-refactor # Conflicts: # app/styles/app.scss
kanselarij-vlaanderen · Mar 26, 2021 · 5d5029e · 5d5029e
2 parents aff5f35 + 153ae5b
commit 5d5029e
Show file tree

Hide file tree

Showing 279 changed files with 2,735 additions and 4,687 deletions.
diff --git a/app/components/access-level-pill.hbs b/app/components/access-level-pill.hbs
@@ -1,6 +1,6 @@
 <div class="auk-u-flex auk-u-flex--vertical-center">
   {{#if this.isLoading}}
-    <div class="vl-loader" role="alert" aria-busy="true"></div>
+    <div class="auk-loader" role="alert" aria-busy="true"></div>
   {{else}}
     {{#if (not @confidential)}}
       {{#if (not this.isEditing)}}
@@ -27,30 +27,34 @@
         </div>
         <button
           type="button"
-          class="vl-button vl-button--link vl-button--icon"
+          class="auk-button auk-button--borderless auk-button--icon"
           data-test-access-level-save
           {{on "click" (perform this.confirmChangeAccessLevel @accessLevel)}}
         >
-          <i class="ki-check vl-button__icon" aria-hidden="true"></i>
-          <span class="vl-u-visually-hidden">
+          <div class="auk-icon auk-icon--default">
+            <i class="ki ki-check"></i>
+          </div>
+          <div class="auk-u-sr-only">
             {{t "more-options"}}
-          </span>
+          </div>
         </button>
         <button
           type="button"
-          class="vl-button vl-button--link vl-button--icon"
+          class="auk-button auk-button--borderless auk-button--icon"
           {{on "click" (perform this.cancelChangeAccessLevel)}}
         >
-          <i class="ki-cross vl-button__icon" aria-hidden="true"></i>
-          <span class="vl-u-visually-hidden">
+          <div class="auk-icon auk-icon--default">
+            <i class="ki ki-cross"></i>
+          </div>
+          <div class="auk-u-sr-only">
             {{t "more-options"}}
-          </span>
+          </div>
         </button>
       {{/if}}
     {{/if}}
     <button
       type="button"
-      class="vl-button vl-button--link-muted vl-button--icon vlc-toolbar__item"
+      class="auk-button auk-button--muted-borderless auk-button--icon vlc-toolbar__item"
       disabled={{not this.session.isEditor}}
       {{on "click" (perform this.changeConfidentiality)}}
     >
@@ -60,10 +64,9 @@
             {{t "document-is-confidential"}}
           </p>
         </EmberTooltip>
-        <i class="vl-icon ki-lock-closed vl-u-text--error"
-        ></i>
+        <WebComponents::AuIcon @name="lock-closed" @iconSkinColor="danger" />
       {{else}}
-        <i class="vl-icon ki-lock-open"></i>
+        <WebComponents::AuIcon @name="lock-open" />
       {{/if}}
     </button>
   {{/if}}

diff --git a/app/components/agenda/agenda-decisions.hbs b/app/components/agenda/agenda-decisions.hbs
@@ -1,6 +1,6 @@
 <div class="vlc-container-center">
   <div class="auk-u-mt-8 no-print">
-    <h3 class="vl-title vl-title--h3" data-test-print-overview-decisions-title>
+    <h3 class="auk-h2" data-test-print-overview-decisions-title>
       {{await title}}
       <br/>
     </h3>
@@ -17,7 +17,7 @@
                  alt={{t "flemish-government"}}
             />
 
-            <p class="auk-u-text-bold vl-u-text--capitalized">
+            <p class="auk-u-text-bold auk-u-text-capitalized">
               {{await title}}
             </p>
             <hr class="vlc-hr"/>
@@ -26,7 +26,7 @@
         <div style="page-break-after:always;">
           <div class="auk-u-mb-8">
             <div class="auk-u-mb-2">
-              <h3 class="vl-title vl-title--h5">
+              <h3 class="auk-h4">
                 {{agendaitem.number}}
                 .
                 {{agendaitem.shortTitle}}
@@ -35,7 +35,7 @@
                 {{agendaitem.title}}
               </pre>
             </div>
-            <div class="vl-typography">
+            <div class="auk-content">
               <ul>
                 {{#if (gt agendaitem.treatments.length 0)}}
                   {{#each (await agendaitem.treatments) as |treatment|}}
@@ -49,7 +49,7 @@
                     {{else if session.isEditor}}
                       <div class="auk-u-flex auk-u-flex--vertical-center auk-u-flex--align-end">
                         {{#if allowEditing}}
-                          <a href="" class="vl-link"
+                          <a href="" class="auk-button-link"
                             {{action "toggleIsEditing" treatment}}
                           >
                             {{t "edit"}}
@@ -60,13 +60,13 @@
                   {{/each}}
                 {{else}}
                   <li>
-                    <p class="vl-u-text--muted">
+                    <p class="auk-u-muted">
                       {{t "no-decision"}}
                     </p>
                   </li>
                 {{/if}}
               </ul>
-              <p class="vl-u-text--capitalize">
+              <p class="auk-u-text-capitalize">
                 {{!-- KAS-1420 await nodig ? --}}
                 {{agendaitem.agendaActivity.subcase.subcaseName}}
               </p>

diff --git a/app/components/agenda/agenda-detail/sidebar-item.hbs b/app/components/agenda/agenda-detail/sidebar-item.hbs
@@ -16,7 +16,7 @@
     </span>
     <div class="vlc-agenda-detail-sidebar__text-container">
       <h4 class="vlc-agenda-detail-sidebar__subject">
-        <pre class="vl-u-text-color-agenda-list">
+        <pre class="auk-u-text-pre-line">
           {{#if @agendaitem.shortTitle}}
             {{@agendaitem.shortTitle}}
           {{else}}
@@ -40,8 +40,8 @@
             <div class="auk-u-flex auk-u-flex--align-end vlc-agenda-detail-sidebar-item__icon">
               {{#if this.renderDetails}}
                 {{#if (await @agendaitem.checkAdded)}}
-                  <span class="added-tag vlc-agenda-meta__recently-added">
-                    <i class="ki-calendar-plus"></i>
+                  <span class="vlc-agenda-meta__recently-added">
+                    <WebComponents::AuIcon @name="calendar-plus" @size="small" />
                     <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                       <p>
                         {{t "added-agendaitem-text"}}
@@ -51,8 +51,8 @@
                 {{/if}}
 
                 {{#if (not newsletterInfo.inNewsletter)}}
-                  <span class="added-tag vlc-agenda-meta__recently-added">
-                    <i class="ki-hide vlc-agenda-detail-sidebar-item__icon--margin-right vlc-u-opacity-50"></i>
+                  <span class="vlc-agenda-meta__recently-added">
+                    <WebComponents::AuIcon @name="hide" @size="small" />
                     <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                       <p>
                         {{t "not-visible-in-newsletter"}}
@@ -62,10 +62,9 @@
                 {{/if}}
 
                 {{#if (await subcase.confidential)}}
-                  <i
-                    class="vl-icon ki-lock-closed vlc-u-opacity-50"
-                    data-test-icon-agenda-confidentiality-locked
-                  ></i>
+                  <span>
+                    <WebComponents::AuIcon @name="lock-closed" @size="small" data-test-icon-agenda-confidentiality-locked />
+                  </span>
                 {{/if}}
               {{/if}}
             </div>

diff --git a/app/components/agenda/agenda-detail/sidebar.hbs b/app/components/agenda/agenda-detail/sidebar.hbs
@@ -1,7 +1,7 @@
 <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">
-      <h3 class="vl-title--h3 vlc-agenda-detail-sidebar-section-header__title">
+      <h3 class="auk-h3 auk-u-m-0 vlc-agenda-detail-sidebar-section-header__title">
         {{t "agendaitems-subtitle"}}
       </h3>
     </div>
@@ -75,13 +75,13 @@
 
 {{#if (not selectedAgendaitem)}}
   <div class="vlc-agenda-detail-sidebar-section-header">
-    <h3 class="vl-title--h3 vlc-agenda-detail-sidebar-section-header__title">
+    <h3 class="auk-h3 auk-u-m-0 vlc-agenda-detail-sidebar-section-header__title">
       {{t "announcements-subtitle"}}
     </h3>
   </div>
 {{else}}
   <div class="vlc-agenda-detail-sidebar-section-header vlc-agenda-detail-sidebar-section-header--border-bottom">
-    <h3 class="vl-title--h3 vlc-agenda-detail-sidebar-section-header__title">
+    <h3 class="auk-h3 auk-u-m-0 vlc-agenda-detail-sidebar-section-header__title">
       {{t "announcements-subtitle"}}
     </h3>
   </div>