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

wix-style-react

export const _dimensions = `
<Image width="33%" height="180px" />;
`;

export const _border = `
<StorybookComponents.Stack width="25%">
  <Image showBorder />
</StorybookComponents.Stack>;
`;

export const _borderRadius = `
<StorybookComponents.Stack>
  <Image />
  <Image borderRadius={'24px'} />
  <Image borderRadius={'36px 0px 0px 36px'} />
</StorybookComponents.Stack>;
`;

export const _backgroundFill = `
<StorybookComponents.Stack>
  <Image fit="contain" height="240" src="example.jpg" />
  <Image fit="contain" height="240" src="example.jpg" transparent />
  <Image fit="contain" src="PromotionalPromoteMarketingHomeEmail.svg" />
  <Image
    fit="contain"
    src="PromotionalPromoteMarketingHomeEmail.svg"
    transparent
  />
</StorybookComponents.Stack>;
`;

export const _states = `
<StorybookComponents.Stack>
  <Image />
  <Image src="example.jpg" />
</StorybookComponents.Stack>;
`;

export const _fitMode = `
<StorybookComponents.Stack>
  <Image fit="contain" height="300" src="example.jpg" />
  <Image fit="cover" height="300" src="example.jpg" />
  <Image fit="none" height="300" src="example.jpg" />
</StorybookComponents.Stack>;
`;

export const _position = `
<StorybookComponents.Stack>
  <Image src="example.jpg" fit="none" position="top" />
  <Image src="example.jpg" fit="none" position="center left" />
  <Image src="example.jpg" fit="none" position="bottom right" />
</StorybookComponents.Stack>;
`;

export const _mixedBorderRadius = `
() => {
  const renderImage = () => (
    <Image
      src="TravelExample7.jpg"
      borderRadius="15px 0px 0px 15px"
      height="200px"
      width="230px"
    />
  );

  const renderContent = () => (
    <Box
      direction="vertical"
      verticalAlign="space-between"
      padding="24px 29px 27px"
      backgroundColor="D80"
      flexGrow={1}
    >
      <Box direction="vertical">
        <Text weight="bold">Los Gatos del Oeste</Text>
        <Text size="tiny" weight="thin" secondary light>
          Jul 15, 2021 7:30pm, Cypher City
        </Text>
      </Box>
      <Box align="right" verticalAlign="middle" minWidth={115} gap="12px">
        <IconButton priority="secondary" size="small">
          <Icons.More />
        </IconButton>
        <Button priority="secondary" size="small">
          Edit
        </Button>
      </Box>
    </Box>
  );

  return (
    <Box minHeight={200}>
      {renderImage()}
      {renderContent()}
    </Box>
  );
};
`;

export const _productList = `
() => {
  const records = [
    {
      name: 'Light Grey Hoodie',
      sku: 25232564,
      inStock: true,
      price: '$14.00',
      image: <Image src="ProductExample1.jpg" />,
    },
    {
      name: 'Black Watch',
      sku: 35246432,
      inStock: true,
      price: '$29.00',
      image: <Image src="ProductExample2.jpg" />,
    },
    {
      name: 'Reading Glasses',
      sku: 4864310,
      inStock: false,
      price: '$69.00',
      image: <Image src="ProductExample3.jpg" />,
    },
    {
      name: 'Leather Shoes',
      sku: 125156422,
      inStock: true,
      price: '$7.00',
      image: <Image src="ProductExample4.jpg" />,
    },
  ];

  const Status = ({ isInStock }) => (
    <Text size="small" secondary>
      {isInStock ? 'In Stock' : 'Out Of Stock'}
    </Text>
  );

  const secondaryAction = [
    {
      icon: <Icons.Duplicate />,
      text: 'Duplicate',
      onClick: () => {},
    },
    {
      icon: <Icons.Delete />,
      text: 'Delete',
      onClick: () => {},
    },
  ];

  const columns = [
    {
      title: '',
      render: row => row.image,
      width: '60px',
    },
    {
      title: 'Name',
      render: row => row.name,
      width: '30%',
    },
    {
      title: 'SKU',
      render: row => row.sku,
      width: '20%',
      align: 'start',
    },
    {
      title: 'Stock',
      render: row => <Status isInStock={row.inStock} />,
      width: '20%',
      align: 'start',
    },
    {
      title: 'Price',
      render: row => row.price,
      width: '10%',
      align: 'start',
    },
    {
      render: row => <TableActionCell secondaryActions={secondaryAction} />,
      width: '10%',
    },
  ];

  return (
    <Card>
      <Table data={records} columns={columns}>
        <TableToolbar>
          <TableToolbar.ItemGroup position="start">
            <TableToolbar.Item>
              <TableToolbar.Title>Products</TableToolbar.Title>
            </TableToolbar.Item>
          </TableToolbar.ItemGroup>
        </TableToolbar>
        <Table.Content />
      </Table>
    </Card>
  );
};
`;