Merge pull request #783 from kanselarij-vlaanderen/DES/enhancement/#705…

…-vl-refactor VL-refactor (CSS)
kanselarij-vlaanderen · Apr 8, 2021 · fac423d · fac423d
2 parents a69d989 + 730f0a8
commit fac423d
Show file tree

Hide file tree

Showing 280 changed files with 2,733 additions and 4,680 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
@@ -22,7 +22,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}}
@@ -34,7 +34,7 @@
         {{#unless @isActive}}
           {{#if (not @agendaitem.isApproval)}}
             {{#if @agendaitem.shortTitle}} {{!-- Avoid rendering the same thing twice if no "shortTitle" exists --}}
-              <pre class="vl-u-text">
+              <pre class="auk-u-text-pre-line">
                 {{@agendaitem.title}}
               </pre>
             {{/if}}
@@ -45,8 +45,8 @@
           <div class="auk-u-flex auk-u-flex--justify-between">
             <div class="auk-u-flex auk-u-flex--align-end vlc-agenda-detail-sidebar-item__icon">
               {{#if @isNew}}
-                <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"}}
@@ -57,8 +57,8 @@
 
               {{#if this.loadNewsletterVisibility.lastSuccessful}}
                 {{#if (not this.newsletterIsVisible)}}
-                  <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"}}
@@ -86,10 +86,9 @@
               {{/if}}
 
               {{#if this.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="true"/>
+                </span>
               {{/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>
@@ -44,8 +44,9 @@
     <WebComponents::AuLoadingPage/>
   {{/if}}
 </div>
+
 <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>