|
| 1 | +import React from 'react'; |
| 2 | +import styled from 'styled-components'; |
| 3 | +import { ComponentStory, ComponentMeta } from '@storybook/react'; |
| 4 | +import { Banner as BannerWave, Button } from '../..'; |
| 5 | + |
| 6 | +const Banner = styled(BannerWave)` |
| 7 | + position: initial; |
| 8 | + transition: none; |
| 9 | +`; |
| 10 | + |
| 11 | +const description = ` |
| 12 | +Banner is a strong visual pattern that is used to display an important information or state which remains until the cause is resolved or the banner is dismissed by the user. |
| 13 | +
|
| 14 | +- Banner can include any kind of content, i.e. icons, links, copy |
| 15 | +- Banner should be dismissible |
| 16 | +- Banner **info** and **success** appear at the bottom of the screen (sticky) |
| 17 | +- Banner **error** appears at the top of the screen (sticky) |
| 18 | +- Banner appears and disappears via slide in/out animation combined with soft fade and smooth easing |
| 19 | +
|
| 20 | +To properly hide the banner with the correct animation, it is recommended to call the dismiss function that can be used when providing a function as the child. This will also unmount the component once the animation is completed. |
| 21 | +
|
| 22 | +If you need the banner to be placed top or bottom without depending on the variant make sure to align with the design team and bear in mind that you can use the **position** prop for it. |
| 23 | +`; |
| 24 | + |
| 25 | +export default { |
| 26 | + title: 'Components/Banner', |
| 27 | + component: Banner, |
| 28 | + parameters: { |
| 29 | + docs: { |
| 30 | + description: { |
| 31 | + component: description |
| 32 | + } |
| 33 | + } |
| 34 | + }, |
| 35 | + argTypes: { |
| 36 | + onClose: { table: { disable: true } }, |
| 37 | + children: { |
| 38 | + description: 'Children elements can be a ReactNode or a render prop that provides a dismiss method', |
| 39 | + control: { type: 'none' } |
| 40 | + } |
| 41 | + } |
| 42 | +} as ComponentMeta<typeof Banner>; |
| 43 | + |
| 44 | +const Template: ComponentStory<typeof Banner> = args => <Banner {...args} />; |
| 45 | + |
| 46 | +export const Info = Template.bind({}); |
| 47 | +Info.args = { |
| 48 | + variant: 'info', |
| 49 | + children: ( |
| 50 | + <> |
| 51 | + In order to continuously improve our websites, and show offers and advertisements that are suited to you, we |
| 52 | + use cookies, tracking and (re-)targeting technologies. Please see our Cookie policy for more information. |
| 53 | + Tracking and (re-)targeting technologies will only be used if you click on Agree. |
| 54 | + </> |
| 55 | + ) |
| 56 | +}; |
| 57 | + |
| 58 | +export const Success = Template.bind({}); |
| 59 | +Success.args = { |
| 60 | + variant: 'success', |
| 61 | + children: 'Booking radius updated' |
| 62 | +}; |
| 63 | + |
| 64 | +export const Danger = Template.bind({}); |
| 65 | +Danger.args = { |
| 66 | + variant: 'danger', |
| 67 | + children: 'Something went wrong :(' |
| 68 | +}; |
| 69 | + |
| 70 | +export const Dismiss = Template.bind({}); |
| 71 | +const code = ` |
| 72 | +<Banner> |
| 73 | + {dismiss => <Button onClick={dismiss}>Close</Button>} |
| 74 | +</Banner> |
| 75 | +`; |
| 76 | +Dismiss.args = { |
| 77 | + variant: 'info', |
| 78 | + children: dismiss => <Button onClick={dismiss}>Close</Button> |
| 79 | +}; |
| 80 | +Dismiss.parameters = { |
| 81 | + docs: { |
| 82 | + source: { code, language: 'javascript', type: 'auto' } |
| 83 | + } |
| 84 | +}; |
0 commit comments