Merge pull request #636 from lblod/appuniversum-v3-update

[OP-3343] Appuniversum v3 update
lblod · Aug 22, 2024 · b83f658 · b83f658
2 parents 0c279ed + 544a818
commit b83f658
Show file tree

Hide file tree

Showing 28 changed files with 596 additions and 525 deletions.
diff --git a/app/components/app-header.hbs b/app/components/app-header.hbs
@@ -11,7 +11,7 @@
       @alignment="right"
       role="menu"
     >
-      <AuLink @skin="tertiary" role="menuitem" @route="select-role">
+      <AuLink role="menuitem" @route="select-role">
         <AuIcon @icon="user" @alignment="left" />Wissel van rol
       </AuLink>
 

diff --git a/app/components/datepicker.hbs b/app/components/datepicker.hbs
@@ -3,7 +3,7 @@
   @error={{@error}}
   {{on 'focusout' this.focusOut}}
   @width={{this.width}}
-  @id={{@id}}
+  id={{@id}}
   {{au-date-input value=@value onChange=this.onChange}}
   ...attributes
 />
diff --git a/app/components/related-organizations-view-table.hbs b/app/components/related-organizations-view-table.hbs
@@ -12,9 +12,11 @@
       {{! TODO: place next to each other }}
       <div class="au-o-box">
         <AuToggleSwitch
-          @label="Verberg niet actieve organisaties"
           @checked={{@organizationStatus}}
-        />
+          @onChange={{fn @onOrganizationStatusChange (not @organizationStatus)}}
+        >
+          Verberg niet actieve organisaties
+        </AuToggleSwitch>
 
         <MembershipRoleSelect
           @options={{@model.roles}}

diff --git a/app/components/trim-input.hbs b/app/components/trim-input.hbs
@@ -3,8 +3,8 @@
   @error={{@error}}
   autocomplete={{@autocomplete}}
   @width={{@width}}
-  @id={{@id}}
-  @value={{@value}}
+  id={{@id}}
+  value={{@value}}
   {{on "focusout" (perform this.trimInput)}}
   ...attributes
 />
diff --git a/app/controllers/organizations/new.js b/app/controllers/organizations/new.js
@@ -133,8 +133,9 @@ export default class OrganizationsNewController extends Controller {
   }
 
   @action
-  setKbo(value) {
-    this.model.structuredIdentifierKBO.localId = value;
+  setKbo(event) {
+    this.model.structuredIdentifierKBO.localId =
+      event.target.inputmask.unmaskedvalue();
   }
 
   @action

diff --git a/app/controllers/organizations/organization/core-data/edit.js b/app/controllers/organizations/organization/core-data/edit.js
@@ -34,8 +34,9 @@ export default class OrganizationsOrganizationCoreDataEditController extends Con
   }
 
   @action
