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

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

@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../../Box";
+
+export interface NavigationProps extends Pick<BoxProps, "sx" | "children"> {
+  /**
+   * Current application pathname.
+   */
+  currentPathname: string;
+  /**
+   * Navigation elements.
+   */
+  items: NavigationItem[];
+  /**
+   * Navigation elements style.
+   * @default basic
+   */
+  activeButtonType?: ActiveButtonType;
+  /**
+   * Callback fired when basic navigation button is clicked.
+   */
+  onClick?: ClickNavItem;
+  /**
+   * Allow show tooltip.
+   * @default false
+   */
+  disableTooltip?: boolean;
+  /**
+   * Allow ripple effect.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * Allow ripple touch effect.
+   * @default false
+   */
+  disableTouchRipple?: boolean;
+  /**
+   * If 'false', the active state for the first nav item is disabled during initial rendering.
+   * @default true
+   */
+  isDefaultActive?: boolean;
+}
+
+export interface NavigationItemType {
+  type?: "ITEM";
+  icon: JSX.Element;
+  label?: string;
+  id: string;
+  path: string;
+  disabled?: boolean;
+}
+
+export interface NavigationDividerType {
+  type: "DIVIDER";
+  children?: ReactNode;
+}
+
+export type NavigationItem = NavigationItemType | NavigationDividerType;
+
+export type ClickNavItem = (params: {
+  path: string | null;
+  id: string;
+}) => void;
+
+export enum ActiveButtonType {
+  Basic = "basic",
+  Indicator = "indicator",
+}

package/src/components/Navbar/constants.ts

@@ -0,0 +1,45 @@
+export const NAV_ANIMATION = "width 0.25s";
+
+export const NAV_ICON_PADDING = "4px";
+
+export const NAV_ICON_SIZE_PX = "24px";
+
+export let navBackgroundTransparent = false;
+
+export let navChildHeightPx = 56;
+
+export let navChildMarginPx = 0;
+
+export let navIsInWideMode = false;
+
+export let navMaxWidthPx = "288px";
+
+export let navBorder = true;
+
+export const navItemPaddingPx = (wideMode: boolean) =>
+  `calc((${navItemSizePx(
+    wideMode
+  )} - ${NAV_ICON_SIZE_PX} - ${NAV_ICON_PADDING} * 2 ) / 2)`;
+
+export const navItemSizePx = (wideMode: boolean) =>
+  wideMode ? "72px" : "56px";
+
+export const navLogoLeftMargin = (wideMode: boolean) =>
+  wideMode ? "8px" : "0px";
+
+export const navSetBackgroundTransparent = (transparent: boolean) =>
+  (navBackgroundTransparent = transparent);
+
+export const navSetChildHeightPx = (height: number) =>
+  (navChildHeightPx = height);
+
+export const navSetChildMarginPx = (margin: number) =>
+  (navChildMarginPx = margin);
+
+export const navSetMaxWidthPx = (maxWidth: number) =>
+  (navMaxWidthPx = maxWidth + "px");
+
+export const navSetWideMode = (wideMode: boolean) =>
+  (navIsInWideMode = wideMode);
+
+export const navSetBorder = (border: boolean) => (navBorder = border);

package/src/components/Navbar/hooks/useNavbarContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { NavbarContext } from "../NavbarProvider";
+
+export const useNavbarContext = () => {
+  const context = useContext(NavbarContext);
+
+  if (context === undefined) {
+    throw new Error("useNavbarProvider must be used within a NavbarProvider");
+  }
+
+  return context;
+};

package/src/components/Navbar/index.tsx

@@ -0,0 +1,7 @@
+export * from "./types";
+export * from "./Navbar";
+export * from "./ExtraNavigation";
+export * from "./NavbarFooter";
+export * from "./NavbarLogo";
+export * from "./Navigation";
+export * from "./NavbarButtons";

package/src/components/Navbar/styles.tsx

