@carrier-dpx/air-react-library 0.6.0 → 0.7.0

package/src/components/Navbar/NavbarButtons/NavbarFooterButton.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useMemo } from "react";
+import { styled } from "@mui/material/styles";
+import styles from "./styles";
+import Button, { ButtonProps } from "../../Button";
+import Box from "../../Box";
+import { CSSObject } from "@mui/material";
+import { getSxStyles } from "../../utils/styles";
+import { NavbarButtonClasses } from "./types";
+
+/**
+ * The NavbarFooterButton used for footer.
+ *
+ *  //Named Import
+ * `import { NavbarFooterButton } from '@carrier-io/air-react'`
+ */
+
+export interface NavbarFooterButtonProps
+  extends Pick<
+    ButtonProps,
+    "sx" | "children" | "onClick" | "id" | "size" | "disabled"
+  > {
+  /** The color of the component. */
+  color?: "primary" | "secondary" | "info";
+}
+
+const ContainerFooterButtonStyled = styled(Box)(
+  styles[NavbarButtonClasses.ContainerFooterBtn]
+);
+
+export const NavbarFooterButton: FC<NavbarFooterButtonProps> = ({
+  size = "large",
+  ...props
+}) => {
+  const maxSize = useMemo(() => {
+    if (size === "large") return 42;
+    if (size === "medium") return 36;
+    return 30;
+  }, [size]);
+
+  return (
+    <ContainerFooterButtonStyled
+      className={NavbarButtonClasses.ContainerFooterBtn}
+    >
+      <Button
+        {...props}
+        size={size}
+        sx={(theme) =>
+          ({
+            ...getSxStyles(theme, props.sx),
+            maxHeight: maxSize,
+            maxWidth: maxSize,
+          } as CSSObject)
+        }
+      />
+    </ContainerFooterButtonStyled>
+  );
+};

package/src/components/Navbar/NavbarButtons/NavbarTooltip.tsx

@@ -0,0 +1,56 @@
+import { FC, SyntheticEvent, useState } from "react";
+import Tooltip, { TooltipProps } from "../../Tooltip";
+import Typography from "../../Typography";
+import Fade from "../../Fade";
+import { useNavbarContext } from "../hooks/useNavbarContext";
+
+/**
+ * The NavbarTooltip used for navigation and extra buttons.
+ *   
+ *  //Named Import
+ * `import { NavbarTooltip } from '@carrier-io/air-react'`
+ */
+
+interface NavbarTooltipProps extends TooltipProps {}
+
+export const NavbarTooltip: FC<NavbarTooltipProps> = ({
+  title,
+  children,
+  TransitionComponent = Fade,
+  disableHoverListener,
+  ...rest
+}) => {
+  const enabled = rest.open;
+
+  const [open, setOpen] = useState<boolean>(false);
+  const { tooltipProps: NavbarTooltipProps = {} } = useNavbarContext();
+
+  const handleOpenTooltip = (_e: SyntheticEvent) => {
+    setOpen(true);
+  };
+
+  const handleCloseTooltip = (_e: SyntheticEvent | Event) => {
+    setOpen(false);
+  };
+
+  return (
+    <Tooltip
+      open={enabled && open}
+      onOpen={handleOpenTooltip}
+      onClose={handleCloseTooltip}
+      title={
+        <Typography variant="caption" component="span">
+          <b>{title}</b>
+        </Typography>
+      }
+      placement="right"
+      arrow
+      enterDelay={800}
+      TransitionComponent={TransitionComponent}
+      disableHoverListener={disableHoverListener}
+      {...NavbarTooltipProps}
+    >
+      {children}
+    </Tooltip>
+  );
+};

package/src/components/Navbar/NavbarButtons/NavigationButton.tsx