-  setKbo(value) {
-    this.model.structuredIdentifierKBO.localId = value;
+  setKbo(event) {
+    this.model.structuredIdentifierKBO.localId =
+      event.target.inputmask.unmaskedvalue();
   }
 
   @dropTask

diff --git a/app/helpers/boolean.js b/app/helpers/boolean.js
@@ -0,0 +1,3 @@
+export default function boolean(value) {
+  return Boolean(value);
+}
diff --git a/app/helpers/event-value.js b/app/helpers/event-value.js
@@ -0,0 +1,5 @@
+export default function eventValue(handler) {
+  return function (event) {
+    return handler(event.target.value);
+  };
+}
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -1,115 +1,30 @@
-/* ==================================
-   #APPUNIVERSUM
-   ================================== */
+// SETTINGS: Project settings and variables
+@import '@appuniversum/ember-appuniversum/styles/a-settings';
 
-/**
- * A design universe for Flanders GOV applications
- */
+// TOOLS: Mixins
+@import '@appuniversum/ember-appuniversum/styles/a-tools';
 
-/**
- * CONTENTS
- * ---
- * SETTINGS: Project settings and variables
- * TOOLS: Mixins
- * GENERIC: Reset, global box-sizing and font-styles
- * ELEMENTS: Plain html tag styling
- * OBJECTS: OOCSS unstyled objects (namespace: '.au-o-...')
- * COMPONENTS: Components (namespace: '.au-c-...')
- * UTILITIES: Single function helper classes (namespace: '.au-u-...')
- */
+// GENERIC: Reset, global box-sizing and font-styles
+@import '@appuniversum/ember-appuniversum/styles/a-generic';
 
-// VARIABLES
+// ELEMENTS: Plain html tag styling
+@import '@appuniversum/ember-appuniversum/styles/a-elements';
 
-@import 'ember-appuniversum/s-colors';
-@import 'ember-appuniversum/s-global';
-@import 'ember-appuniversum/s-utilities';
-@import 'ember-appuniversum/s-root';
+// OBJECTS: OOCSS unstyled objects (namespace: '.au-o-...')
+@import '@appuniversum/ember-appuniversum/styles/a-objects';
 
-// MIXINS
-@import 'ember-appuniversum/t-font-size';
-@import 'ember-appuniversum/t-sass-mq';
-
-// GENERIC
-@import 'ember-appuniversum/g-reset';
-@import 'ember-appuniversum/g-box-sizing';
-@import 'ember-appuniversum/g-font';
-
-// ELEMENTS
-@import 'ember-appuniversum/e-page';
-
-// OBJECTS
-@import 'ember-appuniversum/o-box';
-@import 'ember-appuniversum/o-flow';
-@import 'ember-appuniversum/o-grid';
-@import 'ember-appuniversum/o-layout';
-@import 'ember-appuniversum/o-region';
-
-// COMPONENTS
-@import 'ember-appuniversum/c-accordion';
-@import 'ember-appuniversum/c-alert';
-@import 'ember-appuniversum/c-app';
-@import 'ember-appuniversum/c-badge';
-@import 'ember-appuniversum/c-body-container';
-@import 'ember-appuniversum/c-brand';
-@import 'ember-appuniversum/c-button';
-@import 'ember-appuniversum/c-button-group';
-@import 'ember-appuniversum/c-card';
-@import 'ember-appuniversum/c-content';
-@import 'ember-appuniversum/c-content-header';
-@import 'ember-appuniversum/c-control';
-@import 'ember-appuniversum/c-data-table';
-@import 'ember-appuniversum/c-dropdown';
-@import 'ember-appuniversum/c-file-upload';
-@import 'ember-appuniversum/c-form';
-@import 'ember-appuniversum/c-heading';
-@import 'ember-appuniversum/c-help-text';
-@import 'ember-appuniversum/c-hr';
-@import 'ember-appuniversum/c-icon';
-@import 'ember-appuniversum/c-input';
-@import 'ember-appuniversum/c-label';
-@import 'ember-appuniversum/c-link';
-@import 'ember-appuniversum/c-list-horizontal';
-@import 'ember-appuniversum/c-list-navigation';
-@import 'ember-appuniversum/c-loader';
-@import 'ember-appuniversum/c-pagination';
-@import 'ember-appuniversum/c-pill';
-@import 'ember-appuniversum/c-main-container';
-@import 'ember-appuniversum/c-main-header';
-@import 'ember-appuniversum/c-main-footer';
-@import 'ember-appuniversum/c-modal';
-@import 'ember-appuniversum/c-sidebar';
-@import 'ember-appuniversum/c-sidebar-action';
-@import 'ember-appuniversum/c-table';
-@import 'ember-appuniversum/c-tabs';
-@import 'ember-appuniversum/c-textarea';
-@import 'ember-appuniversum/c-timepicker';
-@import 'ember-appuniversum/c-toolbar';
-@import 'ember-appuniversum/c-toggle-switch';
+// COMPONENTS: Components (namespace: '.au-c-...')
+@import '@appuniversum/ember-appuniversum/styles/a-components';
 @import 'components/cards';
 @import 'components/sidebar-container';
 @import 'components/table-message';
 @import 'components/c-rich-text-editor';
 
 // PLUGINS
-@import 'ember-appuniversum/p-ember-power-select';
-@import 'ember-appuniversum/p-duet-datepicker';
+@import '@appuniversum/ember-appuniversum/styles/a-plugins';
 
-// UTILITIES
-@import 'ember-appuniversum/u-align-text';
-@import 'ember-appuniversum/u-background';
-@import 'ember-appuniversum/u-break-word';
-@import 'ember-appuniversum/u-flex';
-@import 'ember-appuniversum/u-headings';
-@import 'ember-appuniversum/u-hide';
-@import 'ember-appuniversum/u-font-family';
-@import 'ember-appuniversum/u-font-weights';
-@import 'ember-appuniversum/u-max-widths';
-@import 'ember-appuniversum/u-paragraphs';
-@import 'ember-appuniversum/u-print';
-@import 'ember-appuniversum/u-responsive-spacings';
-@import 'ember-appuniversum/u-spacings';
-@import 'ember-appuniversum/u-visible';
-@import 'ember-appuniversum/u-widths';
+// UTILITIES: Single function helper classes (namespace: '.au-u-...')
+@import '@appuniversum/ember-appuniversum/styles/a-utilities';
 
 // ember-rdfa-editor styles
 // TODO: `@import "ember-rdfa-editor";` imports annotation styles which are _huge_ when compiled

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -4,6 +4,8 @@
   )
 }}
 
