@openstack_dev/gatsby-theme-marketing-oif-core 1.0.12 → 1.0.13

package/package.json

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

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

@@ -0,0 +1,145 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { navigate } from "gatsby";
+import Box from "@mui/material/Box";
+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 styles from "../index.module.scss";
+
+function AuthUserSubNavBar({
+  member,
+  isMobile,
+  navbarMenu,
+  setActiveMenu,
+  isSearchBarOpen,
+  handleNavigation,
+}) {
+  const onClickLogout = () => {
+    navigate("/auth/logout", {
+      state: {
+        backUrl: window.location.pathname,
+      },
+    });
+  };
+
+  return isMobile ? (
+    <>
+      <Button
+        className={styles.mobileOption}
+        onClick={() => setActiveMenu("My Account")}
+        disableRipple
+      >
+        My Account
+        {navbarMenu === "My Account" ? (
+          <RemoveIcon aria-hidden="true" />
+        ) : (
+          <AddIcon aria-hidden="true" />
+        )}
+      </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/${
+                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.mobileDropdownOption}
+            sx={{ display: "block" }}
+            onClick={onClickLogout}
+            disableRipple
+          >
+            Log out
+          </Button>
+        </Box>
+      )}
+    </>
+  ) : (
+    <Box
+      maxWidth="15%"
+      sx={{
+        display: {
+          xs: "none",
+          md: isSearchBarOpen ? "none" : "flex",
+        },
+        justifyContent: "flex-end",
+        marginLeft: "auto",
+      }}
+    >
+      <Box
+        className={`${styles.navbarOption}`}
+        sx={{ my: 2, display: "block" }}
+      >
+        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/${
+                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>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+AuthUserSubNavBar.propTypes = {
+  member: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]),
+  isMobile: PropTypes.bool.isRequired,
+  navbarMenu: PropTypes.string.isRequired,
+  setActiveMenu: PropTypes.func,
+  isSearchBarOpen: PropTypes.bool,
+  handleNavigation: PropTypes.func.isRequired,
+};
+
+AuthUserSubNavBar.defaultProps = {
+  member: null,
+  isSearchBarOpen: false,
+  setActiveMenu: (option) => console.log(option),
+};
+
+export default AuthUserSubNavBar;

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { doLogin } from "openstack-uicore-foundation/lib/security/methods";
+import Button from "@mui/material/Button";
+
+import styles from "../index.module.scss";
+
+function LoginButton({ backUrl }) {
+  return (
+    <Button
+      className={`${styles.navbarOption} ${styles.login}`}
+      onClick={() => doLogin(backUrl)}
+      sx={{ my: 2, display: "block" }}
+      disableRipple
+    >
+      Log in
+    </Button>
+  );
+}
+
+LoginButton.propTypes = {
+  backUrl: PropTypes.string,
+};
+
+LoginButton.defaultProps = {
+  backUrl: "/",
+};
+
+export default LoginButton;

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+
+import styles from "./index.module.scss";
+
+function MobileMenu({ handleMobileMenuToggle }) {
+  return (
+    <Box
+      className={styles.mobileMenuWrapper}
+      sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
+    >
+      <IconButton
+        className={styles.toggleIcon}
+        size="large"
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={() => handleMobileMenuToggle()}
+        color="inherit"
+      >
+        <MenuIcon />
+      </IconButton>
+    </Box>
+  );
+}
+
+MobileMenu.propTypes = {
+  handleMobileMenuToggle: PropTypes.func.isRequired,
+};
+
+export default MobileMenu;

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

@@ -0,0 +1,9 @@
+.mobileMenuWrapper {
+  .toggleIcon {
+    color: #5a5a5a;
+    margin-left: auto;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+
+import styles from "../index.module.scss";
+
+function NavBarDropDown({ isMobile, items, handleNavigation }) {
+  return (
+    <Box className={isMobile ? styles.mobileDropdownMenu : styles.dropDownMenu}>
+      {items.map((subItem) => (!subItem.title && !subItem.link ? (
+        <div className={styles.divider} key={subItem.title} />
+      ) : (
+        <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>
+      )))}
+    </Box>
+  );
+}
+
+NavBarDropDown.propTypes = {
+  isMobile: PropTypes.bool,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      link: PropTypes.string,
+      title: PropTypes.string,
+      display: PropTypes.bool,
+      requiresAuth: PropTypes.bool,
+    }),
+  ).isRequired,
+  handleNavigation: PropTypes.func.isRequired,
+};
+
+NavBarDropDown.defaultProps = {
+  isMobile: false,
+};
+
+export default NavBarDropDown;

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+
+import styles from "./index.module.scss";
+import SearchBar from "../SearchBar";
+
+function NavBarHeader({ setIsSearchBarOpen }) {
+  return (
+    <Box className={styles.navbarHeader}>
+      <div className={styles.brandWrapper}>
+        <a
+          className={styles.navbarBrand}
+          href="/"
+          alt="Openstack logo"
+          aria-label="Go to homepage"
+        />
+      </div>
+      <SearchBar onSearchBarOpen={(value) => setIsSearchBarOpen(value)} />
+    </Box>
+  );
+}
+
+NavBarHeader.propTypes = {
+  setIsSearchBarOpen: PropTypes.func.isRequired,
+};
+
+export default NavBarHeader;

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

