feat: Heading (#18)

src/components/Heading/index.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Heading from "./index";
+
+export default {
+  title: "Heading",
+  component: Heading,
+  argTypes: {},
+};
+
+export const Sizes: React.FC = () => {
+  return (
+    <div>
+      <Heading>Default</Heading>
+      <Heading size="md">Size md</Heading>
+      <Heading size="lg">Size lg</Heading>
+      <Heading size="xl">Size xl</Heading>
+      <Heading size="xxl">Size xxl</Heading>
+    </div>
+  );
+};
+
+export const tags: React.FC = () => {
+  return (
+    <div>
+      <Heading>Default</Heading>
+      <Heading as="h1">Tag h1</Heading>
+      <Heading as="h2">Tag h2</Heading>
+      <Heading as="h3">Tag h3</Heading>
+      <Heading as="h4">Tag h4</Heading>
+      <Heading as="h5">Tag h5</Heading>
+      <Heading as="h6">Tag h6</Heading>
+    </div>
+  );
+};

src/components/Heading/index.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import Text from "../Text";
+import { tags, sizes, Props } from "./types";
+
+const style = {
+  [sizes.MD]: {
+    fontSize: "20px",
+  },
+  [sizes.LG]: {
+    fontSize: "24px",
+  },
+  [sizes.XL]: {
+    fontSize: "40px",
+  },
+  [sizes.XXL]: {
+    fontSize: "64px",
+  },
+};
+
+const Heading = styled(Text).attrs({ bold: true })<Props>`
+  ${({ size }) => style[size || sizes.MD]}
+`;
+
+Heading.defaultProps = {
+  as: tags.H2,
+};
+
+export default Heading;

src/components/Heading/types.ts

@@ -0,0 +1,23 @@
+export const tags = {
+  H1: "h1",
+  H2: "h2",
+  H3: "h3",
+  H4: "h4",
+  H5: "h5",
+  H6: "h6",
+};
+
+export const sizes = {
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  XXL: "xxl",
+};
+
+type Tags = typeof tags[keyof typeof tags];
+type Sizes = typeof sizes[keyof typeof sizes];
+
+export interface Props {
+  as?: Tags;
+  size?: Sizes;
+}

src/components/Link/index.tsx

@@ -7,7 +7,7 @@ export interface Props {
 }
 
 const Link = styled(Text).attrs({ as: "a", bold: true })<Props>`
-  color: ${({ theme }) => theme.colors.iris};
+  color: ${({ theme }) => theme.colors.primary};
   &:hover {
     text-decoration: underline;
   }

src/index.ts

@@ -3,6 +3,7 @@ export { default as Button } from "./components/Button";
 export { default as ButtonMenu } from "./components/ButtonMenu";
 export { default as ButtonMenuItem } from "./components/ButtonMenu/ButtonMenuItem";
 export { default as Card } from "./components/Card";
+export { default as Heading } from "./components/Heading";
 export { default as Text } from "./components/Text";
 export { default as Link } from "./components/Link";
 export { default as ResetCSS } from "./ResetCSS";