chore: adds storybook and readme updates

geotrev · geotrev · commit 8fd8135f7d7c · 2024-03-05T15:27:32.000-06:00
diff --git a/docs/migration.md b/docs/migration.md
@@ -44,6 +44,8 @@ consider additional positioning prop support on a case-by-case basis.
 #### @zendeskgarden/react-chrome
 
 - Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
+- Some subcomponent exports have been deprecated and will be removed in a future major version.
+  Update to subcomponent properties.
 
 #### @zendeskgarden/react-colorpickers
 
diff --git a/packages/chrome/README.md b/packages/chrome/README.md
@@ -15,41 +15,37 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Chrome, Nav, NavItem, ... } from '@zendeskgarden/react-chrome';
+import { Chrome, Nav, SubNav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
 import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';
 
 <ThemeProvider>
   <Chrome>
     <Nav isExpanded>
-      <NavItem hasLogo product="connect" title="Zendesk Connect">
-        <NavItemIcon>
+      <Nav.Item hasLogo product="connect" title="Zendesk Connect">
+        <Nav.ItemIcon>
           <ConnectIcon />
-        </NavItemIcon>
+        </Nav.ItemIcon>
         <NavItemText>Zendesk Connect</NavItemText>
-      </NavItem>
-      <NavItem isCurrent>
-        <NavItemIcon>
+      </Nav.Item>
+      <Nav.Item isCurrent>
+        <Nav.ItemIcon>
           <HomeIcon />
-        </NavItemIcon>
+        </Nav.ItemIcon>
         <NavItemText>Home</NavItemText>
-      </NavItem>
+      </Nav.Item>
     </Nav>
     <SubNav>
-      <SubNavItem isCurrent>
-        <SubNavItemText>Subnav 1</SubNavItemText>
-      </SubNavItem>
+      <SubNav.Item isCurrent>
+        <SubNav.ItemText>Subnav 1</SubNav.ItemText>
+      </SubNav.Item>
       ...
     </SubNav>
     <Body>
-      <Header>
-        ...
-      </Header>
+      <Header>...</Header>
       <Content>
-        <Main>
-          Lorem ipsum...
-        </Main>
+        <Main>Lorem ipsum...</Main>
       </Content>
     </Body>
   </Chrome>
-</ThemeProvider>
+</ThemeProvider>;
 ```
diff --git a/packages/chrome/demo/chrome.stories.mdx b/packages/chrome/demo/chrome.stories.mdx
@@ -1,28 +1,17 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
 import {
-  Chrome,
-  CollapsibleSubNavItem,
   Body,
+  Chrome,
   Content,
   Footer,
-  FooterItem,
   Header,
-  HeaderItem,
-  HeaderItemIcon,
-  HeaderItemText,
-  HeaderItemWrapper,
   Main,
   Nav,
-  NavItem,
-  NavItemIcon,
-  NavItemText,
   Sheet,
   Sidebar,
   SkipNav,
   SubNav,
-  SubNavItem,
-  SubNavItemText,
   PRODUCTS
 } from '@zendeskgarden/react-chrome';
 import { ChromeStory } from './stories/ChromeStory';
@@ -44,27 +33,27 @@ import README from '../README.md';
   title="Packages/Chrome/Chrome"
   component={Chrome}
   subcomponents={{
-    CollapsibleSubNavItem,
     Body,
     Content,
     Footer,
-    FooterItem,
+    'Footer.Item': Footer.Item,
     Header,
-    HeaderItem,
-    HeaderItemIcon,
-    HeaderItemText,
-    HeaderItemWrapper,
+    'Item.HeaderItem': Header.Item,
+    'Item.HeaderItemIcon': Header.ItemIcon,
+    'Item.HeaderItemText': Header.ItemText,
+    'Item.HeaderItemWrapper': Header.ItemWrapper,
     Main,
     Nav,
-    NavItem,
-    NavItemIcon,
-    NavItemText,
+    'Nav.Item': Nav.Item,
+    'Nav.ItemIcon': Nav.ItemIcon,
+    'Nav.ItemText': Nav.ItemText,
     Sheet,
     Sidebar,
     SkipNav,
     SubNav,
-    SubNavItem,
-    SubNavItemText
+    'SubNav.CollapsibleItem': SubNav.CollapsibleItem,
+    'Sub.NavItem': Sub.NavItem,
+    'Sub.NavItemText': Sub.NavItemText
   }}
 />
 
