feat(infobanner): add dark mode

freenowtech · Sep 29, 2023 · f2b3c4c · f2b3c4c
1 parent 0041511
commit f2b3c4c
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 41 deletions.
diff --git a/src/components/Headline/Headline.tsx b/src/components/Headline/Headline.tsx
@@ -55,7 +55,7 @@ const getSize = ({ as = 'h1', size }: HeadlineProps): ResponsiveValue<'xxl' | 'x
     size || DEFAULT_HEADLINE_SIZE[as];
 
 const Headline: React.FC<HeadlineProps> = styled.h1.attrs({ theme })<HeadlineProps>`
-    color: ${getSemanticValue('foreground-primary')};
+    color: inherit;
     font-family: ${get('fonts.normal')};
     font-weight: ${get('fontWeights.bold')};
     margin: 0;

diff --git a/src/components/InfoBanner/InfoBanner.tsx b/src/components/InfoBanner/InfoBanner.tsx
@@ -57,19 +57,23 @@ const bannerVariants = styledVariant({
     variants: {
         info: {
             background: getSemanticValue('background-surface-info-default'),
-            borderColor: getSemanticValue('border-info-faded')
+            borderColor: getSemanticValue('border-info-banner'),
+            color: getSemanticValue('foreground-primary')
         },
         success: {
             background: getSemanticValue('background-surface-success-default'),
-            borderColor: getSemanticValue('border-success-faded')
+            borderColor: getSemanticValue('border-success-banner'),
+            color: getSemanticValue('foreground-primary')
         },
         warning: {
             background: getSemanticValue('background-surface-warning-default'),
-            borderColor: getSemanticValue('border-warning-faded')
+            borderColor: getSemanticValue('border-warning-banner'),
+            color: getSemanticValue('foreground-primary')
         },
         error: {
             background: getSemanticValue('background-surface-danger-default'),
-            borderColor: getSemanticValue('border-danger-faded')
+            borderColor: getSemanticValue('border-danger-banner'),
+            color: getSemanticValue('foreground-primary')
         }
     }
 });
@@ -78,19 +82,23 @@ const emphasizedBannerVariants = styledVariant({
     variants: {
         info: {
             background: getSemanticValue('background-surface-info-emphasized'),
-            borderColor: getSemanticValue('border-info-default')
+            borderColor: getSemanticValue('transparent'),
+            color: getSemanticValue('foreground-on-background-info')
         },
         success: {
             background: getSemanticValue('background-surface-success-emphasized'),
-            borderColor: getSemanticValue('border-success-default')
+            borderColor: getSemanticValue('transparent'),
+            color: getSemanticValue('foreground-on-background-success')
         },
         warning: {
             background: getSemanticValue('background-surface-warning-emphasized'),
-            borderColor: getSemanticValue('border-warning-default')
+            borderColor: getSemanticValue('transparent'),
+            color: getSemanticValue('foreground-on-background-warning')
         },
         error: {
             background: getSemanticValue('background-surface-danger-emphasized'),
-            borderColor: getSemanticValue('border-danger-default')
+            borderColor: getSemanticValue('transparent'),
+            color: getSemanticValue('foreground-on-background-danger')
         }
     }
 });
@@ -138,18 +146,14 @@ export const RoundedBox = styled(Box).attrs({ theme })<BoxWithVariant>`
     padding: ${Spaces[2]};
     ${({ emphasized }) => (emphasized ? emphasizedBannerVariants : bannerVariants)};
 
-    --info-banner-text-color: ${({ emphasized, variant }) =>
-        emphasized && variant !== 'warning'
-            ? get('semanticColors.text.primaryInverted')
-            : get('semanticColors.text.primary')};
-    --info-banner-link-color: ${({ emphasized, variant }) =>
-        emphasized && variant !== 'warning'
-            ? get('semanticColors.text.primaryInverted')
-            : get('semanticColors.text.link')};
-    --info-banner-link-hover-color: ${({ emphasized, variant }) =>
-        emphasized && variant !== 'warning'
-            ? get('semanticColors.text.tertiary')
-            : get('semanticColors.text.linkHover')};
+    --info-banner-link-color: ${({ emphasized }) =>
+        emphasized
+            ? getSemanticValue('foreground-on-background-primary')
+            : getSemanticValue('foreground-accent-default')};
+    --info-banner-link-hover-color: ${({ emphasized }) =>
+        emphasized
+            ? getSemanticValue('foreground-neutral-default')
+            : getSemanticValue('foreground-accent-emphasized')};
 `;
 
 export const IconBox = styled(Box)<BoxWithVariant>`
