feat: empty state component (#107)

Co-authored-by: Puria Nafisi Azizi <[email protected]>
ForkbombEu · Jul 1, 2024 · 8887bc2 · 8887bc2
1 parent 200983b
commit 8887bc2
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 0 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -61,6 +61,12 @@ export namespace Components {
         "hidable": boolean;
         "title": string;
     }
+    interface DEmptyState {
+        "buttonText": string | undefined;
+        "heading": string;
+        "href": string | undefined;
+        "text": string;
+    }
     interface DFeedback {
         "feedback": string;
         "message": string | undefined;
@@ -189,6 +195,12 @@ declare global {
         prototype: HTMLDDefinitionElement;
         new (): HTMLDDefinitionElement;
     };
+    interface HTMLDEmptyStateElement extends Components.DEmptyState, HTMLStencilElement {
+    }
+    var HTMLDEmptyStateElement: {
+        prototype: HTMLDEmptyStateElement;
+        new (): HTMLDEmptyStateElement;
+    };
     interface HTMLDFeedbackElementEventMap {
         "dClose": void;
     }
@@ -293,6 +305,7 @@ declare global {
         "d-credential-detail": HTMLDCredentialDetailElement;
         "d-credential-service": HTMLDCredentialServiceElement;
         "d-definition": HTMLDDefinitionElement;
+        "d-empty-state": HTMLDEmptyStateElement;
         "d-feedback": HTMLDFeedbackElement;
         "d-header": HTMLDHeaderElement;
         "d-heading": HTMLDHeadingElement;
@@ -363,6 +376,12 @@ declare namespace LocalJSX {
         "hidable"?: boolean;
         "title"?: string;
     }
+    interface DEmptyState {
+        "buttonText"?: string | undefined;
+        "heading"?: string;
+        "href"?: string | undefined;
+        "text"?: string;
+    }
     interface DFeedback {
         "feedback"?: string;
         "message"?: string | undefined;
@@ -429,6 +448,7 @@ declare namespace LocalJSX {
         "d-credential-detail": DCredentialDetail;
         "d-credential-service": DCredentialService;
         "d-definition": DDefinition;
+        "d-empty-state": DEmptyState;
         "d-feedback": DFeedback;
         "d-header": DHeader;
         "d-heading": DHeading;
@@ -455,6 +475,7 @@ declare module "@stencil/core" {
             "d-credential-detail": LocalJSX.DCredentialDetail & JSXBase.HTMLAttributes<HTMLDCredentialDetailElement>;
             "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;
             "d-definition": LocalJSX.DDefinition & JSXBase.HTMLAttributes<HTMLDDefinitionElement>;
+            "d-empty-state": LocalJSX.DEmptyState & JSXBase.HTMLAttributes<HTMLDEmptyStateElement>;
             "d-feedback": LocalJSX.DFeedback & JSXBase.HTMLAttributes<HTMLDFeedbackElement>;
             "d-header": LocalJSX.DHeader & JSXBase.HTMLAttributes<HTMLDHeaderElement>;
             "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;

diff --git a/src/components/button/readme.md b/src/components/button/readme.md
@@ -32,12 +32,14 @@
 
 ### Used by
 
+ - [d-empty-state](../empty-state)
  - [d-input](../input)
  - [d-scan-button](../scan-button)
 
 ### Graph
 ```mermaid
 graph TD;
+  d-empty-state --> d-button
   d-input --> d-button
   d-scan-button --> d-button
   style d-button fill:#f9f,stroke:#333,stroke-width:4px

diff --git a/src/components/empty-state/d-empty-state.css b/src/components/empty-state/d-empty-state.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/empty-state/d-empty-state.tsx b/src/components/empty-state/d-empty-state.tsx
@@ -0,0 +1,41 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-empty-state',
+  styleUrl: 'd-empty-state.css',
+  shadow: true,
+})
+export class DEmptyState {
+  @Prop() heading: string;
+  @Prop() text: string;
+  @Prop() buttonText: string | undefined = undefined;
+  @Prop() href: string | undefined = undefined;
+
+  render() {
+    return (
+      <Host>
+        <div class="flex flex-col items-center justify-center gap-4">
+          <div>
+            <slot />
+          </div>
+          <div class="flex flex-col gap-1">
+            <d-heading size="s">{this.heading}</d-heading>
+            <d-text size="l" class="">
+              {this.text}
+            </d-text>
+          </div>
+          {this.buttonText && (
+            <d-button expand color="outline" href={this.href} class="w-full">
+              {this.buttonText}{' '}
+              <div slot="end">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 512 512" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100" class="w-6 h-6" fill="none"></path>
+                </svg>
+              </div>
+            </d-button>
+          )}
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/empty-state/empty-state.stories.ts b/src/components/empty-state/empty-state.stories.ts
@@ -0,0 +1,69 @@
+import { DEmptyState } from './d-empty-state';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Molecules/EmptyState',
+  render: args =>
+    `<d-empty-state 
+    heading="${args.heading}" 
+    text="${args.text}"
+    button-text="${args.buttonText}"
+    >
+    <svg
+						width="255"
+						height="152"
+						viewBox="0 0 255 152"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M114.035 5.30018L8.58937 75.0889C4.30582 77.9239 3.13259 83.6931 5.96888 87.9748L43.2436 144.245C46.0799 148.526 51.8517 149.699 56.1352 146.864L161.581 77.0754C165.864 74.2403 167.037 68.4711 164.201 64.1894L126.926 7.91952C124.09 3.63785 118.318 2.46513 114.035 5.30018Z"
+							fill="var(--surface)"
+						/>
+						<path
+							d="M114.035 5.30018L8.58937 75.0889C4.30582 77.9239 3.13259 83.6931 5.96888 87.9748L43.2436 144.245C46.0799 148.526 51.8517 149.699 56.1352 146.864L161.581 77.0754C165.864 74.2403 167.037 68.4711 164.201 64.1894L126.926 7.91952C124.09 3.63785 118.318 2.46513 114.035 5.30018Z"
+							stroke="var(--on-alt)"
+							stroke-width="1.5"
+							stroke-miterlimit="10"
+							stroke-dasharray="5 5"
+						/>
+						<path
+							d="M101.61 41.9879L92.0199 113.296C91.3355 118.385 94.9083 123.065 100 123.748L232.805 141.563C237.897 142.246 242.58 138.674 243.264 133.585L252.854 62.2765C253.539 57.1871 249.966 52.5076 244.874 51.8246L112.069 34.0094C106.977 33.3264 102.295 36.8985 101.61 41.9879Z"
+							fill="var(--primary)"
+						/>
+						<path
+							d="M101.61 41.9879L92.0199 113.296C91.3355 118.385 94.9083 123.065 100 123.748L232.805 141.563C237.897 142.246 242.58 138.674 243.264 133.585L252.854 62.2765C253.539 57.1871 249.966 52.5076 244.874 51.8246L112.069 34.0094C106.977 33.3264 102.295 36.8985 101.61 41.9879Z"
+							stroke="var(--on-alt)"
+							stroke-width="1.5"
+							stroke-miterlimit="10"
+							stroke-dasharray="5 5"
+						/>
+						<path
+							d="M189.204 89.3054L175.495 87.4644L177.337 73.7736L176.579 73.6687L174.738 87.3595L161.041 85.5185L160.936 86.2875L174.644 88.1169L172.802 101.819L173.56 101.913L175.402 88.2217L189.099 90.0627L189.204 89.3054Z"
+							fill="var(--on-alt)"
+							stroke="var(--on-alt)"
+							stroke-width="1.5"
+							stroke-miterlimit="10"
+						/>
+					</svg>
+    </d-empty-state>
+    `,
+} satisfies Meta<DEmptyState>;
+
+export default meta;
+type Story = StoryObj<DEmptyState>;
+
+export const Default: Story = {
+  args: {
+    heading: 'Nothing in your wallet',
+    text: 'Start getting your first credential',
+    buttonText: 'Go to Home',
+    href: '#',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Uxc5APvp9BsY9r71rF8HhQ/DIDWallet-UI-Trial?node-id=100%3A1839&mode=dev',
+    },
+  },
+};
diff --git a/src/components/empty-state/readme.md b/src/components/empty-state/readme.md
@@ -0,0 +1,37 @@
+# d-empty-state
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description | Type     | Default     |
+| ------------ | ------------- | ----------- | -------- | ----------- |
+| `buttonText` | `button-text` |             | `string` | `undefined` |
+| `heading`    | `heading`     |             | `string` | `undefined` |
+| `href`       | `href`        |             | `string` | `undefined` |
+| `text`       | `text`        |             | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-heading](../heading)
+- [d-text](../text)
+- [d-button](../button)
+
+### Graph
+```mermaid
+graph TD;
+  d-empty-state --> d-heading
+  d-empty-state --> d-text
+  d-empty-state --> d-button
+  style d-empty-state fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/empty-state/test/d-empty-state.e2e.ts b/src/components/empty-state/test/d-empty-state.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-empty-state', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-empty-state></d-empty-state>');
+
+    const element = await page.find('d-empty-state');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/src/components/empty-state/test/d-empty-state.spec.tsx b/src/components/empty-state/test/d-empty-state.spec.tsx
@@ -0,0 +1,26 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DEmptyState } from '../d-empty-state';
+
+describe('d-empty-state', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DEmptyState],
+      html: `<d-empty-state></d-empty-state>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-empty-state>
+        <mock:shadow-root>
+         <div class="flex flex-col gap-4 items-center justify-center">
+           <div>
+             <slot></slot>
+           </div>
+           <div class="flex flex-col gap-1">
+             <d-heading size="s"></d-heading>
+             <d-text size="l"></d-text>
+           </div>
+         </div>
+        </mock:shadow-root>
+      </d-empty-state>
+    `);
+  });
+});
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
@@ -18,6 +18,8 @@
 ### Used by
 
  - [d-credential-card](../credential-card)
+ - [d-empty-state](../empty-state)
+ - [d-header](../header)
  - [d-logo](../logo)
  - [d-page-description](../page-description)
  - [d-session-card](../session-card)
@@ -26,6 +28,8 @@
 ```mermaid
 graph TD;
   d-credential-card --> d-heading
+  d-empty-state --> d-heading
+  d-header --> d-heading
   d-logo --> d-heading
   d-page-description --> d-heading
   d-session-card --> d-heading

diff --git a/src/components/text/readme.md b/src/components/text/readme.md
@@ -19,6 +19,7 @@
 
  - [d-activity-card](../activity-card)
  - [d-credential-service](../credential-service)
+ - [d-empty-state](../empty-state)
  - [d-feedback](../feedback)
  - [d-input](../input)
  - [d-page-description](../page-description)
@@ -30,6 +31,7 @@
 graph TD;
   d-activity-card --> d-text
   d-credential-service --> d-text
+  d-empty-state --> d-text
   d-feedback --> d-text
   d-input --> d-text
   d-page-description --> d-text