From 9c57e9716d8bdc2f45305ad6f9c9e8f7d1ab0775 Mon Sep 17 00:00:00 2001
From: Akim Benchiha <akim.benchiha@gmail.com>
Date: Fri, 3 Jun 2022 21:53:43 +0200
Subject: [PATCH 1/3] fix(banner-notification): type check error on docs
 template

the boolean passed from docs template to banner notification component
has an issue when the variable passed is null. The interface of the
banner props has shouldShow declared as boolean or undefined. To prevent
each component to check against null to boolean, the check is made
internally inside the banner component and shouldShow is declared as
boolean or null or undefined.
---
 src/components/BannerNotification.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/BannerNotification.tsx b/src/components/BannerNotification.tsx
index 794894e108f..762665e0197 100644
--- a/src/components/BannerNotification.tsx
+++ b/src/components/BannerNotification.tsx
@@ -6,7 +6,7 @@ export interface IStyledBanner {
 }
 
 export interface IProps {
-  shouldShow?: boolean
+  shouldShow?: boolean | null
   className?: string
 }
 
@@ -31,10 +31,13 @@ const BannerNotification: React.FC<IProps> = ({
   children,
   className,
   shouldShow = false,
-}) => (
-  <Banner shouldShow={shouldShow} className={className}>
-    {children}
-  </Banner>
-)
+}) => {
+  const shouldShowAssign: boolean = shouldShow || false
+  return (
+    <Banner shouldShow={shouldShowAssign} className={className}>
+      {children}
+    </Banner>
+  )
+}
 
 export default BannerNotification

From deb6d543a8d5c23561c69fae99f4791ddd0f5837 Mon Sep 17 00:00:00 2001
From: Akim Benchiha <akim.benchiha@gmail.com>
Date: Sat, 4 Jun 2022 00:05:06 +0200
Subject: [PATCH 2/3] fix(docs-template): type guard for boolean

isPageIncomplete variable is truthy or falsy but the banner notification
component accept a boolean props. So we convert truthy or falsy to true
or false

Refs: #6392
---
 src/templates/docs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/docs.tsx b/src/templates/docs.tsx
index a8de7f4f260..c447fb49f46 100644
--- a/src/templates/docs.tsx
+++ b/src/templates/docs.tsx
@@ -178,7 +178,7 @@ const DocsPage = ({
   const isRightToLeft = isLangRightToLeft(mdx.frontmatter.lang as Lang)
 
   const tocItems = mdx.tableOfContents?.items
-  const isPageIncomplete = mdx.frontmatter.incomplete
+  const isPageIncomplete = !!mdx.frontmatter.incomplete
 
   const { editContentUrl } = siteData.siteMetadata || {}
   const { relativePath, slug } = pageContext

From 5223f68860f8dc5a2e5fbdb5304b0769617a06e8 Mon Sep 17 00:00:00 2001
From: Akim Benchiha <akim.benchiha@gmail.com>
Date: Sat, 4 Jun 2022 00:12:10 +0200
Subject: [PATCH 3/3] revert(banner-notification): keep component agnostic

the component should not check against truthy or falsy value on
shouldShow props

Refs: #9362
---
 src/components/BannerNotification.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/BannerNotification.tsx b/src/components/BannerNotification.tsx
index 762665e0197..794894e108f 100644
--- a/src/components/BannerNotification.tsx
+++ b/src/components/BannerNotification.tsx
@@ -6,7 +6,7 @@ export interface IStyledBanner {
 }
 
 export interface IProps {
-  shouldShow?: boolean | null
+  shouldShow?: boolean
   className?: string
 }
 
@@ -31,13 +31,10 @@ const BannerNotification: React.FC<IProps> = ({
   children,
   className,
   shouldShow = false,
-}) => {
-  const shouldShowAssign: boolean = shouldShow || false
-  return (
-    <Banner shouldShow={shouldShowAssign} className={className}>
-      {children}
-    </Banner>
-  )
-}
+}) => (
+  <Banner shouldShow={shouldShow} className={className}>
+    {children}
+  </Banner>
+)
 
 export default BannerNotification