🪟 🎨 Add style for disabled state to <CheckBox /> + replace `styled-…

…components` + add `small` size + add storybook (#20335) * add storybook for CheckBox component add disabled state style * just checking how to extend current implementation of storybook * remove experimental changes * replace styled components with css modules add disabled state style add small size style add storybook * update test snapshots * six size convention * Update airbyte-webapp/src/components/ui/CheckBox/CheckBox.module.scss Co-authored-by: Mark Berger <mark.berger@globallogic.com> * rename checkbox "size" prop add "mixed" aria-checked state * remove unneeded styled checkbox from signup page Co-authored-by: Mark Berger <mark.berger@globallogic.com>
airbytehq · Dec 13, 2022 · e253205 · e253205
1 parent f464b22
commit e253205
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 59 deletions.
diff --git a/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -424,7 +424,7 @@ exports[`CreateConnectionForm should render 1`] = `
                         class="<removed-for-snapshot-test>"
                       >
                         <input
-                          class="<removed-for-snapshot-test>"
+                          aria-checked="false"
                           type="checkbox"
                         />
                       </label>
@@ -638,7 +638,7 @@ exports[`CreateConnectionForm should render 1`] = `
                             class="<removed-for-snapshot-test>"
                           >
                             <input
-                              class="<removed-for-snapshot-test>"
+                              aria-checked="false"
                               type="checkbox"
                             />
                           </label>

diff --git a/airbyte-webapp/src/components/ui/CheckBox/CheckBox.module.scss b/airbyte-webapp/src/components/ui/CheckBox/CheckBox.module.scss
@@ -0,0 +1,46 @@
+@use "scss/colors";
+@use "scss/variables" as vars;
+
+$lg-size: 18px;
+$sm-size: 14px;
+
+.container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: vars.$border-thin 0;
+  border: vars.$border-thin solid colors.$grey-100;
+  border-radius: vars.$border-radius-2xs;
+  color: colors.$white;
+  background-color: colors.$white;
+  cursor: pointer;
+
+  input {
+    display: none;
+  }
+
+  .disabled {
+    border-color: colors.$grey-30;
+  }
+}
+
+.checked,
+.indeterminate {
+  border: vars.$border-thin solid colors.$blue;
+  background: colors.$blue;
+
+  &.disabled {
+    background-color: colors.$blue-200;
+    border-color: colors.$blue-200;
+  }
+}
+
+.sizeLg {
+  height: $lg-size;
+  width: $lg-size;
+}
+
+.sizeSm {
+  height: $sm-size;
+  width: $sm-size;
+}
diff --git a/airbyte-webapp/src/components/ui/CheckBox/CheckBox.tsx b/airbyte-webapp/src/components/ui/CheckBox/CheckBox.tsx
@@ -1,49 +1,40 @@
 import { faCheck, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
-import styled from "styled-components";
+import classNames from "classnames";
+import React, { InputHTMLAttributes } from "react";
 
-const CheckBoxInput = styled.input`
-  opacity: 0;
-  width: 0;
-  height: 0;
-  margin: 0;
-  position: absolute;
-`;
+import styles from "./CheckBox.module.scss";
 
-const CheckBoxContainer = styled.label<{
-  checked?: boolean;
+type CheckBoxSize = "lg" | "sm";
+
+export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
   indeterminate?: boolean;
-}>`
-  height: 18px;
-  min-width: 18px;
-  border: 1px solid
-    ${({ theme, checked, indeterminate }) => (checked || indeterminate ? theme.primaryColor : theme.greyColor20)};
-  background: ${({ theme, checked, indeterminate }) =>
-    checked || indeterminate ? theme.primaryColor : theme.whiteColor};
-  color: ${({ theme }) => theme.whiteColor};
-  text-align: center;
-  border-radius: 4px;
-  font-size: 13px;
-  line-height: 13px;
-  display: inline-block;
-  padding: 1px 0;
-  cursor: pointer;
-  vertical-align: top;
-  position: relative;
-`;
+  checkboxSize?: CheckBoxSize;
+}
+
+export const CheckBox: React.FC<CheckBoxProps> = ({ indeterminate, checkboxSize = "lg", ...inputProps }) => {
+  const { checked, disabled, className } = inputProps;
 
-export const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { indeterminate?: boolean }> = ({
-  indeterminate,
-  ...props
-}) => (
-  <CheckBoxContainer
-    onClick={(event: React.SyntheticEvent) => event.stopPropagation()}
-    className={props.className}
-    checked={props.checked}
-    indeterminate={indeterminate}
-  >
-    <CheckBoxInput {...props} type="checkbox" />
-    {indeterminate ? <FontAwesomeIcon icon={faMinus} /> : props.checked && <FontAwesomeIcon icon={faCheck} />}
-  </CheckBoxContainer>
-);
+  return (
+    <label
+      className={classNames(
+        styles.container,
+        {
+          [styles.checked]: checked,
+          [styles.indeterminate]: indeterminate,
+          [styles.disabled]: disabled,
+          [styles.sizeLg]: checkboxSize === "lg",
+          [styles.sizeSm]: checkboxSize === "sm",
+        },
+        className
+      )}
+    >
+      <input type="checkbox" aria-checked={indeterminate ? "mixed" : checked} {...inputProps} />
+      {indeterminate ? (
+        <FontAwesomeIcon size={checkboxSize} icon={faMinus} />
+      ) : (
+        checked && <FontAwesomeIcon size={checkboxSize} icon={faCheck} />
+      )}
+    </label>
+  );
+};
diff --git a/airbyte-webapp/src/components/ui/CheckBox/index.stories.tsx b/airbyte-webapp/src/components/ui/CheckBox/index.stories.tsx
@@ -0,0 +1,71 @@
+import { action } from "@storybook/addon-actions";
+import { ComponentMeta } from "@storybook/react";
+import { ChangeEvent, useState } from "react";
+
+import { CheckBox, CheckBoxProps } from "./CheckBox";
+
+export default {
+  title: "Ui/CheckBox",
+  component: CheckBox,
+  argTypes: {
+    disabled: { control: "boolean" },
+    checked: { control: "boolean" },
+    indeterminate: { control: "boolean" },
+    elSize: {
+      options: ["lg", "sm"],
+      control: { type: "radio" },
+    },
+  },
+} as ComponentMeta<typeof CheckBox>;
+
+const CheckBoxWithState = ({ checked: initial = false, ...props }: CheckBoxProps) => {
+  const [checked, setChecked] = useState(initial);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    action("Checkbox clicked")(event);
+    setChecked((prev) => !prev);
+  };
+  return <CheckBox {...props} checked={checked} onChange={handleChange} />;
+};
+
+export const Base = (args: CheckBoxProps) => <CheckBoxWithState {...args} />;
+
+Base.args = {};
+
+export const Checked = (args: CheckBoxProps) => <CheckBoxWithState {...args} />;
+
+Checked.args = {
+  checked: true,
+};
+
+export const CheckedSmall = (args: CheckBoxProps) => <CheckBoxWithState {...args} />;
+
+CheckedSmall.args = {
+  checked: true,
+  elSize: "sm",
+};
+
+export const Disabled = (args: CheckBoxProps) => <CheckBoxWithState {...args} />;
+
+Disabled.args = {
+  disabled: true,
+};
+
+export const DisabledChecked = (args: CheckBoxProps) => <CheckBoxWithState {...args} />;
+
+DisabledChecked.args = {
+  disabled: true,
+  checked: true,
+};
+
+export const Indeterminate = (args: CheckBoxProps) => <CheckBoxWithState {...args} />;
+
+Indeterminate.args = {
+  indeterminate: true,
+};
+
+export const IndeterminateDisabled = (args: CheckBoxProps) => <CheckBoxWithState {...args} />;
+
+IndeterminateDisabled.args = {
+  indeterminate: true,
+  disabled: true,
+};
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/CheckBoxControl.tsx b/airbyte-webapp/src/packages/cloud/views/auth/components/CheckBoxControl.tsx
@@ -23,20 +23,9 @@ const Label = styled.label<{ disabled?: boolean }>`
   cursor: pointer;
 `;
 
