feat: Add link property to banner component (#849)

RocketChat · Sep 22, 2022 · dc71a45 · dc71a45
1 parent 4828145
commit dc71a45
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/packages/fuselage/src/components/Banner/Banner.spec.tsx b/packages/fuselage/src/components/Banner/Banner.spec.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
@@ -10,4 +10,13 @@ describe('[Banner Component]', () => {
   it('renders without crashing', () => {
     render(<Banner />);
   });
+
+  it('renders with link', () => {
+    render(<Banner link='https://rocket.chat' linkText='More info' />);
+    expect(
+      screen.getByRole('link', {
+        name: /more info/i,
+      })
+    ).toBeInTheDocument();
+  });
 });
diff --git a/packages/fuselage/src/components/Banner/Banner.stories.js b/packages/fuselage/src/components/Banner/Banner.stories.js
@@ -15,6 +15,7 @@ export const _Banner = () => (
     icon={<Icon name='info' size={24} />}
     title='Sed ut perspiciatis unde'
     onClose={action('close')}
+    link='https://rocket.chat/'
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor

diff --git a/packages/fuselage/src/components/Banner/Banner.styles.scss b/packages/fuselage/src/components/Banner/Banner.styles.scss
@@ -140,4 +140,12 @@ $banner-colors-danger-background-color: functions.theme(
       padding-block: 0;
     }
   }
+
+  &__link {
+    padding-left: 10px;
+
+    text-decoration: underline;
+
+    color: inherit;
+  }
 }
diff --git a/packages/fuselage/src/components/Banner/Banner.tsx b/packages/fuselage/src/components/Banner/Banner.tsx
@@ -18,27 +18,31 @@ const variants: VariantType[] = [
 ];
 
 type BannerProps = {
-  inline?: boolean;
   actionable?: boolean;
   closeable?: boolean;
   icon?: ReactNode;
-  title?: string;
-  variant?: VariantType;
+  inline?: boolean;
+  link?: string;
+  linkText?: string;
   onAction?: () => void;
   onClose?: () => void;
+  title?: string;
+  variant?: VariantType;
 } & AllHTMLAttributes<HTMLElement>;
 
 const Banner = ({
-  inline = false,
+  actionable,
   children,
   className,
-  actionable,
   closeable,
   icon,
-  title,
-  variant = 'neutral',
+  inline = false,
+  link,
+  linkText = 'More info',
   onAction,
   onClose,
+  title,
+  variant = 'neutral',
   ...props
 }: BannerProps) => {
   useStyleSheet();
@@ -98,6 +102,15 @@ const Banner = ({
           <h6 className={cx('rcx-banner__title')({ inline })}>{title}</h6>
         )}
         {children}
+        {link && (
+          <a
+            href={link}
+            target='_blank'
+            className={cx('rcx-banner__link')({ [variant]: true })}
+          >
+            {linkText}
+          </a>
+        )}
       </div>
       {closeable && (
         <div className={cx('rcx-banner__close-button')({ inline })}>