feat: navigation tree item subtitle and default expanded state

traefik · Mar 23, 2023 · 12d8294 · 12d8294
1 parent 9511631
commit 12d8294
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/components/NavigationTree/NavigationTree.stories.tsx b/components/NavigationTree/NavigationTree.stories.tsx
@@ -45,8 +45,13 @@ const Template: ComponentStory<typeof NavigationTreeContainer> = (args) => {
   return (
     <NavigationDrawer>
       <NavigationTreeContainer {...args}>
-        <NavigationTreeItem {...navigationHandlerProps('one')} label="One">
-          <NavigationTreeItem {...navigationHandlerProps('one-one')} as="a" label="One.One" />
+        <NavigationTreeItem {...navigationHandlerProps('one')} label="One" subtitle="/one">
+          <NavigationTreeItem
+            {...navigationHandlerProps('one-one')}
+            as="a"
+            label="One.One"
+            subtitle="/one-one"
+          />
           <NavigationTreeItem {...navigationHandlerProps('one-two')} label="One.Two">
             <NavigationTreeItem
               {...navigationHandlerProps('one-two-one')}
@@ -55,7 +60,31 @@ const Template: ComponentStory<typeof NavigationTreeContainer> = (args) => {
             />
           </NavigationTreeItem>
         </NavigationTreeItem>
-        <NavigationTreeItem {...navigationHandlerProps('two')} label="Two" />
+        <NavigationTreeItem
+          {...navigationHandlerProps('two')}
+          label="Two"
+          subtitle="/two"
+          defaultExpanded
+        >
+          <NavigationTreeItem
+            {...navigationHandlerProps('two-one')}
+            as="a"
+            label="Two.One"
+            subtitle="/two-one"
+          />
+          <NavigationTreeItem
+            {...navigationHandlerProps('two-two')}
+            label="Two.Two"
+            subtitle="/two-two"
+          >
+            <NavigationTreeItem
+              {...navigationHandlerProps('two-two-one')}
+              startAdornment={<ArchiveIcon />}
+              label="Two.Two.One"
+            />
+          </NavigationTreeItem>
+        </NavigationTreeItem>
+        <NavigationTreeItem {...navigationHandlerProps('three')} label="Three" />
       </NavigationTreeContainer>
     </NavigationDrawer>
   );

diff --git a/components/NavigationTree/NavigationTreeItem.stories.tsx b/components/NavigationTree/NavigationTreeItem.stories.tsx
@@ -94,7 +94,7 @@ const Template: ComponentStory<typeof NavigationTreeItem> = (args) => {
         defaultCollapseIcon={args.defaultCollapseIcon}
         defaultExpandIcon={args.defaultExpandIcon}
       >
-        <NavigationTreeItem {...navigationHandlerProps('one')} label="One">
+        <NavigationTreeItem {...navigationHandlerProps('one')} label="One" subtitle="/parent">
           <NavigationTreeItem {...navigationHandlerProps('one-one')} {...args}>
             <NavigationTreeItem
               {...navigationHandlerProps('one-one-one')}

diff --git a/components/NavigationTree/NavigationTreeItem.tsx b/components/NavigationTree/NavigationTreeItem.tsx
@@ -2,10 +2,14 @@ import React, { useMemo, useState } from 'react';
 import { Box } from '../Box';
 import { NavigationItem, NavigationItemProps } from '../Navigation';
 import { NavigationTreeContainer } from './NavigationTreeContainer';
+import { Flex } from '../Flex';
+import { Text } from '../Text';
 
 export interface NavigationTreeItemProps {
   label: string;
+  subtitle?: string;
   children?: React.ReactNode;
+  defaultExpanded?: boolean;
   onClick?: () => void;
   defaultExpandIcon?: React.ReactNode;
   defaultCollapseIcon?: React.ReactNode;
@@ -15,15 +19,17 @@ export interface NavigationTreeItemProps {
 
 export const NavigationTreeItem = ({
   label,
+  subtitle,
   children,
   onClick,
+  defaultExpanded = false,
   defaultCollapseIcon,
   defaultExpandIcon,
   customCollapseIcon,
   customExpandIcon,
   ...props
 }: NavigationTreeItemProps & NavigationItemProps) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const isExpandable = useMemo(() => React.Children.count(children) > 0, [children]);
   const hasStartAdornment = useMemo(() => !!props.startAdornment, [props.startAdornment]);
   const usedStartAdornment = useMemo(
@@ -55,7 +61,19 @@ export const NavigationTreeItem = ({
         startAdornment={usedStartAdornment}
         onClick={isExpandable ? () => setIsExpanded(!isExpanded) : onClick}
       >
-        <Box css={{ ml: isExpandable || hasStartAdornment ? 0 : '$4' }}>{label}</Box>
+        <Flex
+          direction="column"
+          align="start"
+          gap={1}
+          css={{ ml: isExpandable || hasStartAdornment ? 0 : '$4' }}
+        >
+          <Text>{label}</Text>
+          {subtitle && (
+            <Text variant="subtle" css={{ fontSize: '$3', opacity: 0.8 }}>
+              {subtitle}
+            </Text>
+          )}
+        </Flex>
       </NavigationItem>
       {isExpanded && (
         <NavigationTreeContainer