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> | 
