Skip to content

Commit e06e407

Browse files
author
Martí Malek
committed
Merge branch 'main' into WECH-35/bring-storybook-migration-to-main
2 parents 590ac14 + 2696ebb commit e06e407

File tree

7 files changed

+207
-149
lines changed

7 files changed

+207
-149
lines changed

‎docs/changelog.mdx

+78-139
Large diffs are not rendered by default.

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@freenow/wave",
3-
"version": "1.30.1",
3+
"version": "1.31.0",
44
"description": "React components of the Wave design system for your Front-End project",
55
"main": "lib/cjs/index.js",
66
"typings": "lib/types/index.d.ts",

‎src/components/InfoBanner/InfoBanner.tsx

+21-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import styled from 'styled-components';
33
import { variant as styledVariant } from 'styled-system';
44
import { get } from '../../utils/themeGet';
5+
import { theme } from '../../essentials/theme';
56
import {
67
CheckCircleSolidIcon,
78
CloseCircleSolidIcon,
@@ -12,6 +13,7 @@ import {
1213
import { BoxProps, Box } from '../Box/Box';
1314
import { Link } from '../Link/Link';
1415
import { Text } from '../Text/Text';
16+
import { Headline } from '../Headline/Headline';
1517
import { Spaces } from '../../essentials';
1618

1719
interface InfoBannerProps extends BoxProps {
@@ -126,21 +128,34 @@ const emphasizedIconColorVariants = styledVariant({
126128
}
127129
});
128130

129-
const RoundedBox = styled(Box)<BoxWithVariant>`
131+
export const RoundedBox = styled(Box).attrs({ theme })<BoxWithVariant>`
130132
display: flex;
131133
flex-direction: row;
132134
justify-content: flex-start;
133135
border-radius: ${get('radii.3')};
134136
border: 0.0625rem solid;
135137
padding: ${`${Spaces[1]} ${Spaces[2]} ${Spaces[1]} ${Spaces[1]}`};
136138
${({ emphasized }) => (emphasized ? emphasizedBannerVariants : bannerVariants)};
139+
140+
--info-banner-text-color: ${({ emphasized, variant }) =>
141+
emphasized && variant !== 'warning'
142+
? get('semanticColors.text.primaryInverted')
143+
: get('semanticColors.text.primary')};
144+
--info-banner-link-color: ${({ emphasized, variant }) =>
145+
emphasized && variant !== 'warning'
146+
? get('semanticColors.text.primaryInverted')
147+
: get('semanticColors.text.link')};
148+
--info-banner-link-hover-color: ${({ emphasized, variant }) =>
149+
emphasized && variant !== 'warning'
150+
? get('semanticColors.text.tertiary')
151+
: get('semanticColors.text.linkHover')};
137152
`;
138153

139-
const IconBox = styled(Box)<BoxWithVariant>`
154+
export const IconBox = styled(Box)<BoxWithVariant>`
140155
${({ emphasized }) => (emphasized ? emphasizedIconColorVariants : iconColorVariants)};
141156
`;
142157

143-
const ICON_VARIANTS: {
158+
export const ICON_VARIANTS: {
144159
[key in InfoBannerVariants]: React.FC<IconProps>;
145160
} = {
146161
warning: WarningSolidIcon,
@@ -149,7 +164,7 @@ const ICON_VARIANTS: {
149164
error: CloseCircleSolidIcon
150165
};
151166

152-
const ROLE_VARIANTS: {
167+
export const ROLE_VARIANTS: {
153168
[key in InfoBannerVariants]: string;
154169
} = {
155170
error: 'alert',
@@ -176,9 +191,9 @@ const InfoBanner = ({
176191
<BannerIcon size={20} color="inherit" />
177192
</IconBox>
178193
<Box display="flex" flexDirection="column">
179-
<Text fontWeight="bold" textAlign="left" inverted={isInverted}>
194+
<Headline as="h4" textAlign="left" inverted={isInverted}>
180195
{title}
181-
</Text>
196+
</Headline>
182197
<Text fontSize="small" textAlign="left" inverted={isInverted}>
183198
{description}
184199
</Text>

‎src/components/InfoBanner/blocks/InfoBannerCard.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { ReactNode } from 'react';
2+
import styled from 'styled-components';
3+
4+
import { BoxProps, Box } from '../../Box/Box';
5+
import { Headline } from '../../Headline/Headline';
6+
import { Link as WaveLink } from '../../Link/Link';
7+
import { Text } from '../../Text/Text';
8+
9+
import { ICON_VARIANTS, IconBox, InfoBannerVariants, ROLE_VARIANTS, RoundedBox } from '../InfoBanner';
10+
11+
interface CardProps extends BoxProps {
12+
children: ReactNode;
13+
variant?: InfoBannerVariants;
14+
emphasized?: boolean;
15+
}
16+
17+
const StyledTitle = styled(Headline).attrs({ as: 'h4', textAlign: 'left' })`
18+
color: var(--info-banner-text-color);
19+
`;
20+
21+
const StyledDescription = styled(Text).attrs({ fontSize: 'small', textAlign: 'left' })`
22+
color: var(--info-banner-text-color);
23+
`;
24+
25+
const StyledLink = styled(WaveLink).attrs({ fontSize: 0, textAlign: 'left', target: '_blank', marginTop: '0.25rem' })`
26+
&:link,
27+
&:visited {
28+
color: var(--info-banner-link-color);
29+
}
30+
31+
&:hover,
32+
&:active {
33+
color: var(--info-banner-link-hover-color);
34+
}
35+
`;
36+
37+
const Title = ({ children }: { children: string }) => <StyledTitle>{children}</StyledTitle>;
38+
39+
const Description = ({ children }: { children: string }) => <StyledDescription>{children}</StyledDescription>;
40+
41+
const Link = ({ linkUrl, linkText }: { linkUrl: string; linkText: string }) => (
42+
<StyledLink href={linkUrl}>{linkText}</StyledLink>
43+
);
44+
45+
// TODO: Document this compound component properly when Storybook migration is complete
46+
const InfoBannerCard = ({ children, variant = 'info', emphasized, ...props }: CardProps): JSX.Element => {
47+
const BannerIcon = ICON_VARIANTS[variant];
48+
49+
return (
50+
<RoundedBox variant={variant} emphasized={emphasized} role={ROLE_VARIANTS[variant]} {...props}>
51+
<IconBox mr={1} variant={variant} emphasized={emphasized}>
52+
<BannerIcon size={20} color="inherit" />
53+
</IconBox>
54+
<Box display="flex" flexDirection="column">
55+
{children}
56+
</Box>
57+
</RoundedBox>
58+
);
59+
};
60+
61+
InfoBannerCard.Title = Title;
62+
InfoBannerCard.Description = Description;
63+
InfoBannerCard.Link = Link;
64+
65+
export { InfoBannerCard };

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

+39-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Meta, ArgTypes, Primary, Stories } from '@storybook/blocks';
1+
import { Meta, ArgTypes, Primary, Stories, Unstyled } from '@storybook/blocks';
22
import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
3+
import { InfoBannerCard } from '../blocks/InfoBannerCard';
34
import * as InfoBannerStories from './InfoBanner.stories';
45

56
<Meta of={InfoBannerStories} />
@@ -19,3 +20,40 @@ The InfoBanner is used to communicate a vibrant message, state change or importa
1920
/>
2021

2122
<Stories includePrimary={false} />
23+
24+
## Compound components approach
25+
26+
You may also use the compound components approach to build up your InfoBanner (e.g. when you need multiple links in a single banner as below)
27+
28+
Available compound components:
29+
30+
- **InfoBannerCard** (Wrapper)
31+
- **InfoBannerCard.Title**
32+
- **InfoBannerCard.Description**
33+
- **InfoBannerCard.Link**
34+
35+
The wrapper component (**InfoBannerCard**) accepts the same props as the **InfoBanner** component, if variant is applied, it's styling will get automatically applied to children compound components.
36+
37+
<Unstyled>
38+
<InfoBannerCard variant="warning">
39+
<InfoBannerCard.Title>Issue with documents</InfoBannerCard.Title>
40+
<InfoBannerCard.Description>
41+
Your uploaded documents don't match the records. Please check the following sources:
42+
</InfoBannerCard.Description>
43+
<InfoBannerCard.Link linkText="Driver documents" linkUrl="https://wave.free-now.com" />
44+
<InfoBannerCard.Link linkText="Vehicle documents" linkUrl="https://wave.free-now.com" />
45+
<InfoBannerCard.Link linkText="Driver Profile" linkUrl="https://wave.free-now.com" />
46+
</InfoBannerCard>
47+
</Unstyled>
48+
49+
```tsx
50+
<InfoBannerCard variant="warning">
51+
<InfoBannerCard.Title>Issue with documents</InfoBannerCard.Title>
52+
<InfoBannerCard.Description>
53+
Your uploaded documents don't match the records. Please check the following sources:
54+
</InfoBannerCard.Description>
55+
<InfoBannerCard.Link linkText="Driver documents" linkUrl="https://wave.free-now.com" />
56+
<InfoBannerCard.Link linkText="Vehicle documents" linkUrl="https://wave.free-now.com" />
57+
<InfoBannerCard.Link linkText="Driver Profile" linkUrl="https://wave.free-now.com" />
58+
</InfoBannerCard>
59+
```

‎src/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,4 @@ export { SelectListProps } from './SelectList/types';
5555
export { Row, RowProps, Column, ColumnProps } from './Grid/Grid';
5656
export { Popover, PopoverProps } from './Popover/Popover';
5757
export { InfoBanner, InfoBannerProps, InfoBannerVariants } from './InfoBanner/InfoBanner';
58+
export { InfoBannerCard } from './InfoBanner/blocks/InfoBannerCard';

0 commit comments

Comments
 (0)