diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
index 0c237f9..1c8671e 100644
--- a/src/components/Text/index.tsx
+++ b/src/components/Text/index.tsx
@@ -1,7 +1,28 @@
import { Wrapper } from './styles';
-const Text = () => {
- return ;
+type TextProps = {
+ children?: React.ReactNode | JSX.Element | string;
+ className?: string;
+ variant?: 'display' | 'headline' | 'title' | 'subheader' | 'body' | 'caption';
+ color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+ align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+ display?: 'initial' | 'block' | 'inline';
+ gutterBottom?: boolean;
+ lineThrough?: boolean;
+ weight?: 'initial' | 'normal' | 'bold' | number;
+};
+
+const Text = ({
+ children,
+ variant = 'body',
+ className,
+ ...props
+}: TextProps) => {
+ return (
+
+ {children}
+
+ );
};
export default Text;
diff --git a/src/components/Text/styles.ts b/src/components/Text/styles.ts
index 14ea300..4bd30e8 100644
--- a/src/components/Text/styles.ts
+++ b/src/components/Text/styles.ts
@@ -1,3 +1,130 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
-export const Wrapper = styled.div``;
+type WrapperProps = {
+ color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
+ align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+ display?: 'initial' | 'block' | 'inline';
+ gutterBottom?: boolean;
+ lineThrough?: boolean;
+ weight?: 'initial' | 'normal' | 'bold' | number;
+};
+
+export const Wrapper = styled.p`
+ ${({ color, theme }) => {
+ if (!color)
+ return css`
+ color: inherit;
+ `;
+ switch (color) {
+ case 'client':
+ return css`
+ color: ${theme.colors.client.main};
+ `;
+ case 'productOwner':
+ return css`
+ color: ${theme.colors.productOwner.main};
+ `;
+ case 'developer':
+ return css`
+ color: ${theme.colors.developer.main};
+ `;
+ case 'admin':
+ return css`
+ color: ${theme.colors.admin.main};
+ `;
+ case 'success':
+ return css`
+ color: ${theme.colors.success.main};
+ `;
+ case 'warning':
+ return css`
+ color: ${theme.colors.warning.main};
+ `;
+ case 'error':
+ return css`
+ color: ${theme.colors.error.main};
+ `;
+ case 'black':
+ return css`
+ color: ${theme.colors.black.main};
+ `;
+ case 'white':
+ return css`
+ color: ${theme.colors.white.main};
+ `;
+ default:
+ return css`
+ color: ${color};
+ `;
+ }
+ }}
+
+ ${({ display }) =>
+ display
+ ? css`
+ display: ${display};
+ `
+ : css`
+ display: block;
+ `}
+
+ ${({ gutterBottom }) =>
+ gutterBottom &&
+ css`
+ margin-bottom: 0.35rem;
+ `};
+
+ ${({ lineThrough }) =>
+ lineThrough &&
+ css`
+ text-decoration: line-through;
+ `};
+
+ ${({ align }) =>
+ align
+ ? css`
+ align: ${align};
+ `
+ : css`
+ align: initial;
+ `}
+
+ ${({ weight }) =>
+ weight
+ ? css`
+ font-weight: ${weight};
+ `
+ : css`
+ font-weight: initial;
+ `}
+
+ &.display {
+ font-size: 2.25rem;
+ line-height: 3rem;
+ }
+
+ &.headline {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ }
+
+ &.title {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ }
+
+ &.subheader {
+ font-size: 1rem;
+ line-height: 1.5rem;
+ }
+
+ &.body {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+
+ &.caption {
+ font-size: 0.75rem;
+ line-height: 1rem;
+ }
+`;
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 4e118d9..3798a1f 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,4 +1,5 @@
import Button from './Button';
import Box from './Box';
+import Text from './Text';
-export { Box, Button };
+export { Button, Box, Text };