# All files / src/Avatar Avatar.demo.stories.tsx

100% Statements 22/22
50% Branches 3/6
100% Functions 2/2
100% Lines 20/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    981x
    1x
    1x
    1x
    1x
    1x

    1x

    1x
    1x
    1x
    1x
    1x

    1x
    2x
    1x
    3x

    1x

    1x

    1x

    1x

     import { Building, People, PeopleGroup, Person } from '@procore/core-icons/dist'
    import React from 'react'
    import { Content } from '../Content/Content'
    import { FlexList } from '../FlexList'
    import { avatarImageUrl } from '../_storyHelpers_/constants'
    import { Avatar } from './Avatar'

    export default {
      component: Avatar,
      title: 'Demos/Avatar',
    }

    const PersonIcon = <Person size="lg" />
    const BuildingIcon = <Building size="lg" />
    const PeopleIcon = <People size="lg" />
    const PeopleGroupIcon = <PeopleGroup size="lg" />
    const icons = { PersonIcon, BuildingIcon, PeopleIcon, PeopleGroupIcon }

    export const Demo = ({ ...props }): any => {
      let { initials, icon } = props
      const additionalProps = (str: string) =>
        props.role === 'link'
          ? {
              'aria-label': `Example ${str}`,
              href: '#',
            }
          : props.role === 'button'
          ? {
              'aria-label': `Example Button ${str}`,
              onPress: console.log,
            }
          : props.role === 'img'
          ? { 'aria-label': `${str} avatar` }
          : {}
      return (
        <Content>
          <FlexList>
            <Avatar {...additionalProps('User-input initials')} {...props}>
              <Avatar.Label>{initials}</Avatar.Label>
            </Avatar>
            <Avatar {...additionalProps('Building')} {...props}>
              <Avatar.Icon icon={<Building />} />
            </Avatar>
            <Avatar {...additionalProps('Cartoon')} {...props}>
              <Avatar.Portrait imageUrl={avatarImageUrl} />
            </Avatar>
          </FlexList>
        </Content>
      )
    }

    Demo.args = {
      initials: 'md',
    }

    Demo.argTypes = {
      clickable: {
        defaultValue: false,
        control: 'boolean',
      },
      disabled: {
        defaultValue: false,
        control: 'boolean',
      },
      icon: {
        defaultValue: 'building',
        options: Object.keys(icons),
        mapping: icons,
        control: {
          type: 'select',
          labels: {
            BuildingIcon: 'building',
            PeopleGroupIcon: 'people group',
            PeopleIcon: 'people',
            PersonIcon: 'person',
          },
        },
      },
      onClick: {
        action: 'onClick',
      },
      role: {
        control: {
          options: [undefined, 'button', 'link'],
          type: 'select',
        },
      },
      size: {
        defaultValue: 'md',
        control: 'radio',
        options: ['md', 'lg', 'xl'],
      },
    }

    Demo.parameters = {
      chromatic: { disableSnapshot: true },
    }