From 4a65fb6aa47128537fabd5efff2e5515a4bfc783 Mon Sep 17 00:00:00 2001
From: frederic wojcikowski <frederic.wojcikowski@tablecheck.com>
Date: Wed, 5 Oct 2022 09:23:05 +0900
Subject: [PATCH] feat(tablekit-react): add banner component

Resolves #109
---
 .../react/src/components/Banner.stories.tsx   | 83 +++++++++++++++++++
 system/react/src/components/Banner.tsx        | 56 +++++++++++++
 system/react/src/index.ts                     |  1 +
 3 files changed, 140 insertions(+)
 create mode 100644 system/react/src/components/Banner.stories.tsx
 create mode 100644 system/react/src/components/Banner.tsx

diff --git a/system/react/src/components/Banner.stories.tsx b/system/react/src/components/Banner.stories.tsx
new file mode 100644
index 000000000..091c76b3c
--- /dev/null
+++ b/system/react/src/components/Banner.stories.tsx
@@ -0,0 +1,83 @@
+import { Close, Product } from '@carbon/icons-react';
+import { Story } from '@storybook/react';
+
+import { classySelector, Banner as BannerWrapper } from './Banner';
+import { Button } from './Button';
+
+const bannerTypes = [undefined, 'single', 'dismissed', 'basic'] as const;
+const bannerVariants = ['success', 'info', 'warning', 'neutral'] as const;
+
+const titlePlaceholder = 'Tease usefull information';
+const descriptionPlaceholder =
+  'Educate the user on this area, describe what needs to be done and how to approach it.';
+
+export default {
+  title: 'TableKit/Banner',
+  component: BannerWrapper,
+  parameters: {
+    classySelector,
+    variants: bannerVariants
+  }
+};
+
+interface Props {
+  title: string;
+  description: string;
+  agree?: string;
+  dismiss?: string;
+  'data-type'?: 'single' | 'dismissed' | 'basic';
+  'data-variant'?: 'success' | 'info' | 'warning' | 'neutral';
+}
+
+function Banner({
+  title,
+  description,
+  agree,
+  dismiss,
+  'data-type': type,
+  'data-variant': variant
+}: Props): JSX.Element {
+  const hasCloseBtn = type === 'dismissed' || type === 'basic';
+
+  return (
+    <BannerWrapper data-variant={variant} className="banner-wrapper">
+      {type !== 'basic' && (
+        <div className="banner-icon">
+          <Product size={32} />
+        </div>
+      )}
+      <h4 className="banner-title">{title}</h4>
+      {hasCloseBtn && (
+        <div className="banner-close">
+          <Close size={24} />
+        </div>
+      )}
+      <aside className="banner-content">{description}</aside>
+      {!hasCloseBtn && (
+        <div className="banner-actions">
+          {type !== 'single' && (
+            <Button data-variant="secondary">{agree || 'Button'}</Button>
+          )}
+          <Button data-variant="ghost">{dismiss || 'Button'}</Button>
+        </div>
+      )}
+    </BannerWrapper>
+  );
+}
+
+export const AllVariants: Story = () => (
+  <>
+    {bannerTypes.map((type) =>
+      bannerVariants.map((variant) => (
+        <Banner
+          data-type={type}
+          data-variant={variant}
+          title={titlePlaceholder}
+          description={descriptionPlaceholder}
+          agree="Button"
+          dismiss="Button"
+        />
+      ))
+    )}
+  </>
+);
diff --git a/system/react/src/components/Banner.tsx b/system/react/src/components/Banner.tsx
new file mode 100644
index 000000000..828275c0b
--- /dev/null
+++ b/system/react/src/components/Banner.tsx
@@ -0,0 +1,56 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const classySelector = '.banner';
+
+const baseStyles = css`
+  padding: var(--spacing-l4);
+  background-color: var(--neutral-surface);
+  display: grid;
+  grid-template-columns: min-content auto min-content;
+  grid-template-areas: 'icon title close' 'icon content content' 'icon actions actions';
+
+  .banner-icon {
+    grid-area: icon;
+    padding-right: var(--spacing-l4);
+  }
+
+  .banner-title {
+    grid-area: title;
+  }
+
+  .banner-close {
+    grid-area: close;
+    cursor: pointer;
+  }
+
+  .banner-content {
+    grid-area: content;
+    padding-top: var(--spacing-l2);
+  }
+
+  .banner-actions {
+    grid-area: actions;
+    display: flex;
+    gap: var(--spacing-l4);
+    padding-top: var(--spacing-l2);
+  }
+
+  &[data-variant='success'] {
+    background-color: var(--success-surface);
+  }
+
+  &[data-variant='info'] {
+    background-color: var(--info-surface);
+  }
+
+  &[data-variant='warning'] {
+    background-color: var(--warning-surface);
+  }
+`;
+
+export const Banner = styled.div<{
+  'data-variant'?: 'success' | 'info' | 'warning' | 'neutral';
+}>`
+  ${baseStyles}
+`;
diff --git a/system/react/src/index.ts b/system/react/src/index.ts
index f8cecdcf4..e93f853fc 100644
--- a/system/react/src/index.ts
+++ b/system/react/src/index.ts
@@ -4,6 +4,7 @@
  */
 export { BadgeBase, VariantBadges, Badge } from './components/Badge';
 export type { Props as BadgeProps, BadgeVariant } from './components/Badge';
+export { Banner } from './components/Banner';
 export { ButtonBase, VariantButtons, Button } from './components/Button';
 export type { ButtonVariant } from './components/Button';
 export { ButtonGroup } from './components/ButtonGroup';