From c0827e495075d34fdbeda41ed186c3b4c01b873d Mon Sep 17 00:00:00 2001 From: phoebus-84 Date: Wed, 3 Jul 2024 11:14:41 +0200 Subject: [PATCH] feat: tab page layout --- src/components.d.ts | 23 ++++++ src/components/header/d-header.css | 2 +- src/components/header/readme.md | 5 ++ src/components/heading/readme.md | 2 - src/components/scan-button/readme.md | 5 ++ src/components/tab-page/d-tab-page.css | 4 + src/components/tab-page/d-tab-page.tsx | 32 ++++++++ src/components/tab-page/readme.md | 51 ++++++++++++ src/components/tab-page/tab-page.stories.ts | 81 +++++++++++++++++++ .../tab-page/test/d-tab-page.e2e.ts | 11 +++ .../tab-page/test/d-tab-page.spec.tsx | 21 +++++ 11 files changed, 234 insertions(+), 3 deletions(-) create mode 100644 src/components/tab-page/d-tab-page.css create mode 100644 src/components/tab-page/d-tab-page.tsx create mode 100644 src/components/tab-page/readme.md create mode 100644 src/components/tab-page/tab-page.stories.ts create mode 100644 src/components/tab-page/test/d-tab-page.e2e.ts create mode 100644 src/components/tab-page/test/d-tab-page.spec.tsx diff --git a/src/components.d.ts b/src/components.d.ts index 25c55c3..c22a1e7 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -115,6 +115,13 @@ export namespace Components { "hasAlert": boolean; "tab": 'home' | 'profile' | 'activity' | 'wallet'; } + interface DTabPage { + "scanButtonHref": string | undefined; + "scanButtonText": string | undefined; + "settings": boolean; + "tab": string; + "title": string; + } interface DText { "color": Color; "size": Size; @@ -284,6 +291,12 @@ declare global { prototype: HTMLDTabButtonElement; new (): HTMLDTabButtonElement; }; + interface HTMLDTabPageElement extends Components.DTabPage, HTMLStencilElement { + } + var HTMLDTabPageElement: { + prototype: HTMLDTabPageElement; + new (): HTMLDTabPageElement; + }; interface HTMLDTextElement extends Components.DText, HTMLStencilElement { } var HTMLDTextElement: { @@ -316,6 +329,7 @@ declare global { "d-scan-button": HTMLDScanButtonElement; "d-session-card": HTMLDSessionCardElement; "d-tab-button": HTMLDTabButtonElement; + "d-tab-page": HTMLDTabPageElement; "d-text": HTMLDTextElement; "didroom-logo": HTMLDidroomLogoElement; } @@ -433,6 +447,13 @@ declare namespace LocalJSX { "hasAlert"?: boolean; "tab"?: 'home' | 'profile' | 'activity' | 'wallet'; } + interface DTabPage { + "scanButtonHref"?: string | undefined; + "scanButtonText"?: string | undefined; + "settings"?: boolean; + "tab"?: string; + "title"?: string; + } interface DText { "color"?: Color; "size"?: Size; @@ -459,6 +480,7 @@ declare namespace LocalJSX { "d-scan-button": DScanButton; "d-session-card": DSessionCard; "d-tab-button": DTabButton; + "d-tab-page": DTabPage; "d-text": DText; "didroom-logo": DidroomLogo; } @@ -486,6 +508,7 @@ declare module "@stencil/core" { "d-scan-button": LocalJSX.DScanButton & JSXBase.HTMLAttributes; "d-session-card": LocalJSX.DSessionCard & JSXBase.HTMLAttributes; "d-tab-button": LocalJSX.DTabButton & JSXBase.HTMLAttributes; + "d-tab-page": LocalJSX.DTabPage & JSXBase.HTMLAttributes; "d-text": LocalJSX.DText & JSXBase.HTMLAttributes; "didroom-logo": LocalJSX.DidroomLogo & JSXBase.HTMLAttributes; } diff --git a/src/components/header/d-header.css b/src/components/header/d-header.css index 5d4e87f..9ade72b 100644 --- a/src/components/header/d-header.css +++ b/src/components/header/d-header.css @@ -1,3 +1,3 @@ :host { display: block; -} +} \ No newline at end of file diff --git a/src/components/header/readme.md b/src/components/header/readme.md index 3ae9058..31c2a40 100644 --- a/src/components/header/readme.md +++ b/src/components/header/readme.md @@ -15,6 +15,10 @@ ## Dependencies +### Used by + + - [d-tab-page](../tab-page) + ### Depends on - ion-header @@ -39,6 +43,7 @@ graph TD; d-header --> ion-content ion-button --> ion-ripple-effect ion-menu --> ion-backdrop + d-tab-page --> d-header style d-header fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md index e1f0f23..46973f9 100644 --- a/src/components/heading/readme.md +++ b/src/components/heading/readme.md @@ -19,7 +19,6 @@ - [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) @@ -29,7 +28,6 @@ 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/scan-button/readme.md b/src/components/scan-button/readme.md index 72c69e6..d06c851 100644 --- a/src/components/scan-button/readme.md +++ b/src/components/scan-button/readme.md @@ -14,6 +14,10 @@ ## Dependencies +### Used by + + - [d-tab-page](../tab-page) + ### Depends on - [d-button](../button) @@ -22,6 +26,7 @@ ```mermaid graph TD; d-scan-button --> d-button + d-tab-page --> d-scan-button style d-scan-button fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/tab-page/d-tab-page.css b/src/components/tab-page/d-tab-page.css new file mode 100644 index 0000000..db89229 --- /dev/null +++ b/src/components/tab-page/d-tab-page.css @@ -0,0 +1,4 @@ +:host { + display: block; +} + diff --git a/src/components/tab-page/d-tab-page.tsx b/src/components/tab-page/d-tab-page.tsx new file mode 100644 index 0000000..8848cc3 --- /dev/null +++ b/src/components/tab-page/d-tab-page.tsx @@ -0,0 +1,32 @@ +import { Component, Host, Prop, h } from '@stencil/core'; + +@Component({ + tag: 'd-tab-page', + styleUrl: 'd-tab-page.css', + shadow: false, +}) +export class DTabPage { + @Prop() tab: string; + @Prop() title: string; + @Prop() settings: boolean = false; + @Prop() scanButtonText: string | undefined = undefined; + @Prop() scanButtonHref: string | undefined = undefined; + + render() { + return ( + + + + {this.title} + + + + + {this.scanButtonText && {this.scanButtonText}} +
+ + + + ); + } +} diff --git a/src/components/tab-page/readme.md b/src/components/tab-page/readme.md new file mode 100644 index 0000000..11f71e3 --- /dev/null +++ b/src/components/tab-page/readme.md @@ -0,0 +1,51 @@ +# d-tab-page + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------------- | ------------------ | ----------- | --------- | ----------- | +| `scanButtonHref` | `scan-button-href` | | `string` | `undefined` | +| `scanButtonText` | `scan-button-text` | | `string` | `undefined` | +| `settings` | `settings` | | `boolean` | `false` | +| `tab` | `tab` | | `string` | `undefined` | +| `title` | `title` | | `string` | `undefined` | + + +## Dependencies + +### Depends on + +- ion-tab +- [d-header](../header) +- ion-content +- [d-scan-button](../scan-button) + +### Graph +```mermaid +graph TD; + d-tab-page --> ion-tab + d-tab-page --> d-header + d-tab-page --> ion-content + d-tab-page --> d-scan-button + d-header --> ion-header + d-header --> ion-toolbar + d-header --> ion-buttons + d-header --> ion-button + d-header --> ion-title + d-header --> ion-menu-toggle + d-header --> ion-menu + d-header --> ion-content + ion-button --> ion-ripple-effect + ion-menu --> ion-backdrop + d-scan-button --> d-button + style d-tab-page fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/tab-page/tab-page.stories.ts b/src/components/tab-page/tab-page.stories.ts new file mode 100644 index 0000000..32049e9 --- /dev/null +++ b/src/components/tab-page/tab-page.stories.ts @@ -0,0 +1,81 @@ +import { Meta, StoryObj } from '@storybook/html'; +import type { Components } from '../../components.js'; + +const meta = { + title: 'Design System/Molecule/TabPage', + render: args => ` + + +
+ + + Account settings + + + Security and authentications + + + notification settings + + + languages + + +
+ + + + + home + + + + + `, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + tab: 'home', + title: 'Title', + settings: false, + scanButtonText: 'Scan', + scanButtonHref: 'https://www.google.com', + }, + 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 WithSettings: Story = { + args: { + ...Default.args, + settings: true, + }, +}; + +export const WithoutScanButton: Story = { + args: { + ...Default.args, + scanButtonText: undefined, + scanButtonHref: undefined, + }, +}; diff --git a/src/components/tab-page/test/d-tab-page.e2e.ts b/src/components/tab-page/test/d-tab-page.e2e.ts new file mode 100644 index 0000000..bb662ae --- /dev/null +++ b/src/components/tab-page/test/d-tab-page.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('d-tab-page', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('d-tab-page'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/src/components/tab-page/test/d-tab-page.spec.tsx b/src/components/tab-page/test/d-tab-page.spec.tsx new file mode 100644 index 0000000..46ba36a --- /dev/null +++ b/src/components/tab-page/test/d-tab-page.spec.tsx @@ -0,0 +1,21 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DTabPage } from '../d-tab-page'; + +describe('d-tab-page', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DTabPage], + html: ``, + }); + expect(page.root).toEqualHtml(` + + + + +
+ + + + `); + }); +});