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

wix-style-react

export const _size = `
<StorybookComponents.Stack>
  <Tag size="large">Large</Tag>
  <Tag size="medium">Medium</Tag>
  <Tag size="small">Small</Tag>
  <Tag size="tiny">Tiny</Tag>
</StorybookComponents.Stack>;
`;

export const _theme = `
<StorybookComponents.Stack flexDirection="column" gap="18px">
  <StorybookComponents.Stack>
    <Tag theme="standard">Standard</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag theme="error">Error</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag theme="warning">Warning</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag theme="dark">Dark</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag theme="neutral">Neutral</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag theme="success">Success</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag theme="light">Light</Tag>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Tag theme="lightOutlined">Light Outlined</Tag>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _disabled = `
<Tag disabled>Disabled</Tag>;
`;

export const _thumbnail = `
<Tag thumb={<Image src="example.jpg" />}>Image thumbnail</Tag>;
`;

export const _removeButton = `
<StorybookComponents.Stack>
  <Tag>Removable</Tag>
  <Tag removable={false}>Not removable</Tag>
</StorybookComponents.Stack>;
`;

export const _maxWidth = `
<Tag maxWidth={240}>Hover to see the full label in a tooltip</Tag>;
`;

export const _contentCategorization = `() => {
  const [checklistShown, setChecklistShown] = React.useState(false);
  const [tagList, setTagList] = React.useState([
    { id: 0, title: 'New collection', shown: true },
    { id: 1, title: "Women's clothing", shown: true },
    { id: 2, title: "Men's clothing", shown: false },
    { id: 3, title: 'Jacket', shown: true },
    { id: 4, title: 'Outerwear', shown: true },
    { id: 5, title: 'Sustainable', shown: false },
  ]);

  const toggleTag = (id, value) =>
    setTagList(
      tagList.map(item => (item.id === id ? { ...item, shown: value } : item)),
    );

  return (
    <Card>
      <Card.Content>
        <Box direction="vertical" gap="24px">
          <Box align="space-between">
            <Text weight="bold">Labels</Text>
            <Popover
              showArrow
              shown={checklistShown}
              appendTo="window"
              onClickOutside={() => setChecklistShown(false)}
            >
              <Popover.Element>
                <TextButton onClick={() => setChecklistShown(!checklistShown)}>
                  Add
                </TextButton>
              </Popover.Element>
              <Popover.Content>
                <Box direction="vertical" borderRadius="8px" padding="12px 0">
                  {tagList.map(({ id, title, shown }) => (
                    <ListItemSelect
                      checkbox
                      selected={shown}
                      title={title}
                      onClick={() => toggleTag(id, !shown)}
                    />
                  ))}
                </Box>
              </Popover.Content>
            </Popover>
          </Box>
          <Box gap="6px" flexWrap="wrap">
            {tagList.map(({ id, title, shown }) =>
              shown ? (
                <Tag onRemove={() => toggleTag(id, !shown)}>{title}</Tag>
              ) : null,
            )}
          </Box>
        </Box>
      </Card.Content>
    </Card>
  );
};
`;