@openstack_dev/gatsby-theme-marketing-oif-core 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstack_dev/gatsby-theme-marketing-oif-core",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Base theme for Marketing Sites",
   "author": "smarcet",
   "keywords": [

package/src/components/Navbar/AuthUserSubNavBar/index.js

@@ -6,6 +6,7 @@ import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Link from "../../Link";
 
 import styles from "../index.module.scss";
 
@@ -15,7 +16,6 @@ function AuthUserSubNavBar({
   navbarMenu,
   setActiveMenu,
   isSearchBarOpen,
-  handleNavigation,
 }) {
   const onClickLogout = () => {
     navigate("/auth/logout", {
@@ -40,36 +40,38 @@ function AuthUserSubNavBar({
         )}
       </Button>
       {navbarMenu === "My Account" && (
-        <Box className={styles.mobileDropdownMenu}>
-          <Button
-            className={styles.mobileDropdownOption}
-            onClick={() => handleNavigation("/profile/")}
-            sx={{ display: "block" }}
-            disableRipple
-          >
-            Edit Profile
-          </Button>
-          <Button
-            className={styles.mobileDropdownOption}
-            onClick={() => handleNavigation(
-              `/community/members/profile/${
+        <Box className={styles.mobileDropdownMenu} component="ul">
+          <li role="presentation">
+            <Link
+              className={styles.mobileDropdownOption}
+              to="/profile/"
+              sx={{ display: "block" }}
+            >
+              Edit Profile
+            </Link>
+          </li>
+          <li role="presentation">
+            <Link
+              className={styles.mobileDropdownOption}
+              to={`/community/members/profile/${
                 member.id
-              }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
-            )}
-            sx={{ display: "block" }}
-            disableRipple
-          >
-            View Public Profile
-          </Button>
+              }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`}
+              sx={{ display: "block" }}
+            >
+              View Public Profile
+            </Link>
+          </li>
           <div className={styles.divider} />
-          <Button
-            className={styles.mobileDropdownOption}
-            sx={{ display: "block" }}
-            onClick={onClickLogout}
-            disableRipple
-          >
-            Log out
-          </Button>
+          <li role="presentation">
+            <Button
+              className={styles.mobileDropdownOption}
+              sx={{ display: "block" }}
+              onClick={onClickLogout}
+              disableRipple
+            >
+              Log out
+            </Button>
+          </li>
         </Box>
       )}
     </>
@@ -91,36 +93,40 @@ function AuthUserSubNavBar({
       >
         My Account
         <ArrowDropDownIcon className={styles.arrowDownIcon} />
-        <Box className={styles.dropDownMenu}>
-          <Button
-            className={styles.dropdownMenuOption}
-            onClick={() => handleNavigation("/profile/")}
-            sx={{ display: "block" }}
-            disableRipple
-          >
-            Edit Profile
-          </Button>
-          <Button
-            className={styles.dropdownMenuOption}
-            onClick={() => handleNavigation(
-              `/community/members/profile/${
+        <Box className={styles.dropDownMenu} component="ul">
+          <li role="presentation">
+            <Link
+              className={styles.dropdownMenuOption}
+              to="/profile/"
+              sx={{ display: "block" }}
+            >
+              Edit Profile
+            </Link>
+          </li>
+          <li role="presentation">
+            <Link
+              className={styles.dropdownMenuOption}
+              to={`/community/members/profile/${
                 member.id
-              }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`,
-            )}
-            sx={{ display: "block" }}
-            disableRipple
-          >
-            View Public Profile
-          </Button>
-          <div className={styles.divider} />
-          <Button
-            className={styles.dropdownMenuOption}
-            sx={{ display: "block" }}
-            onClick={onClickLogout}
-            disableRipple
-          >
-            Log out
-          </Button>
+              }/${`${member.first_name.toLowerCase()}-${member.last_name.toLowerCase()}`}`}
+              sx={{ display: "block" }}
+            >
+              View Public Profile
+            </Link>
+          </li>
+          <li role="presentation">
+            <div className={styles.divider} />
+          </li>
+          <li role="presentation">
+            <Button
+              className={styles.dropdownMenuOption}
+              sx={{ display: "block" }}
+              onClick={onClickLogout}
+              disableRipple
+            >
+              Log out
+            </Button>
+          </li>
         </Box>
       </Box>
     </Box>
@@ -133,7 +139,6 @@ AuthUserSubNavBar.propTypes = {
   navbarMenu: PropTypes.string.isRequired,
   setActiveMenu: PropTypes.func,
   isSearchBarOpen: PropTypes.bool,
-  handleNavigation: PropTypes.func.isRequired,
 };
 
 AuthUserSubNavBar.defaultProps = {

package/src/components/Navbar/NavBarDropDown/index.js

@@ -1,27 +1,36 @@
 import * as React from "react";
 import PropTypes from "prop-types";
 import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
+import Link from "../../Link";
 
 import styles from "../index.module.scss";
 
-function NavBarDropDown({ isMobile, items, handleNavigation }) {
+function NavBarDropDown({ isMobile, items }) {
   return (
-    <Box className={isMobile ? styles.mobileDropdownMenu : styles.dropDownMenu}>
+    <Box
+      className={isMobile ? styles.mobileDropdownMenu : styles.dropDownMenu}
+      component="ul"
+    >
       {items.map((subItem) => (!subItem.title && !subItem.link ? (
-        <div className={styles.divider} key={subItem.title} />
+        <li role="presentation">
+          <div className={styles.divider} key={subItem.title} />
+        </li>
       ) : (
-        <Button
-          className={
-              isMobile ? styles.mobileDropdownOption : styles.dropdownMenuOption
-            }
-          key={isMobile ? `${subItem.title}-mobile` : subItem.title}
-          onClick={(ev) => handleNavigation(ev, subItem.link)}
-          sx={{ display: "block" }}
-          disableRipple
-        >
-          {subItem.title}
-        </Button>
+        <li role="presentation">
+          <Link
+            className={
+                isMobile
+                  ? styles.mobileDropdownOption
+                  : styles.dropdownMenuOption
+              }
+            key={isMobile ? `${subItem.title}-mobile` : subItem.title}
+            to={subItem.link}
+            sx={{ display: "block" }}
+            disableRipple
+          >
+            {subItem.title}
+          </Link>
+        </li>
       )))}
     </Box>
   );
@@ -37,7 +46,6 @@ NavBarDropDown.propTypes = {
       requiresAuth: PropTypes.bool,
     }),
   ).isRequired,
-  handleNavigation: PropTypes.func.isRequired,
 };
 
 NavBarDropDown.defaultProps = {

package/src/components/Navbar/NavBarItem/index.js

@@ -1,6 +1,5 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import Button from "@mui/material/Button";
 import AddIcon from "@mui/icons-material/Add";
 import RemoveIcon from "@mui/icons-material/Remove";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
@@ -10,56 +9,47 @@ import Link from "../../Link";
 import styles from "../index.module.scss";
 
 function NavBarItem({
-  isMobile,
-  item,
-  navbarMenu,
-  setActiveMenu,
-  handleNavigation,
+  isMobile, item, navbarMenu, setActiveMenu,
 }) {
   return isMobile ? (
     <>
-      <Button
-        disableRipple
-        className={styles.mobileOption}
-        key={`${item.title}-mobile`}
-        onClick={() => setActiveMenu(item.title)}
-      >
-        {item.title}
+      <li role="presentation" className={styles.mobileOption}>
+        <Link key={`${item.title}-mobile`} to={item.link}>
+          {item.title}
+        </Link>
         {item.items?.length > 0
           && (item.title === navbarMenu ? (
-            <RemoveIcon aria-hidden="true" />
+            <RemoveIcon aria-hidden="true" onClick={() => setActiveMenu("")} />
           ) : (
-            <AddIcon aria-hidden="true" />
+            <AddIcon
+              aria-hidden="true"
+              onClick={() => setActiveMenu(item.title)}
+            />
           ))}
-      </Button>
+      </li>
       {item.items?.length > 0 && item.title === navbarMenu && (
-        <NavBarDropDown
-          items={item.items}
-          handleNavigation={handleNavigation}
-          isMobile
-        />
+        <NavBarDropDown items={item.items} isMobile />
       )}
     </>
   ) : (
-    <Link
-      className={styles.navbarOption}
-      key={item.title}
-      sx={{ my: 2, display: "block" }}
-      href={item.link}
-    >
-      {item.items?.length > 0 ? (
-        <>
-          {item.title}
-          <ArrowDropDownIcon className={styles.arrowDownIcon} />
-          <NavBarDropDown
-            items={item.items}
-            handleNavigation={handleNavigation}
-          />
-        </>
-      ) : (
-        item.title
-      )}
-    </Link>
+    <li role="presentation">
+      <Link
+        className={styles.navbarOption}
+        key={item.title}
+        sx={{ my: 2, display: "block" }}
+        to={item.link}
+      >
+        {item.items?.length > 0 ? (
+          <>
+            {item.title}
+            <ArrowDropDownIcon className={styles.arrowDownIcon} />
+            <NavBarDropDown items={item.items} />
+          </>
+        ) : (
+          item.title
+        )}
+      </Link>
+    </li>
   );
 }
 
@@ -81,7 +71,6 @@ NavBarItem.propTypes = {
   }),
   navbarMenu: PropTypes.string.isRequired,
   setActiveMenu: PropTypes.func,
-  handleNavigation: PropTypes.func.isRequired,
 };
 
 NavBarItem.defaultProps = {

package/src/components/Navbar/PublicUserSubNavBar/index.js

@@ -7,7 +7,7 @@ import NavBarDropDown from "../NavBarDropDown";
 
 import styles from "../index.module.scss";
 
-function PublicUserSubNavBar({ isSearchBarOpen, isDesktop, handleNavigation }) {
+function PublicUserSubNavBar({ isSearchBarOpen, isDesktop }) {
   const publicNavbarMenu = [
     {
       link: "https://openinfra.dev/join",
@@ -59,10 +59,7 @@ function PublicUserSubNavBar({ isSearchBarOpen, isDesktop, handleNavigation }) {
       >
         Join
         <ArrowDropDownIcon className={styles.arrowDownIcon} />
-        <NavBarDropDown
-          items={publicNavbarMenu}
-          handleNavigation={handleNavigation}
-        />
+        <NavBarDropDown items={publicNavbarMenu} />
       </Box>
       <LoginButton backUrl={getBackURL()} />
     </Box>
@@ -72,7 +69,6 @@ function PublicUserSubNavBar({ isSearchBarOpen, isDesktop, handleNavigation }) {
 PublicUserSubNavBar.propTypes = {
   isSearchBarOpen: PropTypes.bool,
   isDesktop: PropTypes.bool,
-  handleNavigation: PropTypes.func.isRequired,
 };
 
 PublicUserSubNavBar.defaultProps = {

package/src/components/Navbar/index.module.scss

@@ -62,6 +62,7 @@
       opacity: 0;
       transition: opacity 0.3s ease;
       .dropdownMenuOption {
+        display: inline-block;
         color: #8a959e;
         font-size: 12px;
         font-weight: 400;
@@ -70,6 +71,7 @@
         padding: 15px 15px;
         text-decoration: none;
         text-align: left;
+        width: 100%;
         &:hover {
           color: #333;
           background-color: #f5f5f5;
@@ -143,6 +145,11 @@
   }
   .navbarMobileMenu {
     flex-direction: column;
+    padding-inline-start: 0px;
+    color: #8a959e;
+    li {
+      list-style: none;
+    }
     .openstackSearchBarMobile {
       display: block;
       visibility: hidden;
@@ -150,6 +157,7 @@
       transition: visibility 0.3s ease;
     }
     .mobileOption {
+      display: inline-flex;
       color: #8a959e;
       justify-content: space-between;
       line-height: 20px;
@@ -159,11 +167,22 @@
       text-transform: uppercase;
       position: relative;
       padding: 15px 15px;
-      cursor: pointer;
-      &:hover,
-      &:visited {
-        color: #333;
-        background-color: transparent;
+      a {
+        color: #8a959e;
+        text-decoration: none;
+        &:visited {
+          color: #8a959e;
+          background-color: transparent;
+          text-decoration: none;
+        }
+        &:hover {
+          color: #333;
+          background-color: transparent;
+          text-decoration: none;
+        }
+      }
+      svg {
+        cursor: pointer;
       }
     }
     .mobileDropdownMenu {
@@ -176,15 +195,26 @@
       background: #edf2f7;
       opacity: 1;
       border-radius: 4px;
+      transition: opacity 0.3s ease;
       .mobileDropdownOption {
+        display: inline-block;
         color: #8a959e;
         font-size: 12px;
         font-weight: 400;
         text-align: left;
-        &:hover,
+        text-decoration: none;
+        text-transform: uppercase;
+        width: 100%;
+        padding: 5px 15px 5px 25px;
         &:visited {
+          color: #8a959e;
+          background-color: transparent;
+          text-decoration: none;
+        }
+        &:hover {
           color: #333;
           background-color: transparent;
+          text-decoration: none;
         }
       }
       .divider {

package/src/components/Navbar/template.js

@@ -1,6 +1,5 @@
 import * as React from "react";
 import PropTypes from "prop-types";
-import { navigate } from "gatsby";
 import { connect } from "react-redux";
 import { Container } from "@mui/material";
 import "@fortawesome/fontawesome-free/css/all.css";
@@ -30,11 +29,6 @@ function NavBarTemplate({ data, isLoggedUser, member }) {
     setNavbarMenu("");
   };
 
-  const handleNavigation = (ev, url) => {
-    ev.preventDefault();
-    navigate(url);
-  };
-
   return (
     <nav role="navigation">
       <AppBar
@@ -59,6 +53,7 @@ function NavBarTemplate({ data, isLoggedUser, member }) {
                 },
                 justifyContent: "flex-end",
               }}
+              component="ul"
             >
               {data.items.map(
                 (item) => item.display && (
@@ -66,7 +61,6 @@ function NavBarTemplate({ data, isLoggedUser, member }) {
                   key={`navbar-item-${item.title}`}
                   item={item}
                   navbarMenu={navbarMenu}
-                  handleNavigation={handleNavigation}
                 />
                 ),
               )}
@@ -77,12 +71,10 @@ function NavBarTemplate({ data, isLoggedUser, member }) {
                 member={member}
                 navbarMenu={navbarMenu}
                 isSearchBarOpen={isSearchBarOpen}
-                handleNavigation={handleNavigation}
               />
             ) : (
               <PublicUserSubNavBar
                 isSearchBarOpen={isSearchBarOpen}
-                handleNavigation={handleNavigation}
                 isDesktop
               />
             )}
@@ -94,6 +86,7 @@ function NavBarTemplate({ data, isLoggedUser, member }) {
               sx={{
                 display: { xs: "flex", md: "none" },
               }}
+              component="ul"
             >
               {data.items.map(
                 (item) => item.display && (
@@ -102,7 +95,6 @@ function NavBarTemplate({ data, isLoggedUser, member }) {
                   key={`navbar-item-mobile-${item.title}`}
                   navbarMenu={navbarMenu}
                   setActiveMenu={(option) => handleSetActiveMenu(option)}
-                  handleNavigation={handleNavigation}
                   isMobile
                 />
                 ),
@@ -112,11 +104,10 @@ function NavBarTemplate({ data, isLoggedUser, member }) {
                   member={member}
                   navbarMenu={navbarMenu}
                   setActiveMenu={(option) => handleSetActiveMenu(option)}
-                  handleNavigation={handleNavigation}
                   isMobile
                 />
               ) : (
-                <PublicUserSubNavBar handleNavigation={handleNavigation} />
+                <PublicUserSubNavBar />
               )}
             </Box>
           )}

package/src/content/site-settings/index.json

@@ -1 +1 @@
-{ "staticJsonFilesBuildTime": [], "lastBuild": 1714691681596 }
+{ "staticJsonFilesBuildTime": [], "lastBuild": 1714750103949 }