feat: add default design with daisy for mobile prefab and add right c…

…lass on prefab mobile
TRIPTYK · Nov 28, 2024 · a7f3a7b · a7f3a7b
1 parent e7ffa97
commit a7f3a7b
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 42 deletions.
diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/mobile.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/mobile.ts
@@ -1,9 +1,21 @@
 import Controller from '@ember/controller';
 import { ImmerChangeset } from 'ember-immer-changeset';
 import { tracked } from '@glimmer/tracking';
+import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsPhoneController extends Controller {
   @tracked changeset = new ImmerChangeset({
     phone: '',
+    error: '',
+    disabled: '',
   });
+  constructor(owner: Owner) {
+    super(owner);
+    this.changeset.addError({
+      message: 'This is an error message',
+      value: '',
+      originalValue: '',
+      key: 'error',
+    });
+  }
 }
diff --git a/doc-app/app/templates/docs/ember-input-validation/prefabs/mobile.md b/doc-app/app/templates/docs/ember-input-validation/prefabs/mobile.md
@@ -6,13 +6,24 @@ You've 5 prefixes : **Luxembourg, Deutshland, Netherlands, Belgium and France.**
 
 <DocsDemo as |demo|>
 <demo.example @name="tpk-mobile.hbs">
-<Prefabs::TpkValidationMobile
-@label="Mobile Number"
-@changeset={{this.changeset}}
-@validationField="phone"
-@disabled={{false}}
-@mandatory={{true}}
-/>
+      <Prefabs::TpkValidationMobile
+        @label="Mobile Number"
+        @changeset={{this.changeset}}
+        @validationField="phone"
+        @disabled={{false}}
+        @mandatory={{true}}
+      />
+      <Prefabs::TpkValidationMobile 
+        @label="Disabled"
+        @changeset={{this.changeset}}
+        @disabled={{true}} 
+        @validationField="disabled"
+      />
+      <Prefabs::TpkValidationMobile 
+        @label="Error"
+        @changeset={{this.changeset}} 
+        @validationField="error"
+      />
 </demo.example>
 
 <demo.snippet @name="tpk-mobile.hbs" />

diff --git a/...ests/integration/components/ember-input-validation/prefabs/tpk-validation-mobile-test.gts b/...ests/integration/components/ember-input-validation/prefabs/tpk-validation-mobile-test.gts
@@ -88,5 +88,19 @@ module(
       await settled();
       assert.dom('.tpk-validation-errors span').hasText('required');
     });
+
+    test('CSS classes exist and have been attached to the correct element', async function (assert) {
+      const changeset = await setChangeset( '');
+      await renderComponent(changeset);
+      assert.dom(`.tpk-mobile-container`).exists().hasAttribute(`data-test-tpk-prefab-mobile-container`);
+      assert.dom(`.tpk-mobile-container .tpk-mobile-content`).exists()
+      assert.dom(`.tpk-mobile-container .tpk-mobile-input`).exists()
+      assert.dom(`.tpk-mobile-container .tpk-validation-errors`).exists()
+      assert.dom(`.tpk-mobile-container .tpk-label`).exists()
+      assert.dom(`label`).hasClass(`tpk-mobile-label-container`);
+      assert.dom(`input`).hasClass(`tpk-mobile-input`);
+      assert.dom(`label > div:first-of-type`).hasClass(`tpk-label`, `The first div inside label has the class tpk-label.`);
+      assert.dom(`.tpk-mobile-container > div:last-of-type`).hasClass(`tpk-validation-errors`, `The second div inside tpk-mobile-container has the class tpk-validation-errors.`);
+    });
   },
 );
diff --git a/packages/ember-input-validation/src/app.css b/packages/ember-input-validation/src/app.css
@@ -7,3 +7,4 @@
 @import url('./components/prefabs/styles/tpk-email.css');
 @import url('./components/prefabs/styles/tpk-file.css');
 @import url('./components/prefabs/styles/tpk-iban.css');
