From 458c312753daa6392114fe82c472d33189071df2 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 5 May 2025 14:43:13 -0700 Subject: [PATCH 1/4] added radio and checkbox --- package-lock.json | 24 +---- src/components/checkbox/Checkbox.tsx | 42 ++++++++ src/components/checkbox/checkbox.css | 142 +++++++++++++++++++++++++ src/components/page/Page.tsx | 1 + src/components/radio/radio.css | 149 +++++++++++++++++++++++++++ src/components/radio/radio.tsx | 38 +++++++ src/index.ts | 4 +- src/stories/Checkbox.stories.ts | 123 ++++++++++++++++++++++ src/stories/Radio.stories.ts | 123 ++++++++++++++++++++++ 9 files changed, 623 insertions(+), 23 deletions(-) create mode 100644 src/components/checkbox/Checkbox.tsx create mode 100644 src/components/checkbox/checkbox.css create mode 100644 src/components/radio/radio.css create mode 100644 src/components/radio/radio.tsx create mode 100644 src/stories/Checkbox.stories.ts create mode 100644 src/stories/Radio.stories.ts diff --git a/package-lock.json b/package-lock.json index 941ec43..adfd6f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@acmucsd/components", - "version": "1.0.9", + "version": "1.0.10", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@acmucsd/components", - "version": "1.0.9", + "version": "1.0.10", "license": "ISC", "devDependencies": { "@chromatic-com/storybook": "^3.2.3", @@ -9686,19 +9686,6 @@ "typescript": ">= 4.3.x" } }, - "node_modules/react-dom": { - "version": "19.0.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", - "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==", - "dev": true, - "peer": true, - "dependencies": { - "scheduler": "^0.25.0" - }, - "peerDependencies": { - "react": "^19.0.0" - } - }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -10276,13 +10263,6 @@ } } }, - "node_modules/scheduler": { - "version": "0.25.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", - "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==", - "dev": true, - "peer": true - }, "node_modules/schema-utils": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz", diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx new file mode 100644 index 0000000..6949a9a --- /dev/null +++ b/src/components/checkbox/Checkbox.tsx @@ -0,0 +1,42 @@ +import React, { FC, useEffect, useState } from 'react'; +import './checkbox.css'; + +export interface CheckboxProps { + checked?: boolean; + disabled?: boolean; + mode?: 'light' | 'dark'; + label?: string; + onChange?: (event: React.ChangeEvent) => void; +} + +export const Checkbox: FC = ({ + checked = false, + disabled = false, + mode = 'light', + label, + onChange, +}) => { + const modeClass = mode === 'dark' ? 'storybook-checkbox--dark' : 'storybook-checkbox--light'; + const [isChecked, setIsChecked] = useState(checked); + + useEffect(() => { + setIsChecked(checked); + }, [checked]); + + const handleChange = (e: React.ChangeEvent) => { + setIsChecked(e.target.checked); + onChange?.(e); + }; + + return ( + + ); +}; diff --git a/src/components/checkbox/checkbox.css b/src/components/checkbox/checkbox.css new file mode 100644 index 0000000..670ca6f --- /dev/null +++ b/src/components/checkbox/checkbox.css @@ -0,0 +1,142 @@ +.storybook-checkbox { + display: inline-flex; + align-items: center; + cursor: pointer; + user-select: none; + font-family: 'DM Sans', sans-serif; + margin: 8px; +} + +.storybook-checkbox input[type="checkbox"] { + cursor: pointer; + appearance: none; + width: 24px; + height: 24px; + border-radius: 4px; + border: 2px solid #000000; + background-color: #ffffff; + position: relative; + outline: none; +} + +/* Label spacing */ +.storybook-checkbox__label { + margin-left: 8px; + font-size: 16px; +} + +/* —————————————————————— + Light mode – Checked + —————————————————————— */ +.storybook-checkbox--light input[type="checkbox"]:checked { + border-color: #0073e6; + background-color: #0073e6; +} + +.storybook-checkbox--light input[type="checkbox"]:checked::before { + content: ""; + position: absolute; + left: 6px; + width: 6px; + height: 14px; + border: solid #fff; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.storybook-checkbox--light input[type="checkbox"]:checked:hover { + background-color: #005cb8; +} + +.storybook-checkbox--light input[type="checkbox"]:checked:active { + background-color: #00458a; +} + +.storybook-checkbox--light input[type="checkbox"]:checked:disabled { + background-color: #979797; +} + +/* —————————————————————— + Light mode – Unchecked + —————————————————————— */ +.storybook-checkbox--light input[type="checkbox"] { + border-color: #000000; +} + +.storybook-checkbox--light input[type="checkbox"]:hover { + border-color: #005cb8; +} + +.storybook-checkbox--light input[type="checkbox"]:focus-visible { + outline: 2px solid #0073e6; +} + +.storybook-checkbox--light input[type="checkbox"]:active { + border-color: #00458a; +} + +.storybook-checkbox--light input[type="checkbox"]:disabled { + border-color: #979797; +} + +/* —————————————————————— + Dark mode – Base color + —————————————————————— */ +.storybook-checkbox--dark { + color: #ffffff; +} + +/* —————————————————————— + Dark mode – Checked + —————————————————————— */ +.storybook-checkbox--dark input[type="checkbox"]:checked { + border-color: #0073E6; + background-color: #0073E6; +} + +.storybook-checkbox--dark input[type="checkbox"]:checked::before { + content: ""; + position: absolute; + left: 6px; + width: 6px; + height: 14px; + border: solid #fff; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.storybook-checkbox--dark input[type="checkbox"]:checked:hover { + background-color: #57abff; +} + +.storybook-checkbox--dark input[type="checkbox"]:checked:active { + background-color: #8fc7ff; +} + +.storybook-checkbox--dark input[type="checkbox"]:checked:disabled { + background-color: #797c8b; +} + +/* —————————————————————— + Dark mode – Unchecked + —————————————————————— */ +.storybook-checkbox--dark input[type="checkbox"] { + border-color: #ffffff; + background-color: transparent; +} + +.storybook-checkbox--dark input[type="checkbox"]:hover { + border-color: #57abff; +} + +.storybook-checkbox--dark input[type="checkbox"]:focus-visible { + outline: 2px solid #1f8fff; +} + +.storybook-checkbox--dark input[type="checkbox"]:active { + border-color: #8fc7ff; +} + +.storybook-checkbox--dark input[type="checkbox"]:disabled { + border-color: #797c8b; +} \ No newline at end of file diff --git a/src/components/page/Page.tsx b/src/components/page/Page.tsx index 990749c..4652e34 100644 --- a/src/components/page/Page.tsx +++ b/src/components/page/Page.tsx @@ -49,6 +49,7 @@ export const Page = () => { .

