feat(VerticalNavigation): deprecated collapsedMode and added useIcons

lumada-design · May 29, 2023 · 5556b95 · 5556b95
1 parent 1a04700
commit 5556b95
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 96 deletions.
diff --git a/packages/core/src/components/VerticalNavigation/Actions/Actions.tsx b/packages/core/src/components/VerticalNavigation/Actions/Actions.tsx
@@ -32,7 +32,7 @@ export const HvVerticalNavigationActions = ({
   children,
   ...others
 }: HvVerticalNavigationActionsProps) => {
-  const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);
+  const { isOpen, useIcons } = useContext(VerticalNavigationContext);
 
   return (
     <StyledRoot
@@ -41,9 +41,7 @@ export const HvVerticalNavigationActions = ({
         className,
         actionsClasses.root,
         classes?.root,
-        !isOpen &&
-          collapsedMode === "simple" &&
-          clsx(actionsClasses.hide, classes?.hide)
+        !isOpen && !useIcons && clsx(actionsClasses.hide, classes?.hide)
       )}
       {...others}
     >

diff --git a/packages/core/src/components/VerticalNavigation/Header/Header.tsx b/packages/core/src/components/VerticalNavigation/Header/Header.tsx
@@ -60,14 +60,14 @@ export const HvVerticalNavigationHeader = ({
 }: HvVerticalNavigationHeaderProps) => {
   const {
     isOpen,
-    collapsedMode,
+    useIcons,
     headerTitle,
     slider,
     navigateToParentHandler,
     parentItem,
   } = useContext(VerticalNavigationContext);
 
-  openIcon = collapsedMode === "simple" ? <Menu /> : openIcon;
+  openIcon = !useIcons ? <Menu /> : openIcon;
 
   const backButtonClickHandler = () => {
     if (navigateToParentHandler) navigateToParentHandler();

diff --git a/packages/core/src/components/VerticalNavigation/Navigation/Navigation.tsx b/packages/core/src/components/VerticalNavigation/Navigation/Navigation.tsx
@@ -175,7 +175,7 @@ export const HvVerticalNavigationTree = ({
 
   const {
     isOpen,
-    collapsedMode,
+    useIcons,
     slider,
 
     parentItem,
@@ -196,7 +196,7 @@ export const HvVerticalNavigationTree = ({
 
   const handleChange = useCallback(
     (event, selectedId, selectedItem) => {
-      if (collapsedMode === "icon" && !isOpen && selectedItem.data) {
+      if (useIcons && !isOpen && selectedItem.data) {
         const currentEventTarget = event.currentTarget;
         setNavigationPopup((prevState) => {
           // We want to close the popup in case the clicked element is the same as the previous one
@@ -230,9 +230,9 @@ export const HvVerticalNavigationTree = ({
   );
 
   const treeViewItemMouseEnterHandler = (event, item) => {
-    const isCollapsedMode = collapsedMode === "icon" && !isOpen;
+    const isCollapsed = useIcons && !isOpen;
 
-    if (isCollapsedMode && item.data && !navigationPopup?.fixedMode) {
+    if (isCollapsed && item.data && !navigationPopup?.fixedMode) {
       const currentEventTarget = event.currentTarget;
 
       setNavigationPopup?.({
@@ -241,7 +241,7 @@ export const HvVerticalNavigationTree = ({
         fixedMode: false,
         data: item.data,
       });
-    } else if (isCollapsedMode && !item.data && !navigationPopup?.fixedMode) {
+    } else if (isCollapsed && !item.data && !navigationPopup?.fixedMode) {
       setNavigationPopup(null);
     }
   };
@@ -294,7 +294,7 @@ export const HvVerticalNavigationTree = ({
   };
 
   const handleStyledNavMouseLeave = () => {
-    if (collapsedMode === "icon" && !isOpen && !navigationPopup?.fixedMode) {
+    if (useIcons && !isOpen && !navigationPopup?.fixedMode) {
       setNavigationPopup(null);
     }
   };
@@ -307,7 +307,7 @@ export const HvVerticalNavigationTree = ({
         verticalNavigationTreeClasses.root,
         classes?.root,
         !isOpen &&
-          collapsedMode === "simple" &&
+          !useIcons &&
           clsx(verticalNavigationTreeClasses.collapsed, classes?.collapsed)
       )}
       onMouseLeave={handleStyledNavMouseLeave}
@@ -332,7 +332,7 @@ export const HvVerticalNavigationTree = ({
           expanded={expanded}
           onToggle={handleToggle}
         >
-          {collapsedMode === "icon" && !isOpen && navigationPopup && (
+          {useIcons && !isOpen && navigationPopup && (
             <HvVerticalNavigationPopup
               id={setId(id, "navigation-popup")}
               key={navigationPopup.uniqueKey}

diff --git a/packages/core/src/components/VerticalNavigation/NavigationPopup/NavigationPopup.tsx b/packages/core/src/components/VerticalNavigation/NavigationPopup/NavigationPopup.tsx
@@ -52,7 +52,7 @@ export const HvVerticalNavigationPopup = ({
     <StyledPopper open anchorEl={anchorEl} placement="right-start" {...others}>
       <ClickAwayListener onClickAway={handleClickAway}>
         <StyledPopupContainer>
-          <HvVerticalNavigation open>
+          <HvVerticalNavigation open useIcons>
             <HvVerticalNavigationTree
               className={clsx(verticalNavigationTreeClasses.popup)}
               id={setId(id, "tree")}

diff --git a/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.tsx b/packages/core/src/components/VerticalNavigation/TreeView/TreeViewItem.tsx
@@ -172,7 +172,7 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
       [nodeId, treeitemElement]
     );
 
-    const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);
+    const { isOpen, useIcons } = useContext(VerticalNavigationContext);
 
     const { index, parentId, level } = useDescendant(descendant);
 
@@ -431,7 +431,7 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
           onMouseDown={handleMouseDown}
           style={{
             paddingLeft:
-              (expandable || icon != null || !isOpen ? 0 : 10) +
+              (expandable || useIcons || !isOpen ? 0 : 10) +
               level * (collapsible ? 32 : 10),
           }}
           role={href ? undefined : "button"}
@@ -458,12 +458,10 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
           {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}
 
           <IconWrapper
-            icon={icon}
+            icon={useIcons && icon}
             label={payload?.label}
             hasChildren={Boolean(children)}
-            showAvatar={
-              !icon && level === 0 && !isOpen && collapsedMode === "icon"
-            }
+            showAvatar={!icon && useIcons}
             isOpen={isOpen}
             disableTooltip={disableTooltip}
           />
@@ -545,11 +543,9 @@ export const HvVerticalNavigationTreeViewItem = forwardRef(
             !selected &&
             clsx(treeViewItemClasses.unselected, classes?.unselected),
           focused && clsx(treeViewItemClasses.focused, classes?.focused),
+          !isOpen && !useIcons && clsx(treeViewItemClasses.hide, classes?.hide),
           !isOpen &&
-            collapsedMode === "simple" &&
-            clsx(treeViewItemClasses.hide, classes?.hide),
-          !isOpen &&
-            collapsedMode === "icon" &&
+            useIcons &&
             isChildSelected &&
             isChildSelected(nodeId) &&
             clsx(treeViewItemClasses.selected, classes?.selected)

diff --git a/...ages/core/src/components/VerticalNavigation/TreeView/__snapshots__/TreeView.test.tsx.snap b/...ages/core/src/components/VerticalNavigation/TreeView/__snapshots__/TreeView.test.tsx.snap
@@ -14,31 +14,12 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
         class="HvVerticalNavigationTreeViewItem-content er1eqbm0 HvTypography-root HvTypography-body css-9vz4rk-getStyledComponent-StyledContent e1tnpalo0"
         id="hvtreeview2-1-button"
         role="button"
-        style="padding-left: 0px;"
+        style="padding-left: 10px;"
         tabindex="0"
       >
         <div
           class="css-n1g5h0-StyledIconsContainer emephz1"
-        >
-          <div
-            class="css-f95wjz"
-            name="Play"
-          >
-            <svg
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                class="color0"
-                d="M12.984 8 2 1.723v12.554L12.984 8M15 8 1 16V0z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
-          </div>
-        </div>
+        />
         System
       </div>
       <ul
@@ -146,31 +127,12 @@ exports[`VerticalNavigation - Actions > should render correctly 1`] = `
         class="HvVerticalNavigationTreeViewItem-content er1eqbm0 HvTypography-root HvTypography-body css-9vz4rk-getStyledComponent-StyledContent e1tnpalo0"
         id="hvtreeview2-7-button"
         role="button"
-        style="padding-left: 0px;"
+        style="padding-left: 10px;"
         tabindex="0"
       >
         <div
           class="css-n1g5h0-StyledIconsContainer emephz1"
-        >
-          <div
-            class="css-f95wjz"
-            name="Stop"
-          >
-            <svg
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                class="color0"
-                d="M14 14H2V2h12zM3 13h10V3H3z"
-                fill="var(--uikit-colors-secondary)"
-              />
-            </svg>
-          </div>
-        </div>
+        />
         Administration
       </div>
       <ul

diff --git a/packages/core/src/components/VerticalNavigation/VerticalNavigation.stories.tsx b/packages/core/src/components/VerticalNavigation/VerticalNavigation.stories.tsx
@@ -40,7 +40,6 @@ export default {
 export const Main: StoryObj<HvVerticalNavigationProps> = {
   args: {
     open: true,
-    collapsedMode: "simple",
     slider: false,
   },
   argTypes: {},
@@ -366,7 +365,7 @@ export const Collapsible: StoryObj<HvVerticalNavigationProps> = {
 
     return (
       <div style={{ display: "flex", width: 220, height: 530 }}>
-        <HvVerticalNavigation open={show} collapsedMode="simple">
+        <HvVerticalNavigation open={show}>
           <HvVerticalNavigationHeader
             title="Menu"
             onCollapseButtonClick={handleIsExpanded}
@@ -422,6 +421,7 @@ export const CollapsibleIcons: StoryObj<HvVerticalNavigationProps> = {
             {
               id: "01-01",
               label: "Ambient Monitoring",
+              icon: <BarChart />,
             },
             {
               id: "01-02",
@@ -501,7 +501,7 @@ export const CollapsibleIcons: StoryObj<HvVerticalNavigationProps> = {
 
     return (
       <div style={{ display: "flex", width: 220, height: 530 }}>
-        <HvVerticalNavigation open={show} collapsedMode="icon">
+        <HvVerticalNavigation open={show} useIcons>
           <HvVerticalNavigationHeader
             title="Menu"
             onCollapseButtonClick={handleIsExpanded}
@@ -578,7 +578,7 @@ export const CollapsibleIconsWithoutSubItems: StoryObj<HvVerticalNavigationProps
 
       return (
         <div style={{ display: "flex", width: 220, height: 530 }}>
-          <HvVerticalNavigation open={show} collapsedMode="icon">
+          <HvVerticalNavigation open={show} useIcons>
             <HvVerticalNavigationHeader
               title="Menu"
               onCollapseButtonClick={handleIsExpanded}
@@ -723,7 +723,7 @@ export const CollapsibleIconsWithCustomPopupStyles: StoryObj<HvVerticalNavigatio
 
       return (
         <div style={{ display: "flex", width: 220, height: 530 }}>
-          <HvVerticalNavigation open={show} collapsedMode="icon">
+          <HvVerticalNavigation open={show} useIcons>
             <HvVerticalNavigationHeader
               title="Menu"
               onCollapseButtonClick={handleIsExpanded}
@@ -837,7 +837,7 @@ export const SliderMode: StoryObj<HvVerticalNavigationProps> = {
     return (
       <div>
         <div style={{ display: "flex", width: 220, height: 530 }}>
-          <HvVerticalNavigation open collapsedMode="simple" slider>
+          <HvVerticalNavigation open slider>
             <HvVerticalNavigationHeader title="Menu" />
             <HvVerticalNavigationTree
               collapsible
@@ -958,11 +958,7 @@ export const MobileNavigation: StoryObj<HvVerticalNavigationProps> = {
     return (
       <div>
         <div style={{ display: "flex", width: 220, height: 530 }}>
-          <HvVerticalNavigation
-            open={show}
-            collapsedMode="simple"
-            slider={isXs}
-          >
+          <HvVerticalNavigation open={show} slider={isXs}>
             <HvVerticalNavigationHeader
               title="Menu"
               onCollapseButtonClick={handleIsExpanded}

diff --git a/packages/core/src/components/VerticalNavigation/VerticalNavigation.test.tsx b/packages/core/src/components/VerticalNavigation/VerticalNavigation.test.tsx
@@ -13,10 +13,10 @@ import {
 } from "@core/components";
 
 const Sample = ({
-  collapsedMode,
+  useIcons,
   slider,
 }: {
-  collapsedMode?: "simple" | "icon";
+  useIcons?: boolean;
   slider?: boolean;
 }) => {
   const navigationData = useMemo<NavigationData[]>(
@@ -81,7 +81,7 @@ const Sample = ({
   };
   return (
     <div style={{ display: "flex", width: 220, height: 530 }}>
-      <HvVerticalNavigation collapsedMode={collapsedMode} slider={slider}>
+      <HvVerticalNavigation id="sample1" useIcons={useIcons} slider={slider}>
         <HvVerticalNavigationHeader
           title="Menu"
           onCollapseButtonClick={handleExpand}
@@ -215,10 +215,8 @@ describe("VerticalNavigation", () => {
     expect(container).toMatchSnapshot();
   });
 
-  it("should collapse", async () => {
-    const { getByRole, getByLabelText } = render(
-      <Sample collapsedMode="simple" />
-    );
+  it("should collapsed", async () => {
+    const { getByRole, getByLabelText } = render(<Sample />);
 
     const collapseButton = getByRole("button", { name: "collapseButton" });
     expect(collapseButton).toBeInTheDocument();
@@ -234,9 +232,7 @@ describe("VerticalNavigation", () => {
   });
 
   it("should have icons", async () => {
-    const { getByRole, getByLabelText } = render(
-      <Sample collapsedMode="icon" />
-    );
+    const { getByRole, getByLabelText } = render(<Sample useIcons />);
 
     const collapseButton = getByRole("button", { name: "collapseButton" });
     expect(collapseButton).toBeInTheDocument();