chore: use dot notation for avatar chrome story

geotrev · geotrev · commit 8896a4d6c656 · 2024-04-10T16:38:27.000-05:00
diff --git a/packages/avatars/demo/~patterns/stories/ChromeStory.tsx b/packages/avatars/demo/~patterns/stories/ChromeStory.tsx
@@ -8,23 +8,23 @@
 import React from 'react';
 import { Story } from '@storybook/react';
 import Icon from '@zendeskgarden/svg-icons/src/16/grid-2x2-stroke.svg';
-import { Chrome, Body, Header, HeaderItem, HeaderItemIcon } from '@zendeskgarden/react-chrome';
+import { Chrome, Body, Header } from '@zendeskgarden/react-chrome';
 import { Avatar, IAvatarProps } from '@zendeskgarden/react-avatars';
 
 export const ChromeStory: Story<IAvatarProps> = args => (
   <Chrome isFluid style={{ height: 'auto' }}>
     <Body>
       <Header>
-        <HeaderItem aria-label="Products">
-          <HeaderItemIcon>
+        <Header.Item aria-label="Products">
+          <Header.ItemIcon>
             <Icon />
-          </HeaderItemIcon>
-        </HeaderItem>
-        <HeaderItem isRound aria-label="User profile">
+          </Header.ItemIcon>
+        </Header.Item>
+        <Header.Item isRound aria-label="User profile">
           <Avatar {...args} size="extrasmall">
             <img alt="Example User" src="images/avatars/chrome.png" />
           </Avatar>
-        </HeaderItem>
+        </Header.Item>
       </Header>
     </Body>
   </Chrome>