+<AuModalContainer />
+
 <AuApp class='{{if this.showEnvironment 'au-c-app--environment'}}'>
   {{#if this.showEnvironment}}
     <EnvironmentBanner
@@ -32,4 +34,4 @@
       {{outlet}}
     </div>
   </main>
-</AuApp> 
+</AuApp>
diff --git a/app/templates/mock-login.hbs b/app/templates/mock-login.hbs
@@ -15,7 +15,7 @@
                 class="au-o-box au-o-box--small au-c-card au-u-margin-bottom-small"
               >
                 <AuButton
-                  @skin="tertiary"
+                  @skin="link"
                   {{on
                     "click"
                     (fn login.login account.id account.user.group.id)

diff --git a/app/templates/organizations/index.hbs b/app/templates/organizations/index.hbs
@@ -87,7 +87,7 @@
             />
           </div>
           <div class="au-o-grid__item">
-            <AuButton @skin="tertiary" type="reset">
+            <AuButton @skin="link" type="reset">
               <AuIcon @icon="cross" @alignment="left" />
               Herstel alle filters
             </AuButton>

diff --git a/app/templates/organizations/new.hbs b/app/templates/organizations/new.hbs
@@ -143,36 +143,20 @@
               <Item @alignTop={{true}}>
                 <:label>Grensoverschrijvend</:label>
                 <:content>
-                  <ul class="au-c-list-inline">
-                    <li class="au-c-list-inline__item">
-                      <AuControlRadio
-                        @label="Ja"
-                        @name="is-cross-border"
-                        @value={{this.currentOrganizationModel.crossBorder}}
-                        @identifier="cross-border-true"
-                        @onChange={{fn
-                          (mut this.currentOrganizationModel.crossBorder)
-                          true
-                        }}
-                        checked={{this.currentOrganizationModel.crossBorder}}
-                      />
-                    </li>
-                    <li class="au-c-list-inline__item">
-                      <AuControlRadio
-                        @label="Nee"
-                        @name="is-cross-border"
-                        @value={{this.currentOrganizationModel.crossBorder}}
-                        @identifier="cross-border-false"
-                        @onChange={{fn
-                          (mut this.currentOrganizationModel.crossBorder)
-                          false
-                        }}
-                        checked={{not
-                          this.currentOrganizationModel.crossBorder
-                        }}
-                      />
-                    </li>
-                  </ul>
+                  <AuRadioGroup
+                    @alignment="inline"
+                    @name="is-cross-border"
+                    @selected={{boolean
+                      this.currentOrganizationModel.crossBorder
+                    }}
+                    @onChange={{fn
+                      (mut this.currentOrganizationModel.crossBorder)
+                    }}
+                    as |Group|
+                  >
+                    <Group.Radio @value={{true}}>Ja</Group.Radio>
+                    <Group.Radio @value={{false}}>Nee</Group.Radio>
+                  </AuRadioGroup>
                 </:content>
               </Item>
             {{/if}}
@@ -241,15 +225,17 @@
               <:label>{{@model.identifierKBO.idName}}</:label>
               <:content as |hasError|>
                 <AuInput
-                  @maskPlaceholder="_"
-                  autocomplete="off"
-                  @mask="####.###.###"
-                  @onChange={{this.setKbo}}
                   @width="block"
-                  @value={{@model.structuredIdentifierKBO.localId}}
                   @error={{hasError}}
+                  autocomplete="off"
+                  value={{@model.structuredIdentifierKBO.localId}}
                   id="kbo-identifier"
+                  class="au-c-input--mask"
                   placeholder="____.___.___"
+                  {{au-inputmask
+                    options=(hash mask="####.###.###" placeholder="_")
+                  }}
+                  {{on "input" this.setKbo}}
                 />
               </:content>
               <:error as |error|>

diff --git a/app/templates/organizations/organization/change-events/details/edit.hbs b/app/templates/organizations/organization/change-events/details/edit.hbs
@@ -53,9 +53,13 @@
               <:label>Beschrijving</:label>
               <:content>
                 <AuTextarea
-                  @value={{@model.changeEvent.description}}
                   @width="block"
+                  value={{@model.changeEvent.description}}
                   id="change-event-description"
+                  {{on
+                    "input"
+                    (event-value (fn (mut @model.changeEvent.description)))
+                  }}
                 />
               </:content>
             </Item>

diff --git a/app/templates/organizations/organization/change-events/new.hbs b/app/templates/organizations/organization/change-events/new.hbs
@@ -61,9 +61,13 @@
               <:label>Beschrijving</:label>
               <:content>
                 <AuTextarea
-                  @value={{@model.changeEvent.description}}
                   @width="block"
+                  value={{@model.changeEvent.description}}
                   id="change-event-description"
+                  {{on
+                    "input"
+                    (event-value (fn (mut @model.changeEvent.description)))
+                  }}
                 />
               </:content>
             </Item>