cal.pub0.org/packages/ui/components/top-banner/topbanner.stories.mdx

import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
import { TopBanner } from './TopBanner'

<Meta title="UI/TopBanner" component={TopBanner} />

<Title title="TopBanner" suffix="Brief" />


## Definition
Top banner will be position on the very top of the page to communicate on what’s wrong or what’s new.


## Structure
Each toast has a state to represent neutral, positive or negative responses.

<CustomArgsTable of={TopBanner} />

<Examples title="Top Banner Style">
  <Example title="Default" isFullWidth={true} >
     <TopBanner
          actions={
            <button
              className="border-b border-black text-sm"
              onClick={() => {
                console.log("test");
              }}>
              Action
            </button>
          }
          text="Something big is happening we want you to know about."
        />
 </Example>
  <Example title="Warning" isFullWidth={true} >
    <TopBanner
          actions={
            <button
              className="border-b border-black text-sm"
              onClick={() => {
                console.log("test");
              }}>
              Action
            </button>
          }
          variant="warning"
          text="An app wide warning is occuring that should be resolved."
        />
         </Example>
  <Example title="Error" isFullWidth={true} >
    <TopBanner
          actions={
            <button
              className="border-b border-black text-sm"
              onClick={() => {
                console.log("test");
              }}>
              Action
            </button>
          }
          variant="error"
          text="A major error is occuring that must be resolved."
        />
         </Example>
</Examples>

<Canvas>
  <Story name="TopBanner"
         args={{
           text: 'Something big is happening we want you to know about.',
           variant: 'default'
  }}
         argTypes={{
            variant: {
              control: {
                type: 'select',
                options: ['default', 'warning', 'error'],
              },
            },
           text: {
              control: {
                type: 'text',
              },
            },
  }}>
    {({ text, variant, ...args }) => (
      <TopBanner
        {...args}
        actions={
          <button
            className="border-b border-black text-sm"
            onClick={() => {
              alert("test");
            }}>
            Action
          </button>
        }
        variant={variant}
        text={text}
      />
    )}
  </Story>
</Canvas>