@@ -0,0 +1,98 @@
+import { FC } from "react";
+import clsx from "clsx";
+import { styled } from "@mui/material/styles";
+import { useNavbarContext } from "../hooks/useNavbarContext";
+import { NavbarButtonClasses as Classes } from "./types";
+import styles from "../NavbarButtons/styles";
+import Button, { ButtonProps } from "../../Button";
+import Typography from "../../Typography";
+import { NavbarTooltip } from "./NavbarTooltip";
+import { getSxStyles } from "../../utils/styles";
+import { CSSObject } from "@mui/material";
+import { navChildMarginPx } from "../constants";
+import { ActiveButtonType } from "../Navigation";
+
+/**
+ * The NavigationButton used for navigation buttons.
+ *
+ * //Named Import
+ * `import { NavigationButton } from '@carrier-io/air-react'`
+ */
+
+export interface NavigationButtonProps
+  extends Pick<ButtonProps, "sx" | "children"> {
+  data: { label?: string; id: string };
+  onClick: () => void;
+  disableTooltip: boolean;
+  withOffset?: boolean;
+  active?: boolean;
+  activeButtonType?: ActiveButtonType;
+  disabled?: boolean;
+  disableRipple?: boolean;
+  disableTouchRipple?: boolean;
+}
+
+const ButtonStyled = styled(Button)(styles[Classes.NavbarBtn]);
+
+export const NavigationButton: FC<NavigationButtonProps> = ({
+  data,
+  onClick,
+  disableTooltip,
+  active,
+  activeButtonType,
+  withOffset = false,
+  children,
+  disabled = false,
+  disableRipple = false,
+  disableTouchRipple = false,
+  ...rest
+}) => {
+  const { openedDrawer } = useNavbarContext();
+  const { id, label } = data;
+
+  // Tooltip uses label if it's non-empty and not just whitespace,
+  // otherwise falls back to id
+  const tooltipTitle = label?.trim() ? label : id;
+
+  const classNames = clsx({
+    [Classes.NavbarBtn]: true,
+    [Classes.BasicBtn]: activeButtonType === ActiveButtonType.Basic,
+    [Classes.WithIndicatorBtn]: activeButtonType === ActiveButtonType.Indicator,
+    [Classes.ActiveBtn]: active,
+    [Classes.WithOffsetBtn]: withOffset,
+  });
+
+  return (
+    <NavbarTooltip
+      title={tooltipTitle}
+      disableHoverListener={openedDrawer ? true : disableTooltip}
+    >
+      <ButtonStyled
+        {...rest}
+        variant="text"
+        onClick={() => onClick?.()}
+        className={classNames}
+        disabled={disabled}
+        disableRipple={disableRipple}
+        disableTouchRipple={disableTouchRipple}
+        data-testId={`navbar-button-${id}`}
+        sx={(theme) =>
+          ({
+            ...getSxStyles(theme, rest.sx),
+            margin: navChildMarginPx + "px 0px",
+          } as CSSObject)
+        }
+      >
+        {children}
+        {label && (
+          <Typography
+            component="span"
+            variant={withOffset ? "subtitle2" : "subtitle1"}
+          >
+            {label}
+          </Typography>
+        )}
+      </ButtonStyled>
+    </NavbarTooltip>
+  );
+};

package/src/components/Navbar/NavbarButtons/index.ts

@@ -0,0 +1,3 @@
+export * from "./NavbarTooltip";
+export * from "./NavigationButton";
+export * from "./NavbarFooterButton";

package/src/components/Navbar/NavbarButtons/styles.tsx

