@carrier-dpx/air-react-library 0.7.10 → 0.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.7.10",
+  "version": "0.7.12",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/AppBar/AppBar.figma.tsx

@@ -0,0 +1,107 @@
+/**
+ * Figma Code Connect Configuration for AppBar Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=31342-130614
+ */
+
+import figma from "@figma/code-connect";
+import AppBar from "./AppBar";
+import { Toolbar } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import Typography from "../Typography";
+import Button from "../Button";
+import Icon from "../Icon";
+import { MenuIcon } from "../Icon/icons/demo";
+
+figma.connect(
+  AppBar,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=31342-130614",
+  {
+    props: {
+      /**
+       * SIZE MAPPING
+       * Maps Figma's "size" property to React's "size" prop
+       * Figma: dense (48px), basic (64px), prominent (128px)
+       */
+      size: figma.enum("size", {
+        dense: "dense",
+        basic: "basic",
+        prominent: "prominent",
+      }),
+
+      /**
+       * COLOR MAPPING
+       * Maps Figma's "color" property to React's "color" prop
+       */
+      color: figma.enum("color", {
+        paper: "paper",
+        primary: "primary",
+        base: "base",
+        transparent: "transparent",
+        accent: "accent",
+      }),
+
+      /**
+       * DIVIDER MAPPING
+       * Maps Figma's "divider" boolean property to React's "divider" prop
+       */
+      divider: figma.boolean("divider"),
+
+      /**
+       * ELEVATION MAPPING
+       * Maps Figma's "elevation" boolean property to React's "elevation" prop
+       */
+      elevation: figma.boolean("elevation"),
+
+      /**
+       * POSITION
+       * AppBar position prop
+       */
+      position: figma.enum("position", {
+        static: "static",
+        fixed: "fixed",
+        absolute: "absolute",
+        sticky: "sticky",
+        relative: "relative",
+      }),
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * 
+     * Shows how AppBar should be used with Toolbar and content
+     */
+    example: ({ size, color, divider, elevation, position }) => (
+      <AppBar 
+        size={size} 
+        color={color} 
+        divider={divider} 
+        elevation={elevation}
+        position={position || "static"}
+      >
+        <Toolbar>
+          <IconButton
+            aria-label="menu"
+            color="inherit"
+            edge="start"
+            size="large"
+            sx={{ mr: 2 }}
+          >
+            <Icon fontSize="medium">
+              <MenuIcon />
+            </Icon>
+          </IconButton>
+          <Typography
+            sx={{ flexGrow: 1 }}
+            variant="h6"
+          >
+            News
+          </Typography>
+          <Button color="primary">
+            Login
+          </Button>
+        </Toolbar>
+      </AppBar>
+    ),
+  }
+);

package/src/components/AppBar/AppBar.tsx

@@ -0,0 +1,95 @@
+import { forwardRef } from "react";
+
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import { CSSObject } from "@mui/material/styles";
+
+import { getSxStyles } from "../utils/styles";
+
+export interface AppBarProps extends Omit<MuiAppBarProps, "color"> {
+  color?: "paper" | "accent" | "transparent" | "primary" | "base";
+  /**
+   * Size of the AppBar
+   * - dense: 48px height
+   * - basic: 64px height (default)
+   * - prominent: 128px height
+   */
+  size?: "dense" | "basic" | "prominent";
+  /**
+   * Whether to show a divider at the bottom
+   * @default false
+   */
+  divider?: boolean;
+  /**
+   * Whether to show elevation/shadow
+   * @default true
+   */
+  elevation?: boolean;
+}
+
+/** The AppBar component displays application-wide actions, search and information.
+ *
+ * // Default import
+ * import AppBar from '@carrier-dpx/air-react-library/AppBar'
+ *
+ * // Named import
+ * import { AppBar } from '@carrier-dpx/air-react-library'
+ */
+
+const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
+  ({ sx, color = "primary", size = "basic", divider = false, elevation = true, ...rest }, ref) => {
+    // Map size to height
+    const getHeight = () => {
+      switch (size) {
+        case "dense":
+          return "48px";
+        case "prominent":
+          return "128px";
+        case "basic":
+        default:
+          return "64px";
+      }
+    };
+
+    return (
+      <MuiAppBar
+        {...rest}
+        enableColorOnDark
+        elevation={elevation && color !== "transparent" ? 4 : 0}
+        sx={(theme) =>
+          ({
+            ...getSxStyles(theme, sx),
+            height: getHeight(),
+            ...(divider && {
+              borderBottom: `1px solid ${theme.palette.divider}`,
+            }),
+            ...(color === "paper" && {
+              backgroundColor: theme.palette.base?.background.paper,
+              color: theme.palette.base?.text.primary,
+            }),
+            ...(color === "accent" && {
+              backgroundColor: theme.palette.base?.background.accent,
+              color: theme.palette.base?.text.primary,
+            }),
+            ...(color === "transparent" && {
+              backgroundColor: "transparent",
+              color: theme.palette.base?.text.primary,
+            }),
+            ...(color === "primary" && {
+              backgroundColor: theme.palette.primary.dark,
+              color: theme.palette.primary.contrastText,
+            }),
+            ...(color === "base" && {
+              backgroundColor: theme.palette.base?.dark,
+              color: theme.palette.base?.contrastText,
+            }),
+          } as CSSObject)
+        }
+        ref={ref}
+      />
+    );
+  }
+);
+
+AppBar.displayName = "AppBar";
+
+export default AppBar;

