chore: add a Branding component

4 files changed, 130 insertions, 4 deletions

diff --git a/src/components/atoms/headings/heading.module.scss b/src/components/atoms/headings/heading.module.scss
new file mode 100644
index 0000000..8620f6f
--- /dev/null
+++ b/src/components/atoms/headings/heading.module.scss
@@ -0,0 +1,57 @@
+@use "@styles/abstracts/functions" as fun;
+
+.heading {
+  color: var(--color-primary-dark);
+  font-family: var(--font-family-secondary);
+  letter-spacing: 0.01ex;
+
+  &--regular {
+    margin: 0;
+  }
+
+  &--margin {
+    margin: 0 0 var(--spacing-sm);
+
+    & + & {
+      margin-top: var(--spacing-md);
+    }
+  }
+
+  &--1 {
+    font-size: var(--font-size-3xl);
+    font-weight: 500;
+  }
+
+  &--2 {
+    padding-bottom: fun.convert-px(3);
+    background: linear-gradient(
+        to top,
+        var(--color-primary-dark) 0.3rem,
+        transparent 0.3rem
+      )
+      0 0 / 3rem 100% no-repeat;
+    font-size: var(--font-size-2xl);
+    font-weight: 500;
+    text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
+  }
+
+  &--3 {
+    font-size: var(--font-size-xl);
+    font-weight: 500;
+  }
+
+  &--4 {
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+  }
+
+  &--5 {
+    font-size: var(--font-size-md);
+    font-weight: 600;
+  }
+
+  &--6 {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+  }
+}
diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx
index 9958af9..0b286fe 100644
--- a/src/components/atoms/headings/heading.stories.tsx
+++ b/src/components/atoms/headings/heading.stories.tsx
@@ -4,6 +4,10 @@ import HeadingComponent from './heading';
 export default {
   title: 'Atoms/Headings',
   component: HeadingComponent,
+  args: {
+    isFake: false,
+    withMargin: true,
+  },
   argTypes: {
     children: {
       description: 'Heading body.',
@@ -12,6 +16,20 @@ export default {
         required: true,
       },
     },
+    isFake: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Use an heading element or only its styles.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
     level: {
       control: {
         type: 'select',
@@ -23,6 +41,20 @@ export default {
         required: true,
       },
     },
+    withMargin: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Adds margin.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: true },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
   },
 } as ComponentMeta<typeof HeadingComponent>;
 
diff --git a/src/components/atoms/headings/heading.test.tsx b/src/components/atoms/headings/heading.test.tsx
index b83f7cd..6b6789a 100644
--- a/src/components/atoms/headings/heading.test.tsx
+++ b/src/components/atoms/headings/heading.test.tsx
@@ -43,4 +43,14 @@ describe('Heading', () => {
       'Level 6'
     );
   });
+
+  it('renders a text with heading styles', () => {
+    render(
+      <Heading isFake={true} level={2}>
+        Fake heading
+      </Heading>
+    );
+    expect(screen.queryByRole('heading', { level: 2 })).not.toBeInTheDocument();
+    expect(screen.getByText('Fake heading')).toHaveClass('heading');
+  });
 });
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index 1535140..77580cc 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -1,21 +1,48 @@
 import { FC } from 'react';
+import styles from './heading.module.scss';
 
 type HeadingProps = {
   /**
+   * Adds additional classes.
+   */
+  additionalClasses?: string;
+  /**
+   * Use an heading element or only its styles. Default: false.
+   */
+  isFake?: boolean;
+  /**
    * HTML heading level: 'h1', 'h2', 'h3', 'h4', 'h5' or 'h6'.
    */
   level: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Adds margin. Default: true.
+   */
+  withMargin?: boolean;
 };
 
 /**
  * Heading component.
  *
- * Render an HTML heading element.
+ * Render an HTML heading element or a paragraph with heading styles.
  */
-const Heading: FC<HeadingProps> = ({ children, level }) => {
-  const TitleTag = `h${level}` as keyof JSX.IntrinsicElements;
+const Heading: FC<HeadingProps> = ({
+  children,
+  additionalClasses,
+  isFake = false,
+  level,
+  withMargin = true,
+}) => {
+  const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements);
+  const variantClass = withMargin ? 'heading--margin' : 'heading--regular';
+  const levelClass = `heading--${level}`;
 
-  return <TitleTag>{children}</TitleTag>;
+  return (
+    <TitleTag
+      className={`${styles.heading} ${styles[variantClass]} ${styles[levelClass]} ${additionalClasses}`}
+    >
+      {children}
+    </TitleTag>
+  );
 };
 
 export default Heading;