panic.haus/web-ui
1
0
Fork 0
Code Issues Pull Requests 10 Actions Packages Projects Releases Activity

update prettier
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Beatrice Dellacà
2026-02-23 14:23:37 +01:00
parent c2e370f0a8
commit f1c7e245aa
36 changed files with 2137 additions and 2108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/Label.stories.tsx
View File

@@ -2,48 +2,50 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Label } from './Label';
const meta = {
title: 'Components/Label',
component: Label,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Typography helper component for headings, body text, caption, error text, and inline code styles.',
},
},
},
argTypes: {
variant: {
description: 'Typography style preset.',
options: ['h1', 'h2', 'h3', 'h4', 'body', 'body2', 'caption', 'error', 'code'],
control: 'select',
table: {
type: {
summary: "'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'",
title: 'Components/Label',
component: Label,
tags: ['autodocs'],
parameters: {
docs: {
description: {
component:
'Typography helper component for headings, body text, caption, error text, and inline code styles.',
},
},
},
},
as: {
description: "Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
control: false,
table: { type: { summary: 'ElementType' } },
argTypes: {
variant: {
description: 'Typography style preset.',
options: ['h1', 'h2', 'h3', 'h4', 'body', 'body2', 'caption', 'error', 'code'],
control: 'select',
table: {
type: {
summary:
"'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code'",
},
},
},
as: {
description:
"Override rendered HTML tag or component (for example `'p'`, `'span'`, `'h2'`).",
control: false,
table: { type: { summary: 'ElementType' } },
},
className: {
description: 'Extra CSS classes.',
control: 'text',
table: { type: { summary: 'string' } },
},
children: {
description: 'Label content.',
control: 'text',
table: { type: { summary: 'ReactNode' } },
},
},
className: {
description: 'Extra CSS classes.',
control: 'text',
table: { type: { summary: 'string' } },
args: {
variant: 'body',
children: 'Label text',
},
children: {
description: 'Label content.',
control: 'text',
table: { type: { summary: 'ReactNode' } },
},
},
args: {
variant: 'body',
children: 'Label text',
},
} satisfies Meta<typeof Label>;
export default meta;
@@ -52,31 +54,31 @@ type Story = StoryObj<typeof meta>;
export const Body: Story = {};
export const Error: Story = {
args: {
variant: 'error',
children: 'This field is required',
},
args: {
variant: 'error',
children: 'This field is required',
},
};
export const Code: Story = {
args: {
variant: 'code',
children: 'const isPublished = true;',
},
args: {
variant: 'code',
children: 'const isPublished = true;',
},
};
export const VariantScale: Story = {
render: () => (
<div className="flex max-w-md flex-col gap-2">
<Label variant="caption">Caption</Label>
<Label variant="h1">Heading 1</Label>
<Label variant="h2">Heading 2</Label>
<Label variant="h3">Heading 3</Label>
<Label variant="h4">Heading 4</Label>
<Label variant="body">Primary body copy</Label>
<Label variant="body2">Secondary body copy</Label>
<Label variant="error">Error copy</Label>
<Label variant="code">npm run build</Label>
</div>
),
render: () => (
<div className="flex max-w-md flex-col gap-2">
<Label variant="caption">Caption</Label>
<Label variant="h1">Heading 1</Label>
<Label variant="h2">Heading 2</Label>
<Label variant="h3">Heading 3</Label>
<Label variant="h4">Heading 4</Label>
<Label variant="body">Primary body copy</Label>
<Label variant="body2">Secondary body copy</Label>
<Label variant="error">Error copy</Label>
<Label variant="code">npm run build</Label>
</div>
),
};