Merge pull request #14 from vtexdocs/feat/hamburguerMenu-sections

Hamburguer menu sections

dist/index.d.mts

@@ -71,6 +71,7 @@ interface Props$1 {
 declare const CookieBar: ({ onAccept }: Props$1) => react_jsx_runtime.JSX.Element;
 
 type Section = {
+    id: string;
     link: string;
     title: string;
     description: string;
@@ -87,6 +88,8 @@ interface Props extends Partial<ContextType> {
     isPreview: boolean;
     /** The section currently selected. */
     sectionSelected: string;
+    /** The sections to be used on the hamburguer menu */
+    hamburguerMenuSections: Section[][];
     /** The portal language. The default is english. */
     locale?: 'en' | 'pt' | 'es';
 }
@@ -113,6 +116,8 @@ type ContextType = {
     closeSidebarElements: (parentsArray: string[]) => void;
     sidebarSections: Section[][];
     setSidebarSections: Dispatch<SetStateAction<Section[][]>>;
+    hamburguerSections: Section[][];
+    setHamburguerSections: Dispatch<SetStateAction<Section[][]>>;
     locale: 'en' | 'pt' | 'es';
 };
 type ActiveItem = {

dist/index.mjs

@@ -32,9 +32,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.js
+// node_modules/react-is/cjs/react-is.production.min.js
 var require_react_is_production_min = __commonJS({
-  "node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.js"(exports) {
+  "node_modules/react-is/cjs/react-is.production.min.js"(exports) {
     "use strict";
     var b = "function" === typeof Symbol && Symbol.for;
     var c = b ? Symbol.for("react.element") : 60103;
@@ -145,9 +145,9 @@ var require_react_is_production_min = __commonJS({
   }
 });
 
-// node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js
+// node_modules/react-is/cjs/react-is.development.js
 var require_react_is_development = __commonJS({
-  "node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js"(exports) {
+  "node_modules/react-is/cjs/react-is.development.js"(exports) {
     "use strict";
     if (process.env.NODE_ENV !== "production") {
       (function() {
@@ -300,9 +300,9 @@ var require_react_is_development = __commonJS({
   }
 });
 
-// node_modules/prop-types/node_modules/react-is/index.js
+// node_modules/react-is/index.js
 var require_react_is = __commonJS({
-  "node_modules/prop-types/node_modules/react-is/index.js"(exports, module) {
+  "node_modules/react-is/index.js"(exports, module) {
     "use strict";
     if (process.env.NODE_ENV === "production") {
       module.exports = require_react_is_production_min();
@@ -5711,6 +5711,8 @@ var LibraryContext = createContext({
   closeSidebarElements: () => void 0,
   sidebarSections: [],
   setSidebarSections: () => void 0,
+  hamburguerSections: [],
+  setHamburguerSections: () => void 0,
   locale: "en"
 });
 var LibraryContextProvider = ({ children, ...props }) => {
@@ -5728,6 +5730,9 @@ var LibraryContextProvider = ({ children, ...props }) => {
   const [sidebarDataMaster, setSidebarDataMaster] = useState2(props.fallback);
   const [isEditorPreview, setIsEditorPreview] = useState2(props.isPreview);
   const [sidebarSections, setSidebarSections] = useState2(props.sections);
+  const [hamburguerSections, setHamburguerSections] = useState2(
+    props.hamburguerMenuSections
+  );
   const locale = "en";
   useEffect3(() => {
     setSidebarDataMaster(props.fallback);
@@ -5813,6 +5818,8 @@ var LibraryContextProvider = ({ children, ...props }) => {
         setSidebarDataMaster,
         sidebarSections,
         setSidebarSections,
+        hamburguerSections,
+        setHamburguerSections,
         locale,
         ...props
       },
@@ -9175,33 +9182,40 @@ var HamburgerMenu = ({ parentsArray = [] }) => {
     activeSectionName,
     setActiveSectionName,
     setSidebarSectionHidden,
-    sidebarSections
+    hamburguerSections
   } = context;
+  const isDocument = (sections, documentID) => {
+    let isDoc = false;
+    if (Array.isArray(sections)) {
+      isDoc = sections.find((section) => section.documentation === documentID);
+    }
+    return isDoc;
+  };
   updateOpenPage({ parentsArray, context });
   return /* @__PURE__ */ jsx39(Header.ActionButton, { children: /* @__PURE__ */ jsx39(VtexHamburgerMenu, { sx: styles_default12.hamburgerContainer, children: /* @__PURE__ */ jsx39(VtexHamburgerMenu.Menu, { sx: styles_default12.innerHambugerContainer, children: /* @__PURE__ */ jsxs32(Box16, { sx: styles_default12.menuContainer, children: [
     /* @__PURE__ */ jsxs32(Box16, { sx: styles_default12.cardContainer, children: [
       /* @__PURE__ */ jsx39(Box16, { sx: styles_default12.hamburgerSearchContainer, children: /* @__PURE__ */ jsx39(SearchInput, {}) }),
-      sidebarSections.map((section, id) => /* @__PURE__ */ jsx39(
+      hamburguerSections.map((section, id) => /* @__PURE__ */ jsx39(
         Box16,
         {
           sx: id > 0 ? styles_default12.updatesContainer : styles_default12.documentationContainer,
           "data-cy": "dropdown-menu-first-section",
           children: section.map((card2) => /* @__PURE__ */ jsxs32(Box16, { sx: styles_default12.innerCardContainer, children: [
             /* @__PURE__ */ jsx39(documentation_card_default, { containerType: "mobile", ...card2 }),
-            /* @__PURE__ */ jsx39(
+            isDocument(sidebarDataMaster, card2.id) ? /* @__PURE__ */ jsx39(
               Button4,
               {
                 "aria-label": "Open sidebar",
                 size: "regular",
                 variant: "tertiary",
                 icon: () => /* @__PURE__ */ jsx39(IconCaret4, { direction: "right", size: 32 }),
-                sx: activeSectionName === card2.title && !sidebarSectionHidden ? styles_default12.arrowIconActive : styles_default12.arrowIcon,
+                sx: activeSectionName === card2.id && !sidebarSectionHidden ? styles_default12.arrowIconActive : styles_default12.arrowIcon,
                 onClick: () => {
-                  setActiveSectionName(card2.title);
+                  setActiveSectionName(card2.id);
                   setSidebarSectionHidden(false);
                 }
               }
-            )
+            ) : null
           ] }, card2.title))
         },
         id

src/lib/hamburger-menu/index.tsx

@@ -28,9 +28,20 @@ const HamburgerMenu = ({ parentsArray = [] }: HamburgerMenuProps) => {
     activeSectionName,
     setActiveSectionName,
     setSidebarSectionHidden,
-    sidebarSections,
+    hamburguerSections,
   } = context
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const isDocument = (sections: any, documentID: string) => {
+    let isDoc = false
+
+    if (Array.isArray(sections)) {
+      isDoc = sections.find((section) => section.documentation === documentID)
+    }
+
+    return isDoc
+  }
+
   updateOpenPage({ parentsArray, context })
 
   return (
@@ -42,7 +53,7 @@ const HamburgerMenu = ({ parentsArray = [] }: HamburgerMenuProps) => {
               <Box sx={styles.hamburgerSearchContainer}>
                 <SearchInput />
               </Box>
-              {sidebarSections.map((section, id) => (
+              {hamburguerSections.map((section, id) => (
                 <Box
                   sx={
                     id > 0
@@ -55,22 +66,24 @@ const HamburgerMenu = ({ parentsArray = [] }: HamburgerMenuProps) => {
                   {section.map((card) => (
                     <Box sx={styles.innerCardContainer} key={card.title}>
                       <DocumentationCard containerType="mobile" {...card} />
-                      <Button
-                        aria-label={'Open sidebar'}
-                        size="regular"
-                        variant="tertiary"
-                        icon={() => <IconCaret direction="right" size={32} />}
-                        sx={
-                          activeSectionName === card.title &&
-                          !sidebarSectionHidden
-                            ? styles.arrowIconActive
-                            : styles.arrowIcon
-                        }
-                        onClick={() => {
-                          setActiveSectionName(card.title)
-                          setSidebarSectionHidden(false)
-                        }}
-                      />
+                      {isDocument(sidebarDataMaster, card.id) ? (
+                        <Button
+                          aria-label={'Open sidebar'}
+                          size="regular"
+                          variant="tertiary"
+                          icon={() => <IconCaret direction="right" size={32} />}
+                          sx={
+                            activeSectionName === card.id &&
+                            !sidebarSectionHidden
+                              ? styles.arrowIconActive
+                              : styles.arrowIcon
+                          }
+                          onClick={() => {
+                            setActiveSectionName(card.id)
+                            setSidebarSectionHidden(false)
+                          }}
+                        />
+                      ) : null}
                     </Box>
                   ))}
                 </Box>

src/utils/context/libraryContext.tsx

@@ -15,6 +15,8 @@ interface Props extends Partial<ContextType> {
   isPreview: boolean
   /** The section currently selected. */
   sectionSelected: string
+  /** The sections to be used on the hamburguer menu */
+  hamburguerMenuSections: Section[][]
   /** The portal language. The default is english. */
   locale?: 'en' | 'pt' | 'es'
 }
@@ -44,6 +46,8 @@ export type ContextType = {
   closeSidebarElements: (parentsArray: string[]) => void
   sidebarSections: Section[][]
   setSidebarSections: Dispatch<SetStateAction<Section[][]>>
+  hamburguerSections: Section[][]
+  setHamburguerSections: Dispatch<SetStateAction<Section[][]>>
   locale: 'en' | 'pt' | 'es'
 }
 
@@ -80,6 +84,8 @@ export const LibraryContext = createContext<ContextType>({
   closeSidebarElements: () => undefined,
   sidebarSections: [],
   setSidebarSections: () => undefined,
+  hamburguerSections: [],
+  setHamburguerSections: () => undefined,
   locale: 'en',
 })
 
@@ -100,6 +106,9 @@ const LibraryContextProvider = ({ children, ...props }: Props) => {
   const [sidebarDataMaster, setSidebarDataMaster] = useState(props.fallback)
   const [isEditorPreview, setIsEditorPreview] = useState(props.isPreview)
   const [sidebarSections, setSidebarSections] = useState(props.sections)
+  const [hamburguerSections, setHamburguerSections] = useState(
+    props.hamburguerMenuSections
+  )
   const locale = 'en'
 
   useEffect(() => {
@@ -200,6 +209,8 @@ const LibraryContextProvider = ({ children, ...props }: Props) => {
         setSidebarDataMaster,
         sidebarSections,
         setSidebarSections,
+        hamburguerSections,
+        setHamburguerSections,
         locale,
         ...props,
       }}

src/utils/storybook-constants.tsx

@@ -22,6 +22,25 @@ export const sections = [
   ],
 ]
 
+export const hamburguerSections = [
+  [
+    {
+      Icon: APIGuidesIcon,
+      title: 'Guides',
+      description: 'Guides description',
+      link: '#',
+    },
+  ],
+  [
+    {
+      Icon: APIReferenceIcon,
+      title: 'Reference',
+      description: 'Reference description',
+      link: '#',
+    },
+  ],
+]
+
 export const navigationLocale = [
   {
     documentation: 'Guides',
@@ -95,6 +114,7 @@ export const exampleContextProps = {
   isPreview: false,
   sectionSelected: '',
   fallback: navigation,
+  hamburguerMenuSections: hamburguerSections
 }
 
 export const exampleContextPropsLocale = {

src/utils/typings/types.ts

@@ -1,6 +1,7 @@
 import { IconProps } from '@vtex/brand-ui'
 
 export type Section = {
+  id: string
   link: string
   title: string
   description: string