Complete text component

src/components/Text/index.tsx

@@ -1,7 +1,28 @@
 import { Wrapper } from './styles';
 
-const Text = () => {
-  return <Wrapper></Wrapper>;
+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 (
+    <Wrapper className={`${variant} ${className}`} {...props}>
+      {children}
+    </Wrapper>
+  );
 };
 
 export default Text;

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<WrapperProps>`
+  ${({ 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;
+  }
+`;

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 };