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

wix-style-react

export const _structure = `
<Proportion aspectRatio={2}>
  <MediaOverlay
    hoverSkin="dark"
    media={
      <StorybookComponents.Stack
        justifyContent="center"
        alignItems="center"
        height="100%"
      >
        Area for the media content
      </StorybookComponents.Stack>
    }
  >
    <MediaOverlay.Content visible="hover">
      <StorybookComponents.Placeholder skin="light">
        Area for overlay elements
      </StorybookComponents.Placeholder>
    </MediaOverlay.Content>
  </MediaOverlay>
</Proportion>;
`;

export const _overlayContentPlacement = `
<Proportion aspectRatio={2}>
  <MediaOverlay skin="gradient" media={<StorybookComponents.Placeholder />}>
    <MediaOverlay.Content placement="top-start" visible="always">
      <StorybookComponents.Placeholder>
        Top Start
      </StorybookComponents.Placeholder>
    </MediaOverlay.Content>
    <MediaOverlay.Content placement="top-end" visible="always">
      <StorybookComponents.Placeholder>Top End</StorybookComponents.Placeholder>
    </MediaOverlay.Content>
    <MediaOverlay.Content placement="middle" visible="always">
      <StorybookComponents.Placeholder>Middle</StorybookComponents.Placeholder>
    </MediaOverlay.Content>
    <MediaOverlay.Content placement="bottom-start" visible="always">
      <StorybookComponents.Placeholder>
        Bottom Start
      </StorybookComponents.Placeholder>
    </MediaOverlay.Content>
    <MediaOverlay.Content placement="bottom-end" visible="always">
      <StorybookComponents.Placeholder>
        Bottom End
      </StorybookComponents.Placeholder>
    </MediaOverlay.Content>
  </MediaOverlay>
</Proportion>;
`;

export const _initialOverlaySkin = `
<StorybookComponents.Stack>
  <Proportion>
    <MediaOverlay skin="none" media="example.jpg">
      <MediaOverlay.Content visible="always">None</MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
  <Proportion>
    <MediaOverlay skin="gradient" media="example.jpg">
      <MediaOverlay.Content visible="always">Gradient</MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
  <Proportion>
    <MediaOverlay skin="dark" media="example.jpg">
      <MediaOverlay.Content visible="always">
        <Box color="D80">Dark</Box>
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
</StorybookComponents.Stack>;
`;

export const _hoverOverlaySkin = `
<StorybookComponents.Stack>
  <Proportion>
    <MediaOverlay hoverSkin="none" media="example.jpg">
      <MediaOverlay.Content visible="always">None</MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
  <Proportion>
    <MediaOverlay hoverSkin="gradient" media="example.jpg">
      <MediaOverlay.Content visible="always">Gradient</MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
  <Proportion>
    <MediaOverlay hoverSkin="dark" media="example.jpg">
      <MediaOverlay.Content visible="always">Dark</MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
</StorybookComponents.Stack>;
`;

export const _overlayContentVisibility = `
<StorybookComponents.Stack>
  <Proportion>
    <MediaOverlay media="example.jpg">
      <MediaOverlay.Content visible="default">
        <StorybookComponents.Placeholder>
          Visible in initial state
        </StorybookComponents.Placeholder>
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
  <Proportion>
    <MediaOverlay media="example.jpg">
      <MediaOverlay.Content visible="hover">
        <StorybookComponents.Placeholder>
          Visible on hover
        </StorybookComponents.Placeholder>
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
  <Proportion>
    <MediaOverlay media="example.jpg">
      <MediaOverlay.Content visible="always">
        <StorybookComponents.Placeholder>
          Always visible
        </StorybookComponents.Placeholder>
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
</StorybookComponents.Stack>;
`;

export const _borderRadius = `
<StorybookComponents.Stack>
  <Proportion>
    <MediaOverlay media="example.jpg" removeRoundedBorders />
  </Proportion>
  <Proportion>
    <MediaOverlay media="example.jpg" borderRadius="18px" />
  </Proportion>
  <Proportion>
    <MediaOverlay media="example.jpg" borderRadius="42px" />
  </Proportion>
</StorybookComponents.Stack>;
`;

