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

wix-style-react

export const _structure = `
<StorybookComponents.Stack>
  <Thumbnail
    image={<Image />}
    title={
      <StorybookComponents.Placeholder>Title</StorybookComponents.Placeholder>
    }
    description={
      <StorybookComponents.Placeholder>
        Description
      </StorybookComponents.Placeholder>
    }
  />
</StorybookComponents.Stack>;
`;

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <Thumbnail size="medium" title="Medium" description="Size" />
  <Thumbnail size="small" title="Small" description="Size" />
  <Thumbnail size="tiny" title="Tiny" description="Size" />
</StorybookComponents.Stack>;
`;

export const _dimensions = `
<StorybookComponents.Stack flexDirection="column">
  <Thumbnail title="Title" width="50%" height="120px" />
  <Thumbnail title="Title" width="25%" height="60px" />
</StorybookComponents.Stack>;
`;

export const _contentAlignment = `
<StorybookComponents.Stack>
  <Thumbnail
    title="Center"
    description="Alignment"
    image={<Image width="90px" />}
    height={240}
    contentAlignment="center"
    width={165}
  />
  <Thumbnail
    title="Top"
    description="Alignment"
    image={<Image width="90px" />}
    height={240}
    contentAlignment="top"
    width={165}
  />
</StorybookComponents.Stack>;
`;

export const _backgroundImage = `
<Thumbnail
  backgroundImage="example.jpg"
  width={240}
  height={240}
  title="Title"
/>;
`;

export const _states = `
<StorybookComponents.Stack gap="12px">
  <Thumbnail title="Default" width={140}/>
  <Thumbnail title="Selected" selected width={140}/>
  <Thumbnail title="Disabled" disabled width={140}/>
  <Thumbnail title="Disabled with image" disabled image={<Image />} width={140}/>
  <Thumbnail
    title="Disabled with image background"
    disabled
    backgroundImage="example.jpg"
    height={120}
    width={140}
  />
</StorybookComponents.Stack>;
`;

export const _customContent = `
<Thumbnail title="Title" width="50%">
  <StorybookComponents.Stack padding="24px">
    <StorybookComponents.Placeholder>Content</StorybookComponents.Placeholder>
  </StorybookComponents.Stack>
</Thumbnail>;
`;

export const _listOfOptions = `
() => {
  const [selected, setSelected] = React.useState(0);

  const renderCell = ({ id, title, src }) => (
    <Cell span={2}>
      <Thumbnail
        size="small"
        title={<Text>{title}</Text>}
        selected={selected === id}
        onClick={() => setSelected(id)}
      >
        <Proportion>
          <Box height="100%" width="100%" align="center" verticalAlign="middle">
            <Image src={src} height="24px" width="24px" transparent />
          </Box>
        </Proportion>
      </Thumbnail>
    </Cell>
  );

  return (
    <Card>
      <Card.Header title="Add label to contact" />
      <Divider />
      <Card.Content>
        <Layout>
          <Cell span={12}>
            <Text>Decide how you want to respond to the trigger</Text>
          </Cell>
          {renderCell({
            id: 0,
            title: 'Send email to contacts',
            src: 'contacts.svg',
          })}
          {renderCell({
            id: 1,
            title: 'Send a chat message',
            src: 'chat_message.svg',
          })}
          {renderCell({
            id: 2,
            title: 'Get notified by email',
            src: 'email_notify.svg',
          })}
          {renderCell({
            id: 3,
            title: 'Create a task',
            src: 'task.svg',
          })}
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;

export const _gallerySelection = `
() => {
  [selected, setSelected] = React.useState(0);

  return (
    <Layout cols={1}>
      <FormField label="Cover Image">
        <Box gap="12px">
          <Thumbnail
            backgroundImage="TravelExample1.jpg"
            width={64}
            height={64}
            selected={selected === 0}
            onClick={() => setSelected(0)}
          />
          <Thumbnail
            backgroundImage="TravelExample2.jpg"
            width={64}
            height={64}
            selected
            selected={selected === 1}
            onClick={() => setSelected(1)}
          />
          <Thumbnail
            backgroundImage="TravelExample3.jpg"
            width={64}
            height={64}
            selected={selected === 2}
            onClick={() => setSelected(2)}
          />
          <Thumbnail
            backgroundImage="TravelExample4.jpg"
            width={64}
            height={64}
            selected={selected === 3}
            onClick={() => setSelected(3)}
          />
          <Thumbnail
            backgroundImage="TravelExample5.jpg"
            width={64}
            height={64}
            selected={selected === 4}
            onClick={() => setSelected(4)}
          />
        </Box>
      </FormField>
    </Layout>
  );
};
`;

export const _commonCustomContent = `
() => {
  const [selected, setSelected] = React.useState(0);

  const renderThumbnail = ({ title, subtitle, id }) => (
    <Thumbnail selected={selected === id} onClick={() => setSelected(id)}>
      <Box padding="18px">
        <Box gap="12px" verticalAlign="middle">
          <Icons.Public />
          <Box direction="vertical">
            <Text size="medium" weight="bold">
              {title}
            </Text>
            <Box>
              <Text size="small" secondary>
                {subtitle}
              </Text>
            </Box>
          </Box>
        </Box>
      </Box>
    </Thumbnail>
  );

  return (
    <Card>
      <Card.Header title="Group info" />
      <Card.Divider />
      <Card.Content>
        <Layout cols={12}>
          <Cell span={8}>
            <Layout cols={1}>
              <FormField label="Name">
                <Input placeholder="Enter group name" />
              </FormField>
              <FormField
                label="Privacy"
                infoContent="Choose who can see and join this group"
              >
                <Layout cols={1} gap="12px">
                  {renderThumbnail({
                    title: 'Public',
                    subtitle: 'Anyone can view this group',
                    id: 0,
                  })}
                  {renderThumbnail({
                    title: 'Private',
                    subtitle: 'Only approved members can view this group',
                    id: 1,
                  })}
                  {renderThumbnail({
                    title: 'Hidden',
                    subtitle: 'Group is hidden and requires an invite to join',
                    id: 2,
                  })}
                </Layout>
              </FormField>
            </Layout>
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;