refactor(components): rewrite Heading component

* remove `alignment` and `withMargin` props (consumer should handle
that)
* move styles to Sass placeholders to avoid repeats with headings
coming from WordPress
* refactor some other components that depend on Heading to avoid ESlint
errors

5 files changed, 0 insertions, 380 deletions

diff --git a/src/components/atoms/headings/heading.module.scss b/src/components/atoms/headings/heading.module.scss
deleted file mode 100644
index 1c898e6..0000000
--- a/src/components/atoms/headings/heading.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.heading {
-  color: var(--color-primary-dark);
-  font-family: var(--font-family-secondary);
-  letter-spacing: 0.01ex;
-
-  &--regular {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-
-  &--left {
-    text-align: left;
-  }
-
-  &--center {
-    width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  &--margin {
-    margin-top: 0;
-    margin-bottom: 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
deleted file mode 100644
index 4aa79c2..0000000
--- a/src/components/atoms/headings/heading.stories.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Heading } from './heading';
-
-/**
- * Heading - Storybook Meta
- */
-export default {
-  title: 'Atoms/Typography/Headings',
-  component: Heading,
-  args: {
-    alignment: 'left',
-    isFake: false,
-    withMargin: true,
-  },
-  argTypes: {
-    alignment: {
-      control: {
-        type: 'select',
-      },
-      description: 'The title alignment.',
-      options: ['center', 'left'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'left' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    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,
-      },
-    },
-    id: {
-      control: {
-        type: 'text',
-      },
-      description: 'An unique id.',
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    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: 'number',
-        min: 1,
-        max: 6,
-      },
-      description: 'Heading level.',
-      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 Heading>;
-
-const Template: ComponentStory<typeof Heading> = (args) => (
-  <Heading {...args} />
-);
-
-/**
- * Heading Story - h1
- */
-export const H1 = Template.bind({});
-H1.args = {
-  children: 'Your title',
-  level: 1,
-};
-
-/**
- * Heading Story - h2
- */
-export const H2 = Template.bind({});
-H2.args = {
-  children: 'Your title',
-  level: 2,
-};
-
-/**
- * Heading Story - h3
- */
-export const H3 = Template.bind({});
-H3.args = {
-  children: 'Your title',
-  level: 3,
-};
-
-/**
- * Heading Story - h4
- */
-export const H4 = Template.bind({});
-H4.args = {
-  children: 'Your title',
-  level: 4,
-};
-
-/**
- * Heading Story - h5
- */
-export const H5 = Template.bind({});
-H5.args = {
-  children: 'Your title',
-  level: 5,
-};
-
-/**
- * Heading Story - h6
- */
-export const H6 = Template.bind({});
-H6.args = {
-  children: 'Your title',
-  level: 6,
-};
diff --git a/src/components/atoms/headings/heading.test.tsx b/src/components/atoms/headings/heading.test.tsx
deleted file mode 100644
index 61d7f8e..0000000
--- a/src/components/atoms/headings/heading.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/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
deleted file mode 100644
index b1b6164..0000000
--- a/src/components/atoms/headings/heading.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import {
-  createElement,
-  ForwardedRef,
-  forwardRef,
-  ForwardRefRenderFunction,
-  HTMLAttributes,
-  ReactNode,
-} from 'react';
-import styles from './heading.module.scss';
-
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-
-export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
-  /**
-   * The title alignment. Default: left;
-   */
-  alignment?: 'center' | 'left';
-  /**
-   * The heading body.
-   */
-  children: ReactNode;
-  /**
-   * Use an heading element or only its styles. Default: false.
-   */
-  isFake?: boolean;
-  /**
-   * HTML heading level.
-   */
-  level: HeadingLevel;
-  /**
-   * Adds margin. Default: true.
-   */
-  withMargin?: boolean;
-};
-
-type TitleTagProps = Pick<HeadingProps, 'children' | 'className' | 'id'> & {
-  tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
-};
-
-const TitleTag = forwardRef<
-  HTMLHeadingElement | HTMLParagraphElement,
-  TitleTagProps
->(
-  (
-    { children, tagName, ...props },
-    ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
-  ) => {
-    return createElement(tagName, { ...props, ref }, children);
-  }
-);
-TitleTag.displayName = 'TitleTag';
-
-const HeadingWithRef: ForwardRefRenderFunction<
-  HTMLHeadingElement | HTMLParagraphElement,
-  HeadingProps
-> = (
-  {
-    alignment = 'left',
-    children,
-    className = '',
-    id,
-    isFake = false,
-    level,
-    withMargin = true,
-    ...props
-  },
-  ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
-) => {
-  const tagName = isFake ? 'p' : (`h${level}` as TitleTagProps['tagName']);
-  const levelClass = `heading--${level}`;
-  const alignmentClass = `heading--${alignment}`;
-  const marginClass = withMargin ? 'heading--margin' : 'heading--regular';
-  const headingClass = `${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`;
-
-  return (
-    <TitleTag
-      {...props}
-      className={headingClass}
-      id={id}
-      ref={ref}
-      tagName={tagName}
-    >
-      {children}
-    </TitleTag>
-  );
-};
-
-/**
- * Heading component.
- *
- * Render an HTML heading element or a paragraph with heading styles.
- */
-export const Heading = forwardRef(HeadingWithRef);
diff --git a/src/components/atoms/headings/index.ts b/src/components/atoms/headings/index.ts
deleted file mode 100644
index 3de265c..0000000
--- a/src/components/atoms/headings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './heading';