export const _customMediaElement = `
<StorybookComponents.Stack width="25%">
  <Proportion aspectRatio={1.4}>
    <MediaOverlay
      skin="gradient"
      media={
        <FillPreview fill="linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)" />
      }
    >
      <MediaOverlay.Content placement="bottom-start" visible="always">
        <Text size="small" ellipsis light>
          Item Title
        </Text>
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
</StorybookComponents.Stack>;
`;

export const _dragHandle = `
<StorybookComponents.Stack width="33%">
  <Proportion aspectRatio={1.4}>
    <MediaOverlay hoverSkin="dark" media="example.jpg">
      <MediaOverlay.Content placement="top-end" visible="hover">
        <IconButton priority="secondary" skin="inverted" size="tiny">
          <Icons.Crop />
        </IconButton>
        <IconButton priority="secondary" skin="inverted" size="tiny">
          <Icons.Star />
        </IconButton>
        <PopoverMenu
          triggerElement={
            <IconButton priority="secondary" skin="inverted" size="tiny">
              <Icons.More />
            </IconButton>
          }
        >
          <PopoverMenu.MenuItem text="Edit" />
          <PopoverMenu.MenuItem text="Preview" />
          <PopoverMenu.MenuItem text="Remove" skin="destructive" />
        </PopoverMenu>
      </MediaOverlay.Content>
      <MediaOverlay.Content visible="hover">
        <MediaOverlay.DragHandle />
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
</StorybookComponents.Stack>;
`;

export const _socialMediaGallery = `
<Box gap="30px">
  <Proportion aspectRatio={1.5}>
    <MediaOverlay skin="gradient" media="TravelExample7.jpg">
      <MediaOverlay.Content placement="bottom-start" visible="always">
        <Icons.Instagram style={{ color: 'white' }} />
      </MediaOverlay.Content>
      <MediaOverlay.Content placement="bottom-end" visible="always">
        <Text size="small" light>
          02:32
        </Text>
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
  <Proportion aspectRatio={1.5}>
    <MediaOverlay skin="gradient" media="TravelExample8.jpg">
      <MediaOverlay.Content placement="bottom-start" visible="always">
        <Icons.Instagram style={{ color: 'white' }} />
      </MediaOverlay.Content>
      <MediaOverlay.Content placement="bottom-end" visible="always">
        <Text size="small" light>
          01:21
        </Text>
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
  <Proportion aspectRatio={1.5}>
    <MediaOverlay skin="gradient" media="TravelExample9.jpg">
      <MediaOverlay.Content placement="bottom-start" visible="always">
        <Icons.Instagram style={{ color: 'white' }} />
      </MediaOverlay.Content>
      <MediaOverlay.Content placement="bottom-end" visible="always">
        <Text size="small" light>
          00:43
        </Text>
      </MediaOverlay.Content>
    </MediaOverlay>
  </Proportion>
</Box>;
`;

