Create a paragraph component

app/src/components/paragraph/Paragraph.js

@@ -0,0 +1,11 @@
+import { Text } from "rebass/styled-components";
+
+function Paragraph ({ children, ...props }) {
+  return (
+    <Text {...props} as="p" color="text" fontFamily="body" fontSize={[1,2,3]}>
+      {children}
+    </Text>
+  );
+}
+
+export default Paragraph;

app/src/components/paragraph/Paragraph.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Paragraph from "components/paragraph";
+
+export default {
+  title: 'Components/Paragraph',
+  component: Paragraph,
+};
+
+const ParagraphTemplate = (props) => <Paragraph {...props} />
+
+export const ParagraphStory = ParagraphTemplate.bind({});
+ParagraphStory.args = {
+  children: "Lorem ipsum de lorum col a suld icus a puentus aleetum",
+};

app/src/components/paragraph/Paragraph.test.js

@@ -0,0 +1,9 @@
+import Paragraph from "./index";
+import { render } from "@testing-library/react";
+
+describe("Paragraph", () => {
+  test("render contents", () => {
+    const { queryByText } = render(<Paragraph>Hello world</Paragraph>);
+    expect(queryByText("Hello world")).toBeInTheDocument();
+  })
+})

app/src/components/paragraph/index.js

@@ -0,0 +1,2 @@
+import Paragraph from "./Paragraph";
+export default Paragraph;