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

wix-style-react

export const _background = `
<StorybookComponents.Stack>
  <CardGalleryItem
    backgroundImageUrl="example.jpg"
    primaryActionProps={{
      label: 'Button',
    }}
  />
  <CardGalleryItem
    backgroundImageNode=<Image height="100%" />
    primaryActionProps={{
      label: 'Button',
    }}
  />
  <CardGalleryItem
    backgroundImageNode=<FillPreview fill="linear-gradient(45deg, rgba(14,0,255,1) 0%, rgba(0,212,255,1) 80%)" />
    primaryActionProps={{
      label: 'Button',
    }}
  />
</StorybookComponents.Stack>;
`;

export const _title = `
<StorybookComponents.Stack width="200px">
  <CardGalleryItem 
    backgroundImageUrl="example.jpg"
    primaryActionProps={{
      label: 'Button',
    }}
    title="Title"
    subtitle="Subtitle"
  />
</StorybookComponents.Stack>;
`;

export const _badge = `
<StorybookComponents.Stack width="200px">
  <CardGalleryItem
    backgroundImageUrl="example.jpg"
    primaryActionProps={{
      label: 'Button',
    }}
    badge={<Badge skin="standard">Badge</Badge>}
  />
</StorybookComponents.Stack>;
`;

export const _actions = `
<StorybookComponents.Stack width="400px">
  <CardGalleryItem
    backgroundImageUrl="example.jpg"
    primaryActionProps={{
      label: 'Button',
    }}
    secondaryActionProps={{
      label: 'Text Button',
    }}
  />
  <CardGalleryItem
    backgroundImageUrl="example.jpg"
    primaryActionProps={{
      label: 'Button',
      disabled: true,
      disabledMessage: 'Message explaining the status',
    }}
    secondaryActionProps={{
      label: 'Text Button',
    }}
  />
</StorybookComponents.Stack>;
`;

export const _setttingsMenu = `
<Layout cols={3}>
  <CardGalleryItem
    settingsMenu={
      <PopoverMenu
        triggerElement={({ toggle, close }) => (
          <IconButton
            onClick={e => {
              e.stopPropagation();
              toggle();
            }}
            onMouseLeave={close}
            skin="light"
            size="small"
            priority="secondary"
          >
            <Icons.More />
          </IconButton>
        )}
      >
        <PopoverMenu.MenuItem text="Edit" prefixIcon={<Icons.Edit />} />
        <PopoverMenu.MenuItem text="Email" prefixIcon={<Icons.Email />} />
        <PopoverMenu.MenuItem
          text="Delete"
          skin="destructive"
          prefixIcon={<Icons.Delete />}
        />
      </PopoverMenu>
    }
    primaryActionProps={{
      label: 'Button',
      onClick: () => console.log('hello'),
    }}
    backgroundImageUrl="example.jpg"
  />
  <CardGalleryItem
    settingsMenu={
      <PopoverMenu
        triggerElement={({ toggle, close }) => (
          <TextButton
            onClick={e => {
              e.stopPropagation();
              toggle();
            }}
            onMouseLeave={close}
            skin="light"
            size="small"
            priority="secondary"
            suffixIcon={<Icons.ChevronDown/>}
          >
            Button
          </TextButton>
        )}
      >
        <PopoverMenu.MenuItem text="Edit" prefixIcon={<Icons.Edit />} />
        <PopoverMenu.MenuItem text="Email" prefixIcon={<Icons.Email />} />
        <PopoverMenu.MenuItem
          text="Delete"
          skin="destructive"
          prefixIcon={<Icons.Delete />}
        />
      </PopoverMenu>
    }
    primaryActionProps={{
      label: 'Button',
      onClick: () => console.log('hello'),
    }}
    backgroundImageUrl="example.jpg"
  />
</Layout>;
`;

export const _productsList = `
() => {
  const renderCardGalleryItem = ({ imageSrc, title, subtitle, badge }) => (
    <Box border="1px solid" borderColor="D55" borderRadius={9}>
      <CardGalleryItem
        backgroundImageUrl={imageSrc}
        primaryActionProps={{
          label: 'Edit',
        }}
        badge={badge}
        title={<Text weight="bold">{title}</Text>}
        subtitle={subtitle}
        settingsMenu={
          <PopoverMenu
            triggerElement={({ toggle, close }) => (
              <IconButton
                onClick={toggle}
                onMouseLeave={close}
                skin="light"
                size="small"
                priority="secondary"
              >
                <Icons.More />
              </IconButton>
            )}
          >
            <PopoverMenu.MenuItem
              text="Dublicate"
              prefixIcon={<Icons.Duplicate />}
            />
            <PopoverMenu.MenuItem
              text="Move to"
              prefixIcon={<Icons.MoveTo />}
            />
            <PopoverMenu.MenuItem
              text="Sold out"
              prefixIcon={<Icons.FoodOutOfStock />}
            />
            <PopoverMenu.MenuItem text="Hide" prefixIcon={<Icons.Hidden />} />
            <PopoverMenu.MenuItem
              text="Archive"
              skin="destructive"
              prefixIcon={<Icons.Delete />}
            />
          </PopoverMenu>
        }
      />
    </Box>
  );

  return (
    <Card>
      <Card.Header
        title="Dishes"
        suffix={
          <Button size="small" prefixIcon={<Icons.Add />}>
            New Dish
          </Button>
        }
      />
      <Card.Divider />
      <Card.Content>
        <Layout>
          <Cell span={4}>
            {renderCardGalleryItem({
              imageSrc: 'FoodExample1.jpg',
              title: 'Breakfast Toast',
              subtitle: '$7.89',
              badge: (
                <Badge skin="standard" skin="success">
                  New
                </Badge>
              ),
            })}
          </Cell>
          <Cell span={4}>
            {renderCardGalleryItem({
              imageSrc: 'FoodExample2.jpg',
              title: 'Lemon Ricotta Pasta',
              subtitle: '$15.99',
              badge: (
                <Badge skin="standard" skin="neutralStandard">
                  Popular
                </Badge>
              ),
            })}
          </Cell>
          <Cell span={4}>
            <AddItem size="medium" tooltipContent="Add new dish" />
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;