From 895c2b4252340f867c04f17d50a5e1f5a802f139 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Fri, 30 May 2025 12:04:01 -0600 Subject: [PATCH 01/16] refactor TreeItem --- src/components/Tree.spec.tsx | 8 ++++---- src/components/Tree.stories.tsx | 8 ++++---- src/components/Tree.tsx | 6 +++++- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/Tree.spec.tsx b/src/components/Tree.spec.tsx index 60d438acb..540f36173 100644 --- a/src/components/Tree.spec.tsx +++ b/src/components/Tree.spec.tsx @@ -1,12 +1,12 @@ import { render } from "@testing-library/react"; -import { Tree, TreeChevron, TreeItem, TreeItemContent } from './Tree'; +import { Tree, TreeChevron, TreeItem, TreeItemContent, AriaTreeItem } from './Tree'; import { Checkbox } from './Checkbox'; describe('Tree', () => { it('matches snapshot', () => { const { asFragment } = render( - + { Show/Hide - + { Show/Hide - + { return - + { Show/Hide - + { Show/Hide - + Date: Fri, 30 May 2025 13:36:22 -0600 Subject: [PATCH 02/16] new checkbox RAC --- src/components/CheckboxRAC.tsx | 101 +++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 src/components/CheckboxRAC.tsx diff --git a/src/components/CheckboxRAC.tsx b/src/components/CheckboxRAC.tsx new file mode 100644 index 000000000..fb5e10012 --- /dev/null +++ b/src/components/CheckboxRAC.tsx @@ -0,0 +1,101 @@ +import { Checkbox as RACCheckbox, CheckboxProps as RACCheckboxProps } from "react-aria-components"; +import styled from "styled-components"; +import { PropsWithChildren } from "react"; +import { whiteCheckmark, grayCheckmark, redCheckmark } from "./svgs/checkmarksvgs"; +import { colors } from "../theme"; + +const checkboxVariants = { + primary: { + backgroundColor: colors.palette.mediumBlue, + borderColor: colors.palette.mediumBlue, + checkmark: whiteCheckmark + }, + light: { + backgroundColor: colors.palette.white, + borderColor: colors.palette.pale, + checkmark: grayCheckmark + }, + error: { + backgroundColor: colors.palette.paleRed, + borderColor: colors.palette.lightRed, + checkmark: redCheckmark + }, + disabled: { + backgroundColor: colors.palette.white, + borderColor: colors.palette.pale, + checkmark: 'none' + } +} as const; + +type Variant = keyof typeof checkboxVariants; +type Size = 1.4 | 1.6 | 1.8 | 2; + +const StyledCheckbox = styled(RACCheckbox)<{ + $variant: Variant; + $size: Size; + $bold: boolean; +}>` + display: flex; + align-items: center; + font-size: 1.6rem; + font-weight: ${({ $bold }) => ($bold ? 700 : 400)}; + gap: 1.2rem; + color: inherit; + + input[type="checkbox"] { + appearance: none; + width: ${({ $size }) => $size}rem; + height: ${({ $size }) => $size}rem; + margin: 0; + display: grid; + place-content: center; + border: 1px solid ${({ $variant }) => checkboxVariants[$variant].borderColor}; + border-radius: 0.2rem; + background-color: ${colors.palette.white}; + position: relative; + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-color: ${({ $variant }) => checkboxVariants[$variant].backgroundColor}; + background-image: url(${({ $variant }) => checkboxVariants[$variant].checkmark}); + background-position: center; + background-repeat: no-repeat; + background-size: 80%; + transform: scale(0); + transition: transform 0.2s ease-in-out; + border-radius: 0.2rem; + } + + &:checked::before { + transform: scale(1); + } + + &:disabled { + opacity: 0.4; + cursor: not-allowed; + } + } +`; + +export interface CheckboxProps extends PropsWithChildren> { + size?: Size; + variant?: Variant; + bold?: boolean; +} + +export const CheckboxRAC = ({ + size = 1.6, + variant = 'primary', + bold = false, + children, + ...props +}: CheckboxProps) => { + return ( + + {children} + + ); +}; \ No newline at end of file From a353d3ac868fbf6d677f3e1618c2c136c70b762c Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Fri, 30 May 2025 13:58:49 -0600 Subject: [PATCH 03/16] revert tree changes --- src/components/Tree.spec.tsx | 8 ++++---- src/components/Tree.stories.tsx | 8 ++++---- src/components/Tree.tsx | 5 +---- src/index.ts | 1 + 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/Tree.spec.tsx b/src/components/Tree.spec.tsx index 540f36173..60d438acb 100644 --- a/src/components/Tree.spec.tsx +++ b/src/components/Tree.spec.tsx @@ -1,12 +1,12 @@ import { render } from "@testing-library/react"; -import { Tree, TreeChevron, TreeItem, TreeItemContent, AriaTreeItem } from './Tree'; +import { Tree, TreeChevron, TreeItem, TreeItemContent } from './Tree'; import { Checkbox } from './Checkbox'; describe('Tree', () => { it('matches snapshot', () => { const { asFragment } = render( - + { Show/Hide - + { Show/Hide - + { return - + { Show/Hide - + { Show/Hide - + Date: Fri, 30 May 2025 14:23:30 -0600 Subject: [PATCH 04/16] new checkbox folder --- .../{ => Checkbox}/Checkbox.spec.tsx | 0 .../{ => Checkbox}/Checkbox.stories.tsx | 0 src/components/{ => Checkbox}/Checkbox.tsx | 38 +------ src/components/Checkbox/CheckboxRAC.tsx | 65 +++++++++++ .../Checkbox/sharedCheckboxStyles.ts | 36 +++++++ src/components/CheckboxRAC.tsx | 101 ------------------ src/components/Tree.spec.tsx | 2 +- src/components/Tree.stories.tsx | 2 +- .../forms/uncontrolled/inputTypes.tsx | 2 +- src/index.ts | 4 +- 10 files changed, 108 insertions(+), 142 deletions(-) rename src/components/{ => Checkbox}/Checkbox.spec.tsx (100%) rename src/components/{ => Checkbox}/Checkbox.stories.tsx (100%) rename src/components/{ => Checkbox}/Checkbox.tsx (66%) create mode 100644 src/components/Checkbox/CheckboxRAC.tsx create mode 100644 src/components/Checkbox/sharedCheckboxStyles.ts delete mode 100644 src/components/CheckboxRAC.tsx diff --git a/src/components/Checkbox.spec.tsx b/src/components/Checkbox/Checkbox.spec.tsx similarity index 100% rename from src/components/Checkbox.spec.tsx rename to src/components/Checkbox/Checkbox.spec.tsx diff --git a/src/components/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx similarity index 100% rename from src/components/Checkbox.stories.tsx rename to src/components/Checkbox/Checkbox.stories.tsx diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx similarity index 66% rename from src/components/Checkbox.tsx rename to src/components/Checkbox/Checkbox.tsx index 19dfd9fdd..41b4d5ba6 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,42 +1,8 @@ import { LabelHTMLAttributes, PropsWithChildren } from "react"; -import { colors } from "../theme"; +import { checkboxVariants, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles"; +import { colors } from "../../theme"; import styled from "styled-components"; import { InputHTMLAttributes } from "react"; -import { whiteCheckmark, grayCheckmark, redCheckmark } from "./svgs/checkmarksvgs"; - -export type CheckboxVariant = keyof typeof checkboxVariants; -export type CheckboxSize = 1.4 | 1.6 | 1.8 | 2; - -export const checkboxVariants = { - primary: { - backgroundColor: colors.palette.mediumBlue, - color: 'inherit', - unCheckedBorder: `1px solid ${colors.palette.neutralThin}`, - checkedBorder: `1px solid ${colors.palette.mediumBlue}`, - backgroundImage: whiteCheckmark - }, - light: { - backgroundColor: colors.palette.white, - color: 'inherit', - unCheckedBorder: `1px solid ${colors.palette.pale}`, - checkedBorder: `1px solid ${colors.palette.pale}`, - backgroundImage: grayCheckmark - }, - error: { - backgroundColor: colors.palette.paleRed, - color: colors.palette.darkRed, - unCheckedBorder: `1px solid ${colors.palette.lightRed}`, - checkedBorder: `1px solid ${colors.palette.lightRed}`, - backgroundImage: redCheckmark - }, - disabled: { - backgroundColor: colors.palette.white, - color: 'inherit', - unCheckedBorder: `1px solid ${colors.palette.pale}`, - checkedBorder: `1px solid ${colors.palette.pale}`, - backgroundImage: 'none' - } -} as const; const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>` font-size: 1.6rem; diff --git a/src/components/Checkbox/CheckboxRAC.tsx b/src/components/Checkbox/CheckboxRAC.tsx new file mode 100644 index 000000000..09219a2c9 --- /dev/null +++ b/src/components/Checkbox/CheckboxRAC.tsx @@ -0,0 +1,65 @@ +import { Checkbox as RACCheckbox, CheckboxProps as RACCheckboxProps } from "react-aria-components"; +import styled from "styled-components"; +import { PropsWithChildren } from "react"; +import { checkboxVariants } from "./sharedCheckboxStyles"; +import { colors } from "../../theme"; + +type Variant = keyof typeof checkboxVariants; +type Size = 1.4 | 1.6 | 1.8 | 2; + +const StyledCheckbox = styled(RACCheckbox)<{ + $variant: Variant; + $size: Size; + $bold: boolean; +}>` + display: flex; + align-items: center; + font-size: 1.6rem; + font-weight: ${({ $bold }) => ($bold ? 700 : 400)}; + gap: 1.2rem; + color: inherit; + + &[data-checked] [data-slot="selection"] { + background-color: ${({ $variant }) => checkboxVariants[$variant].backgroundColor}; + background-image: url(${({ $variant }) => checkboxVariants[$variant].backgroundImage}); + background-position: center; + background-repeat: no-repeat; + background-size: 80%; + border: ${({ $variant }) => checkboxVariants[$variant].checkedBorder}; + } + + [data-slot="selection"] { + width: ${({ $size }) => $size}rem; + height: ${({ $size }) => $size}rem; + margin: 0; + border-radius: 0.2rem; + background-color: ${colors.palette.white}; + border: ${({ $variant }) => checkboxVariants[$variant].unCheckedBorder}; + transition: all 0.2s ease-in-out; + } + + &[data-disabled] [data-slot="selection"] { + opacity: 0.4; + cursor: not-allowed; + } +`; + +export interface CheckboxProps extends PropsWithChildren> { + size?: Size; + variant?: Variant; + bold?: boolean; +} + +export const CheckboxRAC = ({ + size = 1.6, + variant = 'primary', + bold = false, + children, + ...props +}: CheckboxProps) => { + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/src/components/Checkbox/sharedCheckboxStyles.ts b/src/components/Checkbox/sharedCheckboxStyles.ts new file mode 100644 index 000000000..142493280 --- /dev/null +++ b/src/components/Checkbox/sharedCheckboxStyles.ts @@ -0,0 +1,36 @@ +import { colors } from "../../theme"; +import { whiteCheckmark, grayCheckmark, redCheckmark } from "../svgs/checkmarksvgs"; + +export type CheckboxVariant = keyof typeof checkboxVariants; +export type CheckboxSize = 1.4 | 1.6 | 1.8 | 2; + +export const checkboxVariants = { + primary: { + backgroundColor: colors.palette.mediumBlue, + color: 'inherit', + unCheckedBorder: `1px solid ${colors.palette.neutralThin}`, + checkedBorder: `1px solid ${colors.palette.mediumBlue}`, + backgroundImage: whiteCheckmark + }, + light: { + backgroundColor: colors.palette.white, + color: 'inherit', + unCheckedBorder: `1px solid ${colors.palette.pale}`, + checkedBorder: `1px solid ${colors.palette.pale}`, + backgroundImage: grayCheckmark + }, + error: { + backgroundColor: colors.palette.paleRed, + color: colors.palette.darkRed, + unCheckedBorder: `1px solid ${colors.palette.lightRed}`, + checkedBorder: `1px solid ${colors.palette.lightRed}`, + backgroundImage: redCheckmark + }, + disabled: { + backgroundColor: colors.palette.white, + color: 'inherit', + unCheckedBorder: `1px solid ${colors.palette.pale}`, + checkedBorder: `1px solid ${colors.palette.pale}`, + backgroundImage: 'none' + } +} as const; \ No newline at end of file diff --git a/src/components/CheckboxRAC.tsx b/src/components/CheckboxRAC.tsx deleted file mode 100644 index fb5e10012..000000000 --- a/src/components/CheckboxRAC.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Checkbox as RACCheckbox, CheckboxProps as RACCheckboxProps } from "react-aria-components"; -import styled from "styled-components"; -import { PropsWithChildren } from "react"; -import { whiteCheckmark, grayCheckmark, redCheckmark } from "./svgs/checkmarksvgs"; -import { colors } from "../theme"; - -const checkboxVariants = { - primary: { - backgroundColor: colors.palette.mediumBlue, - borderColor: colors.palette.mediumBlue, - checkmark: whiteCheckmark - }, - light: { - backgroundColor: colors.palette.white, - borderColor: colors.palette.pale, - checkmark: grayCheckmark - }, - error: { - backgroundColor: colors.palette.paleRed, - borderColor: colors.palette.lightRed, - checkmark: redCheckmark - }, - disabled: { - backgroundColor: colors.palette.white, - borderColor: colors.palette.pale, - checkmark: 'none' - } -} as const; - -type Variant = keyof typeof checkboxVariants; -type Size = 1.4 | 1.6 | 1.8 | 2; - -const StyledCheckbox = styled(RACCheckbox)<{ - $variant: Variant; - $size: Size; - $bold: boolean; -}>` - display: flex; - align-items: center; - font-size: 1.6rem; - font-weight: ${({ $bold }) => ($bold ? 700 : 400)}; - gap: 1.2rem; - color: inherit; - - input[type="checkbox"] { - appearance: none; - width: ${({ $size }) => $size}rem; - height: ${({ $size }) => $size}rem; - margin: 0; - display: grid; - place-content: center; - border: 1px solid ${({ $variant }) => checkboxVariants[$variant].borderColor}; - border-radius: 0.2rem; - background-color: ${colors.palette.white}; - position: relative; - - &::before { - content: ""; - position: absolute; - width: 100%; - height: 100%; - background-color: ${({ $variant }) => checkboxVariants[$variant].backgroundColor}; - background-image: url(${({ $variant }) => checkboxVariants[$variant].checkmark}); - background-position: center; - background-repeat: no-repeat; - background-size: 80%; - transform: scale(0); - transition: transform 0.2s ease-in-out; - border-radius: 0.2rem; - } - - &:checked::before { - transform: scale(1); - } - - &:disabled { - opacity: 0.4; - cursor: not-allowed; - } - } -`; - -export interface CheckboxProps extends PropsWithChildren> { - size?: Size; - variant?: Variant; - bold?: boolean; -} - -export const CheckboxRAC = ({ - size = 1.6, - variant = 'primary', - bold = false, - children, - ...props -}: CheckboxProps) => { - return ( - - {children} - - ); -}; \ No newline at end of file diff --git a/src/components/Tree.spec.tsx b/src/components/Tree.spec.tsx index 60d438acb..b4df26e8e 100644 --- a/src/components/Tree.spec.tsx +++ b/src/components/Tree.spec.tsx @@ -1,6 +1,6 @@ import { render } from "@testing-library/react"; import { Tree, TreeChevron, TreeItem, TreeItemContent } from './Tree'; -import { Checkbox } from './Checkbox'; +import { Checkbox } from './Checkbox/Checkbox'; describe('Tree', () => { it('matches snapshot', () => { diff --git a/src/components/Tree.stories.tsx b/src/components/Tree.stories.tsx index a2beefc9f..2dc83467e 100644 --- a/src/components/Tree.stories.tsx +++ b/src/components/Tree.stories.tsx @@ -1,4 +1,4 @@ -import { Checkbox } from "./Checkbox"; +import { Checkbox } from "./Checkbox/Checkbox"; import { Tree, TreeChevron, TreeItem, TreeItemContent } from "./Tree"; export const Default = () => { diff --git a/src/components/forms/uncontrolled/inputTypes.tsx b/src/components/forms/uncontrolled/inputTypes.tsx index 2c2e0e519..3e7ff3e4f 100644 --- a/src/components/forms/uncontrolled/inputTypes.tsx +++ b/src/components/forms/uncontrolled/inputTypes.tsx @@ -4,7 +4,7 @@ import { FormInputWrapper, FormLabelText, HelpText, InputProps, RequiredIndicato import { AbstractFormData } from "../controlled/hooks"; import { partitionSequence } from "@openstax/ts-utils/misc/partitionSequence"; import { Radio as StyledRadio } from "../../Radio"; -import { Checkbox as StyledCheckbox } from "../../Checkbox" +import { Checkbox as StyledCheckbox } from "../../Checkbox/Checkbox" /* * input element diff --git a/src/index.ts b/src/index.ts index ee29dc340..7ad120f51 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,8 +3,8 @@ export * from './components/BodyPortalSlotsContext'; export * from './components/Button'; export * from './components/ButtonBar'; export * from './components/ButtonNav'; -export * from './components/Checkbox'; -export * from './components/CheckboxRAC'; +export * from './components/Checkbox/Checkbox'; +export * from './components/Checkbox/CheckboxRAC'; export * from './components/DropdownMenu'; export * from './components/Error'; export * from './components/ErrorBoundary'; From 1aa5e17f2fd04a350654b630d9e852792e3cafbc Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Fri, 30 May 2025 15:44:48 -0600 Subject: [PATCH 05/16] add tests and stories for new component --- src/components/Checkbox/CheckboxRAC.spec.tsx | 32 +++ .../Checkbox/CheckboxRAC.stories.tsx | 73 +++++ src/components/Checkbox/CheckboxRAC.tsx | 78 +++-- .../__snapshots__/Checkbox.spec.tsx.snap | 0 .../__snapshots__/CheckboxRAC.spec.tsx.snap | 270 ++++++++++++++++++ 5 files changed, 424 insertions(+), 29 deletions(-) create mode 100644 src/components/Checkbox/CheckboxRAC.spec.tsx create mode 100644 src/components/Checkbox/CheckboxRAC.stories.tsx rename src/components/{ => Checkbox}/__snapshots__/Checkbox.spec.tsx.snap (100%) create mode 100644 src/components/Checkbox/__snapshots__/CheckboxRAC.spec.tsx.snap diff --git a/src/components/Checkbox/CheckboxRAC.spec.tsx b/src/components/Checkbox/CheckboxRAC.spec.tsx new file mode 100644 index 000000000..512ae28fe --- /dev/null +++ b/src/components/Checkbox/CheckboxRAC.spec.tsx @@ -0,0 +1,32 @@ +import { CheckboxRAC } from './CheckboxRAC'; +import renderer from 'react-test-renderer'; + +describe('CheckboxRAC', () => { + it('matches snapshot', () => { + const tree = renderer.create( + Click Me + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('handles options', () => { + const tree = renderer.create( + Click Me + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('handles disabled state', () => { + const tree = renderer.create( + Click Me + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('supports slot="selection"', () => { + const tree = renderer.create( + Click Me + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/src/components/Checkbox/CheckboxRAC.stories.tsx b/src/components/Checkbox/CheckboxRAC.stories.tsx new file mode 100644 index 000000000..366420abe --- /dev/null +++ b/src/components/Checkbox/CheckboxRAC.stories.tsx @@ -0,0 +1,73 @@ +import styled from "styled-components"; +import { CheckboxRAC } from "./CheckboxRAC"; + +const CheckboxGroup = styled.div` + text-transform: capitalize; + + & + & { + margin-top: 3.2rem; + } + + > * + * { + margin-top: 0.5rem; + } +`; + +type CheckboxProps = React.ComponentProps; + +const renderCheckboxes = ( + variant: CheckboxProps['variant'], + size: CheckboxProps['size'] +) => ( + +

Size {size}

+ Checkbox label + + Checkbox label + + + Checkbox label + + +); + +export const Primary = () => ( + <> + {renderCheckboxes("primary", 1.4)} + {renderCheckboxes("primary", 1.6)} + {renderCheckboxes("primary", 1.8)} + {renderCheckboxes("primary", 2)} + +); + +export const Light = () => ( + <> + {renderCheckboxes("light", 1.4)} + {renderCheckboxes("light", 1.6)} + {renderCheckboxes("light", 1.8)} + {renderCheckboxes("light", 2)} + +); + +export const Error = () => ( + <> + {renderCheckboxes("error", 1.4)} + {renderCheckboxes("error", 1.6)} + {renderCheckboxes("error", 1.8)} + {renderCheckboxes("error", 2)} + +); + +export const Disabled = () => ( + <> + +

Disabled

+ + Checkbox label + + + Checkbox label + + + +); \ No newline at end of file diff --git a/src/components/Checkbox/CheckboxRAC.tsx b/src/components/Checkbox/CheckboxRAC.tsx index 09219a2c9..473e63788 100644 --- a/src/components/Checkbox/CheckboxRAC.tsx +++ b/src/components/Checkbox/CheckboxRAC.tsx @@ -1,15 +1,23 @@ -import { Checkbox as RACCheckbox, CheckboxProps as RACCheckboxProps } from "react-aria-components"; import styled from "styled-components"; -import { PropsWithChildren } from "react"; -import { checkboxVariants } from "./sharedCheckboxStyles"; import { colors } from "../../theme"; +import { + Checkbox as RACCheckbox, + CheckboxProps as RACCheckboxProps, + Text +} from "react-aria-components"; +import { PropsWithChildren } from "react"; +import { checkboxVariants, CheckboxSize, CheckboxVariant } from "./sharedCheckboxStyles"; -type Variant = keyof typeof checkboxVariants; -type Size = 1.4 | 1.6 | 1.8 | 2; +export interface CheckboxRACProps + extends PropsWithChildren> { + size?: CheckboxSize; + variant?: CheckboxVariant; + bold?: boolean; +} const StyledCheckbox = styled(RACCheckbox)<{ - $variant: Variant; - $size: Size; + $variant: CheckboxVariant; + $size: CheckboxSize; $bold: boolean; }>` display: flex; @@ -19,47 +27,59 @@ const StyledCheckbox = styled(RACCheckbox)<{ gap: 1.2rem; color: inherit; - &[data-checked] [data-slot="selection"] { - background-color: ${({ $variant }) => checkboxVariants[$variant].backgroundColor}; - background-image: url(${({ $variant }) => checkboxVariants[$variant].backgroundImage}); - background-position: center; - background-repeat: no-repeat; - background-size: 80%; - border: ${({ $variant }) => checkboxVariants[$variant].checkedBorder}; + &[data-disabled] { + opacity: 0.4; + cursor: not-allowed; } [data-slot="selection"] { + appearance: none; width: ${({ $size }) => $size}rem; height: ${({ $size }) => $size}rem; margin: 0; border-radius: 0.2rem; - background-color: ${colors.palette.white}; + display: grid; + place-content: center; border: ${({ $variant }) => checkboxVariants[$variant].unCheckedBorder}; - transition: all 0.2s ease-in-out; + background-color: ${colors.palette.white}; + position: relative; + + &::before { + content: ""; + position: absolute; + inset: 0; + border-radius: 0.2rem; + background-color: ${({ $variant }) => checkboxVariants[$variant].backgroundColor}; + background-image: url('${({ $variant }) => checkboxVariants[$variant].backgroundImage}'); + background-size: 80%; + background-position: center; + background-repeat: no-repeat; + transform: scale(0); + } } - &[data-disabled] [data-slot="selection"] { - opacity: 0.4; - cursor: not-allowed; + &[data-selected] [data-slot="selection"]::before { + transform: scale(1); + opacity: ${(props => props.isDisabled ? 0 : 1)}; } `; -export interface CheckboxProps extends PropsWithChildren> { - size?: Size; - variant?: Variant; - bold?: boolean; -} - export const CheckboxRAC = ({ size = 1.6, - variant = 'primary', + variant = "primary", bold = false, children, ...props -}: CheckboxProps) => { +}: CheckboxRACProps) => { return ( - - {children} + +
+ {children} ); }; \ No newline at end of file diff --git a/src/components/__snapshots__/Checkbox.spec.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap similarity index 100% rename from src/components/__snapshots__/Checkbox.spec.tsx.snap rename to src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap diff --git a/src/components/Checkbox/__snapshots__/CheckboxRAC.spec.tsx.snap b/src/components/Checkbox/__snapshots__/CheckboxRAC.spec.tsx.snap new file mode 100644 index 000000000..24d218332 --- /dev/null +++ b/src/components/Checkbox/__snapshots__/CheckboxRAC.spec.tsx.snap @@ -0,0 +1,270 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CheckboxRAC handles disabled state 1`] = ` +