wix-style-react/src/Avatar/docs/Avatar.examples.js

wix-style-react

export const _shape = `
<StorybookComponents.Stack>
  <Avatar shape="circle" />
  <Avatar shape="square" />
</StorybookComponents.Stack>;
`;

export const _contentStates = `
<StorybookComponents.Stack>
  <Avatar imgProps={{ src: 'AvatarExample4.jpg' }} />
  <Avatar imgProps={{ src: 'NotFoundImage.jpg' }} />
  <Avatar name="Anne Rikki" imgProps={{ src: 'NotFoundImage.jpg' }} />
</StorybookComponents.Stack>;
`;

export const _size = `
<StorybookComponents.Stack>
  <Avatar size="size90" name="Anne Rikki" />
  <Avatar size="size72" name="Anne Rikki" />
  <Avatar size="size60" name="Anne Rikki" />
  <Avatar size="size48" name="Anne Rikki" />
  <Avatar size="size36" name="Anne Rikki" />
  <Avatar size="size30" name="Anne Rikki" />
  <Avatar size="size24" name="Anne Rikki" />
  <Avatar size="size18" name="Anne Rikki" />
</StorybookComponents.Stack>;
`;

export const _color = `
<StorybookComponents.Stack>
  <Avatar color="A1" name="A 1" />
  <Avatar color="A2" name="A 2" />
  <Avatar color="A3" name="A 3" />
  <Avatar color="A4" name="A 4" />
  <Avatar color="A5" name="A 5" />
  <Avatar color="A6" name="A 6" />
</StorybookComponents.Stack>;
`;

export const _presence = `
<StorybookComponents.Stack>
  <Avatar presence="online" />
  <Avatar presence="offline" />
  <Avatar presence="busy" />
</StorybookComponents.Stack>;
`;

export const _placeholder = `
<StorybookComponents.Stack>
  <Avatar />
  <Avatar shape="square" />
  <Avatar
    shape="square"
    placeholder={
      <Box color="B20">
        <Icons.Toolbox />
      </Box>
    }
  />
</StorybookComponents.Stack>;
`;

export const _indication = `
() => {
  const CustomIndication = () => (
    <Box
      backgroundColor="D80"
      borderRadius={24}
      color="#4267B2"
      width="max-content"
    >
      <Icons.Facebook />
    </Box>
  );

  return (
    <StorybookComponents.Stack>
      <Avatar
        name="Anne Rikki"
        size="size90"
        customIndication={<CustomIndication />}
      />
      <Avatar
        name="Anne Rikki"
        size="size72"
        customIndication={<CustomIndication />}
      />
      <Avatar
        name="Anne Rikki"
        size="size60"
        customIndication={<CustomIndication />}
      />
      <Avatar
        name="Anne Rikki"
        size="size48"
        customIndication={<CustomIndication />}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _actionButton = `
<StorybookComponents.Stack>
  <Avatar name="Anne Rikki" size="size90" indication={<Icons.PhotoCamera />} />
  <Avatar name="Anne Rikki" size="size72" indication={<Icons.PhotoCamera />} />
  <Avatar name="Anne Rikki" size="size60" indication={<Icons.PhotoCamera />} />
  <Avatar name="Anne Rikki" size="size48" indication={<Icons.PhotoCamera />} />
</StorybookComponents.Stack>;
`;

export const _showActionOnHover = `
<StorybookComponents.Stack>
  <Avatar
    name="Anne Rikki"
    size="size90"
    indication={<Icons.PhotoCamera />}
    showIndicationOnHover
  />
  <Avatar
    name="Anne Rikki"
    size="size72"
    indication={<Icons.PhotoCamera />}
    showIndicationOnHover
  />
  <Avatar
    name="Anne Rikki"
    size="size60"
    indication={<Icons.PhotoCamera />}
    showIndicationOnHover
  />
  <Avatar
    name="Anne Rikki"
    size="size48"
    indication={<Icons.PhotoCamera />}
    showIndicationOnHover
  />
</StorybookComponents.Stack>;
`;

export const _loader = `
<StorybookComponents.Stack>
  <Avatar
    name="Anne Rikki"
    size="size90"
    indication={<Icons.PhotoCamera />}
    loading
  />
  <Avatar
    name="Anne Rikki"
    size="size72"
    indication={<Icons.PhotoCamera />}
    loading
  />
  <Avatar
    name="Anne Rikki"
    size="size60"
    indication={<Icons.PhotoCamera />}
    loading
  />
  <Avatar
    name="Anne Rikki"
    size="size48"
    indication={<Icons.PhotoCamera />}
    loading
  />
