From 09efae17c283d0b96efff2135dcf7e86a63d9258 Mon Sep 17 00:00:00 2001 From: puria Date: Sun, 28 Jan 2024 04:45:27 +0100 Subject: [PATCH 1/6] feat(button): Initial implementation --- .storybook/preview-head.html | 5 ++ src/components.d.ts | 23 ++++++- src/components/avatar/avatar.stories.ts | 2 +- src/components/avatar/avatar.tsx | 7 ++- src/components/avatar/test/avatar.spec.tsx | 6 +- src/components/button/button.stories.ts | 62 +++++++++++++++++++ src/components/button/d-button.scss | 31 ++++++++++ src/components/button/d-button.tsx | 34 ++++++++++ src/components/button/readme.md | 19 ++++++ src/components/button/test/d-button.e2e.ts | 11 ++++ src/components/button/test/d-button.spec.tsx | 20 ++++++ .../credential-card/d-credential-card.tsx | 14 ++--- .../d-credential-service.tsx | 2 +- src/components/types.ts | 10 +++ src/global/global.css | 4 ++ vscode-data.json | 21 +++++++ 16 files changed, 254 insertions(+), 17 deletions(-) create mode 100644 src/components/button/button.stories.ts create mode 100644 src/components/button/d-button.scss create mode 100644 src/components/button/d-button.tsx create mode 100644 src/components/button/readme.md create mode 100644 src/components/button/test/d-button.e2e.ts create mode 100644 src/components/button/test/d-button.spec.tsx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 0fecfc6..8ccd966 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,3 +1,8 @@ + diff --git a/src/components.d.ts b/src/components.d.ts index 295363b..298f1cd 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -5,8 +5,8 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { Shape, Size } from "./components/types"; -export { Shape, Size } from "./components/types"; +import { Color, Shape, Size } from "./components/types"; +export { Color, Shape, Size } from "./components/types"; export namespace Components { interface DAvatar { "name"?: string; @@ -14,6 +14,11 @@ export namespace Components { "size"?: Size; "src"?: string; } + interface DButton { + "color"?: Color; + "disabled"?: boolean; + "href"?: string; + } interface DCredentialCard { "description"?: string; "expirationDate"?: string; @@ -37,6 +42,12 @@ declare global { prototype: HTMLDAvatarElement; new (): HTMLDAvatarElement; }; + interface HTMLDButtonElement extends Components.DButton, HTMLStencilElement { + } + var HTMLDButtonElement: { + prototype: HTMLDButtonElement; + new (): HTMLDButtonElement; + }; interface HTMLDCredentialCardElement extends Components.DCredentialCard, HTMLStencilElement { } var HTMLDCredentialCardElement: { @@ -51,6 +62,7 @@ declare global { }; interface HTMLElementTagNameMap { "d-avatar": HTMLDAvatarElement; + "d-button": HTMLDButtonElement; "d-credential-card": HTMLDCredentialCardElement; "d-credential-service": HTMLDCredentialServiceElement; } @@ -62,6 +74,11 @@ declare namespace LocalJSX { "size"?: Size; "src"?: string; } + interface DButton { + "color"?: Color; + "disabled"?: boolean; + "href"?: string; + } interface DCredentialCard { "description"?: string; "expirationDate"?: string; @@ -79,6 +96,7 @@ declare namespace LocalJSX { } interface IntrinsicElements { "d-avatar": DAvatar; + "d-button": DButton; "d-credential-card": DCredentialCard; "d-credential-service": DCredentialService; } @@ -88,6 +106,7 @@ declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "d-avatar": LocalJSX.DAvatar & JSXBase.HTMLAttributes; + "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes; "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes; "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes; } diff --git a/src/components/avatar/avatar.stories.ts b/src/components/avatar/avatar.stories.ts index 8208a9b..83cab53 100644 --- a/src/components/avatar/avatar.stories.ts +++ b/src/components/avatar/avatar.stories.ts @@ -23,7 +23,7 @@ export const Rounded: Story = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/@storybook/addon-designs-sample', + url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?type=design&node-id=2005-930&mode=dev', }, }, }; diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx index 24f7ca4..3a21405 100644 --- a/src/components/avatar/avatar.tsx +++ b/src/components/avatar/avatar.tsx @@ -7,10 +7,11 @@ import { Shape, Size } from '../types'; shadow: true, }) export class Avatar { + @Prop() name?: string; + @Prop() size?: Size = 'm'; + @Prop() shape?: Shape = 'round'; @Prop({ reflect: true }) src?: string; - @Prop({ reflect: true }) name?: string; - @Prop({ reflect: true }) size?: Size = 'm'; - @Prop({ reflect: true }) shape?: Shape = 'round'; + @State() error: boolean = false; render() { diff --git a/src/components/avatar/test/avatar.spec.tsx b/src/components/avatar/test/avatar.spec.tsx index c28ec04..88fb50d 100644 --- a/src/components/avatar/test/avatar.spec.tsx +++ b/src/components/avatar/test/avatar.spec.tsx @@ -8,7 +8,7 @@ describe('d-avatar', () => { html: ``, }); expect(page.root).toEqualHtml(` - + @@ -24,7 +24,7 @@ describe('d-avatar', () => { html: ``, }); expect(root).toEqualHtml(` - + MC @@ -40,7 +40,7 @@ describe('d-avatar', () => { html: ``, }); expect(root).toEqualHtml(` - + diff --git a/src/components/button/button.stories.ts b/src/components/button/button.stories.ts new file mode 100644 index 0000000..4e10089 --- /dev/null +++ b/src/components/button/button.stories.ts @@ -0,0 +1,62 @@ +import { Meta, StoryObj } from '@storybook/html'; +import type { Components } from '../../components.js'; +import { ColorArgTypes } from '../types.js'; + +const meta = { + title: 'Design System/Atoms/Button', + render: args => `BUTTON`, + argTypes: { + disabled: { control: 'boolean', description: 'Disable the button' }, + color: ColorArgTypes, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + color: 'primary', + href: '#', + disabled: false, + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/pdwfO3dMKtaCAQakht0JE6/DIDRoom-%2B-Signroom---WF-and-GUI---Dyne.org?type=design&node-id=2584-15529&mode=design&t=7gAir6gIxMq07ebE-0', + }, + }, +}; + +export const Primary: Story = { + args: { + ...Default.args, + color: 'primary', + }, +}; +export const Accent: Story = { + args: { + ...Default.args, + color: 'accent', + }, +}; +export const AccentDisabled: Story = { + args: { + ...Default.args, + color: 'accent', + disabled: true, + }, +}; +export const PrimaryDisabled: Story = { + args: { + ...Default.args, + color: 'primary', + disabled: true, + }, +}; +export const Link: Story = { + args: { + ...Default.args, + href: '/', + }, +}; diff --git a/src/components/button/d-button.scss b/src/components/button/d-button.scss new file mode 100644 index 0000000..a5e51ca --- /dev/null +++ b/src/components/button/d-button.scss @@ -0,0 +1,31 @@ +:host > a, +:host > button { + @apply flex w-full justify-center items-center shrink-0 rounded px-0 py-2 text-center text-base not-italic font-semibold leading-8 tracking-[0.16px] uppercase; +} + +:host([disabled]:not([disabled='false'])) > a, +:host([disabled]:not([disabled='false'])) > button { + pointer-events: none; + cursor: not-allowed; + &.accent { + @apply opacity-30 text-opacity-30; + } + + &.primary { + @apply opacity-60 text-opacity-60; + } +} + +.accent { + @apply bg-accent text-on-accent; + &:active { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%), var(--accent); + } +} + +.primary { + @apply bg-primary text-on; + &:active { + background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), var(--primary); + } +} diff --git a/src/components/button/d-button.tsx b/src/components/button/d-button.tsx new file mode 100644 index 0000000..0ccb330 --- /dev/null +++ b/src/components/button/d-button.tsx @@ -0,0 +1,34 @@ +import { Component, Host, Prop, h } from '@stencil/core'; +import { Color } from '../types'; + +@Component({ + tag: 'd-button', + styleUrl: 'd-button.scss', + shadow: true, +}) +export class DButton { + @Prop() color?: Color = 'primary'; + // @Prop() outline?: boolean = false; + @Prop({ reflect: true }) href?: string; + @Prop({ reflect: true }) disabled?: boolean = false; + + render() { + if (this.href) { + return ( + + + + + + ); + } else { + return ( + + + + ); + } + } +} diff --git a/src/components/button/readme.md b/src/components/button/readme.md new file mode 100644 index 0000000..1467e82 --- /dev/null +++ b/src/components/button/readme.md @@ -0,0 +1,19 @@ +# d-button + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------- | --------- | ----------- | +| `color` | `color` | | `string` | `'primary'` | +| `disabled` | `disabled` | | `boolean` | `false` | +| `href` | `href` | | `string` | `undefined` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/button/test/d-button.e2e.ts b/src/components/button/test/d-button.e2e.ts new file mode 100644 index 0000000..eee0ad3 --- /dev/null +++ b/src/components/button/test/d-button.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('d-button', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('d-button'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/src/components/button/test/d-button.spec.tsx b/src/components/button/test/d-button.spec.tsx new file mode 100644 index 0000000..b2d954f --- /dev/null +++ b/src/components/button/test/d-button.spec.tsx @@ -0,0 +1,20 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DButton } from '../d-button'; + +describe('d-button', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DButton], + html: ``, + }); + expect(page.root).toEqualHtml(` + + + + + + `); + }); +}); diff --git a/src/components/credential-card/d-credential-card.tsx b/src/components/credential-card/d-credential-card.tsx index cd746be..e578bdd 100644 --- a/src/components/credential-card/d-credential-card.tsx +++ b/src/components/credential-card/d-credential-card.tsx @@ -32,15 +32,15 @@ const verifiedUser = ( tag: 'd-credential-card', styleUrl: 'd-credential-card.css', shadow: true, - assetsDirs: ['assets'] + assetsDirs: ['assets'], }) export class DCredentialCard { - @Prop({ reflect: true }) name: string; - @Prop({ reflect: true }) issuer: string; - @Prop({ reflect: true }) logoSrc?: string; - @Prop({ reflect: true }) description?: string; - @Prop({ reflect: true }) expirationDate?: string; - @Prop({ reflect: true }) verified?: boolean = false; + @Prop() name: string; + @Prop() issuer: string; + @Prop() logoSrc?: string; + @Prop() verified?: boolean = false; + @Prop() description?: string; + @Prop() expirationDate?: string; render() { // const imageSrc = getAssetPath(`./assets/Rectangle.png`); diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx index a1fcbe1..b41f68a 100644 --- a/src/components/credential-service/d-credential-service.tsx +++ b/src/components/credential-service/d-credential-service.tsx @@ -10,7 +10,7 @@ export class DCredentialService { @Prop() issuer: string; @Prop() logoSrc?: string; @Prop() description?: string; - @Prop() href?: string; + @Prop({ reflect: true }) href?: string; render() { const content = ( diff --git a/src/components/types.ts b/src/components/types.ts index aef9f41..a0eb1f2 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -12,3 +12,13 @@ export const ShapeArgTypes = { control: { type: 'inline-radio' }, }; export type Shape = (typeof ShapeOptions)[number]; + +const ColorOptions = 'primary accent'.split(' '); +export const ColorArgTypes = { + options: ColorOptions, + description: 'Color of the button', + defaultValue: 'primary', + default: 'primary', + control: { type: 'inline-radio' }, +}; +export type Color = (typeof ColorOptions)[number]; diff --git a/src/global/global.css b/src/global/global.css index 9bd2ab8..b16e78f 100644 --- a/src/global/global.css +++ b/src/global/global.css @@ -68,3 +68,7 @@ * { @apply text-on; } + +body { + @apply bg-surface; +} diff --git a/vscode-data.json b/vscode-data.json index 81de16c..f6efd16 100644 --- a/vscode-data.json +++ b/vscode-data.json @@ -26,6 +26,27 @@ } ] }, + { + "name": "d-button", + "description": { + "kind": "markdown", + "value": "" + }, + "attributes": [ + { + "name": "color", + "description": "" + }, + { + "name": "disabled", + "description": "" + }, + { + "name": "href", + "description": "" + } + ] + }, { "name": "d-credential-card", "description": { From 00f5814f252b96a356a1163486cfd7edcbf9cbc7 Mon Sep 17 00:00:00 2001 From: puria Date: Sun, 28 Jan 2024 04:53:56 +0100 Subject: [PATCH 2/6] fix(button): force colors on buttons --- src/components/button/d-button.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/button/d-button.scss b/src/components/button/d-button.scss index a5e51ca..3853b9e 100644 --- a/src/components/button/d-button.scss +++ b/src/components/button/d-button.scss @@ -18,6 +18,9 @@ .accent { @apply bg-accent text-on-accent; + * { + @apply text-on-accent; + } &:active { background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%), var(--accent); } @@ -25,6 +28,9 @@ .primary { @apply bg-primary text-on; + * { + @apply text-on; + } &:active { background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), var(--primary); } From c08748db0b8dcbea128977d0f53c022382e6452c Mon Sep 17 00:00:00 2001 From: puria Date: Sun, 28 Jan 2024 13:18:05 +0100 Subject: [PATCH 3/6] feat(typography): Add heading and texts --- src/components.d.ts | 32 ++++++++++++++++++++++++++++++ src/components/types.ts | 2 +- src/global/global.css | 4 ---- src/index.html | 44 +++++++++++++++++++++++++++++++++++++++-- vscode-data.json | 30 ++++++++++++++++++++++++++++ 5 files changed, 105 insertions(+), 7 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 298f1cd..b6b0701 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -34,6 +34,13 @@ export namespace Components { "logoSrc"?: string; "name": string; } + interface DHeading { + "color": Color; + "size": Size; + } + interface DText { + "size": Size; + } } declare global { interface HTMLDAvatarElement extends Components.DAvatar, HTMLStencilElement { @@ -60,11 +67,25 @@ declare global { prototype: HTMLDCredentialServiceElement; new (): HTMLDCredentialServiceElement; }; + interface HTMLDHeadingElement extends Components.DHeading, HTMLStencilElement { + } + var HTMLDHeadingElement: { + prototype: HTMLDHeadingElement; + new (): HTMLDHeadingElement; + }; + interface HTMLDTextElement extends Components.DText, HTMLStencilElement { + } + var HTMLDTextElement: { + prototype: HTMLDTextElement; + new (): HTMLDTextElement; + }; interface HTMLElementTagNameMap { "d-avatar": HTMLDAvatarElement; "d-button": HTMLDButtonElement; "d-credential-card": HTMLDCredentialCardElement; "d-credential-service": HTMLDCredentialServiceElement; + "d-heading": HTMLDHeadingElement; + "d-text": HTMLDTextElement; } } declare namespace LocalJSX { @@ -94,11 +115,20 @@ declare namespace LocalJSX { "logoSrc"?: string; "name"?: string; } + interface DHeading { + "color"?: Color; + "size"?: Size; + } + interface DText { + "size"?: Size; + } interface IntrinsicElements { "d-avatar": DAvatar; "d-button": DButton; "d-credential-card": DCredentialCard; "d-credential-service": DCredentialService; + "d-heading": DHeading; + "d-text": DText; } } export { LocalJSX as JSX }; @@ -109,6 +139,8 @@ declare module "@stencil/core" { "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes; "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes; "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes; + "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes; + "d-text": LocalJSX.DText & JSXBase.HTMLAttributes; } } } diff --git a/src/components/types.ts b/src/components/types.ts index a0eb1f2..22fb72b 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -13,7 +13,7 @@ export const ShapeArgTypes = { }; export type Shape = (typeof ShapeOptions)[number]; -const ColorOptions = 'primary accent'.split(' '); +const ColorOptions = 'primary accent success warning error'.split(' '); export const ColorArgTypes = { options: ColorOptions, description: 'Color of the button', diff --git a/src/global/global.css b/src/global/global.css index b16e78f..06de0e6 100644 --- a/src/global/global.css +++ b/src/global/global.css @@ -65,10 +65,6 @@ direction: ltr; } -* { - @apply text-on; -} - body { @apply bg-surface; } diff --git a/src/index.html b/src/index.html index 3c465c8..e379877 100644 --- a/src/index.html +++ b/src/index.html @@ -18,8 +18,10 @@

Test page

@@ -27,5 +29,43 @@

Test page

+
+ Typography +
+
+ Heading 1 +
+ Heading 2 +
+ Heading 3 +
+ Heading 4 +
+ Heading 5 +
+ Voluptatum ex exercitationem odio numquam et qui velit enim. Nihil ratione voluptatem in nam expedita eligendi sit. Qui dolorem numquam aut et mollitia. Tenetur ipsam sequi + corporis qui magnam suscipit maiores consequatur +
+ Voluptatum ex exercitationem odio numquam et qui velit enim. Nihil ratione voluptatem in nam expedita eligendi sit. Qui dolorem numquam aut et mollitia. Tenetur ipsam sequi + corporis qui magnam suscipit maiores consequatur +
+ Voluptatum ex exercitationem odio numquam et qui velit enim. Nihil ratione voluptatem in nam expedita eligendi sit. Qui dolorem numquam aut et mollitia. Tenetur ipsam sequi + corporis qui magnam suscipit maiores consequatur +
+ Voluptatum ex exercitationem odio numquam et qui velit enim. Nihil ratione voluptatem in nam expedita eligendi sit. Qui dolorem numquam aut et mollitia. Tenetur ipsam sequi + corporis qui magnam suscipit maiores consequatur +
+ Voluptatum ex exercitationem odio numquam et qui velit enim. Nihil ratione voluptatem in nam expedita eligendi sit. Qui dolorem numquam aut et mollitia. Tenetur ipsam sequi + corporis qui magnam suscipit maiores consequatur diff --git a/vscode-data.json b/vscode-data.json index f6efd16..6c5a865 100644 --- a/vscode-data.json +++ b/vscode-data.json @@ -108,6 +108,36 @@ "description": "" } ] + }, + { + "name": "d-heading", + "description": { + "kind": "markdown", + "value": "" + }, + "attributes": [ + { + "name": "color", + "description": "" + }, + { + "name": "size", + "description": "" + } + ] + }, + { + "name": "d-text", + "description": { + "kind": "markdown", + "value": "" + }, + "attributes": [ + { + "name": "size", + "description": "" + } + ] } ] } \ No newline at end of file From fbf234b2b15e01e279ac84764bb78f15aa0ba29f Mon Sep 17 00:00:00 2001 From: puria Date: Sun, 28 Jan 2024 13:18:41 +0100 Subject: [PATCH 4/6] feat(Typography): heading + text and documentation --- src/components/d-heading/d-heading.css | 27 +++++++++ src/components/d-heading/d-heading.tsx | 20 +++++++ src/components/d-heading/readme.md | 18 ++++++ .../d-heading/test/d-heading.e2e.ts | 11 ++++ .../d-heading/test/d-heading.spec.tsx | 20 +++++++ src/components/d-text/d-text.css | 19 ++++++ src/components/d-text/d-text.tsx | 19 ++++++ src/components/d-text/readme.md | 17 ++++++ src/components/d-text/test/d-text.e2e.ts | 11 ++++ src/components/d-text/test/d-text.spec.tsx | 20 +++++++ src/components/tokens/Typography.mdx | 58 +++++++++++++++++++ 11 files changed, 240 insertions(+) create mode 100644 src/components/d-heading/d-heading.css create mode 100644 src/components/d-heading/d-heading.tsx create mode 100644 src/components/d-heading/readme.md create mode 100644 src/components/d-heading/test/d-heading.e2e.ts create mode 100644 src/components/d-heading/test/d-heading.spec.tsx create mode 100644 src/components/d-text/d-text.css create mode 100644 src/components/d-text/d-text.tsx create mode 100644 src/components/d-text/readme.md create mode 100644 src/components/d-text/test/d-text.e2e.ts create mode 100644 src/components/d-text/test/d-text.spec.tsx create mode 100644 src/components/tokens/Typography.mdx diff --git a/src/components/d-heading/d-heading.css b/src/components/d-heading/d-heading.css new file mode 100644 index 0000000..e257e29 --- /dev/null +++ b/src/components/d-heading/d-heading.css @@ -0,0 +1,27 @@ +:host([size='xl']) { + @apply text-[56px] not-italic font-semibold leading-[64px]; +} + +:host([size='l']) { + @apply text-5xl not-italic font-semibold leading-[56px]; +} + +:host([size='m']) { + @apply text-[40px] not-italic font-semibold leading-[48px]; +} + +:host([size='s']) { + @apply text-[32px] not-italic font-semibold leading-10; +} + +:host([size='xs']) { + @apply text-[26px] not-italic font-semibold leading-8; +} + +:host([color='accent']) { + @apply text-on-accent; +} + +:host([color='primary']) { + @apply text-on; +} diff --git a/src/components/d-heading/d-heading.tsx b/src/components/d-heading/d-heading.tsx new file mode 100644 index 0000000..c89e843 --- /dev/null +++ b/src/components/d-heading/d-heading.tsx @@ -0,0 +1,20 @@ +import { Component, Host, Prop, h } from '@stencil/core'; +import { Color, Size } from '../types'; + +@Component({ + tag: 'd-heading', + styleUrl: 'd-heading.css', + shadow: true, +}) +export class DHeading { + @Prop() size: Size = 'm'; + @Prop() color: Color = 'primary'; + + render() { + return ( + + + + ); + } +} diff --git a/src/components/d-heading/readme.md b/src/components/d-heading/readme.md new file mode 100644 index 0000000..7fb3779 --- /dev/null +++ b/src/components/d-heading/readme.md @@ -0,0 +1,18 @@ +# d-heading + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ----------- | +| `color` | `color` | | `string` | `'primary'` | +| `size` | `size` | | `string` | `'m'` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/d-heading/test/d-heading.e2e.ts b/src/components/d-heading/test/d-heading.e2e.ts new file mode 100644 index 0000000..b30a141 --- /dev/null +++ b/src/components/d-heading/test/d-heading.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('d-heading', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('d-heading'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/src/components/d-heading/test/d-heading.spec.tsx b/src/components/d-heading/test/d-heading.spec.tsx new file mode 100644 index 0000000..fb4980e --- /dev/null +++ b/src/components/d-heading/test/d-heading.spec.tsx @@ -0,0 +1,20 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DHeading } from '../d-heading'; + +describe('d-heading', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DHeading], + html: ``, + }); + expect(page.root).toEqualHtml(` + + +

