## Feature Examples

### Structure
- description: Preview widget consists of a preview content area placed on a background that emphasises it.\ Preview content area is an empty container that accepts any kind of content (text, image or other) as a child item.
- example:
```jsx
<PreviewWidget>
  <StorybookComponents.Placeholder width="300px" height="120px">
    Preview content area
  </StorybookComponents.Placeholder>
</PreviewWidget>;
```

### Skin
- description: Change the color of the background with \`skin\` and \`backgroundColor\` props. It supports 3 skins:\ - \`neutral\` (default) - use in all common cases.\ - \`gradient\` - use for larger preview areas.\ - \`custom\` - use it to specify a custom background color. Use a \`backgroundColor\` prop to set the exact background color value from [WSR system colors](#).
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <PreviewWidget>
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>Neutral (default) background</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
  <PreviewWidget skin="gradient">
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>Gradient background</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
  <PreviewWidget skin="custom" backgroundColor="B10">
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>Custom background, backgroundColor prop is set to "Y30"</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
</StorybookComponents.Stack>;
```

### Content Outline
- description: Change the content outline with \`contentOutline\` prop. It supports 3 options:\ - \`shadow\` (default).\ - \`border\` - use it to frame the content area with a gray 1px border.\ - \`none\` - use it to display the content area without an outline.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <PreviewWidget skin="neutral">
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>Shadow (default) outline</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
  <PreviewWidget skin="neutral" contentOutline="border">
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>Border outline</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
  <PreviewWidget skin="neutral" contentOutline="none">
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>No outline</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
</StorybookComponents.Stack>;
```

### Dimensions
- description: Control the dimensions of the component using \`height\` and \`width\` props. Both \`width\` and \`height\` can be set to custom value in % or px.\ Default value for \`width\` is 100%, while \`height\` is \`auto\` - component height adjusts to the height of content in the content area.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <PreviewWidget width="100%">
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>Auto (default) height, 100% width</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
  <PreviewWidget height="100px" width="50%">
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>100 px height, 50% width</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
  <PreviewWidget height="120px" width="75%">
    <StorybookComponents.Background skin="yellow">
      <StorybookComponents.Stack padding="20px">
        <Text>120 px height, 75% width</Text>
      </StorybookComponents.Stack>
    </StorybookComponents.Background>
  </PreviewWidget>
</StorybookComponents.Stack>;
```

### Scrollable Content
- description: Support scroll for overflowed content with \`scrollable\` prop. Default value for \`scrollable\` is \`false\`.
- example:
```jsx
<PreviewWidget scrollable height="200px">
  <StorybookComponents.Background skin="yellow">
    <StorybookComponents.Stack padding="20px">
      <Text>
        This is a very long text that overflows the height of the content area.
        <br></br>
        Therefore, a <b>scrollbar</b> appears on the right.<br></br>
        Use this prop to display a long content or designs by setting <br></br>
        scrollable height to necessary height in px.<br></br>
        In this case, scrollable height is 200 px.<br></br>
        You need to scroll to see the rest of the content below 200 px
        <br></br>
        content area.
      </Text>
    </StorybookComponents.Stack>
  </StorybookComponents.Background>
