feat(fuselage): Update Banner Component style (#905)

* feat: new banner style * chore: typo
RocketChat · Nov 18, 2022 · 15b4f96 · 15b4f96
1 parent ade27ba
commit 15b4f96
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 54 deletions.
diff --git a/packages/fuselage/src/components/Banner/Banner.stories.js b/packages/fuselage/src/components/Banner/Banner.stories.js
@@ -23,7 +23,7 @@ export const _Banner = () => (
 );
 _Banner.storyName = 'Banner';
 
-export const Normal = () => (
+export const Variations = () => (
   <>
     <Banner
       closeable
@@ -49,9 +49,9 @@ export const Normal = () => (
     <br />
     <Banner
       closeable
-      icon={<Icon name='circle-check' size={24} />}
+      icon={<Icon name='warning' size={24} />}
       title='Sed ut perspiciatis unde'
-      variant='success'
+      variant='warning'
       onClose={action('close')}
     >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -60,9 +60,9 @@ export const Normal = () => (
     <br />
     <Banner
       closeable
-      icon={<Icon name='warning' size={24} />}
+      icon={<Icon name='ban' size={24} />}
       title='Sed ut perspiciatis unde'
-      variant='warning'
+      variant='danger'
       onClose={action('close')}
     >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -71,15 +71,14 @@ export const Normal = () => (
     <br />
     <Banner
       closeable
-      icon={<Icon name='ban' size={24} />}
+      icon={<Icon name='circle-check' size={24} />}
       title='Sed ut perspiciatis unde'
-      variant='danger'
+      variant='success'
       onClose={action('close')}
     >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor
     </Banner>
-    <br />
   </>
 );
 

diff --git a/packages/fuselage/src/components/Banner/Banner.styles.scss b/packages/fuselage/src/components/Banner/Banner.styles.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../styles/functions';
 @use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
 // neutral
@@ -10,44 +11,32 @@ $banner-colors-neutral-color: functions.theme(
 );
 $banner-colors-neutral-background-color: functions.theme(
   'banner-colors-neutral-background-color',
-  colors.surface(neutral)
+  colors.surface(tint)
 );
+
 // info
 $banner-colors-info-color: functions.theme(
   'banner-colors-info-color',
   colors.status-font(on-info)
 );
-$banner-colors-info-background-color: functions.theme(
-  'banner-colors-info-background-color',
-  colors.status-background(info)
-);
+
 // success
 $banner-colors-success-color: functions.theme(
   'banner-colors-success-color',
   colors.status-font(on-success)
 );
-$banner-colors-success-background-color: functions.theme(
-  'banner-colors-success-background-color',
-  colors.status-background(success)
-);
+
 // warning
 $banner-colors-warning-color: functions.theme(
   'banner-colors-warning-color',
   colors.status-font(on-warning)
 );
-$banner-colors-warning-background-color: functions.theme(
-  'banner-colors-warning-background-color',
-  colors.status-background(warning)
-);
+
 // danger
 $banner-colors-danger-color: functions.theme(
   'banner-colors-danger-color',
   colors.status-font(on-danger)
 );
-$banner-colors-danger-background-color: functions.theme(
-  'banner-colors-danger-background-color',
-  colors.status-background(danger)
-);
 
 .rcx-banner {
   display: flex;
@@ -61,6 +50,11 @@ $banner-colors-danger-background-color: functions.theme(
   padding-block: 14px;
   padding-inline: 16px;
 
+  border-top-width: lengths.border-width(4);
+  border-top-style: solid;
+
+  background-color: $banner-colors-neutral-background-color;
+
   font-family: typography.font-family('sans');
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -74,34 +68,45 @@ $banner-colors-danger-background-color: functions.theme(
   }
 
   &--neutral {
-    color: $banner-colors-neutral-color;
-    background-color: $banner-colors-neutral-background-color;
+    border-top-color: transparent;
   }
 
   &--info {
-    color: $banner-colors-info-color;
-    background-color: $banner-colors-info-background-color;
-  }
-
-  &--success {
-    color: $banner-colors-success-color;
-    background-color: $banner-colors-success-background-color;
+    border-top-color: $banner-colors-info-color;
   }
 
   &--warning {
-    color: $banner-colors-warning-color;
-    background-color: $banner-colors-warning-background-color;
+    border-top-color: $banner-colors-warning-color;
   }
 
   &--danger {
-    color: $banner-colors-danger-color;
-    background-color: $banner-colors-danger-background-color;
+    border-top-color: $banner-colors-danger-color;
+  }
+
+  &--success {
+    border-top-color: $banner-colors-success-color;
   }
 
   &__icon {
     padding-block: 8px;
     padding-inline-end: 12px;
 
+    &--info {
+      color: $banner-colors-info-color;
+    }
+
+    &--warning {
+      color: $banner-colors-warning-color;
+    }
+
+    &--danger {
+      color: $banner-colors-danger-color;
+    }
+
+    &--success {
+      color: $banner-colors-success-color;
+    }
+
     &--inline {
       margin-block: -2px;
       padding-block: 0;

diff --git a/packages/fuselage/src/components/Banner/Banner.tsx b/packages/fuselage/src/components/Banner/Banner.tsx
@@ -56,15 +56,6 @@ const Banner = ({
   const isIconVisible = useMemo(() => inlineSize > 375, [inlineSize]);
 
   variant = variants.includes(variant) ? variant : variants[0];
-  const closeButtonProps = useMemo(
-    () => ({
-      info: variant === 'info',
-      success: variant === 'success',
-      warning: variant === 'warning',
-      danger: variant === 'danger',
-    }),
-    [variant]
-  );
 
   const handleBannerClick = useCallback(() => {
     if (onAction) {
@@ -95,7 +86,13 @@ const Banner = ({
       {...props}
     >
       {icon && isIconVisible && (
-        <div className={cx('rcx-banner__icon')({ inline })}>{icon}</div>
+        <div
+          className={cx(`rcx-banner__icon rcx-banner__icon--${variant}`)({
+            inline,
+          })}
+        >
+          {icon}
+        </div>
       )}
       <div className={cx('rcx-banner__content')({ inline })}>
         {title && (
@@ -114,12 +111,7 @@ const Banner = ({
       </div>
       {closeable && (
         <div className={cx('rcx-banner__close-button')({ inline })}>
-          <IconButton
-            small
-            {...closeButtonProps}
-            onClick={handleCloseButtonClick}
-            icon='cross'
-          />
+          <IconButton small onClick={handleCloseButtonClick} icon='cross' />
         </div>
       )}
     </section>