feat(VerticalNavigation): update to latest PD specs

Author: plagoa

apps/docs/src/content/components/vertical-navigation.mdx

@@ -434,3 +434,234 @@ const data = [
   { id: "03", label: "Cloud", icon: <Cloud /> },
 ];
 ```
+
+### Test
+
+```tsx live
+import { useState } from "react";
+import { css } from "@emotion/css";
+
+export default function Demo() {
+  const [selected, setSelected] = useState("home");
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div style={{ height: "90vh" }}>
+      <HvVerticalNavigation
+        open={!collapsed}
+        onOpenChange={(isOpen) => setCollapsed(!isOpen)}
+        selected={selected}
+        onSelectedChange={setSelected}
+        useIcons
+        className="h-full"
+      >
+        <HvVerticalNavigationSection collapsible data={headerData} />
+        <HvVerticalNavigationTree
+          search
+          collapsible
+          aria-label="Example 1 navigation"
+          data={navigationData}
+        />
+        <HvVerticalNavigationActions>
+          <div className="relative">
+            {!collapsed && (
+              <Backwards className="absolute pointer-events-none top-0 right-0" />
+            )}
+            <HvVerticalNavigationAction
+              label={collapsed ? "Expand menu" : "Collapse menu"}
+              icon={collapsed ? <Forwards /> : undefined}
+              onClick={() => setCollapsed((prev) => !prev)}
+            />
+          </div>
+        </HvVerticalNavigationActions>
+      </HvVerticalNavigation>
+    </div>
+  );
+}
+
+const headerData = [
+  {
+    id: "home",
+    label: "Home",
+    icon: <div className="i-ph-house" />,
+  },
+  {
+    id: "marketplace",
+    label: "Data Marketplace",
+    icon: <div className="i-ph-storefront" />,
+  },
+  {
+    id: "fav",
+    label: "Favorites",
+    icon: <div className="i-ph-star" />,
+    data: [
+      {
+        id: "fav-1",
+        label: "Customers",
+        icon: <div className="i-ph-table" />,
+      },
+      {
+        id: "fav-2",
+        label: "Transformations",
+        icon: <div className="i-ph-folder" />,
+      },
+      {
+        id: "fav-3",
+        label: "sales_report.rep",
+        icon: <div className="i-ph-file" />,
+      },
+      {
+        id: "fav-4",
+        label: "Sales Analysis",
+        icon: <div className="i-ph-package" />,
+      },
+      {
+        id: "fav-5",
+        label: "clean_gdpr",
+        icon: <div className="i-ph-file-csv" />,
+      },
+      {
+        id: "fav-6",
+        label: "Report",
+        icon: <div className="i-ph-file-pdf" />,
+      },
+      {
+        id: "fav-7",
+        label: "User List",
+        icon: <div className="i-ph-user-list" />,
+      },
+    ],
+  },
+];
+
+const navigationData = [
+  {
+    id: "menu1",
+    label: "Explore",
+    path: "",
+    icon: <div className="i-ph-map-trifold" />,
+    data: [
+      {
+        id: "menu1-1",
+        label: "Browse Files",
+        path: "",
+        icon: <div className="i-ph-folders" />,
+        parent: null,
+        data: [
+          {
+            id: "menu1-1-1",
+            label: "File 1",
+            path: "",
+            icon: <div className="i-ph-file" />,
+          },
+          {
+            id: "menu1-1-2",
+            label: "File 2",
+            path: "",
+            icon: <div className="i-ph-file" />,
+          },
+          {
+            id: "menu1-1-3",
+            label: "File 3",
+            path: "",
+            icon: <div className="i-ph-file" />,
+          },
+        ],
+      },
+      {
+        id: "menu1-2",
+        label: "Galaxy",
+        path: "",
+        icon: <div className="i-ph-graph" />,
+        parent: null,
+      },
+      {
+        id: "menu1-3",
+        label: "Lineage",
+        path: "",
+        icon: <div className="i-ph-tree-structure" />,
+        parent: null,
+      },
+      {
+        id: "menu1-5",
+        label: "Data Canvas",
+        path: "",
+        icon: <div className="i-ph-tree-view" />,
+        parent: null,
+      },
+      {
+        id: "menu1-6",
+        label: "API Catalog",
+        path: "",
+        icon: <div className="i-ph-webhooks-logo" />,
+        parent: null,
+      },
+      {
+        id: "menu1-7",
+        label: "Projects",
+        path: "",
+        icon: <div className="i-ph-suitcase-simple" />,
+        parent: null,
+      },
+    ],
+    parent: null,
+  },
+  {
+    id: "menu2",
+    label: "Transform",
+    path: "",
+    icon: <div className="i-ph-intersect-three" />,
+    parent: null,
+  },
+  {
+    id: "menu3",
+    label: "Management",
+    path: "",
+    icon: <div className="i-ph-gear" />,
+    parent: null,
+    data: [
+      {
+        id: "menu3-1",
+        label: "Connections",
+        icon: <div className="i-ph-plugs" />,
+      },
+      {
+        id: "menu3-2",
+        label: "Users",
+        icon: <div className="i-ph-users" />,
+      },
+      {
+        id: "menu3-3",
+        label: "Roles & Permissions",
+        icon: <div className="i-ph-user-circle-gear" />,
+      },
+      {
+        id: "menu3-4",
+        label: "Plugins",
+        icon: <div className="i-ph-puzzle-piece" />,
+      },
+    ],
+  },
+  {
+    id: "menu4",
+    label: "Schedules",
+    path: "",
+    icon: <div className="i-ph-calendar" />,
+    parent: null,
+  },
+  {
+    id: "menu5",
+    label: "Monitoring",
+    path: "",
+    icon: <div className="i-ph-pulse" />,
+    parent: null,
+    data: [
+      {
+        id: "menu5-1",
+        label: "Processes",
+        icon: <div className="i-ph-gear-fine" />,
+      },
+    ],
+  },
+];
+```

packages/core/src/VerticalNavigation/Navigation/Navigation.styles.tsx

@@ -1,11 +1,13 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 
 export const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationTree",
   {
     root: {
       display: "block",
       overflowY: "auto",
+      minHeight: 0,
     },
     list: {},
     listItem: {},
@@ -18,5 +20,24 @@ export const { staticClasses, useClasses } = createClasses(
     navigationPopup: {
       boxShadow: "inset 5px 0 5px -3px rgb(65 65 65 / 12%)",
     },
+    searchContainer: {
+      paddingBottom: theme.space.sm,
+    },
+    searchIcon: {
+      display: "flex",
+      padding: 0,
+      color: "currentColor",
+      justifyContent: "center",
+      marginBottom: theme.space.xs,
+      ":hover": {
+        backgroundColor: theme.colors.text,
+        borderRadius: theme.radii.round,
+        cursor: "pointer",
+      },
+    },
+    noResults: {
+      padding: theme.spacing("xs", "sm"),
+      color: theme.colors.textSubtle,
+    },
   },
 );