+ +

+ + + `); + }); +}); diff --git a/src/components/d-text/d-text.css b/src/components/d-text/d-text.css new file mode 100644 index 0000000..6ab4c7f --- /dev/null +++ b/src/components/d-text/d-text.css @@ -0,0 +1,19 @@ +:host([size='xl']) { + @apply text-xl not-italic font-normal leading-7; +} + +:host([size='l']) { + @apply text-lg not-italic font-normal leading-[26px]; +} + +:host([size='m']) { + @apply text-base not-italic font-normal leading-5; +} + +:host([size='s']) { + @apply text-sm not-italic font-normal leading-5; +} + +:host([size='xs']) { + @apply text-xs not-italic font-normal leading-4; +} diff --git a/src/components/d-text/d-text.tsx b/src/components/d-text/d-text.tsx new file mode 100644 index 0000000..78e951a --- /dev/null +++ b/src/components/d-text/d-text.tsx @@ -0,0 +1,19 @@ +import { Component, Host, Prop, h } from '@stencil/core'; +import { Size } from '../types'; + +@Component({ + tag: 'd-text', + styleUrl: 'd-text.css', + shadow: true, +}) +export class DText { + @Prop() size: Size = 'm'; + + render() { + return ( + + + + ); + } +} diff --git a/src/components/d-text/readme.md b/src/components/d-text/readme.md new file mode 100644 index 0000000..4239ad7 --- /dev/null +++ b/src/components/d-text/readme.md @@ -0,0 +1,17 @@ +# d-text + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ------- | +| `size` | `size` | | `string` | `'m'` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/d-text/test/d-text.e2e.ts b/src/components/d-text/test/d-text.e2e.ts new file mode 100644 index 0000000..8383b76 --- /dev/null +++ b/src/components/d-text/test/d-text.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('d-text', () => { + it('renders', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const element = await page.find('d-text'); + expect(element).toHaveClass('hydrated'); + }); +}); diff --git a/src/components/d-text/test/d-text.spec.tsx b/src/components/d-text/test/d-text.spec.tsx new file mode 100644 index 0000000..2876110 --- /dev/null +++ b/src/components/d-text/test/d-text.spec.tsx @@ -0,0 +1,20 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { DText } from '../d-text'; + +describe('d-text', () => { + it('renders', async () => { + const page = await newSpecPage({ + components: [DText], + html: ``, + }); + expect(page.root).toEqualHtml(` + + + + + + + + `); + }); +}); diff --git a/src/components/tokens/Typography.mdx b/src/components/tokens/Typography.mdx new file mode 100644 index 0000000..1490a3c --- /dev/null +++ b/src/components/tokens/Typography.mdx @@ -0,0 +1,58 @@ +import { Meta, Typeset } from '@storybook/blocks'; + + + +export const typography = { + type: { + primary: 'Gantari Variable', + }, + weight: { + regular: '400', + semibold: '600', + }, + size: { + xs: 12, + s: 14, + m: 16, + l: 18, + xl: 20, + h: { + xs: 26, + s: 32, + m: 40, + l: 48, + xl: 56, + }, + }, +}; + +export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; +export const SampleHeading = 'Heading'; + +# Typography + +## Headings + +**Font:** Gantari + +**Weights:** 600(semibold) + + + +## Regular text + +**Font:** Gantari + +**Weights:** 400(regular) + + From bc6cd32b3dad869c812ac097a9dd135dbc94fa7e Mon Sep 17 00:00:00 2001 From: puria Date: Sun, 28 Jan 2024 13:24:42 +0100 Subject: [PATCH 5/6] test(Typography): fix colors and update tests --- src/components.d.ts | 2 ++ src/components/d-heading/test/d-heading.spec.tsx | 6 ++---- src/components/d-text/d-text.css | 8 ++++++++ src/components/d-text/d-text.tsx | 5 +++-- src/components/d-text/test/d-text.spec.tsx | 4 +--- 5 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index b6b0701..94e5671 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -39,6 +39,7 @@ export namespace Components { "size": Size; } interface DText { + "color": Color; "size": Size; } } @@ -120,6 +121,7 @@ declare namespace LocalJSX { "size"?: Size; } interface DText { + "color"?: Color; "size"?: Size; } interface IntrinsicElements { diff --git a/src/components/d-heading/test/d-heading.spec.tsx b/src/components/d-heading/test/d-heading.spec.tsx index fb4980e..b207cc6 100644 --- a/src/components/d-heading/test/d-heading.spec.tsx +++ b/src/components/d-heading/test/d-heading.spec.tsx @@ -8,11 +8,9 @@ describe('d-heading', () => { html: ``, }); expect(page.root).toEqualHtml(` - + -

