feat(InfoBanner): fix up the InfoBannerCard Link export

Author: Ján Hamara

src/components/InfoBanner/InfoBanner.tsx

@@ -134,7 +134,7 @@ export const RoundedBox = styled(Box).attrs({ theme })<BoxWithVariant>`
     justify-content: flex-start;
     border-radius: ${get('radii.3')};
     border: 0.0625rem solid;
-    padding: ${`${Spaces[1]} ${Spaces[2]} ${Spaces[1]} ${Spaces[1]}`};
+    padding: ${Spaces[2]};
     ${({ emphasized }) => (emphasized ? emphasizedBannerVariants : bannerVariants)};
 
     --info-banner-text-color: ${({ emphasized, variant }) =>

src/components/InfoBanner/blocks/InfoBannerCard.tsx

@@ -38,11 +38,6 @@ const Title = ({ children }: { children: string }) => <StyledTitle>{children}</S
 
 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];
 
@@ -60,6 +55,6 @@ const InfoBannerCard = ({ children, variant = 'info', emphasized, ...props }: Ca
 
 InfoBannerCard.Title = Title;
 InfoBannerCard.Description = Description;
-InfoBannerCard.Link = Link;
+InfoBannerCard.Link = StyledLink;
 
 export { InfoBannerCard };

src/components/InfoBanner/docs/InfoBanner.storybook.mdx

@@ -2,6 +2,7 @@ import { Meta, ArgTypes, Primary, Stories, Unstyled } from '@storybook/blocks';
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
 import { InfoBannerCard } from '../blocks/InfoBannerCard';
 import * as InfoBannerStories from './InfoBanner.stories';
+import { Link } from '../../Link/Link';
 
 <Meta of={InfoBannerStories} />
 
@@ -40,9 +41,9 @@ The wrapper component (**InfoBannerCard**) accepts the same props as the **InfoB
         <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.Link href="https://wave.free-now.com/">Driver Documents</InfoBannerCard.Link>
+        <InfoBannerCard.Link href="https://wave.free-now.com/">Vehicle Documents</InfoBannerCard.Link>
+        <InfoBannerCard.Link href="https://wave.free-now.com/">Driver profile</InfoBannerCard.Link>
     </InfoBannerCard>
 </Unstyled>
 
@@ -52,8 +53,8 @@ The wrapper component (**InfoBannerCard**) accepts the same props as the **InfoB
     <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.Link href="https://wave.free-now.com/">Driver Documents</InfoBannerCard.Link>
+    <InfoBannerCard.Link href="https://wave.free-now.com/">Vehicle Documents</InfoBannerCard.Link>
+    <InfoBannerCard.Link href="https://wave.free-now.com/">Driver profile</InfoBannerCard.Link>
 </InfoBannerCard>
 ```