+@import url('./components/prefabs/styles/tpk-mobile.css');
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-mobile.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-mobile.css
@@ -0,0 +1,61 @@
+.tpk-mobile-container {
+  @apply relative pb-4;
+}
+
+.tpk-mobile-container .tpk-label {
+  @apply label;
+}
+
+.tpk-mobile-input {
+  @apply input input-bordered w-full;
+}
+
+.tpk-mobile-content {
+  @apply flex space-x-2;
+}
+
+.tpk-mobile-content .ember-basic-dropdown-trigger {
+  @apply input input-bordered pr-10 !rounded-lg;
+}
+
+.tpk-mobile-content .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-mobile-content .ember-power-select-selected-item {
+  @apply m-0 h-full flex justify-center items-center;
+}
+
+.tpk-mobile-content .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-mobile-container .ember-basic-dropdown-trigger .flag, .tpk-mobile-container .ember-power-select-option .flag {
+  @apply flex items-center space-x-2;
+}
+
+.tpk-mobile-container[data-has-error~="true"] > .tpk-text-input {
+  @apply input-error text-error;
+}
+
+.tpk-mobile-container[data-has-error~="true"]
+.tpk-validation-errors {
+  @apply text-error text-sm justify-self-end right-0 absolute;
+}
+
+.tpk-mobile-container[data-has-error~="true"] .tpk-mobile-input {
+  @apply input-error text-error;
+}
+
+.tpk-mobile-container[data-has-error~="true"] .tpk-label {
+  @apply text-error label;
+}
+
diff --git a/packages/ember-input-validation/src/components/prefabs/tpk-validation-mobile.gts b/packages/ember-input-validation/src/components/prefabs/tpk-validation-mobile.gts
@@ -28,7 +28,7 @@ export interface TpkValidationMobilePrefabSignature
   Blocks: {
     default: [];
   };
-  Element: HTMLDivElement;
+  Element: HTMLElement;
 }
 
 interface Prefix {
@@ -128,45 +128,49 @@ export default class TpkValidationMobilePrefabComponent extends BaseValidationCo
       @unmaskValue={{true}}
       as |I|
     >
-      <div class="tpk-input" anchorScrollUp={{@validationField}} data-test-tpk-input data-has-error='{{this.hasError}}' ...attributes>
-      <I.Label
-        class='tpk-input-validation-label'
-        data-test-label-not-yielded
-      >
-        <MandatoryLabelComponent @label={{@label}} @mandatory={{this.mandatory}} />
-      </I.Label>
       <div
-        class='tpk-input-validation-mobile'
-        data-test-mobile-validation
+        class='tpk-mobile-container'
+        data-has-error='{{this.hasError}}'
+        data-test-tpk-prefab-mobile-container
       >
-        <TpkSelectComponent
-          @label=''
-          @options={{this.prefixes}}
-          @selected={{this.selectedPrefix}}
-          @onChange={{this.onChangeValuePrefix}}
-
-          as |T|
+        <I.Label
+          anchorScrollUp={{@validationField}}
+          data-test-tpk-input
+          data-has-error='{{this.hasError}}'
+          class='tpk-mobile-label-container'
+          ...attributes
         >
-          <T.Option as |O|>
-            <div class='flag'>
-              <img
-                alt={{this.getValueFromOption O.option 'code'}}
-                src={{this.getValueFromOption O.option 'flag'}}
-                width='20'
-              />
-              <div>
-                {{this.getValueFromOption O.option 'code'}}
+          <MandatoryLabelComponent @label={{@label}} @mandatory={{this.mandatory}} class="tpk-label"  />
+        </I.Label>
+        <div class="tpk-mobile-content">
+          <TpkSelectComponent
+            @label=''
+            @options={{this.prefixes}}
+            @selected={{this.selectedPrefix}}
+            @disabled={{@disabled}}
+            @onChange={{this.onChangeValuePrefix}}
+            as |T|
+          >
+            <T.Option as |O|>
+              <div class='flag'>
+                <img
+                  alt={{this.getValueFromOption O.option 'code'}}
+                  src={{this.getValueFromOption O.option 'flag'}}
+                  width='20'
+                />
+                <div>
+                  {{this.getValueFromOption O.option 'code'}}
+                </div>
               </div>
-            </div>
-          </T.Option>
-        </TpkSelectComponent>
-        <I.Input inputmode='tel' />
+            </T.Option>
+          </TpkSelectComponent>
+          <I.Input inputmode='tel' class="tpk-mobile-input" />
+        </div>
+        <TpkValidationErrorsComponent
+          class="tpk-validation-errors"
+          @errors={{this.errors}}
+        />
       </div>
-      <TpkValidationErrorsComponent
-        @errors={{this.errors}}
-
-      />
-          </div>
     </TpkInputComponent>
   </template>
 }