</StorybookComponents.Stack>;
`;

export const _usersList = `
() => {
  const records = [
    {
      image: <Avatar size="size36" name="Sara Porter" />,
      name: 'Sara Porter',
      country: 'Canada',
      orders: 2,
      lastActivity: 'Sep 9, 2020',
    },
    {
      image: <Avatar size="size36" name="Michael Baldwin" />,
      name: 'Michael Baldwin',
      country: 'Germany',
      orders: 43,
      lastActivity: 'Sep 7, 2020',
    },
    {
      image: <Avatar size="size36" name="Alex Halifax" />,
      name: 'Alex Halifax',
      country: 'United Kingdom',
      orders: 12,
      lastActivity: 'Jun 30, 2020',
    },
    {
      image: <Avatar size="size36" name="Paul Sheffield" />,
      name: 'Paul Sheffield',
      country: 'US',
      orders: 0,
      lastActivity: 'Sep 18, 2019',
    },
  ];

  const columns = [
    { title: '', width: '36px', render: row => row.image },
    { title: 'Name', render: row => row.name },
    { title: 'Country', render: row => row.country },
    { title: 'Orders', render: row => row.orders },
    { title: 'Last Activity', render: row => row.lastActivity },
    {
      render: () => (
        <TableActionCell
          primaryAction={{
            text: 'Edit',
            onClick: () => {},
          }}
        />
      ),
    },
  ];

  return (
    <Card>
      <Table data={records} columns={columns}>
        <TableToolbar>
          <TableToolbar.Title>Customers</TableToolbar.Title>
        </TableToolbar>
        <Table.Content />
      </Table>
    </Card>
  );
};
`;

export const _prefix = `
<Dropdown
  placeholder="Select staff member"
  valueParser={option => option.value({ selected: option.id }).props.title}
  fixedFooter={<ListItemAction title="Add New Staff Member" />}
  options={[
    listItemSelectBuilder({
      id: 0,
      prefix: <Avatar size="size24" color="A1" name="Carmel Lloyd" />,
      title: 'Carmel Lloyd',
    }),
    listItemSelectBuilder({
      id: 1,
      prefix: <Avatar size="size24" color="A2" name="Gracie-May Marsden" />,
      title: 'Gracie-May Marsden',
    }),
    listItemSelectBuilder({
      id: 2,
      prefix: <Avatar size="size24" color="A3" name="Keisha Decker" />,
      title: 'Keisha Decker',
    }),
    listItemSelectBuilder({
      id: 3,
      prefix: <Avatar size="size24" color="A4" name="Ruairidh Fitzgerald" />,
      title: 'Ruairidh Fitzgerald',
    }),
    listItemSelectBuilder({
      id: 4,
      prefix: <Avatar size="size24" color="A5" name="Sheldon Chavez" />,
      title: 'Sheldon Chavez',
    }),
  ]}
/>;
`;

export const _uploadPhoto = `
<Card>
  <Card.Content>
    <Layout gap="18px">
      <Cell>
        <Box verticalAlign="middle" align="space-between">
          <Box verticalAlign="middle">
            <FileUpload>
              {({ openFileUploadDialog }) => (
                <Avatar
                  name="Anne Rikki"
                  size="size60"
                  onIndicationClick={openFileUploadDialog}
                  indication={<Icons.PhotoCamera size="24" />}
                />
              )}
            </FileUpload>
            <Box direction="vertical" padding="0 24px">
              <Heading appearance="H2">Anne Rikki</Heading>
              <TextButton weight="normal" size="small">
                Edit Contact
              </TextButton>
            </Box>
          </Box>
          <Button>Send Message</Button>
        </Box>
      </Cell>
      <Cell>
        <Divider />
      </Cell>
      <Cell>
        <Box gap="60px">
          <Box direction="vertical">
            <Text size="tiny" secondary light>
              Email
            </Text>
            <Text size="small">anne.rikki@email.com</Text>
          </Box>
          <Box direction="vertical">
            <Text size="tiny" secondary light>
              Phone
            </Text>
            <Text size="small">+44 734 349973</Text>
          </Box>
          <Box direction="vertical">
            <Text size="tiny" secondary light>
              Billing Address
            </Text>
            <Text size="small">2549 Perine Street, Vermont</Text>
          </Box>
        </Box>
      </Cell>
    </Layout>
  </Card.Content>
</Card>;

`;