feat: add d-checkbox component (#146)

* feat: add d-checkbox component * fix: add error text to checkbox * test: checkbox
ForkbombEu · Aug 31, 2024 · aff0b3c · aff0b3c
1 parent 3da0f7d
commit aff0b3c
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 14 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -46,6 +46,10 @@ export namespace Components {
     }
     interface DButtonsGroup {
     }
+    interface DCheckbox {
+        "checked": boolean;
+        "error": string | undefined;
+    }
     interface DCredentialCard {
         "expirationDate"?: string;
         "expirationLabel": string;
@@ -195,6 +199,10 @@ export interface DButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDButtonElement;
 }
+export interface DCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDCheckboxElement;
+}
 export interface DEmptyStateCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDEmptyStateElement;
@@ -262,6 +270,23 @@ declare global {
         prototype: HTMLDButtonsGroupElement;
         new (): HTMLDButtonsGroupElement;
     };
+    interface HTMLDCheckboxElementEventMap {
+        "dChange": boolean;
+    }
+    interface HTMLDCheckboxElement extends Components.DCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDCheckboxElementEventMap>(type: K, listener: (this: HTMLDCheckboxElement, ev: DCheckboxCustomEvent<HTMLDCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDCheckboxElementEventMap>(type: K, listener: (this: HTMLDCheckboxElement, ev: DCheckboxCustomEvent<HTMLDCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDCheckboxElement: {
+        prototype: HTMLDCheckboxElement;
+        new (): HTMLDCheckboxElement;
+    };
     interface HTMLDCredentialCardElement extends Components.DCredentialCard, HTMLStencilElement {
     }
     var HTMLDCredentialCardElement: {
@@ -466,6 +491,7 @@ declare global {
         "d-badge": HTMLDBadgeElement;
         "d-button": HTMLDButtonElement;
         "d-buttons-group": HTMLDButtonsGroupElement;
+        "d-checkbox": HTMLDCheckboxElement;
         "d-credential-card": HTMLDCredentialCardElement;
         "d-credential-detail": HTMLDCredentialDetailElement;
         "d-credential-service": HTMLDCredentialServiceElement;
@@ -534,6 +560,11 @@ declare namespace LocalJSX {
     }
     interface DButtonsGroup {
     }
+    interface DCheckbox {
+        "checked"?: boolean;
+        "error"?: string | undefined;
+        "onDChange"?: (event: DCheckboxCustomEvent<boolean>) => void;
+    }
     interface DCredentialCard {
         "expirationDate"?: string;
         "expirationLabel"?: string;
@@ -690,6 +721,7 @@ declare namespace LocalJSX {
         "d-badge": DBadge;
         "d-button": DButton;
         "d-buttons-group": DButtonsGroup;
+        "d-checkbox": DCheckbox;
         "d-credential-card": DCredentialCard;
         "d-credential-detail": DCredentialDetail;
         "d-credential-service": DCredentialService;
@@ -730,6 +762,7 @@ declare module "@stencil/core" {
             "d-badge": LocalJSX.DBadge & JSXBase.HTMLAttributes<HTMLDBadgeElement>;
             "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes<HTMLDButtonElement>;
             "d-buttons-group": LocalJSX.DButtonsGroup & JSXBase.HTMLAttributes<HTMLDButtonsGroupElement>;
+            "d-checkbox": LocalJSX.DCheckbox & JSXBase.HTMLAttributes<HTMLDCheckboxElement>;
             "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes<HTMLDCredentialCardElement>;
             "d-credential-detail": LocalJSX.DCredentialDetail & JSXBase.HTMLAttributes<HTMLDCredentialDetailElement>;
             "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;

diff --git a/src/components/avatar/readme.md b/src/components/avatar/readme.md
@@ -7,12 +7,12 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type     | Default     |
-| -------- | --------- | ----------- | -------- | ----------- |
-| `name`   | `name`    |             | `string` | `undefined` |
-| `shape`  | `shape`   |             | `string` | `'round'`   |
-| `size`   | `size`    |             | `string` | `'m'`       |
-| `src`    | `src`     |             | `string` | `undefined` |
+| Property | Attribute | Description | Type                                         | Default     |
+| -------- | --------- | ----------- | -------------------------------------------- | ----------- |
+| `name`   | `name`    |             | `string`                                     | `undefined` |
+| `shape`  | `shape`   |             | `string`                                     | `'round'`   |
+| `size`   | `size`    |             | `"2xl" \| "l" \| "m" \| "s" \| "xl" \| "xs"` | `'m'`       |
+| `src`    | `src`     |             | `string`                                     | `undefined` |
 
 
 ## Dependencies

diff --git a/src/components/checkbox/checkbox.stories.ts b/src/components/checkbox/checkbox.stories.ts
@@ -0,0 +1,22 @@
+import { DCheckbox } from './d-checkbox';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/DATA DISPLAY/Checkbox',
+  render: () =>
+    `<d-checkbox>
+      pippo
+    </d-checkbox>`,
+} satisfies Meta<DCheckbox>;
+
+export default meta;
+type Story = StoryObj<DCheckbox>;
+
+export const Default: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=3449-47234&m=dev',
+    },
+  },
+};
diff --git a/src/components/checkbox/d-checkbox.css b/src/components/checkbox/d-checkbox.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/checkbox/d-checkbox.tsx b/src/components/checkbox/d-checkbox.tsx
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Event, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-checkbox',
+  styleUrl: 'd-checkbox.css',
+  shadow: true,
+})
+export class DCheckbox {
+  @Prop() checked: boolean;
+  @Prop() error: string | undefined = undefined;
+  @Event() dChange!: EventEmitter<boolean>;
+
+  private updateValue = (value: boolean) => {
+    this.dChange.emit(value);
+  };
+
+  render() {
+    return (
+      <Host>
+        <d-vertical-stack>
+          <d-horizontal-stack>
+            <ion-checkbox onIonChange={e => this.updateValue(e.detail.checked)} checked={this.checked}></ion-checkbox>
+            <div>
+              <slot />
+            </div>
+          </d-horizontal-stack>
+          {this.error && (
+            <d-text size="s" class="text-error">
+              {this.error}
+            </d-text>
+          )}
+        </d-vertical-stack>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/checkbox/readme.md b/src/components/checkbox/readme.md
@@ -0,0 +1,44 @@
+# d-checkbox
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property  | Attribute | Description | Type      | Default     |
+| --------- | --------- | ----------- | --------- | ----------- |
+| `checked` | `checked` |             | `boolean` | `undefined` |
+| `error`   | `error`   |             | `string`  | `undefined` |
+
+
+## Events
+
+| Event     | Description | Type                   |
+| --------- | ----------- | ---------------------- |
+| `dChange` |             | `CustomEvent<boolean>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-vertical-stack](../vertical-stack)
+- [d-horizontal-stack](../horizontal-stack)
+- ion-checkbox
+- [d-text](../text)
+
+### Graph
+```mermaid
+graph TD;
+  d-checkbox --> d-vertical-stack
+  d-checkbox --> d-horizontal-stack
+  d-checkbox --> ion-checkbox
+  d-checkbox --> d-text
+  style d-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/checkbox/test/d-checkbox.e2e.ts b/src/components/checkbox/test/d-checkbox.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-checkbox', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-checkbox></d-checkbox>');
+
+    const element = await page.find('d-checkbox');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/src/components/checkbox/test/d-checkbox.spec.tsx b/src/components/checkbox/test/d-checkbox.spec.tsx
@@ -0,0 +1,25 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DCheckbox } from '../d-checkbox';
+
+describe('d-checkbox', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DCheckbox],
+      html: `<d-checkbox></d-checkbox>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-checkbox>
+        <mock:shadow-root>
+          <d-vertical-stack>
+           <d-horizontal-stack>
+             <ion-checkbox></ion-checkbox>
+             <div>
+               <slot></slot>
+             </div>
+           </d-horizontal-stack>
+         </d-vertical-stack>
+        </mock:shadow-root>
+      </d-checkbox>
+    `);
+  });
+});
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type     | Default     |
-| -------- | --------- | ----------- | -------- | ----------- |
-| `color`  | `color`   |             | `string` | `'primary'` |
-| `size`   | `size`    |             | `string` | `'m'`       |
+| Property | Attribute | Description | Type                                         | Default     |
+| -------- | --------- | ----------- | -------------------------------------------- | ----------- |
+| `color`  | `color`   |             | `string`                                     | `'primary'` |
+| `size`   | `size`    |             | `"2xl" \| "l" \| "m" \| "s" \| "xl" \| "xs"` | `'m'`       |
 
 
 ## Dependencies