- -

+ `); diff --git a/src/components/d-text/d-text.css b/src/components/d-text/d-text.css index 6ab4c7f..d5182e9 100644 --- a/src/components/d-text/d-text.css +++ b/src/components/d-text/d-text.css @@ -17,3 +17,11 @@ :host([size='xs']) { @apply text-xs not-italic font-normal leading-4; } + +:host([color='accent']) { + @apply text-on-accent; +} + +:host([color='primary']) { + @apply text-on; +} diff --git a/src/components/d-text/d-text.tsx b/src/components/d-text/d-text.tsx index 78e951a..10a7b4c 100644 --- a/src/components/d-text/d-text.tsx +++ b/src/components/d-text/d-text.tsx @@ -1,5 +1,5 @@ import { Component, Host, Prop, h } from '@stencil/core'; -import { Size } from '../types'; +import { Color, Size } from '../types'; @Component({ tag: 'd-text', @@ -8,10 +8,11 @@ import { Size } from '../types'; }) export class DText { @Prop() size: Size = 'm'; + @Prop() color: Color = 'primary'; render() { return ( - + ); diff --git a/src/components/d-text/test/d-text.spec.tsx b/src/components/d-text/test/d-text.spec.tsx index 2876110..e968782 100644 --- a/src/components/d-text/test/d-text.spec.tsx +++ b/src/components/d-text/test/d-text.spec.tsx @@ -8,11 +8,9 @@ describe('d-text', () => { html: ``, }); expect(page.root).toEqualHtml(` - + - - `); From ae65cea1f88e0efaf7b3a55c7bbbf957f2edf3bc Mon Sep 17 00:00:00 2001 From: puria Date: Sun, 28 Jan 2024 16:27:33 +0100 Subject: [PATCH 6/6] fix: dark mode not shown without class --- .../{d-heading => heading}/d-heading.css | 0 .../{d-heading => heading}/d-heading.tsx | 0 .../{d-heading => heading}/readme.md | 0 .../test/d-heading.e2e.ts | 0 .../test/d-heading.spec.tsx | 0 src/components/{d-text => text}/d-text.css | 0 src/components/{d-text => text}/d-text.tsx | 0 src/components/{d-text => text}/readme.md | 0 .../{d-text => text}/test/d-text.e2e.ts | 0 .../{d-text => text}/test/d-text.spec.tsx | 0 src/global/global.css | 20 ++++++++++--------- 11 files changed, 11 insertions(+), 9 deletions(-) rename src/components/{d-heading => heading}/d-heading.css (100%) rename src/components/{d-heading => heading}/d-heading.tsx (100%) rename src/components/{d-heading => heading}/readme.md (100%) rename src/components/{d-heading => heading}/test/d-heading.e2e.ts (100%) rename src/components/{d-heading => heading}/test/d-heading.spec.tsx (100%) rename src/components/{d-text => text}/d-text.css (100%) rename src/components/{d-text => text}/d-text.tsx (100%) rename src/components/{d-text => text}/readme.md (100%) rename src/components/{d-text => text}/test/d-text.e2e.ts (100%) rename src/components/{d-text => text}/test/d-text.spec.tsx (100%) diff --git a/src/components/d-heading/d-heading.css b/src/components/heading/d-heading.css similarity index 100% rename from src/components/d-heading/d-heading.css rename to src/components/heading/d-heading.css diff --git a/src/components/d-heading/d-heading.tsx b/src/components/heading/d-heading.tsx similarity index 100% rename from src/components/d-heading/d-heading.tsx rename to src/components/heading/d-heading.tsx diff --git a/src/components/d-heading/readme.md b/src/components/heading/readme.md similarity index 100% rename from src/components/d-heading/readme.md rename to src/components/heading/readme.md diff --git a/src/components/d-heading/test/d-heading.e2e.ts b/src/components/heading/test/d-heading.e2e.ts similarity index 100% rename from src/components/d-heading/test/d-heading.e2e.ts rename to src/components/heading/test/d-heading.e2e.ts diff --git a/src/components/d-heading/test/d-heading.spec.tsx b/src/components/heading/test/d-heading.spec.tsx similarity index 100% rename from src/components/d-heading/test/d-heading.spec.tsx rename to src/components/heading/test/d-heading.spec.tsx diff --git a/src/components/d-text/d-text.css b/src/components/text/d-text.css similarity index 100% rename from src/components/d-text/d-text.css rename to src/components/text/d-text.css diff --git a/src/components/d-text/d-text.tsx b/src/components/text/d-text.tsx similarity index 100% rename from src/components/d-text/d-text.tsx rename to src/components/text/d-text.tsx diff --git a/src/components/d-text/readme.md b/src/components/text/readme.md similarity index 100% rename from src/components/d-text/readme.md rename to src/components/text/readme.md diff --git a/src/components/d-text/test/d-text.e2e.ts b/src/components/text/test/d-text.e2e.ts similarity index 100% rename from src/components/d-text/test/d-text.e2e.ts rename to src/components/text/test/d-text.e2e.ts diff --git a/src/components/d-text/test/d-text.spec.tsx b/src/components/text/test/d-text.spec.tsx similarity index 100% rename from src/components/d-text/test/d-text.spec.tsx rename to src/components/text/test/d-text.spec.tsx diff --git a/src/global/global.css b/src/global/global.css index 06de0e6..5f41c2d 100644 --- a/src/global/global.css +++ b/src/global/global.css @@ -39,15 +39,17 @@ } @media (prefers-color-scheme: dark) { - --surface: #1f2433; - --primary: #253151; - --accent: #dfddd7; - --on-accent: #223360; - --on: #f7faff; - --on-alt: #c0c0ca; - --success: #4ecb71; - --warning: #ff9601; - --error: #ff443b; + :root { + --surface: #1f2433; + --primary: #253151; + --accent: #dfddd7; + --on-accent: #223360; + --on: #f7faff; + --on-alt: #c0c0ca; + --success: #4ecb71; + --warning: #ff9601; + --error: #ff443b; + } } }