From f2c6f7a68d6dcc610de72829593eedc4382fd82c Mon Sep 17 00:00:00 2001 From: lilyvc <45168453+lilyvc@users.noreply.github.com> Date: Mon, 22 Apr 2024 17:28:38 +0100 Subject: [PATCH 1/8] add vertical nav pattern example --- .../vertical-navigation.stories.tsx | 178 ++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx new file mode 100644 index 00000000000..456e9ad97ad --- /dev/null +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -0,0 +1,178 @@ +import { FC, ReactNode, useEffect, useState } from "react"; +import { + Button, + FlexItem, + FlexLayout, + StackLayout, + BorderLayout, + BorderItem, + NavigationItem, + useResponsiveProp, + Text, + Drawer, +} from "@salt-ds/core"; +import { + SymphonyIcon, + StackoverflowIcon, + GithubIcon, + MenuIcon, + CloseIcon, + NotificationIcon, +} from "@salt-ds/icons"; +import { Meta } from "@storybook/react"; +import { AppHeader } from "packages/lab/src"; + +export default { + title: "Patterns/Vertical Navigation", +} as Meta; + +interface NavigationItemData { + name: string; + href?: string; + children?: NavigationItemData[]; + level?: number; +} + +export const VerticalNavigation = () => { + const navigationData = [ + { name: "Overview", href: "" }, + { + name: "Data", + children: [ + { name: "Group overview", href: "#" }, + { + name: "Data analysis", + children: [{ name: "Monitoring", href: "#" }], + }, + ], + }, + { name: "Trades", href: "#" }, + { name: "Reports", href: "#" }, + ]; + + const [active, setActive] = useState(navigationData[0].name); + + const [expanded, setExpanded] = useState([]); + + const handleExpand = (item: NavigationItemData) => () => { + if (expanded.includes(item.name)) { + setExpanded(expanded.filter((expanded) => expanded !== item.name)); + } else { + setExpanded([...expanded, item.name]); + } + }; + + const isParentOfActiveItem = ( + children: NavigationItemData[], + activeName: string + ): boolean => { + return children.some((child: NavigationItemData) => { + if (child.name === activeName) { + return true; + } + if (child.children) { + return isParentOfActiveItem(child.children, activeName); + } + return false; + }); + }; + + const RecursiveNavItem: FC<{ item: NavigationItemData }> = ({ item }) => { + return ( +
  • + { + // prevent default to avoid navigation in storybook example + event.preventDefault(); + setActive(item.name); + }} + level={item.level || 0} + onExpand={handleExpand(item)} + parent={!!item.children} + > + {item.name} + + {item.children && + expanded.includes(item.name) && + item.children.map((child) => ( + + ))} +
    • + ); + }; + + return ( + + +
    + + + + + + {Array.from({ length: 6 }, (_, index) => ( +
    + ))} + + +
    + Footer +
    +     + + ); +}; + +VerticalNavigation.parameters = { + layout: "fullscreen", +}; From 47b835d5d7f0c05573e7ec634ea93c11006b6129 Mon Sep 17 00:00:00 2001 From: Lily Cooksley Date: Tue, 23 Apr 2024 11:43:23 +0100 Subject: [PATCH 2/8] vertical nav example --- .../vertical-navigation.stories.tsx | 126 ++++++++---------- 1 file changed, 53 insertions(+), 73 deletions(-) diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx index 456e9ad97ad..e688dbf0702 100644 --- a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -1,26 +1,6 @@ -import { FC, ReactNode, useEffect, useState } from "react"; -import { - Button, - FlexItem, - FlexLayout, - StackLayout, - BorderLayout, - BorderItem, - NavigationItem, - useResponsiveProp, - Text, - Drawer, -} from "@salt-ds/core"; -import { - SymphonyIcon, - StackoverflowIcon, - GithubIcon, - MenuIcon, - CloseIcon, - NotificationIcon, -} from "@salt-ds/icons"; +import { FC, useState } from "react"; +import { BorderLayout, BorderItem, NavigationItem } from "@salt-ds/core"; import { Meta } from "@storybook/react"; -import { AppHeader } from "packages/lab/src"; export default { title: "Patterns/Vertical Navigation", @@ -33,6 +13,32 @@ interface NavigationItemData { level?: number; } +const Item = () => { + return ( +
    + ); +}; + +const Header = () => { + return ( +
    + ); +}; + export const VerticalNavigation = () => { const navigationData = [ { name: "Overview", href: "" }, @@ -51,15 +57,15 @@ export const VerticalNavigation = () => { ]; const [active, setActive] = useState(navigationData[0].name); - const [expanded, setExpanded] = useState([]); const handleExpand = (item: NavigationItemData) => () => { - if (expanded.includes(item.name)) { - setExpanded(expanded.filter((expanded) => expanded !== item.name)); - } else { - setExpanded([...expanded, item.name]); - } + const isExpanded = expanded.includes(item.name); + setExpanded( + isExpanded + ? expanded.filter((name) => name !== item.name) + : [...expanded, item.name] + ); }; const isParentOfActiveItem = ( @@ -67,13 +73,10 @@ export const VerticalNavigation = () => { activeName: string ): boolean => { return children.some((child: NavigationItemData) => { - if (child.name === activeName) { - return true; - } - if (child.children) { - return isParentOfActiveItem(child.children, activeName); - } - return false; + if (child.name === activeName) return true; + return child.children + ? isParentOfActiveItem(child.children, activeName) + : false; }); }; @@ -104,8 +107,9 @@ export const VerticalNavigation = () => { {item.children && expanded.includes(item.name) && - item.children.map((child) => ( + item.children.map((child, index) => ( ))} @@ -116,29 +120,22 @@ export const VerticalNavigation = () => { return ( -
    +
    - + { marginLeft: "250px", }} > - {Array.from({ length: 6 }, (_, index) => ( -
    - ))} - - -
    - Footer -
    + + + +     ); From 19b42441a8e314d0da35d344210b520d1f4e47fd Mon Sep 17 00:00:00 2001 From: Lily Cooksley Date: Tue, 23 Apr 2024 13:24:33 +0100 Subject: [PATCH 3/8] add single level example --- .../vertical-navigation.stories.tsx | 81 ++++++++++++++++--- 1 file changed, 72 insertions(+), 9 deletions(-) diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx index e688dbf0702..dced72e201c 100644 --- a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -39,9 +39,74 @@ const Header = () => { ); }; -export const VerticalNavigation = () => { +export const SingleLevel = () => { const navigationData = [ - { name: "Overview", href: "" }, + { name: "Overview", href: "#" }, + { name: "Data analysis", href: "#" }, + { name: "Market monitor", href: "#" }, + { name: "Checks", href: "#" }, + { name: "Operations", href: "#" }, + { name: "Trades", href: "#" }, + ]; + + const [active, setActive] = useState(navigationData[0].name); + + return ( + + +
    + + + + + + + + + + + + ); +}; + +SingleLevel.parameters = { + layout: "fullscreen", +}; + +export const Nested = () => { + const navigationData = [ + { name: "Overview", href: "#" }, { name: "Data", children: [ @@ -82,7 +147,7 @@ export const VerticalNavigation = () => { const RecursiveNavItem: FC<{ item: NavigationItemData }> = ({ item }) => { return ( -
  • +
  • { ? isParentOfActiveItem(item.children, active) : false } - key={item.name} href={item.href} expanded={expanded.includes(item.name)} orientation="vertical" @@ -107,9 +171,8 @@ export const VerticalNavigation = () => { {item.children && expanded.includes(item.name) && - item.children.map((child, index) => ( + item.children.map((child) => ( ))} @@ -125,7 +188,7 @@ export const VerticalNavigation = () => { @@ -140,7 +203,7 @@ export const VerticalNavigation = () => { @@ -153,6 +216,6 @@ export const VerticalNavigation = () => { ); }; -VerticalNavigation.parameters = { +Nested.parameters = { layout: "fullscreen", }; From e4a83c3d0ef836b49722d4221d2fd577e473a017 Mon Sep 17 00:00:00 2001 From: Lily Cooksley Date: Tue, 23 Apr 2024 13:55:25 +0100 Subject: [PATCH 4/8] add icons --- .../vertical-navigation.stories.tsx | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx index dced72e201c..276bccd6364 100644 --- a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -1,6 +1,14 @@ import { FC, useState } from "react"; import { BorderLayout, BorderItem, NavigationItem } from "@salt-ds/core"; import { Meta } from "@storybook/react"; +import { + LineChartIcon, + NotificationIcon, + PinIcon, + SearchIcon, + ReceiptIcon, + UserIcon, +} from "@salt-ds/icons"; export default { title: "Patterns/Vertical Navigation", @@ -41,12 +49,12 @@ const Header = () => { export const SingleLevel = () => { const navigationData = [ - { name: "Overview", href: "#" }, - { name: "Data analysis", href: "#" }, - { name: "Market monitor", href: "#" }, - { name: "Checks", href: "#" }, - { name: "Operations", href: "#" }, - { name: "Trades", href: "#" }, + { name: "Overview", href: "#", icon: }, + { name: "Data analysis", href: "#", icon: }, + { name: "Market monitor", href: "#", icon: }, + { name: "Checks", href: "#", icon: }, + { name: "Operations", href: "#", icon: }, + { name: "Trades", href: "#", icon: }, ]; const [active, setActive] = useState(navigationData[0].name); @@ -77,6 +85,7 @@ export const SingleLevel = () => { setActive(item.name); }} > + {item.icon} {item.name}
    • From f0f96dffc4755da09b52d2727118106c5d0d8813 Mon Sep 17 00:00:00 2001 From: Lily Cooksley Date: Tue, 23 Apr 2024 15:53:19 +0100 Subject: [PATCH 5/8] add stack layout --- .../vertical-navigation.stories.tsx | 61 ++++++++++++------- 1 file changed, 40 insertions(+), 21 deletions(-) diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx index 276bccd6364..f4a0dca02cf 100644 --- a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -1,5 +1,10 @@ import { FC, useState } from "react"; -import { BorderLayout, BorderItem, NavigationItem } from "@salt-ds/core"; +import { + BorderLayout, + BorderItem, + NavigationItem, + StackLayout, +} from "@salt-ds/core"; import { Meta } from "@storybook/react"; import { LineChartIcon, @@ -47,6 +52,8 @@ const Header = () => { ); }; +// TODO add border gap between items + export const SingleLevel = () => { const navigationData = [ { name: "Overview", href: "#", icon: }, @@ -73,23 +80,29 @@ export const SingleLevel = () => { > @@ -203,9 +216,15 @@ export const Nested = () => { > From 1012b472e107b7b076733bbbefe0c968f61a4f11 Mon Sep 17 00:00:00 2001 From: Lily Cooksley Date: Tue, 23 Apr 2024 15:58:09 +0100 Subject: [PATCH 6/8] remove ul spacing --- .../vertical-navigation/vertical-navigation.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx index f4a0dca02cf..8cc1a35bf76 100644 --- a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -83,7 +83,7 @@ export const SingleLevel = () => { {navigationData.map((item) => (
  • @@ -219,7 +219,7 @@ export const Nested = () => { {navigationData.map((item) => ( From 989e7cfc0eb47102783c2619f0f56c14ba5df3fd Mon Sep 17 00:00:00 2001 From: lilyvc <45168453+lilyvc@users.noreply.github.com> Date: Fri, 26 Apr 2024 15:03:01 +0100 Subject: [PATCH 7/8] add link to site --- .../vertical-navigation/vertical-navigation.stories.tsx | 2 -- site/docs/patterns/vertical-navigation.mdx | 4 ++++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx index 8cc1a35bf76..d723ad7d8ba 100644 --- a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -52,8 +52,6 @@ const Header = () => { ); }; -// TODO add border gap between items - export const SingleLevel = () => { const navigationData = [ { name: "Overview", href: "#", icon: }, diff --git a/site/docs/patterns/vertical-navigation.mdx b/site/docs/patterns/vertical-navigation.mdx index 2e31d6cedfc..82e92d1ed60 100644 --- a/site/docs/patterns/vertical-navigation.mdx +++ b/site/docs/patterns/vertical-navigation.mdx @@ -4,6 +4,10 @@ layout: DetailPattern aliases: - /salt/patterns/vertical-navigation data: + resources: + [ + { href: "https://storybook.saltdesignsystem.com/?path=/story/patterns-vertical-navigation--vertical-navigation", label: "Examples"}, + ] components: ["Navigation item"] relatedPatterns: ["Navigation"] --- From 1e23babae37f5e540d4e24f087b04f3b2b9967a4 Mon Sep 17 00:00:00 2001 From: lilyvc <45168453+lilyvc@users.noreply.github.com> Date: Tue, 30 Apr 2024 16:58:11 +0100 Subject: [PATCH 8/8] use sticky prop --- .../vertical-navigation.stories.tsx | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx index d723ad7d8ba..36cf03f3037 100644 --- a/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx +++ b/packages/core/stories/patterns/vertical-navigation/vertical-navigation.stories.tsx @@ -42,11 +42,8 @@ const Header = () => { return (
    ); @@ -66,17 +63,18 @@ export const SingleLevel = () => { return ( - +
    -