@@ -0,0 +1,55 @@
+.navbarHeader {
+  .brandWrapper {
+    margin: 10px 0;
+    padding-right: 20px;
+    float: left;
+    border-right: 1px solid #eee;
+    min-width: 135px;
+    a.navbarBrand {
+      background: url("../../../images/openstack-logo-full.svg") left no-repeat;
+      height: 35px;
+      width: 135px;
+      color: #777;
+      padding: 15px 15px;
+      font-size: 18px;
+      line-height: 20px;
+      display: block;
+    }
+  }
+  .navbarToggle {
+    appearance: button;
+    cursor: pointer;
+    position: relative;
+    float: right;
+    padding: 9px 10px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    background: transparent;
+    border: none;
+    .iconBar {
+      background-color: #5a5a5a;
+      height: 3px;
+      border-radius: 3px;
+      display: block;
+      width: 22px;
+      margin-top: 4px;
+    }
+    @media (min-width: 768px) {
+      display: none;
+    }
+  }
+  @media (min-width: 768px) and (max-width: 1310px) {
+    .brandWrapper {
+      width: 75px;
+      min-width: 75px;
+      margin-top: 0;
+      a.navbarBrand {
+        background: url("../../../images/openstack-logo-vert.svg") left
+          no-repeat;
+        margin-left: 0px !important;
+        height: 54px;
+        width: 59px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+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";
+import NavBarDropDown from "../NavBarDropDown";
+import Link from "../../Link";
+
+import styles from "../index.module.scss";
+
+function NavBarItem({
+  isMobile,
+  item,
+  navbarMenu,
+  setActiveMenu,
+  handleNavigation,
+}) {
+  return isMobile ? (
+    <>
+      <Button
+        disableRipple
+        className={styles.mobileOption}
+        key={`${item.title}-mobile`}
+        onClick={() => setActiveMenu(item.title)}
+      >
+        {item.title}
+        {item.items?.length > 0
+          && (item.title === navbarMenu ? (
+            <RemoveIcon aria-hidden="true" />
+          ) : (
+            <AddIcon aria-hidden="true" />
+          ))}
+      </Button>
+      {item.items?.length > 0 && item.title === navbarMenu && (
+        <NavBarDropDown
+          items={item.items}
+          handleNavigation={handleNavigation}
+          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>
+  );
+}
+
+NavBarItem.propTypes = {
+  isMobile: PropTypes.bool,
+  item: PropTypes.shape({
+    title: PropTypes.string,
+    link: PropTypes.string,
+    display: PropTypes.bool,
+    requiresAuth: PropTypes.bool,
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        link: PropTypes.string,
+        title: PropTypes.string,
+        display: PropTypes.bool,
+        requiresAuth: PropTypes.bool,
+      }),
+    ),
+  }),
+  navbarMenu: PropTypes.string.isRequired,
+  setActiveMenu: PropTypes.func,
+  handleNavigation: PropTypes.func.isRequired,
+};
+
+NavBarItem.defaultProps = {
+  isMobile: false,
+  setActiveMenu: (option) => console.log(option),
+};
+
+export default NavBarItem;

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

@@ -0,0 +1,83 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import LoginButton from "../LoginButton";
+import NavBarDropDown from "../NavBarDropDown";
+
+import styles from "../index.module.scss";
+
+function PublicUserSubNavBar({ isSearchBarOpen, isDesktop, handleNavigation }) {
+  const publicNavbarMenu = [
+    {
+      link: "https://openinfra.dev/join",
+      title: "Sign up for Foundation Membership",
+      display: true,
+      requiresAuth: false,
+    },
+    {
+      link: "https://openinfra.dev/join",
+      title: "Sponsor the Foundation",
+      display: true,
+      requiresAuth: false,
+    },
+    {
+      link: "https://openinfra.dev",
+      title: "More about the Foundation",
+      display: true,
+      requiresAuth: false,
+    },
+  ];
+
+  const getBackURL = () => {
+    let backUrl = "/";
+    if (window && typeof window !== "undefined") {
+      backUrl = window.location.pathname;
+    }
+    return backUrl;
+  };
+
+  return (
+    <Box
+      maxWidth={isDesktop ? "15%" : "100px"}
+      sx={
+        isDesktop
+          ? {
+            display: {
+              xs: "none",
+              md: isSearchBarOpen ? "none" : "flex",
+            },
+            justifyContent: "flex-end",
+            marginLeft: "auto",
+          }
+          : {}
+      }
+    >
+      <Box
+        className={`${styles.navbarOption} ${styles.join}`}
+        sx={{ my: 2, display: "block" }}
+      >
+        Join
+        <ArrowDropDownIcon className={styles.arrowDownIcon} />
+        <NavBarDropDown
+          items={publicNavbarMenu}
+          handleNavigation={handleNavigation}
+        />
+      </Box>
+      <LoginButton backUrl={getBackURL()} />
+    </Box>
+  );
+}
+
+PublicUserSubNavBar.propTypes = {
+  isSearchBarOpen: PropTypes.bool,
+  isDesktop: PropTypes.bool,
+  handleNavigation: PropTypes.func.isRequired,
+};
+
+PublicUserSubNavBar.defaultProps = {
+  isSearchBarOpen: false,
+  isDesktop: false,
+};
+
+export default PublicUserSubNavBar;

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

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { Script } from "gatsby";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import SearchIcon from "@mui/icons-material/Search";
+
+import {
+  SEARCH_WIDGET_BASE_URL,
+  getEnvVariable,
+} from "../../../utils/envVariables";
+
+import styles from "./index.module.scss";
+
+function SearchBar({ isMobile, isMobileMenuOpen, onSearchBarOpen }) {
+  const [isSearchBarOpen, setIsSearchBarOpen] = React.useState(false);
+
+  const handleSearchBarOpenClose = (value) => {
+    onSearchBarOpen(value);
+    setIsSearchBarOpen(value);
+  };
+
+  const handleCloseSearchBar = (event) => {
+    if (event?.target.matches(".ossw-search-bar-close")) {
+      handleSearchBarOpenClose(false);
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener("click", handleCloseSearchBar);
+    return () => {
+      document.removeEventListener("click", handleCloseSearchBar);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (isSearchBarOpen) {
+      const inputElement = document.getElementById("search-bar-input");
+      if (inputElement) {
+        inputElement.focus();
+      }
+    }
+  }, [isSearchBarOpen]);
+
+  return (
+    <>
+      <Script
+        src={`${getEnvVariable(SEARCH_WIDGET_BASE_URL)}/widget/embed.min.js`}
+      />
+      {isMobile ? (
+        <Box
+          className={`${styles.openstackSearchBarMobile} openstack-search-bar ossw-mobile`}
+          sx={{
+            visibility: {
+              xs: isMobileMenuOpen ? "visible" : "hidden",
+              md: "hidden",
+            },
+            opacity: { xs: isMobileMenuOpen ? "1" : "0", md: "0" },
+            height: { xs: isMobileMenuOpen ? "auto" : 0, md: 0 },
+            color: "#8a959e",
+          }}
+          data-baseurl={getEnvVariable(SEARCH_WIDGET_BASE_URL)}
+          data-context="www-openstack"
+        />
+      ) : (
+        <Box
+          className={styles.searchWrapper}
+          sx={{ display: { xs: "none", md: "flex" } }}
+        >
+          <div
+            role="button"
+            tabIndex={0}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") handleSearchBarOpenClose(true);
+            }}
+            onClick={() => handleSearchBarOpenClose(true)}
+            className={styles.searchComponent}
+          >
+            <SearchIcon className={styles.searchIcon} />
+            <span className={styles.headerSearchText}>Search</span>
+          </div>
+          <Box
+            className={`openstack-search-bar ${styles.openstackSearchBar}`}
+            style={{
+              visibility: isSearchBarOpen ? "visible" : "hidden",
+              opacity: isSearchBarOpen ? "1" : "0",
+            }}
+            data-baseurl={getEnvVariable(SEARCH_WIDGET_BASE_URL)}
+            data-context="www-openstack"
+          />
+        </Box>
+      )}
+    </>
+  );
+}
+
+SearchBar.propTypes = {
+  isMobile: PropTypes.bool,
+  isMobileMenuOpen: PropTypes.bool,
+  onSearchBarOpen: PropTypes.func,
+};
+
+SearchBar.defaultProps = {
+  isMobile: false,
+  isMobileMenuOpen: false,
+  onSearchBarOpen: () => null,
+};
+
+export default SearchBar;

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

@@ -0,0 +1,43 @@
+.searchWrapper {
+  padding: 20px 0px 15px 20px;
+  float: left;
+  text-transform: uppercase;
+  color: #8a959e;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 17.15px;
+  .searchComponent {
+    cursor: pointer;
+    z-index: 5;
+    position: relative;
+    .searchIcon {
+      width: 12px;
+      height: 12px;
+      line-height: 12px;
+      margin-right: 5px;
+    }
+  }
+  .openstackSearchBar {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    z-index: 100;
+    height: 70px;
+    padding-top: 10px;
+    padding-right: 12%;
+    background-color: #fff;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  @media (max-width: 768px) {
+    display: none;
+  }
+  @media (max-width: 1160px) {
+    .headerSearchText {
+      display: none;
+    }
+  }
+  @media (min-width: 768px) and (max-width: 1310px) {
+    padding: 25px 0px 15px 20px;
+  }
+}