This commit is contained in:
@@ -8,37 +8,42 @@ const meta = {
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Typography helper component for headings, body text, caption, error text, and inline code styles.'
|
||||
}
|
||||
}
|
||||
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'" } }
|
||||
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' } }
|
||||
table: { type: { summary: 'ElementType' } },
|
||||
},
|
||||
className: {
|
||||
description: 'Extra CSS classes.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } }
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
children: {
|
||||
description: 'Label content.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'ReactNode' } }
|
||||
}
|
||||
table: { type: { summary: 'ReactNode' } },
|
||||
},
|
||||
},
|
||||
args: {
|
||||
variant: 'body',
|
||||
children: 'Label text'
|
||||
}
|
||||
children: 'Label text',
|
||||
},
|
||||
} satisfies Meta<typeof Label>;
|
||||
|
||||
export default meta;
|
||||
@@ -49,15 +54,15 @@ export const Body: Story = {};
|
||||
export const Error: Story = {
|
||||
args: {
|
||||
variant: 'error',
|
||||
children: 'This field is required'
|
||||
}
|
||||
children: 'This field is required',
|
||||
},
|
||||
};
|
||||
|
||||
export const Code: Story = {
|
||||
args: {
|
||||
variant: 'code',
|
||||
children: 'const isPublished = true;'
|
||||
}
|
||||
children: 'const isPublished = true;',
|
||||
},
|
||||
};
|
||||
|
||||
export const VariantScale: Story = {
|
||||
@@ -73,5 +78,5 @@ export const VariantScale: Story = {
|
||||
<Label variant="error">Error copy</Label>
|
||||
<Label variant="code">npm run build</Label>
|
||||
</div>
|
||||
)
|
||||
),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user