Restruct UI components "Panel"

app/components/agenda/agenda-header.hbs

@@ -423,12 +423,12 @@
 {{!-- new agenda actions with single pop-up for confirmation --}}
 
 {{#if this.showConfirmForApprovingAgenda}}
-  <WebComponents::AuModal @size={{if (await this.currentAgenda.canBeApproved) "small" "large"}}>
-    <WebComponents::AuModal::Header
+  <Auk::Modal @size={{if (await this.currentAgenda.canBeApproved) "small" "large"}}>
+    <Auk::Modal::Header
       @title={{t "approve-design-agenda" serialnumber=currentAgenda.serialnumber}}
-      @closeModal={{action "cancelApproveAgenda"}}
+      @onClose={{action "cancelApproveAgenda"}}
     />
-    <WebComponents::AuModal::Body>
+    <Auk::Modal::Body>
       {{#if (await this.currentAgenda.canBeApproved)}}
         {{t "approve-agenda-confirmation"}}
       {{else}}
@@ -450,26 +450,26 @@
           <Agenda::AgendaHeader::AgendaActionPopupAgendaitems @agendaitems={{await this.currentAgenda.newAgendaitemsNotOk}}/>
         {{/if}}
       {{/if}}
-    </WebComponents::AuModal::Body>
-    <WebComponents::AuModal::Footer @cancelModal={{action "cancelApproveAgenda"}}>
+    </Auk::Modal::Body>
+    <Auk::Modal::Footer @onCancel={{action "cancelApproveAgenda"}}>
       <Auk::Button
         data-test-au-modal-footer-save
         @skin={{if (await this.currentAgenda.canBeApproved) "primary" "danger-primary"}}
         {{on "click" (action "confirmApproveAgenda")}}
       >
         {{t "approve"}}
       </Auk::Button>
-    </WebComponents::AuModal::Footer>
-  </WebComponents::AuModal>
+    </Auk::Modal::Footer>
+  </Auk::Modal>
 {{/if}}
 
 {{#if this.showConfirmForApprovingAgendaAndClosingMeeting}}
-  <WebComponents::AuModal @size={{if (await this.currentAgenda.canBeApproved) "small" "large"}}>
-    <WebComponents::AuModal::Header
+  <Auk::Modal @size={{if (await this.currentAgenda.canBeApproved) "small" "large"}}>
+    <Auk::Modal::Header
       @title={{t "approve-agenda-and-close" serialnumber = this.currentAgenda.serialnumber}}
-      @closeModal={{action "cancelApproveAgendaAndCloseMeeting"}}
+      @onClose={{action "cancelApproveAgendaAndCloseMeeting"}}
     />
-    <WebComponents::AuModal::Body>
+    <Auk::Modal::Body>
       {{#if (await this.currentAgenda.canBeApproved)}}
         {{t "approve-agenda-close-meeting-confirmation"}}
       {{else}}
@@ -491,26 +491,26 @@
           <Agenda::AgendaHeader::AgendaActionPopupAgendaitems @agendaitems={{await this.currentAgenda.newAgendaitemsNotOk}}/>
         {{/if}}
       {{/if}}
-    </WebComponents::AuModal::Body>
-    <WebComponents::AuModal::Footer @cancelModal={{action "cancelApproveAgendaAndCloseMeeting"}}>
+    </Auk::Modal::Body>
+    <Auk::Modal::Footer @onCancel={{action "cancelApproveAgendaAndCloseMeeting"}}>
       <Auk::Button
         data-test-au-modal-footer-save
         @skin={{if (await this.currentAgenda.canBeApproved) "primary" "danger-primary"}}
         {{on "click" (action "confirmApproveAgendaAndCloseMeeting")}}
       >
         {{t "approve-and-close"}}
       </Auk::Button>
-    </WebComponents::AuModal::Footer>
-  </WebComponents::AuModal>
+    </Auk::Modal::Footer>
+  </Auk::Modal>
 {{/if}}
 
 {{#if this.showConfirmForClosingMeeting}}
-  <WebComponents::AuModal @size={{if (await this.currentSession.latestAgenda.isDesignAgenda) "large" "small"}}>
-    <WebComponents::AuModal::Header
-            @title={{t "agenda-close"}}
-            @closeModal={{action "cancelCloseMeeting"}}
+  <Auk::Modal @size={{if (await this.currentSession.latestAgenda.isDesignAgenda) "large" "small"}}>
+    <Auk::Modal::Header
+      @title={{t "agenda-close"}}
+      @onClose={{action "cancelCloseMeeting"}}
     />
-    <WebComponents::AuModal::Body>
+    <Auk::Modal::Body>
       {{#if (await this.currentSession.latestAgenda.isDesignAgenda)}}
         <Auk::Alert
           @skin="error"
@@ -521,8 +521,8 @@
         />
       {{/if}}
       <div>{{t "close-meeting-confirmation"}}</div>
-    </WebComponents::AuModal::Body>
-    <WebComponents::AuModal::Footer @cancelModal={{action "cancelCloseMeeting"}}>
+    </Auk::Modal::Body>
+    <Auk::Modal::Footer @onCancel={{action "cancelCloseMeeting"}}>
       <Auk::Button
         data-test-au-modal-footer-save
         @skin={{if
@@ -534,17 +534,17 @@
       >
         {{t "agenda-close"}}
       </Auk::Button>
-    </WebComponents::AuModal::Footer>
-  </WebComponents::AuModal>
+    </Auk::Modal::Footer>
+  </Auk::Modal>
 {{/if}}
 
 {{#if this.showConfirmForDeletingSelectedAgenda}}
-  <WebComponents::AuModal @size={{if (eq this.agendas.length 1) "large" "small"}}>
-    <WebComponents::AuModal::Header
+  <Auk::Modal @size={{if (eq this.agendas.length 1) "large" "small"}}>
+    <Auk::Modal::Header
       @title={{t "agenda-delete"}}
-      @closeModal={{action "cancelDeleteSelectedAgenda"}}
+      @onClose={{action "cancelDeleteSelectedAgenda"}}
     />
-    <WebComponents::AuModal::Body>
+    <Auk::Modal::Body>
       {{#if (eq this.agendas.length 1)}}
         <Auk::Alert @skin="error" @message={{t "delete-final-agenda-and-meeting"}} />
       {{/if}}
@@ -554,42 +554,42 @@
           agenda=this.currentSession.latestAgenda.agendaName
         }}
       </div>
-    </WebComponents::AuModal::Body>
-    <WebComponents::AuModal::Footer @cancelModal={{action "cancelDeleteSelectedAgenda"}}>
+    </Auk::Modal::Body>
+    <Auk::Modal::Footer @onCancel={{action "cancelDeleteSelectedAgenda"}}>
       <Auk::Button
         data-test-au-modal-footer-save
         @skin="danger-primary"
         {{on "click" (action "confirmDeleteSelectedAgenda")}}
       >
         {{t "agenda-delete"}}
       </Auk::Button>
-    </WebComponents::AuModal::Footer>
-  </WebComponents::AuModal>
+    </Auk::Modal::Footer>
+  </Auk::Modal>
 {{/if}}
 
 {{#if this.showConfirmForReopeningPreviousAgenda}}
-  <WebComponents::AuModal>
-    <WebComponents::AuModal::Header
+  <Auk::Modal>
+    <Auk::Modal::Header
       @title={{t "agenda-reopen-previous-version"}}
-      @closeModal={{action "cancelReopenPreviousAgenda"}}
+      @onClose={{action "cancelReopenPreviousAgenda"}}
     />
-    <WebComponents::AuModal::Body>
+    <Auk::Modal::Body>
       <Auk::Alert
         @skin="error"
         @message={{t
           "agenda-reopen-confirmation"
           designAgenda = this.currentAgenda.agendaName
           approvedAgenda = (await this.lastApprovedAgendaName)
         }} />
-    </WebComponents::AuModal::Body>
-    <WebComponents::AuModal::Footer @cancelModal={{action "cancelReopenPreviousAgenda"}}>
+    </Auk::Modal::Body>
+    <Auk::Modal::Footer @onCancel={{action "cancelReopenPreviousAgenda"}}>
       <Auk::Button
         data-test-au-modal-footer-save
         @skin="danger-primary"
         {{on "click" (action "confirmReopenPreviousAgenda")}}
       >
         {{t "agenda-reopen-previous-version"}}
       </Auk::Button>
-    </WebComponents::AuModal::Footer>
-  </WebComponents::AuModal>
+    </Auk::Modal::Footer>
+  </Auk::Modal>
 {{/if}}

app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles.hbs

@@ -1,6 +1,6 @@
 <div class="auk-u-mb-8">
-  <WebComponents::AuPanel>
-    <WebComponents::AuPanel::Header>
+  <Auk::Panel>
+    <Auk::Panel::Header>
       <WebComponents::AuToolbar>
         <WebComponents::AuToolbar::Group @position="left">
           <WebComponents::AuToolbar::Item>
@@ -46,8 +46,8 @@
           {{/if}}
         </WebComponents::AuToolbar::Group>
       </WebComponents::AuToolbar>
-    </WebComponents::AuPanel::Header>
-    <WebComponents::AuPanel::Body>
+    </Auk::Panel::Header>
+    <Auk::Panel::Body>
       <div class="auk-content">
         <h4>
           {{@agendaitem.shortTitle}}
@@ -101,9 +101,9 @@
           {{/if}}
         </WebComponents::AuPillList>
       </div>
-    </WebComponents::AuPanel::Body>
+    </Auk::Panel::Body>
     {{#if @agendaitem.explanation }}
-      <WebComponents::AuModal::Footer @custom={{true}}>
+      <Auk::Modal::Footer @custom={{true}}>
         <WebComponents::AuToolbar>
           <WebComponents::AuToolbar::Group @position="left">
             <WebComponents::AuToolbar::Item>
@@ -113,7 +113,7 @@
             </WebComponents::AuToolbar::Item>
           </WebComponents::AuToolbar::Group>
         </WebComponents::AuToolbar>
-      </WebComponents::AuModal::Footer>
+      </Auk::Modal::Footer>
     {{/if}}
-  </WebComponents::AuPanel>
+  </Auk::Panel>
 </div>

app/components/web-components/au-modal.js → app/components/auk/modal.js

@@ -1,19 +1,11 @@
 import Component from '@glimmer/component';
 
+/**
+ *
+ * @argument {String} size: Size can be: "full-screen", "full-screen-padded", "large (default)", "medium", "small"
+ */
 export default class Modal extends Component {
-  /**
-   * size can be:
-   * full-screen
-   * full-screen-padded
-   * large (default)
-   * medium
-   * small
-   */
   get size() {
-    if (this.args.resized) {
-      return 'auk-modal--full-screen';
-    }
-    // if not resized, use the size given
     if (this.args.size) {
       if (this.args.size === 'full-screen-padded') {
         return 'auk-modal--full-screen auk-u-p-4';

app/components/auk/modal/body.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalBody extends Component {}

app/components/web-components/au-modal/footer.hbs → app/components/auk/modal/footer.hbs

@@ -7,7 +7,7 @@
         <WebComponents::AuToolbar::Item>
           <Auk::ButtonLink
             data-test-au-modal-footer-cancel
-            {{on "click" @cancelModal}}
+            {{on "click" @onCancel}}
           >
             {{t "cancel"}}
           </Auk::ButtonLink>

app/components/auk/modal/footer.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+
+/**
+ * Modal footer. By default yields a cancel button on the left and a yield block on the right.
+ * @argument {Boolean} custom Allow the entire content of the footer to be a yield block
+ * @argument {Function} onCancel Action fired when pressing the cancel button
+ */
+export default class ModalFooter extends Component {}

app/components/auk/modal/header.hbs

@@ -0,0 +1,31 @@
+<div class="auk-modal__header auk-modal__header--bordered">
+  <WebComponents::AuToolbar @size="large">
+    <WebComponents::AuToolbar::Group @position="left">
+      <WebComponents::AuToolbar::Item>
+        <h2 data-test-au-modal-header-title class="auk-toolbar__title">{{@title}}</h2>
+      </WebComponents::AuToolbar::Item>
+    </WebComponents::AuToolbar::Group>
+    <WebComponents::AuToolbar::Group @position="right">
+      <WebComponents::AuToolbar::Item>
+        {{#if @resizeable}}
+          <Auk::Button
+            @icon={{if @isExpanded 'minimize' 'expand'}}
+            @skin="borderless"
+            @layout="icon-only"
+            {{on "click" @onResize}}
+            data-test-au-modal-header-resize
+          />
+        {{/if}}
+        {{#if this.closeable}}
+          <Auk::Button
+            @icon="close"
+            @skin="borderless"
+            @layout="icon-only"
+            {{on "click" @onClose}}
+            data-test-au-modal-header-close
+          />
+        {{/if}}
+      </WebComponents::AuToolbar::Item>
+    </WebComponents::AuToolbar::Group>
+  </WebComponents::AuToolbar>
+</div>

app/components/auk/modal/header.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { isPresent } from '@ember/utils';
+
+/**
+ * @argument {String} title
+ * @argument {Boolean} resizeable
+ * @argument {Boolean} isExpanded
+ * @argument {Function} onResize
+ * @argument {Boolean} closeable defaults to "true"
+ * @argument {Function} onClose
+ */
+export default class ModalHeader extends Component {
+  get closeable() {
+    if (isPresent(this.args.closeable)) {
+      return this.args.closeable;
+    }
+    return true;
+  }
+}

app/components/web-components/au-navbar.js → app/components/auk/navbar.js

@@ -1,25 +1,21 @@
 import Component from '@glimmer/component';
 
+/**
+ *
+ * @argument {String} border Can be "top", "bottom" (default) or "none"
+ * @argument {String} skin Can be "gray-100", "gray-200" or "white (default)"
+ * @argument {String} size Can be "large"
+ * @argument {Boolean} auto Makes height automatic
+ * @argument {Boolean} noPadding
+ */
 export default class Navbar extends Component {
-  /**
-   * border can be:
-   * top
-   * bottom (default)
-   * none
-   */
   get border() {
     if (this.args.border) {
       return `auk-navbar--bordered-${this.args.border}`;
     }
     return 'auk-navbar--bordered-bottom';
   }
 
-  /**
-   * skin can be:
-   * gray-100
-   * gray-200
-   * white (default)
-   */
   get skin() {
     if (this.args.skin) {
       return `auk-navbar--${this.args.skin}`;

app/components/web-components/au-pagination.hbs → app/components/auk/pagination.hbs

@@ -8,7 +8,7 @@
         <Auk::ButtonLink
           @icon="chevron-left"
           disabled={{this.isFirstPage}}
-          {{on "click" this.prevPage}}
+          {{on "click" @onPreviousPage}}
         >
           {{t "previous"}}
         </Auk::ButtonLink>
@@ -18,7 +18,7 @@
           @icon="chevron-right"
           @layout="icon-right"
           disabled={{this.isLastPage}}
-          {{on "click" this.nextPage}}
+          {{on "click" @onNextPage}}
         >
           {{t "next"}}
         </Auk::ButtonLink>