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

@wix/design-system

## Feature Examples


### Plain Example
- description: A simple example with short content and buttons in the footer.
- example: 
```jsx 
() => {
    const [open, setOpen] = React.useState(false);

    return (
      <div>
        <Button onClick={() => setOpen(!open)}>Open</Button>
        <Modal
          isOpen={open}
          onRequestClose={() => setOpen(false)}
          contentLabel="Mobile modal example"
          scrollable={false}
          scrollableContent
          screen="mobile"
        >
          <ModalMobileLayout
            title={<Text weight="bold">Enter VAT ID</Text>}
            content={
              <Text weight="thin">
                Enter a valid European Union VAT identification number for the
                ‘Reverse Charge’ mechanism in order to apply.
              </Text>
            }
            footer={
              <Box align="right">
                <Box marginRight="12px">
                  <Button priority="secondary" onClick={() => setOpen(false)}>
                    Cancel
                  </Button>
                </Box>
                <Button onClick={() => setOpen(false)}>OK</Button>
              </Box>
            }
            onOverlayClick={() => setOpen(false)}
          />
        </Modal>
      </div>
    );
  };
```

### Title
- description: 
- example: 
```jsx 
<Layout>
  <Cell>
    <ModalMobileLayout
          title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={  <Box align="right">
    <Box marginRight="12px">
      <Button priority="secondary">Cancel</Button>
    </Box>
    <Button>Save</Button>
  </Box>}
      onCloseButtonClick={() => {}}
    />
  </Cell>

  <Cell>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={  <Box align="right">
    <Box marginRight="12px">
      <Button priority="secondary">Cancel</Button>
    </Box>
    <Button>Save</Button>
  </Box>}
      onCloseButtonClick={() => {}}
    />
  </Cell>
</Layout>
```

### Sticky Title
- description: 
- example: 
```jsx 
<div>
<div style={{height: '185px'}}>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
               title={<Text weight="bold">Enter VAT ID</Text>}

      onCloseButtonClick={() => {}}
      stickyTitle
    />
    </div>

<div style={{height: '185px'}}>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
               title={<Text weight="bold">Enter VAT ID</Text>}
      onCloseButtonClick={() => {}}
    />
    </div>
</div>
```

### Footer
- description: 
- example: 
```jsx 
<Layout>
  <Cell>
    <ModalMobileLayout
          title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={  <Box align="right">
    <Box marginRight="12px">
      <Button priority="secondary">Cancel</Button>
    </Box>
    <Button>Save</Button>
  </Box>}
      onCloseButtonClick={() => {}}
    />
  </Cell>

  <Cell>
    <ModalMobileLayout
              title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      onCloseButtonClick={() => {}}
    />
  </Cell>
</Layout>
```

### Sticky Footer
- description: 
- example: 
```jsx 
<div>
<div style={{height: '185px'}}>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={  <Box align="right">
    <Box marginRight="12px">
      <Button priority="secondary">Cancel</Button>
    </Box>
    <Button>Save</Button>
  </Box>}
      onCloseButtonClick={() => {}}
      stickyFooter
    />
    </div>

<div style={{height: '185px'}}>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={  <Box align="right">
<Box marginRight="12px">
      <Button priority="secondary">Cancel</Button>
    </Box>
    <Button>Save</Button>
  </Box>}
      onCloseButtonClick={() => {}}
    />
    </div>
</div>
```

### Close Button
- description: 
- example: 
```jsx 
<Layout>
  <Cell>
    <ModalMobileLayout
          title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={
      <Box align="right">
    <Box marginRight="12px">
      <Button priority="secondary">Cancel</Button>
    </Box>
    <Button>Save</Button>
    </Box>}
    onCloseButtonClick={() => {}}
    />
  </Cell>

  <Cell>
    <ModalMobileLayout
      title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={  <Box align="right">
    <Box marginRight="12px">
      <Button priority="secondary">Cancel</Button>
    </Box>
    <Button>Save</Button>
  </Box>}
    />
  </Cell>
</Layout>
```




    


## Common Use Case Examples


### Default Template
- description: 
- example: 
```jsx 
<Box width="375px" height="640px" backgroundColor="rgba(22, 45, 61, 0.66)">
  <ModalMobileLayout
    title={<Text weight="bold">Enter VAT ID</Text>}
    content={
      <Text weight="thin" secondary>
        Enter a valid European Union VAT identification number for the ‘Reverse
        Charge’ mechanism in order to apply.
      </Text>
    }
    footer={
      <Box align="right">
        <Box marginRight="12px">
          <Button priority="secondary">Cancel</Button>
        </Box>
        <Button>Save</Button>
      </Box>
    }
    onCloseButtonClick={() => {}}
  />
</Box>;
```

### Fullscreen Template
- description: 
- example: 
```jsx 
<Box width="375px" height="640px">
  <ModalMobileLayout
    fullscreen
    onCloseButtonClick={() => {}}
    content={
      <Box direction="vertical" align="center" textAlign="center">
        <Box marginBottom="36px" marginTop="91px">
          <Image src="Illustration.svg" />
        </Box>
        <Box marginBottom="12px">
          <Heading size="extraLarge">Welcome!</Heading>
        </Box>
        <Box marginBottom="36px">
          <Text weight="thin" secondary>
            First impressions count. Apps have one chance to grab a new user’s
            attention. Use it well.
          </Text>
        </Box>
        <Box marginBottom="18px">
          <Button size="large">Start Now</Button>
        </Box>
        <Box marginBottom="91px">
          <TextButton>Learn More</TextButton>
        </Box>
      </Box>
    }
  />
</Box>;
```