From 638aff7c61eace9f7e2e90d77aeb46cf32f1b3dd Mon Sep 17 00:00:00 2001
From: Akim Benchiha <akim.benchiha@gmail.com>
Date: Thu, 2 Jun 2022 21:43:03 +0200
Subject: [PATCH] refactor(components): upgrade banner notification from js to
 tsx

add typed props and style for the banner notification and switch from
js file to typescript react component

Refs: #6392
---
 ...erNotification.js => BannerNotification.tsx} | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)
 rename src/components/{BannerNotification.js => BannerNotification.tsx} (71%)

diff --git a/src/components/BannerNotification.js b/src/components/BannerNotification.tsx
similarity index 71%
rename from src/components/BannerNotification.js
rename to src/components/BannerNotification.tsx
index ef7238c94ef..794894e108f 100644
--- a/src/components/BannerNotification.js
+++ b/src/components/BannerNotification.tsx
@@ -1,7 +1,16 @@
 import React from "react"
 import styled from "styled-components"
 
-const Banner = styled.div`
+export interface IStyledBanner {
+  shouldShow: boolean
+}
+
+export interface IProps {
+  shouldShow?: boolean
+  className?: string
+}
+
+const Banner = styled.div<IStyledBanner>`
   display: ${(props) => (props.shouldShow ? `flex` : `none`)};
   width: 100%;
   background-color: ${(props) => props.theme.colors.primary};
@@ -18,7 +27,11 @@ const Banner = styled.div`
   }
 `
 
-const BannerNotification = ({ children, className, shouldShow }) => (
+const BannerNotification: React.FC<IProps> = ({
+  children,
+  className,
+  shouldShow = false,
+}) => (
   <Banner shouldShow={shouldShow} className={className}>
     {children}
   </Banner>