@@ -174,28 +178,27 @@ export const ROLE_VARIANTS: {
     warning: 'status'
 };
 
-const InfoBanner = ({
+const InfoBanner: React.FC<InfoBannerProps> = ({
     title,
     description,
     variant = 'info',
     linkText,
     linkUrl,
     emphasized,
     ...props
-}: InfoBannerProps): JSX.Element => {
+}) => {
     const BannerIcon = ICON_VARIANTS[variant];
-    const isInverted = emphasized && variant !== 'warning';
 
     return (
         <RoundedBox variant={variant} emphasized={emphasized} role={ROLE_VARIANTS[variant]} {...props}>
             <IconBox mr={1} variant={variant} emphasized={emphasized} data-testid="infobanner-icon-container">
                 <BannerIcon size={20} color="inherit" />
             </IconBox>
             <Box display="flex" flexDirection="column">
-                <Headline as="h4" textAlign="left" inverted={isInverted}>
+                <Headline as="h4" textAlign="left">
                     {title}
                 </Headline>
-                <Text fontSize="small" textAlign="left" inverted={isInverted}>
+                <Text fontSize="small" textAlign="left">
                     {description}
                 </Text>
                 {linkText && linkUrl && (
@@ -205,7 +208,6 @@ const InfoBanner = ({
                         href={linkUrl}
                         target="_blank"
                         mt="0.25rem"
-                        inverted={isInverted}
                     >
                         {linkText}
                     </Link>

diff --git a/src/components/InfoBanner/blocks/InfoBannerCard.tsx b/src/components/InfoBanner/blocks/InfoBannerCard.tsx
@@ -14,15 +14,13 @@ interface CardProps extends BoxProps {
     emphasized?: boolean;
 }
 
-const StyledTitle = styled(Headline).attrs({ as: 'h4', textAlign: 'left' })`
-    color: var(--info-banner-text-color);
-`;
+const StyledTitle = styled(Headline).attrs({ as: 'h4', textAlign: 'left' })``;
 
-const StyledDescription = styled(Text).attrs({ fontSize: 'small', textAlign: 'left' })`
-    color: var(--info-banner-text-color);
-`;
+const StyledDescription = styled(Text).attrs({ fontSize: 'small', textAlign: 'left' })``;
 
 const StyledLink = styled(WaveLink).attrs({ fontSize: 0, textAlign: 'left', target: '_blank', marginTop: '0.25rem' })`
+    color: var(--info-banner-link-color);
+    
     &:link,
     &:visited {
         color: var(--info-banner-link-color);

diff --git a/src/components/InfoBanner/docs/InfoBanner.stories.tsx b/src/components/InfoBanner/docs/InfoBanner.stories.tsx
@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { InfoBanner } from '../InfoBanner';
+import React from 'react';
+import { InfoBannerCard } from '../blocks/InfoBannerCard';
 
 const meta: Meta = {
     title: 'Components/InfoBanner',
-    component: InfoBanner,
+    component: InfoBannerCard,
     args: {
         title: 'Please do not share details about this information.',
         description: 'In case of uncertainty please contact Fraud department.'
@@ -12,18 +13,36 @@ const meta: Meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof InfoBanner>;
+type Story = StoryObj<typeof InfoBannerCard>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        children: (
+            <>
+                <InfoBannerCard.Title>document.status.documents.title.no.vehicle</InfoBannerCard.Title>
+
+                <InfoBannerCard.Description>
+                    document.status.documents.body.no.vehicle
+                </InfoBannerCard.Description>
+
+                <InfoBannerCard.Link>
+                    vehicles.addVehicle.button
+                </InfoBannerCard.Link>
+            </>
+        )
+    }
+};
 
 export const Success: Story = {
     args: {
+        ...Default.args,
         variant: 'success'
     }
 };
 
 export const Warning: Story = {
     args: {
+        ...Default.args,
         variant: 'warning',
         title: 'Possible Fraud',
         description: 'This passenger has more than 20 linked accounts.'
@@ -32,18 +51,21 @@ export const Warning: Story = {
 
 export const Error: Story = {
     args: {
+        ...Default.args,
         variant: 'error'
     }
 };
 
 export const Emphasized: Story = {
     args: {
+        ...Default.args,
         emphasized: true
     }
 };
 
 export const WithLink: Story = {
     args: {
+        ...Default.args,
         linkText: 'More info',
         linkUrl: 'https://free-now.com/'
     }

diff --git a/src/essentials/Colors/Colors.ts b/src/essentials/Colors/Colors.ts
@@ -188,18 +188,22 @@ export const SemanticColors = {
         focus: Colors.blue.secondary[900],
         disabled: Colors.blue.primary[200],
         info: {
+            banner: Colors.blue.secondary[350],
             faded: Colors.blue.secondary[350],
             default: Colors.blue.secondary[900]
         },
         success: {
+            banner: Colors.green[350],
             faded: Colors.green[350],
             default: Colors.green[900]
         },
         warning: {
+            banner: Colors.yellow[350],
             faded: Colors.yellow[350],
             default: Colors.yellow[900]
         },
         danger: {
+            banner: Colors.orange[350],
             faded: Colors.orange[350],
             default: Colors.orange[900]
         }
@@ -242,6 +246,9 @@ export const SemanticColorsDarkSchema = {
         success: {
             default: Colors.green[900]
         },
+        warning: {
+            default: Colors.yellow[900]
+        },
         danger: {
             default: Colors.orange[900],
             emphasized: Colors.orange[1000]
@@ -293,7 +300,8 @@ export const SemanticColorsDarkSchema = {
                 emphasized: Colors.blue.primary[200]
             },
             neutral: {
-                faded: Colors.blue.secondary[350]
+                faded: Colors.blue.secondary[350],
+                emphasized: Colors.blue.primary[550]
             },
             info: {
                 faded: Colors.blue.secondary[900],
@@ -302,13 +310,16 @@ export const SemanticColorsDarkSchema = {
                 emphasized: Colors.blue.secondary[1000]
             },
             success: {
+                default: Colors.blue.primary[750],
                 emphasized: Colors.green[900]
             },
             warning: {
+                default: Colors.blue.primary[750],
                 emphasized: Colors.yellow[900]
             },
             danger: {
                 faded: Colors.orange[350],
+                default: Colors.blue.primary[750],
                 emphasized: Colors.red[1000]
             }
         },
@@ -324,16 +335,20 @@ export const SemanticColorsDarkSchema = {
             default: Colors.blue.secondary[350]
         },
         info: {
+            banner: Colors.blue.secondary[350],
             default: Colors.blue.secondary[900],
             faded: Colors.blue.secondary[900]
         },
         success: {
+            banner: Colors.green[350],
             faded: Colors.green[900]
         },
         warning: {
+            banner: Colors.yellow[350],
             default: Colors.yellow[900]
         },
         danger: {
+            banner: Colors.orange[350],
             faded: Colors.orange[900],
             default: Colors.orange[900]
         },

diff --git a/src/essentials/Colors/RedesignedColors.ts b/src/essentials/Colors/RedesignedColors.ts
@@ -182,18 +182,22 @@ export const SemanticColors = {
         focus: Colors.neutral[550],
         disabled: Colors.neutral[200],
         info: {
+            banner: Colors.neutral[200],
             faded: Colors.neutral[200],
             default: Colors.neutral[550]
         },
         success: {
+            banner: Colors.neutral[200],
             faded: Colors.green[350],
             default: Colors.green[900]
         },
         warning: {
+            banner: Colors.neutral[200],
             faded: Colors.yellow[350],
             default: Colors.yellow[900]
         },
         danger: {
+            banner: Colors.neutral[200],
             faded: Colors.red[350],
             default: Colors.red[900]
         }
@@ -287,7 +291,8 @@ export const SemanticColorsDarkSchema = {
                 emphasized: Colors.neutral[200]
             },
             neutral: {
-                faded: Colors.neutral[350]
+                faded: Colors.neutral[350],
+                emphasized: Colors.neutral[550]
             },
             info: {
                 faded: Colors.primary[900],
@@ -296,13 +301,16 @@ export const SemanticColorsDarkSchema = {
                 emphasized: Colors.neutral[550]
             },
             success: {
+                default: Colors.neutral[750],
                 emphasized: Colors.green[900]
             },
             warning: {
+                default: Colors.neutral[750],
                 emphasized: Colors.yellow[900]
             },
             danger: {
                 faded: Colors.red[1000],
+                default: Colors.neutral[750],
                 emphasized: Colors.red[900]
             }
         },
@@ -320,16 +328,21 @@ export const SemanticColorsDarkSchema = {
             default: Colors.primary[350]
         },
         info: {
-            default: Colors.neutral[550],
-            faded: Colors.neutral[550]
+            banner: Colors.neutral[200],
+            faded: Colors.neutral[550],
+            default: Colors.neutral[550]
         },
         success: {
+            banner: Colors.green[900],
             faded: Colors.green[900]
         },
         warning: {
+            banner: Colors.yellow[900],
+            faded: Colors.yellow[900],
             default: Colors.yellow[900]
         },
         danger: {
+            banner: Colors.red[900],
             faded: Colors.red[900],
             default: Colors.red[900]
         }