diff --git a/src/components.d.ts b/src/components.d.ts index 96d25e7..b7d3d98 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -116,6 +116,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; @@ -285,6 +292,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: { @@ -317,6 +330,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; } @@ -435,6 +449,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; @@ -461,6 +482,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; } @@ -488,6 +510,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 554ab70..7b319be 100644 --- a/src/components/header/d-header.css +++ b/src/components/header/d-header.css @@ -3,4 +3,4 @@ } ion-menu { --width: 340px; -} +} \ No newline at end of file diff --git a/src/components/header/readme.md b/src/components/header/readme.md index 5f5573e..1e5cdca 100644 --- a/src/components/header/readme.md +++ b/src/components/header/readme.md @@ -16,6 +16,10 @@ ## Dependencies +### Used by + + - [d-tab-page](../tab-page) + ### Depends on - ion-header @@ -40,6 +44,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/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(` + + + + +
+ + + + `); + }); +});