feat(CheckableTag): Added new CheckableTag component STC-825

src/components/CheckableTag/CheckableTag.md

@@ -0,0 +1,28 @@
+Default CheckableTag example:
+
+```js
+const [checked, setChecked] = React.useState(false)
+
+;<CheckableTag
+  checked={checked}
+  onChange={() => setChecked((previousState) => !previousState)}
+/>
+```
+
+Labeled CheckableTag example:
+
+```js
+const [checked, setChecked] = React.useState(false)
+
+;<CheckableTag
+  label="Check me"
+  checked={checked}
+  onChange={() => setChecked((previousState) => !previousState)}
+/>
+```
+
+Disabled CheckableTag state example:
+
+```js
+;<CheckableTag label="Uncheckable" disabled={true} />
+```

src/components/CheckableTag/CheckableTag.stories.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react"
+import { Meta, Story } from "@storybook/react/types-6-0"
+
+import CheckableTag, { CheckableTagProps } from "./CheckableTag"
+
+export default {
+  title: "Design System/CheckableTag",
+  component: CheckableTag,
+} as Meta
+
+const Template: Story<CheckableTagProps> = (props: CheckableTagProps) => {
+  const [checked, setChecked] = useState(props?.checked || false)
+
+  return (
+    <CheckableTag
+      {...props}
+      id="checkbox"
+      name="checkbox"
+      checked={checked}
+      onChange={() => setChecked((previousState) => !previousState)}
+    />
+  )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {}
+
+export const DefaultChecked = Template.bind({})
+
+DefaultChecked.args = {
+  checked: true,
+}
+
+export const Labeled = Template.bind({})
+
+Labeled.args = {
+  label: "Check me",
+}
+
+export const LabeledChecked = Template.bind({})
+
+LabeledChecked.args = {
+  checked: true,
+  label: "Check me",
+}
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  label: "I'm disabled",
+  disabled: true,
+}

src/components/CheckableTag/CheckableTag.test.tsx

@@ -0,0 +1,63 @@
+import "@testing-library/jest-dom/extend-expect"
+import React, { useState } from "react"
+import { fireEvent, render } from "@testing-library/react"
+
+import CheckableTag, { CheckableTagProps } from "./CheckableTag"
+import { axe } from "jest-axe"
+
+const CheckableTagTemplate = (props: CheckableTagProps) => {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <CheckableTag
+      checked={checked}
+      onChange={() => setChecked((previous) => !previous)}
+      {...props}
+    />
+  )
+}
+
+describe("CheckableTag", () => {
+  it("can be checked", () => {
+    const mockedFunction = jest.fn()
+    const { getByRole } = render(
+      <CheckableTagTemplate onChange={mockedFunction} />
+    )
+
+    const checkbox = getByRole("checkbox")
+
+    expect(checkbox).toBeInTheDocument()
+
+    fireEvent.click(checkbox)
+
+    expect(mockedFunction).toHaveBeenCalled()
+  })
+
+  it("renders the label succesfully", () => {
+    const label = "Check me"
+    const { getByText } = render(<CheckableTagTemplate label={label} />)
+
+    expect(getByText(label)).toBeInTheDocument()
+  })
+
+  it("can be disabled", () => {
+    const mockedFunction = jest.fn()
+    const { getByRole } = render(
+      <CheckableTagTemplate disabled={true} onChange={() => mockedFunction()} />
+    )
+
+    const checkbox = getByRole("checkbox")
+
+    fireEvent.click(checkbox)
+
+    expect(mockedFunction).not.toHaveBeenCalled()
+  })
+  it("passes a11y check", async () => {
+    // Arrange
+    const { container } = render(<CheckableTag label="Check me" />)
+    const results = await axe(container)
+
+    // Assert
+    expect(results).toHaveNoViolations()
+  })
+})

src/components/CheckableTag/CheckableTag.tsx

