feat: Add text component (#12)

src/components/Text/index.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import Text from "./index";
+
+export default {
+  title: "Text",
+  component: Text,
+  argTypes: {
+    bold: {
+      name: "bold",
+      table: {
+        type: { summary: "bool", detail: "Bold the text" },
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: null,
+      },
+    },
+    fontSize: {
+      name: "fontSize",
+      table: {
+        type: { summary: "string", detail: "Fontsize in px or em" },
+        defaultValue: { summary: "16px" },
+      },
+      control: {
+        type: null,
+      },
+    },
+    color: {
+      name: "color",
+      table: {
+        type: { summary: "string", detail: "Color from the theme, or CSS color" },
+        defaultValue: { summary: "theme.colors.text" },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+};
+
+export const Default: React.FC = () => {
+  return (
+    <div>
+      <Text>Default</Text>
+      <Text bold>Bold text</Text>
+      <Text fontSize="24px">Custom fontsize</Text>
+      <Text color="red">Custom color</Text>
+    </div>
+  );
+};

src/components/Text/index.tsx

@@ -0,0 +1,28 @@
+import styled, { DefaultTheme } from "styled-components";
+
+export interface Props {
+  color?: string;
+  fontSize?: string;
+  bold?: boolean;
+}
+
+interface ThemedProps extends Props {
+  theme: DefaultTheme;
+}
+
+const getColor = ({ color, theme }: ThemedProps) => {
+  return color || theme.colors.text;
+};
+
+const getFontSize = ({ fontSize }: Props) => {
+  return fontSize || "16px";
+};
+
+const Text = styled.div<Props>`
+  color: ${getColor};
+  font-size: ${getFontSize};
+  font-weight: ${({ bold }) => (bold ? 600 : 400)};
+  line-height: 1.4;
+`;
+
+export default Text;