export const _itemLists = `
() => {
  const Controls = () => [
    <IconButton priority="secondary" skin="inverted" size="tiny">
      <Icons.Star />
    </IconButton>,
    <PopoverMenu
      triggerElement={
        <IconButton priority="secondary" skin="inverted" size="tiny">
          <Icons.More />
        </IconButton>
      }
    >
      <PopoverMenu.MenuItem text="Edit" />
      <PopoverMenu.MenuItem text="Preview" />
      <PopoverMenu.MenuItem text="Remove" skin="destructive" />
    </PopoverMenu>,
  ];

  return (
    <Box gap="30px">
      <Proportion aspectRatio={1}>
        <MediaOverlay skin="gradient" media="FoodExample1.jpg">
          <MediaOverlay.Content placement="top-end" visible="hover">
            <Controls />
          </MediaOverlay.Content>
          <MediaOverlay.Content placement="top-start" visible="always">
            <Badge skin="success">New!</Badge>
          </MediaOverlay.Content>
          <MediaOverlay.Content placement="bottom-start" visible="always">
            <Text size="small" weight="normal" light>
              Breakfast toast
            </Text>
          </MediaOverlay.Content>
        </MediaOverlay>
      </Proportion>
      <Proportion aspectRatio={1}>
        <MediaOverlay skin="gradient" media="FoodExample2.jpg">
          <MediaOverlay.Content placement="top-end" visible="hover">
            <Controls />
          </MediaOverlay.Content>
          <MediaOverlay.Content placement="top-start" visible="always">
            <Badge skin="neutralStandard">Popular</Badge>
          </MediaOverlay.Content>
          <MediaOverlay.Content placement="bottom-start" visible="always">
            <Text size="small" weight="normal" light>
              Lemon Ricotta Pasta
            </Text>
          </MediaOverlay.Content>
        </MediaOverlay>
      </Proportion>
      <Proportion aspectRatio={1}>
        <MediaOverlay skin="gradient" media="FoodExample3.jpg">
          <MediaOverlay.Content placement="top-end" visible="hover">
            <Controls />
          </MediaOverlay.Content>
          <MediaOverlay.Content placement="bottom-start" visible="always">
            <Text size="small" weight="normal" light>
              Spanish Paella
            </Text>
          </MediaOverlay.Content>
        </MediaOverlay>
      </Proportion>
    </Box>
  );
};
`;

export const _imageGallery = `
<Layout gap="18px">
  <Cell span={6} rows={2}>
    <Image height="381px" src="TravelExample1.jpg" />
  </Cell>
  <Cell span={3}>
    <Image height="180px" src="TravelExample2.jpg" />
  </Cell>
  <Cell span={3}>
    <Image height="180px" src="TravelExample3.jpg" />
  </Cell>
  <Cell span={3}>
    <Image height="180px" src="TravelExample4.jpg" />
  </Cell>
  <Cell span={3}>
    <Box height="180px">
      <MediaOverlay
        skin="dark"
        onClick={() => {}}
        media="TravelExample5.jpg"
      >
        <MediaOverlay.Content visible="always">
          <Heading light appearance="H3">
            +128
          </Heading>
        </MediaOverlay.Content>
      </MediaOverlay>
    </Box>
  </Cell>
</Layout>;
`;

export const _contentEdit = `
<Proportion aspectRatio={1.6}>
  <MediaOverlay hoverSkin="dark" media="TravelExample6.jpg">
    <MediaOverlay.Content visible="hover">
      <Box gap="12px" align="center">
        <Button prefixIcon={<Icons.Refresh />}>Change Image</Button>
        <Tooltip content="Delete">
          <IconButton skin="inverted">
            <Icons.Delete />
          </IconButton>
        </Tooltip>
      </Box>
    </MediaOverlay.Content>
  </MediaOverlay>
</Proportion>;
`;

export const _reordableList = `
() => {
  const Media = ({ img }) => (
    <Proportion aspectRatio={1}>
      <MediaOverlay hoverSkin="dark" media={img}>
        <MediaOverlay.Content placement="top-end" visible="hover">
          <IconButton priority="secondary" skin="inverted" size="tiny">
            <Icons.Crop />
          </IconButton>
          <IconButton priority="secondary" skin="inverted" size="tiny">
            <Icons.Star />
          </IconButton>
          <PopoverMenu
            triggerElement={
              <IconButton priority="secondary" skin="inverted" size="tiny">
                <Icons.More />
              </IconButton>
            }
          >
            <PopoverMenu.MenuItem text="Edit" />
            <PopoverMenu.MenuItem text="Preview" />
            <PopoverMenu.MenuItem text="Remove" skin="destructive" />
          </PopoverMenu>
        </MediaOverlay.Content>
        <MediaOverlay.Content visible="hover">
          <MediaOverlay.DragHandle />
        </MediaOverlay.Content>
      </MediaOverlay>
    </Proportion>
  );

  return (
    <Box gap="30px">
      <Media img="FoodExample4.jpg" />
      <Media img="FoodExample5.jpg" />
      <Media img="FoodExample6.jpg" />
    </Box>
  );
};
`;