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

…hancement/#705-vl-refactor # Conflicts: # app/pods/components/agenda/agenda-header/template.hbs
kanselarij-vlaanderen · Mar 8, 2021 · 4db5266 · 4db5266
2 parents 26858d2 + cc78d2a
commit 4db5266
Show file tree

Hide file tree

Showing 113 changed files with 3,420 additions and 212 deletions.
diff --git a/app/pods/auk-styleguide/typography/route.js b/app/pods/auk-styleguide/typography/route.js
@@ -14,15 +14,11 @@ export default class TypographyRoute extends Route.extend(AuthenticatedRouteMixi
       },
       {
         name: 'Heading 3',
-        code: '<h3 class="auk-h3">A third level heading</h2>',
+        code: '<h3 class="auk-h3">A third level heading</h3>',
       },
       {
         name: 'Heading 4',
-        code: '<h4 class="auk-h4">A fourth level heading</h2>',
-      },
-      {
-        name: 'Heading 5',
-        code: '<h5 class="auk-h5">A fourth level heading</h2>',
+        code: '<h4 class="auk-h4">A fourth level heading</h4>',
       },
       {
         name: 'Overline',

diff --git a/app/pods/auk-styleguide/typography/template.hbs b/app/pods/auk-styleguide/typography/template.hbs
@@ -1,15 +1,45 @@
 {{!-- template-lint-disable  --}}
 <ComponentPageIntro @title="Typography" />
 
-<table class="br-type-sample-table">
-  {{#each model as |typeStyle|}}
-    <tr>
-      <TypeSample
-              @title="{{typeStyle.name}}"
-              @code='{{{typeStyle.code}}}
-        '>
-        {{{typeStyle.code}}}
-      </TypeSample>
-    </tr>
-  {{/each}}
-</table>
+<div class="br-styleguide-sample">
+  <div class="auk-content">
+    <h3>Individual styling</h3>
+  </div>
+
+  <table class="br-type-sample-table">
+    {{#each model as |typeStyle|}}
+      <tr>
+        <TypeSample
+                @title="{{typeStyle.name}}"
+                @code='{{{typeStyle.code}}}
+          '>
+          {{{typeStyle.code}}}
+        </TypeSample>
+      </tr>
+    {{/each}}
+  </table>
+</div>
+
+<div class="br-styleguide-sample">
+  <div class="auk-content">
+    <h3>Content styling</h3>
+  </div>
+
+  <div class="br-styleguide-sample__sample">
+    <div class="auk-content">
+      <h1>A first level heading</h1>
+      <h2>A second level heading</h2>
+      <h3>A third level heading</h3>
+      <h4>A fourth level heading</h4>
+      <p>This is body text where we show a bit more content in a paragraph. It contains <strong>bold</strong> and <em>italic</em> text.</p>
+      <p>
+        <small>This is smaller body text where we show a bit more content in a paragraph. It contains <strong>bold</strong> and <em>italic</em> text.</small>
+      </p>
+      <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/app/pods/components/agenda/agenda-decisions/template.hbs b/app/pods/components/agenda/agenda-decisions/template.hbs
@@ -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|}}
@@ -60,7 +60,7 @@
                   {{/each}}
                 {{else}}
                   <li>
-                    <p class="vl-u-text--muted">
+                    <p class="auk-u-muted">
                       {{t "no-decision"}}
                     </p>
                   </li>

diff --git a/app/pods/components/agenda/agenda-header/template.hbs b/app/pods/components/agenda/agenda-header/template.hbs
@@ -7,7 +7,7 @@
         {{moment-format currentSession.plannedStart "DD MMMM YYYY"}}
         {{t "at"}}
         {{moment-format currentSession.plannedStart "HH:mm"}}
-        <span class="vlc-page-header__subtitle vl-u-text vl-u-text--muted" style="font-size:1.6rem;">
+        <span class="vlc-page-header__subtitle vl-u-text auk-u-muted" style="font-size:1.6rem;">
           - {{await currentSession.kindToShow.label}}
         </span>
       </h1>
@@ -119,7 +119,7 @@
                         {{t "agenda-delete"}}
                       </a>
                     </li>
-                    
+
                   {{/if}}
                   {{#if (await canReopenPreviousAgenda)}}
                     <li class="vlc-dropdown-menu__separator" aria-hidden="true"></li>
@@ -478,7 +478,7 @@
     <WebComponents::AuModal::Body>
       {{#if (await this.currentSession.latestAgenda.isDesignAgenda)}}
         <WebComponents::AuAlert
-          @skin="error" 
+          @skin="error"
           @message={{t
             "agenda-design-delete-message"
             agenda=this.currentSession.latestAgenda.agendaName
@@ -512,7 +512,7 @@
     <WebComponents::AuModal::Body>
       {{#if (eq this.agendas.length 1)}}
         <WebComponents::AuAlert
-          @skin="error" 
+          @skin="error"
           @message={{t "delete-final-agenda-and-meeting"}}
         />
       {{/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
@@ -54,7 +54,7 @@
                     </span>
                   </p>
                 {{else}}
-                  <p class="vl-icon-wrapper vl-u-text--muted">
+                  <p class="vl-icon-wrapper auk-u-muted">
                     <i class="vl-icon vl-icon--before ki-remove"
                           aria-hidden="true"
                     ></i>

diff --git a/app/pods/components/agenda/agendaitem/agendaitem-decision/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-decision/template.hbs
@@ -1,5 +1,5 @@
 {{#if (not this.isEditing)}}
-  <div data-test-decision-container class="auk-u-mb-4 vl-typography">
+  <div data-test-decision-container class="auk-u-mb-4 auk-content">
     <div class="auk-u-flex auk-u-flex--vertical-center auk-u-flex--justify-end">
       {{#if this.currentSession.isEditor}}
         <a

diff --git a/app/pods/components/agenda/agendaitem/agendaitem-news-item/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-news-item/template.hbs
@@ -5,7 +5,7 @@
     </h3>
   </div>
   <div class="auk-u-mb-2">
-    <div class="vl-typography">
+    <div class="auk-content">
       <p class="auk-u-italic">
         {{await @newsletterInfo.newsletterProposal}}
       </p>
@@ -18,7 +18,7 @@
     </div>
   </div>
   {{#if @newsletterInfo.remark}}
-    <p class="vl-u-text--muted vl-u-text--capitalize vl-u-text--small">
+    <p class="auk-u-muted vl-u-text--capitalize vl-u-text--small">
       {{t "remark"}}: {{@newsletterInfo.remark}}
     </p>
   {{/if}}

diff --git a/app/pods/components/agenda/agendaitem/agendaitem-press/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-press/template.hbs
@@ -18,7 +18,7 @@
       {{agendaitem.titlePress}}
     </h3>
   </div>
-  <div class="vl-typography">
+  <div class="auk-content">
     <p>
       {{agendaitem.textPress}}
     </p>

diff --git a/app/pods/components/agenda/agendaitem/create-agendaitem/template.hbs b/app/pods/components/agenda/agendaitem/create-agendaitem/template.hbs
@@ -92,7 +92,7 @@
                   <td class="vl-data-table-col-11">
                     {{subcase.shortTitle}}
                     <br>
-                    <p class="vl-u-text--muted">
+                    <p class="auk-u-muted">
                       {{subcase.subcaseName}}
                     </p>
                   </td>

diff --git a/app/pods/components/agenda/press-agenda/template.hbs b/app/pods/components/agenda/press-agenda/template.hbs
@@ -4,7 +4,7 @@
     <h1 class="vl-title vl-title--h2">
       {{await title}}
       <br/>
-      <span class="auk-u-mt-2 vl-u-text--muted">
+      <span class="auk-u-mt-2 auk-u-muted">
         {{t "agenda"}}
       </span>
     </h1>
@@ -44,7 +44,7 @@
                   {{/if}}
                 </div>
               </div>
-              <div class="vl-typography">
+              <div class="auk-content">
                 <ul>
                   <li>
                     {{agendaitem.textPress}}

diff --git a/app/pods/components/agenda/printable-agenda/template.hbs b/app/pods/components/agenda/printable-agenda/template.hbs
@@ -1,4 +1,4 @@
-<div data-test-agenda-printContainer class="vlc-container-center vl-typography vlc-printable-agenda-list">
+<div data-test-agenda-printContainer class="vlc-container-center auk-content vlc-printable-agenda-list">
   {{utils/logo-header}}
 
   <h4 class="vlc-printable-agenda-list__session-title" data-test-agenda-print-header-title>

diff --git a/app/pods/components/newsletter-table/table-row/template.hbs b/app/pods/components/newsletter-table/table-row/template.hbs
@@ -13,12 +13,12 @@
         {{sanitize-html raw=true value=this.newsletterInfo.richtext}}
       </div>
       {{#if this.newsletterInfo.remark}}
-        <p class="vl-u-text--muted vl-u-text--capitalize vl-u-text--small">
+        <p class="auk-u-muted vl-u-text--capitalize vl-u-text--small">
           {{this.newsletterInfo.remark}}
         </p>
       {{/if}}
     {{else}}
-      <p class="vl-u-text--muted auk-u-italic">
+      <p class="auk-u-muted auk-u-italic">
         {{t "no-newsletter-info"}}
       </p>
     {{/if}}
@@ -27,7 +27,7 @@
     {{#each (await @agendaitem.mandatees) as |mandatee|}}
       {{await mandatee.person.nameToDisplay}}<br>
     {{else}}
-      <p class="vl-u-text--muted auk-u-italic">
+      <p class="auk-u-muted auk-u-italic">
         {{t "no-mandatees"}}
       </p>
     {{/each}}

diff --git a/app/pods/components/newsletter/newsletter-item/item-content/component.js b/app/pods/components/newsletter/newsletter-item/item-content/component.js
@@ -3,8 +3,8 @@ import { inject } from '@ember/service';
 import { computed } from '@ember/object';
 
 export default Component.extend({
-  classNames: ['vl-typography'],
-  classNameBindings: ['isFlandersArt:vl-typography--definite'],
+  classNames: ['auk-content'],
+  classNameBindings: ['isFlandersArt:auk-content--definite'],
   newsletterService: inject(),
   currentSession: inject(),
   allowEditing: false,

diff --git a/app/pods/components/newsletter/newsletter-item/item-content/template.hbs b/app/pods/components/newsletter/newsletter-item/item-content/template.hbs
@@ -58,7 +58,7 @@
   <div class="vl-u-text">
     {{#if (not agendaitem.showAsRemark)}}
       {{#if (not newsletterInfo.richtext)}}
-        <p class="vl-u-text auk-u-italic vl-u-text--muted">
+        <p class="vl-u-text auk-u-italic auk-u-muted">
           {{t "no-newsletter-info"}}
         </p>
       {{else}}
@@ -72,7 +72,7 @@
 </div>
 {{#if allowEditing}}
   {{#if (await newsletterInfo.remark)}}
-    <p class="vl-u-text--muted vl-u-text--capitalize vl-u-text--small">
+    <p class="auk-u-muted vl-u-text--capitalize vl-u-text--small">
       {{t "remark"}}: {{await newsletterInfo.remark}}
     </p>
   {{/if}}
@@ -96,7 +96,7 @@
   </div>
 {{else if (and allowEditing newsletterInfo.richtext)}}
   <div class="auk-u-mb-2">
-    <p class="vl-u-text--muted vl-u-text--capitalize">
+    <p class="auk-u-muted vl-u-text--capitalize">
       {{t "no-themes-agendaitem"}}
     </p>
   </div>

diff --git a/app/pods/components/utils/formally-ok-selector/template.hbs b/app/pods/components/utils/formally-ok-selector/template.hbs
@@ -3,7 +3,7 @@
     {{web-components/vl-form-label value=(t "status")}}
   {{/if}}
   {{#if isLoading}}
-    <div class="vl-u-text--muted">
+    <div class="auk-u-muted">
       {{t "please-be-patient"}}
       <div class="vl-loader" role="alert" aria-busy="true"></div>
     </div>

diff --git a/app/pods/components/utils/kind-selector/template.hbs b/app/pods/components/utils/kind-selector/template.hbs
@@ -3,7 +3,7 @@
     {{web-components/vl-form-label value=(t "kind")}}
   {{/if}}
   {{#if isLoading}}
-    <div class="vl-u-text--muted">
+    <div class="auk-u-muted">
       {{t "please-be-patient"}}
       <div class="vl-loader" role="alert" aria-busy="true"></div>
     </div>

diff --git a/app/pods/components/web-components/vl-agendaitem-content-column/component.js b/app/pods/components/web-components/vl-agendaitem-content-column/component.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  classNames: ['vl-typography'],
+  classNames: ['auk-content'],
 });
diff --git a/app/pods/components/web-components/vl-mandatee-link/template.hbs b/app/pods/components/web-components/vl-mandatee-link/template.hbs
@@ -26,7 +26,7 @@
       {{#if showDetails}}
         <div class="vl-accordion__content js-vl-accordion__content">
           <div class="vl-accordion__panel">
-            <div class="vl-typography">
+            <div class="auk-content">
               <ul>
                 {{#each fields as |field|}}
                   <li>

diff --git a/app/pods/components/web-components/vl-mandatees-column/template.hbs b/app/pods/components/web-components/vl-mandatees-column/template.hbs
@@ -9,7 +9,7 @@
     <br/>
   {{/each}}
 {{else}}
-  <p class="vl-u-text--muted auk-u-italic">
+  <p class="auk-u-muted auk-u-italic">
     {{t "no-mandatees"}}
   </p>
 {{/if}}
diff --git a/app/pods/components/web-components/vl-pagination/component.js b/app/pods/components/web-components/vl-pagination/component.js
@@ -16,14 +16,14 @@ export default Component.extend({
 
   disabledNext: computed('isLastPage', function() {
     if (this.get('isLastPage')) {
-      return 'disabled vl-u-text--muted';
+      return 'disabled auk-u-muted';
     }
     return null;
   }),
 
   disabledPrev: computed('isFirstPage', function() {
     if (this.get('isFirstPage')) {
-      return 'disabled vl-u-text--muted';
+      return 'disabled auk-u-muted';
     }
     return null;
   }),

diff --git a/app/pods/styleguide/icons/template.hbs b/app/pods/styleguide/icons/template.hbs
@@ -1,7 +1,7 @@
 {{!-- template-lint-disable  --}}
 <h1 class="vlc-kitchensink-header">Kaleidos-icons</h1>
 <div class="vlc-kitchensink-sample">
-  <div class="vl-typography">
+  <div class="auk-content">
     <Styleguide::ScriptIcons/>
   </div>
 </div>
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -181,7 +181,8 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'custom-application/loader';
 
 // Components (from npm package)
-@import "node_modules/@kanselarij-vlaanderen/au-kaleidos-css/auk-standalone";
+// @import "node_modules/@kanselarij-vlaanderen/au-kaleidos-css/auk-standalone";
+@import "au-kaleidos-css/auk-standalone";
 
 // Styleguide
 @import "custom-application/styleguide/_br-prototype-wrapper";

diff --git a/app/styles/au-kaleidos-css/_auk-accordion.scss b/app/styles/au-kaleidos-css/_auk-accordion.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+  auk-accordion
+  ========================================================================== */
+
+.auk-accordion__content {
+  display: none;
+  transition: max-height 0.3s cubiauk-bezier(0, 1.05, 0, 1), overflow 0s 0s;
+}
+
+.auk-accordion--is-active .auk-accordion__content {
+  display: block;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-alert-stack.scss b/app/styles/au-kaleidos-css/_auk-alert-stack.scss
@@ -0,0 +1,18 @@
+/* ==========================================================================
+  auk-alert-stack
+  ---
+  Create a global stack for alerts. You can add an element to the stack.
+   ========================================================================== */
+
+.auk-alert-stack {
+  position: fixed;
+  right: 2.4rem;
+  bottom: 2.4rem;
+  display: flex;
+  flex-direction: column-reverse;
+
+  .auk-alert {
+    min-width: 40rem;
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
+  }
+}