@@ -0,0 +1,112 @@
+import {
+  NAV_ICON_PADDING,
+  NAV_ICON_SIZE_PX,
+  navItemPaddingPx,
+  navItemSizePx,
+  NAV_ANIMATION,
+  navIsInWideMode,
+  navChildHeightPx,
+} from "../constants";
+import { NavbarStyleFunc } from "../types";
+import { NavbarButtonClasses } from "./types";
+import { StyledComponentDefaultProps } from "../../types/common";
+
+interface NavbarStyledProps extends StyledComponentDefaultProps {
+  openedDrawer?: boolean;
+}
+
+export default {
+  [NavbarButtonClasses.ContainerFooterBtn]: ({
+    theme,
+    openedDrawer,
+  }: NavbarStyledProps) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: NAV_ANIMATION,
+    width: openedDrawer
+      ? "100%"
+      : `calc(${NAV_ICON_SIZE_PX} + ${navItemPaddingPx(
+          navIsInWideMode
+        )} * 2)!important`,
+    margin: "6px",
+    "& button": {
+      width: "calc(100% - 24px)",
+      color: openedDrawer ? "" : "transparent!important",
+      minWidth: 0,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      whiteSpace: "nowrap",
+      marginLeft: "-5px",
+    },
+    "& .MuiSvgIcon-root": {
+      color: theme.palette.common.white,
+    },
+  }),
+  [NavbarButtonClasses.NavbarBtn]: ({
+    theme,
+  }: StyledComponentDefaultProps) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    whiteSpace: "nowrap",
+    color: theme.palette.action.active,
+    borderRadius: 0,
+    padding: 0,
+    minWidth: 0,
+    height: navChildHeightPx,
+    "&:hover": {
+      background: theme.palette.action.hover,
+      color: theme.palette.text.primary,
+    },
+    "& .MuiSvgIcon-root": {
+      width: NAV_ICON_SIZE_PX,
+      height: NAV_ICON_SIZE_PX,
+      margin: navItemPaddingPx(navIsInWideMode),
+      padding: NAV_ICON_PADDING,
+      boxSizing: "content-box",
+    },
+    [`&.${NavbarButtonClasses.BasicBtn}`]: {
+      background: "none",
+      "& .MuiSvgIcon-root": {
+        borderRadius: "4px",
+      },
+      "&:hover": {
+        background: "none",
+        "& .MuiSvgIcon-root": {
+          background: theme.palette.action.hover,
+        },
+      },
+      [`&.${NavbarButtonClasses.ActiveBtn}`]: {
+        color: theme.palette.primary.main,
+        "& .MuiSvgIcon-root": {
+          background: theme.palette.primary.outlinedHoverBackground,
+        },
+      },
+    },
+    [`&.${NavbarButtonClasses.WithIndicatorBtn}`]: {
+      position: "relative",
+      [`&.${NavbarButtonClasses.ActiveBtn}`]: {
+        color: theme.palette.primary.main,
+        background: theme.palette.primary.outlinedHoverBackground,
+        "&::after": {
+          content: `""`,
+          height: "22px",
+          width: "4px",
+          background: theme.palette.primary.main,
+          position: "absolute",
+          right: 0,
+          borderRadius: "4px 0 0 4px",
+        },
+      },
+    },
+    [`&.${NavbarButtonClasses.WithOffsetBtn}`]: {
+      paddingLeft: `calc(${navItemSizePx(navIsInWideMode)} - ${navItemPaddingPx(
+        navIsInWideMode
+      )})`,
+    },
+  }),
+} as {
+  [key: string]: NavbarStyleFunc;
+};

package/src/components/Navbar/NavbarButtons/types.ts

@@ -0,0 +1,8 @@
+export enum NavbarButtonClasses {
+  ContainerFooterBtn = "FdsNavbarFooterButton-container",
+  NavbarBtn = "FdsNavbarButton",
+  WithIndicatorBtn = "FdsNavbarButton-withIndicator",
+  BasicBtn = "FdsNavbarButton-basic",
+  ActiveBtn = "FdsNavbarButton-active",
+  WithOffsetBtn = "FdsNavbarButton-withOffset",
+}

