Merge pull request #479 from appuniversum/fix/modal-classes-incompatibilities

Fix incompatibilities between some `AuModal` arguments

Author: Windvis

addon/components/au-modal.gjs

@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { focusTrap } from 'ember-focus-trap';
+import { cn } from '../private/helpers/class-names';
 
 // TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
 import not from 'ember-truth-helpers/helpers/not';
@@ -33,7 +34,7 @@ export default class AuModal extends Component {
   }
 
   get padding() {
-    if (this.args.padding === 'none') return ' au-c-modal--flush';
+    if (this.args.padding === 'none') return 'au-c-modal--flush';
     else return '';
   }
 
@@ -89,12 +90,12 @@ export default class AuModal extends Component {
         <div class="au-c-modal-backdrop {{if @modalOpen 'is-visible'}}"></div>
         <div
           id="{{@id}}"
-          class={{concat
-            "au-c-modal "
+          class={{cn
+            "au-c-modal"
             this.size
             this.padding
             this.overflow
-            (if @modalOpen " is-visible")
+            (if @modalOpen "is-visible")
           }}
           role="dialog"
           aria-describedby={{concat "au-c-modal-title-" @id}}

addon/private/helpers/class-names.ts

@@ -0,0 +1,6 @@
+/**
+ * A very basic alternative to https://github.com/JedWatson/classnames
+ */
+export function cn(...classNames: Array<string | undefined>) {
+  return classNames.filter(Boolean).join(' ');
+}

tests/integration/private/helpers/class-names-test.gts

@@ -0,0 +1,39 @@
+import { settled, render } from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+import { cn } from '@appuniversum/ember-appuniversum/private/helpers/class-names';
+
+module('Integration | Private Helper | class-names', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts a list of classes and adds the needed whitespace', async function (assert) {
+    await render(
+      <template>
+        <div data-test class={{cn "foo" "bar" "baz"}}></div>
+      </template>,
+    );
+
+    assert.dom('[data-test]').hasClass('foo').hasClass('bar').hasClass('baz');
+  });
+
+  test('it removes falsy values', async function (assert) {
+    class TestState {
+      @tracked someFlag: boolean = false;
+    }
+
+    const state = new TestState();
+    await render(
+      <template>
+        <div data-test class={{cn "foo" (if state.someFlag "bar") "baz"}}></div>
+      </template>,
+    );
+
+    assert.dom('[data-test]').hasClass('foo').hasNoClass('bar').hasClass('baz');
+
+    state.someFlag = true;
+    await settled();
+
+    assert.dom('[data-test]').hasClass('foo').hasClass('bar').hasClass('baz');
+  });
+});