From 0063b742f15b3f597f1f789e60be0ebfc2f5820b Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Sat, 1 Feb 2025 13:29:18 +1300 Subject: [PATCH 01/10] Add checkbox component and make switch a variant of it. --- .changeset/add-checkbox.md | 5 ++ docs/components/checkbox.ts | 11 ++++ docs/stories/checkbox.stories.tsx | 61 ++++++++++++++++++ docs/stories/switch.stories.tsx | 25 -------- lib/_docs.scss | 2 +- lib/components/checkbox.scss | 101 ++++++++++++++++++++++++++++++ lib/components/index.scss | 2 +- lib/components/switch.scss | 72 --------------------- lib/tokens/component.scss | 8 --- 9 files changed, 180 insertions(+), 107 deletions(-) create mode 100644 .changeset/add-checkbox.md create mode 100644 docs/components/checkbox.ts create mode 100644 docs/stories/checkbox.stories.tsx delete mode 100644 docs/stories/switch.stories.tsx create mode 100644 lib/components/checkbox.scss delete mode 100644 lib/components/switch.scss diff --git a/.changeset/add-checkbox.md b/.changeset/add-checkbox.md new file mode 100644 index 0000000..838ef77 --- /dev/null +++ b/.changeset/add-checkbox.md @@ -0,0 +1,5 @@ +--- +"@destinygg/libstiny": minor +--- + +Add checkbox component and make switch a variant of it. diff --git a/docs/components/checkbox.ts b/docs/components/checkbox.ts new file mode 100644 index 0000000..c845a04 --- /dev/null +++ b/docs/components/checkbox.ts @@ -0,0 +1,11 @@ +import { cva } from "cva"; + +export const checkboxComponent = cva({ + base: "checkbox", + variants: { + type: { + default: "", + switch: "checkbox--switch", + }, + }, +}); diff --git a/docs/stories/checkbox.stories.tsx b/docs/stories/checkbox.stories.tsx new file mode 100644 index 0000000..c5989a8 --- /dev/null +++ b/docs/stories/checkbox.stories.tsx @@ -0,0 +1,61 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { checkboxComponent } from "../components/checkbox"; + +type CheckboxArgs = { + type: "default" | "switch"; + label: string; +}; + +const meta: Meta = { + title: "Checkbox", + tags: ["autodocs"], + argTypes: { + type: { + options: ["default", "switch"], + control: { + type: "select", + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +const TickIcon = () => ( + + + +); + +export const Primary: Story = { + render: (args) => ( + + ), + args: { + type: "default", + label: "Toggle me", + }, +}; diff --git a/docs/stories/switch.stories.tsx b/docs/stories/switch.stories.tsx deleted file mode 100644 index afa98ef..0000000 --- a/docs/stories/switch.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -type SwitchArgs = {}; - -const meta: Meta = { - title: "Switch", - tags: ["autodocs"], -}; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: () => ( - - ), - args: {}, -}; diff --git a/lib/_docs.scss b/lib/_docs.scss index b17bb01..9bc3ad3 100644 --- a/lib/_docs.scss +++ b/lib/_docs.scss @@ -13,6 +13,7 @@ This file is used in the documentation and shouldn't be consumed directly @use "components/notification" as *; @use "components/input" as *; @use "components/card" as *; +@use "components/checkbox" as *; @use "components/navbar" as *; @use "components/dropdown" as *; @use "components/modal" as *; @@ -22,7 +23,6 @@ This file is used in the documentation and shouldn't be consumed directly @use "components/radio" as *; @use "components/tabs" as *; @use "components/drawer" as *; -@use "components/switch" as *; @use "components/stepper" as *; @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap"); diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss new file mode 100644 index 0000000..10ad51a --- /dev/null +++ b/lib/components/checkbox.scss @@ -0,0 +1,101 @@ +@use "../tokens/component" as *; +@use "../tokens/core" as *; +@use "../tokens/semantic" as *; +@use "../tokens/shadows" as *; +@use "../tokens/typography" as *; +@use "../utils/transitions" as *; + +@mixin checkbox--switch { + input { + &:checked + .checkbox__icon::before { + transform: translateX($space-5); + } + } + + .checkbox__icon { + background-color: $palette-neutral-3; + border-radius: $semantic-radii-pill; + width: $space-9; + height: $semantic-height-small; + + &::before { + @include create-transition(all, movement); + position: absolute; + content: ""; + height: $space-5; + width: $space-5; + left: $space-1; + top: $space-1; + background-color: $palette-neutral-12; + border-radius: 50%; + } + } + + .checkbox__label { + font: $body-300-medium; + } +} + +.checkbox { + display: inline-flex; + align-items: center; + cursor: pointer; + + &--switch { + @include checkbox--switch; + } + + &__toggle { + position: relative; + display: inline-block; + flex-shrink: 0; + } + + input { + display: none; + + &:checked + .checkbox__icon { + background-color: $palette-primary-9; + + &:hover { + background-color: $palette-primary-10; + } + } + + &:checked + .checkbox__icon .checkbox__tick { + display: block; + } + + &:focus-visible + .checkbox__icon { + outline: 4px auto Highlight; + } + } + + &__icon { + @include create-transition(all, default); + display: block; + cursor: pointer; + background-color: $semantic-background-surface; + border-radius: $semantic-radii-x-small; + border: 1px solid $palette-neutral-7; + width: 20px; + height: 20px; + + &:hover { + background-color: $palette-neutral-4; + } + } + + &__tick { + display: none; + height: 100%; + margin: auto; + } + + &__label { + margin-left: $space-3; + cursor: pointer; + font: $body-200-medium; + user-select: none; + } +} diff --git a/lib/components/index.scss b/lib/components/index.scss index 0a7395f..c33c816 100644 --- a/lib/components/index.scss +++ b/lib/components/index.scss @@ -3,6 +3,7 @@ @forward "notification"; @forward "input"; @forward "card"; +@forward "checkbox"; @forward "navbar"; @forward "dropdown"; @forward "modal"; @@ -12,5 +13,4 @@ @forward "radio"; @forward "tabs"; @forward "drawer"; -@forward "switch"; @forward "stepper"; diff --git a/lib/components/switch.scss b/lib/components/switch.scss deleted file mode 100644 index cebc862..0000000 --- a/lib/components/switch.scss +++ /dev/null @@ -1,72 +0,0 @@ -@use "../tokens/component" as *; -@use "../tokens/core" as *; -@use "../tokens/semantic" as *; -@use "../tokens/shadows" as *; -@use "../tokens/typography" as *; -@use "../utils/transitions" as *; - -.switch { - display: inline-flex; - align-items: center; - cursor: pointer; - - &__toggle { - position: relative; - display: inline-block; - width: $switch-width; - height: $switch-height; - flex-shrink: 0; - } - - input { - appearance: none; - opacity: 0; - - &:checked + .switch__slider { - background-color: $switch-background-active-rest; - - &:hover { - background-color: $switch-background-active-hover; - } - - &::before { - transform: translateX($switch-toggle-size); - } - } - - &:focus-visible + .switch__slider { - outline: 4px auto Highlight; - } - } - - &__slider { - @include create-transition(all, default); - position: absolute; - cursor: pointer; - inset: 0; - background-color: $switch-background-default-rest; - border-radius: $semantic-radii-pill; - - &:hover { - background-color: $switch-background-default-hover; - } - - &::before { - @include create-transition(all, movement); - position: absolute; - content: ""; - height: $switch-toggle-size; - width: $switch-toggle-size; - left: $space-1; - bottom: $space-1; - background-color: $switch-toggle-background; - border-radius: 50%; - } - } - - &__label { - margin-left: $space-3; - cursor: pointer; - font: $body-300-medium; - } -} diff --git a/lib/tokens/component.scss b/lib/tokens/component.scss index da93c72..c33b4fc 100644 --- a/lib/tokens/component.scss +++ b/lib/tokens/component.scss @@ -136,11 +136,6 @@ $stepper-step-bar-done-background: $palette-success-9; $stepper-step-label-active-foreground: $semantic-foreground-primary; $stepper-step-label-done-foreground: $semantic-foreground-success; $stepper-step-label-todo-foreground: $semantic-foreground-neutral; -$switch-background-active-hover: $palette-primary-10; -$switch-background-active-rest: $palette-primary-9; -$switch-background-default-hover: $palette-neutral-4; -$switch-background-default-rest: $palette-neutral-3; -$switch-toggle-background: $palette-neutral-12; $table-background: $semantic-background-surface; $table-border: $semantic-border-default; $table-cell-border: $semantic-border-default; @@ -223,9 +218,6 @@ $stepper-gap: $space-2; $stepper-step-gap: $space-2; $stepper-step-bar-height: 2px; $stepper-step-bar-radii: $semantic-radii-pill; -$switch-height: $semantic-height-small; -$switch-width: $space-9; -$switch-toggle-size: $space-5; $table-radii: $semantic-radii-large; $table-cell-height: $space-9; $table-cell-padding-horizontal: $space-5; From 5d465eaf561d8c9eee496d48120aba3024c1711c Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Sat, 1 Feb 2025 13:52:21 +1300 Subject: [PATCH 02/10] Slightly more generic variables --- lib/components/checkbox.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss index 10ad51a..13fd575 100644 --- a/lib/components/checkbox.scss +++ b/lib/components/checkbox.scss @@ -16,7 +16,7 @@ background-color: $palette-neutral-3; border-radius: $semantic-radii-pill; width: $space-9; - height: $semantic-height-small; + height: $space-6; &::before { @include create-transition(all, movement); @@ -75,7 +75,7 @@ @include create-transition(all, default); display: block; cursor: pointer; - background-color: $semantic-background-surface; + background-color: $palette-neutral-2; border-radius: $semantic-radii-x-small; border: 1px solid $palette-neutral-7; width: 20px; From 74c4bc421d92afd70a3a14bf628bc1cb7fe9ead3 Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Thu, 13 Feb 2025 10:03:18 +1300 Subject: [PATCH 03/10] Fix warnings --- docs/stories/checkbox.stories.tsx | 6 +++--- docs/stories/stepper.stories.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/stories/checkbox.stories.tsx b/docs/stories/checkbox.stories.tsx index c5989a8..4c08402 100644 --- a/docs/stories/checkbox.stories.tsx +++ b/docs/stories/checkbox.stories.tsx @@ -35,9 +35,9 @@ const TickIcon = () => ( ); diff --git a/docs/stories/stepper.stories.tsx b/docs/stories/stepper.stories.tsx index 0f2b626..20f6a7f 100644 --- a/docs/stories/stepper.stories.tsx +++ b/docs/stories/stepper.stories.tsx @@ -22,9 +22,9 @@ const DotIcon = () => ( ); From 94fd5f3a2fcaba1ce0494c709f17fadbf2307a5e Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Thu, 13 Feb 2025 10:13:41 +1300 Subject: [PATCH 04/10] Fix focus --- lib/components/checkbox.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss index 13fd575..04d5053 100644 --- a/lib/components/checkbox.scss +++ b/lib/components/checkbox.scss @@ -47,12 +47,14 @@ &__toggle { position: relative; - display: inline-block; + display: flex; flex-shrink: 0; } input { - display: none; + appearance: none; + opacity: 0; + margin: 0; &:checked + .checkbox__icon { background-color: $palette-primary-9; @@ -73,7 +75,7 @@ &__icon { @include create-transition(all, default); - display: block; + display: inline-block; cursor: pointer; background-color: $palette-neutral-2; border-radius: $semantic-radii-x-small; From 7b7fa6e2c0d1b3ecc213c1047d6224f26d3e9ab5 Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Thu, 13 Feb 2025 10:19:46 +1300 Subject: [PATCH 05/10] Redundant cursor --- lib/components/checkbox.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss index 04d5053..fc24db6 100644 --- a/lib/components/checkbox.scss +++ b/lib/components/checkbox.scss @@ -76,7 +76,6 @@ &__icon { @include create-transition(all, default); display: inline-block; - cursor: pointer; background-color: $palette-neutral-2; border-radius: $semantic-radii-x-small; border: 1px solid $palette-neutral-7; @@ -96,7 +95,6 @@ &__label { margin-left: $space-3; - cursor: pointer; font: $body-200-medium; user-select: none; } From 374a5105d08b59fa5cc7c6b2a4c9aa88d5498f58 Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Thu, 13 Feb 2025 10:23:51 +1300 Subject: [PATCH 06/10] Hover effect on entire checkbox --- lib/components/checkbox.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss index fc24db6..0899c99 100644 --- a/lib/components/checkbox.scss +++ b/lib/components/checkbox.scss @@ -58,10 +58,6 @@ &:checked + .checkbox__icon { background-color: $palette-primary-9; - - &:hover { - background-color: $palette-primary-10; - } } &:checked + .checkbox__icon .checkbox__tick { @@ -73,6 +69,16 @@ } } + &:hover { + .checkbox__icon { + background-color: $palette-neutral-4; + } + + input:checked + .checkbox__icon { + background-color: $palette-primary-10; + } + } + &__icon { @include create-transition(all, default); display: inline-block; @@ -81,10 +87,6 @@ border: 1px solid $palette-neutral-7; width: 20px; height: 20px; - - &:hover { - background-color: $palette-neutral-4; - } } &__tick { From 0ada6d7b03ac3dc4f63342abe687e487f3839541 Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Fri, 14 Feb 2025 13:53:09 +1300 Subject: [PATCH 07/10] Remove redundant display --- lib/components/checkbox.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss index 0899c99..8b33b20 100644 --- a/lib/components/checkbox.scss +++ b/lib/components/checkbox.scss @@ -81,7 +81,6 @@ &__icon { @include create-transition(all, default); - display: inline-block; background-color: $palette-neutral-2; border-radius: $semantic-radii-x-small; border: 1px solid $palette-neutral-7; From 3ccd3ce99ce17f5ffb6a97677b9a48e56fb94cbd Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Fri, 14 Feb 2025 13:54:20 +1300 Subject: [PATCH 08/10] Remove border from switch --- lib/components/checkbox.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss index 8b33b20..57f818f 100644 --- a/lib/components/checkbox.scss +++ b/lib/components/checkbox.scss @@ -15,6 +15,7 @@ .checkbox__icon { background-color: $palette-neutral-3; border-radius: $semantic-radii-pill; + border: none; width: $space-9; height: $space-6; From 0395aaaee90c6bd4ff03dcfa34d21aed6b6d9178 Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Fri, 14 Feb 2025 13:58:42 +1300 Subject: [PATCH 09/10] Remove opacity --- lib/components/checkbox.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss index 57f818f..82504e6 100644 --- a/lib/components/checkbox.scss +++ b/lib/components/checkbox.scss @@ -54,7 +54,6 @@ input { appearance: none; - opacity: 0; margin: 0; &:checked + .checkbox__icon { From 316adcdbc976aa37bb9692fd1046fd1c2b4a5291 Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Mon, 17 Feb 2025 13:28:38 +1300 Subject: [PATCH 10/10] Restore switch propertie variables --- lib/components/checkbox.scss | 20 ++++++++++---------- lib/tokens/component.scss | 8 ++++++++ 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/lib/components/checkbox.scss b/lib/components/checkbox.scss index 82504e6..1f34708 100644 --- a/lib/components/checkbox.scss +++ b/lib/components/checkbox.scss @@ -8,26 +8,26 @@ @mixin checkbox--switch { input { &:checked + .checkbox__icon::before { - transform: translateX($space-5); + transform: translateX($switch-toggle-size); } } .checkbox__icon { - background-color: $palette-neutral-3; + background-color: $switch-background-default-rest; border-radius: $semantic-radii-pill; border: none; - width: $space-9; - height: $space-6; + width: $switch-width; + height: $switch-height; &::before { @include create-transition(all, movement); position: absolute; content: ""; - height: $space-5; - width: $space-5; + height: $switch-toggle-size; + width: $switch-toggle-size; left: $space-1; top: $space-1; - background-color: $palette-neutral-12; + background-color: $switch-toggle-background; border-radius: 50%; } } @@ -57,7 +57,7 @@ margin: 0; &:checked + .checkbox__icon { - background-color: $palette-primary-9; + background-color: $switch-background-active-rest; } &:checked + .checkbox__icon .checkbox__tick { @@ -71,11 +71,11 @@ &:hover { .checkbox__icon { - background-color: $palette-neutral-4; + background-color: $switch-background-default-hover; } input:checked + .checkbox__icon { - background-color: $palette-primary-10; + background-color: $switch-background-active-hover; } } diff --git a/lib/tokens/component.scss b/lib/tokens/component.scss index c33b4fc..da93c72 100644 --- a/lib/tokens/component.scss +++ b/lib/tokens/component.scss @@ -136,6 +136,11 @@ $stepper-step-bar-done-background: $palette-success-9; $stepper-step-label-active-foreground: $semantic-foreground-primary; $stepper-step-label-done-foreground: $semantic-foreground-success; $stepper-step-label-todo-foreground: $semantic-foreground-neutral; +$switch-background-active-hover: $palette-primary-10; +$switch-background-active-rest: $palette-primary-9; +$switch-background-default-hover: $palette-neutral-4; +$switch-background-default-rest: $palette-neutral-3; +$switch-toggle-background: $palette-neutral-12; $table-background: $semantic-background-surface; $table-border: $semantic-border-default; $table-cell-border: $semantic-border-default; @@ -218,6 +223,9 @@ $stepper-gap: $space-2; $stepper-step-gap: $space-2; $stepper-step-bar-height: 2px; $stepper-step-bar-radii: $semantic-radii-pill; +$switch-height: $semantic-height-small; +$switch-width: $space-9; +$switch-toggle-size: $space-5; $table-radii: $semantic-radii-large; $table-cell-height: $space-9; $table-cell-padding-horizontal: $space-5;