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

@wix/design-system

## Feature Examples


### Simple Usage
- description: A simple example with compact preview
- example: 
```jsx 
<AnnouncementModalLayout
  illustration={'generic_post.svg'}
  title="Import Posts From WordPress"
  primaryButtonText="Start Now"
  linkText="Learn More"
  onCloseButtonClick={() => {}}
>
  <Text>
    Your public posts, images and videos will be copied and added to your
    Wix blog. Your site and current posts won't be affected.
  </Text>
</AnnouncementModalLayout>;
```

### Secondary Button Example
- description: With a Secondary Button action instead of the link.
- example: 
```jsx 
<AnnouncementModalLayout
  illustration={'generic_post.svg'}
  title="Import Posts From WordPress"
  primaryButtonText="Start Now"
  secondaryButtonText="Skip"
  onCloseButtonClick={() => {}}
>
  <Text>
    Your public posts, images and videos will be copied and added to your
    Wix blog. Your site and current posts won't be affected.
  </Text>
</AnnouncementModalLayout>;
```

### No Illustration Example
- description: 
- example: 
```jsx 
<AnnouncementModalLayout
  title="All Your Info In One Place"
  primaryButtonText="Leave"
  linkText="Learn More"
  onCloseButtonClick={() => {}}
>
  <Text>
    Meet your brand new General Info page.
    <br />
    We brought all your business information together here.
  </Text>
  <Box
    backgroundColor="grey"
    width="444px"
    height="210px"
    marginTop="18px"
    borderRadius="4px"
  />
</AnnouncementModalLayout>;
```

### Footnote Example
- description: The basic example with the addition of a footnote
- example: 
```jsx 
<AnnouncementModalLayout
  illustration={'generic_post.svg'}
  primaryButtonText="Start Now"
  linkText="Learn More"
  title="Import Posts From WordPress"
  onCloseButtonClick={() => {}}
  footnote={
    <Text size="small">
      By sending an invite, you agree to the <a>Wix Terms of Use</a>
    </Text>
  }
>
  <Text>
    Your public posts, images and videos will be copied and added to your
    Wix blog. Your site and current posts won't be affected.
  </Text>
</AnnouncementModalLayout>;
```

### Skin Example
- description: The basic example with a premium skin
- example: 
```jsx 
<AnnouncementModalLayout
  skin="premium"
  illustration={'generic_upgrade.svg'}
  title="Start Accepting Online Payments"
  primaryButtonText="Upgrade"
  linkText="Learn More"
  onCloseButtonClick={() => {}}
>
  <Text>
    Upgrade your site with a business and ecommerce premium plan to start
    accepting payments.
  </Text>
</AnnouncementModalLayout>;
```

### Help Button Example
- description: The basic example with a help button shown
- example: 
```jsx 
<AnnouncementModalLayout
  illustration={'generic_post.svg'}
  title="Import Posts From WordPress"
  primaryButtonText="Start Now"
  linkText="Learn More"
  onCloseButtonClick={() => {}}
  onHelpButtonClick={() => {}}
>
  <Text>
    Your public posts, images and videos will be copied and added to your
    Wix blog. Your site and current posts won't be affected.
  </Text>
</AnnouncementModalLayout>;
```




## Developer Examples


