Adding banner style alert (#199)

* Adding banner style alert * Using token rather than a number. --------- Co-authored-by: Fábio Neves <[email protected]>
ClickHouse · Nov 7, 2023 · aa160ec · aa160ec · vercel · Nov 7, 2023
1 parent 91441c9
commit aa160ec
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
@@ -8,7 +8,18 @@ export default {
 
 export const Playground = {
   args: {
-    state: "success",
+    title: "",
     text: "An alert example",
+    state: "success",
+    size: "small",
+    type: "default",
+    showIcon: true,
+    dismissible: false
   },
+  argTypes: {
+    state: { control: "select", options: ["neutral", "info", "success", "warning", "danger"] },
+    type: { control: "radio", options: ["default", "banner"] },
+    size: { control: "radio", options: ["medium", "small"] },
+  }
+
 };
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -1,15 +1,17 @@
 import { Icon } from "@/components";
 import { IconName } from "@/components/Icon/types";
-import { useState } from "react";
+import { useState, ReactNode } from "react";
 import styled from "styled-components";
 
+type AlertType = "default" | "banner"
 type AlertSize = "small" | "medium";
 type AlertState = "neutral" | "success" | "warning" | "danger" | "info";
 export type AlertProps = {
   state?: AlertState;
   title?: string;
-  text: string;
+  text: ReactNode;
   size?: AlertSize;
+  type?: AlertType;
   showIcon?: boolean;
   dismissible?: boolean;
 };
@@ -21,11 +23,13 @@ const stateIconMap: Record<AlertState, IconName> = {
   danger: "warning",
   info: "information",
 };
+
 const Alert = ({
   text,
   title = "",
   size = "small",
   state = "neutral",
+  type = "default",
   showIcon = true,
   dismissible,
   ...delegated
@@ -36,13 +40,15 @@ const Alert = ({
     <Wrapper
       $size={size}
       $state={state}
+      $type={type}
       data-testid="click-alert"
       {...delegated}
     >
       {showIcon && (
         <IconWrapper
           $state={state}
           $size={size}
+          $type={type}
         >
           <StyledIcon
             $size={size}
@@ -77,20 +83,25 @@ const Alert = ({
 const Wrapper = styled.div<{
   $state: AlertState;
   $size: AlertSize;
+  $type: AlertType;
 }>`
   display: flex;
-  border-radius: ${props => props.theme.click.alert.radii.end};
+  border-radius: ${({ $type, theme }) =>
+  $type === "banner" ? theme.sizes[0] : theme.click.alert.radii.end};
+  justify-content: ${({ $type }) =>
+  $type === "banner" ? "center" : "start"};
   overflow: hidden;
   background-color: ${({ $state = "neutral", theme }) =>
     theme.click.alert.color.background[$state]};
   color: ${({ $state = "neutral", theme }) => theme.click.alert.color.text[$state]};
 `;
 
-const IconWrapper = styled.div<{ $state: AlertState; $size: AlertSize }>`
+const IconWrapper = styled.div<{ $state: AlertState; $size: AlertSize; $type: AlertType }>`
   display: flex;
   align-items: center;
+  background-color: ${({ $state = "neutral", $type, theme }) =>
+    $type === "banner" ? "none" : theme.click.alert.color.iconBackground[$state]};
   ${({ $state = "neutral", $size, theme }) => `
-    background-color: ${theme.click.alert.color.iconBackground[$state]};
     color: ${theme.click.alert.color.iconForeground[$state]};
     padding: ${theme.click.alert[$size].space.y} ${theme.click.alert[$size].space.x};
   `}