+
Tip Adjust the width of the canvas with the{' '} diff --git a/src/components/radio/radio.css b/src/components/radio/radio.css new file mode 100644 index 0000000..551ddfc --- /dev/null +++ b/src/components/radio/radio.css @@ -0,0 +1,149 @@ +.storybook-radio { + display: inline-flex; + align-items: center; + cursor: pointer; + user-select: none; + font-family: 'DM Sans', sans-serif; + margin: 8px; +} + +.storybook-radio input[type="radio"] { + appearance: none; + -webkit-appearance: none; + margin: 0; + padding: 0; + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid #000000; + /* default (light mode) border color */ + background-color: #ffffff; + /* default (light mode) background */ + cursor: pointer; + position: relative; + outline: none; +} + +/* Label spacing */ +.storybook-radio__label { + margin-left: 8px; + font-size: 16px; +} + +/* —————————————————————— + Light mode – Checked + —————————————————————— */ +.storybook-radio--light input[type="radio"]:checked { + border-color: #0073e6; + background-color: #0073e6; +} + +.storybook-radio--light input[type="radio"]:checked::before { + content: ''; + display: block; + position: absolute; + top: 4px; + left: 4px; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #ffffff; +} + +.storybook-radio--light input[type="radio"]:checked:hover { + background-color: #005cb8; +} + +.storybook-radio--light input[type="radio"]:checked:active { + background-color: #00458a; +} + +.storybook-radio--light input[type="radio"]:checked:disabled { + background-color: #979797; +} + +/* —————————————————————— + Light mode – Unchecked + —————————————————————— */ +.storybook-radio--light input[type="radio"] { + border-color: #000000; +} + +.storybook-radio--light input[type="radio"]:hover { + border-color: #005cb8; +} + +.storybook-radio--light input[type="radio"]:focus-visible { + outline: 2px solid #0073e6; +} + +.storybook-radio--light input[type="radio"]:active { + border-color: #00458a; +} + +.storybook-radio--light input[type="radio"]:disabled { + border-color: #979797; +} + +/* —————————————————————— + Dark mode – Base color + —————————————————————— */ +.storybook-radio--dark { + color: #ffffff; +} + +/* —————————————————————— + Dark mode – Checked + —————————————————————— */ +.storybook-radio--dark input[type="radio"]:checked { + border-color: #0073E6; + background-color: #0073E6; +} + +.storybook-radio--dark input[type="radio"]:checked::before { + content: ''; + display: block; + position: absolute; + top: 4px; + left: 4px; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #25262B; +} + +.storybook-radio--dark input[type="radio"]:checked:hover { + background-color: #57abff; +} + +.storybook-radio--dark input[type="radio"]:checked:active { + background-color: #8fc7ff; +} + +.storybook-radio--dark input[type="radio"]:checked:disabled { + background-color: #797c8b; +} + +/* —————————————————————— + Dark mode – Unchecked + —————————————————————— */ +.storybook-radio--dark input[type="radio"] { + border-color: #ffffff; + background-color: transparent; +} + +.storybook-radio--dark input[type="radio"]:hover { + border-color: #57abff; +} + +.storybook-radio--dark input[type="radio"]:focus-visible { + outline: 2px solid #1f8fff; +} + +.storybook-radio--dark input[type="radio"]:active { + border-color: #8fc7ff; +} + +.storybook-radio--dark input[type="radio"]:disabled { + border-color: #797c8b; +} \ No newline at end of file diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx new file mode 100644 index 0000000..8982a46 --- /dev/null +++ b/src/components/radio/radio.tsx @@ -0,0 +1,38 @@ +import React, { FC } from 'react'; +import './radio.css'; + +export interface RadioProps { + name: string; + value: string; + checked?: boolean; + disabled?: boolean; + mode?: 'light' | 'dark'; + label?: string; + onChange?: (event: React.ChangeEvent) => void; +} + +export const Radio: FC = ({ + name, + value, + checked = false, + disabled = false, + mode = 'light', + label, + onChange, +}) => { + const modeClass = mode === 'dark' ? 'storybook-radio--dark' : 'storybook-radio--light'; + + return ( + {label}} + + ); +}; diff --git a/src/index.ts b/src/index.ts index 454e736..57e6f99 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,7 @@ import { Button } from "./components/button/Button"; import { Header } from "./components/header/Header"; import { Page } from "./components/page/Page"; +import { Radio } from "./components/radio/Radio"; +import { Checkbox } from "./components/checkbox/Checkbox"; -export { Button, Header, Page }; \ No newline at end of file +export { Button, Header, Radio, Checkbox, Page }; \ No newline at end of file diff --git a/src/stories/Checkbox.stories.ts b/src/stories/Checkbox.stories.ts new file mode 100644 index 0000000..9daec98 --- /dev/null +++ b/src/stories/Checkbox.stories.ts @@ -0,0 +1,123 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Checkbox } from '../components/checkbox/Checkbox'; + +const meta: Meta = { + title: 'Example/Checkbox', + component: Checkbox, + tags: ['autodocs'], + // Show changes in the "Actions" panel + argTypes: { + onChange: { action: 'changed' }, + }, +}; + +export default meta; +type Story = StoryObj; + +// Below are a few example stories. You can add more to show +// hover, focus, or pressed states by using pseudo-states +// or custom decorators. + +export const EnabledUnselectedLight: Story = { + args: { + checked: false, + disabled: false, + mode: 'light', + label: 'Label', + }, +}; + +export const EnabledSelectedLight: Story = { + args: { + checked: true, + disabled: false, + mode: 'light', + label: 'Label', + }, +}; + +export const DisabledUnselectedLight: Story = { + args: { + checked: false, + disabled: true, + mode: 'light', + label: 'Label', + }, +}; + +export const DisabledSelectedLight: Story = { + args: { + checked: true, + disabled: true, + mode: 'light', + label: 'Label', + }, +}; + +export const EnabledUnselectedDark: Story = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#25262B' } + ] + }, + }, + args: { + checked: false, + disabled: false, + mode: 'dark', + label: 'Label', + }, +}; + +export const EnabledSelectedDark: Story = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#25262B' } + ] + }, + }, + args: { + checked: true, + disabled: false, + mode: 'dark', + label: 'Label', + }, +}; + +export const DisabledUnselectedDark: Story = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#25262B' } + ] + }, + }, + args: { + checked: false, + disabled: true, + mode: 'dark', + label: 'Label', + }, +}; + +export const DisabledSelectedDark: Story = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#25262B' } + ] + }, + }, + args: { + checked: true, + disabled: true, + mode: 'dark', + label: 'Label', + }, +}; diff --git a/src/stories/Radio.stories.ts b/src/stories/Radio.stories.ts new file mode 100644 index 0000000..0040419 --- /dev/null +++ b/src/stories/Radio.stories.ts @@ -0,0 +1,123 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Radio } from '../components/radio/Radio'; + +const meta: Meta = { + title: 'Example/Radio', + component: Radio, + tags: ['autodocs'], + // Show changes in the "Actions" panel + argTypes: { + onChange: { action: 'changed' }, + }, +}; + +export default meta; +type Story = StoryObj; + +// Below are a few example stories. You can add more to show +// hover, focus, or pressed states by using pseudo-states +// or custom decorators. + +export const EnabledUnselectedLight: Story = { + args: { + checked: false, + disabled: false, + mode: 'light', + label: 'Label', + }, +}; + +export const EnabledSelectedLight: Story = { + args: { + checked: true, + disabled: false, + mode: 'light', + label: 'Label', + }, +}; + +export const DisabledUnselectedLight: Story = { + args: { + checked: false, + disabled: true, + mode: 'light', + label: 'Label', + }, +}; + +export const DisabledSelectedLight: Story = { + args: { + checked: true, + disabled: true, + mode: 'light', + label: 'Label', + }, +}; + +export const EnabledUnselectedDark: Story = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#25262B' } + ] + }, + }, + args: { + checked: false, + disabled: false, + mode: 'dark', + label: 'Label', + }, +}; + +export const EnabledSelectedDark: Story = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#25262B' } + ] + }, + }, + args: { + checked: true, + disabled: false, + mode: 'dark', + label: 'Label', + }, +}; + +export const DisabledUnselectedDark: Story = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#25262B' } + ] + }, + }, + args: { + checked: false, + disabled: true, + mode: 'dark', + label: 'Label', + }, +}; + +export const DisabledSelectedDark: Story = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#25262B' } + ] + }, + }, + args: { + checked: true, + disabled: true, + mode: 'dark', + label: 'Label', + }, +}; From ec16adbec9f131dec06a0cc7ea27d8ba7bea9014 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 5 May 2025 14:50:16 -0700 Subject: [PATCH 2/4] fix --- src/components/radio/{radio.tsx => Radio.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/radio/{radio.tsx => Radio.tsx} (100%) diff --git a/src/components/radio/radio.tsx b/src/components/radio/Radio.tsx similarity index 100% rename from src/components/radio/radio.tsx rename to src/components/radio/Radio.tsx From d3fd512f580c308bea2577d898f3650e45e9ecd7 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 5 May 2025 17:15:15 -0700 Subject: [PATCH 3/4] minor changes --- src/stories/Checkbox.stories.ts | 5 ----- src/stories/Radio.stories.ts | 5 ----- 2 files changed, 10 deletions(-) diff --git a/src/stories/Checkbox.stories.ts b/src/stories/Checkbox.stories.ts index 9daec98..12d9e56 100644 --- a/src/stories/Checkbox.stories.ts +++ b/src/stories/Checkbox.stories.ts @@ -5,7 +5,6 @@ const meta: Meta = { title: 'Example/Checkbox', component: Checkbox, tags: ['autodocs'], - // Show changes in the "Actions" panel argTypes: { onChange: { action: 'changed' }, }, @@ -14,10 +13,6 @@ const meta: Meta = { export default meta; type Story = StoryObj; -// Below are a few example stories. You can add more to show -// hover, focus, or pressed states by using pseudo-states -// or custom decorators. - export const EnabledUnselectedLight: Story = { args: { checked: false, diff --git a/src/stories/Radio.stories.ts b/src/stories/Radio.stories.ts index 0040419..ca43486 100644 --- a/src/stories/Radio.stories.ts +++ b/src/stories/Radio.stories.ts @@ -5,7 +5,6 @@ const meta: Meta = { title: 'Example/Radio', component: Radio, tags: ['autodocs'], - // Show changes in the "Actions" panel argTypes: { onChange: { action: 'changed' }, }, @@ -14,10 +13,6 @@ const meta: Meta = { export default meta; type Story = StoryObj; -// Below are a few example stories. You can add more to show -// hover, focus, or pressed states by using pseudo-states -// or custom decorators. - export const EnabledUnselectedLight: Story = { args: { checked: false, From 3c2f1aff116258003c19cde3ec86adc0e1fe1185 Mon Sep 17 00:00:00 2001 From: = Date: Sun, 11 May 2025 21:47:42 -0700 Subject: [PATCH 4/4] fixed light/dark bug --- src/components/radio/Radio.tsx | 6 +-- ...eckbox.stories.ts => Checkbox.stories.tsx} | 21 ++++++-- .../{Radio.stories.ts => Radio.stories.tsx} | 49 ++++++++++++++----- 3 files changed, 56 insertions(+), 20 deletions(-) rename src/stories/{Checkbox.stories.ts => Checkbox.stories.tsx} (79%) rename src/stories/{Radio.stories.ts => Radio.stories.tsx} (61%) diff --git a/src/components/radio/Radio.tsx b/src/components/radio/Radio.tsx index 8982a46..d2d2cc4 100644 --- a/src/components/radio/Radio.tsx +++ b/src/components/radio/Radio.tsx @@ -4,7 +4,7 @@ import './radio.css'; export interface RadioProps { name: string; value: string; - checked?: boolean; + defaultChecked?: boolean; disabled?: boolean; mode?: 'light' | 'dark'; label?: string; @@ -14,7 +14,7 @@ export interface RadioProps { export const Radio: FC = ({ name, value, - checked = false, + defaultChecked = false, disabled = false, mode = 'light', label, @@ -28,7 +28,7 @@ export const Radio: FC = ({ type="radio" name={name} value={value} - defaultChecked={checked} + defaultChecked={defaultChecked} disabled={disabled} onChange={onChange} /> diff --git a/src/stories/Checkbox.stories.ts b/src/stories/Checkbox.stories.tsx similarity index 79% rename from src/stories/Checkbox.stories.ts rename to src/stories/Checkbox.stories.tsx index 12d9e56..22ff0a8 100644 --- a/src/stories/Checkbox.stories.ts +++ b/src/stories/Checkbox.stories.tsx @@ -1,5 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Checkbox } from '../components/checkbox/Checkbox'; +import React from 'react'; + +const DARK_BACKGROUND_COLOR = '#25262B'; const meta: Meta = { title: 'Example/Checkbox', @@ -8,9 +11,17 @@ const meta: Meta = { argTypes: { onChange: { action: 'changed' }, }, + decorators: [ + (Story, { args }) => ( +
+ +
+ ) + ], }; export default meta; + type Story = StoryObj; export const EnabledUnselectedLight: Story = { @@ -54,7 +65,7 @@ export const EnabledUnselectedDark: Story = { backgrounds: { default: 'dark', values: [ - { name: 'dark', value: '#25262B' } + { name: 'dark', value: DARK_BACKGROUND_COLOR } ] }, }, @@ -71,7 +82,7 @@ export const EnabledSelectedDark: Story = { backgrounds: { default: 'dark', values: [ - { name: 'dark', value: '#25262B' } + { name: 'dark', value: DARK_BACKGROUND_COLOR } ] }, }, @@ -88,7 +99,7 @@ export const DisabledUnselectedDark: Story = { backgrounds: { default: 'dark', values: [ - { name: 'dark', value: '#25262B' } + { name: 'dark', value: DARK_BACKGROUND_COLOR } ] }, }, @@ -105,7 +116,7 @@ export const DisabledSelectedDark: Story = { backgrounds: { default: 'dark', values: [ - { name: 'dark', value: '#25262B' } + { name: 'dark', value: DARK_BACKGROUND_COLOR } ] }, }, @@ -115,4 +126,4 @@ export const DisabledSelectedDark: Story = { mode: 'dark', label: 'Label', }, -}; +}; \ No newline at end of file diff --git a/src/stories/Radio.stories.ts b/src/stories/Radio.stories.tsx similarity index 61% rename from src/stories/Radio.stories.ts rename to src/stories/Radio.stories.tsx index ca43486..40dc38d 100644 --- a/src/stories/Radio.stories.ts +++ b/src/stories/Radio.stories.tsx @@ -1,5 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Radio } from '../components/radio/Radio'; +import React from 'react'; + +const DARK_BACKGROUND_COLOR = '#25262B'; const meta: Meta = { title: 'Example/Radio', @@ -8,14 +11,36 @@ const meta: Meta = { argTypes: { onChange: { action: 'changed' }, }, + args: { + name: 'example', + value: 'example', + }, }; export default meta; type Story = StoryObj; +export const MultipleRadioButtons: Story = { + args: { + disabled: false, + mode: 'light', + label: 'Label', + defaultChecked: false, + }, + decorators: [ + (Story, { args }) => ( +
+
+
+ +
+ ) + ], +}; + export const EnabledUnselectedLight: Story = { args: { - checked: false, + defaultChecked: false, disabled: false, mode: 'light', label: 'Label', @@ -24,7 +49,7 @@ export const EnabledUnselectedLight: Story = { export const EnabledSelectedLight: Story = { args: { - checked: true, + defaultChecked: true, disabled: false, mode: 'light', label: 'Label', @@ -33,7 +58,7 @@ export const EnabledSelectedLight: Story = { export const DisabledUnselectedLight: Story = { args: { - checked: false, + defaultChecked: false, disabled: true, mode: 'light', label: 'Label', @@ -42,7 +67,7 @@ export const DisabledUnselectedLight: Story = { export const DisabledSelectedLight: Story = { args: { - checked: true, + defaultChecked: true, disabled: true, mode: 'light', label: 'Label', @@ -54,12 +79,12 @@ export const EnabledUnselectedDark: Story = { backgrounds: { default: 'dark', values: [ - { name: 'dark', value: '#25262B' } + { name: 'dark', value: DARK_BACKGROUND_COLOR } ] }, }, args: { - checked: false, + defaultChecked: false, disabled: false, mode: 'dark', label: 'Label', @@ -71,12 +96,12 @@ export const EnabledSelectedDark: Story = { backgrounds: { default: 'dark', values: [ - { name: 'dark', value: '#25262B' } + { name: 'dark', value: DARK_BACKGROUND_COLOR } ] }, }, args: { - checked: true, + defaultChecked: true, disabled: false, mode: 'dark', label: 'Label', @@ -88,12 +113,12 @@ export const DisabledUnselectedDark: Story = { backgrounds: { default: 'dark', values: [ - { name: 'dark', value: '#25262B' } + { name: 'dark', value: DARK_BACKGROUND_COLOR } ] }, }, args: { - checked: false, + defaultChecked: false, disabled: true, mode: 'dark', label: 'Label', @@ -105,12 +130,12 @@ export const DisabledSelectedDark: Story = { backgrounds: { default: 'dark', values: [ - { name: 'dark', value: '#25262B' } + { name: 'dark', value: DARK_BACKGROUND_COLOR } ] }, }, args: { - checked: true, + defaultChecked: true, disabled: true, mode: 'dark', label: 'Label',