feat(input-v1): upgrading component (#71)

* feat(input-v1): rendering and testing component * feat(input-v1): working on the storybook * feat(input-v1): cleaning the storybook * feat(input-v2): fixing clear method with input type number * feat(input-v1): removing hideable attribute and setting it as mandatory for type: password * feat(input-v2): addressing changes * feat(input-v2): addressing changes and removing unnecessary code bits * feat(input-v2): addressing changes * feat(input-v2): adding support for type date & time * feat(input-v2): addressing changes
ovh · Jun 26, 2023 · 5609893 · 5609893
1 parent 9429178
commit 5609893
Show file tree

Hide file tree

Showing 21 changed files with 831 additions and 206 deletions.
diff --git a/packages/libraries/core/src/components/input/ods-input-attributes.ts b/packages/libraries/core/src/components/input/ods-input-attributes.ts
@@ -14,26 +14,54 @@ export interface OdsInputAttributes extends OdsComponentAttributes {
    * @see HTMLElement.ariaLabel
    */
   ariaLabel: HTMLElement['ariaLabel'];
+  /** ID of the element that labels the input */
   ariaLabelledby?:string;
+  /** Ability to clear the input value */
+  clearable?: boolean;
+  /** Main color of the input: see component principles */
   color?: OdsThemeColorIntent;
+  /** Indicates if the input is contrasted or not: see component principles */
   contrasted?: boolean;
+  /** Default value of the input */
   defaultValue: OdsInputValue;
+  /** Indicates if the input is disabled or not: see component principles */
   disabled?: boolean;
+  /** Indicates if the input shows error or not */
   error?: boolean;
+  /** Controls the error state of the input */
   errorStateControl?: OdsErrorStateControl;
+  /** Indicates if the input is full width or not: see component principles */
   flex?: boolean;
+  /** List of forbidden values for the input */ 
   forbiddenValues: OdsFormForbiddenValues;
+  /** Control object of the form the input belongs to */
   formControl?: OdsFormControl<OdsInputValidityState>;
+  /** Icon to be used in the input field */
   icon?: OdsIconName;
+  /** Label of the input field */
   label?:string;
+  /** Indicates if the input is in loading state or not */
+  loading?: boolean;
+  /** Indicates if the input is masked or not */
+  masked?: boolean;
+  /** Maximum value for the input (type number) */
   max?: number;
+  /** Minimum value for the input (type number) */
   min?: number;
+  /** Name of the input field */
   name?: string;
+  /** Placeholder text for the input */
   placeholder?: string;
+  /** Indicates if the input is read-only or not */
   readOnly?: boolean;
+  /** Indicates if the input is required or not */
   required?: boolean;
+  /** Size of the input: see component principles */
   size?: OdsInputSize;
+  /** Step value for the input */
   step?: number;
+  /** Type of the input field */
   type: OdsInputType;
+  /** Current value of the input */
   value: OdsInputValue;
 }
diff --git a/packages/libraries/core/src/components/input/ods-input-controller.ts b/packages/libraries/core/src/components/input/ods-input-controller.ts
@@ -37,7 +37,7 @@ export class OdsInputController extends OdsComponentController<OdsInput> {
         }
       }
     }
-  }
+  }  
 
   /**
    * get the validity object properties of the component.
@@ -69,16 +69,26 @@ export class OdsInputController extends OdsComponentController<OdsInput> {
    * it returns true if the value is between a min/max from the forbidden values.
    */
   private hasForbiddenValue(): boolean {
-    return this.component.forbiddenValues.some(forbiddenValue => {
-      if (typeof forbiddenValue === 'number') {
-        return `${forbiddenValue}` === `${this.component.value}`;
-      }
-      if (this.component.value) {
-        return this.component.value >= forbiddenValue.min && this.component.value <= forbiddenValue.max;
-      }
-      return false;
-    })
-  }
+    switch (this.component.type) {
+      case 'number':
+        return this.component.forbiddenValues.some(forbiddenValue => {
+          if (typeof forbiddenValue === 'number') {
+            return `${forbiddenValue}` === `${this.component.value}`;
+          }
+          if (this.component.value && typeof this.component.value === 'number') {
+            return this.component.value >= forbiddenValue.min && this.component.value <= forbiddenValue.max;
+          }
+          return false;
+        })
+      default:
+        return this.component.forbiddenValues.some(forbiddenValue => {
+          if (typeof forbiddenValue === 'string') {
+            return forbiddenValue === this.component.value;
+          }
+          return false;
+        });
+    }
+  }  
 
   onFormControlChange(formControl?: OdsFormControl<OdsInputValidityState>) {
     this.logger.log(`[input=${this.component.value}]`, 'onFormControlChange', formControl, formControl && formControl.id);
@@ -189,6 +199,14 @@ export class OdsInputController extends OdsComponentController<OdsInput> {
   }
 
   clear() {
+    this.logger.debug('clear', this.component.inputEl?.value);
     this.component.value = '';
+    if (this.component.inputEl) {
+      this.component.inputEl.value = '';
+    }
+  }
+
+  hide() {
+    this.component.masked = !this.component.masked;
   }
 }
