Skip to content

Add checkbox component and make switch a variant of it. #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Mitchdev wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Add checkbox component and make switch a variant of it. #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0063b74
Add checkbox component and make switch a variant of it.
Mitchdev Feb 1, 2025
5d465ea
Slightly more generic variables
Mitchdev Feb 1, 2025
74c4bc4
Fix warnings
Mitchdev Feb 12, 2025
94fd5f3
Fix focus
Mitchdev Feb 12, 2025
7b7fa6e
Redundant cursor
Mitchdev Feb 12, 2025
374a510
Hover effect on entire checkbox
Mitchdev Feb 12, 2025
0ada6d7
Remove redundant display
Mitchdev Feb 14, 2025
3ccd3ce
Remove border from switch
Mitchdev Feb 14, 2025
0395aaa
Remove opacity
Mitchdev Feb 14, 2025
316adcd
Restore switch propertie variables
Mitchdev Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/add-checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@destinygg/libstiny": minor
---

Add checkbox component and make switch a variant of it.
11 changes: 11 additions & 0 deletions docs/components/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { cva } from "cva";

export const checkboxComponent = cva({
base: "checkbox",
variants: {
type: {
default: "",
switch: "checkbox--switch",
},
},
});
61 changes: 61 additions & 0 deletions docs/stories/checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<CheckboxArgs> = {
title: "Checkbox",
tags: ["autodocs"],
argTypes: {
type: {
options: ["default", "switch"],
control: {
type: "select",
},
},
},
};

export default meta;

type Story = StoryObj<CheckboxArgs>;

const TickIcon = () => (
<svg
className="checkbox__tick"
width="10"
height="8"
viewBox="0 0 10 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 1L3.5 6.5L1 4"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

export const Primary: Story = {
render: (args) => (
<label className={checkboxComponent({ type: args.type })}>
<span className="checkbox__toggle">
<input type="checkbox" />
<span className="checkbox__icon">
{args.type === "default" ? <TickIcon /> : null}
</span>
</span>
<span className="checkbox__label">{args.label}</span>
</label>
),
args: {
type: "default",
label: "Toggle me",
},
};
6 changes: 3 additions & 3 deletions docs/stories/stepper.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ const DotIcon = () => (
<path
d="M10.0833 10.9167C10.5436 10.9167 10.9167 10.5436 10.9167 10.0833C10.9167 9.6231 10.5436 9.25 10.0833 9.25C9.6231 9.25 9.25 9.6231 9.25 10.0833C9.25 10.5436 9.6231 10.9167 10.0833 10.9167Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
Expand Down
25 changes: 0 additions & 25 deletions docs/stories/switch.stories.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion lib/_docs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 *;
Expand All @@ -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");
Expand Down
174 changes: 102 additions & 72 deletions lib/components/switch.scss → lib/components/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,102 @@
@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;
}
}
@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($switch-toggle-size);
}
}

.checkbox__icon {
background-color: $switch-background-default-rest;
border-radius: $semantic-radii-pill;
border: none;
width: $switch-width;
height: $switch-height;

&::before {
@include create-transition(all, movement);
position: absolute;
content: "";
height: $switch-toggle-size;
width: $switch-toggle-size;
left: $space-1;
top: $space-1;
background-color: $switch-toggle-background;
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: flex;
flex-shrink: 0;
}

input {
appearance: none;
margin: 0;

&:checked + .checkbox__icon {
background-color: $switch-background-active-rest;
}

&:checked + .checkbox__icon .checkbox__tick {
display: block;
}

&:focus-visible + .checkbox__icon {
outline: 4px auto Highlight;
}
}

&:hover {
.checkbox__icon {
background-color: $switch-background-default-hover;
}

input:checked + .checkbox__icon {
background-color: $switch-background-active-hover;
}
}

&__icon {
@include create-transition(all, default);
background-color: $palette-neutral-2;
border-radius: $semantic-radii-x-small;
border: 1px solid $palette-neutral-7;
width: 20px;
height: 20px;
}

&__tick {
display: none;
height: 100%;
margin: auto;
}

&__label {
margin-left: $space-3;
font: $body-200-medium;
user-select: none;
}
}
2 changes: 1 addition & 1 deletion lib/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@forward "notification";
@forward "input";
@forward "card";
@forward "checkbox";
@forward "navbar";
@forward "dropdown";
@forward "modal";
Expand All @@ -12,5 +13,4 @@
@forward "radio";
@forward "tabs";
@forward "drawer";
@forward "switch";
@forward "stepper";