Banner

@stellar/design-system-website/docs/components/notifications/banner.mdx

@@ -11,7 +11,9 @@ description: "Display message at the top of the page."
 
 ```tsx live
 <PreviewBlock componentName="Banner">
-  <Banner variant="default">Banner message</Banner>
+  <Banner variant="primary">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit
+  </Banner>
 </PreviewBlock>
 ```
 

@stellar/design-system-website/src/componentPreview/bannerPreview.tsx

@@ -1,19 +1,21 @@
+import React from "react";
 import { ComponentPreview } from "@site/src/components/PreviewBlock";
+import CheckIconSvg from "@site/static/img/check-icon.svg";
 
 export const bannerPreview: ComponentPreview = {
   options: [
     {
       type: "select",
       prop: "variant",
       options: [
-        {
-          value: "default",
-          label: "Default",
-        },
         {
           value: "primary",
           label: "Primary",
         },
+        {
+          value: "secondary",
+          label: "Secondary",
+        },
         {
           value: "success",
           label: "Success",
@@ -28,5 +30,35 @@ export const bannerPreview: ComponentPreview = {
         },
       ],
     },
+    {
+      type: "select",
+      prop: "icon",
+      customValue: <CheckIconSvg />,
+      options: [
+        {
+          value: "",
+          label: "Default icon",
+        },
+        {
+          value: "customIcon",
+          label: "Custom icon",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "children",
+      options: [
+        {
+          value: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
+          label: "Short message",
+        },
+        {
+          value:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dolorum eligendi, corrupti quam commodi, iure aliquam, architecto impedit amet nihil reiciendis. Pariatur nostrum ex nemo aut quod autem delectus voluptate!",
+          label: "Long message",
+        },
+      ],
+    },
   ],
 };

@stellar/design-system/src/components/Banner/index.tsx

@@ -1,20 +1,30 @@
 import React from "react";
+import { Icon } from "../../icons";
 import "./styles.scss";
 
 /** */
 export interface BannerProps {
   /** Variant of the banner */
-  variant: "default" | "success" | "warning" | "primary" | "error";
+  variant: "primary" | "secondary" | "success" | "warning" | "error";
+  /** Notification icon @defaultValue `<Icon.InfoCircle />` */
+  icon?: React.ReactNode;
   /** Message to display in the banner */
   children: string | React.ReactNode;
 }
 
 /**
- * Use `banner` to display messages at the top of the page, stretching across the whole width. There are five variants `default`, `primary`, `success`, `error`, and `warning`.
+ * Use `Banner` to display messages at the top of the page, stretching across the whole width. There are five variants `primary`, `secondary`, `success`, `warning`, and `error`.
  */
-export const Banner: React.FC<BannerProps> = ({ variant, children }) => (
+export const Banner: React.FC<BannerProps> = ({
+  variant,
+  icon = <Icon.InfoCircle />,
+  children,
+}) => (
   <div className={`Banner Banner--${variant}`}>
-    <div className="Banner__content">{children}</div>
+    <div className="Banner__message Banner__content">
+      <div className="Banner__icon">{icon}</div>
+      {children}
+    </div>
   </div>
 );
 

@stellar/design-system/src/components/Banner/styles.scss

@@ -2,46 +2,66 @@
 
 .Banner {
   // Color
-  --Banner-color-background: var(--color-gray-40);
-  --Banner-color-text: var(--color-gray-70);
+  --Banner-color-background: var(--sds-clr-gray-01);
+  --Banner-color-text: var(--sds-clr-gray-12);
+  --Banner-color-icon: var(--sds-clr-lilac-09);
 
   width: 100%;
-  padding: pxToRem(8px) pxToRem(16px);
-  font-size: pxToRem(12px);
-  line-height: pxToRem(20px);
-  font-family: var(--font-family-base);
-  font-weight: var(--font-weight-medium);
+  padding: pxToRem(6px) pxToRem(32px);
   background-color: var(--Banner-color-background);
-  color: var(--Banner-color-text);
-  text-align: center;
+  border-bottom: 1px solid var(--sds-clr-gray-06);
 
   &__content {
     margin: 0 auto;
+  }
+
+  &__icon {
+    display: inline-block;
+    width: pxToRem(16px);
+    height: pxToRem(16px);
+    margin-right: pxToRem(6px);
+
+    svg {
+      display: block;
+      margin-top: pxToRem(2px);
+      width: 100%;
+      height: 100%;
+      stroke: var(--Banner-color-icon);
+    }
+  }
+
+  &__message {
+    font-size: pxToRem(14px);
+    line-height: pxToRem(20px);
+    font-family: var(--font-family-base);
+    font-weight: var(--font-weight-medium);
+    color: var(--Banner-color-text);
+    text-align: center;
     max-width: 75ch;
   }
 
-  &--default {
-    --Banner-color-background: var(--color-gray-40);
-    --Banner-color-text: var(--color-gray-70);
+  &--primary {
+    --Banner-color-background: var(--sds-clr-gray-01);
+    --Banner-color-icon: var(--sds-clr-lilac-09);
   }
 
-  &--success {
-    --Banner-color-background: var(--color-green-40);
-    --Banner-color-text: var(--color-green-70);
+  &--secondary {
+    --Banner-color-background: var(--sds-clr-gray-03);
+    --Banner-color-icon: var(--sds-clr-lilac-09);
   }
 
-  &--warning {
-    --Banner-color-background: var(--color-yellow-40);
-    --Banner-color-text: var(--color-yellow-70);
+  &--success {
+    --Banner-color-background: var(--sds-clr-green-03);
+    --Banner-color-icon: var(--sds-clr-green-09);
   }
 
-  &--primary {
-    --Banner-color-background: var(--color-purple-40);
-    --Banner-color-text: var(--color-purple-70);
+  &--warning {
+    --Banner-color-background: var(--sds-clr-amber-03);
+    --Banner-color-icon: var(--sds-clr-amber-09);
   }
 
   &--error {
-    --Banner-color-background: var(--color-red-40);
-    --Banner-color-text: var(--color-red-70);
+    --Banner-color-background: var(--sds-clr-red-03);
+    --Banner-color-icon: var(--sds-clr-red-09);
   }
 }