Merge pull request #99 from TRIPTYK/feature/tk-ui-58

feat: add default design with daisy for select prefab

doc-app/app/templates/docs/ember-input-validation/prefabs/select.md

@@ -26,7 +26,7 @@ In example:
         @options={{this.options}}
         @changeset={{this.changeset}} 
         @validationField="disabled"
-        @disabled={{false}}
+        @disabled={{true}}
       />
       <Prefabs::TpkValidationSelect
         @label="Error"

doc-app/tests/integration/components/ember-input-validation/prefabs/tpk-validation-select-test.gts

@@ -5,6 +5,7 @@ import {  click, render, settled } from '@ember/test-helpers';
 import { ImmerChangeset } from 'ember-immer-changeset';
 import { setupIntl } from 'ember-intl/test-support';
 import TpkValidationSelect from '@triptyk/ember-input-validation/components/prefabs/tpk-validation-select';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
 
 
 
@@ -14,52 +15,54 @@ module(
     setupRenderingTest(hooks);
     setupIntl(hooks, 'fr-fr');
 
-    async function renderComponent( options: unknown[] = []) {
-      const changeset = new ImmerChangeset<
+    async function setChangeset(value?: string | object) {
+      return new ImmerChangeset<
         {
           names?: string | object;
         }
       >({
-        names: undefined,
+        names: value,
       });
-      const onChange = () => {};
+    }
 
+    async function renderComponent({ options = [], changeset, disabled = false }: { options: unknown[], changeset: ImmerChangeset, disabled?: boolean }) {
+      const onChange = () => {};
       await render(
         <template><TpkValidationSelect
           @placeholder="Entrez un nom"
           @label="Names"
           @options={{options}}
           @changeset={{changeset}}
           @validationField="names"
+          @disabled={{disabled}}
           @onChange={{onChange}}
           class="custom-class"
-        />
-        </template>,
+        /></template>,
       );
-
-      return changeset;
     }
 
     test('Applies the toString() method for displaying options', async function (assert) {
-      await renderComponent( [
+      const changeset = await setChangeset();
+      await renderComponent( { options: [
         {
           toString() {
             return 'toString() method';
           },
         },
-      ]);
+      ], changeset});
       await click('.ember-power-select-trigger');
       assert.dom('.ember-power-select-option').hasText('toString() method');
     });
 
     test('Applies the direct values from array for displaying options', async function (assert) {
-      await renderComponent.call(this, [
+      const changeset = await setChangeset();
+      await renderComponent({ options: [
         'Beatport',
         'Spotify',
         'Apple Music',
         'Deezer',
         'Soundcloud',
-      ]);
+      ], changeset });
       await click('.ember-power-select-trigger');
       assert.dom('.ember-power-select-option').hasText('Beatport');
     });
@@ -70,16 +73,17 @@ module(
           return 'toString() method';
         },
       };
-      const changeset = await renderComponent( [obj]);
-      changeset.set('names', obj);
+      const changeset = await setChangeset(obj);
+      await renderComponent({ options: [obj], changeset});
       await settled();
       assert
         .dom('.ember-power-select-selected-item')
         .hasText('toString() method');
     });
 
     test('Error prefab appears if an error is added to changeset', async function (assert) {
-      const changeset = await renderComponent();
+      const changeset = await setChangeset();
+      await renderComponent({ options: [], changeset });
       changeset.addError({
         message: 'required',
         value: '',
@@ -92,9 +96,10 @@ module(
     });
 
     test('It changes data-has-error attribue on error', async function (assert) {
-      const changeset = await renderComponent();
+      const changeset = await setChangeset();
+      await renderComponent({ options: [], changeset });
       assert
-        .dom('.tpk-validation-select')
+        .dom('.tpk-select-container')
         .hasAttribute('data-has-error', 'false');
 
       changeset.addError({
@@ -107,8 +112,30 @@ module(
       await settled();
 
       assert
-        .dom('.tpk-validation-select')
+        .dom('.tpk-select-container')
         .hasAttribute('data-has-error', 'true');
     });
+
+    test('CSS classes exist and have been attached to the correct element', async function (assert) {
+      const changeset = await setChangeset();
+      await renderComponent({ options: [], changeset });
+
+      assert.dom(`.tpk-select-container`).exists().hasAttribute(`data-test-tpk-prefab-select-container`);
+      assert.dom(`.tpk-select-container .tpk-validation-errors`).exists()
+      assert.dom(`.tpk-select-container .tpk-label`).exists();
+    });
+
+    test('@disabled disables the select', async function(assert) {
+      const changeset = await setChangeset();
+      await renderComponent({ options: [], changeset, disabled: true });
+      assert.dom(`.ember-basic-dropdown-trigger`).hasAttribute('aria-disabled', 'true');
+    });
+
+    test('Accessibility', async function (assert) {
+      assert.expect(0);
+      const changeset = await setChangeset();
+      await renderComponent({ options: [], changeset, disabled: true });
+      await a11yAudit();
+    });
   },
 );

packages/ember-input-validation/src/app.css

@@ -11,4 +11,5 @@
 @import url('./components/prefabs/styles/tpk-integer.css');
 @import url('./components/prefabs/styles/tpk-national-number.css');
 @import url('./components/prefabs/styles/tpk-number.css');
+@import url('./components/prefabs/styles/tpk-select.css');
 @import url('./components/prefabs/styles/tpk-password.css');

packages/ember-input-validation/src/components/prefabs/styles/tpk-mobile.css

@@ -28,7 +28,7 @@
 }
 
 .tpk-mobile-content .ember-power-select-selected-item {
-  @apply m-0 h-full flex justify-center items-center;
+  @apply m-0 h-full flex items-center;
 }
 
 .tpk-mobile-content .ember-basic-dropdown-content {

packages/ember-input-validation/src/components/prefabs/styles/tpk-select.css

@@ -0,0 +1,40 @@
+.tpk-select-container {
+  @apply relative pb-4;
+}
+
+.tpk-select-container .ember-basic-dropdown-trigger {
+  @apply input input-bordered pr-10 !rounded-lg;
+}
+
+.tpk-select-container .ember-basic-dropdown-trigger[aria-disabled="true"] {
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity)));
+  color: var(--fallback-bc, oklch(var(--bc) / .4));
+}
+
+.tpk-select-container .ember-power-select-selected-item {
+  @apply m-0 h-full flex items-center;
+}
+
+.tpk-select-container .ember-basic-dropdown-content {
+  @apply rounded-lg mt-2.5 z-[100];
+  --tw-bg-opacity: 1;
+  border-color: var(--fallback-bc, oklch(var(--bc) / 0.2));
+  background-color: var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity)));
+}
+
+.tpk-select-container[data-has-error~="true"]
+.tpk-validation-errors {
+  @apply text-error text-sm justify-self-end right-0 absolute;
+}
+
+.tpk-select-container[data-has-error~="true"] .ember-basic-dropdown-trigger {
+  @apply input-error text-error;
+}
+
+.tpk-select-container[data-has-error~="true"] .tpk-label {
+  @apply text-error label;
+}

