From fe91edd5d88ba3de997cd6a234e7815f255c200d Mon Sep 17 00:00:00 2001 From: phoebus-84 <83974413+phoebus-84@users.noreply.github.com> Date: Mon, 7 Oct 2024 18:44:47 +0200 Subject: [PATCH] feat: verification card (#162) * feat: verification card * test: update tests --- src/components.d.ts | 27 +++++++++++- src/components/avatar/readme.md | 2 + src/components/definition/d-definition.css | 13 ------ src/components/definition/d-definition.tsx | 33 ++++++++++++--- .../definition/definition.stories.ts | 11 +++++ src/components/definition/readme.md | 7 ++++ .../definition/test/d-definition.spec.tsx | 14 +++---- .../horizontal-stack/d-horizontal-stack.tsx | 6 +-- src/components/horizontal-stack/readme.md | 4 ++ .../test/d-horizontal-stack.spec.tsx | 8 ++-- src/components/icon/readme.md | 2 + src/components/info-led/readme.md | 2 + src/components/text/readme.md | 4 ++ .../verification-card/d-verification-card.css | 3 ++ .../verification-card/d-verification-card.tsx | 42 +++++++++++++++++++ src/components/verification-card/readme.md | 42 +++++++++++++++++++ .../test/d-verification-card.e2e.ts | 11 +++++ .../test/d-verification-card.spec.tsx | 33 +++++++++++++++ .../verification-card.stories.ts | 41 ++++++++++++++++++ .../vertical-stack/d-vertical-stack.tsx | 2 +- src/components/vertical-stack/readme.md | 8 ++-- 21 files changed, 273 insertions(+), 42 deletions(-) create mode 100644 src/components/verification-card/d-verification-card.css create mode 100644 src/components/verification-card/d-verification-card.tsx create mode 100644 src/components/verification-card/readme.md create mode 100644 src/components/verification-card/test/d-verification-card.e2e.ts create mode 100644 src/components/verification-card/test/d-verification-card.spec.tsx create mode 100644 src/components/verification-card/verification-card.stories.ts diff --git a/src/components.d.ts b/src/components.d.ts index 9fa5ac2..05c9186 100644 --- 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; "d-tab-page": LocalJSX.DTabPage & JSXBase.HTMLAttributes; "d-text": LocalJSX.DText & JSXBase.HTMLAttributes; + "d-verification-card": LocalJSX.DVerificationCard & JSXBase.HTMLAttributes; "d-vertical-stack": LocalJSX.DVerticalStack & JSXBase.HTMLAttributes; "didroom-logo": LocalJSX.DidroomLogo & JSXBase.HTMLAttributes; } diff --git a/src/components/avatar/readme.md b/src/components/avatar/readme.md index 5e867d4..08657dd 100644 --- 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 index a840477..e69de29 100644 --- 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 index 13efd96..bc27e9c 100644 --- 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 ( - -
-
-
{this.title}
-
{!this.hide ? this.definition : '**********'}
+ const dotted = () => ( + +
+ + +
+ + {this.title} + +
+
+ {this.definition} +
+ +
+ + ); + + const notDotted = () => ( + +
+
+
{this.title}
+
{!this.hide ? this.definition : '*'.repeat(this.definition.length)}
{this.hidable && (
); + + return this.dotted ? dotted() : notDotted(); } } diff --git a/src/components/definition/definition.stories.ts b/src/components/definition/definition.stories.ts index 2f190c6..1dbda05 100644 --- 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'} > `, @@ -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 index 8b59abd..1559e38 100644 --- 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 index 8b1c537..e281dc3 100644 --- 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: ``, }); expect(page.root).toEqualHtml(` - - -
-
-
-
-
-
+ + +
+
+
+
`); diff --git a/src/components/horizontal-stack/d-horizontal-stack.tsx b/src/components/horizontal-stack/d-horizontal-stack.tsx index c84bef1..a72d835 100644 --- 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 ( - -
- -
+ + ); } diff --git a/src/components/horizontal-stack/readme.md b/src/components/horizontal-stack/readme.md index 5ff37a5..55a66ed 100644 --- 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 index 6f28a2a..55fa801 100644 --- 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: ``, }); expect(page.root).toEqualHtml(` - - -
- -
+ + + `); diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md index 72106c3..b97f119 100644 --- 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 index 61f6276..b18f355 100644 --- 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 index ab6360d..7d154fb 100644 --- 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 new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/src/components/verification-card/d-verification-card.css @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/components/verification-card/d-verification-card.tsx b/src/components/verification-card/d-verification-card.tsx new file mode 100644 index 0000000..c61b0bf --- /dev/null +++ b/src/components/verification-card/d-verification-card.tsx @@ -0,0 +1,42 @@ +import { Component, Host, Prop, h } from '@stencil/core'; + +@Component({ + tag: 'd-verification-card', + styleUrl: 'd-verification-card.css', + shadow: true, +}) +export class DVerificationCard { + @Prop() selected: boolean = false; + @Prop({ reflect: true }) relyingParty: string; + @Prop({ reflect: true }) verifier: string; + @Prop({ reflect: true }) flow: string; + + render() { + return ( + +
+ + + +
+ {this.selected && } +
+ + + {this.flow} + + {this.relyingParty} + + + {this.verifier} + + + + + + +
+ + ); + } +} diff --git a/src/components/verification-card/readme.md b/src/components/verification-card/readme.md new file mode 100644 index 0000000..43c4e32 --- /dev/null +++ b/src/components/verification-card/readme.md @@ -0,0 +1,42 @@ +# d-verification-card + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ----------- | --------- | ----------- | +| `flow` | `flow` | | `string` | `undefined` | +| `relyingParty` | `relying-party` | | `string` | `undefined` | +| `selected` | `selected` | | `boolean` | `false` | +| `verifier` | `verifier` | | `string` | `undefined` | + + +## Dependencies + +### Depends on + +- [d-vertical-stack](../vertical-stack) +- [d-horizontal-stack](../horizontal-stack) +- [d-avatar](../avatar) +- [d-icon](../icon) +- [d-text](../text) + +### Graph +```mermaid +graph TD; + d-verification-card --> d-vertical-stack + d-verification-card --> d-horizontal-stack + d-verification-card --> d-avatar + d-verification-card --> d-icon + d-verification-card --> d-text + d-avatar --> d-icon + style d-verification-card fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/verification-card/test/d-verification-card.e2e.ts b/src/components/verification-card/test/d-verification-card.e2e.ts new file mode 100644 index 0000000..96f5a68 --- /dev/null +++ b/src/components/verification-card/test/d-verification-card.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('d-verification-card', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('d-verification-card'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/src/components/verification-card/test/d-verification-card.spec.tsx b/src/components/verification-card/test/d-verification-card.spec.tsx new file mode 100644 index 0000000..ee3ec7e --- /dev/null +++ b/src/components/verification-card/test/d-verification-card.spec.tsx @@ -0,0 +1,33 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DVerificationCard } from '../d-verification-card'; + +describe('d-verification-card', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DVerificationCard], + html: ``, + }); + expect(page.root).toEqualHtml(` + + +
+ + + +
+ + + + + + + + + + +
+ + + `); + }); +}); diff --git a/src/components/verification-card/verification-card.stories.ts b/src/components/verification-card/verification-card.stories.ts new file mode 100644 index 0000000..9903470 --- /dev/null +++ b/src/components/verification-card/verification-card.stories.ts @@ -0,0 +1,41 @@ +import { Meta, StoryObj } from '@storybook/html'; +import type { Components } from '../../components.js'; + +const meta = { + title: 'Design System/DATA DISPLAY/VerificationCard', + render: args => ` + + + + `, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + selected: false, + relyingParty: 'dyne.org', + verifier: 'John Doe', + flow: 'Age verification', + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?type=design&node-id=2005-930&mode=design&t=uW8kvn2nKPMvUzX7-0', + }, + }, +}; + +export const Selected: Story = { + args: { + ...Default.args, + selected: true, + }, +}; diff --git a/src/components/vertical-stack/d-vertical-stack.tsx b/src/components/vertical-stack/d-vertical-stack.tsx index 6f73011..9f89aa8 100644 --- a/src/components/vertical-stack/d-vertical-stack.tsx +++ b/src/components/vertical-stack/d-vertical-stack.tsx @@ -6,7 +6,7 @@ import { Component, Host, Prop, h } from '@stencil/core'; shadow: true, }) export class DVerticalStack { - @Prop() gap: 2 | 4 | 8 = 2; + @Prop() gap: 0 | 2 | 4 | 8 = 2; render() { return ( diff --git a/src/components/vertical-stack/readme.md b/src/components/vertical-stack/readme.md index d897f9c..4148253 100644 --- a/src/components/vertical-stack/readme.md +++ b/src/components/vertical-stack/readme.md @@ -5,9 +5,9 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------- | ------------- | ------- | -| `gap` | `gap` | | `2 \| 4 \| 8` | `2` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | ------------------ | ------- | +| `gap` | `gap` | | `0 \| 2 \| 4 \| 8` | `2` | ## Dependencies @@ -15,11 +15,13 @@ ### Used by - [d-checkbox](../checkbox) + - [d-verification-card](../verification-card) ### Graph ```mermaid graph TD; d-checkbox --> d-vertical-stack + d-verification-card --> d-vertical-stack style d-vertical-stack fill:#f9f,stroke:#333,stroke-width:4px ```