Add a heading component

app/src/components/heading/Heading.js

@@ -0,0 +1,22 @@
+import { Heading } from "rebass/styled-components";
+
+function Header({ children, ...props }) {
+  return (
+    <Heading color="text" fontFamily="heading" {...props}>
+      {children}
+    </Heading>
+  );
+}
+
+const withPrimary = (Component) => (props) => (
+  <Component as="h1" fontSize={[4,5,6]} {...props}/>
+)
+
+const withSecondary = (Component) => (props) => (
+  <Component as="h1" fontSize={[3,4,5]} {...props}/>
+)
+
+const PrimaryHeader = withPrimary(Header);
+const SecondaryHeader = withSecondary(Header);
+
+export { PrimaryHeader, SecondaryHeader };

app/src/components/heading/Heading.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PrimaryHeader, SecondaryHeader } from "components/heading";
+
+export default {
+  title: 'Components/Heading',
+};
+
+export const PrimaryHeadingStory = (props) => <PrimaryHeader {...props} />
+PrimaryHeadingStory.args = {
+  children: "Lorem ipsum de lorum col a suld icus a puentus aleetum",
+};
+
+export const SecondaryHeadingStory = (props) => <SecondaryHeader {...props} />
+SecondaryHeadingStory.args = {
+  children: "Lorem ipsum de lorum col a suld icus a puentus aleetum",
+};

app/src/components/heading/Heading.test.js

@@ -0,0 +1,14 @@
+import { PrimaryHeader, SecondaryHeader } from "./index";
+import { render } from "@testing-library/react";
+
+describe("Headings", () => {
+  test("primary header renders contents", () => {
+    const { queryByText } = render(<PrimaryHeader>Hello world</PrimaryHeader>);
+    expect(queryByText("Hello world")).toBeInTheDocument();
+  })
+
+  test("secondary header renders contents", () => {
+    const { queryByText } = render(<SecondaryHeader>Hello world</SecondaryHeader>);
+    expect(queryByText("Hello world")).toBeInTheDocument();
+  })
+})

app/src/components/heading/index.js

@@ -0,0 +1,3 @@
+import { PrimaryHeader, SecondaryHeader } from "./Heading";
+export default PrimaryHeader;
+export { PrimaryHeader, SecondaryHeader };