chore: add a Modal component

4 files changed, 16 insertions, 5 deletions

diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx
index 0b286fe..cea3532 100644
--- a/src/components/atoms/headings/heading.stories.tsx
+++ b/src/components/atoms/headings/heading.stories.tsx
@@ -9,6 +9,19 @@ export default {
     withMargin: true,
   },
   argTypes: {
+    additionalClasses: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classes.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       description: 'Heading body.',
       type: {
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index 77580cc..136571d 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import styles from './heading.module.scss';
 
-type HeadingProps = {
+export type HeadingProps = {
   /**
    * Adds additional classes.
    */
@@ -33,12 +33,12 @@ const Heading: FC<HeadingProps> = ({
   withMargin = true,
 }) => {
   const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements);
-  const variantClass = withMargin ? 'heading--margin' : 'heading--regular';
   const levelClass = `heading--${level}`;
+  const marginClass = withMargin ? 'heading--margin' : 'heading--regular';
 
   return (
     <TitleTag
-      className={`${styles.heading} ${styles[variantClass]} ${styles[levelClass]} ${additionalClasses}`}
+      className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${additionalClasses}`}
     >
       {children}
     </TitleTag>
diff --git a/src/components/atoms/icons/cog.module.scss b/src/components/atoms/icons/cog.module.scss
index 8c48fcc..5201598 100644
--- a/src/components/atoms/icons/cog.module.scss
+++ b/src/components/atoms/icons/cog.module.scss
@@ -1,7 +1,6 @@
 @use "@styles/abstracts/functions" as fun;
 
 .icon {
-  display: block;
   width: var(--icon-size, #{fun.convert-px(40)});
   fill: var(--color-primary-lighter);
   stroke: var(--color-primary-darker);
diff --git a/src/components/atoms/icons/magnifying-glass.module.scss b/src/components/atoms/icons/magnifying-glass.module.scss
index dca76fb..d14bec5 100644
--- a/src/components/atoms/icons/magnifying-glass.module.scss
+++ b/src/components/atoms/icons/magnifying-glass.module.scss
@@ -1,7 +1,6 @@
 @use "@styles/abstracts/functions" as fun;
 
 .icon {
-  display: block;
   width: var(--icon-size, #{fun.convert-px(40)});
 }