feat(button): add example button variants with tailwind

packages/components/package.json

@@ -39,7 +39,8 @@
   },
   "dependencies": {
     "@chanzuckerberg/czedi-kit-styles": "^0.0.0",
-    "@chanzuckerberg/czedi-kit-tokens": "^0.0.0"
+    "@chanzuckerberg/czedi-kit-tokens": "^0.0.0",
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",

packages/components/src/button/button.spec.tsx

@@ -1,21 +1,28 @@
 import { axe } from "jest-axe";
 import { render } from "@testing-library/react";
-import { text } from "./button.stories";
+import { variants } from "./button.stories";
 
 describe("<Button />", () => {
   it("renders the component", () => {
-    const { container } = render(text());
+    const { container } = render(variants());
     expect(container.firstChild).toMatchInlineSnapshot(`
-      <button
-        class="czedi-btn "
-      >
-        Hello Button
-      </button>
+      <div>
+        <button
+          class="czedi-btn czedi-btn-primary"
+        >
+          Hello Button
+        </button>
+        <button
+          class="czedi-btn czedi-btn-secondary"
+        >
+          Secondary Button
+        </button>
+      </div>
     `);
   });
 
   it("passes accessibility checks", async () => {
-    const { container } = render(text());
+    const { container } = render(variants());
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });

packages/components/src/button/button.stories.tsx

@@ -12,6 +12,17 @@ export const text = (): JSX.Element => (
   <Button onClick={action("clicked")}>Hello Button</Button>
 );
 
+export const variants = (): JSX.Element => (
+  <div>
+    <Button onClick={action("clicked")} variant="primary">
+      Hello Button
+    </Button>
+    <Button onClick={action("clicked")} variant="secondary">
+      Secondary Button
+    </Button>
+  </div>
+);
+
 export const emoji = (): JSX.Element => (
   <Button onClick={action("clicked")}>
     <span aria-label="so cool">😀 😎 👍 💯</span>

packages/components/src/button/button.tsx

@@ -1,13 +1,27 @@
 import * as React from "react";
 
-function Button(
-  props: React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
-): JSX.Element {
-  const { className = "", ...rest } = props;
-  return <button className={`czedi-btn ${className}`} {...rest}></button>;
+import cx from "classnames";
+
+// Temporary props for button to test out css options for variants
+type ButtonProps = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  variant: "primary" | "secondary";
+};
+
+function Button(props: ButtonProps): JSX.Element {
+  const { className = "", variant, ...rest } = props;
+  const classNames = cx("czedi-btn", className, {
+    "czedi-btn-primary": variant === "primary",
+    "czedi-btn-secondary": variant === "secondary",
+  });
+
+  return <button className={classNames} {...rest}></button>;
 }
 
+Button.defaultProps = {
+  variant: "primary",
+};
+
 export default Button;

packages/styles/src/button/button.scss

@@ -1,10 +1,20 @@
-@import "./_variables.scss";
-@import "@chanzuckerberg/czedi-kit-tokens/scss/_variables.scss";
-
 .btn {
-  @apply font-bold py-2 px-4 rounded bg-blue-500 text-white;
+  @apply font-bold py-2 px-4 rounded text-white;
 }
 
-.btn:hover {
-  @apply bg-blue-700;
+.btn,
+.btn-primary {
+  @apply bg-blue-300;
+
+  &:hover {
+    @apply bg-blue-400;
+  }
+}
+
+.btn-secondary {
+  @apply bg-gray-600;
+
+  &:hover {
+    @apply bg-gray-800;
+  }
 }