Extract typography components from twenty-front to twenty-ui. (#5466)
Removed the following components from twenty-front and moved them to twenty-ui. - H1Title. - H2Title. - H3Title. Moving components in smaller chunks to ease the process of resolving conflicts. <img width="1255" alt="image" src="https://github.com/twentyhq/twenty/assets/125115953/a3953659-5dfd-4d03-a6de-50b064129d55"> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Abdullah
@ -1,37 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type H1TitleProps = {
|
||||
title: ReactNode;
|
||||
fontColor?: H1TitleFontColor;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
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 const H1Title = ({
|
||||
title,
|
||||
fontColor = H1TitleFontColor.Tertiary,
|
||||
className,
|
||||
}: H1TitleProps) => {
|
||||
return (
|
||||
<StyledTitle fontColor={fontColor} className={className}>
|
||||
{title}
|
||||
</StyledTitle>
|
||||
);
|
||||
};
|
||||
@ -1,50 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type H2TitleProps = {
|
||||
title: string;
|
||||
description?: string;
|
||||
addornment?: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
const StyledTitleContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
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 const H2Title = ({
|
||||
title,
|
||||
description,
|
||||
addornment,
|
||||
className,
|
||||
}: H2TitleProps) => (
|
||||
<StyledContainer className={className}>
|
||||
<StyledTitleContainer>
|
||||
<StyledTitle>{title}</StyledTitle>
|
||||
{addornment}
|
||||
</StyledTitleContainer>
|
||||
{description && <StyledDescription>{description}</StyledDescription>}
|
||||
</StyledContainer>
|
||||
);
|
||||
@ -1,19 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type H3TitleProps = {
|
||||
title: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const StyledH3Title = styled.h3`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
margin: 0;
|
||||
margin-bottom: ${({ theme }) => theme.spacing(4)};
|
||||
`;
|
||||
|
||||
export const H3Title = ({ title, className }: H3TitleProps) => {
|
||||
return <StyledH3Title className={className}>{title}</StyledH3Title>;
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
|
||||
|
||||
import { H1Title, H1TitleFontColor } from '../H1Title';
|
||||
|
||||
const meta: Meta<typeof H1Title> = {
|
||||
title: 'UI/Display/Typography/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: CatalogStory<Story, typeof H1Title> = {
|
||||
args,
|
||||
decorators: [CatalogDecorator],
|
||||
parameters: {
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'FontColor',
|
||||
values: Object.values(H1TitleFontColor),
|
||||
props: (fontColor: H1TitleFontColor) => ({ fontColor }),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,31 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { ComponentDecorator } from 'twenty-ui';
|
||||
|
||||
import { H2Title } from '../H2Title';
|
||||
|
||||
const args = {
|
||||
title: 'Sub title',
|
||||
description: 'Lorem ipsum dolor sit amet',
|
||||
};
|
||||
|
||||
const meta: Meta<typeof H2Title> = {
|
||||
title: 'UI/Display/Typography/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],
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { ComponentDecorator } from 'twenty-ui';
|
||||
|
||||
import { H3Title } from '../H3Title';
|
||||
|
||||
const meta: Meta<typeof H3Title> = {
|
||||
title: 'UI/Display/Typography/Title/H3Title',
|
||||
component: H3Title,
|
||||
decorators: [ComponentDecorator],
|
||||
args: {
|
||||
title: 'H3 title',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof H3Title>;
|
||||
|
||||
export const Default: Story = {
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
@ -1,12 +1,9 @@
|
||||
import { ReactNode, useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { AnimatePresence, LayoutGroup } from 'framer-motion';
|
||||
import { H1Title, H1TitleFontColor } from 'twenty-ui';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
|
||||
import {
|
||||
H1Title,
|
||||
H1TitleFontColor,
|
||||
} from '@/ui/display/typography/components/H1Title';
|
||||
import { Button, ButtonAccent } from '@/ui/input/button/components/Button';
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
import { Modal } from '@/ui/layout/modal/components/Modal';
|
||||
|
||||
Reference in New Issue
Block a user