diff --git a/README.md b/README.md index 48bd5b0..d296ffa 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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) diff --git a/src/components/Banner/Banner.stories.tsx b/src/components/Banner/Banner.stories.tsx new file mode 100644 index 0000000..c6d531b --- /dev/null +++ b/src/components/Banner/Banner.stories.tsx @@ -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 + +export default meta +type Story = StoryObj + +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, + }, +} diff --git a/src/components/Banner/BannerDemo.tsx b/src/components/Banner/BannerDemo.tsx new file mode 100644 index 0000000..34a6c84 --- /dev/null +++ b/src/components/Banner/BannerDemo.tsx @@ -0,0 +1,282 @@ +import Banner from '.' + +const BannerDemo = () => ( + <> +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +) + +export default BannerDemo diff --git a/src/components/Banner/README.md b/src/components/Banner/README.md new file mode 100644 index 0000000..9f949d8 --- /dev/null +++ b/src/components/Banner/README.md @@ -0,0 +1,129 @@ +# Banner + +[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/banner--docs) + +[BannerDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Banner/BannerDemo.tsx) + +## Import + +```js +import { Banner } from 'wri-design-systems' +``` + +## Usage + +```html + +``` + +## Props + +```ts +type BannerProps = { + label: string + caption?: string + variant: 'info-white' | 'info-grey' | 'success' | 'warning' | 'error' + size?: 'small' | 'large' + icon?: React.ReactNode + onActionClick?: VoidFunction + actionLabel?: string + isButtonRight?: boolean +} +``` + +## Info White + +```html + +``` + +## Info Grey + +```html + +``` + +## Success + +```html + +``` + +## Warning + +```html + +``` + +## Error + +```html + +``` + +## Button Right + +```html + +``` + +## Small + +```html + +``` + +## Small Button Right + +```html + +``` diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx new file mode 100644 index 0000000..062598f --- /dev/null +++ b/src/components/Banner/index.tsx @@ -0,0 +1,64 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import React from 'react' + +import Button from '../Button' +import { InfoIcon } from '../icons' +import { + InfoWhiteBanner, + ErrorBanner, + InfoGreyBanner, + SuccessBanner, + WarningBanner, + BannerTitle, + BannerCaption, + BannerHeader, +} from './styled' +import { BannerProps } from './types' + +const Banner = ({ + label, + caption, + variant, + size = 'large', + icon = , + onActionClick, + actionLabel, + isButtonRight, +}: BannerProps) => { + let StyledBanner = InfoWhiteBanner + if (variant === 'info-grey') { + StyledBanner = InfoGreyBanner + } else if (variant === 'success') { + StyledBanner = SuccessBanner + } else if (variant === 'warning') { + StyledBanner = WarningBanner + } else if (variant === 'error') { + StyledBanner = ErrorBanner + } + + return ( + +
+ + {icon} + {label} + + {caption} +
+ {actionLabel ? ( +