### Mobile usage
- description: <p>On mobile, <code>AnnouncementModalLayout</code> should transform to <code>FullScreenModalLayout</code> for promotions.</p><p></p><p>For smaller, less intrusive promotions you can use <code>Drawer</code> as well</p><p></p><p><em>To see the change, toggle 'Enable mobile support' in the top bar of Storybook.</em></p>
- example: 
```jsx 
 () => {
    const [isLargeOpen, setIsLargeOpen] = React.useState(false);
    const [isSmallOpen, setIsSmallOpen] = React.useState(false);
    const { mobile } = React.useContext(WixDesignSystemContext);

    const title = 'Introducing AI Assistant';
    const subtitle =
      'Boost your productivity with smart suggestions powered by AI. Get instant answers, generate content, and automate repetitive tasks - all without leaving your workflow.';
    const illustration = <Image src="generic_post.svg" width="120" height="120" />;

    return (
      <Box padding="20px" gap="SP2">
        <Button onClick={() => setIsLargeOpen(true)}>Large example</Button>
        <Button onClick={() => setIsSmallOpen(true)}>Small example</Button>

        {/* Large — AnnouncementModalLayout on desktop, FullScreenModalLayout on mobile */}
        {mobile ? (
          <Modal isOpen={isLargeOpen} onRequestClose={() => setIsLargeOpen(false)} screen="mobile">
            <FullScreenModalLayout>
              <FullScreenModalLayout.Header
                startNode={
                  <CloseButton skin="dark" size="large" onClick={() => setIsLargeOpen(false)} />
                }
              >
                <Text size="small" weight="normal">{title}</Text>
              </FullScreenModalLayout.Header>
              <FullScreenModalLayout.Content padding>
                <Box direction="vertical" gap="SP4" align="center">
                  {illustration}
                  <Text>{subtitle}</Text>
                </Box>
              </FullScreenModalLayout.Content>
              <FullScreenModalLayout.Footer>
                <Box width="100%" direction="vertical" gap="SP2" align="center">
                  <Button onClick={() => setIsLargeOpen(false)} fullWidth>Try it now</Button>
                  <TextButton onClick={() => {}}>Learn more</TextButton>
                </Box>
              </FullScreenModalLayout.Footer>
            </FullScreenModalLayout>
          </Modal>
        ) : (
          <Modal isOpen={isLargeOpen} onRequestClose={() => setIsLargeOpen(false)} shouldCloseOnOverlayClick>
            <AnnouncementModalLayout
              title={title}
              illustration={illustration}
              primaryButtonText="Try it now"
              primaryButtonOnClick={() => setIsLargeOpen(false)}
              linkText="Learn more"
              linkOnClick={() => {}}
              onCloseButtonClick={() => setIsLargeOpen(false)}
            >
              <Text>{subtitle}</Text>
            </AnnouncementModalLayout>
          </Modal>
        )}

        {/* Small — AnnouncementModalLayout on desktop, Drawer on mobile */}
  {mobile ? (
    <Drawer open={isSmallOpen} onClose={() => setIsSmallOpen(false)}>
      <Box direction="vertical" gap="SP4" padding="SP5">
        <Box align="space-between" verticalAlign="middle">
          <Text weight="bold">{title}</Text>
        </Box>
        <Text>{subtitle}</Text>
        <Box direction="vertical" gap="SP2">
          <Button onClick={() => setIsSmallOpen(false)} fullWidth>Try it now</Button>
          <Box align="center">
            <TextButton onClick={() => {}}>Learn more</TextButton>
          </Box>
        </Box>
      </Box>
    </Drawer>
  ) : (
    <Modal isOpen={isSmallOpen} onRequestClose={() => setIsSmallOpen(false)} shouldCloseOnOverlayClick>
      <AnnouncementModalLayout
        title={title}
        primaryButtonText="Try it now"
        primaryButtonOnClick={() => setIsSmallOpen(false)}
        linkText="Learn more"
        linkOnClick={() => {}}
        onCloseButtonClick={() => setIsSmallOpen(false)}
      >
        <Text>{subtitle}</Text>
      </AnnouncementModalLayout>
    </Modal>
  )}
      </Box>
    );
  };
```


    


## Common Use Case Examples


### Promotions
- description: <p>Use <code>AnnouncementModalLayout</code> for Premium feature promotion </p>
- example: 
```jsx 
() => {
    const [isOpen, setIsOpen] = React.useState(false);

    return (
      <Box padding="20px">
        <Button onClick={() => setIsOpen(true)}>Open Premium Modal</Button>
        <Modal isOpen={isOpen} onRequestClose={() => setIsOpen(false)}>
          <AnnouncementModalLayout
            skin="premium"
            illustration={'generic_upgrade.svg'}
            title="Unlock Premium Features"
            subtitle="Take your business to the next level with advanced tools
  and insights."
            primaryButtonText="Upgrade Now"
            primaryButtonOnClick={() => setIsOpen(false)}
            secondaryButtonText="Maybe later"
            secondaryButtonOnClick={() => setIsOpen(false)}
            linkText="Learn More"
            linkOnClick={() => setIsOpen(false)}
            onCloseButtonClick={() => setIsOpen(false)}
          />
        </Modal>
      </Box>
    );
  };
```