
## Feature Examples


### Close button
- description: <p>Control if Top Banner can be closed by a users with <code>dismissible</code> prop.</p>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
<TopBanner
  dismissible={true}
  action={<TopBanner.ActionButton>Action</TopBanner.ActionButton>}
>
Banner is dismissable (default)</TopBanner>
<TopBanner
  dismissible={false}
  action={<TopBanner.ActionButton>Action</TopBanner.ActionButton>}
>
Banner is not dismissable</TopBanner>
</StorybookComponents.Stack>; 
```

### Action
- description: <p>Add button to a top banner with <code>action</code> prop. It's recommended to always provide a corresponding action if possible.</p>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
<TopBanner
  dismissible={true}
  action={<TopBanner.ActionButton>Action</TopBanner.ActionButton>}
>
Banner has an action (default)</TopBanner>
<TopBanner
  dismissible={true}
>
Banner has no action</TopBanner>
</StorybookComponents.Stack>; 
```

### Action type
- description: <p>Control type of action Top banner has through <code>action</code> property:</p><li>Use <code><TopBanner.ActionButton/></code> to provide a main CTA (default).</li><li>Use <code><TopBanner.ActionTextButton/></code> to provide a secondary action, like "Learn more". </li><li>In specific cases, you can provide a different button styling as <code>action</code> is a node. This can also be used when more than one actions are needed. </li>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <TopBanner
    dismissible={true}
    action={<TopBanner.ActionButton>Button</TopBanner.ActionButton>}
  >
    Banner has a button (default)
  </TopBanner>
  <TopBanner
 action={<TopBanner.ActionLink>Text button</TopBanner.ActionLink>}
 dismissible={true}>Banner has a text button</TopBanner>
  <TopBanner
 action={<Button skin="premium-light" size="small">Node </Button>}
 dismissible={true}>Banner action is a node</TopBanner>
</StorybookComponents.Stack>;
```

### Position
- description: <p>Control whether the Top Banner sticks to the top of its container using the  <code>position</code> prop:</p><li>Use <code>static</code>  (default) to allow the banner to scroll out of view beneath the top fold.</li><li>Use <code>sticky</code> to keep the banner visible as the user scrolls, with content moving beneath it.</li>
- example: 
```jsx 
() => {
  const [open, setOpen] = React.useState(true);

  return (
    <div style={{ height: '800px', overflow: 'scroll', position: 'relative' }}>
      <Collapse open={open} position="static">
        <TopBanner
          onDismiss={() => setOpen(false)}
          action={<TopBanner.ActionLink>Action</TopBanner.ActionLink>}
        >
          Top banner is static by default
        </TopBanner>
      </Collapse>
      <Page height="600px">
        <Page.Header
          title="Page Title"
          breadcrumbs={
            <Breadcrumbs
              items={[
                { id: 0, value: 'Page Name' },
                { id: 1, value: 'Page title' },
              ]}
            />
          }
          subtitle="I’m a relatively long subtitle to fill this space in."
          actionsBar={
            <div style={{ display: 'flex', gap: 6 }}>
              <Button skin="light">Button</Button>
              <Button skin="standard">Button</Button>
            </div>
          }
        />
        <Page.Content>
          <Card showShadow>
  <Card.Content>
    <Box height="180px" />
  </Card.Content>
</Card>
        </Page.Content>
      </Page>
    </div>
  );
};
```

### Height
- description: <p>Minimum component height is 48px. Component will grow together with the content provided. Heigh is not limited, so be cautious about providing very long texts as it will overlay content behind it.</p>
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <TopBanner
    dismissible={true}
    action={<TopBanner.ActionButton>Action</TopBanner.ActionButton>}
  >
    I am a short one line of text that does not wrap
  </TopBanner>
  <TopBanner
    dismissible={true}
    action={<TopBanner.ActionButton>Action</TopBanner.ActionButton>}
  >
    I am a longer content example that automatically wraps to a second line,
    while the top banner grows with it. The height is not limited, accommodating
    all languages and various messages. However, it may cover content on the
    page, so be cautious when writing texts.
  </TopBanner>
</StorybookComponents.Stack>;
```




    


## Common Use Case Examples


