feat: session card for feedbacks (#76)

* feat: session card for feedbacks * fix: remove attempt to consol log on event (d-ffedback) * fix: inherit session card svg colors * test: fix session card test spec
ForkbombEu · May 3, 2024 · c0cda6b · c0cda6b
1 parent b6d5dc3
commit c0cda6b
Show file tree

Hide file tree

Showing 11 changed files with 239 additions and 7 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -75,6 +75,11 @@ export namespace Components {
     }
     interface DLogo {
     }
+    interface DSessionCard {
+        "date": string;
+        "sid": string;
+        "success": boolean;
+    }
     interface DText {
         "color": Color;
         "size": Size;
@@ -144,7 +149,7 @@ declare global {
         new (): HTMLDDefinitionElement;
     };
     interface HTMLDFeedbackElementEventMap {
-        "close": void;
+        "dClose": void;
     }
     interface HTMLDFeedbackElement extends Components.DFeedback, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDFeedbackElementEventMap>(type: K, listener: (this: HTMLDFeedbackElement, ev: DFeedbackCustomEvent<HTMLDFeedbackElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -190,6 +195,12 @@ declare global {
         prototype: HTMLDLogoElement;
         new (): HTMLDLogoElement;
     };
+    interface HTMLDSessionCardElement extends Components.DSessionCard, HTMLStencilElement {
+    }
+    var HTMLDSessionCardElement: {
+        prototype: HTMLDSessionCardElement;
+        new (): HTMLDSessionCardElement;
+    };
     interface HTMLDTextElement extends Components.DText, HTMLStencilElement {
     }
     var HTMLDTextElement: {
@@ -213,6 +224,7 @@ declare global {
         "d-heading": HTMLDHeadingElement;
         "d-input": HTMLDInputElement;
         "d-logo": HTMLDLogoElement;
+        "d-session-card": HTMLDSessionCardElement;
         "d-text": HTMLDTextElement;
         "didroom-logo": HTMLDidroomLogoElement;
     }
@@ -267,7 +279,7 @@ declare namespace LocalJSX {
     interface DFeedback {
         "feedback"?: string;
         "message"?: string | undefined;
-        "onClose"?: (event: DFeedbackCustomEvent<void>) => void;
+        "onDClose"?: (event: DFeedbackCustomEvent<void>) => void;
         "type"?: 'success' | 'error';
     }
     interface DHeading {
@@ -290,6 +302,11 @@ declare namespace LocalJSX {
     }
     interface DLogo {
     }
+    interface DSessionCard {
+        "date"?: string;
+        "sid"?: string;
+        "success"?: boolean;
+    }
     interface DText {
         "color"?: Color;
         "size"?: Size;
@@ -307,6 +324,7 @@ declare namespace LocalJSX {
         "d-heading": DHeading;
         "d-input": DInput;
         "d-logo": DLogo;
+        "d-session-card": DSessionCard;
         "d-text": DText;
         "didroom-logo": DidroomLogo;
     }
@@ -325,6 +343,7 @@ declare module "@stencil/core" {
             "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;
             "d-input": LocalJSX.DInput & JSXBase.HTMLAttributes<HTMLDInputElement>;
             "d-logo": LocalJSX.DLogo & JSXBase.HTMLAttributes<HTMLDLogoElement>;
+            "d-session-card": LocalJSX.DSessionCard & JSXBase.HTMLAttributes<HTMLDSessionCardElement>;
             "d-text": LocalJSX.DText & JSXBase.HTMLAttributes<HTMLDTextElement>;
             "didroom-logo": LocalJSX.DidroomLogo & JSXBase.HTMLAttributes<HTMLDidroomLogoElement>;
         }

diff --git a/src/components/feedback/d-feedback.tsx b/src/components/feedback/d-feedback.tsx
@@ -51,12 +51,12 @@ export class DFeedback {
   @Prop() type: 'success' | 'error' = 'success';
   @Prop() feedback: string = '';
   @Prop() message: string | undefined = undefined;
-  @Event() close!: EventEmitter<void>;
+  @Event() dClose!: EventEmitter<void>;
   @State() hide: boolean = true;
 
   private onClose = () => {
+    this.dClose.emit();
     this.feedback = '';
-    this.close.emit();
   };
 
   render() {

diff --git a/src/components/feedback/readme.md b/src/components/feedback/readme.md
@@ -16,9 +16,9 @@
 
 ## Events
 
-| Event   | Description | Type                |
-| ------- | ----------- | ------------------- |
-| `close` |             | `CustomEvent<void>` |
+| Event    | Description | Type                |
+| -------- | ----------- | ------------------- |
+| `dClose` |             | `CustomEvent<void>` |
 
 
 ## Dependencies

diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
@@ -19,12 +19,14 @@
 
  - [d-credential-card](../credential-card)
  - [d-logo](../logo)
+ - [d-session-card](../session-card)
 
 ### Graph
 ```mermaid
 graph TD;
   d-credential-card --> d-heading
   d-logo --> d-heading
+  d-session-card --> d-heading
   style d-heading fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/components/session-card/d-session-card.css b/src/components/session-card/d-session-card.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/session-card/d-session-card.tsx b/src/components/session-card/d-session-card.tsx
@@ -0,0 +1,82 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-session-card',
+  styleUrl: 'd-session-card.css',
+  shadow: true,
+})
+export class DSessionCard {
+  @Prop() sid: string;
+  @Prop() date: string = '';
+  @Prop() success: boolean = false;
+
+  render() {
+    const successIcon = (
+      <svg width="89" height="89" viewBox="0 0 89 89" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="simple-line-icons:check" clip-path="url(#clip0_3537_19585)">
+          <path
+            id="Vector"
+            d="M44.5 0.5C20.1996 0.5 0.5 20.1996 0.5 44.5C0.5 68.8018 20.1996 88.5 44.5 88.5C68.8018 88.5 88.5 68.8018 88.5 44.5C88.5 20.1996 68.8018 0.5 44.5 0.5ZM44.5 83.0866C23.2714 83.0866 6 65.7286 6 44.4998C6 23.2712 23.2714 5.99983 44.5 5.99983C65.7286 5.99983 83 23.2713 83 44.4998C83 65.7284 65.7286 83.0866 44.5 83.0866ZM62.0601 28.4001L36.2444 54.378L24.6188 42.7524C23.5449 41.6785 21.8042 41.6785 20.7289 42.7524C19.655 43.8263 19.655 45.567 20.7289 46.6409L34.34 60.2534C35.4139 61.3259 37.1547 61.3259 38.2299 60.2534C38.3537 60.1296 38.4596 59.9948 38.5559 59.8546L65.9514 32.2899C67.0239 31.216 67.0239 29.4753 65.9514 28.4001C64.8761 27.3263 63.1354 27.3263 62.0601 28.4001Z"
+            fill="currentColor"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_3537_19585">
+            <rect width="88" height="88" fill="white" transform="translate(0.5 0.5)" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+
+    const failureIcon = (
+      <svg width="89" height="88" viewBox="0 0 89 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_3625_37654)">
+          <g clip-path="url(#clip1_3625_37654)">
+            <path
+              d="M44 1C19.6996 1 0 20.4758 0 44.5C0 68.5256 19.6996 88 44 88C68.3018 88 88 68.5256 88 44.5C88 20.4758 68.3018 1 44 1ZM44 82.6481C22.7714 82.6481 5.5 65.4874 5.5 44.4998C5.5 23.5124 22.7714 6.43733 44 6.43733C65.2286 6.43733 82.5 23.5125 82.5 44.4998C82.5 65.4871 65.2286 82.6481 44 82.6481Z"
+              fill="currentColor"
+            />
+          </g>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M25.7927 26.4994C26.9383 25.3669 28.7956 25.3669 29.9411 26.4994L62.5744 58.7619C63.72 59.8944 63.72 61.7306 62.5744 62.8631C61.4289 63.9957 59.5716 63.9957 58.4261 62.8631L25.7927 30.6006C24.6472 29.4681 24.6472 27.6319 25.7927 26.4994Z"
+            fill="currentColor"
+          />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M62.574 26.4994C61.4284 25.3669 59.5711 25.3669 58.4256 26.4994L25.7923 58.7619C24.6467 59.8944 24.6467 61.7306 25.7923 62.8631C26.9378 63.9957 28.7951 63.9957 29.9406 62.8631L62.574 30.6006C63.7195 29.4681 63.7195 27.6319 62.574 26.4994Z"
+            fill="currentColor"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_3625_37654">
+            <rect width="88" height="88" fill="white" transform="translate(0.5)" />
+          </clipPath>
+          <clipPath id="clip1_3625_37654">
+            <rect width="88" height="87" fill="white" transform="translate(0 1)" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+
+    return (
+      <Host>
+        <div class="flex flex-col items-center align-middle gap-8 w-52">
+          <span class={{ 'text-success': this.success, 'text-error': !this.success }}>{this.success ? successIcon : failureIcon}</span>
+          <d-heading size="xs" class="text-on">
+            {this.success ? 'Verified.' : 'Failure.'}
+          </d-heading>
+          <div class="flex flex-col items-center gap-1 bg-primary p-4 rounded-lg">
+            <d-text>Session id:</d-text>
+            <d-heading size="xl" class={{ 'text-success': this.success, 'text-error': !this.success }}>
+              {this.sid}
+            </d-heading>
+            <d-text>{this.date}</d-text>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/session-card/readme.md b/src/components/session-card/readme.md
@@ -0,0 +1,34 @@
+# d-session-card
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property  | Attribute | Description | Type      | Default     |
+| --------- | --------- | ----------- | --------- | ----------- |
+| `date`    | `date`    |             | `string`  | `''`        |
+| `sid`     | `sid`     |             | `string`  | `undefined` |
+| `success` | `success` |             | `boolean` | `false`     |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-heading](../heading)
+- [d-text](../text)
+
+### Graph
+```mermaid
+graph TD;
+  d-session-card --> d-heading
+  d-session-card --> d-text
+  style d-session-card fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/session-card/session-card.stories.ts b/src/components/session-card/session-card.stories.ts
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/html';
+import type { Components } from '../../components.js';
+
+const meta = {
+  title: 'Design System/Molecule/SessionCard',
+  render: args => `<d-session-card sid='${args.sid}' date='${args.date}' success=${args.success}></d-session-card>`,
+} satisfies Meta<Components.DSessionCard>;
+
+export default meta;
+type Story = StoryObj<Components.DSessionCard>;
+
+export const Default: Story = {
+  args: {
+    sid: '27ype',
+    date: '02/12/2020, 14:05:05',
+    success: false,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=3825-34382',
+    },
+  },
+};
+
+export const Success: Story = {
+  args: {
+    ...Default.args,
+    success: true,
+  },
+};
diff --git a/src/components/session-card/test/d-session-card.e2e.ts b/src/components/session-card/test/d-session-card.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-session-card', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-session-card></d-session-card>');
+
+    const element = await page.find('d-session-card');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/src/components/session-card/test/d-session-card.spec.tsx b/src/components/session-card/test/d-session-card.spec.tsx
@@ -0,0 +1,48 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DSessionCard } from '../d-session-card';
+
+describe('d-session-card', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DSessionCard],
+      html: `<d-session-card></d-session-card>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-session-card>
+        <mock:shadow-root>
+         <div class="align-middle flex flex-col gap-8 items-center w-52">
+           <span class="text-error">
+             <svg fill="none" height="88" viewBox="0 0 89 88" width="89" xmlns="http://www.w3.org/2000/svg">
+               <g clip-path="url(#clip0_3625_37654)">
+                 <g clip-path="url(#clip1_3625_37654)">
+                   <path d="M44 1C19.6996 1 0 20.4758 0 44.5C0 68.5256 19.6996 88 44 88C68.3018 88 88 68.5256 88 44.5C88 20.4758 68.3018 1 44 1ZM44 82.6481C22.7714 82.6481 5.5 65.4874 5.5 44.4998C5.5 23.5124 22.7714 6.43733 44 6.43733C65.2286 6.43733 82.5 23.5125 82.5 44.4998C82.5 65.4871 65.2286 82.6481 44 82.6481Z" fill="currentColor"></path>
+                 </g>
+                 <path clip-rule="evenodd" d="M25.7927 26.4994C26.9383 25.3669 28.7956 25.3669 29.9411 26.4994L62.5744 58.7619C63.72 59.8944 63.72 61.7306 62.5744 62.8631C61.4289 63.9957 59.5716 63.9957 58.4261 62.8631L25.7927 30.6006C24.6472 29.4681 24.6472 27.6319 25.7927 26.4994Z" fill="currentColor" fill-rule="evenodd"></path>
+                 <path clip-rule="evenodd" d="M62.574 26.4994C61.4284 25.3669 59.5711 25.3669 58.4256 26.4994L25.7923 58.7619C24.6467 59.8944 24.6467 61.7306 25.7923 62.8631C26.9378 63.9957 28.7951 63.9957 29.9406 62.8631L62.574 30.6006C63.7195 29.4681 63.7195 27.6319 62.574 26.4994Z" fill="currentColor" fill-rule="evenodd"></path>
+               </g>
+               <defs>
+                 <clipPath id="clip0_3625_37654">
+                   <rect fill="white" height="88" transform="translate(0.5)" width="88"></rect>
+                 </clipPath>
+                 <clipPath id="clip1_3625_37654">
+                   <rect fill="white" height="87" transform="translate(0 1)" width="88"></rect>
+                 </clipPath>
+               </defs>
+             </svg>
+           </span>
+           <d-heading class="text-on" size="xs">
+             Failure.
+           </d-heading>
+           <div class="bg-primary flex flex-col gap-1 items-center p-4 rounded-lg">
+             <d-text>
+               Session id:
+             </d-text>
+             <d-heading class="text-error" size="xl"></d-heading>
+             <d-text></d-text>
+           </div>
+         </div>
+       </mock:shadow-root>
+      </d-session-card>
+    `);
+  });
+});
diff --git a/src/components/text/readme.md b/src/components/text/readme.md
@@ -20,13 +20,15 @@
  - [d-credential-service](../credential-service)
  - [d-feedback](../feedback)
  - [d-input](../input)
+ - [d-session-card](../session-card)
 
 ### Graph
 ```mermaid
 graph TD;
   d-credential-service --> d-text
   d-feedback --> d-text
   d-input --> d-text
+  d-session-card --> d-text
   style d-text fill:#f9f,stroke:#333,stroke-width:4px
 ```