package/src/components/Navbar/NavbarFooter/NavbarFooter.tsx

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import { styled } from "@mui/material/styles";
+import { NavbarFooterProps } from "./types";
+import footerStyles from "./styles";
+import Box from "../../Box";
+import SvgIcon from "src/components/SvgIcon";
+
+/**
+ * The NavbarFooter component allows adding buttons to the footer.
+ *
+ *  //Named Import
+ * `import { NavbarFooter } from '@carrier-io/air-react'`
+ */
+
+const ContainerStyled = styled(Box)(footerStyles.container);
+export const NavbarFooter: FC<NavbarFooterProps> = (props) => {
+  const { wideMode, children, showCarrierLogo, ...rest } = props;
+
+  const logoSXSAdjustment = wideMode
+    ? { width: 40, height: 15, ml: 2, mt: 3 }
+    : { width: 40, height: 15, ml: 1, mt: 3 };
+
+  return (
+    <ContainerStyled {...rest}>
+      {children}
+      {showCarrierLogo ? (
+        <SvgIcon viewBox="0 0 40 15" sx={logoSXSAdjustment}>
+          <path
+            d="M20 15C30.666 15 39.3125 11.6421 39.3125 7.5C39.3125 3.35786 30.666 0 20 0C9.334 0 0.6875 3.35786 0.6875 7.5C0.6875 11.6421 9.334 15 20 15Z"
+            fill="#152C73"
+          />
+          <path
+            d="M20.0001 0.849854C9.66788 0.849854 1.29242 3.83761 1.29242 7.50031C1.29242 11.163 9.66788 14.1508 20.0001 14.1508C30.3323 14.1508 38.7077 11.163 38.7077 7.50031C38.7077 3.83761 30.3323 0.849854 20.0001 0.849854ZM20.0001 13.713C9.81004 13.713 1.54992 10.9128 1.54992 7.50031C1.54992 4.08778 9.81004 1.28766 20.0001 1.28766C30.1901 1.28766 38.4502 4.08778 38.4502 7.50031C38.4502 10.9128 30.1901 13.713 20.0001 13.713ZM15.703 8.46321C15.5488 8.70036 15.2014 9.11341 14.9574 9.11341C14.893 9.11341 14.8541 9.07562 14.8541 9.00135C14.8541 8.90102 14.893 8.77593 14.893 8.77593L15.935 5.90024H15.0606L14.9453 6.21295C14.7911 5.97581 14.5845 5.88851 14.3284 5.88851C13.3118 5.88851 11.6528 7.30095 11.6528 8.75118C11.6528 9.37661 12.039 9.73884 12.5661 9.73884C13.0932 9.73884 13.5693 9.31407 13.9166 8.80069H13.9421C13.9287 8.88799 13.9032 9.02611 13.9032 9.15119C13.9032 9.46391 14.0709 9.70105 14.3927 9.70105C15.1129 9.70105 15.7433 8.77593 15.9498 8.46321H15.703ZM14.673 6.92569C14.673 6.92569 14.39 7.58761 14.1071 8.11271C13.875 8.53749 13.3614 9.17465 12.9872 9.17465C12.7176 9.17465 12.5755 8.98702 12.5755 8.6743C12.5755 7.61236 13.7463 6.13738 14.4021 6.13738C14.6207 6.13738 14.7495 6.32501 14.7495 6.56216C14.7508 6.67552 14.7253 6.78757 14.673 6.92569ZM27.7975 9.30104C27.308 9.30104 27.0894 8.95053 27.0894 8.56355C27.0894 8.42543 27.1028 8.22607 27.1283 8.11401C29.0072 8.05147 29.8427 7.40128 29.8427 6.70157C29.8427 6.1895 29.4055 5.839 28.7229 5.839C27.1792 5.839 26.1237 7.26447 26.1237 8.45149C26.1237 9.30104 26.6508 9.73884 27.5266 9.73884C28.3634 9.73884 29.1869 9.08865 29.5463 8.55182H29.3277C29.0072 8.86323 28.4667 9.30104 27.7975 9.30104ZM28.6209 6.07484C28.9173 6.07484 29.0327 6.28722 29.0327 6.5374C29.0327 6.92439 28.5311 7.82475 27.1926 7.84951C27.3214 7.08856 27.9383 6.07484 28.6209 6.07484ZM17.3111 9.62548H16.4487C16.4487 9.62548 17.1689 7.63842 17.3875 6.93742C17.4264 6.81233 17.4519 6.67552 17.4519 6.61297C17.4519 6.56346 17.4264 6.51264 17.362 6.51264C17.2722 6.51264 17.0536 6.61297 16.6539 7.16283H16.4219C16.898 6.40058 17.4894 5.88721 17.9012 5.88721C18.1707 5.88721 18.2874 6.03705 18.2874 6.27419C18.2874 6.43707 18.2096 6.74979 18.0299 7.37392C18.8024 6.01099 19.2906 5.82336 19.5991 5.83639C19.9209 5.83639 20.1006 6.04878 20.1006 6.31198C20.1006 6.58691 19.882 6.91136 19.5468 6.91136C19.3281 6.91136 19.1739 6.74848 19.1739 6.47355C19.1739 6.4488 19.1739 6.41101 19.1739 6.38625C18.9553 6.49831 18.3893 6.98563 17.7067 8.59873L17.3111 9.62548ZM11.5334 4.6624C11.4047 4.62461 11.2249 4.59985 11.0439 4.59985C9.31918 4.59985 7.82782 6.21295 7.82782 7.84951C7.82782 9.04956 8.58691 9.36228 9.20518 9.36228C9.92537 9.36228 10.4404 9.08735 10.9165 8.6743H11.174C10.8132 9.16162 10.0421 9.77402 8.9222 9.77402C7.39061 9.77402 6.79916 8.87366 6.79916 7.83648C6.79916 5.91196 8.90879 4.28583 11.1217 4.28583C11.984 4.28583 12.4722 4.58552 12.4722 5.0103C12.4722 5.28523 12.267 5.52237 11.9183 5.52237C11.6353 5.52237 11.4167 5.3595 11.4167 5.05981C11.4181 4.96339 11.469 4.78748 11.5334 4.6624ZM24.7222 5.90024H25.5846L24.5559 8.71339C24.5425 8.75118 24.4916 8.90102 24.4916 9.02611C24.4916 9.11341 24.5305 9.15119 24.5948 9.15119C24.8268 9.15119 25.2252 8.78896 25.4693 8.46321H25.7013C25.315 9.08865 24.6337 9.73884 24.0155 9.73884C23.7191 9.73884 23.5259 9.56424 23.5259 9.28931C23.5259 9.12644 23.5769 8.86454 23.7311 8.46452L24.7222 5.90024ZM25.9695 4.81224C25.9695 5.17447 25.661 5.52498 25.3003 5.52498C25.0951 5.52498 24.9395 5.39989 24.9395 5.13799C24.9395 4.77576 25.248 4.42525 25.6087 4.42525C25.8153 4.42525 25.9695 4.55034 25.9695 4.81224ZM21.081 9.62548H20.2187C20.2187 9.62548 20.9389 7.63842 21.1575 6.93742C21.1964 6.81233 21.2218 6.67552 21.2218 6.61297C21.2218 6.56346 21.1964 6.51264 21.132 6.51264C21.0421 6.51264 20.8235 6.61297 20.4239 7.16283H20.1918C20.668 6.40058 21.2594 5.88721 21.6711 5.88721C21.9407 5.88721 22.0574 6.03705 22.0574 6.27419C22.0574 6.43707 21.9796 6.74979 21.7999 7.37392C22.5724 6.01099 23.0606 5.82336 23.369 5.83639C23.6909 5.83639 23.8706 6.04878 23.8706 6.31198C23.8706 6.58691 23.652 6.91136 23.3167 6.91136C23.0981 6.91136 22.9439 6.74848 22.9439 6.47355C22.9439 6.4488 22.9439 6.41101 22.9439 6.38625C22.7253 6.49831 22.1593 6.98563 21.4767 8.59873L21.081 9.62548ZM31.1812 9.62548H30.3188C30.3188 9.62548 31.039 7.63842 31.2576 6.93742C31.2965 6.81233 31.322 6.67552 31.322 6.61297C31.322 6.56346 31.2965 6.51264 31.2322 6.51264C31.1423 6.51264 30.9237 6.61297 30.524 7.16283H30.292C30.7681 6.40058 31.3596 5.88721 31.7713 5.88721C32.0409 5.88721 32.1575 6.03705 32.1575 6.27419C32.1575 6.43707 32.0798 6.74979 31.9 7.37392C32.6725 6.01099 33.1607 5.82336 33.4692 5.83639C33.7911 5.83639 33.9708 6.04878 33.9708 6.31198C33.9708 6.58691 33.7522 6.91136 33.4169 6.91136C33.1983 6.91136 33.044 6.74848 33.044 6.47355C33.044 6.4488 33.044 6.41101 33.044 6.38625C32.8254 6.49831 32.2595 6.98563 31.5768 8.59873L31.1812 9.62548Z"
+            fill="white"
+          />
+        </SvgIcon>
+      ) : null}
+    </ContainerStyled>
+  );
+};

