fix(BannerStrip): position relative should not use z-index, top or left

web3ui · Nov 16, 2022 · 6d6f7ab · 6d6f7ab
1 parent f776317
commit 6d6f7ab
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/packages/core/src/lib/BannerStrip/BannerStrip.styles.ts b/packages/core/src/lib/BannerStrip/BannerStrip.styles.ts
@@ -38,26 +38,25 @@ const SectionStyled = styled.section<TSectionStyledProps>`
     ${resetCSS};
     ${fonts.text};
     align-items: center;
+    background-color: ${(props) =>
+        props.type !== 'custom' ? getColor(props.type).bgColor : props.bgColor};
+    border-radius: ${(props) => props.borderRadius && props.borderRadius};
+    color: ${(p) => (p.type ? getColor(p.type).color : color.white)};
     display: flex;
     font-size: 14px;
     font-weight: 550;
+    height: ${(props) => props.height && props.height};
     justify-content: center;
-    left: 0;
+    left: ${(props) => (props.position === 'absolute' ? '0' : 'unset')};
     line-height: 24px;
     max-width: 100%;
     padding: 8px 0px;
-    text-align: center;
-    top: 0;
-    width: 100%;
-    z-index: 10001;
-
     position: ${(props) => props.position && props.position};
-    border-radius: ${(props) => props.borderRadius && props.borderRadius};
-    height: ${(props) => props.height && props.height};
+    text-align: center;
+    top: ${(props) => (props.position === 'absolute' ? '0' : 'unset')};
     width: ${(props) => props.width && props.width};
-    background-color: ${(props) =>
-        props.type !== 'custom' ? getColor(props.type).bgColor : props.bgColor};
-    color: ${(p) => (p.type ? getColor(p.type).color : color.white)};
+    width: 100%;
+    z-index: ${(props) => (props.position === 'absolute' ? '10001' : 'unset')};
 `;
 
 const DivStyledContainer = styled.div`

diff --git a/packages/core/src/lib/BannerStrip/BannerStrip.tsx b/packages/core/src/lib/BannerStrip/BannerStrip.tsx
@@ -17,6 +17,7 @@ const BannerStrip: React.FC<IBannerStripProps> = ({
     isCloseBtnVisible = true,
     onCloseBtnClick,
     position = 'fixed',
+    style,
     text,
     type = 'standard',
     width,
@@ -32,11 +33,11 @@ const BannerStrip: React.FC<IBannerStripProps> = ({
     if (!isComponentVisible) return null;
     return (
         <SectionStyled
+            bgColor={bgColor}
             borderRadius={borderRadius}
             data-testid="test-banner-strip"
             height={height}
             position={position}
-            bgColor={bgColor}
             type={type}
             width={width}
             {...props}

diff --git a/packages/core/src/lib/BannerStrip/types.ts b/packages/core/src/lib/BannerStrip/types.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import { CSSProperties } from 'styled-components';
 import { ButtonProps } from '../Button';
 
 export interface IBannerStripProps {
@@ -66,6 +67,11 @@ export interface IBannerStripProps {
      * specify the number of days you want to hide the component after close button is clicked (Uses local storage)
      */
     noOfDaysToHide?: number | null;
+
+    /**
+     * add CSS styles, good for margin
+     */
+    style?: CSSProperties;
 }
 
 export type TBannerStripTypes =