Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring

* Fix tests

front/src/modules/ui/typography/components/H1Title.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  title: string;
+  fontColor?: H1TitleFontColor;
+};
+
+export enum H1TitleFontColor {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Tertiary = 'tertiary',
+}
+
+const StyledTitle = styled.h2<{
+  fontColor: H1TitleFontColor;
+}>`
+  color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+export function H1Title({
+  title,
+  fontColor = H1TitleFontColor.Tertiary,
+}: OwnProps) {
+  return <StyledTitle fontColor={fontColor}>{title}</StyledTitle>;
+}

front/src/modules/ui/typography/components/H2Title.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+
+type Props = {
+  title: string;
+  description?: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledTitle = styled.h2`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: 0;
+`;
+
+const StyledDescription = styled.h3`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin: 0;
+  margin-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+export function H2Title({ title, description }: Props) {
+  return (
+    <StyledContainer>
+      <StyledTitle>{title}</StyledTitle>
+      {description && <StyledDescription>{description}</StyledDescription>}
+    </StyledContainer>
+  );
+}

front/src/modules/ui/typography/components/__stories__/H1Title.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { H1Title, H1TitleFontColor } from '../H1Title';
+
+const meta: Meta<typeof H1Title> = {
+  title: 'UI/Title/H1Title',
+  component: H1Title,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof H1Title>;
+
+const args = {
+  title: 'Title',
+  fontColor: H1TitleFontColor.Primary,
+};
+
+export const Default: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: Story = {
+  args,
+  decorators: [CatalogDecorator],
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'FontColor',
+          values: Object.values(H1TitleFontColor),
+          props: (fontColor: H1TitleFontColor) => ({ fontColor }),
+        },
+      ],
+    },
+  },
+};

front/src/modules/ui/typography/components/__stories__/H2Title.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { H2Title } from '../H2Title';
+
+const args = {
+  title: 'Sub title',
+  description: 'Lorem ipsum dolor sit amet',
+};
+
+const meta: Meta<typeof H2Title> = {
+  title: 'UI/Title/H2Title',
+  component: H2Title,
+  decorators: [ComponentDecorator],
+  args: {
+    title: args.title,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof H2Title>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+};
+
+export const WithDescription: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};