package/src/components/Navbar/NavbarFooter/index.ts

@@ -0,0 +1,2 @@
+export * from "./NavbarFooter";
+export * from "./types";

package/src/components/Navbar/NavbarFooter/styles.tsx

@@ -0,0 +1,14 @@
+import { CSSObject } from "@mui/material";
+
+export default {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: "24px",
+    width: "100%",
+    position: "absolute",
+    bottom: 0,
+  },
+} as {
+  [key in "container"]: CSSObject;
+};

package/src/components/Navbar/NavbarFooter/types.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from "../../Box";
+import { NavbarProps } from "../types";
+
+export interface NavbarFooterProps extends Pick<BoxProps, "children" | "sx"> {
+  /**
+   * Adds CarrierLogo as the last element.
+   */
+  showCarrierLogo?: boolean;
+
+  /**
+   * property directly depends on Navbar WideMode prop.
+   * NavbarProps Value
+   */
+  wideMode?: NavbarProps["wideMode"];
+}

package/src/components/Navbar/NavbarLogo/NavbarLogo.tsx

@@ -0,0 +1,45 @@
+import { FC } from "react";
+import { styled } from "@mui/material/styles";
+import btnStyles from "../NavbarButtons/styles";
+import logoStyles from "./styles";
+import { NavbarLogoProps } from "./types";
+import { useNavbarContext } from "../hooks/useNavbarContext";
+import Box from "../../Box";
+import Button from "../../Button";
+import Zoom from "../../Zoom/Zoom";
+import { NavbarTooltip } from "../NavbarButtons";
+import { NavbarButtonClasses } from "../NavbarButtons/types";
+
+const LogoContainerStyled = styled(Box)(logoStyles.container);
+const ButtonStyled = styled(Button)(btnStyles[NavbarButtonClasses.NavbarBtn]);
+
+/**
+ * The NavbarLogo component allows adding logo.
+ *
+ *  //Named Import
+ * `import { NavbarLogo } from '@carrier-io/air-react'`
+ */
+
+export const NavbarLogo: FC<NavbarLogoProps> = ({
+  label,
+  disableTooltip = false,
+  onClick,
+  children,
+  ...rest
+}) => {
+  const { openedDrawer } = useNavbarContext();
+
+  return (
+    <LogoContainerStyled {...rest}>
+      <NavbarTooltip
+        title={label ?? ""}
+        TransitionComponent={Zoom}
+        disableHoverListener={openedDrawer ? true : disableTooltip}
+      >
+        <ButtonStyled variant="text" onClick={(e) => onClick?.(e)}>
+          {children}
+        </ButtonStyled>
+      </NavbarTooltip>
+    </LogoContainerStyled>
+  );
+};

