@carrier-dpx/air-react-library 0.7.33 → 0.7.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.7.33",
+  "version": "0.7.35",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -52,7 +52,7 @@
   "devDependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@figma/code-connect": "^1.3.13",
+    "@figma/code-connect": "^1.4.0",
     "@mui/material": "^5.15.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

package/src/components/AccentIndicator/AccentIndicator.horizontal.figma.tsx

@@ -0,0 +1,56 @@
+/**
+ * Figma Code Connect Configuration for AccentIndicator Component (Horizontal)
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37586-2804
+ * 
+ * Figma Properties:
+ * - type (primary, secondary, error, warning, success, info)
+ * - alignment (top, bottom)
+ */
+
+import figma from "@figma/code-connect";
+import AccentIndicator from "./AccentIndicator";
+
+figma.connect(
+  AccentIndicator,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37586-2804",
+  {
+    props: {
+      /**
+       * TYPE MAPPING
+       * Maps Figma's "type" property to React's "severity" prop
+       * Controls the color of the AccentIndicator
+       */
+      severity: figma.enum("type", {
+        primary: "primary",
+        secondary: "secondary",
+        error: "error",
+        warning: "warning",
+        success: "success",
+        info: "info",
+      }),
+
+      /**
+       * ALIGNMENT MAPPING
+       * Maps Figma's "alignment" property to React's "alignment" prop
+       * Horizontal orientation supports: top, bottom
+       */
+      alignment: figma.enum("alignment", {
+        top: "top",
+        bottom: "bottom",
+      }),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Horizontal AccentIndicator - sets orientation="horizontal"
+     */
+    example: ({ severity, alignment }) => (
+      <AccentIndicator
+        severity={severity}
+        orientation="horizontal"
+        alignment={alignment}
+      />
+    ),
+  }
+);

package/src/components/AccentIndicator/AccentIndicator.tsx

@@ -0,0 +1,56 @@
+import React, { FC } from "react";
+import clsx from "clsx";
+import Box from "../Box";
+import styles from "./styles";
+import { styled } from "@mui/material/styles";
+import { Orientation, Position, AccentType } from "../types/common";
+import { AccentIndicatorProps } from "./types";
+import { getAccentColor } from "../utils/getAccentColor";
+
+const AccentIndicatorStyled = styled(Box)(styles.indicator);
+
+const baseClassName = "accent-indicator";
+
+/** The AccentIndicator pattern is a visual cue intended to attract the user's attention and communicate severity level information.
+ *
+ *  //Default Import
+ * `import AccentIndicator from '@carrier-io/air-react/AccentIndicator'`
+ *
+ *  //Named Import
+ *  `import { AccentIndicator } from '@carrier-io/air-react'`
+ */
+
+export const AccentIndicator: FC<AccentIndicatorProps> = ({
+  sx,
+  className,
+  severity = AccentType.Primary,
+  customBgColor = "",
+  orientation = Orientation.Vertical,
+  alignment = Position.Right,
+  ...rest
+}) => {
+  const bgColor = customBgColor || getAccentColor(severity);
+  return (
+    <AccentIndicatorStyled
+      role="accent"
+      severity={severity}
+      alignment={alignment}
+      custombgcolor={bgColor}
+      orientation={orientation}
+      className={clsx(
+        baseClassName,
+        className,
+        `${baseClassName}--${orientation}`,
+        `align--${alignment}`,
+        {
+          [`${baseClassName}--${severity}`]: customBgColor === "" && severity,
+        }
+      )}
+      sx={sx}
+      {...rest}
+    />
+  );
+};
+
+export default AccentIndicator;
+export type { AccentIndicatorProps };

package/src/components/AccentIndicator/AccentIndicator.vertical.figma.tsx

@@ -0,0 +1,56 @@
+/**
+ * Figma Code Connect Configuration for AccentIndicator Component (Vertical)
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37586-2779
+ * 
+ * Figma Properties:
+ * - type (primary, secondary, error, warning, success, info)
+ * - alignment (left, right)
+ */
+
+import figma from "@figma/code-connect";
+import AccentIndicator from "./AccentIndicator";
+
+figma.connect(
+  AccentIndicator,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37586-2779",
+  {
+    props: {
+      /**
+       * TYPE MAPPING
+       * Maps Figma's "type" property to React's "severity" prop
+       * Controls the color of the AccentIndicator
+       */
+      severity: figma.enum("type", {
+        primary: "primary",
+        secondary: "secondary",
+        error: "error",
+        warning: "warning",
+        success: "success",
+        info: "info",
+      }),
+
+      /**
+       * ALIGNMENT MAPPING
+       * Maps Figma's "alignment" property to React's "alignment" prop
+       * Vertical orientation supports: left, right
+       */
+      alignment: figma.enum("alignment", {
+        left: "left",
+        right: "right",
+      }),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Vertical AccentIndicator - sets orientation="vertical"
+     */
+    example: ({ severity, alignment }) => (
+      <AccentIndicator
+        severity={severity}
+        orientation="vertical"
+        alignment={alignment}
+      />
+    ),
+  }
+);

package/src/components/AccentIndicator/index.ts

@@ -0,0 +1,4 @@
+export { AccentIndicator as default } from "./AccentIndicator";
+
+export * from "./AccentIndicator";
+export * from "./types";

package/src/components/AccentIndicator/styles.ts

@@ -0,0 +1,28 @@
+import { setBorderRadius } from "./utils";
+import { AccentIndicatorStyles } from "./types";
+import { Orientation, Position } from "../types/common";
+
+export default {
+  indicator: ({
+    custombgcolor,
+    orientation,
+    alignment,
+  }: AccentIndicatorStyles) => {
+    const placementStyles =
+      orientation === Orientation.Horizontal
+        ? {
+            width: "100%",
+            height: "2px",
+          }
+        : {
+            width: "2px",
+            height: "100%",
+          };
+
+    return {
+      backgroundColor: custombgcolor,
+      borderRadius: setBorderRadius(alignment as Position),
+      ...placementStyles,
+    };
+  },
+};

package/src/components/AccentIndicator/types.ts

@@ -0,0 +1,39 @@
+import { SxProps } from "@mui/material";
+import { Orientation, Position, AccentType } from "../types/common";
+import { Theme } from "@mui/material/styles";
+
+export interface AccentIndicatorProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The type of the component.
+   * @default 'Primary'
+   */
+  severity?: AccentType;
+  /**
+   * The custom background color of the component.
+   */
+  customBgColor?: string;
+  /**
+   * Override extend the styles applied to the component.
+   */
+  className?: string;
+  /**
+   * The orientation to use.
+   * @default 'Vertical'
+   */
+  orientation?: Orientation;
+
+  /**
+   * alignment of the AccentIndicator edge tips
+   * @default 'left'
+   */
+  alignment?: Position;
+}
+
+export interface AccentIndicatorStyles
+  extends Omit<AccentIndicatorProps, "className" | "sx"> {
+  custombgcolor?: string;
+}

package/src/components/AccentIndicator/utils.ts

@@ -0,0 +1,14 @@
+import { Position } from "../types/common";
+
+export const setBorderRadius = (align: Position): string => {
+  switch (align) {
+    case "top":
+      return "4px 4px 0 0";
+    case "bottom":
+      return "0 0 4px 4px";
+    case "right":
+      return "0 4px 4px 0";
+    default:
+      return "4px 0 0 4px";
+  }
+};

package/src/components/Alert/Alert.figma.tsx

@@ -0,0 +1,160 @@
+/**
+ * Figma Code Connect Configuration for Alert Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6595-48211
+ * 
+ * Figma Properties:
+ * - variant (standard, outlined, filled)
+ * - color (error, success, info, warning)
+ * - title (true, false) - from nested "Content" component (UnstyledAlert), shows/hides Title Typography
+ * - action (true, false) - from nested "Content" component (UnstyledAlert), shows/hides Action Button
+ * 
+ * Structure:
+ * - Content (UnstyledAlert): Contains Title and Description Typography components
+ * - Title: Typography component (shown when title=true)
+ * - Description: Typography component (children of Alert)
+ */
+
+import figma from "@figma/code-connect";
+import Alert from "./Alert";
+import AlertTitle from "./AlertTitle";
+import Typography from "../Typography";
+import Button from "../Button";
+
+figma.connect(
+  Alert,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6595-48211",
+  {
+    props: {
+      /**
+       * VARIANT MAPPING
+       * Maps Figma's "variant" property to React's "variant" prop
+       */
+      variant: figma.enum("variant", {
+        standard: "standard",
+        outlined: "outlined",
+        filled: "filled",
+      }),
+
+      /**
+       * COLOR MAPPING
+       * Maps Figma's "color" property to React's "color" prop
+       */
+      color: figma.enum("color", {
+        error: "error",
+        success: "success",
+        info: "info",
+        warning: "warning",
+      }),
+
+      /**
+       * CONTENT NESTED PROPERTIES
+       * Access properties from nested "Content" component (UnstyledAlert)
+       * Contains title/action booleans and nested Typography components
+       */
+      content: figma.nestedProps("Content", {
+        /**
+         * TITLE VISIBILITY
+         * Maps Figma's "title" boolean from nested "Content" component
+         * When true, shows the nested "Title" Typography component
+         */
+        title: figma.boolean("title"),
+
+        /**
+         * ACTION BUTTON VISIBILITY
+         * Maps Figma's "action" boolean from nested "Content" component
+         * When true, shows the Action Button
+         */
+        action: figma.boolean("action"),
+      }),
+
+      /**
+       * TITLE TEXT CONTENT
+       * Maps text content from nested "Content/Title" Typography component
+       * Using full path to avoid nested nestedProps
+       */
+      titleText: figma.nestedProps("Content/Title", {
+        children: figma.children("Content/Title"),
+      }),
+
+      /**
+       * DESCRIPTION TEXT CONTENT
+       * Maps text content from nested "Content/Description" Typography component
+       * Using full path to avoid nested nestedProps
+       */
+      descriptionText: figma.nestedProps("Content/Description", {
+        children: figma.children("Content/Description"),
+      }),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how Alert should be used with optional title and action button
+     */
+    example: ({ variant, color, content, titleText, descriptionText }) => {
+      // Handle case with title, description, and action
+      if (content && content.title && content.action && titleText && titleText.children && descriptionText && descriptionText.children) {
+        return (
+          <Alert
+            variant={variant}
+            color={color}
+            action={<Button variant="text" size="small">Action</Button>}
+          >
+            <AlertTitle>
+              {titleText.children}
+            </AlertTitle>
+            {descriptionText.children}
+          </Alert>
+        );
+      }
+      
+      // Handle case with title and description (no action)
+      if (content && content.title && titleText && titleText.children && descriptionText && descriptionText.children) {
+        return (
+          <Alert
+            variant={variant}
+            color={color}
+          >
+            <AlertTitle>
+              {titleText.children}
+            </AlertTitle>
+            {descriptionText.children}
+          </Alert>
+        );
+      }
+      
+      // Handle case with description and action (no title)
+      if (content && content.action && descriptionText && descriptionText.children) {
+        return (
+          <Alert
+            variant={variant}
+            color={color}
+            action={<Button variant="text" size="small">Action</Button>}
+          >
+            {descriptionText.children}
+          </Alert>
+        );
+      }
+      
+      // Handle case with only description
+      if (descriptionText && descriptionText.children) {
+        return (
+          <Alert
+            variant={variant}
+            color={color}
+          >
+            {descriptionText.children}
+          </Alert>
+        );
+      }
+      
+      // Fallback: Alert with no content
+      return (
+        <Alert
+          variant={variant}
+          color={color}
+        />
+      );
+    },
+  }
+);

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,90 @@
+import { forwardRef } from "react";
+
+import MuiAlert from "@mui/material/Alert";
+import { styled } from "@mui/material/styles";
+import WarningIcon from "@mui/icons-material/Warning";
+import ErrorIcon from "@mui/icons-material/Error";
+import InfoIcon from "@mui/icons-material/Info";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+
+import IconButton from "../IconButton";
+import styles from "./styles";
+import { AlertProps } from "./types";
+
+const StyledAlert = styled(MuiAlert)(styles);
+
+/** The Alert component provides contextual feedback through description, iconography, and color.
+ *
+ * // Default import
+ * import Alert from '@carrier-io/air-react/Alert'
+ *
+ * // Named import
+ * import { Alert } from '@carrier-io/air-react'
+ */
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      onClose,
+      severity = "warning",
+      variant = "standard",
+      color,
+      iconMapping = {
+        // Default value for success icon passed here to prevent import React inside FleetThemeConfigs
+        success: <CheckCircleIcon fontSize="inherit" />,
+      },
+      action,
+      ...rest
+    },
+    ref
+  ) => {
+    const alertColor = color ?? severity;
+
+    const resolvedIconMapping = {
+      warning: <WarningIcon fontSize="inherit" />,
+      error: <ErrorIcon fontSize="inherit" />,
+      info: <InfoIcon fontSize="inherit" />,
+      success: <CheckCircleIcon fontSize="inherit" />,
+      ...iconMapping,
+    };
+
+    return (
+      <StyledAlert
+        color={color}
+        severity={severity}
+        variant={variant}
+        iconMapping={resolvedIconMapping}
+        action={
+          <>
+            {action}
+            {onClose && (
+              <IconButton
+                aria-label="Close"
+                onClick={onClose}
+                sx={{
+                  width: "28px",
+                  height: "28px",
+                  fontSize: "20px",
+                  color: (theme) =>
+                    variant == "filled"
+                      ? theme.palette[alertColor]?.contrastText
+                      : theme.palette.base?.state.active,
+                  marginLeft: "12px",
+                }}
+              >
+                <CloseIcon fontSize="inherit" />
+              </IconButton>
+            )}
+          </>
+        }
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Alert.displayName = "Alert";
+
+export default Alert;
+export type { AlertProps };

package/src/components/Alert/AlertTitle.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+
+import MuiAlertTitle, {
+  AlertTitleProps as MuiAlertTitleProps,
+} from "@mui/material/AlertTitle";
+import { styled } from "@mui/material/styles";
+
+export interface AlertTitleProps extends MuiAlertTitleProps {
+  // this may be updated later if Design needs any props to be removed
+}
+
+/** AlertTitle
+ * An AlertTitle is used to add a title to the Alert Component. It is used as a sub-component/child along with the Alert Component.
+ *
+ * // Default import
+ * import AlertTitle from '@carrier-io/air-react/Alert'
+ *
+ * // Named import
+ * import { AlertTitle } from '@carrier-io/air-react'
+ */
+
+const MuiAlertTitleStyled = styled(MuiAlertTitle)(({ theme }) => ({
+  margin: 0,
+  ...theme.typography.body1Semibold,
+}));
+
+const AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>((props, ref) => {
+  return <MuiAlertTitleStyled {...props} ref={ref} />;
+});
+
+AlertTitle.displayName = "AlertTitle";
+
+export default AlertTitle;
+export type { AlertTitleProps };

package/src/components/Alert/index.ts

@@ -0,0 +1,9 @@
+// Alert component family exports
+export { default } from "./Alert"; // For: import Alert from "Alert"
+export { default as Alert } from "./Alert"; // For: import { Alert } from "Alert"
+export * from "./Alert"; // For: AlertProps, etc.
+
+export { default as AlertTitle } from "./AlertTitle";
+export * from "./AlertTitle";
+
+export * from "./types";

package/src/components/Alert/styles.ts

@@ -0,0 +1,80 @@
+import { AlertProps, alertClasses } from "@mui/material/Alert";
+import { StyledComponentDefaultProps } from "../types/common";
+
+const styles = ({
+  theme,
+  color,
+  variant,
+  severity = "warning",
+}: AlertProps & StyledComponentDefaultProps) => {
+  const alertColor = color ?? severity;
+
+  // Standard variant styles
+  const standardStyles =
+    variant === "standard"
+      ? {
+          backgroundColor: theme.palette[alertColor]?.background,
+          color: theme.palette.base?.text.primary,
+        }
+      : {};
+
+  // Outlined variant styles
+  const outlinedStyles =
+    variant === "outlined"
+      ? {
+          backgroundColor: theme.palette.base?.background.paper,
+          borderColor: theme.palette[alertColor]?.main,
+          color: theme.palette.base?.text.primary,
+        }
+      : {};
+
+  // Filled variant styles
+  const filledStyles =
+    variant === "filled"
+      ? {
+          backgroundColor: theme.palette[alertColor]?.main,
+          color: theme.palette[alertColor]?.contrastText,
+        }
+      : {};
+
+  // Icon color based on variant
+  const iconColor =
+    variant === "filled"
+      ? theme.palette[alertColor]?.contrastText
+      : theme.palette[alertColor]?.main;
+
+  return {
+    ...standardStyles,
+    ...outlinedStyles,
+    ...filledStyles,
+    [`.${alertClasses.icon}`]: {
+      opacity: 1,
+      alignItems: "center",
+      fontSize: "20px",
+      color: iconColor,
+    },
+    "&.MuiPaper-rounded": {
+      borderRadius: 4,
+    },
+    "& .MuiAlert-message": {
+      alignItems: "flex-start",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      ...theme.typography.body2Semibold,
+    },
+    "& .MuiAlert-action": {
+      alignItems: "center",
+      paddingTop: 0,
+      marginRight: 0,
+      "& .MuiButtonBase-root.MuiButton-root": {
+        color: `${theme.palette[alertColor]?.main} !important`,
+        "&:hover": {
+          color: `${theme.palette[alertColor]?.main} !important`,
+        },
+      },
+    },
+  };
+};
+
+export default styles;

package/src/components/Alert/types.ts

@@ -0,0 +1,5 @@
+import { AlertProps as MuiAlertProps } from "@mui/material/Alert";
+
+export interface AlertProps extends MuiAlertProps {
+  // this may be updated later if Design needs any props to be removed
+}