-const BigCheckBox = styled(CheckBox)`
-  height: 25px;
-  width: 25px;
-  min-width: 25px;
-  background: ${({ theme, checked }) => (checked ? theme.primaryColor : theme.whiteColor)};
-  border: ${({ theme, checked }) => (checked ? theme.primaryColor : theme.textColor)} 2px solid;
-  color: ${({ theme }) => theme.whiteColor};
-  font-size: 18px;
-  line-height: 18px;
-`;
-
 const CheckBoxControl: React.FC<IProps> = (props) => (
   <ToggleContainer>
-    <BigCheckBox {...props} id={`checkbox-${props.name}`} />
+    <CheckBox {...props} id={`checkbox-${props.name}`} />
     <Label disabled={props.disabled} htmlFor={`checkbox-${props.name}`}>
       {props.label}
     </Label>

diff --git a/...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/...nectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
@@ -371,7 +371,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                         class="<removed-for-snapshot-test>"
                       >
                         <input
-                          class="<removed-for-snapshot-test>"
+                          aria-checked="false"
                           type="checkbox"
                         />
                       </label>
@@ -585,7 +585,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                             class="<removed-for-snapshot-test>"
                           >
                             <input
-                              class="<removed-for-snapshot-test>"
+                              aria-checked="false"
                               type="checkbox"
                             />
                           </label>