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

…ent/#705-vl-refactor # Conflicts: # app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs # app/styles/custom-components/_vlc-side-nav.scss
kanselarij-vlaanderen · Mar 8, 2021 · f10b113 · f10b113
2 parents a76bfac + 1886a3b
commit f10b113
Show file tree

Hide file tree

Showing 17 changed files with 28 additions and 77 deletions.
diff --git a/app/pods/components/access-level-pill/template.hbs b/app/pods/components/access-level-pill/template.hbs
@@ -60,10 +60,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/pods/components/agenda/agenda-detail/sidebar-item/template.hbs b/app/pods/components/agenda/agenda-detail/sidebar-item/template.hbs
@@ -62,10 +62,7 @@
                 {{/if}}
 
                 {{#if (await subcase.confidential)}}
-                  <i
-                    class="vl-icon ki-lock-closed vlc-u-opacity-50"
-                    data-test-icon-agenda-confidentiality-locked
-                  ></i>
+                  <WebComponents::AuIcon @name="lock-closed" data-test-icon-agenda-confidentiality-locked />
                 {{/if}}
               {{/if}}
             </div>

diff --git a/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs b/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs
@@ -205,9 +205,9 @@
                   </div>
                   {{#if subcase.confidential}}
                     <span type="button" class="vlc-agenda-items__confidentiality-button vlc-pill vlc-pill--error">
-                      <i class="vl-icon ki-lock-closed vlc-agenda-items__icons"
-                         data-test-icon-agenda-confidentiality-locked
-                      ></i>
+                      <div class="auk-icon auk-icon--default vlc-agenda-items__icons" data-test-icon-agenda-confidentiality-locked>
+                        <i class="ki ki-lock-closed"></i>
+                      </div>
                       {{t "confidential"}}
                     </span>
                   {{/if}}

diff --git a/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs
@@ -47,21 +47,15 @@
             <td>
               {{#if (not isEditing)}}
                 {{#if (await mandateeApproval.approval)}}
-                  <p class="vl-icon-wrapper vl-u-text--success">
-                    <span class="vl-icon vl-icon--before ki-check" aria-hidden="true"></span>
-                    <span class="vl-annotation">
-                      {{t "approval-mandatee"}}
-                    </span>
-                  </p>
+                  <WebComponents::AuIcon @name="check" @iconSkinColor="success" />
+                  <span class="vl-annotation vl-u-text--success">
+                    {{t "approval-mandatee"}}
+                  </span>
                 {{else}}
-                  <p class="vl-icon-wrapper auk-u-muted">
-                    <i class="vl-icon vl-icon--before ki-remove"
-                          aria-hidden="true"
-                    ></i>
-                    <span>
-                      {{t "not-yet-approval-mandatee"}}
-                    </span>
-                  </p>
+                  <WebComponents::AuIcon @name="remove" @iconSkinColor="muted" />
+                  <span class="auk-u-muted">
+                    {{t "not-yet-approval-mandatee"}}
+                  </span>
                 {{/if}}
               {{else}}
                 <div class="vlc-input-field-block">

diff --git a/app/pods/components/documents/document-card/template.hbs b/app/pods/components/documents/document-card/template.hbs
@@ -87,7 +87,7 @@
               "vlc-document-list__item vlc-document-list__item--active"
             }}"
           >
-            <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium vl-icon-wrapper">
+            <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium">
               <i class="vl-badge__icon ki-document" aria-hidden="true"></i>
             </div>
           </div>

diff --git a/app/pods/components/documents/linked-document-link/template.hbs b/app/pods/components/documents/linked-document-link/template.hbs
@@ -1,7 +1,7 @@
 <div class="vlc-document-card auk-u-mb-2" data-test-document-card>
   <div class="vlc-document-card__summary">
     <div class="vlc-document-card__badge">
-      <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium vl-icon-wrapper">
+      <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium">
         <i class="vl-badge__icon ki-document" aria-hidden="true"></i>
       </div>
     </div>
@@ -33,8 +33,7 @@
                 type="button"
                 {{on "click" this.deletePieceLink}}
               >
-                <i class="vl-icon ki-link-broken vl-u-text--error"
-                ></i>
+                <WebComponents::AuIcon @name="link-broken" @iconSkinColor="danger" />
               </button>
             {{/if}}
           </div>

diff --git a/app/pods/components/subcase/subcase-case/subcase-titles/template.hbs b/app/pods/components/subcase/subcase-case/subcase-titles/template.hbs
@@ -51,11 +51,9 @@
     data-test-agenda-subcasehidden-pill
   >
     {{#if (await subcase.confidential)}}
-      <i class="vlc-pill vl-icon vlc-pill--error ki-lock-closed"></i>
+      <WebComponents::AuPill @skin="danger" @layout="icon-only" @icon="lock-closed"/>
     {{else}}
-      <i
-        class="vlc-pill auk-u-mr-2 vl-icon vlc-pill--success ki-lock-open"
-      ></i>
+      <WebComponents::AuPill @skin="success" @layout="icon-only" @icon="lock-open"/>
     {{/if}}
   </div>
 </div>
diff --git a/app/pods/components/subcases/subcase-item/template.hbs b/app/pods/components/subcases/subcase-item/template.hbs
@@ -1,9 +1,9 @@
 <div class="vlc-procedure-step__badge-wrapper">
   {{#if (is-pending subcase.approved)}}
-    <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium vl-icon-wrapper vl-icon-wrapper-loading"
+    <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium"
     ></div>
   {{else if (await subcase.approved)}}
-    <div class="vl-badge vl-badge--icon vl-badge--success vlc-procedure-step__badge vl-badge--alt vl-badge--small-medium vl-icon-wrapper"
+    <div class="vl-badge vl-badge--icon vl-badge--success vlc-procedure-step__badge vl-badge--alt vl-badge--small-medium"
     >
       <i class="vl-badge__icon ki-check" aria-hidden="true"></i>
     </div>

diff --git a/app/pods/components/utils/pieces-list-for-item/template.hbs b/app/pods/components/utils/pieces-list-for-item/template.hbs
@@ -25,8 +25,8 @@
   </div>
   {{#if this.moreThan20}}
     <button class="vlc-document-show-more-button" type="button" {{action "toggleShowingAll"}}>
-      <i class="{{if isShowingAll "ki-remove" "ki-plus"}} vl-icon vlc-document-show-more-button__icon "/>
-      <p  class="vlc-document-show-more-button__text">
+      <WebComponents::AuIcon @name={{if isShowingAll "remove" "plus"}} />
+      <p class="vlc-document-show-more-button__text auk-u-ml">
         {{#if isShowingAll }}
           {{t "show-less"}}
         {{else}}

diff --git a/app/pods/components/utils/pieces-list-lazy-loaded/template.hbs b/app/pods/components/utils/pieces-list-lazy-loaded/template.hbs
@@ -21,8 +21,8 @@
 </div>
 {{#if this.moreThan20}}
   <button class="vlc-document-show-more-button" type="button" {{action "toggleShowingAll"}}>
-    <i class="{{if this.isShowingAll "ki-remove" "ki-plus"}} vl-icon vlc-document-show-more-button__icon "/>
-    <p  class="vlc-document-show-more-button__text">
+    <WebComponents::AuIcon @name={{if this.isShowingAll "remove" "plus"}} />
+    <p class="vlc-document-show-more-button__text">
       {{#if this.isShowingAll }}
         {{t "show-less"}}
       {{else}}

diff --git a/app/pods/components/web-components/vl-document/template.hbs b/app/pods/components/web-components/vl-document/template.hbs
@@ -70,7 +70,7 @@
       </div>
     {{/if}}
     <div class="vlc-document-card-item__icon">
-      <i class="vl-icon vl-icon--large ki-timeline" aria-hidden="true"></i>
+      <WebComponents::AuIcon @name="timeline" @size="large" />
     </div>
     {{#if this.isVerifyingDelete}}
       <WebComponents::VlModalVerify

diff --git a/app/pods/components/web-components/vl-mandatee-link/template.hbs b/app/pods/components/web-components/vl-mandatee-link/template.hbs
@@ -1,5 +1,5 @@
 <div class="auk-u-mr-2">
-  <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium vl-icon-wrapper"
+  <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium"
   >
     <i class="vl-badge__icon ki-user" aria-hidden="true"></i>
   </div>

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -32,7 +32,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/components/_document';
 @import 'govflanders/components/_form-message';
 @import 'govflanders/components/_form-structure';
-@import 'govflanders/components/_icon';
 @import 'govflanders/components/_input-addon';
 @import 'govflanders/components/_input-field';
 @import 'govflanders/components/_input-group';

diff --git a/app/styles/custom-application/loader.scss b/app/styles/custom-application/loader.scss
@@ -5,8 +5,3 @@
   height: $base-font-size;
   width: 100px;
 }
-
-.vl-icon-wrapper-loading {
-  display: flex;
-  align-items: center;
-}
diff --git a/app/styles/custom-components/_vlc-document-card.scss b/app/styles/custom-components/_vlc-document-card.scss
@@ -55,7 +55,7 @@
 .vlc-document-card-item__icon {
   position: absolute;
   left: -4rem;
-  top: 0.3rem;
+  top: 0.6rem;
   color: $primary-blue;
 }
 

diff --git a/app/styles/custom-components/_vlc-side-nav.scss b/app/styles/custom-components/_vlc-side-nav.scss
@@ -12,15 +12,6 @@
     align-items: center;
     margin-right: .8rem;
     margin-bottom: 0;
-
-    .vl-icon {
-      &:before {
-        position: relative;
-        top: 2.2px;
-      }
-      font-size: 1.8rem;
-      margin-right: .4rem;
-    }
   }
 
   // Small fix to center icon in toggle

diff --git a/app/styles/govflanders/components/_icon.scss b/app/styles/govflanders/components/_icon.scss