import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs'; import {styled} from '@storybook/theming'; import {StoryVariantTable} from '../../docs/utils'; import PageHeader from 'blocks/PageHeader'; import Flex from '../flex/Flex'; import Text from '../text/Text'; import Headline from '../text/Headline'; import SubjectIcon from '../subject-icons/SubjectIcon'; import CardRadioGroup from './CardRadioGroup'; import CardRadioGroupA11y from './stories/CardRadioGroup.a11y.mdx'; import CardCustomisation from './stories/CardCustomisation.mdx'; CardRadioGroup - [Stories](#stories) - [Accessibility](#accessibility) ## Overview (
), ]} > {args => ( Placeholder )} ## Stories ### Variants #### Solid (
), ]} > {args => ( DARK Anatomy LIGHT
Statistics )} #### Outline (
), ]} > {args => ( DARK Tourism LIGHT {' '} Environment )} ### 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 background (
), ]} > {args => { const Image = styled.div` width: 105px; height: 100%; background-image: ${props => props.src ? `url(${props.src})` : 'none'}; background-size: 100%; background-position: center; transition: background-size 0.26s linear; .sg-card-interactive:hover &, .sg-card-interactive:focus-within & { background-size: 108%; } `; const ExtendedCardRadio = (value, label, image) => { return ( {}} onMouseLeave={() => {}} > {label} ); }; return ( {ExtendedCardRadio('student', 'I’m a Student', 'avatar_10')} {ExtendedCardRadio('parent', 'I’m a Parent', 'avatar_16')} ); }} ## Customisation ## Accessibility