diff --git a/src/components.d.ts b/src/components.d.ts index 374a84f..cb8f449 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -57,6 +57,10 @@ export namespace Components { "message": string | undefined; "type": 'success' | 'error'; } + interface DHeader { + "backButton": boolean; + "settings": boolean; + } interface DHeading { "color": Color; "size": Size; @@ -172,6 +176,12 @@ declare global { prototype: HTMLDFeedbackElement; new (): HTMLDFeedbackElement; }; + interface HTMLDHeaderElement extends Components.DHeader, HTMLStencilElement { + } + var HTMLDHeaderElement: { + prototype: HTMLDHeaderElement; + new (): HTMLDHeaderElement; + }; interface HTMLDHeadingElement extends Components.DHeading, HTMLStencilElement { } var HTMLDHeadingElement: { @@ -240,6 +250,7 @@ declare global { "d-credential-service": HTMLDCredentialServiceElement; "d-definition": HTMLDDefinitionElement; "d-feedback": HTMLDFeedbackElement; + "d-header": HTMLDHeaderElement; "d-heading": HTMLDHeadingElement; "d-info-led": HTMLDInfoLedElement; "d-input": HTMLDInputElement; @@ -303,6 +314,10 @@ declare namespace LocalJSX { "onDClose"?: (event: DFeedbackCustomEvent) => void; "type"?: 'success' | 'error'; } + interface DHeader { + "backButton"?: boolean; + "settings"?: boolean; + } interface DHeading { "color"?: Color; "size"?: Size; @@ -349,6 +364,7 @@ declare namespace LocalJSX { "d-credential-service": DCredentialService; "d-definition": DDefinition; "d-feedback": DFeedback; + "d-header": DHeader; "d-heading": DHeading; "d-info-led": DInfoLed; "d-input": DInput; @@ -370,6 +386,7 @@ declare module "@stencil/core" { "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes; "d-definition": LocalJSX.DDefinition & JSXBase.HTMLAttributes; "d-feedback": LocalJSX.DFeedback & JSXBase.HTMLAttributes; + "d-header": LocalJSX.DHeader & JSXBase.HTMLAttributes; "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes; "d-info-led": LocalJSX.DInfoLed & JSXBase.HTMLAttributes; "d-input": LocalJSX.DInput & JSXBase.HTMLAttributes; diff --git a/src/components/header/d-header.css b/src/components/header/d-header.css new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/src/components/header/d-header.css @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/components/header/d-header.tsx b/src/components/header/d-header.tsx new file mode 100644 index 0000000..f45ad47 --- /dev/null +++ b/src/components/header/d-header.tsx @@ -0,0 +1,88 @@ +import { Component, Host, Prop, State, h } from '@stencil/core'; + +@Component({ + tag: 'd-header', + styleUrl: 'd-header.css', + shadow: true, +}) +export class DHeader { + @Prop() backButton: boolean = false; + @Prop() settings: boolean = false; + @State() isSettingsOpen: boolean = false; + + render() { + const openSettings = () => { + this.isSettingsOpen = !this.isSettingsOpen; + }; + const arrowBack = ( + + + + + + ); + + const more = ( + + + + + + ); + + return ( + +
+ + + {this.backButton && ( + + window.history.back()} aria-hidden> +
+ {arrowBack} +
+ + + )} + + + + {this.settings && ( + + +
{more}
+ + + )} + + + + + + + Settings + + + + Close + + + + + + + + +
+ + ); + } +} diff --git a/src/components/header/header.stories.ts b/src/components/header/header.stories.ts new file mode 100644 index 0000000..df0027e --- /dev/null +++ b/src/components/header/header.stories.ts @@ -0,0 +1,37 @@ +import { Meta, StoryObj } from '@storybook/html'; +import type { Components } from '../../components.js'; + +const meta = { + title: 'Design System/Molecule/Header', + render: args => `title`, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + backButton: false, + settings: false + }, + 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 BackButton: Story = { + args: { + backButton: true, + settings: false + } +}; + +export const Settings: Story = { + args: { + backButton: false, + settings: true + } +}; \ No newline at end of file diff --git a/src/components/header/readme.md b/src/components/header/readme.md new file mode 100644 index 0000000..9e20981 --- /dev/null +++ b/src/components/header/readme.md @@ -0,0 +1,47 @@ +# d-header + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | ----------- | --------- | ------- | +| `backButton` | `back-button` | | `boolean` | `false` | +| `settings` | `settings` | | `boolean` | `false` | + + +## Dependencies + +### Depends on + +- ion-header +- ion-toolbar +- ion-buttons +- ion-button +- ion-title +- ion-modal +- [d-heading](../heading) +- ion-content + +### Graph +```mermaid +graph TD; + d-header --> ion-header + d-header --> ion-toolbar + d-header --> ion-buttons + d-header --> ion-button + d-header --> ion-title + d-header --> ion-modal + d-header --> d-heading + d-header --> ion-content + ion-button --> ion-ripple-effect + ion-modal --> ion-backdrop + style d-header fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/header/test/d-header.e2e.ts b/src/components/header/test/d-header.e2e.ts new file mode 100644 index 0000000..df80202 --- /dev/null +++ b/src/components/header/test/d-header.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('d-header', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('d-header'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/src/components/header/test/d-header.spec.tsx b/src/components/header/test/d-header.spec.tsx new file mode 100644 index 0000000..ca3dfc9 --- /dev/null +++ b/src/components/header/test/d-header.spec.tsx @@ -0,0 +1,45 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DHeader } from '../d-header'; + +describe('d-header', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DHeader], + html: ``, + }); + expect(page.root).toEqualHtml(` + + +
+ + + + + + + + + + + + + Settings + + + + + Close + + + + + + + + +
+ + + `); + }); +}); diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md index 62a58c0..57ddcc7 100644 --- a/src/components/heading/readme.md +++ b/src/components/heading/readme.md @@ -18,6 +18,7 @@ ### Used by - [d-credential-card](../credential-card) + - [d-header](../header) - [d-logo](../logo) - [d-session-card](../session-card) @@ -25,6 +26,7 @@ ```mermaid graph TD; d-credential-card --> d-heading + d-header --> d-heading d-logo --> d-heading d-session-card --> d-heading style d-heading fill:#f9f,stroke:#333,stroke-width:4px diff --git a/src/index.html b/src/index.html index e379877..36d62dd 100644 --- a/src/index.html +++ b/src/index.html @@ -28,6 +28,7 @@

Test page

+ pippo
Typography