Merge branch 'development'

* development:
  add the option to configure the initalFocus of the focus-trap in aumodal
  add wrap property to a button

addon/components/au-button.hbs

@@ -1,5 +1,5 @@
 <button
-  class="au-c-button {{this.width}} {{this.size}} {{this.skin}} {{this.alert}} {{this.loading}} {{this.disabled}} {{if (and @icon @hideText) 'au-c-button--icon-only'}}" disabled={{@disabled}}
+  class="au-c-button {{this.width}} {{this.size}} {{this.skin}} {{this.alert}} {{this.loading}} {{this.disabled}} {{if (and @icon @hideText) 'au-c-button--icon-only'}} {{if @wrap 'au-c-button--wrap'}}" disabled={{@disabled}}
   type="button"
   ...attributes
 >

addon/components/au-modal.hbs

@@ -15,7 +15,7 @@
           isActive=@modalOpen
           focusTrapOptions=
             (hash
-              initialFocus=".au-c-modal__title"
+              initialFocus=this.initialFocus
               allowOutsideClick=true
               escapeDeactivates=this.handleEscapePress
             )
@@ -65,4 +65,4 @@
       {{/if}}
     </div>
   {{/in-element}}
-{{/if}}
+{{/if}}

addon/components/au-modal.js

@@ -42,6 +42,10 @@ export default class AuModal extends Component {
     else return '';
   }
 
+  get initialFocus() {
+    return this.args.initialFocus ?? '.au-c-modal__title';
+  }
+
   @action
   handleEscapePress() {
     this.closeModal();

app/styles/ember-appuniversum/_c-button.scss

@@ -399,6 +399,13 @@ $au-button-icon-only-width-large                : $au-button-height-large  !defa
   }
 }
 
+// Wrap text inside a button
+.au-c-button--wrap {
+  height: auto;
+  white-space: initial;
+  text-align: left;
+}
+
 // Block button
 .au-c-button--block {
   display: flex;

package.json

@@ -155,5 +155,8 @@
       "release": true,
       "tokenRef": "GITHUB_AUTH"
     }
+  },
+  "volta": {
+    "node": "14.20.1"
   }
 }

stories/5-components/Buttons/AuButton.stories.js

@@ -31,6 +31,10 @@ export default {
       options: ['', 'block'],
       description: 'Defines the width of a button',
     },
+    wrap: {
+      control: 'boolean',
+      description: 'Wrap the text inside a button',
+    },
     alert: {
       control: 'boolean',
       description: 'Adds an alert state to the button',
@@ -62,6 +66,7 @@ const Template = (args) => ({
       @iconAlignment={{this.iconAlignment}}
       @hideText={{this.hideText}}
       @width={{this.width}}
+      @wrap={{this.wrap}}
       @alert={{this.alert}}
       @disabled={{this.disabled}}
       @loading={{this.loading}}
@@ -81,6 +86,7 @@ Primary.args = {
   iconAlignment: 'left',
   hideText: false,
   width: '',
+  wrap: '',
   alert: false,
   disabled: false,
   loading: false,
@@ -95,6 +101,7 @@ Secondary.args = {
   iconAlignment: 'left',
   hideText: false,
   width: '',
+  wrap: '',
   alert: false,
   disabled: false,
   loading: false,
@@ -109,6 +116,7 @@ PrimaryLink.args = {
   iconAlignment: 'left',
   hideText: false,
   width: '',
+  wrap: '',
   alert: false,
   disabled: false,
   loading: false,
@@ -123,6 +131,7 @@ SecondaryLink.args = {
   iconAlignment: 'left',
   hideText: false,
   width: '',
+  wrap: '',
   alert: false,
   disabled: false,
   loading: false,

stories/5-components/Content/AuModal.stories.js

@@ -41,6 +41,10 @@ export default {
       description:
         'If set to true the modal container and content will be have visible overflow. Useful when using a powerselect component inside a modal.',
     },
+    initialFocus: {
+      control: 'text',
+      description: 'Element which should be focused when opening the modal',
+    },
   },
   parameters: {
     layout: 'fullscreen',
@@ -75,11 +79,13 @@ const OverflowTemplate = (args) => ({
       @size={{this.size}}
       @padding={{this.padding}}
       @overflow={{this.overflow}}
+      @initialFocus='.power-select'
     >
       <:title>{{this.title}}</:title>
       <:body>
         <AuLabel>Power select (rendered in place)</AuLabel>
         <PowerSelect
+          class='power-select'
           @allowClear={{true}}
           @searchEnabled={{true}}
           @loadingMessage='Aan het laden...'
@@ -119,4 +125,5 @@ Overflow.args = {
   padding: 'default',
   overflow: true,
   powerselectoptions: singleselects,
+  initialFocus: '.power-select',
 };