Merge pull request #39 from reactioncommerce/feat-add-chip

feat: add Chip component

package/src/components/Chip/Chip.js

@@ -0,0 +1,72 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Chip as MuiChip, makeStyles } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+  containedPrimary: {
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.colors.red
+  },
+  outlinedPrimary: {
+    color: theme.palette.colors.red,
+    border: `1px solid ${theme.palette.colors.red}`
+  }
+}));
+
+/**
+ * @name Chip
+ * @param {Object} props Component props
+ * @returns {React.Component} returns a React component
+ */
+const Chip = React.forwardRef(function Chip(props, ref) {
+  const {
+    color,
+    ...otherProps
+  } = props;
+
+  const classes = useStyles();
+
+  if (color === "error") {
+    return (
+      <MuiChip
+        classes={{
+          containedPrimary: classes.containedPrimary,
+          outlinedPrimary: classes.outlinedPrimary
+        }}
+        color="primary"
+        ref={ref}
+        {...otherProps}
+      />
+    );
+  }
+
+  return (
+    <MuiChip
+      color={color}
+      ref={ref}
+      {...otherProps}
+    />
+  );
+});
+
+Chip.propTypes = {
+  /**
+   * CSS Classes
+   */
+  classes: PropTypes.object,
+  /**
+   * The color of the component
+   */
+  color: PropTypes.oneOf(["default", "primary", "secondary", "error"]),
+  /**
+   * The variant to use
+   */
+  variant: PropTypes.oneOf(["default", "outlined"])
+};
+
+Chip.defaultProps = {
+  color: "primary",
+  variant: "outlined"
+};
+
+export default Chip;

package/src/components/Chip/Chip.md

@@ -0,0 +1,32 @@
+### Overview
+
+The Catalyst Chip inherits from the Material-UI [Chip component](https://material-ui.com/components/chips/). Refer to the Material-UI [Chip API docs](https://material-ui.com/api/chip/) for more information. 
+
+### Usage
+
+#### Default Catalyst chip
+
+This is what a chip with all the default prop options looks like:
+
+```jsx
+<div style={{ display: "flex" }}>
+  <div style={{ marginRight: "1rem" }}>
+    <Chip label="Default" />
+  </div>
+</div>
+```
+
+It's a chip with `variant` set to `outlined`, and `color` set to `primary`.
+
+#### Catalyst-custom chips
+
+- **Error chip**: The error chip is used to indicate an error condition.
+
+```jsx
+<div style={{ display: "flex" }}>
+  <div style={{ marginRight: "1rem" }}>
+    <Chip color="error" label="Error" />
+  </div>
+</div>
+```
+

package/src/components/Chip/Chip.test.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { render } from "../../tests/index.js";
+import Chip from "./Chip";
+
+test("basic snapshot - only default props", () => {
+  const { asFragment } = render(<Chip />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test("error chip snapshot", () => {
+  const { asFragment } = render(<Chip color="error" variant="contained" />);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Chip/__snapshots__/Chip.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic snapshot - only default props 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiChip-root MuiChip-colorPrimary MuiChip-outlined MuiChip-outlinedPrimary"
+  >
+    <span
+      class="MuiChip-label"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`error chip snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiChip-root MuiChip-colorPrimary MuiChip-outlined MuiChip-outlinedPrimary makeStyles-outlinedPrimary-34"
+  >
+    <span
+      class="MuiChip-label"
+    />
+  </div>
+</DocumentFragment>
+`;

package/src/components/Chip/index.js

@@ -0,0 +1 @@
+export { default } from "./Chip";

styleguide.config.js

@@ -343,6 +343,13 @@ module.exports = {
           content: "styleguide/src/sections/Actions.md",
           name: "Actions"
         }),
+        generateSection({
+          componentNames: [
+            "Chip"
+          ],
+          content: "styleguide/src/sections/Content.md",
+          name: "Content"
+        }),
         generateSection({
           componentNames: [
             "ConfirmDialog",

styleguide/src/sections/Content.md

@@ -0,0 +1 @@
+These are components that display information and status.