4 files changed, 251 insertions, 0 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
new file mode 100644
index 0000000..66a84dc
--- /dev/null
+++ b/src/components/atoms/headings/heading.stories.tsx
@@ -0,0 +1,82 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import HeadingComponent from './heading';
+
+export default {
+  title: 'Atoms/Headings',
+  component: HeadingComponent,
+  args: {
+    isFake: false,
+    withMargin: true,
+  },
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    children: {
+      description: 'Heading body.',
+      type: {
+        name: 'string',
+        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',
+      },
+      description: 'Heading level.',
+      options: [1, 2, 3, 4, 5, 6],
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    withMargin: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Adds margin.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: true },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof HeadingComponent>;
+
+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.test.tsx b/src/components/atoms/headings/heading.test.tsx
new file mode 100644
index 0000000..6b6789a
--- /dev/null
+++ b/src/components/atoms/headings/heading.test.tsx
@@ -0,0 +1,56 @@
+import { render, screen } from '@test-utils';
+import Heading from './heading';
+
+describe('Heading', () => {
+  it('renders a h1', () => {
+    render(<Heading level={1}>Level 1</Heading>);
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      'Level 1'
+    );
+  });
+
+  it('renders a h2', () => {
+    render(<Heading level={2}>Level 2</Heading>);
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'Level 2'
+    );
+  });
+
+  it('renders a h3', () => {
+    render(<Heading level={3}>Level 3</Heading>);
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent(
+      'Level 3'
+    );
+  });
+
+  it('renders a h4', () => {
+    render(<Heading level={4}>Level 4</Heading>);
+    expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent(
+      'Level 4'
+    );
+  });
+
+  it('renders a h5', () => {
+    render(<Heading level={5}>Level 5</Heading>);
+    expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent(
+      'Level 5'
+    );
+  });
+
+  it('renders a h6', () => {
+    render(<Heading level={6}>Level 6</Heading>);
+    expect(screen.getByRole('heading', { level: 6 })).toHaveTextContent(
+      '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
new file mode 100644
index 0000000..4703b5d
--- /dev/null
+++ b/src/components/atoms/headings/heading.tsx
@@ -0,0 +1,56 @@
+import { FC } from 'react';
+import styles from './heading.module.scss';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export type HeadingProps = {
+  /**
+   * Set additional classnames.
+   */
+  className?: string;
+  /**
+   * The heading id.
+   */
+  id?: string;
+  /**
+   * Use an heading element or only its styles. Default: false.
+   */
+  isFake?: boolean;
+  /**
+   * HTML heading level.
+   */
+  level: HeadingLevel;
+  /**
+   * Adds margin. Default: true.
+   */
+  withMargin?: boolean;
+};
+
+/**
+ * Heading component.
+ *
+ * Render an HTML heading element or a paragraph with heading styles.
+ */
+const Heading: FC<HeadingProps> = ({
+  children,
+  className,
+  id,
+  isFake = false,
+  level,
+  withMargin = true,
+}) => {
+  const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements);
+  const levelClass = `heading--${level}`;
+  const marginClass = withMargin ? 'heading--margin' : 'heading--regular';
+
+  return (
+    <TitleTag
+      className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${className}`}
+      id={id}
+    >
+      {children}
+    </TitleTag>
+  );
+};
+
+export default Heading;