diff --git a/packages/libraries/core/src/components/input/ods-input-default-attributes.spec.ts b/packages/libraries/core/src/components/input/ods-input-default-attributes.spec.ts
@@ -10,6 +10,9 @@ describe('spec:ods-input-default-attributes', () => {
   it('ariaLabelledby should not be defined', () => {
     expect(odsInputDefaultAttributes.ariaLabelledby).toBe(undefined);
   });
+  it('clearable should be false', () => {
+    expect(odsInputDefaultAttributes.clearable).toBe(false);
+  });
   it('color should be default', () => {
     expect(odsInputDefaultAttributes.color).toBe(OdsThemeColorIntent.default);
   });
@@ -28,6 +31,12 @@ describe('spec:ods-input-default-attributes', () => {
   it('label should not be defined', () => {
     expect(odsInputDefaultAttributes.label).toBe(undefined);
   });
+  it('loading should be false', () => {
+    expect(odsInputDefaultAttributes.loading).toBe(false);
+  });
+  it('masked should be true', () => {
+    expect(odsInputDefaultAttributes.masked).toBe(true);
+  });
   it('max should not be defined', () => {
     expect(odsInputDefaultAttributes.max).toBe(undefined);
   });

diff --git a/packages/libraries/core/src/components/input/ods-input-default-attributes.ts b/packages/libraries/core/src/components/input/ods-input-default-attributes.ts
@@ -6,6 +6,7 @@ import { OdsInputType } from './ods-input-type';
 export const odsInputDefaultAttributesDoc = {
   ariaLabel: null,
   ariaLabelledby: undefined,
+  clearable: false,
   color: OdsThemeColorIntent.default,
   contrasted: false,
   defaultValue: '',
@@ -15,6 +16,8 @@ export const odsInputDefaultAttributesDoc = {
   forbiddenValues: [],
   icon: undefined,
   label: undefined,
+  loading: false,
+  masked: true,
   max: undefined,
   min: undefined,
   name: undefined,

diff --git a/packages/libraries/core/src/components/input/ods-input-methods.ts b/packages/libraries/core/src/components/input/ods-input-methods.ts
@@ -13,6 +13,11 @@ export interface OdsInputMethods extends OdsFormControlMethods<OdsInputValidityS
    */
   clear(): void;
 
+  /**
+   * hide or display the value
+   */
+  hide(): void;
+
   /**
    * active the focus on the input in order to let the user write something
    */

diff --git a/packages/libraries/core/src/components/input/ods-input-mock.ts b/packages/libraries/core/src/components/input/ods-input-mock.ts
@@ -19,6 +19,7 @@ export class OdsInputMock implements OdsInput<OdsInputMethods, OdsInputEvents> {
 
   ariaLabel: HTMLElement['ariaLabel'] = null;
   ariaLabelledby?: string;
+  clearable?: boolean;
   color?: OdsThemeColorIntent;
   contrasted?: boolean;
   defaultValue: OdsInputValue = odsInputDefaultAttributes.defaultValue;
@@ -28,8 +29,11 @@ export class OdsInputMock implements OdsInput<OdsInputMethods, OdsInputEvents> {
   flex?: boolean;
   forbiddenValues: OdsFormForbiddenValues<number> = odsInputDefaultAttributes.forbiddenValues;
   formControl?: OdsFormControl<OdsInputValidityState>;
+  hideable?: boolean;
   icon?: OdsIconName;
   label?: string;
+  loading?: boolean;
+  masked?: boolean;
   max?: number;
   min?: number;
   name?: string;
@@ -50,6 +54,7 @@ export class OdsInputMock implements OdsInput<OdsInputMethods, OdsInputEvents> {
 
   reset = jest.fn();
   clear = jest.fn();
+  hide = jest.fn();
   setFocus = jest.fn();
   setInputTabindex = jest.fn();
   stepUp = jest.fn();

diff --git a/packages/libraries/core/src/components/input/ods-input-type.ts b/packages/libraries/core/src/components/input/ods-input-type.ts
@@ -1,7 +1,15 @@
 import { OdsInput } from "./ods-input";
 
 export enum OdsInputType {
-  number = 'number'
+  date = 'date',
+  email = 'email',
+  number = 'number',
+  password = 'password',
+  search = 'search',
+  tel = 'tel',
+  text = 'text',
+  time = 'time',
+  url = 'url',
 }
 
 export type OdsInputTypeUnion = `${OdsInputType}`;