From 9d8ca3c4332664ffa3e5c1b3031352a9001f42b0 Mon Sep 17 00:00:00 2001 From: phoebus-84 Date: Tue, 11 Jun 2024 16:10:00 +0200 Subject: [PATCH 1/2] feat: activity card --- src/components.d.ts | 13 +++++ .../activity-card/activity.stories.ts | 57 +++++++++++++++++++ .../activity-card/d-activity-card.css | 3 + .../activity-card/d-activity-card.tsx | 38 +++++++++++++ src/components/activity-card/readme.md | 10 ++++ .../activity-card/test/d-activity-card.e2e.ts | 11 ++++ .../test/d-activity-card.spec.tsx | 18 ++++++ 7 files changed, 150 insertions(+) create mode 100644 src/components/activity-card/activity.stories.ts create mode 100644 src/components/activity-card/d-activity-card.css create mode 100644 src/components/activity-card/d-activity-card.tsx create mode 100644 src/components/activity-card/readme.md create mode 100644 src/components/activity-card/test/d-activity-card.e2e.ts create mode 100644 src/components/activity-card/test/d-activity-card.spec.tsx diff --git a/src/components.d.ts b/src/components.d.ts index 90a7af4..ba141ab 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -8,6 +8,8 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Color, Shape, Size } from "./components/types"; export { Color, Shape, Size } from "./components/types"; export namespace Components { + interface DActivityCard { + } interface DAvatar { "name"?: string; "shape"?: Shape; @@ -114,6 +116,12 @@ export interface DInputCustomEvent extends CustomEvent { target: HTMLDInputElement; } declare global { + interface HTMLDActivityCardElement extends Components.DActivityCard, HTMLStencilElement { + } + var HTMLDActivityCardElement: { + prototype: HTMLDActivityCardElement; + new (): HTMLDActivityCardElement; + }; interface HTMLDAvatarElement extends Components.DAvatar, HTMLStencilElement { } var HTMLDAvatarElement: { @@ -252,6 +260,7 @@ declare global { new (): HTMLDidroomLogoElement; }; interface HTMLElementTagNameMap { + "d-activity-card": HTMLDActivityCardElement; "d-avatar": HTMLDAvatarElement; "d-button": HTMLDButtonElement; "d-buttons-group": HTMLDButtonsGroupElement; @@ -272,6 +281,8 @@ declare global { } } declare namespace LocalJSX { + interface DActivityCard { + } interface DAvatar { "name"?: string; "shape"?: Shape; @@ -370,6 +381,7 @@ declare namespace LocalJSX { interface DidroomLogo { } interface IntrinsicElements { + "d-activity-card": DActivityCard; "d-avatar": DAvatar; "d-button": DButton; "d-buttons-group": DButtonsGroup; @@ -393,6 +405,7 @@ export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { + "d-activity-card": LocalJSX.DActivityCard & JSXBase.HTMLAttributes; "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes; "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes; "d-buttons-group": LocalJSX.DButtonsGroup & JSXBase.HTMLAttributes; diff --git a/src/components/activity-card/activity.stories.ts b/src/components/activity-card/activity.stories.ts new file mode 100644 index 0000000..d973056 --- /dev/null +++ b/src/components/activity-card/activity.stories.ts @@ -0,0 +1,57 @@ +import { DFeedback } from './d-feedback'; +import { Meta, StoryObj } from '@storybook/html'; + +const meta = { + title: 'Design System/Molecule/Feedback', + render: args => + ``, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + feedback: 'Credential Issued succesfully', + type: 'success', + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=3449%3A48602&mode=dev', + }, + }, +}; + +export const Void: Story = { + args: { + feedback: '', + }, +}; + +export const Error: Story = { + args: { + feedback: '404 - Not Found', + type: 'error', + }, +}; + +export const SuccessWithMessage: Story = { + args: { + ...Default.args, + message: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id turpis ac libero tincidunt fermentum. Nullam nec tortor nec ante tincidunt fermentum. Nullam nec tortor nec ante tincidunt fermentum.', + }, +}; + +export const ErrorWithMessage: Story = { + args: { + ...Error.args, + message: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id turpis ac libero tincidunt fermentum. Nullam nec tortor nec ante tincidunt fermentum. Nullam nec tortor nec ante tincidunt fermentum.', + }, +}; diff --git a/src/components/activity-card/d-activity-card.css b/src/components/activity-card/d-activity-card.css new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/src/components/activity-card/d-activity-card.css @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/components/activity-card/d-activity-card.tsx b/src/components/activity-card/d-activity-card.tsx new file mode 100644 index 0000000..182a83c --- /dev/null +++ b/src/components/activity-card/d-activity-card.tsx @@ -0,0 +1,38 @@ +import { Component, EventEmitter, Host, Prop, Event, h } from '@stencil/core'; + +@Component({ + tag: 'd-activity-card', + styleUrl: 'd-activity-card.css', + shadow: true, +}) +export class DActivityCard { + @Prop({ reflect: true }) id: string; + @Prop({ reflect: true }) name: string; + @Prop({ reflect: true }) logo: string; + @Prop({ reflect: true }) credentialSrc: string; + + @Event() dCancelActivity!: EventEmitter; + + render() { + const cancelActivity = (value: string) => { + this.dCancelActivity.emit(value); + }; + return ( + +
+ +
+ + await cancelActivity(this.id)}> + remove + + + show me! + + +
+
+ + ); + } +} diff --git a/src/components/activity-card/readme.md b/src/components/activity-card/readme.md new file mode 100644 index 0000000..df739ad --- /dev/null +++ b/src/components/activity-card/readme.md @@ -0,0 +1,10 @@ +# d-activity-card + + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/activity-card/test/d-activity-card.e2e.ts b/src/components/activity-card/test/d-activity-card.e2e.ts new file mode 100644 index 0000000..901f3f7 --- /dev/null +++ b/src/components/activity-card/test/d-activity-card.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('d-activity-card', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('d-activity-card'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/src/components/activity-card/test/d-activity-card.spec.tsx b/src/components/activity-card/test/d-activity-card.spec.tsx new file mode 100644 index 0000000..9d7d5ad --- /dev/null +++ b/src/components/activity-card/test/d-activity-card.spec.tsx @@ -0,0 +1,18 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DActivityCard } from '../d-activity-card'; + +describe('d-activity-card', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DActivityCard], + html: ``, + }); + expect(page.root).toEqualHtml(` + + + + + + `); + }); +}); From 013ade488e35c9bccfe2079df4987c6f7f2a33f7 Mon Sep 17 00:00:00 2001 From: phoebus-84 Date: Wed, 19 Jun 2024 16:54:36 +0200 Subject: [PATCH 2/2] feat: activity card --- src/components.d.ts | 12 ++++ .../activity-card/activity.stories.ts | 69 +++++++------------ .../activity-card/d-activity-card.tsx | 36 +++++----- src/components/activity-card/readme.md | 30 ++++++++ src/components/avatar/readme.md | 2 + src/components/info-led/readme.md | 13 ++++ src/components/text/readme.md | 2 + 7 files changed, 101 insertions(+), 63 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index ba141ab..2db7d4b 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -9,6 +9,12 @@ import { Color, Shape, Size } from "./components/types"; export { Color, Shape, Size } from "./components/types"; export namespace Components { interface DActivityCard { + "date": string; + "description": string; + "logo": string; + "message": string; + "name": string; + "type": 'error' | 'warning' | 'success'; } interface DAvatar { "name"?: string; @@ -282,6 +288,12 @@ declare global { } declare namespace LocalJSX { interface DActivityCard { + "date"?: string; + "description"?: string; + "logo"?: string; + "message"?: string; + "name"?: string; + "type"?: 'error' | 'warning' | 'success'; } interface DAvatar { "name"?: string; diff --git a/src/components/activity-card/activity.stories.ts b/src/components/activity-card/activity.stories.ts index d973056..3c05c80 100644 --- a/src/components/activity-card/activity.stories.ts +++ b/src/components/activity-card/activity.stories.ts @@ -1,57 +1,36 @@ -import { DFeedback } from './d-feedback'; +import { DActivityCard } from './d-activity-card'; import { Meta, StoryObj } from '@storybook/html'; const meta = { - title: 'Design System/Molecule/Feedback', + title: 'Design System/Molecule/Activity', render: args => - ``, -} satisfies Meta; + ` + + action 1 + + + action 2 + + `, +} satisfies Meta; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { - feedback: 'Credential Issued succesfully', - type: 'success', - }, - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?node-id=3449%3A48602&mode=dev', - }, - }, -}; - -export const Void: Story = { - args: { - feedback: '', - }, -}; - -export const Error: Story = { - args: { - feedback: '404 - Not Found', + name: 'Proof of humanity is expired', + // placeholder logo + logo: 'https://via.placeholder.com/150', + message: 'Proof of humanity is expired', + description: 'Your proof of humanity has expired. Please renew it if you need it.', + date: '1 day ago', type: 'error', }, }; - -export const SuccessWithMessage: Story = { - args: { - ...Default.args, - message: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id turpis ac libero tincidunt fermentum. Nullam nec tortor nec ante tincidunt fermentum. Nullam nec tortor nec ante tincidunt fermentum.', - }, -}; - -export const ErrorWithMessage: Story = { - args: { - ...Error.args, - message: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id turpis ac libero tincidunt fermentum. Nullam nec tortor nec ante tincidunt fermentum. Nullam nec tortor nec ante tincidunt fermentum.', - }, -}; diff --git a/src/components/activity-card/d-activity-card.tsx b/src/components/activity-card/d-activity-card.tsx index 182a83c..24cd1f1 100644 --- a/src/components/activity-card/d-activity-card.tsx +++ b/src/components/activity-card/d-activity-card.tsx @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Host, Prop, Event, h } from '@stencil/core'; +import { Component, Host, Prop, h } from '@stencil/core'; @Component({ tag: 'd-activity-card', @@ -6,30 +6,30 @@ import { Component, EventEmitter, Host, Prop, Event, h } from '@stencil/core'; shadow: true, }) export class DActivityCard { - @Prop({ reflect: true }) id: string; @Prop({ reflect: true }) name: string; @Prop({ reflect: true }) logo: string; - @Prop({ reflect: true }) credentialSrc: string; - - @Event() dCancelActivity!: EventEmitter; + @Prop({ reflect: true }) message: string; + @Prop({ reflect: true }) description: string; + @Prop({ reflect: true }) date: string; + @Prop({ reflect: true }) type: 'error' | 'warning' | 'success'; render() { - const cancelActivity = (value: string) => { - this.dCancelActivity.emit(value); - }; return ( -
+
-
- - await cancelActivity(this.id)}> - remove - - - show me! - - +
+

{this.message}

+ + {this.description} + +
+ + {this.date} +
+
+ +
diff --git a/src/components/activity-card/readme.md b/src/components/activity-card/readme.md index df739ad..65b5bf5 100644 --- a/src/components/activity-card/readme.md +++ b/src/components/activity-card/readme.md @@ -5,6 +5,36 @@ +## Properties + +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------- | ----------------------------------- | ----------- | +| `credentialSrc` | `credential-src` | | `string` | `undefined` | +| `date` | `date` | | `string` | `undefined` | +| `description` | `description` | | `string` | `undefined` | +| `logo` | `logo` | | `string` | `undefined` | +| `message` | `message` | | `string` | `undefined` | +| `name` | `name` | | `string` | `undefined` | +| `type` | `type` | | `"error" \| "success" \| "warning"` | `undefined` | + + +## Dependencies + +### Depends on + +- [d-avatar](../avatar) +- [d-text](../text) +- [d-info-led](../info-led) + +### Graph +```mermaid +graph TD; + d-activity-card --> d-avatar + d-activity-card --> d-text + d-activity-card --> d-info-led + style d-activity-card fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/avatar/readme.md b/src/components/avatar/readme.md index 87b8a24..4755dd8 100644 --- a/src/components/avatar/readme.md +++ b/src/components/avatar/readme.md @@ -19,6 +19,7 @@ ### Used by + - [d-activity-card](../activity-card) - [d-credential-card](../credential-card) - [d-credential-detail](../credential-detail) - [d-credential-service](../credential-service) @@ -26,6 +27,7 @@ ### Graph ```mermaid graph TD; + d-activity-card --> d-avatar d-credential-card --> d-avatar d-credential-detail --> d-avatar d-credential-service --> d-avatar diff --git a/src/components/info-led/readme.md b/src/components/info-led/readme.md index c2d3637..96f6a4e 100644 --- a/src/components/info-led/readme.md +++ b/src/components/info-led/readme.md @@ -12,6 +12,19 @@ | `type` | `type` | | `"error" \| "success" \| "warning"` | `'success'` | +## Dependencies + +### Used by + + - [d-activity-card](../activity-card) + +### Graph +```mermaid +graph TD; + d-activity-card --> d-info-led + style d-info-led 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 index 91b7890..707355f 100644 --- a/src/components/text/readme.md +++ b/src/components/text/readme.md @@ -17,6 +17,7 @@ ### Used by + - [d-activity-card](../activity-card) - [d-credential-service](../credential-service) - [d-feedback](../feedback) - [d-input](../input) @@ -26,6 +27,7 @@ ### Graph ```mermaid graph TD; + d-activity-card --> d-text d-credential-service --> d-text d-feedback --> d-text d-input --> d-text