From b84c6404d80ba7d48a213cca9ed9817314fdcf57 Mon Sep 17 00:00:00 2001
From: Misha Moroshko <michael.moroshko@gmail.com>
Date: Fri, 22 May 2020 09:15:41 +1000
Subject: [PATCH] Add Divider component

---
 src/components/Divider.js                     | 64 +++++++++++++++++++
 src/components/Divider.test.js                | 24 +++++++
 src/components/index.js                       |  1 +
 website/gatsby-config.js                      |  3 +
 website/src/pages/components/divider/index.js | 24 +++++++
 .../pages/components/divider/resources.mdx    |  8 +++
 .../src/pages/components/divider/usage.mdx    |  8 +++
 7 files changed, 132 insertions(+)
 create mode 100644 src/components/Divider.js
 create mode 100644 src/components/Divider.test.js
 create mode 100644 website/src/pages/components/divider/index.js
 create mode 100644 website/src/pages/components/divider/resources.mdx
 create mode 100644 website/src/pages/components/divider/usage.mdx

diff --git a/src/components/Divider.js b/src/components/Divider.js
new file mode 100644
index 00000000..3490bd74
--- /dev/null
+++ b/src/components/Divider.js
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { nanoid } from "nanoid";
+import useTheme from "../hooks/useTheme";
+import { responsiveMarginType } from "../hooks/useResponsiveProp";
+import useResponsivePropsCSS from "../hooks/useResponsivePropsCSS";
+import { responsiveMargin } from "../utils/css";
+
+const COLORS = ["grey.t07"];
+const DEFAULT_PROPS = {
+  color: "grey.t07",
+};
+
+Divider.DEFAULT_PROPS = DEFAULT_PROPS;
+
+function Divider(_props) {
+  const props = { ...DEFAULT_PROPS, ..._props };
+  const { color, testId } = props;
+  const [patternId] = useState(() => `divider-${nanoid()}`);
+  const theme = useTheme();
+  const circleColor = theme.getColor(color);
+  const responsiveCSS = useResponsivePropsCSS(props, DEFAULT_PROPS, {
+    margin: responsiveMargin,
+  });
+
+  return (
+    <svg
+      css={responsiveCSS}
+      width="100%"
+      height="32"
+      focusable="false"
+      role="img"
+      data-testid={testId}
+    >
+      <pattern
+        id={patternId}
+        x="0"
+        y="0"
+        width="20"
+        height="32"
+        patternUnits="userSpaceOnUse"
+      >
+        <circle cx="4" cy="4" r="4" fill={circleColor}></circle>
+        <circle cx="14" cy="16" r="4" fill={circleColor}></circle>
+        <circle cx="4" cy="28" r="4" fill={circleColor}></circle>
+      </pattern>
+      <rect
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        fill={`url(#${patternId})`}
+      ></rect>
+    </svg>
+  );
+}
+
+Divider.propTypes = {
+  ...responsiveMarginType,
+  color: PropTypes.oneOf(COLORS),
+  testId: PropTypes.string,
+};
+
+export default Divider;
diff --git a/src/components/Divider.test.js b/src/components/Divider.test.js
new file mode 100644
index 00000000..a7f23709
--- /dev/null
+++ b/src/components/Divider.test.js
@@ -0,0 +1,24 @@
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import Divider from "./Divider";
+import { render, screen } from "../utils/test";
+
+describe("Divider", () => {
+  it("with margin", () => {
+    render(<Divider margin="6 0" />);
+
+    const svg = screen.getByRole("img");
+
+    expect(svg).toHaveStyle({
+      margin: "24px 0px",
+    });
+  });
+
+  it("with testId", () => {
+    render(<Divider testId="my-divider" />);
+
+    const svg = screen.getByRole("img");
+
+    expect(svg).toHaveAttribute("data-testid", "my-divider");
+  });
+});
diff --git a/src/components/index.js b/src/components/index.js
index 3061348c..6f629bd7 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -3,6 +3,7 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Container } from "./Container";
 export { default as DatePicker } from "./DatePicker";
+export { default as Divider } from "./Divider";
 export { default as Dropdown } from "./Dropdown";
 export { default as Flex } from "./Flex";
 export { default as Form } from "./Form";
diff --git a/website/gatsby-config.js b/website/gatsby-config.js
index 5b0efa44..f3475900 100644
--- a/website/gatsby-config.js
+++ b/website/gatsby-config.js
@@ -20,6 +20,9 @@ module.exports = {
       DatePicker: {
         status: COMPONENT_STATUS.READY,
       },
+      Divider: {
+        status: COMPONENT_STATUS.READY,
+      },
       Dropdown: {
         status: COMPONENT_STATUS.READY,
       },
diff --git a/website/src/pages/components/divider/index.js b/website/src/pages/components/divider/index.js
new file mode 100644
index 00000000..ae4fa840
--- /dev/null
+++ b/website/src/pages/components/divider/index.js
@@ -0,0 +1,24 @@
+import React from "react";
+import * as allDesignSystem from "basis";
+import ComponentContainer from "../../../components/ComponentContainer";
+import { formatCode } from "../../../utils/formatting";
+
+const { useTheme } = allDesignSystem;
+const scope = allDesignSystem;
+
+function DividerPage() {
+  const theme = useTheme();
+  const code = formatCode(`
+    <Divider margin="6 0" />
+  `);
+
+  return (
+    <ComponentContainer
+      code={code}
+      scope={scope}
+      backgroundColor={theme.colors.grey.t03}
+    />
+  );
+}
+
+export default DividerPage;
diff --git a/website/src/pages/components/divider/resources.mdx b/website/src/pages/components/divider/resources.mdx
new file mode 100644
index 00000000..e2b47211
--- /dev/null
+++ b/website/src/pages/components/divider/resources.mdx
@@ -0,0 +1,8 @@
+<Text>Divider resources are coming soon.</Text>
+<Text>
+  Meantime, enjoy the{" "}
+  <Link href="/components/divider" newTab={false}>
+    Playground
+  </Link>
+  .
+</Text>
diff --git a/website/src/pages/components/divider/usage.mdx b/website/src/pages/components/divider/usage.mdx
new file mode 100644
index 00000000..8950214a
--- /dev/null
+++ b/website/src/pages/components/divider/usage.mdx
@@ -0,0 +1,8 @@
+<Text>Divider usage is coming soon.</Text>
+<Text>
+  Meantime, enjoy the{" "}
+  <Link href="/components/divider" newTab={false}>
+    Playground
+  </Link>
+  .
+</Text>