package/src/components/Navbar/NavbarLogo/index.ts

@@ -0,0 +1,2 @@
+export * from "./NavbarLogo";
+export * from "./types";

package/src/components/Navbar/NavbarLogo/styles.ts

@@ -0,0 +1,18 @@
+import { CSSObject } from "@mui/material";
+import {
+  navItemSizePx,
+  navLogoLeftMargin,
+  navIsInWideMode,
+} from "../constants";
+
+export default {
+  container: () =>
+    ({
+      width: "100%",
+      "& button": {
+        marginRight: navItemSizePx(navIsInWideMode),
+        marginLeft: navLogoLeftMargin(navIsInWideMode),
+        paddingLeft: "4px",
+      },
+    } as CSSObject),
+};

package/src/components/Navbar/NavbarLogo/types.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { BoxProps } from "../../Box";
+
+export interface NavbarLogoProps extends Pick<BoxProps, "children" | "sx"> {
+  /**
+   * Tooltip label.
+   */
+  label?: string;
+  /**
+   * Allow show tooltip.
+   * @default false
+   */
+  disableTooltip?: boolean;
+  /**
+   * Callback fired when logo is clicked.
+   */
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}

package/src/components/Navbar/NavbarProvider.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { NavbarTooltipProps } from "./types";
+
+const state: {
+  openedDrawer: boolean;
+  tooltipProps?: NavbarTooltipProps;
+} = {
+  openedDrawer: false,
+};
+
+export const NavbarContext = React.createContext(state);
+
+export const NavbarProvider = ({ value, children }: any) => (
+  <NavbarContext.Provider value={value}>{children}</NavbarContext.Provider>
+);

