Merge remote-tracking branch 'origin/main' into feature/table-scroll

# Conflicts:
#	src/Table/style/Default.module.scss

Author: ciminelli

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tableflow/ui-library",
-    "version": "1.46.0",
+    "version": "1.51.0",
     "description": "A library of frontend components used by TableFlow",
     "repository": {
         "type": "git",

src/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { iconsArray } from "../Icon/types";
+import CheckboxComponent from ".";
+import { CheckboxProps } from "./types";
+
+export default {
+  title: "User Interface/Checkbox",
+  component: CheckboxComponent,
+} as ComponentMeta<typeof CheckboxComponent>;
+
+const Template: ComponentStory<typeof CheckboxComponent> = (args: CheckboxProps) => <CheckboxComponent {...args} />;
+
+export const Checkbox = Template.bind({});
+Checkbox.args = {
+  label: "Text",
+  disabled: false,
+};

src/Checkbox/index.tsx

@@ -0,0 +1,14 @@
+import classes from "../utils/classes";
+import { CheckboxProps } from "./types";
+import style from "./style/Checkbox.module.scss";
+
+export default function Checkbox({ label, className, ...props }: CheckboxProps) {
+  const containerClasses = classes([style.container, className]);
+
+  return (
+    <label className={containerClasses}>
+      <input type="checkbox" {...props} />
+      <span>{label}</span>
+    </label>
+  );
+}

src/Checkbox/style/Checkbox.module.scss

@@ -0,0 +1,62 @@
+.container {
+  display: inline-block;
+  gap: var(--m-xs);
+  align-items: center;
+
+  &:has(input:not(:disabled)) {
+    cursor: pointer;
+  }
+
+  input[type="checkbox"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    margin: 0;
+    color: var(--color-primary);
+    width: var(--m);
+    height: var(--m);
+    border: 2px solid var(--color-border);
+    display: grid;
+    place-content: center;
+    border-radius: var(--border-radius-1);
+    cursor: pointer;
+
+    &::before {
+      content: "";
+      width: var(--m-xs);
+      height: var(--m-xs);
+    }
+
+    &:checked {
+      background-color: var(--color-primary);
+      border-color: var(--color-primary);
+    }
+
+    &:checked::before {
+      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+      box-shadow: inset 1em 1em var(--color-text-on-primary);
+    }
+
+    &:not(:disabled) {
+      &:focus-visible {
+        outline: 1px solid var(--color-border);
+        outline-offset: 3px;
+      }
+    }
+
+    &:disabled {
+      --container-color: var(--container-disabled);
+      color: var(--container-disabled);
+      cursor: default;
+      background-color: var(--color-input-disabled);
+      border-color: var(--color-border-soft);
+
+      &:checked {
+        &::before {
+          clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+          box-shadow: inset 1em 1em var(--color-border-soft);
+        }
+      }
+    }
+  }
+}

src/Checkbox/types/index.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes, ReactElement } from "react";
+
+export type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
+  label?: string | ReactElement;
+};

src/Input/Input.stories.tsx

@@ -135,6 +135,6 @@ Dropdown.args = {
         "Option III": { value: "3" },
         "Option IV": { value: "4" },
         "Option V": { value: "5" },
-        "Option V": { value: "required", required: true },
+        "Option VI": { value: "required", required: true },
     },
 };