package/src/components/AppBar/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./AppBar";
+export * from "./AppBar";
+export type { AppBarProps } from "./AppBar";

package/src/components/Icon/icons/demo/MenuIcon.figma.tsx

@@ -0,0 +1,33 @@
+/**
+ * Figma Code Connect Configuration for MenuIcon
+ * 
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=8-98
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { MenuIcon } from "./MenuIcon";
+
+figma.connect(
+  MenuIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=8-98",
+  {
+    props: {
+      /**
+       * STYLE/VARIANT MAPPING
+       * Maps Figma's "Style" property to React's "variant" prop
+       * Figma: Style="Outlined" → React: variant="outlined"
+       * Figma: Style="Filled" → React: variant="filled"
+       */
+      variant: figma.enum("Style", {
+        Outlined: "outlined",
+        Filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <MenuIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/icons/demo/MenuIcon.tsx

@@ -0,0 +1,21 @@
+import { FC, SVGProps } from "react";
+
+export interface MenuIconProps extends SVGProps<SVGSVGElement> {
+  variant?: "outlined" | "filled";
+}
+
+export const MenuIcon: FC<MenuIconProps> = ({ variant = "outlined", style, ...props }) => {
+  return (
+    <svg 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      style={{ width: "1em", height: "1em", display: "block", ...style }}
+      {...props}
+    >
+      <path d="M20 16C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H4C3.44772 18 3 17.5523 3 17C3 16.4477 3.44772 16 4 16H20Z" fill="currentColor"/>
+      <path d="M20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H20Z" fill="currentColor"/>
+      <path d="M20 6C20.5523 6 21 6.44772 21 7C21 7.55228 20.5523 8 20 8H4C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6H20Z" fill="currentColor"/>
+    </svg>
+  );
+};

package/src/components/Icon/icons/demo/MoreVerticalIcon.figma.tsx

@@ -0,0 +1,33 @@
+/**
+ * Figma Code Connect Configuration for MoreVerticalIcon
+ * 
+ * Figma URL: https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=8-82
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "../../Icon";
+import { MoreVerticalIcon } from "./MoreVerticalIcon";
+
+figma.connect(
+  MoreVerticalIcon,
+  "https://www.figma.com/design/RT43n0bKuuIt7ylllD3DR0/Icon-Library?node-id=8-82",
+  {
+    props: {
+      /**
+       * STYLE/VARIANT MAPPING
+       * Maps Figma's "Style" property to React's "variant" prop
+       * Figma: Style="Outlined" → React: variant="outlined"
+       * Figma: Style="Filled" → React: variant="filled"
+       */
+      variant: figma.enum("Style", {
+        Outlined: "outlined",
+        Filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <MoreVerticalIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/icons/demo/MoreVerticalIcon.tsx

@@ -0,0 +1,21 @@
+import { FC, SVGProps } from "react";
+
+export interface MoreVerticalIconProps extends SVGProps<SVGSVGElement> {
+  variant?: "outlined" | "filled";
+}
+
+export const MoreVerticalIcon: FC<MoreVerticalIconProps> = ({ variant = "outlined", style, ...props }) => {
+  return (
+    <svg 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg" 
+      style={{ width: "1em", height: "1em", display: "block", ...style }}
+      {...props}
+    >
+      <path d="M12 16C13.1 16 14 16.9 14 18C14 19.1 13.1 20 12 20C10.9 20 10 19.1 10 18C10 16.9 10.9 16 12 16Z" fill="currentColor"/>
+      <path d="M12 10C13.1 10 14 10.9 14 12C14 13.1 13.1 14 12 14C10.9 14 10 13.1 10 12C10 10.9 10.9 10 12 10Z" fill="currentColor"/>
+      <path d="M12 4C13.1 4 14 4.9 14 6C14 7.1 13.1 8 12 8C10.9 8 10 7.1 10 6C10 4.9 10.9 4 12 4Z" fill="currentColor"/>
+    </svg>
+  );
+};

package/src/components/Icon/icons/demo/iconRegistry.tsx

@@ -45,6 +45,22 @@ const WarningSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
   </svg>
 );
 
+const MenuSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
+    <path d="M20 16C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H4C3.44772 18 3 17.5523 3 17C3 16.4477 3.44772 16 4 16H20Z" fill="currentColor"/>
+    <path d="M20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H20Z" fill="currentColor"/>
+    <path d="M20 6C20.5523 6 21 6.44772 21 7C21 7.55228 20.5523 8 20 8H4C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6H20Z" fill="currentColor"/>
+  </svg>
+);
+
+const MoreVerticalSvg: FC<React.SVGProps<SVGSVGElement>> = ({ style, ...props }) => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "1em", height: "1em", display: "block", ...style }} {...props}>
+    <path d="M12 16C13.1 16 14 16.9 14 18C14 19.1 13.1 20 12 20C10.9 20 10 19.1 10 18C10 16.9 10.9 16 12 16Z" fill="currentColor"/>
+    <path d="M12 10C13.1 10 14 10.9 14 12C14 13.1 13.1 14 12 14C10.9 14 10 13.1 10 12C10 10.9 10.9 10 12 10Z" fill="currentColor"/>
+    <path d="M12 4C13.1 4 14 4.9 14 6C14 7.1 13.1 8 12 8C10.9 8 10 7.1 10 6C10 4.9 10.9 4 12 4Z" fill="currentColor"/>
+  </svg>
+);
+
 // WarningTriangle SVG (previously WarningIcon)
 
 export interface IconInfo {
@@ -74,6 +90,16 @@ export const iconRegistry: Record<string, IconInfo> = {
     component: WarningSvg,
     variant: "outlined",
   },
+  menu: {
+    name: "menu",
+    component: MenuSvg,
+    variant: "outlined",
+  },
+  morevertical: {
+    name: "morevertical",
+    component: MoreVerticalSvg,
+    variant: "outlined",
+  },
 };
 
 /**

package/src/components/Icon/icons/demo/index.ts

@@ -18,3 +18,9 @@ export type { SiteIconProps } from "./SiteIcon";
 
 export { WarningTriangle } from "./WarningTriangle";
 export type { WarningTriangleProps } from "./WarningTriangle";
+
+export { MenuIcon } from "./MenuIcon";
+export type { MenuIconProps } from "./MenuIcon";
+
+export { MoreVerticalIcon } from "./MoreVerticalIcon";
+export type { MoreVerticalIconProps } from "./MoreVerticalIcon";

package/src/components/Icon/icons/demo/menu_outlined.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 16C20.5523 16 21 16.4477 21 17C21 17.5523 20.5523 18 20 18H4C3.44772 18 3 17.5523 3 17C3 16.4477 3.44772 16 4 16H20Z" fill="black"/>
+<path d="M20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H20Z" fill="black"/>
+<path d="M20 6C20.5523 6 21 6.44772 21 7C21 7.55228 20.5523 8 20 8H4C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6H20Z" fill="black"/>
+</svg>

package/src/components/Icon/icons/demo/more_vertical_outlined.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16C13.1 16 14 16.9 14 18C14 19.1 13.1 20 12 20C10.9 20 10 19.1 10 18C10 16.9 10.9 16 12 16Z" fill="black"/>
+<path d="M12 10C13.1 10 14 10.9 14 12C14 13.1 13.1 14 12 14C10.9 14 10 13.1 10 12C10 10.9 10.9 10 12 10Z" fill="black"/>
+<path d="M12 4C13.1 4 14 4.9 14 6C14 7.1 13.1 8 12 8C10.9 8 10 7.1 10 6C10 4.9 10.9 4 12 4Z" fill="black"/>
+</svg>

package/src/components/theme/constants/fleetComponents.ts

@@ -591,13 +591,13 @@ const fleetComponents: Components = {
     },
     styleOverrides: {
       root: {
-        fontSize: "18px",
+        fontSize: "24px",
       },
       fontSizeSmall: {
-        fontSize: "15px",
+        fontSize: "20px",
       },
       fontSizeLarge: {
-        fontSize: "21px",
+        fontSize: "28px",
       },
       fontSizeInherit: {
         fontSize: "inherit",
@@ -607,7 +607,7 @@ const fleetComponents: Components = {
       {
         props: { fontSize: "xsmall" },
         style: {
-          fontSize: "12px",
+          fontSize: "16px",
         },
       },
     ],

package/src/index.ts

@@ -22,6 +22,8 @@ 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 { default as AppBar } from "./components/AppBar";
+export type { AppBarProps } from "./components/AppBar";
 export * from "./components/theme";
 
 // Demo Icons - exported from main index to avoid deep-path imports
@@ -30,6 +32,8 @@ export {
   DeviceManagerIcon,
   SiteIcon,
   WarningTriangle,
+  MenuIcon,
+  MoreVerticalIcon,
   SvgIcon,
   iconRegistry,
   getIcon,
@@ -40,6 +44,8 @@ export type {
   DeviceManagerIconProps,
   SiteIconProps,
   WarningTriangleProps,
+  MenuIconProps,
+  MoreVerticalIconProps,
   SvgIconProps,
   IconInfo,
 } from "./components/Icon/icons/demo";