</PreviewWidget>;
```

## Common Use Case Examples

### Design Previews
- description: Preview widget lets the users preview their website designs / templates / other content on a separate mock window.
- example:
```jsx
() => {
  const [selected, setSelected] = React.useState('1');
  const handleClick = (_, value) => setSelected(value);

  return (
    <Card controls={<CloseButton size="medium" />}>
      <Box backgroundColor="D80" height="680px">
        <Layout>
          <Cell span={6}>
            {selected === '1' && (
              <PreviewWidget height="100%" contentOutline="none">
                <Image height="500px" src="PreviewWidgetExample.png" />
              </PreviewWidget>
            )}
            {selected === '2' && (
              <MobilePreviewWidget>
                <Box align="center" verticalAlign="middle" height="100%">
                  <Image
                    height="100%"
                    src="PreviewWidgetExample.png"
                    borderRadius={0}
                  />
                </Box>
              </MobilePreviewWidget>
            )}
          </Cell>
          <Cell span={6} vertical>
            <Box direction="vertical" paddingTop="24px">
              <Box paddingLeft="30px">
                <SegmentedToggle selected={selected} onClick={handleClick}>
                  <SegmentedToggle.Icon value="1" tooltipText="Desktop">
                    <Icons.Desktop />
                  </SegmentedToggle.Icon>
                  <SegmentedToggle.Icon value="2" tooltipText="Mobile">
                    <Icons.Mobile />
                  </SegmentedToggle.Icon>
                </SegmentedToggle>
              </Box>
              <MarketingLayout
                title="Promote a workshop"
                description="Learning online is a trend. Let people know about your courses. Tell them what will they learn and how to register."
                actions={<Button size="small">Use this template</Button>}
              />
            </Box>
          </Cell>
        </Layout>
      </Box>
    </Card>
  );
};
```

### Settings Previews
- description: The component illustrates how content looks like on the website while changing its settings in real-time.
- example:
```jsx
() => {
  const [planName, setPlanName] = React.useState('Golden Plan');
  const [tagLine, setTagLine] = React.useState('Perfect for advanced players');
  const [planInclusion, setPlanInclusion] = React.useState('Unlimited classes');
  return (
    <Page>
      <Page.Header
        title={planName}
        actionsBar={
          <Box gap="SP2">
            <Button skin="inverted">Cancel</Button>
            <Button>Save</Button>
          </Box>
        }
        breadcrumbs={
          <Breadcrumbs
            activeId="3"
            items={[
              { id: '1', value: 'Pricing Plans' },
              { id: '2', value: planName },
            ]}
          />
        }
        showBackButton
        onBackClicked={() => {}}
      />
      <Page.Content>
        <Layout>
          <Cell span={7}>
            <Card>
              <Card.Header
                title="Plan Info"
                subtitle="Start by giving your plan a name and sum up what it’s about with a tagline."
              />
              <Card.Divider />
              <Card.Content>
                <Layout>
                  <Cell>
                    <FormField labelSize="small" required label="Plan Name">
                      <Input
                        placeholder="e.g., Silver Plan"
                        value={planName}
                        onChange={(e) => setPlanName(e.target.value)}
                      />
                    </FormField>
                  </Cell>
                  <Cell>
                    <FormField labelSize="small" label="Tagline (optional)">
                      <Input
                        placeholder="e.g., Perfect for beginners"
                        value={tagLine}
                        onChange={(e) => setTagLine(e.target.value)}
                      />
                    </FormField>
                  </Cell>
                  <Cell>
                    <Divider />
                  </Cell>
                  <Cell>
                    <FormField
                      labelSize="small"
                      label="List what's included in this plan"
                    >
                      <Input
                        placeholder="e.g., Unlimited yoga classes"
                        value={planInclusion}
                        onChange={(e) => setPlanInclusion(e.target.value)}
                      />
                    </FormField>
                  </Cell>
                  <Cell>
                    <Box align="center">
                      <TextButton size="small" prefixIcon={<Icons.AddSmall />}>
                        Add More
                      </TextButton>
                    </Box>
                  </Cell>
                </Layout>
              </Card.Content>
            </Card>
          </Cell>
          <Cell span={5}>
            <Card>
              <Card.Header
                title="Plan Preview"
                subtitle="See how your plan will appear online."
              />
              <PreviewWidget skin="gradient">
                <Box backgroundColor="D80">
                  <Layout justifyItems="center">
                    <Cell>
                      <Box paddingTop={4}>
                        <Heading size="medium">{planName}</Heading>
                      </Box>
                    </Cell>
                    <Cell>
                      <Box direction="vertical" align="center">
                        <Heading size="extraLarge">€ 45</Heading>
                        <Text size="small">Every month</Text>
                      </Box>
                    </Cell>
                    <Cell>
                      <Text size="small">{tagLine}</Text>
                    </Cell>
                    <Cell>
                      <Button size="small">Select</Button>
                    </Cell>
                    {planInclusion && (
                      <Cell>
                        <Box width="200px">
                          <Divider />
                        </Box>
                      </Cell>
                    )}
                    <Cell span={12}>
                      <Box paddingBottom="24px">
                        <Text size="small">{planInclusion}</Text>
                      </Box>
                    </Cell>
                  </Layout>
                </Box>
              </PreviewWidget>
            </Card>
          </Cell>
        </Layout>
      </Page.Content>
    </Page>
  );
};
```