packages/ember-input-validation/src/components/prefabs/tpk-validation-select.gts

@@ -47,9 +47,10 @@ export default class TpkValidationSelectPrefabComponent extends BaseValidationCo
 
   <template>
     <div
-      class="{{if @disabled "disabled"}} tpk-select tpk-validation-select"
+      class="{{if @disabled "disabled"}} tpk-select-container"
       anchorScrollUp={{@validationField}}
       data-has-error='{{this.hasError}}'
+      data-test-tpk-prefab-select-container
       ...attributes
     >
       <TpkSelectComponent
@@ -63,6 +64,7 @@ export default class TpkValidationSelectPrefabComponent extends BaseValidationCo
         @onChange={{this.onChange}}
         @selected={{this.value}}
         @labelComponent={{@labelComponent}}
+        @labelClass="tpk-label"
         @selectedItemComponent={{@selectedItemComponent}}
         @placeholderComponent={{@placeholderComponent}}
       as |S|>
@@ -71,6 +73,7 @@ export default class TpkValidationSelectPrefabComponent extends BaseValidationCo
         </S.Option>
       </TpkSelectComponent>
       <TpkValidationErrorsComponent
+        class="tpk-validation-errors"
         @errors={{this.errors}}
       />
     </div>

packages/ember-input/src/components/tpk-select.gts

@@ -17,7 +17,7 @@ export interface TpkSelectSignature {
     label: string;
     placeholder?: string;
     renderInPlace?: boolean;
-
+    labelClass?: string;
     allowClear?: boolean;
     disabled?: boolean;
     initiallyOpened?: boolean;
@@ -72,7 +72,7 @@ export default class TpkSelectComponent extends Component<TpkSelectSignature> {
         @allowClear={{@allowClear}}
         @onChange={{@onChange}}
         @placeholder={{@placeholder}}
-        @labelClass="tpk-select-label"
+        @labelClass={{@labelClass}}
         @renderInPlace={{this.renderInPlace}}
         @labelComponent={{@labelComponent}}
         @selectedItemComponent={{@selectedItemComponent}}
@@ -107,7 +107,7 @@ export default class TpkSelectComponent extends Component<TpkSelectSignature> {
         @placeholder={{@placeholder}}
         @allowClear={{@allowClear}}
         @onChange={{@onChange}}
-        @labelClass="tpk-select-label"
+        @labelClass={{@labelClass}}
         @renderInPlace={{this.renderInPlace}}
         @labelComponent={{@labelComponent}}
         @selectedItemComponent={{@selectedItemComponent}}