Add Divider component

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;

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");
+  });
+});

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";

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,
       },

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;

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>

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>