feat(AlertBanner): add warning variation (#1662)

mondaycom · Oct 16, 2023 · 7e3cb4e · 7e3cb4e
1 parent 22ac1cc
commit 7e3cb4e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 3 deletions.
diff --git a/src/components/AlertBanner/AlertBanner.module.scss b/src/components/AlertBanner/AlertBanner.module.scss
@@ -25,6 +25,15 @@
   background-color: var(--inverted-color-background);
 }
 
+.warning {
+  background-color: var(--warning-color);
+  color: var(--text-color-fixed-dark);
+
+  .closeBtn {
+    color: var(--text-color-fixed-dark);
+  }
+}
+
 .content {
   flex: 1 1 auto;
   display: flex;

diff --git a/src/components/AlertBanner/AlertBanner.tsx b/src/components/AlertBanner/AlertBanner.tsx
@@ -53,7 +53,13 @@ const AlertBanner: VibeComponent<AlertBannerProps> & {
     }, [className, backgroundColor]);
 
     const isDarkBackground = backgroundColor === AlertBanner.backgroundColors.DARK;
-    const textColor = isDarkBackground ? Text.colors.ON_INVERTED : Text.colors.ON_PRIMARY;
+    const isFixedColor = backgroundColor === AlertBanner.backgroundColors.WARNING;
+    const textColor = useMemo(() => {
+      if (isFixedColor) {
+        return Text.colors.FIXED_DARK;
+      }
+      return isDarkBackground ? Text.colors.ON_INVERTED : Text.colors.ON_PRIMARY;
+    }, [isDarkBackground, isFixedColor]);
     const children = useMemo(() => {
       const allChildren = React.Children.toArray(originalChildren) as ReactElement[];
       const filteredChildren = allChildren.filter(

diff --git a/src/components/AlertBanner/AlertBannerConstants.ts b/src/components/AlertBanner/AlertBannerConstants.ts
@@ -2,5 +2,6 @@ export enum AlertBannerBackgroundColor {
   PRIMARY = "primary",
   POSITIVE = "positive",
   NEGATIVE = "negative",
-  DARK = "dark"
+  DARK = "dark",
+  WARNING = "warning"
 }
diff --git a/src/components/AlertBanner/AlertBannerContext.ts b/src/components/AlertBanner/AlertBannerContext.ts
@@ -2,7 +2,7 @@ import React from "react";
 import { TypographyColor } from "../Typography/TypographyConstants";
 
 type AlertBannerContextType = {
-  textColor: TypographyColor.ON_PRIMARY | TypographyColor.ON_INVERTED;
+  textColor: TypographyColor.ON_PRIMARY | TypographyColor.ON_INVERTED | TypographyColor.FIXED_DARK;
 };
 
 export const AlertBannerContext = React.createContext<AlertBannerContextType>({

diff --git a/src/components/AlertBanner/__stories__/alertBanner.stories.mdx b/src/components/AlertBanner/__stories__/alertBanner.stories.mdx
@@ -112,6 +112,10 @@ There are four types of alert banners: primary, negative, positive, and inverted
         <AlertBannerText text="Alert banner message" />
         <AlertBannerLink text="this is a CTA" href="https://monday.com" />
       </AlertBanner>
+      <AlertBanner backgroundColor={AlertBanner.backgroundColors.WARNING}>
+        <AlertBannerText text="Alert banner message" />
+        <AlertBannerLink text="this is a CTA" href="https://monday.com" />
+      </AlertBanner>
     </div>
   </Story>
 </Canvas>