feat(chrome): adds sub-component mapping

geotrev · geotrev · commit 5e39f90c9ce1 · 2024-03-05T15:00:03.000-06:00
diff --git a/packages/chrome/demo/stories/ChromeStory.tsx b/packages/chrome/demo/stories/ChromeStory.tsx
@@ -32,27 +32,16 @@ import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import {
   Body,
   Chrome,
-  CollapsibleSubNavItem,
   Content,
   Footer,
-  FooterItem,
   Header,
-  HeaderItem,
-  HeaderItemIcon,
-  HeaderItemText,
-  HeaderItemWrapper,
   IChromeProps,
   INavItemProps,
   Main,
   Nav,
-  NavItem,
-  NavItemIcon,
-  NavItemText,
   Sidebar,
   SkipNav,
-  SubNav,
-  SubNavItem,
-  SubNavItemText
+  SubNav
 } from '@zendeskgarden/react-chrome';
 import { Button } from '@zendeskgarden/react-buttons';
 import { IFooterItem, IHeaderItem, INavItem, ISubNavItem } from './types';
@@ -150,13 +139,13 @@ export const ChromeStory: Story<IArgs> = ({
       {hasNav && (
         <Nav isExpanded={isExpanded} aria-label="Nav">
           {hasLogo && (
-            <NavItem hasLogo product={product}>
-              <NavItemIcon>{product ? PRODUCT_ICONS[product] : <ProductIcon />}</NavItemIcon>
-              <NavItemText>Nav Logo</NavItemText>
-            </NavItem>
+            <Nav.Item hasLogo product={product}>
+              <Nav.ItemIcon>{product ? PRODUCT_ICONS[product] : <ProductIcon />}</Nav.ItemIcon>
+              <Nav.ItemText>Nav Logo</Nav.ItemText>
+            </Nav.Item>
           )}
           {navItems.map((item, index) => (
-            <NavItem
+            <Nav.Item
               key={index}
               isCurrent={currentNav === index}
               onClick={() => {
@@ -165,43 +154,43 @@ export const ChromeStory: Story<IArgs> = ({
                 onNavClick({ hasSubNav: item.hasSubNav, hasSidebar: item.hasSidebar });
               }}
             >
-              <NavItemIcon>{NAV_ICONS[index] || <NavIcon />}</NavItemIcon>
-              <NavItemText isWrapped={isWrapped}>{item.text}</NavItemText>
-            </NavItem>
+              <Nav.ItemIcon>{NAV_ICONS[index] || <NavIcon />}</Nav.ItemIcon>
+              <Nav.ItemText isWrapped={isWrapped}>{item.text}</Nav.ItemText>
+            </Nav.Item>
           ))}
           {hasBrandmark && (
-            <NavItem hasBrandmark>
-              <NavItemIcon>
+            <Nav.Item hasBrandmark>
+              <Nav.ItemIcon>
                 <BrandmarkIcon />
-              </NavItemIcon>
-              <NavItemText>Brandmark</NavItemText>
-            </NavItem>
+              </Nav.ItemIcon>
+              <Nav.ItemText>Brandmark</Nav.ItemText>
+            </Nav.Item>
           )}
         </Nav>
       )}
       {hasSubNav && (
         <SubNav style={{ maxWidth: subNavMaxWidth }}>
           {subNavItems.map((item, index) =>
             item.items ? (
-              <CollapsibleSubNavItem key={index} header={item.text}>
+              <SubNav.CollapsibleItem key={index} header={item.text}>
                 {item.items.map((subItem, subIndex) => (
-                  <SubNavItem
+                  <SubNav.Item
                     key={subIndex}
                     isCurrent={currentSubNav === parseFloat(`${index}.${subIndex}`)}
                     onClick={() => setCurrentSubNav(parseFloat(`${index}.${subIndex}`))}
                   >
-                    <SubNavItemText isWrapped={isWrapped}>{subItem}</SubNavItemText>
-                  </SubNavItem>
+                    <SubNav.ItemText isWrapped={isWrapped}>{subItem}</SubNav.ItemText>
+                  </SubNav.Item>
                 ))}
-              </CollapsibleSubNavItem>
+              </SubNav.CollapsibleItem>
             ) : (
-              <SubNavItem
+              <SubNav.Item
                 key={index}
                 isCurrent={currentSubNav === index}
                 onClick={() => setCurrentSubNav(index)}
               >
-                <SubNavItemText isWrapped={isWrapped}>{item.text}</SubNavItemText>
-              </SubNavItem>
+                <SubNav.ItemText isWrapped={isWrapped}>{item.text}</SubNav.ItemText>
+              </SubNav.Item>
             )
           )}
         </SubNav>
@@ -210,41 +199,41 @@ export const ChromeStory: Story<IArgs> = ({
         {hasHeader && (
           <Header isStandalone={!(hasNav || hasSubNav)}>
             {hasLogo && (
-              <HeaderItem hasLogo product={product}>
-                <HeaderItemIcon>
+              <Header.Item hasLogo product={product}>
+                <Header.ItemIcon>
                   <SupportIcon />
-                </HeaderItemIcon>
-                <HeaderItemText>Header Logo</HeaderItemText>
-              </HeaderItem>
+                </Header.ItemIcon>
+                <Header.ItemText>Header Logo</Header.ItemText>
+              </Header.Item>
             )}
             {headerItems.map((item, index) =>
               item.isWrapper ? (
-                <HeaderItemWrapper
+                <Header.ItemWrapper
                   key={index}
                   maxX={item.maxX}
                   maxY={item.maxY}
                   isRound={item.isRound}
                 >
                   {item.hasIcon && (
-                    <HeaderItemIcon>
+                    <Header.ItemIcon>
                       {HEADER_ICONS[HEADER_ICONS.length - headerItems.length + index] || (
                         <HeaderIcon />
                       )}
-                    </HeaderItemIcon>
+                    </Header.ItemIcon>
                   )}
-                  <HeaderItemText isClipped={item.isClipped}>{item.text}</HeaderItemText>
-                </HeaderItemWrapper>
+                  <Header.ItemText isClipped={item.isClipped}>{item.text}</Header.ItemText>
+                </Header.ItemWrapper>
               ) : (
-                <HeaderItem key={index} maxX={item.maxX} maxY={item.maxY} isRound={item.isRound}>
+                <Header.Item key={index} maxX={item.maxX} maxY={item.maxY} isRound={item.isRound}>
                   {item.hasIcon && (
-                    <HeaderItemIcon>
+                    <Header.ItemIcon>
                       {HEADER_ICONS[HEADER_ICONS.length - headerItems.length + index] || (
                         <HeaderIcon />
                       )}
-                    </HeaderItemIcon>
+                    </Header.ItemIcon>
                   )}
-                  <HeaderItemText isClipped={item.isClipped}>{item.text}</HeaderItemText>
-                </HeaderItem>
+                  <Header.ItemText isClipped={item.isClipped}>{item.text}</Header.ItemText>
+                </Header.Item>
               )
             )}
           </Header>
@@ -271,11 +260,11 @@ export const ChromeStory: Story<IArgs> = ({
           <Footer>
             {footerItems &&
               footerItems.map(({ text, type }, index) => (
-                <FooterItem key={index}>
+                <Footer.Item key={index}>
                   <Button isBasic={type === 'basic'} isPrimary={type === 'primary'}>
                     {text}
                   </Button>
-                </FooterItem>
+                </Footer.Item>
               ))}
           </Footer>
         )}
diff --git a/packages/chrome/demo/stories/CollapsibleSubNavItemStory.tsx b/packages/chrome/demo/stories/CollapsibleSubNavItemStory.tsx
@@ -6,37 +6,33 @@
  */
 
 import React, { useState } from 'react';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import { Col, Grid, Row } from '@zendeskgarden/react-grid';
-import {
-  CollapsibleSubNavItem,
-  ICollapsibleSubNavItemProps,
-  SubNavItem
-} from '@zendeskgarden/react-chrome';
+import { SubNav, ICollapsibleSubNavItemProps } from '@zendeskgarden/react-chrome';
 import { COLLAPSIBLE_SUB_NAV_ITEM } from './types';
 
 interface IArgs extends ICollapsibleSubNavItemProps {
   items: COLLAPSIBLE_SUB_NAV_ITEM[];
 }
 
-export const CollapsibleSubNavItemStory: Story<IArgs> = ({ items, ...args }) => {
+export const CollapsibleSubNavItemStory: StoryFn<IArgs> = ({ items, ...args }) => {
   const [current, setCurrent] = useState<number | undefined>();
 
   return (
     <Grid>
       <Row>
         <Col sm={6}>
-          <CollapsibleSubNavItem {...args}>
+          <SubNav.CollapsibleItem {...args}>
             {items.map((item, index) => (
-              <SubNavItem
+              <SubNav.Item
                 key={index}
                 isCurrent={current === index}
                 onClick={() => setCurrent(index)}
               >
                 {item}
-              </SubNavItem>
+              </SubNav.Item>
             ))}
-          </CollapsibleSubNavItem>
+          </SubNav.CollapsibleItem>
         </Col>
       </Row>
     </Grid>
diff --git a/packages/chrome/src/elements/footer/Footer.tsx b/packages/chrome/src/elements/footer/Footer.tsx
@@ -7,12 +7,22 @@
 
 import React, { HTMLAttributes } from 'react';
 import { StyledFooter } from '../../styled';
+import { FooterItem } from './FooterItem';
 
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export const Footer = React.forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((props, ref) => (
-  <StyledFooter ref={ref} {...props} />
-));
+export const FooterComponent = React.forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
+  (props, ref) => <StyledFooter ref={ref} {...props} />
+);
 
-Footer.displayName = 'Footer';
+FooterComponent.displayName = 'Footer';
+
+/**
+ * @extends HTMLAttributes<HTMLElement>
+ */
+export const Footer = FooterComponent as typeof FooterComponent & {
+  Item: typeof FooterItem;
+};
+
+Footer.Item = FooterItem;
diff --git a/packages/chrome/src/elements/header/Header.tsx b/packages/chrome/src/elements/header/Header.tsx
@@ -9,16 +9,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { IHeaderProps } from '../../types';
 import { StyledHeader } from '../../styled';
+import { HeaderItem } from './HeaderItem';
+import { HeaderItemIcon } from './HeaderItemIcon';
+import { HeaderItemText } from './HeaderItemText';
+import { HeaderItemWrapper } from './HeaderItemWrapper';
 
-/**
- * @extends HTMLAttributes<HTMLElement>
- */
-export const Header = React.forwardRef<HTMLElement, IHeaderProps>((props, ref) => (
+export const HeaderComponent = React.forwardRef<HTMLElement, IHeaderProps>((props, ref) => (
   <StyledHeader ref={ref} {...props} />
 ));
 
-Header.displayName = 'Header';
+HeaderComponent.displayName = 'Header';
 
-Header.propTypes = {
+HeaderComponent.propTypes = {
   isStandalone: PropTypes.bool
 };
+
+/**
+ * @extends HTMLAttributes<HTMLElement>
+ */
+export const Header = HeaderComponent as typeof HeaderComponent & {
+  Item: typeof HeaderItem;
+  ItemIcon: typeof HeaderItemIcon;
+  ItemText: typeof HeaderItemText;
+  ItemWrapper: typeof HeaderItemWrapper;
+};
+
+Header.Item = HeaderItem;
+Header.ItemIcon = HeaderItemIcon;
+Header.ItemText = HeaderItemText;
+Header.ItemWrapper = HeaderItemWrapper;
diff --git a/packages/chrome/src/elements/nav/Nav.tsx b/packages/chrome/src/elements/nav/Nav.tsx
@@ -11,11 +11,11 @@ import { INavProps } from '../../types';
 import { useChromeContext } from '../../utils/useChromeContext';
 import { NavContext } from '../../utils/useNavContext';
 import { StyledNav } from '../../styled';
+import { NavItem } from './NavItem';
+import { NavItemIcon } from './NavItemIcon';
+import { NavItemText } from './NavItemText';
 
-/**
- * @extends HTMLAttributes<HTMLElement>
- */
-export const Nav = React.forwardRef<HTMLElement, INavProps>((props, ref) => {
+export const NavComponent = React.forwardRef<HTMLElement, INavProps>((props, ref) => {
   const { hue, isLight, isDark } = useChromeContext();
   const navContextValue = useMemo(() => ({ isExpanded: !!props.isExpanded }), [props.isExpanded]);
 
@@ -26,8 +26,21 @@ export const Nav = React.forwardRef<HTMLElement, INavProps>((props, ref) => {
   );
 });
 
-Nav.displayName = 'Nav';
+NavComponent.displayName = 'Nav';
 
-Nav.propTypes = {
+NavComponent.propTypes = {
   isExpanded: PropTypes.bool
 };
+
+/**
+ * @extends HTMLAttributes<HTMLElement>
+ */
+export const Nav = NavComponent as typeof NavComponent & {
+  Item: typeof NavItem;
+  ItemIcon: typeof NavItemIcon;
+  ItemText: typeof NavItemText;
+};
+
+Nav.Item = NavItem;
+Nav.ItemIcon = NavItemIcon;
+Nav.ItemText = NavItemText;
diff --git a/packages/chrome/src/elements/subnav/SubNav.tsx b/packages/chrome/src/elements/subnav/SubNav.tsx
@@ -8,14 +8,29 @@
 import React, { HTMLAttributes } from 'react';
 import { StyledSubNav } from '../../styled';
 import { useChromeContext } from '../../utils/useChromeContext';
+import { SubNavItem } from './SubNavItem';
+import { SubNavItemText } from './SubNavItemText';
+import { CollapsibleSubNavItem } from './CollapsibleSubNavItem';
+
+export const SubNavComponent = React.forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
+  (props, ref) => {
+    const { hue, isLight, isDark } = useChromeContext();
+
+    return <StyledSubNav ref={ref} hue={hue} isLight={isLight} isDark={isDark} {...props} />;
+  }
+);
+
+SubNavComponent.displayName = 'SubNav';
 
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export const SubNav = React.forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((props, ref) => {
-  const { hue, isLight, isDark } = useChromeContext();
-
-  return <StyledSubNav ref={ref} hue={hue} isLight={isLight} isDark={isDark} {...props} />;
-});
+export const SubNav = SubNavComponent as typeof SubNavComponent & {
+  Item: typeof SubNavItem;
+  ItemText: typeof SubNavItemText;
+  CollapsibleItem: typeof CollapsibleSubNavItem;
+};
 
-SubNav.displayName = 'SubNav';
+SubNav.Item = SubNavItem;
+SubNav.ItemText = SubNavItemText;
+SubNav.CollapsibleItem = CollapsibleSubNavItem;
diff --git a/packages/chrome/src/index.ts b/packages/chrome/src/index.ts
