feat: add warning color and display flex

Clubhouse story: https://app.clubhouse.io/czi-edu/story/143864/buttons This PR adds a couple of small updates to the `Button` component to prepare it for launch: - re-adds the "warning" color (because we'll need it in the banners) - adds `display: inline-flex" to the button (so icons can be used inside) - adds 2 stories with a test icon to verify the `flex` change is working as expected - adds 1 story with a `data-test-id` attribute to verify other important attributes not explicitly exposed will work with the component
chanzuckerberg · Jul 7, 2021 · ee12be6 · ee12be6
1 parent ea06e19
commit ee12be6
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 3 deletions.
diff --git a/packages/components/.storybook/Button/button.stories.tsx b/packages/components/.storybook/Button/button.stories.tsx
@@ -15,6 +15,7 @@ const colors: Array<ButtonProps["color"]> = [
   "brand",
   "neutral",
   "success",
+  "warning",
 ];
 const variants: Array<ButtonProps["variant"]> = ["flat", "outline", "link"];
 const states: Array<ClickableProps<"button">["state"] | "disabled"> = [

diff --git a/packages/components/src/Button/__snapshots__/button.spec.tsx.snap b/packages/components/src/Button/__snapshots__/button.spec.tsx.snap
@@ -52,6 +52,25 @@ exports[`<Button /> linkInHeading story renders snapshot 1`] = `
 </p>
 `;
 
+exports[`<Button /> linkWithIcon story renders snapshot 1`] = `
+<button
+  class="button variantLink colorSuccess"
+  type="button"
+>
+  
+  Link with icon 
+  <svg
+    role="presentation"
+    style="height: 24px;"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M9.719,17.073l-6.562-6.51c-0.27-0.268-0.504-0.567-0.696-0.888C1.385,7.89,1.67,5.613,3.155,4.14c0.864-0.856,2.012-1.329,3.233-1.329c1.924,0,3.115,1.12,3.612,1.752c0.499-0.634,1.689-1.752,3.612-1.752c1.221,0,2.369,0.472,3.233,1.329c1.484,1.473,1.771,3.75,0.693,5.537c-0.19,0.32-0.425,0.618-0.695,0.887l-6.562,6.51C10.125,17.229,9.875,17.229,9.719,17.073 M6.388,3.61C5.379,3.61,4.431,4,3.717,4.707C2.495,5.92,2.259,7.794,3.145,9.265c0.158,0.265,0.351,0.51,0.574,0.731L10,16.228l6.281-6.232c0.224-0.221,0.416-0.466,0.573-0.729c0.887-1.472,0.651-3.346-0.571-4.56C15.57,4,14.621,3.61,13.612,3.61c-1.43,0-2.639,0.786-3.268,1.863c-0.154,0.264-0.536,0.264-0.69,0C9.029,4.397,7.82,3.61,6.388,3.61"
+    />
+  </svg>
+</button>
+`;
+
 exports[`<Button /> outline story renders snapshot 1`] = `
 <button
   class="button sizeMedium variantOutline colorBrand"
@@ -61,3 +80,33 @@ exports[`<Button /> outline story renders snapshot 1`] = `
   Outline Button
 </button>
 `;
+
+exports[`<Button /> outlineWithIcon story renders snapshot 1`] = `
+<button
+  class="button sizeMedium variantOutline colorWarning"
+  type="button"
+>
+  
+  Outline with icon 
+  <svg
+    role="presentation"
+    style="height: 24px;"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M9.719,17.073l-6.562-6.51c-0.27-0.268-0.504-0.567-0.696-0.888C1.385,7.89,1.67,5.613,3.155,4.14c0.864-0.856,2.012-1.329,3.233-1.329c1.924,0,3.115,1.12,3.612,1.752c0.499-0.634,1.689-1.752,3.612-1.752c1.221,0,2.369,0.472,3.233,1.329c1.484,1.473,1.771,3.75,0.693,5.537c-0.19,0.32-0.425,0.618-0.695,0.887l-6.562,6.51C10.125,17.229,9.875,17.229,9.719,17.073 M6.388,3.61C5.379,3.61,4.431,4,3.717,4.707C2.495,5.92,2.259,7.794,3.145,9.265c0.158,0.265,0.351,0.51,0.574,0.731L10,16.228l6.281-6.232c0.224-0.221,0.416-0.466,0.573-0.729c0.887-1.472,0.651-3.346-0.571-4.56C15.57,4,14.621,3.61,13.612,3.61c-1.43,0-2.639,0.786-3.268,1.863c-0.154,0.264-0.536,0.264-0.69,0C9.029,4.397,7.82,3.61,6.388,3.61"
+    />
+  </svg>
+</button>
+`;
+
+exports[`<Button /> withDataTestId story renders snapshot 1`] = `
+<button
+  class="button sizeMedium variantFlat colorAlert"
+  data-test-id="fake-test-id"
+  type="button"
+>
+  
+  Button with data-test-id
+</button>
+`;
diff --git a/packages/components/src/Button/button.stories.tsx b/packages/components/src/Button/button.stories.tsx
@@ -19,6 +19,12 @@ export default {
 type Args = React.ComponentProps<typeof Button>;
 const Template: Story<Args> = (args) => <Button {...args} />;
 
+const heartIcon = (
+  <svg style={{ height: "24px" }} viewBox="0 0 20 20" role="presentation">
+    <path d="M9.719,17.073l-6.562-6.51c-0.27-0.268-0.504-0.567-0.696-0.888C1.385,7.89,1.67,5.613,3.155,4.14c0.864-0.856,2.012-1.329,3.233-1.329c1.924,0,3.115,1.12,3.612,1.752c0.499-0.634,1.689-1.752,3.612-1.752c1.221,0,2.369,0.472,3.233,1.329c1.484,1.473,1.771,3.75,0.693,5.537c-0.19,0.32-0.425,0.618-0.695,0.887l-6.562,6.51C10.125,17.229,9.875,17.229,9.719,17.073 M6.388,3.61C5.379,3.61,4.431,4,3.717,4.707C2.495,5.92,2.259,7.794,3.145,9.265c0.158,0.265,0.351,0.51,0.574,0.731L10,16.228l6.281-6.232c0.224-0.221,0.416-0.466,0.573-0.729c0.887-1.472,0.651-3.346-0.571-4.56C15.57,4,14.621,3.61,13.612,3.61c-1.43,0-2.639,0.786-3.268,1.863c-0.154,0.264-0.536,0.264-0.69,0C9.029,4.397,7.82,3.61,6.388,3.61"></path>
+  </svg>
+);
+
 export const flat = Template.bind(null);
 flat.args = {
   children: "Flat Button",
@@ -62,3 +68,25 @@ linkInHeading.args = {
   variant: "link",
   color: "brand",
 };
+
+export const withDataTestId = Template.bind(null);
+withDataTestId.args = {
+  children: "Button with data-test-id",
+  color: "alert",
+  variant: "flat",
+  "data-test-id": "fake-test-id",
+};
+
+export const linkWithIcon = Template.bind(null);
+linkWithIcon.args = {
+  children: <>Link with icon {heartIcon}</>,
+  color: "success",
+  variant: "link",
+};
+
+export const outlineWithIcon = Template.bind(null);
+outlineWithIcon.args = {
+  children: <>Outline with icon {heartIcon}</>,
+  color: "warning",
+  variant: "outline",
+};
diff --git a/packages/components/src/common/clickable.module.css b/packages/components/src/common/clickable.module.css
@@ -1,6 +1,6 @@
 .button {
   /* Base Styles */
-  @apply rounded border-2 transition-colors;
+  @apply rounded border-2 transition-colors inline-flex items-center;
 
   /* Base Text Styles */
   @apply font-bold;
@@ -116,6 +116,30 @@
   }
 }
 
+.colorWarning {
+  --button-primary-color: var(--eds-color-warning-600);
+  --button-secondary-color: var(--eds-color-white);
+  --button-tertiary-color: var(--eds-color-warning-100);
+
+  &:hover,
+  &.stateHover,
+  &:focus,
+  &.stateFocus {
+    --button-primary-color: var(--eds-color-warning-700);
+  }
+
+  &:active,
+  &.stateActive {
+    /* TODO: Replace with warning active color */
+    --button-primary-color: #952d00;
+  }
+
+  /* override the hover/focus values */
+  &:disabled {
+    --button-primary-color: var(--eds-color-warning-300);
+  }
+}
+
 .variantFlat {
   background-color: var(--button-primary-color);
   border-color: var(--button-primary-color);

diff --git a/packages/components/src/common/clickable.tsx b/packages/components/src/common/clickable.tsx
@@ -10,7 +10,7 @@ export type ClickableProps<IComponent extends React.ElementType> = {
   /**
    * The color of the element.
    */
-  color: "alert" | "brand" | "neutral" | "success";
+  color: "alert" | "brand" | "neutral" | "success" | "warning";
   /**
    * The size of the element.
    */
@@ -54,8 +54,8 @@ function Clickable<IComponent extends React.ElementType>({
         color === "brand" && styles.colorBrand,
         color === "neutral" && styles.colorNeutral,
         color === "success" && styles.colorSuccess,
+        color === "warning" && styles.colorWarning,
         // Interactive States (for testing)
-        state === "inactive" && styles.stateInactive,
         state === "hover" && styles.stateHover,
         state === "focus" && styles.stateFocus,
         state === "active" && styles.stateActive,