kanselarij-vlaanderen · MikiDi · Jul 5, 2021 · Jun 30, 2021 · Jun 30, 2021 · Jul 1, 2021
diff --git a/app/components/access-level-pill.hbs b/app/components/access-level-pill.hbs
@@ -4,13 +4,14 @@
   {{else}}
     {{#if (not @confidential)}}
       {{#if (not this.isEditing)}}
-        <span
-          class={{this.pillClass}}
+        <Auk::Pill
+          @skin={{this.pillSkin}}
+          class="auk-u-cursor-pointer"
           data-test-access-level-pill
           {{on "click" this.toggleEdit}}
         >
           {{this.accessLevelLabel}}
-        </span>
+        </Auk::Pill>
       {{else}}
         <div style="width:75%">
           <Utils::ModelSelector

diff --git a/app/components/access-level-pill.js b/app/components/access-level-pill.js
@@ -31,9 +31,7 @@ export default class AccessLevelPillComponent extends Component {
     return !this.args.confidential;
   }
 
-  get pillClass() {
-    const baseClass = 'auk-pill';
-    const classes = [baseClass, 'auk-u-cursor-pointer'];
+  get pillSkin() {
     let modifier;
     if (this.args.accessLevel) {
       switch (this.args.accessLevel.uri) {
@@ -47,11 +45,10 @@ export default class AccessLevelPillComponent extends Component {
           modifier = 'danger';
           break;
       }
-      if (modifier) {
-        classes.push(`${baseClass}--${modifier}`);
-      }
+    } else {
+      modifier = 'default';
     }
-    return classes.join(' ');
+    return modifier;
   }
 
   get accessLevelLabel() {

diff --git a/app/components/agenda/agenda-overview/agenda-overview-item.hbs b/app/components/agenda/agenda-overview/agenda-overview-item.hbs
@@ -157,12 +157,14 @@
               {{/if}}
             </div>
             {{#if this.subcase.confidential}}
-              <span class="vlc-agenda-items__confidentiality-button auk-pill auk-pill--danger" data-test-agenda-overview-item-confidentiality-locked>
-                <div class="auk-icon auk-icon--default vlc-agenda-items__icons">
-                  <i class="ki ki-lock-closed"></i>
-                </div>
+              <Auk::Pill
+                @skin="danger"
+                @icon="lock-closed"
+                class="auk-u-ml-2"
+                data-test-agenda-overview-item-confidentiality-locked
+              >
                 {{t "confidential"}}
-              </span>
+              </Auk::Pill>
             {{/if}}
           </div>
         </div>

diff --git a/app/components/agenda/agendaitem/agendaitem-news-item.hbs b/app/components/agenda/agendaitem/agendaitem-news-item.hbs
@@ -45,13 +45,13 @@
   <hr/>
   <div class="auk-u-mb-4 auk-u-mt-2">
     {{#if @newsletterInfo.finished}}
-      <div class="auk-pill auk-pill--success">
+      <Auk::Pill @skin="success">
         {{t "finished"}}
-      </div>
+      </Auk::Pill>
     {{else}}
-      <div class="auk-pill auk-pill--warning">
+      <Auk::Pill @skin="warning">
         {{t "not-finished"}}
-      </div>
+      </Auk::Pill>
     {{/if}}
   </div>
 </div>
diff --git a/app/components/agenda/agendaitem/agendaitem-press.hbs b/app/components/agenda/agendaitem/agendaitem-press.hbs
@@ -28,13 +28,13 @@
   <hr/>
   <div class="auk-u-mt-2">
     {{#if agendaitem.forPress}}
-      <div class="auk-pill auk-pill--success">
+      <Auk::Pill @skin="success">
         {{t "for-press"}}
-      </div>
+      </Auk::Pill>
     {{else}}
-      <div class="auk-pill auk-pill--warning">
+      <Auk::Pill @skin="warning">
         {{t "not-public-press"}}
-      </div>
+      </Auk::Pill>
     {{/if}}
   </div>
 {{else}}

diff --git a/app/components/decision/decision-result-pill.hbs b/app/components/decision/decision-result-pill.hbs
@@ -1,3 +1,3 @@
-<div class="auk-pill {{this.modifierClass}}">
+<Auk::Pill @skin={{this.skin}}>
   {{@decisionResultCode.label}}
-</div>
+</Auk::Pill>
diff --git a/app/components/decision/decision-result-pill.js b/app/components/decision/decision-result-pill.js
@@ -2,17 +2,17 @@ import Component from '@glimmer/component';
 import CONSTANTS from 'frontend-kaleidos/config/constants';
 
 export default class DecisionResultPill extends Component {
-  get modifierClass() {
+  get skin() {
     const codes = CONSTANTS.DECISION_RESULT_CODE_URIS;
     const selectedUri = this.args.decisionResultCode.get('uri');
     if (selectedUri === codes.GOEDGEKEURD) {
-      return 'auk-pill--success';
+      return 'success';
     } else if (selectedUri === codes.UITGESTELD) {
-      return 'auk-pill--warning';
+      return 'warning';
     }
     // } else if (selectedUri === codes.INGETROKKEN) {
-    //  return 'auk-pill--danger';
+    //  return 'danger';
     // }
-    return '';
+    return 'default';
   }
 }
diff --git a/app/components/publications/publication/translations/documents-upload-modal.hbs b/app/components/publications/publication/translations/documents-upload-modal.hbs
@@ -32,7 +32,7 @@
                 </div>
                 <div class="auk-form-group">
                   <Auk::Label>{{t "document-type"}}</Auk::Label>
-                  <Auk::Pill class="auk-pill--white">
+                  <Auk::Pill @skin="white">
                     {{this.translationDocument.file.extension}}
                   </Auk::Pill>
                 </div>

diff --git a/app/components/publications/publication/translations/translation-upload-modal.hbs b/app/components/publications/publication/translations/translation-upload-modal.hbs
@@ -31,7 +31,7 @@
                 </div>
                 <div class="auk-form-group">
                   <Auk::Label>{{t "document-type"}}</Auk::Label>
-                  <Auk::Pill class="auk-pill--white">
+                  <Auk::Pill @skin="white">
                     {{this.translationDocument.file.extension}}
                   </Auk::Pill>
                 </div>

diff --git a/app/components/subcase/subcase-case/subcase-titles.hbs b/app/components/subcase/subcase-case/subcase-titles.hbs
@@ -41,9 +41,12 @@
 {{#if (not subcase.showAsRemark)}}
   <div class="auk-u-mb-2">
     {{#if (await subcase.subcaseName)}}
-      <span class={{await pillClass}}>
+      <Auk::Pill
+        @skin={{await pillSkin}}
+        class="auk-u-text-capitalize"
+      >
         {{await subcase.subcaseName}}
-      </span>
+      </Auk::Pill>
     {{/if}}
   </div>
 {{/if}}

diff --git a/app/components/subcase/subcase-case/subcase-titles.js b/app/components/subcase/subcase-case/subcase-titles.js
@@ -10,17 +10,16 @@ export default class SubcaseTitles extends Component {
   subcase = null;
 
   @computed('subcase.approved')
-  get pillClass() {
-    return this.getPillClass();
+  get pillSkin() {
+    return this.getPillSkin();
   }
 
-  async getPillClass() {
-    const baseClass = 'auk-pill auk-u-text-capitalize';
+  async getPillSkin() {
     const approved = await this.subcase.get('approved');
     if (approved) {
-      return `${baseClass} auk-pill--success`;
+      return 'success';
     }
-    return `${baseClass} auk-pill--default`;
+    return 'default';
   }
 
   @action

diff --git a/app/styles/custom-components/_vlc-agenda-items.scss b/app/styles/custom-components/_vlc-agenda-items.scss
@@ -213,17 +213,6 @@ $i: 0;
   }
 }
 
-.vlc-agenda-items__confidentiality-button {
-  margin-left: 1rem;
-  align-items: center;
-  color: white;
-}
-
-.vlc-agenda-items__sub-item a:hover .vlc-agenda-items__confidentiality-button,
-.vlc-agenda-items__sub-item a:hover .vlc-agenda-items__confidentiality-button .vlc-agenda-items__icons {
-  color: white;
-}
-
 .vlc-agenda-items__text {
   width: 100%;
 }