Skip to content

Commit 875b153

Browse files
geotrevgeotrev
authored
feat(notifications): adds subcomponent mapping (#1748)
1 parent e4bd245 commit 875b153

File tree

14 files changed

+131
-71
lines changed

14 files changed

+131
-71
lines changed

‎docs/migration.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,11 @@ consider additional positioning prop support on a case-by-case basis.
125125
- The following types have changed:
126126
- removed `ToastPlacement`. Use `IToastOptions['placement']` instead.
127127
- removed `ToastContent`. Use `IToast['content']` instead.
128+
- Subcomponent exports have been deprecated and will be removed in a future major version. Update
129+
to subcomponent properties:
130+
- `Close` -> `Alert.Close`, `Notification.Close`
131+
- `Paragraph` -> `Alert.Paragraph`, `Notification.Paragraph`, `Well.Paragraph`
132+
- `Title` -> `Alert.Title`, `Notification.Title`, `Well.Title`
128133

129134
#### @zendeskgarden/react-pagination
130135

‎packages/notifications/README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,18 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
1414

1515
## Usage
1616

17+
## Notifications
18+
1719
```jsx
1820
import { ThemeProvider } from '@zendeskgarden/react-theming';
19-
import { Notification, Title } from '@zendeskgarden/react-notifications';
21+
import { Notification } from '@zendeskgarden/react-notifications';
2022

2123
/**
2224
* Place a `ThemeProvider` at the root of your React application
2325
*/
2426
<ThemeProvider>
2527
<Notification>
26-
<Title>Example Title</Title>
28+
<Notification.Title>Example Title</Notification.Title>
2729
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
2830
</Notification>
2931
</ThemeProvider>;
@@ -34,7 +36,7 @@ import { Notification, Title } from '@zendeskgarden/react-notifications';
3436
```jsx
3537
import { ThemeProvider } from '@zendeskgarden/react-theming';
3638
import { Button } from '@zendeskgarden/react-buttons';
37-
import { Notification, Close, ToastProvider, useToast } from '@zendeskgarden/react-notifications';
39+
import { Notification, ToastProvider, useToast } from '@zendeskgarden/react-notifications';
3840

3941
const ToastExample = () => {
4042
const { addToast } = useToast();
@@ -45,7 +47,7 @@ const ToastExample = () => {
4547
addToast(({ close }) => (
4648
<Notification>
4749
Example notification
48-
<Close onClick={close} aria-label="Close" />
50+
<Notification.Close onClick={close} aria-label="Close" />
4951
</Notification>
5052
))
5153
}

‎packages/notifications/demo/alert.stories.mdx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
2-
import { Alert, Close, Paragraph, Title } from '@zendeskgarden/react-notifications';
2+
import { Alert } from '@zendeskgarden/react-notifications';
33
import { AlertStory } from './stories/AlertStory';
44
import README from '../README.md';
55

66
<Meta
77
title="Packages/Notifications/Alert"
88
component={Alert}
9-
subcomponents={{ Close, Paragraph, Title }}
9+
subcomponents={{
10+
'Alert.Close': Alert.Close,
11+
'Alert.Paragraph': Alert.Paragraph,
12+
'Alert.Title': Alert.Title
13+
}}
1014
/>
1115

1216
# API
@@ -27,11 +31,11 @@ import README from '../README.md';
2731
'aria-label': 'Close'
2832
}}
2933
argTypes={{
30-
title: { name: 'children', table: { category: 'Title' } },
31-
isRegular: { control: { type: 'boolean' }, table: { category: 'Title' } },
32-
hasClose: { name: 'Close', table: { category: 'Story' } },
33-
hasParagraph: { name: 'Paragraph', table: { category: 'Story' } },
34-
'aria-label': { table: { category: 'Close' } }
34+
title: { name: 'children', table: { category: 'Alert.Title' } },
35+
isRegular: { control: { type: 'boolean' }, table: { category: 'Alert.Title' } },
36+
hasClose: { name: 'Alert.Close', table: { category: 'Story' } },
37+
hasParagraph: { name: 'Alert.Paragraph', table: { category: 'Story' } },
38+
'aria-label': { table: { category: 'Alert.Close' } }
3539
}}
3640
parameters={{
3741
design: {

‎packages/notifications/demo/notification.stories.mdx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
2-
import { Notification, Close, Paragraph, Title } from '@zendeskgarden/react-notifications';
2+
import { Notification } from '@zendeskgarden/react-notifications';
33
import { NotificationStory } from './stories/NotificationStory';
44
import README from '../README.md';
55

66
<Meta
77
title="Packages/Notifications/Notification"
88
component={Notification}
9-
subcomponents={{ Close, Paragraph, Title }}
9+
subcomponents={{
10+
'Notification.Close': Notification.Close,
11+
'Notification.Paragraph': Notification.Paragraph,
12+
'Notification.Title': Notification.Title
13+
}}
1014
/>
1115

1216
# API
@@ -26,11 +30,11 @@ import README from '../README.md';
2630
'aria-label': 'Close'
2731
}}
2832
argTypes={{
29-
title: { name: 'children', table: { category: 'Title' } },
30-
isRegular: { control: { type: 'boolean' }, table: { category: 'Title' } },
31-
hasClose: { name: 'Close', table: { category: 'Story' } },
32-
hasParagraph: { name: 'Paragraph', table: { category: 'Story' } },
33-
'aria-label': { table: { category: 'Close' } }
33+
title: { name: 'children', table: { category: 'Notification.Title' } },
34+
isRegular: { control: { type: 'boolean' }, table: { category: 'Notification.Title' } },
35+
hasClose: { name: 'Notification.Close', table: { category: 'Story' } },
36+
hasParagraph: { name: 'Notification.Paragraph', table: { category: 'Story' } },
37+
'aria-label': { table: { category: 'Notification.Close' } }
3438
}}
3539
parameters={{
3640
design: {

‎packages/notifications/demo/stories/AlertStory.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { Story } from '@storybook/react';
10-
import { Alert, Close, IAlertProps, Paragraph, Title } from '@zendeskgarden/react-notifications';
10+
import { Alert, IAlertProps } from '@zendeskgarden/react-notifications';
1111

1212
interface IArgs extends IAlertProps {
1313
title?: string;
@@ -26,8 +26,8 @@ export const AlertStory: Story<IArgs> = ({
2626
...args
2727
}) => (
2828
<Alert {...args}>
29-
{title && <Title isRegular={isRegular}>{title}</Title>}
30-
{hasParagraph ? <Paragraph>{children}</Paragraph> : children}
31-
{hasClose && <Close aria-label={ariaLabel} />}
29+
{title && <Alert.Title isRegular={isRegular}>{title}</Alert.Title>}
30+
{hasParagraph ? <Alert.Paragraph>{children}</Alert.Paragraph> : children}
31+
{hasClose && <Alert.Close aria-label={ariaLabel} />}
3232
</Alert>
3333
);

‎packages/notifications/demo/stories/NotificationStory.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,7 @@
77

88
import React from 'react';
99
import { Story } from '@storybook/react';
10-
import {
11-
Notification,
12-
Close,
13-
INotificationProps,
14-
Title,
15-
Paragraph
16-
} from '@zendeskgarden/react-notifications';
10+
import { Notification, INotificationProps } from '@zendeskgarden/react-notifications';
1711

1812
interface IArgs extends INotificationProps {
1913
title?: string;
@@ -32,8 +26,8 @@ export const NotificationStory: Story<IArgs> = ({
3226
...args
3327
}) => (
3428
<Notification {...args}>
35-
{title && <Title isRegular={isRegular}>{title}</Title>}
36-
{hasParagraph ? <Paragraph>{children}</Paragraph> : children}
37-
{hasClose && <Close aria-label={ariaLabel} />}
29+
{title && <Notification.Title isRegular={isRegular}>{title}</Notification.Title>}
30+
{hasParagraph ? <Notification.Paragraph>{children}</Notification.Paragraph> : children}
31+
{hasClose && <Notification.Close aria-label={ariaLabel} />}
3832
</Notification>
3933
);

‎packages/notifications/demo/stories/WellStory.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { Story } from '@storybook/react';
10-
import { Well, IWellProps, Paragraph, Title } from '@zendeskgarden/react-notifications';
10+
import { Well, IWellProps } from '@zendeskgarden/react-notifications';
1111

1212
interface IArgs extends IWellProps {
1313
title?: string;
@@ -17,7 +17,7 @@ interface IArgs extends IWellProps {
1717

1818
export const WellStory: Story<IArgs> = ({ children, title, hasParagraph, isRegular, ...args }) => (
1919
<Well {...args}>
20-
{title && <Title isRegular={isRegular}>{title}</Title>}
21-
{hasParagraph ? <Paragraph>{children}</Paragraph> : children}
20+
{title && <Well.Title isRegular={isRegular}>{title}</Well.Title>}
21+
{hasParagraph ? <Well.Paragraph>{children}</Well.Paragraph> : children}
2222
</Well>
2323
);

‎packages/notifications/demo/well.stories.mdx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
2-
import { Well, Close, Paragraph, Title } from '@zendeskgarden/react-notifications';
2+
import { Well } from '@zendeskgarden/react-notifications';
33
import { WellStory } from './stories/WellStory';
44
import README from '../README.md';
55

6-
<Meta title="Packages/Notifications/Well" component={Well} subcomponents={{ Paragraph, Title }} />
6+
<Meta
7+
title="Packages/Notifications/Well"
8+
component={Well}
9+
subcomponents={{
10+
'Well.Paragraph': Well.Paragraph,
11+
'Well.Title': Well.Title
12+
}}
13+
/>
714

815
# API
916

@@ -16,9 +23,9 @@ import README from '../README.md';
1623
name="Well"
1724
args={{ children: 'Text', title: 'Title', hasParagraph: false }}
1825
argTypes={{
19-
title: { name: 'children', table: { category: 'Title' } },
20-
isRegular: { control: { type: 'boolean' }, table: { category: 'Title' } },
21-
hasParagraph: { name: 'Paragraph', table: { category: 'Story' } }
26+
title: { name: 'children', table: { category: 'Well.Title' } },
27+
isRegular: { control: { type: 'boolean' }, table: { category: 'Well.Title' } },
28+
hasParagraph: { name: 'Well.Paragraph', table: { category: 'Story' } }
2229
}}
2330
parameters={{
2431
design: {

‎packages/notifications/src/elements/Alert.tsx‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,43 @@ import { IAlertProps, TYPE } from '../types';
1111
import { StyledAlert, StyledIcon } from '../styled';
1212
import { validationIcons, validationHues } from '../utils/icons';
1313
import { Hue, NotificationsContext } from '../utils/useNotificationsContext';
14+
import { Title } from './content/Title';
15+
import { Paragraph } from './content/Paragraph';
16+
import { Close } from './content/Close';
1417

15-
/**
16-
* @extends HTMLAttributes<HTMLDivElement>
17-
*/
18-
export const Alert = React.forwardRef<HTMLDivElement, IAlertProps>(({ role, ...props }, ref) => {
19-
const hue = validationHues[props.type];
20-
const Icon = validationIcons[props.type] as any;
18+
export const AlertComponent = React.forwardRef<HTMLDivElement, IAlertProps>(
19+
({ role, ...props }, ref) => {
20+
const hue = validationHues[props.type];
21+
const Icon = validationIcons[props.type] as any;
2122

22-
return (
23-
<NotificationsContext.Provider value={hue as Hue}>
24-
<StyledAlert ref={ref} hue={hue} role={role === undefined ? 'alert' : role} {...props}>
25-
<StyledIcon hue={hue}>
26-
<Icon />
27-
</StyledIcon>
28-
{props.children}
29-
</StyledAlert>
30-
</NotificationsContext.Provider>
31-
);
32-
});
23+
return (
24+
<NotificationsContext.Provider value={hue as Hue}>
25+
<StyledAlert ref={ref} hue={hue} role={role === undefined ? 'alert' : role} {...props}>
26+
<StyledIcon hue={hue}>
27+
<Icon />
28+
</StyledIcon>
29+
{props.children}
30+
</StyledAlert>
31+
</NotificationsContext.Provider>
32+
);
33+
}
34+
);
3335

34-
Alert.displayName = 'Alert';
36+
AlertComponent.displayName = 'Alert';
3537

36-
Alert.propTypes = {
38+
AlertComponent.propTypes = {
3739
type: PropTypes.oneOf(TYPE).isRequired
3840
};
41+
42+
/**
43+
* @extends HTMLAttributes<HTMLDivElement>
44+
*/
45+
export const Alert = AlertComponent as typeof AlertComponent & {
46+
Close: typeof Close;
47+
Paragraph: typeof Paragraph;
48+
Title: typeof Title;
49+
};
50+
51+
Alert.Close = Close;
52+
Alert.Paragraph = Paragraph;
53+
Alert.Title = Title;

‎packages/notifications/src/elements/Notification.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ import InfoStrokeIcon from '@zendeskgarden/svg-icons/src/16/info-stroke.svg';
1111
import { INotificationProps, TYPE } from '../types';
1212
import { StyledNotification, StyledIcon } from '../styled';
1313
import { validationIcons, validationHues } from '../utils/icons';
14+
import { Title } from './content/Title';
15+
import { Paragraph } from './content/Paragraph';
16+
import { Close } from './content/Close';
1417

15-
/**
16-
* @extends HTMLAttributes<HTMLDivElement>
17-
*/
18-
export const Notification = forwardRef<HTMLDivElement, INotificationProps>(
18+
export const NotificationComponent = forwardRef<HTMLDivElement, INotificationProps>(
1919
({ role, ...props }, ref) => {
2020
const Icon = props.type ? validationIcons[props.type] : InfoStrokeIcon;
2121
const hue = props.type && validationHues[props.type];
@@ -40,8 +40,21 @@ export const Notification = forwardRef<HTMLDivElement, INotificationProps>(
4040
}
4141
);
4242

43-
Notification.displayName = 'Notification';
43+
NotificationComponent.displayName = 'Notification';
4444

45-
Notification.propTypes = {
45+
NotificationComponent.propTypes = {
4646
type: PropTypes.oneOf(TYPE)
4747
};
48+
49+
/**
50+
* @extends HTMLAttributes<HTMLDivElement>
51+
*/
52+
export const Notification = NotificationComponent as typeof NotificationComponent & {
53+
Close: typeof Close;
54+
Paragraph: typeof Paragraph;
55+
Title: typeof Title;
56+
};
57+
58+
Notification.Close = Close;
59+
Notification.Paragraph = Paragraph;
60+
Notification.Title = Title;

0 commit comments

Comments
 (0)