Merge pull request #8 from tableflowhq/feature/checkbox

Checkbox component, adjustments in Input/dropdown

Author: ciminelli

src/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,16 @@
+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",
+};

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,55 @@
+.container {
+  display: inline-block;
+  display: flex;
+  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-input-background);
+    }
+
+    //&:not(:disabled) {
+    //  &:focus {
+    //    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);
+    }
+  }
+}

src/Checkbox/types/index.ts

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

src/Input/style/Input.module.scss

@@ -30,7 +30,7 @@
 .inputWrapper {
     background-color: var(--color-input-background);
     border-radius: var(--border-radius-2);
-    outline: 2px solid transparent;
+    outline: 1px solid transparent;
     padding: calc(var(--m-xxs) / 2);
     border: 1px solid var(--color-border);
     font-weight: 400;
@@ -172,12 +172,13 @@
         background-color: var(--color-input-background);
         border-radius: var(--border-radius-2);
         padding: var(--m-xxxxs);
-        outline: 2px solid var(--color-text);
+        outline: 1px solid var(--color-border);
         display: flex;
         flex-direction: column;
         gap: var(--m-xxxxs);
         max-height: calc(100vh - 8px);
         overflow-y: auto;
+        margin-top: var(--m-xxxxs);
     }
 
     .option {

src/index.ts

@@ -27,6 +27,7 @@ import "./style/index.scss";
 import Badge from "./Badge";
 import Box from "./Box";
 import Button from "./Button";
+import Checkbox from "./Checkbox";
 import Dialog from "./Dialog";
 import Errors from "./Errors";
 import Icon from "./Icon";
@@ -48,6 +49,7 @@ export {
     Badge,
     Box,
     Button,
+    Checkbox,
     Dialog,
     Errors,
     Frame,
@@ -65,7 +67,7 @@ export {
     Tabs,
     TagEditor,
     ThemeToggle,
-    Tooltip
+    Tooltip,
 };
 
 export {