From 31bb2fd1079d2015758358bb615033cdd9aa8ac0 Mon Sep 17 00:00:00 2001
From: blackboardd <86866786+blackboardd@users.noreply.github.com>
Date: Thu, 23 Sep 2021 07:32:48 -0700
Subject: [PATCH] feat: Typography component for cmp library

---
 src/components/Elements/Typography/index.tsx    | 10 ++++++++++
 src/components/Elements/Typography/interface.ts | 10 ++++++++++
 src/components/Elements/Typography/styles.ts    |  8 ++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 src/components/Elements/Typography/index.tsx
 create mode 100644 src/components/Elements/Typography/interface.ts
 create mode 100644 src/components/Elements/Typography/styles.ts

diff --git a/src/components/Elements/Typography/index.tsx b/src/components/Elements/Typography/index.tsx
new file mode 100644
index 0000000..b2dd988
--- /dev/null
+++ b/src/components/Elements/Typography/index.tsx
@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from 'react';
+import { TypographyProps } from './interface';
+import { P } from './styles';
+
+export default (
+  props: HTMLAttributes<HTMLParagraphElement> & TypographyProps
+) => {
+  const { children, weight } = props;
+  return <P weight={weight}>{children}</P>;
+};
diff --git a/src/components/Elements/Typography/interface.ts b/src/components/Elements/Typography/interface.ts
new file mode 100644
index 0000000..60c9bea
--- /dev/null
+++ b/src/components/Elements/Typography/interface.ts
@@ -0,0 +1,10 @@
+import { theme } from './../../../theme';
+const weight = theme.typography.weight;
+
+export interface TypographyProps {
+  weight?:
+    | typeof weight.light
+    | typeof weight.regular
+    | typeof weight.bold
+    | typeof weight.black;
+}
diff --git a/src/components/Elements/Typography/styles.ts b/src/components/Elements/Typography/styles.ts
new file mode 100644
index 0000000..a4ace3c
--- /dev/null
+++ b/src/components/Elements/Typography/styles.ts
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+import { TypographyProps } from './interface';
+
+export const P = styled('p')<TypographyProps>`
+  font-family: ${theme.typography.font.base};
+  font-weight: ${(p) => (p ? p.weight : theme.typography.weight.regular)};
+`;