@@ -0,0 +1,128 @@
+/** @jsxImportSource theme-ui */
+import React, { forwardRef, HTMLProps } from "react"
+import Icon from "../Icon/Icon"
+
+export interface CheckableTagProps
+  extends Omit<HTMLProps<HTMLInputElement>, "label" | "ref"> {
+  label?: React.ReactNode
+}
+
+const stateStyles = {
+  resting: {
+    backgroundColor: "text.alpha.95",
+    color: "text.40",
+  },
+  hover: {
+    backgroundColor: "text.alpha.90",
+  },
+  active: {
+    backgroundColor: "text.alpha.90",
+    outline: "none",
+  },
+  filled: {
+    backgroundColor: "secondary.alpha.90",
+    color: "secondary",
+  },
+  filledHover: {
+    backgroundColor: "secondary.alpha.85",
+    color: "secondary",
+    outline: "none",
+  },
+}
+
+const CheckableTag = forwardRef<HTMLInputElement, CheckableTagProps>(
+  function CheckableTag(props: CheckableTagProps, ref) {
+    const {
+      checked = false,
+      disabled = false,
+      id,
+      label,
+      name,
+      onChange,
+      ...restProps
+    } = props
+
+    return (
+      <label
+        htmlFor={id}
+        sx={{
+          alignContent: "center",
+          alignItems: "center",
+          borderRadius: 2,
+          cursor: disabled ? "default" : "pointer",
+          display: "inline-flex",
+          gap: 2,
+          opacity: disabled ? 0.4 : 1,
+          position: "relative",
+          px: 3,
+          py: 2,
+          variant: "text.heading4",
+
+          ...(checked ? stateStyles.filled : stateStyles.resting),
+
+          "&:hover": {
+            ...(!disabled &&
+              (checked ? stateStyles.filledHover : stateStyles.hover)),
+          },
+
+          "&:focus-within": {
+            ...(!disabled &&
+              (checked ? stateStyles.filledHover : stateStyles.active)),
+          },
+        }}
+      >
+        {label}
+        <input
+          {...restProps}
+          type="checkbox"
+          id={id}
+          name={name}
+          onChange={(!disabled && onChange) || undefined}
+          ref={(input) => {
+            if (input) {
+              input.checked = checked
+              input.disabled = disabled
+
+              if (ref) {
+                if (typeof ref === "function") {
+                  ref(input)
+                } else {
+                  ref.current = input
+                }
+              }
+            }
+          }}
+          sx={{
+            appearance: "none",
+            border: "none",
+            borderRadius: 1,
+            cursor: disabled ? "default" : "pointer",
+            height: 20,
+            outline: "none",
+            position: "absolute",
+            transition: "all 0.2s",
+            width: 20,
+          }}
+          role="checkbox"
+        />
+        {((checked || !label) && (
+          <div
+            sx={{
+              alignContent: "center",
+              alignItems: "center",
+              display: "flex",
+              minHeight: 20,
+              justifyContent: "center",
+              visibility: !checked ? "hidden" : undefined,
+            }}
+          >
+            <Icon name="IconCheck" size={12} stroke={4} />
+          </div>
+        )) ||
+          null}
+      </label>
+    )
+  }
+)
+
+export default CheckableTag

src/components/Checkbox/Checkbox.stories.tsx

@@ -14,6 +14,7 @@ const Template: Story<ICheckboxProps> = (props) => {
   return (
     <Checkbox
       {...props}
+      id="checkbox"
       name="checkbox"
       checked={checked}
       onChange={() => setChecked((previousState) => !previousState)}

src/components/Checkbox/Checkbox.tsx

@@ -6,6 +6,7 @@ export interface ICheckboxProps {
   checked?: boolean
   indeterminate?: boolean
   disabled?: boolean
+  id?: string
   label?: React.ReactNode
   name?: string
   onChange?(event: React.ChangeEvent<HTMLInputElement>): void
@@ -35,6 +36,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
       checked = false,
       disabled = false,
       indeterminate = false,
+      id,
       label,
       name,
       onChange,
@@ -54,7 +56,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
         <input
           {...restProps}
           type="checkbox"
-          id={name}
+          id={id}
           name={name}
           onChange={(!disabled && onChange) || undefined}
           ref={(input) => {
@@ -134,7 +136,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
               width: "auto",
               cursor: disabled ? "auto" : "pointer",
             }}
-            htmlFor={name}
+            htmlFor={id}
           >
             {label}
           </label>