diff options
Diffstat (limited to 'src/components/atoms/headings')
| -rw-r--r-- | src/components/atoms/headings/heading.stories.tsx | 14 | ||||
| -rw-r--r-- | src/components/atoms/headings/heading.tsx | 14 |
2 files changed, 15 insertions, 13 deletions
diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx index cea3532..66a84dc 100644 --- a/src/components/atoms/headings/heading.stories.tsx +++ b/src/components/atoms/headings/heading.stories.tsx @@ -9,13 +9,13 @@ export default { withMargin: true, }, argTypes: { - additionalClasses: { + className: { control: { type: 'text', }, - description: 'Set additional classes.', + description: 'Set additional classnames.', table: { - category: 'Options', + category: 'Styles', }, type: { name: 'string', @@ -71,12 +71,12 @@ export default { }, } as ComponentMeta<typeof HeadingComponent>; -const Template: ComponentStory<typeof HeadingComponent> = (args) => { - const { level, ...props } = args; - return <HeadingComponent level={level || 1} {...props} />; -}; +const Template: ComponentStory<typeof HeadingComponent> = (args) => ( + <HeadingComponent {...args} /> +); export const Heading = Template.bind({}); Heading.args = { children: 'Your title', + level: 1, }; diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx index 136571d..3048534 100644 --- a/src/components/atoms/headings/heading.tsx +++ b/src/components/atoms/headings/heading.tsx @@ -1,19 +1,21 @@ import { FC } from 'react'; import styles from './heading.module.scss'; +export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; + export type HeadingProps = { /** - * Adds additional classes. + * Set additional classnames. */ - additionalClasses?: string; + className?: string; /** * Use an heading element or only its styles. Default: false. */ isFake?: boolean; /** - * HTML heading level: 'h1', 'h2', 'h3', 'h4', 'h5' or 'h6'. + * HTML heading level. */ - level: 1 | 2 | 3 | 4 | 5 | 6; + level: HeadingLevel; /** * Adds margin. Default: true. */ @@ -27,7 +29,7 @@ export type HeadingProps = { */ const Heading: FC<HeadingProps> = ({ children, - additionalClasses, + className, isFake = false, level, withMargin = true, @@ -38,7 +40,7 @@ const Heading: FC<HeadingProps> = ({ return ( <TitleTag - className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${additionalClasses}`} + className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${className}`} > {children} </TitleTag> |
