Skip to content

Commit df6bf42

Browse files
geotrevgeotrev
authored
feat(chrome): adds sub-component mapping (#1736)
1 parent 0061baa commit df6bf42

File tree

11 files changed

+193
-143
lines changed

11 files changed

+193
-143
lines changed

‎docs/migration.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,20 @@ consider additional positioning prop support on a case-by-case basis.
4444
#### @zendeskgarden/react-chrome
4545

4646
- Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
47+
- Renamed `ICollapsibleSubNavItemProps` type export to `ISubNavCollapsibleItemProps`.
48+
- Subcomponent exports have been deprecated and will be removed in a future major version. Update
49+
to subcomponent properties:
50+
- `FooterItem` -> `Footer.Item`
51+
- `HeaderItem` -> `Header.Item`
52+
- `HeaderItemIcon` -> `Header.ItemIcon`
53+
- `HeaderItemText` -> `Header.ItemText`
54+
- `HeaderItemWrapper` -> `Header.ItemWrapper`
55+
- `NavItem` -> `Nav.Item`
56+
- `NavItemIcon` -> `Nav.ItemIcon`
57+
- `NavItemText` -> `Nav.ItemText`
58+
- `CollapsibleSubNavItem` -> `SubNav.CollapsibleItem`
59+
- `SubNavItem` -> `SubNav.Item`
60+
- `SubNavItemText` -> `SubNav.ItemText`
4761

4862
#### @zendeskgarden/react-colorpickers
4963

‎packages/chrome/README.md‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,41 +15,37 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
1515

1616
```jsx
1717
import { ThemeProvider } from '@zendeskgarden/react-theming';
18-
import { Chrome, Nav, NavItem, ... } from '@zendeskgarden/react-chrome';
18+
import { Chrome, Nav, SubNav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
1919
import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';
2020

2121
<ThemeProvider>
2222
<Chrome>
2323
<Nav isExpanded>
24-
<NavItem hasLogo product="connect" title="Zendesk Connect">
25-
<NavItemIcon>
24+
<Nav.Item hasLogo product="connect" title="Zendesk Connect">
25+
<Nav.ItemIcon>
2626
<ConnectIcon />
27-
</NavItemIcon>
27+
</Nav.ItemIcon>
2828
<NavItemText>Zendesk Connect</NavItemText>
29-
</NavItem>
30-
<NavItem isCurrent>
31-
<NavItemIcon>
29+
</Nav.Item>
30+
<Nav.Item isCurrent>
31+
<Nav.ItemIcon>
3232
<HomeIcon />
33-
</NavItemIcon>
33+
</Nav.ItemIcon>
3434
<NavItemText>Home</NavItemText>
35-
</NavItem>
35+
</Nav.Item>
3636
</Nav>
3737
<SubNav>
38-
<SubNavItem isCurrent>
39-
<SubNavItemText>Subnav 1</SubNavItemText>
40-
</SubNavItem>
38+
<SubNav.Item isCurrent>
39+
<SubNav.ItemText>Subnav 1</SubNav.ItemText>
40+
</SubNav.Item>
4141
...
4242
</SubNav>
4343
<Body>
44-
<Header>
45-
...
46-
</Header>
44+
<Header>...</Header>
4745
<Content>
48-
<Main>
49-
Lorem ipsum...
50-
</Main>
46+
<Main>Lorem ipsum...</Main>
5147
</Content>
5248
</Body>
5349
</Chrome>
54-
</ThemeProvider>
50+
</ThemeProvider>;
5551
```

‎packages/chrome/demo/chrome.stories.mdx‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,17 @@
11
import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
22
import { useArgs } from '@storybook/client-api';
33
import {
4-
Chrome,
5-
CollapsibleSubNavItem,
64
Body,
5+
Chrome,
76
Content,
87
Footer,
9-
FooterItem,
108
Header,
11-
HeaderItem,
12-
HeaderItemIcon,
13-
HeaderItemText,
14-
HeaderItemWrapper,
159
Main,
1610
Nav,
17-
NavItem,
18-
NavItemIcon,
19-
NavItemText,
2011
Sheet,
2112
Sidebar,
2213
SkipNav,
2314
SubNav,
24-
SubNavItem,
25-
SubNavItemText,
2615
PRODUCTS
2716
} from '@zendeskgarden/react-chrome';
2817
import { ChromeStory } from './stories/ChromeStory';
@@ -44,27 +33,27 @@ import README from '../README.md';
4433
title="Packages/Chrome/Chrome"
4534
component={Chrome}
4635
subcomponents={{
47-
CollapsibleSubNavItem,
4836
Body,
4937
Content,
5038
Footer,
51-
FooterItem,
39+
'Footer.Item': Footer.Item,
5240
Header,
53-
HeaderItem,
54-
HeaderItemIcon,
55-
HeaderItemText,
56-
HeaderItemWrapper,
41+
'Item.HeaderItem': Header.Item,
42+
'Item.HeaderItemIcon': Header.ItemIcon,
43+
'Item.HeaderItemText': Header.ItemText,
44+
'Item.HeaderItemWrapper': Header.ItemWrapper,
5745
Main,
5846
Nav,
59-
NavItem,
60-
NavItemIcon,
61-
NavItemText,
47+
'Nav.Item': Nav.Item,
48+
'Nav.ItemIcon': Nav.ItemIcon,
49+
'Nav.ItemText': Nav.ItemText,
6250
Sheet,
6351
Sidebar,
6452
SkipNav,
6553
SubNav,
66-
SubNavItem,
67-
SubNavItemText
54+
'SubNav.CollapsibleItem': SubNav.CollapsibleItem,
55+
'SubNav.Item': SubNav.Item,
56+
'SubNav.ItemText': SubNav.ItemText
6857
}}
6958
/>
7059

@@ -108,17 +97,17 @@ import README from '../README.md';
10897
isExpanded: { name: 'Nav isExpanded', table: { category: 'Story' } },
10998
isWrapped: { name: 'Nav/SubNav isWrapped', table: { category: 'Story' } },
11099
hasNav: { name: 'Nav', table: { category: 'Story' } },
111-
navItems: { name: 'NavItem[]', table: { category: 'Story' } },
100+
navItems: { name: 'Nav.Item[]', table: { category: 'Story' } },
112101
hasLogo: { name: 'Nav hasLogo', table: { category: 'Story' } },
113102
hasBrandmark: { name: 'Nav hasBrandmark', table: { category: 'Story' } },
114103
hasSubNav: { name: 'SubNav', table: { category: 'Story' } },
115-
subNavItems: { name: 'SubNavItem[]', table: { category: 'Story' } },
104+
subNavItems: { name: 'SubNav.Item[]', table: { category: 'Story' } },
116105
subNavMaxWidth: { name: 'SubNav max-width', control: 'number', table: { category: 'Story' } },
117106
hasHeader: { name: 'Header', table: { category: 'Story' } },
118-
headerItems: { name: 'HeaderItem[]', table: { category: 'Story' } },
107+
headerItems: { name: 'Header.Item[]', table: { category: 'Story' } },
119108
hasSidebar: { name: 'Sidebar', table: { category: 'Story' } },
120109
hasFooter: { name: 'Footer', table: { category: 'Story' } },
121-
footerItems: { name: 'FooterItem[]', table: { category: 'Story' } },
110+
footerItems: { name: 'Footer.Item[]', table: { category: 'Story' } },
122111
product: {
123112
name: 'Nav product',
124113
control: { type: 'select', options: PRODUCTS },

‎packages/chrome/demo/stories/ChromeStory.tsx‎

Lines changed: 39 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,16 @@ import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
3232
import {
3333
Body,
3434
Chrome,
35-
CollapsibleSubNavItem,
3635
Content,
3736
Footer,
38-
FooterItem,
3937
Header,
40-
HeaderItem,
41-
HeaderItemIcon,
42-
HeaderItemText,
43-
HeaderItemWrapper,
4438
IChromeProps,
4539
INavItemProps,
4640
Main,
4741
Nav,
48-
NavItem,
49-
NavItemIcon,
50-
NavItemText,
5142
Sidebar,
5243
SkipNav,
53-
SubNav,
54-
SubNavItem,
55-
SubNavItemText
44+
SubNav
5645
} from '@zendeskgarden/react-chrome';
5746
import { Button } from '@zendeskgarden/react-buttons';
5847
import { IFooterItem, IHeaderItem, INavItem, ISubNavItem } from './types';
@@ -150,13 +139,13 @@ export const ChromeStory: Story<IArgs> = ({
150139
{hasNav && (
151140
<Nav isExpanded={isExpanded} aria-label="Nav">
152141
{hasLogo && (
153-
<NavItem hasLogo product={product}>
154-
<NavItemIcon>{product ? PRODUCT_ICONS[product] : <ProductIcon />}</NavItemIcon>
155-
<NavItemText>Nav Logo</NavItemText>
156-
</NavItem>
142+
<Nav.Item hasLogo product={product}>
143+
<Nav.ItemIcon>{product ? PRODUCT_ICONS[product] : <ProductIcon />}</Nav.ItemIcon>
144+
<Nav.ItemText>Nav Logo</Nav.ItemText>
145+
</Nav.Item>
157146
)}
158147
{navItems.map((item, index) => (
159-
<NavItem
148+
<Nav.Item
160149
key={index}
161150
isCurrent={currentNav === index}
162151
onClick={() => {
@@ -165,43 +154,43 @@ export const ChromeStory: Story<IArgs> = ({
165154
onNavClick({ hasSubNav: item.hasSubNav, hasSidebar: item.hasSidebar });
166155
}}
167156
>
168-
<NavItemIcon>{NAV_ICONS[index] || <NavIcon />}</NavItemIcon>
169-
<NavItemText isWrapped={isWrapped}>{item.text}</NavItemText>
170-
</NavItem>
157+
<Nav.ItemIcon>{NAV_ICONS[index] || <NavIcon />}</Nav.ItemIcon>
158+
<Nav.ItemText isWrapped={isWrapped}>{item.text}</Nav.ItemText>
159+
</Nav.Item>
171160
))}
172161
{hasBrandmark && (
173-
<NavItem hasBrandmark>
174-
<NavItemIcon>
162+
<Nav.Item hasBrandmark>
163+
<Nav.ItemIcon>
175164
<BrandmarkIcon />
176-
</NavItemIcon>
177-
<NavItemText>Brandmark</NavItemText>
178-
</NavItem>
165+
</Nav.ItemIcon>
166+
<Nav.ItemText>Brandmark</Nav.ItemText>
167+
</Nav.Item>
179168
)}
180169
</Nav>
181170
)}
182171
{hasSubNav && (
183172
<SubNav style={{ maxWidth: subNavMaxWidth }}>
184173
{subNavItems.map((item, index) =>
185174
item.items ? (
186-
<CollapsibleSubNavItem key={index} header={item.text}>
175+
<SubNav.CollapsibleItem key={index} header={item.text}>
187176
{item.items.map((subItem, subIndex) => (
188-
<SubNavItem
177+
<SubNav.Item
189178
key={subIndex}
190179
isCurrent={currentSubNav === parseFloat(`${index}.${subIndex}`)}
191180
onClick={() => setCurrentSubNav(parseFloat(`${index}.${subIndex}`))}
192181
>
193-
<SubNavItemText isWrapped={isWrapped}>{subItem}</SubNavItemText>
194-
</SubNavItem>
182+
<SubNav.ItemText isWrapped={isWrapped}>{subItem}</SubNav.ItemText>
183+
</SubNav.Item>
195184
))}
196-
</CollapsibleSubNavItem>
185+
</SubNav.CollapsibleItem>
197186
) : (
198-
<SubNavItem
187+
<SubNav.Item
199188
key={index}
200189
isCurrent={currentSubNav === index}
201190
onClick={() => setCurrentSubNav(index)}
202191
>
203-
<SubNavItemText isWrapped={isWrapped}>{item.text}</SubNavItemText>
204-
</SubNavItem>
192+
<SubNav.ItemText isWrapped={isWrapped}>{item.text}</SubNav.ItemText>
193+
</SubNav.Item>
205194
)
206195
)}
207196
</SubNav>
@@ -210,41 +199,41 @@ export const ChromeStory: Story<IArgs> = ({
210199
{hasHeader && (
211200
<Header isStandalone={!(hasNav || hasSubNav)}>
212201
{hasLogo && (
213-
<HeaderItem hasLogo product={product}>
214-
<HeaderItemIcon>
202+
<Header.Item hasLogo product={product}>
203+
<Header.ItemIcon>
215204
<SupportIcon />
216-
</HeaderItemIcon>
217-
<HeaderItemText>Header Logo</HeaderItemText>
218-
</HeaderItem>
205+
</Header.ItemIcon>
206+
<Header.ItemText>Header Logo</Header.ItemText>
207+
</Header.Item>
219208
)}
220209
{headerItems.map((item, index) =>
221210
item.isWrapper ? (
222-
<HeaderItemWrapper
211+
<Header.ItemWrapper
223212
key={index}
224213
maxX={item.maxX}
225214
maxY={item.maxY}
226215
isRound={item.isRound}
227216
>
228217
{item.hasIcon && (
229-
<HeaderItemIcon>
218+
<Header.ItemIcon>
230219
{HEADER_ICONS[HEADER_ICONS.length - headerItems.length + index] || (
231220
<HeaderIcon />
232221
)}
233-
</HeaderItemIcon>
222+
</Header.ItemIcon>
234223
)}
235-
<HeaderItemText isClipped={item.isClipped}>{item.text}</HeaderItemText>
236-
</HeaderItemWrapper>
224+
<Header.ItemText isClipped={item.isClipped}>{item.text}</Header.ItemText>
225+
</Header.ItemWrapper>
237226
) : (
238-
<HeaderItem key={index} maxX={item.maxX} maxY={item.maxY} isRound={item.isRound}>
227+
<Header.Item key={index} maxX={item.maxX} maxY={item.maxY} isRound={item.isRound}>
239228
{item.hasIcon && (
240-
<HeaderItemIcon>
229+
<Header.ItemIcon>
241230
{HEADER_ICONS[HEADER_ICONS.length - headerItems.length + index] || (
242231
<HeaderIcon />
243232
)}
244-
</HeaderItemIcon>
233+
</Header.ItemIcon>
245234
)}
246-
<HeaderItemText isClipped={item.isClipped}>{item.text}</HeaderItemText>
247-
</HeaderItem>
235+
<Header.ItemText isClipped={item.isClipped}>{item.text}</Header.ItemText>
236+
</Header.Item>
248237
)
249238
)}
250239
</Header>
@@ -271,11 +260,11 @@ export const ChromeStory: Story<IArgs> = ({
271260
<Footer>
272261
{footerItems &&
273262
footerItems.map(({ text, type }, index) => (
274-
<FooterItem key={index}>
263+
<Footer.Item key={index}>
275264
<Button isBasic={type === 'basic'} isPrimary={type === 'primary'}>
276265
{text}
277266
</Button>
278-
</FooterItem>
267+
</Footer.Item>
279268
))}
280269
</Footer>
281270
)}

‎packages/chrome/demo/stories/CollapsibleSubNavItemStory.tsx‎ renamed to ‎packages/chrome/demo/stories/SubNavCollapsibleItem.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,33 @@
66
*/
77

88
import React, { useState } from 'react';
9-
import { Story } from '@storybook/react';
9+
import { StoryFn } from '@storybook/react';
1010
import { Col, Grid, Row } from '@zendeskgarden/react-grid';
11-
import {
12-
CollapsibleSubNavItem,
13-
ICollapsibleSubNavItemProps,
14-
SubNavItem
15-
} from '@zendeskgarden/react-chrome';
11+
import { SubNav, ICollapsibleSubNavItemProps } from '@zendeskgarden/react-chrome';
1612
import { COLLAPSIBLE_SUB_NAV_ITEM } from './types';
1713

1814
interface IArgs extends ICollapsibleSubNavItemProps {
1915
items: COLLAPSIBLE_SUB_NAV_ITEM[];
2016
}
2117

22-
export const CollapsibleSubNavItemStory: Story<IArgs> = ({ items, ...args }) => {
18+
export const SubNavCollapsibleItem: StoryFn<IArgs> = ({ items, ...args }) => {
2319
const [current, setCurrent] = useState<number | undefined>();
2420

2521
return (
2622
<Grid>
2723
<Row>
2824
<Col sm={6}>
29-
<CollapsibleSubNavItem {...args}>
25+
<SubNav.CollapsibleItem {...args}>
3026
{items.map((item, index) => (
31-
<SubNavItem
27+
<SubNav.Item
3228
key={index}
3329
isCurrent={current === index}
3430
onClick={() => setCurrent(index)}
3531
>
3632
{item}
37-
</SubNavItem>
33+
</SubNav.Item>
3834
))}
39-
</CollapsibleSubNavItem>
35+
</SubNav.CollapsibleItem>
4036
</Col>
4137
</Row>
4238
</Grid>

0 commit comments

Comments
 (0)