feat: bootstrap Text & Heading components

example/src/App.tsx

@@ -9,9 +9,10 @@ import {
   Input,
   ISelectOptions,
   Select,
-  Radio
+  Radio,
+  Heading,
+  Text
 } from 'avocado-ui'
-import 'avocado-ui/dist/index.css'
 
 const genderOptions: ISelectOptions[] = [
   { value: 'male', displayText: 'Male' },
@@ -99,6 +100,49 @@ const App = () => {
           </Button>
         </div>
         <hr />
+
+        <Heading level='h1'>Heading 1</Heading>
+        <Text>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa
+          dolorem laborum impedit dolorum nam eligendi explicabo doloremque esse
+          voluptas nisi, accusamus enim, reiciendis est molestias sit eveniet
+          earum iste.
+        </Text>
+        <Heading level='h2'>Heading 2</Heading>
+        <Text>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa
+          dolorem laborum impedit dolorum nam eligendi explicabo doloremque esse
+          voluptas nisi, accusamus enim, reiciendis est molestias sit eveniet
+          earum iste.
+        </Text>
+        <Heading level='h3'>Heading 3</Heading>
+        <Text>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa
+          dolorem laborum impedit dolorum nam eligendi explicabo doloremque esse
+          voluptas nisi, accusamus enim, reiciendis est molestias sit eveniet
+          earum iste.
+        </Text>
+        <Heading level='h4'>Heading 4</Heading>
+        <Text>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa
+          dolorem laborum impedit dolorum nam eligendi explicabo doloremque esse
+          voluptas nisi, accusamus enim, reiciendis est molestias sit eveniet
+          earum iste.
+        </Text>
+        <Heading level='h5'>Heading 5</Heading>
+        <Text>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa
+          dolorem laborum impedit dolorum nam eligendi explicabo doloremque esse
+          voluptas nisi, accusamus enim, reiciendis est molestias sit eveniet
+          earum iste.
+        </Text>
+        <Heading level='h6'>Heading 6</Heading>
+        <Text>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa
+          dolorem laborum impedit dolorum nam eligendi explicabo doloremque esse
+          voluptas nisi, accusamus enim, reiciendis est molestias sit eveniet
+          earum iste.
+        </Text>
         <div>
           <form
             onSubmit={(e) => {

src/components/heading/heading.tsx

@@ -0,0 +1,87 @@
+import React, { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+import { css } from '@emotion/react'
+
+import { theme } from '../theme'
+
+export const Heading: FC<HeadingProps> = ({ children, ...props }) => {
+  const _className = props.className
+    ? `avocado-heading ${props.className}`
+    : `avocado-heading`
+
+  switch (props.level) {
+    case 'h1':
+      return (
+        <StyledH1 {...props} className={_className}>
+          {children}
+        </StyledH1>
+      )
+    case 'h2':
+      return (
+        <StyledH2 {...props} className={_className}>
+          {children}
+        </StyledH2>
+      )
+    case 'h3':
+      return (
+        <StyledH3 {...props} className={_className}>
+          {children}
+        </StyledH3>
+      )
+    case 'h4':
+      return (
+        <StyledH4 {...props} className={_className}>
+          {children}
+        </StyledH4>
+      )
+    case 'h5':
+      return (
+        <StyledH5 {...props} className={_className}>
+          {children}
+        </StyledH5>
+      )
+    case 'h6':
+      return (
+        <StyledH6 {...props} className={_className}>
+          {children}
+        </StyledH6>
+      )
+    default:
+      throw new Error('Please pass a heading level')
+  }
+}
+
+const StyledHeadingBase = css`
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  line-height: 1;
+`
+
+const StyledH1 = styled.h1`
+  font-size: ${theme.typography['6xl']};
+  ${StyledHeadingBase};
+`
+const StyledH2 = styled.h2`
+  font-size: ${theme.typography['5xl']};
+  ${StyledHeadingBase};
+`
+const StyledH3 = styled.h3`
+  font-size: ${theme.typography['4xl']};
+  ${StyledHeadingBase};
+`
+const StyledH4 = styled.h4`
+  font-size: ${theme.typography['3xl']};
+  ${StyledHeadingBase};
+`
+const StyledH5 = styled.h5`
+  font-size: ${theme.typography['2xl']};
+  ${StyledHeadingBase};
+`
+const StyledH6 = styled.h6`
+  font-size: ${theme.typography.xl};
+  ${StyledHeadingBase};
+`
+
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+}

src/components/heading/index.ts

@@ -0,0 +1 @@
+export * from './heading'

src/components/index.ts

@@ -3,3 +3,5 @@ export * from './theme/theme-provider/provider'
 export * from './input'
 export * from './radio'
 export * from './select'
+export * from './heading'
+export * from './text'

src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './text'

src/components/text/text.tsx

@@ -0,0 +1,14 @@
+import React, { FC, HTMLAttributes } from 'react'
+import styled from '@emotion/styled'
+
+const Text: FC<TextProps> = ({ children, ...props }) => {
+  return <StyledText {...props}>{children}</StyledText>
+}
+
+const StyledText = styled.p`
+  margin-top: 0;
+`
+
+interface TextProps extends HTMLAttributes<HTMLParagraphElement> {}
+
+export { Text }

src/components/theme/index.ts

@@ -1,12 +1,14 @@
 import colors from './colors'
 import borders from './borders'
 import spacing from './spacing'
+import typography from './typography'
 import { buttonTheme, inputTheme } from './components'
 
 const theme = {
   colors,
   borders,
   spacing,
+  typography,
   components: {
     buttonTheme,
     inputTheme

src/components/theme/typography.ts

@@ -0,0 +1,16 @@
+const typography = {
+  xs: '0.75rem',
+  ms: '0.875rem',
+  sm: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  '2xl': '1.5rem',
+  '3xl': '1.75rem',
+  '4xl': '2rem',
+  '5xl': '2.5rem',
+  '6xl': '3rem',
+  '7xl': '4rem'
+}
+
+export default typography
+export type Typography = typeof typography