docs: creating the sidebar navigation docs (#3306)

* docs: creating the sidebar navigation docs * chore: gpt the content * chore: linting * fix: docs updates from PR Co-authored-by: Sarah <sali@twilio.com> * chore: escaped character in yaml * fix: typo Co-authored-by: Sarah <sali@twilio.com> --------- Co-authored-by: Sarah <sali@twilio.com>
twilio-labs · Jul 7, 2023 · 83307d2 · 83307d2
1 parent 950568e
commit 83307d2
Show file tree

Hide file tree

Showing 11 changed files with 1,185 additions and 11 deletions.
diff --git a/.changeset/loud-berries-count.md b/.changeset/loud-berries-count.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/sidebar': minor
+'@twilio-paste/core': minor
+---
+
+[Sidebar] Improved ability to place children, like badges, inside a navigation item and have it positioned nicely by default
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
@@ -70,6 +70,7 @@ export const SITEMAP = [
   '/components/select/',
   '/components/separator/',
   '/components/sidebar/',
+  '/components/sidebar-navigation/',
   '/components/stack/',
   '/components/status-badge/',
   '/components/status-menu/',

diff --git a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx
@@ -70,13 +70,19 @@ const SidebarNavigationItem = React.forwardRef<HTMLAnchorElement, SidebarNavigat
         aria-current={selected ? 'page' : undefined}
         {...styles}
       >
-        <Box as="span" color={selected ? 'colorTextInverse' : 'colorTextIconInverse'}>
-          {icon}
-        </Box>
+        {icon && (
+          <Box as="span" color={selected ? 'colorTextInverse' : 'colorTextIconInverse'}>
+            {icon}
+          </Box>
+        )}
         <Box
           as="span"
-          display="block"
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+          columnGap="space20"
           transition="all 120ms ease"
+          flexGrow={1}
           float={visible ? 'none' : 'left'}
           opacity={visible ? 1 : 0}
           whiteSpace={visible ? 'normal' : 'nowrap'}

diff --git a/packages/paste-core/components/sidebar/src/navigation/styles.tsx b/packages/paste-core/components/sidebar/src/navigation/styles.tsx
@@ -68,7 +68,7 @@ export const sidebarNavigationItemNestedStyles: BoxProps = {
   width: '100%',
   fontSize: 'fontSize20',
   marginBottom: 'space20',
-  paddingLeft: 'space60',
+  paddingLeft: 'space80',
 };
 
 // Collapsed item styles

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/console.stories.tsx b/packages/paste-core/components/sidebar/stories/full-composition/console.stories.tsx
@@ -115,7 +115,7 @@ export const Console: StoryFn = () => {
                     <SidebarNavigationDisclosureHeading>Settings</SidebarNavigationDisclosureHeading>
                   </SidebarNavigationDisclosureHeadingWrapper>
                   <SidebarNavigationDisclosureContent>
-                    <SidebarNavigationItem>
+                    <SidebarNavigationItem href="#">
                       Addons <SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
                     </SidebarNavigationItem>
                     <SidebarNavigationItem href="https://google.com">Navigation Item</SidebarNavigationItem>

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx b/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx
@@ -42,7 +42,6 @@ export const Flex: StoryFn = () => {
 
   return (
     <Box>
-      {/* Can be placed anywhere - position fixed */}
       <Sidebar aria-label={id} collapsed={overlaySidebarExpanded} variant="compact">
         <SidebarHeader>
           <SidebarHeaderIconButton as="a" href="#">
@@ -100,7 +99,6 @@ export const Flex: StoryFn = () => {
         </SidebarFooter>
       </Sidebar>
 
-      {/* Must wrap content area */}
       <SidebarOverlayContentWrapper collapsed={overlaySidebarExpanded} variant="compact">
         <Topbar>
           <TopbarActions justify="start">

diff --git a/packages/paste-core/components/sidebar/stories/navigation.stories.tsx b/packages/paste-core/components/sidebar/stories/navigation.stories.tsx
@@ -9,6 +9,18 @@ import {useUID} from '@twilio-paste/uid-library';
 // import {Tabs, TabList, Tab, TabPanels, TabPanel} from '@twilio-paste/tabs';
 import {Menu, MenuButton, MenuItem, MenuSeparator, useMenuState} from '@twilio-paste/menu';
 import {ProductContactCenterTasksIcon} from '@twilio-paste/icons/esm/ProductContactCenterTasksIcon';
+import {ProductContactCenterAdminIcon} from '@twilio-paste/icons/esm/ProductContactCenterAdminIcon';
+import {ProductContactCenterTeamsIcon} from '@twilio-paste/icons/esm/ProductContactCenterTeamsIcon';
+import {ProductPrivacyIcon} from '@twilio-paste/icons/esm/ProductPrivacyIcon';
+import {ProductUsageIcon} from '@twilio-paste/icons/esm/ProductUsageIcon';
+import {ProductContactCenterQueuesIcon} from '@twilio-paste/icons/esm/ProductContactCenterQueuesIcon';
+import {ProductSegmentIcon} from '@twilio-paste/icons/esm/ProductSegmentIcon';
+import {ProductHomeIcon} from '@twilio-paste/icons/esm/ProductHomeIcon';
+import {ProductConnectionsIcon} from '@twilio-paste/icons/esm/ProductConnectionsIcon';
+import {ProductReverseETLIcon} from '@twilio-paste/icons/esm/ProductReverseETLIcon';
+import {ProductProtocolsIcon} from '@twilio-paste/icons/esm/ProductProtocolsIcon';
+import {ProductSettingsIcon} from '@twilio-paste/icons/esm/ProductSettingsIcon';
+import {ProductEngageIcon} from '@twilio-paste/icons/esm/ProductEngageIcon';
 import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon';
 
 import {
@@ -28,8 +40,9 @@ import {
   SidebarNavigationDisclosureContent,
   SidebarNavigationItem,
   useSidebarNavigationDisclosureState,
+  type SidebarNavigationDisclosureInitialState,
+  type SidebarNavigationDisclosureStateReturn,
 } from '../src';
-import type {SidebarNavigationDisclosureInitialState, SidebarNavigationDisclosureStateReturn} from '../src';
 
 // eslint-disable-next-line import/no-default-export
 export default {
@@ -73,6 +86,12 @@ export const Default: StoryFn = () => {
             >
               Go to Google.com
             </SidebarNavigationItem>
+            <SidebarNavigationItem
+              href="https://google.com"
+              icon={<ProductContactCenterTasksIcon decorative={false} title="Description of icon" />}
+            >
+              Include children <SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
+            </SidebarNavigationItem>
             <SidebarNavigationDisclosure visible>
               <SidebarNavigationDisclosureHeadingWrapper>
                 <SidebarNavigationDisclosureHeading
@@ -132,6 +151,9 @@ export const Default: StoryFn = () => {
                   Go to Google.com
                 </SidebarNavigationItem>
                 <SidebarNavigationItem href="https://www.google.com">Navigation Item</SidebarNavigationItem>
+                <SidebarNavigationItem href="https://www.google.com">
+                  Include children <SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
+                </SidebarNavigationItem>
               </SidebarNavigationDisclosureContent>
             </SidebarNavigationDisclosure>
             <SidebarNavigationDisclosure>
@@ -497,3 +519,191 @@ export const StateHookDisclosure: StoryFn = () => {
 StateHookDisclosure.parameters = {
   padding: false,
 };
+
+export const FlexExample: StoryFn = () => {
+  const id = useUID();
+  const [overlaySidebarExpanded, setOverlaySidebarExpanded] = React.useState(false);
+
+  return (
+    /* eslint-disable react/jsx-max-depth */
+    <Box>
+      <Sidebar aria-label={id} collapsed={overlaySidebarExpanded} variant="compact">
+        <SidebarHeader>
+          <SidebarHeaderIconButton as="a" href="#">
+            <ProductFlexIcon size="sizeIcon20" decorative={false} title="Go to Flex homepage" />
+          </SidebarHeaderIconButton>
+          <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
+        </SidebarHeader>
+        <SidebarBody>
+          <SidebarNavigation>
+            <SidebarNavigationItem
+              href="https://google.com"
+              selected
+              icon={<ProductContactCenterAdminIcon decorative={false} title="Admin" />}
+            >
+              Admin
+            </SidebarNavigationItem>
+            <SidebarNavigationItem
+              href="https://google.com"
+              icon={<ProductContactCenterTasksIcon decorative={false} title="Agent dashboard" />}
+            >
+              Agent dashboard
+            </SidebarNavigationItem>
+            <SidebarNavigationItem
+              href="https://google.com"
+              icon={<ProductContactCenterTeamsIcon decorative={false} title="Teams view" />}
+            >
+              Teams view
+            </SidebarNavigationItem>
+            <SidebarNavigationItem
+              href="https://google.com"
+              icon={<ProductContactCenterQueuesIcon decorative={false} title="Queue stats" />}
+            >
+              Queue stats
+            </SidebarNavigationItem>
+            <SidebarNavigationItem
+              href="https://google.com"
+              icon={<ProductPrivacyIcon decorative={false} title="Privacy" />}
+            >
+              Privacy
+            </SidebarNavigationItem>
+            <SidebarNavigationItem
+              href="https://google.com"
+              icon={<ProductUsageIcon decorative={false} title="Insights" />}
+            >
+              Insights
+            </SidebarNavigationItem>
+          </SidebarNavigation>
+        </SidebarBody>
+        <SidebarFooter>
+          <SidebarCollapseButton
+            onClick={() => setOverlaySidebarExpanded(!overlaySidebarExpanded)}
+            i18nCollapseLabel="Close sidebar"
+            i18nExpandLabel="Open sidebar"
+          />
+        </SidebarFooter>
+      </Sidebar>
+
+      <SidebarPushContentWrapper collapsed={overlaySidebarExpanded} variant="compact">
+        <Box padding="space70">
+          <Button variant="primary" onClick={() => setOverlaySidebarExpanded(!overlaySidebarExpanded)}>
+            Toggle Push Sidebar
+          </Button>
+        </Box>
+      </SidebarPushContentWrapper>
+    </Box>
+  );
+  /* eslint-enable react/jsx-max-depth */
+};
+FlexExample.parameters = {
+  padding: false,
+};
+
+export const SegmentExample: StoryFn = () => {
+  const id = useUID();
+  const [pushSidebarCollapsed, setPushSidebarCollapsed] = React.useState(false);
+
+  return (
+    /* eslint-disable react/jsx-max-depth */
+    <Box>
+      <Sidebar aria-label={id} collapsed={pushSidebarCollapsed} variant="compact">
+        <SidebarHeader>
+          <SidebarHeaderIconButton as="a" href="#">
+            <ProductSegmentIcon size="sizeIcon20" decorative={false} title="Go to Segment homepage" />
+          </SidebarHeaderIconButton>
+          <SidebarHeaderLabel>Twilio Segment</SidebarHeaderLabel>
+        </SidebarHeader>
+        <SidebarBody>
+          <SidebarNavigation hierarchical hideItemsOnCollapse>
+            <SidebarNavigationItem href="https://google.com" icon={<ProductHomeIcon decorative />}>
+              Home
+            </SidebarNavigationItem>
+            <SidebarNavigationDisclosure>
+              <SidebarNavigationDisclosureHeadingWrapper>
+                <SidebarNavigationDisclosureHeading icon={<ProductConnectionsIcon decorative />} selected>
+                  Connections
+                </SidebarNavigationDisclosureHeading>
+              </SidebarNavigationDisclosureHeadingWrapper>
+              <SidebarNavigationDisclosureContent>
+                <SidebarNavigationItem href="https://google.com" selected>
+                  Overview
+                </SidebarNavigationItem>
+              </SidebarNavigationDisclosureContent>
+            </SidebarNavigationDisclosure>
+            <SidebarNavigationDisclosure>
+              <SidebarNavigationDisclosureHeadingWrapper>
+                <SidebarNavigationDisclosureHeading icon={<ProductReverseETLIcon decorative />}>
+                  Reverse ETL
+                </SidebarNavigationDisclosureHeading>
+                <SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
+              </SidebarNavigationDisclosureHeadingWrapper>
+              <SidebarNavigationDisclosureContent>
+                <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
+              </SidebarNavigationDisclosureContent>
+            </SidebarNavigationDisclosure>
+            <SidebarNavigationDisclosure>
+              <SidebarNavigationDisclosureHeadingWrapper>
+                <SidebarNavigationDisclosureHeading icon={<ProductPrivacyIcon decorative />}>
+                  Privacy
+                </SidebarNavigationDisclosureHeading>
+              </SidebarNavigationDisclosureHeadingWrapper>
+              <SidebarNavigationDisclosureContent>
+                <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
+              </SidebarNavigationDisclosureContent>
+            </SidebarNavigationDisclosure>
+            <SidebarNavigationDisclosure>
+              <SidebarNavigationDisclosureHeadingWrapper>
+                <SidebarNavigationDisclosureHeading icon={<ProductProtocolsIcon decorative />}>
+                  Protocols
+                </SidebarNavigationDisclosureHeading>
+              </SidebarNavigationDisclosureHeadingWrapper>
+              <SidebarNavigationDisclosureContent>
+                <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
+              </SidebarNavigationDisclosureContent>
+            </SidebarNavigationDisclosure>
+            <SidebarNavigationDisclosure>
+              <SidebarNavigationDisclosureHeadingWrapper>
+                <SidebarNavigationDisclosureHeading icon={<ProductEngageIcon decorative />}>
+                  Enagage
+                </SidebarNavigationDisclosureHeading>
+              </SidebarNavigationDisclosureHeadingWrapper>
+              <SidebarNavigationDisclosureContent>
+                <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
+              </SidebarNavigationDisclosureContent>
+            </SidebarNavigationDisclosure>
+            <SidebarNavigationDisclosure>
+              <SidebarNavigationDisclosureHeadingWrapper>
+                <SidebarNavigationDisclosureHeading icon={<ProductSettingsIcon decorative />}>
+                  Settings
+                </SidebarNavigationDisclosureHeading>
+              </SidebarNavigationDisclosureHeadingWrapper>
+              <SidebarNavigationDisclosureContent>
+                <SidebarNavigationItem href="https://google.com">Overview</SidebarNavigationItem>
+              </SidebarNavigationDisclosureContent>
+            </SidebarNavigationDisclosure>
+          </SidebarNavigation>
+        </SidebarBody>
+        <SidebarFooter>
+          <SidebarCollapseButton
+            onClick={() => setPushSidebarCollapsed(!pushSidebarCollapsed)}
+            i18nCollapseLabel="Close sidebar"
+            i18nExpandLabel="Open sidebar"
+          />
+        </SidebarFooter>
+      </Sidebar>
+
+      {/* Must wrap content area */}
+      <SidebarPushContentWrapper collapsed={pushSidebarCollapsed} variant="compact">
+        <Box padding="space70">
+          <Button variant="primary" onClick={() => setPushSidebarCollapsed(!pushSidebarCollapsed)}>
+            Toggle Push Sidebar
+          </Button>
+        </Box>
+      </SidebarPushContentWrapper>
+    </Box>
+  );
+  /* eslint-enable react/jsx-max-depth */
+};
+SegmentExample.parameters = {
+  padding: false,
+};