feat: implement compound component approach for InfoBanner (#336)

* feat(infobanner): implement compound component approach for infobanner

* feat(infobanner): remove export declaration conflict

* feat(infobanner): add modifications from MR suggestions

removing linklist

---------

Co-authored-by: Ján Hamara <[email protected]>

Author: JanHamara

src/components/InfoBanner/InfoBanner.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { variant as styledVariant } from 'styled-system';
 import { get } from '../../utils/themeGet';
+import { theme } from '../../essentials/theme';
 import {
     CheckCircleSolidIcon,
     CloseCircleSolidIcon,
@@ -12,6 +13,7 @@ import {
 import { BoxProps, Box } from '../Box/Box';
 import { Link } from '../Link/Link';
 import { Text } from '../Text/Text';
+import { Headline } from '../Headline/Headline';
 import { Spaces } from '../../essentials';
 
 interface InfoBannerProps extends BoxProps {
@@ -106,21 +108,34 @@ const emphasizedIconColorVariants = styledVariant({
     }
 });
 
-const RoundedBox = styled(Box)<BoxWithVariant>`
+export const RoundedBox = styled(Box).attrs({ theme })<BoxWithVariant>`
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     border-radius: ${get('radii.3')};
     border: 0.0625rem solid;
     padding: ${`${Spaces[1]} ${Spaces[2]} ${Spaces[1]} ${Spaces[1]}`};
     ${({ 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')};
 `;
 
-const IconBox = styled(Box)<BoxWithVariant>`
+export const IconBox = styled(Box)<BoxWithVariant>`
     ${({ emphasized }) => (emphasized ? emphasizedIconColorVariants : iconColorVariants)};
 `;
 
-const ICON_VARIANTS: {
+export const ICON_VARIANTS: {
     [key in InfoBannerVariants]: React.FC<IconProps>;
 } = {
     warning: WarningSolidIcon,
@@ -129,7 +144,7 @@ const ICON_VARIANTS: {
     error: CloseCircleSolidIcon
 };
 
-const ROLE_VARIANTS: {
+export const ROLE_VARIANTS: {
     [key in InfoBannerVariants]: string;
 } = {
     error: 'alert',
@@ -156,9 +171,9 @@ const InfoBanner = ({
                 <BannerIcon size={20} color="inherit" />
             </IconBox>
             <Box display="flex" flexDirection="column">
-                <Text fontWeight="bold" textAlign="left" inverted={isInverted}>
+                <Headline as="h4" textAlign="left" inverted={isInverted}>
                     {title}
-                </Text>
+                </Headline>
                 <Text fontSize="small" textAlign="left" inverted={isInverted}>
                     {description}
                 </Text>

src/components/InfoBanner/blocks/InfoBannerCard.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+
+import { BoxProps, Box } from '../../Box/Box';
+import { Headline } from '../../Headline/Headline';
+import { Link as WaveLink } from '../../Link/Link';
+import { Text } from '../../Text/Text';
+
+import { ICON_VARIANTS, IconBox, InfoBannerVariants, ROLE_VARIANTS, RoundedBox } from '../InfoBanner';
+
+interface CardProps extends BoxProps {
+    children: ReactNode;
+    variant?: InfoBannerVariants;
+    emphasized?: boolean;
+}
+
+const StyledTitle = styled(Headline).attrs({ as: 'h4', textAlign: 'left' })`
+    color: var(--info-banner-text-color);
+`;
+
+const StyledDescription = styled(Text).attrs({ fontSize: 'small', textAlign: 'left' })`
+    color: var(--info-banner-text-color);
+`;
+
+const StyledLink = styled(WaveLink).attrs({ fontSize: 0, textAlign: 'left', target: '_blank', marginTop: '0.25rem' })`
+    &:link,
+    &:visited {
+        color: var(--info-banner-link-color);
+    }
+
+    &:hover,
+    &:active {
+        color: var(--info-banner-link-hover-color);
+    }
+`;
+
+const Title = ({ children }: { children: string }) => <StyledTitle>{children}</StyledTitle>;
+
+const Description = ({ children }: { children: string }) => <StyledDescription>{children}</StyledDescription>;
+
+const Link = ({ linkUrl, linkText }: { linkUrl: string; linkText: string }) => (
+    <StyledLink href={linkUrl}>{linkText}</StyledLink>
+);
+
+// TODO: Document this compound component properly when Storybook migration is complete
+const InfoBannerCard = ({ children, variant = 'info', emphasized, ...props }: CardProps): JSX.Element => {
+    const BannerIcon = ICON_VARIANTS[variant];
+
+    return (
+        <RoundedBox variant={variant} emphasized={emphasized} role={ROLE_VARIANTS[variant]} {...props}>
+            <IconBox mr={1} variant={variant} emphasized={emphasized}>
+                <BannerIcon size={20} color="inherit" />
+            </IconBox>
+            <Box display="flex" flexDirection="column">
+                {children}
+            </Box>
+        </RoundedBox>
+    );
+};
+
+InfoBannerCard.Title = Title;
+InfoBannerCard.Description = Description;
+InfoBannerCard.Link = Link;
+
+export { InfoBannerCard };

src/components/InfoBanner/docs/InfoBanner.mdx

@@ -6,6 +6,7 @@ route: /components/info-banner
 
 import { Playground } from 'docz';
 import { InfoBanner } from '../InfoBanner'
+import { InfoBannerCard } from '../blocks/InfoBannerCard'
 import { InfoBannerPropsTable } from './InfoBannerPropsTable'
 import { Combination } from '../../../docs/Combination'
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks'
@@ -22,11 +23,33 @@ The InfoBanner is used to communicate a vibrant message, state change or importa
 
 
 ## Examples
-
-<InfoBanner title='Please do not share details about this information.' description='In case of uncertainty please contact Fraud department.' />
+<InfoBanner mt={2} title='Please do not share details about this information.' description='In case of uncertainty please contact Fraud department.' />
 <br />
 <InfoBanner title='Possible Fraud' description='This passenger has more than 20 linked accounts.' variant='warning' />
 
+<br/>
+
+## Compound components approach
+
+You may also use compound components approach to build up your InfoBanner (e.g. when you need multiple links in a single banner as below)
+
+Available compound components:
+- **InfoBannerCard** (Wrapper)
+- **InfoBannerCard.Title**
+- **InfoBannerCard.Description**
+- **InfoBannerCard.Link**
+
+The wrapper component (**InfoBannerCard**) accepts same props as **InfoBanner** component, if variant is applied, it's styling will get automatically applied to children compound components.
+
+<Playground>
+    <InfoBannerCard variant='warning'>
+        <InfoBannerCard.Title>Issue with documents</InfoBannerCard.Title>
+        <InfoBannerCard.Description>Your uploaded documents don't match the records. Please check the following sources:</InfoBannerCard.Description>
+            <InfoBannerCard.Link linkText='Driver documents' linkUrl='https://wave.free-now.com' />
+            <InfoBannerCard.Link linkText='Vehicle documents' linkUrl='https://wave.free-now.com' />
+            <InfoBannerCard.Link linkText='Driver Profile' linkUrl='https://wave.free-now.com' />
+    </InfoBannerCard>
+</Playground>
 
 ## Playground
 

src/components/index.ts

@@ -55,3 +55,4 @@ export { SelectListProps } from './SelectList/types';
 export { Row, RowProps, Column, ColumnProps } from './Grid/Grid';
 export { Popover, PopoverProps } from './Popover/Popover';
 export { InfoBanner, InfoBannerProps, InfoBannerVariants } from './InfoBanner/InfoBanner';
+export { InfoBannerCard } from './InfoBanner/blocks/InfoBannerCard';