diff --git a/src/components/horizontal-stack/readme.md b/src/components/horizontal-stack/readme.md
@@ -10,6 +10,19 @@
 | `gap`    | `gap`     |             | `2 \| 4 \| 8` | `2`     |
 
 
+## Dependencies
+
+### Used by
+
+ - [d-checkbox](../checkbox)
+
+### Graph
+```mermaid
+graph TD;
+  d-checkbox --> d-horizontal-stack
+  style d-horizontal-stack fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/text/readme.md b/src/components/text/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type     | Default     |
-| -------- | --------- | ----------- | -------- | ----------- |
-| `color`  | `color`   |             | `string` | `'primary'` |
-| `size`   | `size`    |             | `string` | `'m'`       |
+| Property | Attribute | Description | Type                                         | Default     |
+| -------- | --------- | ----------- | -------------------------------------------- | ----------- |
+| `color`  | `color`   |             | `string`                                     | `'primary'` |
+| `size`   | `size`    |             | `"2xl" \| "l" \| "m" \| "s" \| "xl" \| "xs"` | `'m'`       |
 
 
 ## Dependencies
@@ -19,6 +19,7 @@
 
  - [d-activity-card](../activity-card)
  - [d-app-details](../app-details)
+ - [d-checkbox](../checkbox)
  - [d-credential-card](../credential-card)
  - [d-credential-service](../credential-service)
  - [d-did-box](../d-did-box)
@@ -35,6 +36,7 @@
 graph TD;
   d-activity-card --> d-text
   d-app-details --> d-text
+  d-checkbox --> d-text
   d-credential-card --> d-text
   d-credential-service --> d-text
   d-did-box --> d-text

diff --git a/src/components/vertical-stack/readme.md b/src/components/vertical-stack/readme.md
@@ -10,6 +10,19 @@
 | `gap`    | `gap`     |             | `2 \| 4 \| 8` | `2`     |
 
 
+## Dependencies
+
+### Used by
+
+ - [d-checkbox](../checkbox)
+
+### Graph
+```mermaid
+graph TD;
+  d-checkbox --> d-vertical-stack
+  style d-vertical-stack fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*