feat: verification card (#162)

* feat: verification card * test: update tests
ForkbombEu · Oct 7, 2024 · fe91edd · fe91edd
1 parent 0dd2d77
commit fe91edd
Show file tree

Hide file tree

Showing 21 changed files with 273 additions and 42 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -75,6 +75,7 @@ export namespace Components {
     }
     interface DDefinition {
         "definition": string;
+        "dotted": boolean;
         "hidable": boolean;
         "title": string;
     }
@@ -185,8 +186,14 @@ export namespace Components {
         "color": Color;
         "size": Size;
     }
+    interface DVerificationCard {
+        "flow": string;
+        "relyingParty": string;
+        "selected": boolean;
+        "verifier": string;
+    }
     interface DVerticalStack {
-        "gap": 2 | 4 | 8;
+        "gap": 0 | 2 | 4 | 8;
     }
     interface DidroomLogo {
     }
@@ -500,6 +507,12 @@ declare global {
         prototype: HTMLDTextElement;
         new (): HTMLDTextElement;
     };
+    interface HTMLDVerificationCardElement extends Components.DVerificationCard, HTMLStencilElement {
+    }
+    var HTMLDVerificationCardElement: {
+        prototype: HTMLDVerificationCardElement;
+        new (): HTMLDVerificationCardElement;
+    };
     interface HTMLDVerticalStackElement extends Components.DVerticalStack, HTMLStencilElement {
     }
     var HTMLDVerticalStackElement: {
@@ -546,6 +559,7 @@ declare global {
         "d-tab-button": HTMLDTabButtonElement;
         "d-tab-page": HTMLDTabPageElement;
         "d-text": HTMLDTextElement;
+        "d-verification-card": HTMLDVerificationCardElement;
         "d-vertical-stack": HTMLDVerticalStackElement;
         "didroom-logo": HTMLDidroomLogoElement;
     }
@@ -619,6 +633,7 @@ declare namespace LocalJSX {
     }
     interface DDefinition {
         "definition"?: string;
+        "dotted"?: boolean;
         "hidable"?: boolean;
         "title"?: string;
     }
@@ -738,8 +753,14 @@ declare namespace LocalJSX {
         "color"?: Color;
         "size"?: Size;
     }
+    interface DVerificationCard {
+        "flow"?: string;
+        "relyingParty"?: string;
+        "selected"?: boolean;
+        "verifier"?: string;
+    }
     interface DVerticalStack {
-        "gap"?: 2 | 4 | 8;
+        "gap"?: 0 | 2 | 4 | 8;
     }
     interface DidroomLogo {
     }
@@ -777,6 +798,7 @@ declare namespace LocalJSX {
         "d-tab-button": DTabButton;
         "d-tab-page": DTabPage;
         "d-text": DText;
+        "d-verification-card": DVerificationCard;
         "d-vertical-stack": DVerticalStack;
         "didroom-logo": DidroomLogo;
     }
@@ -818,6 +840,7 @@ declare module "@stencil/core" {
             "d-tab-button": LocalJSX.DTabButton & JSXBase.HTMLAttributes<HTMLDTabButtonElement>;
             "d-tab-page": LocalJSX.DTabPage & JSXBase.HTMLAttributes<HTMLDTabPageElement>;
             "d-text": LocalJSX.DText & JSXBase.HTMLAttributes<HTMLDTextElement>;
+            "d-verification-card": LocalJSX.DVerificationCard & JSXBase.HTMLAttributes<HTMLDVerificationCardElement>;
             "d-vertical-stack": LocalJSX.DVerticalStack & JSXBase.HTMLAttributes<HTMLDVerticalStackElement>;
             "didroom-logo": LocalJSX.DidroomLogo & JSXBase.HTMLAttributes<HTMLDidroomLogoElement>;
         }

diff --git a/src/components/avatar/readme.md b/src/components/avatar/readme.md
@@ -22,6 +22,7 @@
  - [d-activity-card](../activity-card)
  - [d-credential-card](../credential-card)
  - [d-credential-service](../credential-service)
+ - [d-verification-card](../verification-card)
 
 ### Depends on
 
@@ -34,6 +35,7 @@ graph TD;
   d-activity-card --> d-avatar
   d-credential-card --> d-avatar
   d-credential-service --> d-avatar
+  d-verification-card --> d-avatar
   style d-avatar fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/components/definition/d-definition.css b/src/components/definition/d-definition.css
@@ -1,13 +0,0 @@
-:host > div {
-  @apply flex justify-between w-full border-b-on-alt border-b border-solid;
-}
-:host > dl {
-  @apply flex flex-col w-full h-11;
-}
-.title {
-  @apply text-on-alt text-xs not-italic font-normal leading-[150%] tracking-[-0.5px];
-}
-
-.definition {
-  @apply text-on not-italic text-xs font-medium leading-[150%] tracking-[-0.5px];
-}

diff --git a/src/components/definition/d-definition.tsx b/src/components/definition/d-definition.tsx
@@ -9,17 +9,36 @@ export class DDefinition {
   @Prop({ reflect: true }) title: string;
   @Prop({ reflect: true }) definition: string;
   @Prop({ reflect: true }) hidable: boolean;
+  @Prop({ reflect: true }) dotted: boolean;
   @State() hide: boolean = false;
 
   render() {
     const onClick = () => (this.hide = !this.hide);
 
-    return (
-      <Host>
-        <div>
-          <dl>
-            <dt class="title">{this.title}</dt>
-            <dd class="definition">{!this.hide ? this.definition : '**********'}</dd>
+    const dotted = () => (
+      <Host class="w-full">
+        <dl>
+          <d-horizontal-stack class="items-center">
+            <d-info-led type="warning" class="h-fit" />
+            <dt>
+              <d-text size="s" class="font-bold">
+                {this.title}
+              </d-text>
+            </dt>
+            <dd>
+              <d-text size="s">{this.definition}</d-text>
+            </dd>
+          </d-horizontal-stack>
+        </dl>
+      </Host>
+    );
+
+    const notDotted = () => (
+      <Host class="flex justify-between w-full border-b-on-alt border-b border-solid">
+        <div class="flex justify-between w-full border-b-on-alt border-b border-solid">
+          <dl class="flex flex-col w-full h-11">
+            <dt class="text-on-alt text-xs not-italic font-normal leading-[150%] tracking-[-0.5px]">{this.title}</dt>
+            <dd class="text-on not-italic text-xs font-medium leading-[150%] tracking-[-0.5px]">{!this.hide ? this.definition : '*'.repeat(this.definition.length)}</dd>
           </dl>
           {this.hidable && (
             <button onClick={onClick}>
@@ -29,5 +48,7 @@ export class DDefinition {
         </div>
       </Host>
     );
+
+    return this.dotted ? dotted() : notDotted();
   }
 }
diff --git a/src/components/definition/definition.stories.ts b/src/components/definition/definition.stories.ts
@@ -8,18 +8,22 @@ const meta = {
     title="${args.title}" 
     definition="${args.definition}"
     ${args.hidable && 'hidable'}
+    ${args.dotted && 'dotted'}
     >
     </d-definition>
     <d-definition 
     title="${args.title}" 
     definition="${args.definition}"
     ${args.hidable && 'hidable'}
+    ${args.dotted && 'dotted'}
+
     >
     </d-definition>
     <d-definition 
     title="${args.title}" 
     definition="${args.definition}"
     ${args.hidable && 'hidable'}
+    ${args.dotted && 'dotted'}
     >
     </d-definition>
     `,
@@ -47,3 +51,10 @@ export const Hidable: Story = {
     hidable: true,
   },
 };
+
+export const Dotted: Story = {
+  args: {
+    ...Default.args,
+    dotted: true,
+  },
+};
diff --git a/src/components/definition/readme.md b/src/components/definition/readme.md
@@ -10,6 +10,7 @@
 | Property     | Attribute    | Description | Type      | Default     |
 | ------------ | ------------ | ----------- | --------- | ----------- |
 | `definition` | `definition` |             | `string`  | `undefined` |
+| `dotted`     | `dotted`     |             | `boolean` | `undefined` |
 | `hidable`    | `hidable`    |             | `boolean` | `undefined` |
 | `title`      | `title`      |             | `string`  | `undefined` |
 
@@ -18,11 +19,17 @@
 
 ### Depends on
 
+- [d-horizontal-stack](../horizontal-stack)
+- [d-info-led](../info-led)
+- [d-text](../text)
 - [d-icon](../icon)
 
 ### Graph
 ```mermaid
 graph TD;
+  d-definition --> d-horizontal-stack
+  d-definition --> d-info-led
+  d-definition --> d-text
   d-definition --> d-icon
   style d-definition fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/src/components/definition/test/d-definition.spec.tsx b/src/components/definition/test/d-definition.spec.tsx
@@ -8,14 +8,12 @@ describe('d-definition', () => {
       html: `<d-definition></d-definition>`,
     });
     expect(page.root).toEqualHtml(`
-      <d-definition>
-        <mock:shadow-root>
-          <div>
-           <dl>
-             <dt class="title"></dt>
-             <dd class="definition"></dd>
-           </dl>
-          </div>
+      <d-definition class="border-b border-b-on-alt border-solid flex justify-between w-full">
+       <mock:shadow-root>
+         <div class="border-b border-b-on-alt border-solid flex justify-between w-full">
+           <dl class="flex flex-col h-11 w-full">
+             <dt class="font-normal leading-[150%] not-italic text-on-alt text-xs tracking-[-0.5px]"></dt>
+             <dd class="font-medium leading-[150%] not-italic text-on text-xs tracking-[-0.5px]"></dd>
         </mock:shadow-root>
       </d-definition>
     `);

diff --git a/src/components/horizontal-stack/d-horizontal-stack.tsx b/src/components/horizontal-stack/d-horizontal-stack.tsx
@@ -10,10 +10,8 @@ export class DHorizontalStack {
 
   render() {
     return (
-      <Host>
-        <div class={{ 'flex flex-row': true, 'gap-2': this.gap == 2, 'gap-4': this.gap == 4, 'gap-8': this.gap == 8 }}>
-          <slot></slot>
-        </div>
+      <Host class={{ 'flex flex-row': true, 'gap-2': this.gap == 2, 'gap-4': this.gap == 4, 'gap-8': this.gap == 8 }}>
+        <slot></slot>
       </Host>
     );
   }

diff --git a/src/components/horizontal-stack/readme.md b/src/components/horizontal-stack/readme.md
@@ -15,11 +15,15 @@
 ### Used by
 
  - [d-checkbox](../checkbox)
+ - [d-definition](../definition)
+ - [d-verification-card](../verification-card)
 
 ### Graph
 ```mermaid
 graph TD;
   d-checkbox --> d-horizontal-stack
+  d-definition --> d-horizontal-stack
+  d-verification-card --> d-horizontal-stack
   style d-horizontal-stack fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/components/horizontal-stack/test/d-horizontal-stack.spec.tsx b/src/components/horizontal-stack/test/d-horizontal-stack.spec.tsx
@@ -8,11 +8,9 @@ describe('d-horizontal-stack', () => {
       html: `<d-horizontal-stack></d-horizontal-stack>`,
     });
     expect(page.root).toEqualHtml(`
-      <d-horizontal-stack>
-        <mock:shadow-root>
-          <div class="flex flex-row gap-2">
-            <slot></slot>
-          </div>
+     <d-horizontal-stack class="flex flex-row gap-2">
+      <mock:shadow-root>
+        <slot></slot>
         </mock:shadow-root>
       </d-horizontal-stack>
     `);

diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
@@ -29,6 +29,7 @@
  - [d-session-card](../session-card)
  - [d-settings-menu](../settings-menu)
  - [d-tab-button](../tab-button)
+ - [d-verification-card](../verification-card)
 
 ### Graph
 ```mermaid
@@ -44,6 +45,7 @@ graph TD;
   d-session-card --> d-icon
   d-settings-menu --> d-icon
   d-tab-button --> d-icon
+  d-verification-card --> d-icon
   style d-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/components/info-led/readme.md b/src/components/info-led/readme.md
@@ -17,12 +17,14 @@
 ### Used by
 
  - [d-activity-card](../activity-card)
+ - [d-definition](../definition)
  - [d-tab-button](../tab-button)
 
 ### Graph
 ```mermaid
 graph TD;
   d-activity-card --> d-info-led
+  d-definition --> d-info-led
   d-tab-button --> d-info-led
   style d-info-led fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/src/components/text/readme.md b/src/components/text/readme.md
@@ -22,6 +22,7 @@
  - [d-checkbox](../checkbox)
  - [d-credential-card](../credential-card)
  - [d-credential-service](../credential-service)
+ - [d-definition](../definition)
  - [d-did-box](../d-did-box)
  - [d-empty-state](../empty-state)
  - [d-feedback](../feedback)
@@ -30,6 +31,7 @@
  - [d-session-card](../session-card)
  - [d-swipable-page](../swipable-page)
  - [d-tab-button](../tab-button)
+ - [d-verification-card](../verification-card)
 
 ### Graph
 ```mermaid
@@ -39,6 +41,7 @@ graph TD;
   d-checkbox --> d-text
   d-credential-card --> d-text
   d-credential-service --> d-text
+  d-definition --> d-text
   d-did-box --> d-text
   d-empty-state --> d-text
   d-feedback --> d-text
@@ -47,6 +50,7 @@ graph TD;
   d-session-card --> d-text
   d-swipable-page --> d-text
   d-tab-button --> d-text
+  d-verification-card --> d-text
   style d-text fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/components/verification-card/d-verification-card.css b/src/components/verification-card/d-verification-card.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}