Skip to content

Commit

Permalink
Banner Component
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlejoYarce
AlejoYarce committed Nov 27, 2024
1 parent 56dc3d5 commit 273a23f
Show file tree
Hide file tree
Showing 8 changed files with 671 additions and 0 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,11 @@ function App() {

### General

- [Banner](https://github.com/wri/wri-design-systems/tree/main/src/components/Banner)
- [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Button)
- [NavigationRail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
- [TabBar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
- [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Tag)

### Controls

Expand All @@ -106,3 +108,4 @@ function App() {
- [LayerItem](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerItem)
- [LayerGroup](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerGroup)
- [LayerPanel](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerPanel)
- [LayerSidebar](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerSidebar)
96 changes: 96 additions & 0 deletions src/components/Banner/Banner.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import React from 'react'

import type { Meta, StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'
import Banner from '.'

const meta = {
title: 'Banner',
component: Banner,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
args: { onActionClick: fn() },
} satisfies Meta<typeof Banner>

export default meta
type Story = StoryObj<typeof meta>

export const InfoWhite: Story = {
args: {
label: 'Info White',
caption: 'caption',
variant: 'info-white',
actionLabel: 'Label',
},
}

export const InfoGrey: Story = {
args: {
label: 'Info Grey',
caption: 'caption',
variant: 'info-grey',
actionLabel: 'Label',
},
}

export const Success: Story = {
args: {
label: 'Success',
caption: 'caption',
variant: 'success',
actionLabel: 'Label',
},
}

export const Warning: Story = {
args: {
label: 'Warning',
caption: 'caption',
variant: 'warning',
actionLabel: 'Label',
},
}

export const Error: Story = {
args: {
label: 'Error',
caption: 'caption',
variant: 'error',
actionLabel: 'Label',
},
}

export const ButtonRight: Story = {
args: {
label: 'Info White',
caption: 'caption',
variant: 'info-white',
actionLabel: 'Label',
isButtonRight: true,
},
}

export const Small: Story = {
args: {
label: 'Info White',
caption: 'caption',
variant: 'info-white',
actionLabel: 'Label',
size: 'small',
isButtonRight: true,
},
}

export const SmallButtonRight: Story = {
args: {
label: 'Info White',
caption: 'caption',
variant: 'info-white',
actionLabel: 'Label',
size: 'small',
isButtonRight: true,
},
}
282 changes: 282 additions & 0 deletions src/components/Banner/BannerDemo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
import Banner from '.'

const BannerDemo = () => (
<>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='info-white'
actionLabel='Label'
/>
<Banner
label='Label'
caption='caption'
variant='info-white'
actionLabel='Label'
isButtonRight
/>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='info-white'
actionLabel='Label'
size='small'
/>
<Banner
label='Label'
caption='caption'
variant='info-white'
actionLabel='Label'
isButtonRight
size='small'
/>
</div>
</div>

<div
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='info-grey'
actionLabel='Label'
/>
<Banner
label='Label'
caption='caption'
variant='info-grey'
actionLabel='Label'
isButtonRight
/>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='info-grey'
actionLabel='Label'
size='small'
/>
<Banner
label='Label'
caption='caption'
variant='info-grey'
actionLabel='Label'
isButtonRight
size='small'
/>
</div>
</div>

<div
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='success'
actionLabel='Label'
/>
<Banner
label='Label'
caption='caption'
variant='success'
actionLabel='Label'
isButtonRight
/>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='success'
actionLabel='Label'
size='small'
/>
<Banner
label='Label'
caption='caption'
variant='success'
actionLabel='Label'
isButtonRight
size='small'
/>
</div>
</div>

<div
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='warning'
actionLabel='Label'
/>
<Banner
label='Label'
caption='caption'
variant='warning'
actionLabel='Label'
isButtonRight
/>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='warning'
actionLabel='Label'
size='small'
/>
<Banner
label='Label'
caption='caption'
variant='warning'
actionLabel='Label'
isButtonRight
size='small'
/>
</div>
</div>

<div
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='error'
actionLabel='Label'
/>
<Banner
label='Label'
caption='caption'
variant='error'
actionLabel='Label'
isButtonRight
/>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
gap: '10px',
}}
>
<Banner
label='Label'
caption='caption'
variant='error'
actionLabel='Label'
size='small'
/>
<Banner
label='Label'
caption='caption'
variant='error'
actionLabel='Label'
isButtonRight
size='small'
/>
</div>
</div>
</>
)

export default BannerDemo
Loading

0 comments on commit 273a23f

Please sign in to comment.