feat: add color to the Banner component

AirWalk-Digital · May 10, 2023 · aebc9bb · aebc9bb
1 parent 7246198
commit aebc9bb
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/stories/Banner.jsx b/src/stories/Banner.jsx
@@ -17,7 +17,7 @@ import { getContrastYIQ } from './utils/colors.js';
 import { getMDXparts, faTypes} from './utils/mdxContent.js'
 
 
-const Banner = ({ children, sx = {}, ...props }) => {
+const Banner = ({ children, color='primary', sx = {}, ...props }) => {
     children = React.Children.toArray(children);
     children = children.filter(item => item !== "\n") //strip all the empty entries (\n)
     const theme = useTheme();
@@ -103,7 +103,8 @@ const Banner = ({ children, sx = {}, ...props }) => {
     }
     const statementTheme = {
         width: '100%',
-        backgroundColor: theme.palette.background.primary,
+        backgroundColor: theme.palette.background[color],
+        color: getContrastYIQ(theme.palette.background[color], theme),
         px: '2.5%',
         py: '1%',
     }
@@ -121,7 +122,7 @@ const Banner = ({ children, sx = {}, ...props }) => {
             <Box sx={{ display: "flex", alignItems: "center", breakInside: 'avoid-column' }}>
                 {/* <Box sx={{ display: "flex", alignItems: "left", paddingLeft: "2.5%" }}> */}
                 {/* {faIcon && <FontAwesomeIcon icon={['fal', faIcon]} sx={{ pl: "2%", pr: '10px' }} style={{ width: "50px", height: "50px", paddingTop: '1%', paddingBottom: '1%', paddingLeft: '2%', paddingRight: '2%' }} />} */}
-                {icon && <Icon type={type} sx={{  pl: '5px', pr: '1%', pt: '1%' }} >{icon}</Icon>}
+                {icon && <Icon type={type} sx={{  color: theme.palette.background[color], pl: '5px', pr: '1%', pt: '1%' }} >{icon}</Icon>}
 
                 {/* <Box sx={{ variant: "styles.p", paddingLeft: "2.5%", minHeight: "100px", m: '1%' }}> */}
                 <Box sx={{ py: '0', pl: padding, minHeight: "50px", m: '0.5%', display: "flex", flexDirection: 'column', alignItems: "left" }}>