package/src/components/Navbar/Navigation/Navigation.tsx

@@ -0,0 +1,113 @@
+import { FC, useCallback, useEffect, useState } from "react";
+import { styled } from "@mui/material/styles";
+import {
+  ActiveButtonType,
+  ClickNavItem,
+  NavigationItem,
+  NavigationProps,
+} from "./types";
+import navigationStyles from "./styles";
+import Box from "../../Box";
+import Divider from "../../Divider";
+import { NavigationButton } from "../NavbarButtons";
+import { getCurrentNavItemByPath } from "./helpers";
+
+/**
+ * The Navigation component allows adding navigation buttons.
+ *
+ *  //Named Import
+ * `import { Navigation } from '@carrier/air-react'`
+ */
+
+const ContainerStyled = styled(Box)(navigationStyles.container);
+
+export const Navigation: FC<NavigationProps> = ({
+  currentPathname,
+  items,
+  onClick,
+  activeButtonType = ActiveButtonType.Basic,
+  disableTooltip = false,
+  disableRipple = false,
+  disableTouchRipple = false,
+  isDefaultActive = true,
+  ...rest
+}) => {
+  const [selectedNavigationItem, setSelectedNavigationItem] = useState<
+    NavigationItem | undefined
+  >(isDefaultActive ? items[0] : undefined);
+
+  useEffect(() => {
+    const currentNavigationItem = getCurrentNavItemByPath(
+      items,
+      currentPathname
+    );
+
+    if (!isDefaultActive) {
+      return setSelectedNavigationItem(currentNavigationItem);
+    }
+  }, []);
+
+  useEffect(() => {
+    const currentNavigationItem = getCurrentNavItemByPath(
+      items,
+      currentPathname
+    );
+
+    if (!isDefaultActive) {
+      return setSelectedNavigationItem(currentNavigationItem);
+    }
+    setSelectedNavigationItem(currentNavigationItem ?? items[0]);
+  }, [items, currentPathname]);
+
+  const handleClick: ClickNavItem = useCallback(
+    (params) => {
+      if (onClick) {
+        onClick(params);
+      }
+    },
+    [onClick]
+  );
+
+  return (
+    <ContainerStyled {...rest}>
+      {items.map((item, idx) => {
+        if (item.type === "DIVIDER") {
+          return (
+            <Divider key={`divider_${idx.toString()}`} sx={{ margin: "9px 0" }}>
+              {item.children}
+            </Divider>
+          );
+        }
+
+        return (
+          <NavigationButton
+            key={item.id}
+            data={{
+              id: item.id,
+              label: item.label,
+            }}
+            onClick={() =>
+              handleClick({
+                path: item.path || null,
+                id: item.id,
+              })
+            }
+            disableTooltip={disableTooltip}
+            disabled={item.disabled}
+            disableRipple={disableRipple}
+            disableTouchRipple={disableTouchRipple}
+            active={
+              selectedNavigationItem &&
+              (!selectedNavigationItem.type ||
+                selectedNavigationItem.type === "ITEM") &&
+              selectedNavigationItem.id === item.id
+            }
+            activeButtonType={activeButtonType}
+          >
+            {item.icon}
+          </NavigationButton>
+        );
+      })}
+    </ContainerStyled>
+  );
+};

package/src/components/Navbar/Navigation/helpers.ts

@@ -0,0 +1,9 @@
+import { NavigationItem } from "./types";
+
+export const getCurrentNavItemByPath = (
+  items: NavigationItem[],
+  path: string
+) =>
+  items.find(
+    (item) => (!item.type || item.type === "ITEM") && item.path === path
+  );

package/src/components/Navbar/Navigation/index.ts

@@ -0,0 +1,2 @@
+export * from "./Navigation";
+export * from "./types";

package/src/components/Navbar/Navigation/styles.tsx

@@ -0,0 +1,10 @@
+import { CSSObject } from "@mui/material";
+
+export default {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+  },
+} as {
+  [key in "container"]: CSSObject;
+};