feat: show/hide toggle for password input (#89)

* feat: show/hide toggle for password input * fix: add aria stuff to show/hide toogle
ForkbombEu · May 22, 2024 · 1e9e523 · 1e9e523
1 parent d262892
commit 1e9e523
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 0 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -75,6 +75,7 @@ export namespace Components {
         "clearButton": boolean;
         "errorText": string;
         "helperText": string;
+        "hidable": boolean;
         "label": string;
         "name": string;
         "personIcon": boolean;
@@ -341,6 +342,7 @@ declare namespace LocalJSX {
         "clearButton"?: boolean;
         "errorText"?: string;
         "helperText"?: string;
+        "hidable"?: boolean;
         "label"?: string;
         "name"?: string;
         "onDChange"?: (event: DInputCustomEvent<string>) => void;

diff --git a/src/components/input/d-input.tsx b/src/components/input/d-input.tsx
@@ -16,6 +16,7 @@ export class DInput {
   @Prop({ reflect: true }) clearButton: boolean;
   @Prop({ reflect: true }) personIcon: boolean;
   @Prop({ reflect: true }) autoFocus: boolean;
+  @Prop({ reflect: true }) hidable: boolean;
   @Event() dInput!: EventEmitter<string>;
   @Event() dChange!: EventEmitter<string>;
 
@@ -25,8 +26,29 @@ export class DInput {
   private clearValue = () => {
     this.value = undefined;
   };
+  private changePasswordVisibility = () => {
+    this.type = this.type === 'password' ? 'text' : 'password';
+  };
 
   render() {
+    const showIcon = (
+      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+        <path
+          fill-rule="evenodd"
+          d="M4.998 7.78C6.729 6.345 9.198 5 12 5c2.802 0 5.27 1.345 7.002 2.78a12.713 12.713 0 0 1 2.096 2.183c.253.344.465.682.618.997.14.286.284.658.284 1.04s-.145.754-.284 1.04a6.6 6.6 0 0 1-.618.997 12.712 12.712 0 0 1-2.096 2.183C17.271 17.655 14.802 19 12 19c-2.802 0-5.27-1.345-7.002-2.78a12.712 12.712 0 0 1-2.096-2.183 6.6 6.6 0 0 1-.618-.997C2.144 12.754 2 12.382 2 12s.145-.754.284-1.04c.153-.315.365-.653.618-.997A12.714 12.714 0 0 1 4.998 7.78ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    );
+
+    const hideIcon = (
+      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+        <path d="m4 15.6 3.055-3.056A4.913 4.913 0 0 1 7 12.012a5.006 5.006 0 0 1 5-5c.178.009.356.027.532.054l1.744-1.744A8.973 8.973 0 0 0 12 5.012c-5.388 0-10 5.336-10 7A6.49 6.49 0 0 0 4 15.6Z" />
+        <path d="m14.7 10.726 4.995-5.007A.998.998 0 0 0 18.99 4a1 1 0 0 0-.71.305l-4.995 5.007a2.98 2.98 0 0 0-.588-.21l-.035-.01a2.981 2.981 0 0 0-3.584 3.583c0 .012.008.022.01.033.05.204.12.402.211.59l-4.995 4.983a1 1 0 1 0 1.414 1.414l4.995-4.983c.189.091.386.162.59.211.011 0 .021.007.033.01a2.982 2.982 0 0 0 3.584-3.584c0-.012-.008-.023-.011-.035a3.05 3.05 0 0 0-.21-.588Z" />
+        <path d="m19.821 8.605-2.857 2.857a4.952 4.952 0 0 1-5.514 5.514l-1.785 1.785c.767.166 1.55.25 2.335.251 6.453 0 10-5.258 10-7 0-1.166-1.637-2.874-2.179-3.407Z" />
+      </svg>
+    );
+
     return (
       <Host>
         <d-text class="label" size="m">
@@ -72,6 +94,11 @@ export class DInput {
               x
             </d-button>
           )}
+          {this.hidable && (
+            <d-button slot="end" clear onClick={this.changePasswordVisibility} aria-checked={this.type !== 'password' ? 'true' : 'false'} aria-label="show password" role="switch">
+              {this.type === 'password' ? showIcon : hideIcon}
+            </d-button>
+          )}
         </ion-input>
         {this.errorText && (
           <d-text class="error-text" size="s">

diff --git a/src/components/input/input.stories.ts b/src/components/input/input.stories.ts
@@ -8,12 +8,14 @@ const meta = {
       name="${args.name}" 
       label="${args.label}" 
       value="${args.value}" 
+      type="${args.type}"
       placeholder="${args.placeholder}" 
       helper-text="${args.helperText}" 
       ${args.errorText ? `error-text="${args.errorText}"` : ''}
       ${args.clearButton ? 'clear-button' : ''}
       ${args.personIcon ? 'person-icon' : ''}
       ${args.autoFocus ? 'autofocus' : ''}
+      ${args.hidable ? 'hidable' : ''}
     ></d-input>`,
 } satisfies Meta<DInput>;
 
@@ -27,6 +29,7 @@ export const Default: Story = {
     placeholder: 'Placeholder',
     helperText: 'Helper text',
     value: 'Value',
+    type: 'text',
   },
   parameters: {
     design: {
@@ -36,6 +39,28 @@ export const Default: Story = {
   },
 };
 
+export const Password: Story = {
+  args: {
+    ...Default.args,
+    type: 'password',
+  },
+};
+
+export const PasswordHidable: Story = {
+  args: {
+    ...Default.args,
+    type: 'password',
+    hidable: true,
+  },
+};
+
+export const TextHidable: Story = {
+  args: {
+    ...Default.args,
+    hidable: true,
+  },
+};
+
 export const WithClearButton: Story = {
   args: {
     ...Default.args,

diff --git a/src/components/input/readme.md b/src/components/input/readme.md
@@ -13,6 +13,7 @@
 | `clearButton` | `clear-button` |             | `boolean`                                     | `undefined` |
 | `errorText`   | `error-text`   |             | `string`                                      | `undefined` |
 | `helperText`  | `helper-text`  |             | `string`                                      | `undefined` |
+| `hidable`     | `hidable`      |             | `boolean`                                     | `undefined` |
 | `label`       | `label`        |             | `string`                                      | `undefined` |
 | `name`        | `name`         |             | `string`                                      | `undefined` |
 | `personIcon`  | `person-icon`  |             | `boolean`                                     | `undefined` |