Checkbox component, adjustments in Input/dropdown

Author: alotropico

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 {