import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs'; import {StoryVariantTable} from '../../docs/utils'; import PageHeader from 'blocks/PageHeader'; import {useRive, useStateMachineInput} from '@rive-app/react-canvas'; import Flex from '../flex/Flex'; import Text from '../text/Text'; import Headline from '../text/Headline'; import SubjectIcon from '../subject-icons/SubjectIcon'; import CardCheckbox from './CardCheckbox'; import CardCheckboxA11y from './stories/CardCheckbox.a11y.mdx'; import CardCustomisation from './stories/CardCustomisation.mdx'; CardCheckbox - [Stories](#stories) - [Accessibility](#accessibility) ## Overview (
), ]} args={{ defaultChecked: true, }} > {args => ( Placeholder )} ## Stories ### Variants #### Solid (
), ]} > {args => ( <> DARK Knowledge LIGHT
High School )} #### Outline (
), ]} > {args => ( <> DARK Philosophy LIGHT Geometry )} ### Indicator position (
), ]} > {args => ( Placeholder )} ### States #### Dark {args => ( default disabled error {['outline', 'solid'].map(variant => { return [false, true].map(indicator => { return [false, true].map(checked => { const states = ['default', 'disabled', 'error'].map(states => ( {indicator && } Placeholder )); return ( {variant}
{checked ? 'checked' : 'unchecked'}
{indicator ? 'with indicator' : 'without indicator'}{' '}
{states} ); }); }); })} )} #### Light (
), ]} > {args => ( default disabled error {['outline', 'solid'].map(variant => { return [false, true].map(indicator => { return [false, true].map(checked => { const states = ['default', 'disabled', 'error'].map(states => ( {indicator && } Placeholder )); return ( {variant}
{checked ? 'checked' : 'unchecked'}
{indicator ? 'with indicator' : 'without indicator'}{' '}
{states} ); }); }); })} )} ### Examples #### Animated icons (
), ]} > {args => { const AnimatedCard = (filename, label) => { const STATE_MACHINE_NAME = 'State Machine 1'; const {rive, RiveComponent} = useRive({ src: `animations/${filename}.riv`, autoplay: true, stateMachines: STATE_MACHINE_NAME, }); const isHoverInput = useStateMachineInput( rive, STATE_MACHINE_NAME, 'Hover', false ); return ( { isHoverInput.value = true; }} onMouseLeave={() => { isHoverInput.value = false; }} >
{label} ); }; return ( <> {AnimatedCard('mathematics_animated_subject_icon', 'mathematics')} {AnimatedCard('physics_animated_subject_icon', 'physics')} {AnimatedCard('mathematics_animated_subject_icon', 'mathematics')} {AnimatedCard('physics_animated_subject_icon', 'physics')} ); }} ## Customisation ## Accessibility