@@ -0,0 +1,44 @@
+import { CSSObject } from "@mui/material";
+
+import {
+  navItemSizePx,
+  NAV_ANIMATION,
+  navIsInWideMode,
+  navMaxWidthPx,
+  navBackgroundTransparent,
+  navBorder,
+} from "./constants";
+import { StyledComponentDefaultProps } from "../types/common";
+import { styleTokens } from "src/components/theme/constants/styleTokens";
+import { NavbarProps } from "./types";
+
+export default {
+  container: ({ theme, padded }: StyledComponentDefaultProps & NavbarProps) =>
+    ({
+      position: "relative",
+      display: "inline-flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      boxSizing: "content-box",
+      overflowX: "hidden",
+      background: navBackgroundTransparent
+        ? "inherit"
+        : theme.palette.primary.contrastText,
+      borderRight: navBorder
+        ? `1px solid ${theme.palette.base?.divider}`
+        : "none",
+      paddingTop: "8px",
+      transition: NAV_ANIMATION,
+      width: navItemSizePx(navIsInWideMode),
+      minWidth: navItemSizePx(navIsInWideMode),
+      "&.opened": {
+        background: theme.palette.primary.contrastText,
+        borderRight: `1px solid ${theme.palette.base?.divider}`,
+        width: navMaxWidthPx,
+      },
+      ".MuiButtonBase-root": {
+        padding: padded && styleTokens.paddingItem,
+      },
+    } as CSSObject),
+};

package/src/components/Navbar/types.ts

@@ -0,0 +1,67 @@
+import { CSSObject } from "@mui/material";
+import { BoxProps } from "../Box";
+import { TooltipProps as FdsTooltipProps } from "../Tooltip";
+
+export interface NavbarProps extends Pick<BoxProps, "children" | "sx"> {
+  /**
+   * Disallow expanding the drawer on hover.
+   * @default true
+   */
+  disableHoverListener?: boolean;
+  /**
+   * Changes the width from 56px to 72px
+   * @default false
+   */
+  wideMode?: boolean;
+  /**
+   * Height Offset for adjusting the height with headers
+   * @default 0
+   */
+  heightOffset?: number;
+  /**
+   * Callback fired when drawer state changed.
+   */
+  onDrawerSizeChanged?: (opened: boolean) => void;
+  /**
+   * Change the default height of cells
+   * @default 56
+   */
+  childHeight?: number;
+  /**
+   * Sets the Max Open Width of the drawer
+   * @default 288
+   */
+  maxOpenWidth?: number;
+  /**
+   * Turns background color of nav bar transparent while closed
+   * @default false
+   */
+  transparentBackground?: boolean;
+  /**
+   * Adds margin around each child
+   * @default 0
+   */
+  childMargin?: 0 | 4 | 8;
+  /**
+   * Props applied to the NavbarTooltip component
+   */
+  tooltipProps?: NavbarTooltipProps;
+  /**
+   * Controls right side border visibility. Right side border is optional in collapsed state only.
+   * @default true
+   */
+  border?: boolean;
+  /**
+   * Added padding between the list
+   * @default false
+   */
+  padded?: boolean;
+}
+
+export type NavbarStyleFunc = (payload: unknown) => CSSObject;
+
+export interface NavbarTooltipProps
+  extends Omit<
+    FdsTooltipProps,
+    "title" | "disableHoverListener" | "children"
+  > { }

package/src/index.ts

@@ -12,4 +12,10 @@ export { default as Copyright } from "./components/Copyright";
 export type { CopyrightProps } from "./components/Copyright";
 export { default as Icon } from "./components/Icon";
 export type { IconProps } from "./components/Icon";
+export * from "./components/Navbar";
+export type { NavbarProps } from "./components/Navbar";
+export { default as BottomNavigation } from "./components/BottomNavigation";
+export { default as BottomNavigationAction } from "./components/BottomNavigation/BottomNavigationAction";
+export type { BottomNavigationProps } from "./components/BottomNavigation";
+export type { BottomNavigationActionProps } from "./components/BottomNavigation/BottomNavigationAction";
 export * from "./components/theme";