aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/headings
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/headings')
-rw-r--r--src/components/atoms/headings/heading.stories.tsx14
-rw-r--r--src/components/atoms/headings/heading.tsx14
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>