60 lines
1.1 KiB
TypeScript
60 lines
1.1 KiB
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import type { StoryFn, Meta } from '@storybook/react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import Title, { type TitleProps } from '..';
|
||
|
|
import '../style.scss';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: 'Block Components/Title',
|
||
|
|
component: Title,
|
||
|
|
argTypes: {
|
||
|
|
className: {
|
||
|
|
control: 'text',
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'string',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
description:
|
||
|
|
'Additional CSS classes to apply to the title element.',
|
||
|
|
},
|
||
|
|
headingLevel: {
|
||
|
|
control: 'select',
|
||
|
|
options: [ '1', '2', '3', '4', '5', '6' ],
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: "'1' | '2' | '3' | '4' | '5' | '6'",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
description:
|
||
|
|
'What level of heading tag should be used, e.g. h1, h2 etc.',
|
||
|
|
},
|
||
|
|
children: {
|
||
|
|
control: 'text',
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'ReactNode',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
description: 'The text/children to render in the title element.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
} as Meta< TitleProps >;
|
||
|
|
|
||
|
|
const Template: StoryFn< TitleProps > = ( args ) => {
|
||
|
|
const { children, ...rest } = args;
|
||
|
|
return <Title { ...rest }>{ children }</Title>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Default = Template.bind( {} );
|
||
|
|
|
||
|
|
Default.args = {
|
||
|
|
headingLevel: '1',
|
||
|
|
children: 'Title',
|
||
|
|
};
|