import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs'; import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components' import {Avatar} from './Avatar'; import {AvatarGroup} from './AvatarGroup'; ## Definition An avatar group signals that there is more than 1 person associated with an item ## Structure Avatar group can be composed differently based on the number of user profile. <CustomArgsTable of={Avatar} /> <Examples title="Avatar style"> <Example title="Small"> <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" /> </Example> <Example title="Large"> <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" /> </Example> </Examples> <ArgsTable of={Avatar} /> ### Avatar Group <ArgsTable of={AvatarGroup} /> <Examples title="Avatar Group "> <Example title="Small"> <AvatarGroup size="sm" items={[ { image: "https://cal.com/stakeholder/peer.jpg", alt: "Peer", title: "Peer Richelsen", }, { image: "https://cal.com/stakeholder/bailey.jpg", alt: "Bailey", title: "Bailey Pumfleet", }, { image: "https://cal.com/stakeholder/alex-van-andel.jpg", alt: "Alex", title: "Alex Van Andel", }, { image: "https://cal.com/stakeholder/ciaran.jpg", alt: "Ciarán", title: "Ciarán Hanrahan", }, { image: "https://cal.com/stakeholder/peer.jpg", alt: "Peer", title: "Peer Richelsen", }, { image: "https://cal.com/stakeholder/bailey.jpg", alt: "Bailey", title: "Bailey Pumfleet", }, { image: "https://cal.com/stakeholder/alex-van-andel.jpg", alt: "Alex", title: "Alex Van Andel", }, { image: "https://cal.com/stakeholder/ciaran.jpg", alt: "Ciarán", title: "Ciarán Hanrahan", }, ]}/> </Example> <Example title="large"> <AvatarGroup size="lg" items={[ { image: "https://cal.com/stakeholder/peer.jpg", alt: "Peer", title: "Peer Richelsen", }, { image: "https://cal.com/stakeholder/bailey.jpg", alt: "Bailey", title: "Bailey Pumfleet", }, { image: "https://cal.com/stakeholder/alex-van-andel.jpg", alt: "Alex", title: "Alex Van Andel", }, { image: "https://cal.com/stakeholder/ciaran.jpg", alt: "Ciarán", title: "Ciarán Hanrahan", }, { image: "https://cal.com/stakeholder/peer.jpg", alt: "Peer", title: "Peer Richelsen", }, { image: "https://cal.com/stakeholder/bailey.jpg", alt: "Bailey", title: "Bailey Pumfleet", }, { image: "https://cal.com/stakeholder/alex-van-andel.jpg", alt: "Alex", title: "Alex Van Andel", }, { image: "https://cal.com/stakeholder/ciaran.jpg", alt: "Ciarán", title: "Ciarán Hanrahan", }, ]}/> </Example> </Examples> <Title offset title="Avatar" suffix="Variants" /> <Canvas> <Story name="Avatar"> <VariantsTable titles={['Default']} columnMinWidth={150}> <VariantRow variant="Sm"> <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" /> </VariantRow> <VariantRow variant="Lg"> <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" /> </VariantRow> </VariantsTable> </Story> </Canvas>