### In modals
- description: <p>Top banner component can be used inside of a modal or other container.</p>
- example: 
```jsx 
() => {
  const [shown, setShown] = React.useState(false);

  return (
    <Card>
      <Card.Header
        title="Pricing plans"
        subtitle="Let clients book this service with a plan."
        suffix={
          <Button
            size="small"
            priority="secondary"
            prefixIcon={<Icons.AddSmall />}
            onClick={() => setShown(true)}
          >
            Create New Plan
          </Button>
        }
      />
      <Modal
        isOpen={shown}
        onRequestClose={() => setShown(false)}
        shouldCloseOnOverlayClick
        screen="desktop"
      >
        <CustomModalLayout
          primaryButtonText="Create Plan"
          secondaryButtonText="Cancel"
          onCloseButtonClick={() => setShown(false)}
          onHelpButtonClick={() => {}}
          secondaryButtonOnClick={() => setShown(false)}
          primaryButtonOnClick={() => setShown(false)}
          removeContentPadding
          title="Create new pricing plan"
          content={
           <Box direction="vertical">
  <TopBanner
    dismissible={true}
    action={<TopBanner.ActionButton>Upgrade</TopBanner.ActionButton>}
  >
    Upgrade your site to start accepting payments.
  </TopBanner>
<Page>
              <Page.Content>
                <Box marginTop={5} display="block">
                  <Layout>
                    <Cell span="12">
                      <Card>
                        <Card.Header
                          title="Plan info"
                          subtitle="Give your plan a name and tell customers what it includes"
                        />
                        <Card.Divider />
                        <Card.Content>
                          <Layout>
                            <Cell span="6">
                              <FormField
                                label="Name this plan"
                                required
                                charCount="20"
                              >
                                <Input placeholder="e.g., Silver Membership" />
                              </FormField>
                            </Cell>
                            <Cell span="6">
                              <FormField label="Add a tagline" charCount="60">
                                <Input placeholder="e.g., Perfect for beginners" />
                              </FormField>
                            </Cell>
                            <Cell span="12">
                              <AddItem size="tiny">
                                Add what this plan includes
                              </AddItem>
                            </Cell>
                          </Layout>
                        </Card.Content>
                      </Card>
                    </Cell>
                    <Cell span="12">
                      <Card>
                        <Card.Header
                          title="Connect and manage benefits"
                          subtitle="Set up how your benefits work in this plan."
                        />
                        <Card.Divider />
                        <Box
                          display="block"
                          borderRadius={8}
                          paddingBottom="8px"
                        >
                          <SelectableAccordion
                            type="checkbox"
                            items={[
                              {
                                title: 'Bookings Services',
                                subtitle:
                                  'Offer services as a membership or package with this plan.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Booking Services content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Video Channels',
                                subtitle:
                                  'Offer access to your Video Channel with this plan.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Video Channels content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Blog Subscriptions',
                                subtitle: 'Give exclusive access to posts.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Blog Subscriptions content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Forum Subscriptions',
                                subtitle:
                                  'Give exclusive access to forum categories.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Forum Subscriptions content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Events Memberships',
                                subtitle:
                                  'Add ticket discount and ticket limit for your events.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Events Memberships content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Online Programs',
                                subtitle:
                                  'Allow participation in different programs with this plan.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Online Programs content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                              {
                                title: 'Groups',
                                subtitle:
                                  'Give clients access to exclusive groups.',
                                content: (
                                  <StorybookComponents.Placeholder>
                                    Groups content
                                  </StorybookComponents.Placeholder>
                                ),
                              },
                            ]}
                          />
                        </Box>
                      </Card>
                    </Cell>
                  </Layout>
                </Box>
              </Page.Content>
            </Page>
</Box> 
          }
        />
      </Modal>
    </Card>
  );
};
```

### In pages
- description: <p>Add top banner at the top of <Page/> to promotion premium.</p>
- example: 
```jsx 
() => {
  return (
    <div style={{ height: '800px', overflow: 'scroll', position: 'relative' }}>
      <TopBanner
        position="sticky"
        action={
          <TopBanner.ActionButton as="a" href="lol">
            Upgrade
          </TopBanner.ActionButton>
        }
      >
        Upgrade your site to start accepting payments.
      </TopBanner>
      <Page>
        <Page.Header
          title="Pricing Plans"
          subtitle="Set up subscriptions, memberships or package plans to sell on your site."
          actionsBar={
            <div style={{ display: 'flex', gap: 6 }}>
              <Button  skin="standard">Button</Button>
            </div>
          }
        />
        <Page.Content>
              <EmptyState
      image={<Image width="100px" src="no_categories.png" transparent />}
      title="Add your first pricing plan"
      subtitle="Collect payments from your users. You can connect up to 5 plans to your site"
      theme="page">
      <TextButton prefixIcon={<Icons.Add />}>Add Plan</TextButton>
    </EmptyState>
        </Page.Content>
      </Page>
    </div>
  );
};
```


