@wix/design-system/dist/docs/components/ModalPreviewLayoutExamples.md

@wix/design-system

## Feature Examples


### Example with Full-Width Content
- description: <p>An example for preview layout modal with title, actions and content that takes the full width</p>
- example: 
```jsx 
() => {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Modal isOpen={open}>
        <ModalPreviewLayout
          title="Modal with Full-Width Content"
          actions={
            <Box verticalAlign="middle">
              <Box marginRight={2}>
                <TextButton
                  size="small"
                  skin="light"
                  prefixIcon={<Icons.Print />}
                >
                  Print
                </TextButton>
              </Box>
              <Box marginRight={2}>
                <Button priority="secondary" size="small" skin="light">
                  Send
                </Button>
              </Box>
              <IconButton priority="secondary" size="small" skin="light">
                <Icons.More />
              </IconButton>
            </Box>
          }
          onClose={() => setOpen(false)}
        >
          <Box verticalAlign="middle" height="100%">
            <img
              src="https://i.ibb.co/C8HHTJx/rectangle-2x.png"
              width="100%"
              height="550px"
            />
          </Box>
        </ModalPreviewLayout>
      </Modal>
    </div>
  );
};
```

### Example with Scrollable Content
- description: <p>An example for preview layout modal with title, actions and content that overflows the height</p>
- example: 
```jsx 
() => {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
        <Button onClick={() => setOpen(true)}>Open</Button>
        <Modal isOpen={open}>
          <ModalPreviewLayout
            title="Modal with Scrollable Content"
            actions={
              <Box verticalAlign="middle">
                <Box marginRight={2}>
                  <TextButton size="small" skin="light" prefixIcon={<Icons.Print />}>
                    Print
                  </TextButton>
                </Box>
                <Box marginRight={2}>
                  <Button priority="secondary" size="small" skin="light">
                    Send
                  </Button>
                </Box>
                <IconButton priority="secondary" size="small" skin="light">
                  <Icons.More />
                </IconButton>
              </Box>
            }
            onClose={() => setOpen(false)}
          >
            <Box
              align="center"
              verticalAlign="middle"
              backgroundColor="D80"
              padding={3}
              borderRadius={3}
              width="750px"
              height="150vh"
            >
              This is a content that overflows!
            </Box>
          </ModalPreviewLayout>
        </Modal>
      </div>
  )
}
```

### Example with Multiple Content
- description: <p>An example for preview layout modal with title, actions and multiple content</p>
- example: 
```jsx 
() => {
  const [open, setOpen] = React.useState(false);
  const prevButtonProps = {
    tooltipText: 'Previous',
    onClick: i => console.log('index ', i),
  };
  const nextButtonProps = {
    tooltipText: 'Next',
    onClick: i => console.log('index ', i),
  };
  return (
    <StorybookComponents.Stack>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Modal isOpen={open}>
        <ModalPreviewLayout
          closeButtonTooltipText="Close"
          prevButtonProps={prevButtonProps}
          nextButtonProps={nextButtonProps}
          title="Modal with Multiple Content"
          actions={
            <Box verticalAlign="middle">
              <Box marginRight={2}>
                <TextButton
                  size="small"
                  skin="light"
                  prefixIcon={<Icons.Print />}
                >
                  Print
                </TextButton>
              </Box>
              <Box marginRight={2}>
                <Button priority="secondary" size="small" skin="light">
                  Send
                </Button>
              </Box>
              <IconButton priority="secondary" size="small" skin="light">
                <Icons.More />
              </IconButton>
            </Box>
          }
          onClose={() => setOpen(false)}
        >
          {['first', 'second', 'third'].map((ordinalNum, i) => (
            <Box
              key={i}
              align="center"
              verticalAlign="middle"
              backgroundColor="D80"
              width="60vw"
              height="90vh"
              children={`This is the ${ordinalNum} page`}
            />
          ))}
        </ModalPreviewLayout>
      </Modal>
    </StorybookComponents.Stack>
  );
};
```

### Example with Light Skin
- description: <p>An example for preview layout modal with light skin</p>
- example: 
```jsx 
() => {
  const [open, setOpen] = React.useState(false);

  return (
    <StorybookComponents.Stack>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Modal isOpen={open}>
        <ModalPreviewLayout
          title="Simple Modal with a very long title to show off ellipsis"
          closeButtonTooltipText="Close Modal"
          skin="light"
          actions={
            <Box verticalAlign="middle">
              <Box marginRight={2}>
                <TextButton
                  size="small"
                  prefixIcon={<Icons.Print />}
                >
                  Print
                </TextButton>
              </Box>
              <Box marginRight={2}>
                <Button priority="secondary" size="small">
                  Send
                </Button>
              </Box>
              <IconButton priority="secondary" size="small">
                <Icons.More />
              </IconButton>
            </Box>
          }
          onClose={() => setOpen(false)}
        >
          <Box
            align="center"
            verticalAlign="middle"
            backgroundColor="D80"
            padding={3}
            borderRadius={3}
          >
            This is an inner content!
          </Box>
        </ModalPreviewLayout>
      </Modal>
    </StorybookComponents.Stack>
  );
};
```