@carrier-dpx/air-react-library 0.7.27 → 0.7.29

package/package.json

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

package/src/components/StatusLed/StatusLed.figma.tsx

@@ -0,0 +1,110 @@
+/**
+ * Figma Code Connect Configuration for StatusLed Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37599-424674
+ * 
+ * Figma Properties:
+ * - severity (error, warning, success, info, default, static)
+ * - size (xsmall: 24px, micro: 20px)
+ * - labelPosition (start, end)
+ * - label (true, false) - controls visibility of nested "Label" Typography component
+ * 
+ * Notes:
+ * - labelPosition changes where the label is placed, either before or after the StatusLED
+ * - The "label" boolean prop hides/shows the nested "Label" component which is an instance of the Typography component
+ * - Size can be customized in code for any size, but design only supports two sizes
+ * - Size mapping: xsmall (24px) → size 12, micro (20px) → size 10 (since circleSize = size * 2)
+ */
+
+import figma from "@figma/code-connect";
+import StatusLed from "./StatusLed";
+
+figma.connect(
+  StatusLed,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37599-424674",
+  {
+    props: {
+      /**
+       * SEVERITY MAPPING
+       * Maps Figma's "severity" property to React's "severity" prop
+       * Controls the color of the StatusLED
+       */
+      severity: figma.enum("severity", {
+        error: "error",
+        warning: "warning",
+        success: "success",
+        info: "info",
+        default: "default",
+        static: "static",
+      }),
+
+      /**
+       * SIZE MAPPING
+       * Maps Figma's "size" property to React's "size" prop
+       * Figma: xsmall (24px), micro (20px)
+       * React: size is the inner circle size in pixels
+       * - xsmall (24px total) → size 12 (12 * 2 = 24)
+       * - micro (20px total) → size 10 (10 * 2 = 20)
+       */
+      size: figma.enum("size", {
+        "xsmall: 24px": 12,
+        "micro: 20px": 10,
+        // Handle cases where Figma might show just the size name
+        xsmall: 12,
+        micro: 10,
+      }),
+
+      /**
+       * LABEL POSITION MAPPING
+       * Maps Figma's "labelPosition" property to React's "labelPosition" prop
+       * Controls where the label is placed relative to the StatusLED
+       */
+      labelPosition: figma.enum("labelPosition", {
+        start: "start",
+        end: "end",
+      }),
+
+      /**
+       * LABEL VISIBILITY
+       * Maps Figma's "label" boolean property
+       * When true, shows the nested "Label" Typography component
+       * When false, hides the label
+       */
+      showLabel: figma.boolean("label"),
+
+      /**
+       * LABEL TEXT CONTENT
+       * Maps text property "✏️ Label" from the nested "Label" Typography component
+       * The Label is an instance of the Typography component
+       * The text property must be surfaced from the "Label" layer
+       * Only used when showLabel is true
+       */
+      label: figma.string("✏️ Label"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how StatusLed should be used with optional label
+     */
+    example: ({ severity, size, labelPosition, showLabel, label }) => {
+      if (showLabel && label) {
+        return (
+          <StatusLed
+            severity={severity}
+            size={size}
+            labelPosition={labelPosition}
+            label={label}
+          />
+        );
+      }
+      
+      return (
+        <StatusLed
+          severity={severity}
+          size={size}
+          labelPosition={labelPosition}
+        />
+      );
+    },
+  }
+);

package/src/components/StatusLed/StatusLed.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import Box from "../Box";
+import { Severity, StatusLedProps, StyleProps } from "./types";
+import Typography from "../Typography";
+import styles from "./styles";
+
+const CircleInnerStyled = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size",
+})<Omit<StyleProps, "theme">>(styles.circleInner);
+
+const CircleOuterStyled = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size",
+})<Omit<StyleProps, "theme">>(styles.circleOuter);
+
+const BoxCircleStyled = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size",
+})<Pick<StyleProps, "size">>(styles.containerCircle);
+
+const BoxStyled = styled(Box)(styles.container);
+
+/**
+ * The StatusLED pattern provides on and off states and serves as a visual cue intended to attract
+ * the user's attention and communicate severity level information.
+ *
+ * //Default Import
+ * `import StatusLed from '@carrier-io/air-react/StatusLed'`
+ */
+const StatusLed: React.FC<StatusLedProps> = ({
+  severity = Severity.Default,
+  glow = false,
+  size = 12,
+  label,
+  labelPosition = "end",
+  ...rest
+}) => {
+  const circleSize = size * 2;
+
+  return (
+    <BoxStyled data-testid={rest["data-testid"]}>
+      {label && labelPosition === "start" && (
+        <Typography
+          variant="body2"
+          aria-label="label"
+          sx={(theme) => ({ mr: 0.5, color: theme.palette.base?.text.primary })}
+        >
+          {label}
+        </Typography>
+      )}
+      <BoxCircleStyled size={circleSize}>
+        {glow && (
+          <CircleOuterStyled
+            severity={severity}
+            size={size}
+            aria-label="circle-outer"
+          />
+        )}
+        <CircleInnerStyled
+          severity={severity}
+          size={size}
+          aria-label="circle-inner"
+        />
+      </BoxCircleStyled>
+      {label && labelPosition === "end" && (
+        <Typography
+          variant="body2"
+          aria-label="label"
+          sx={(theme) => ({ mr: 0.5, color: theme.palette.base?.text.primary })}
+        >
+          {label}
+        </Typography>
+      )}
+    </BoxStyled>
+  );
+};
+
+export default StatusLed;

package/src/components/StatusLed/index.ts

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

package/src/components/StatusLed/styles.ts

@@ -0,0 +1,39 @@
+import { CSSObject } from "@mui/material";
+import { Theme } from "@mui/material/styles";
+
+import { getColorInner, getColorOuter } from "./utils";
+import { StyleProps } from "./types";
+
+export default {
+  circleInner: ({ theme, severity, size }: StyleProps): CSSObject => ({
+    height: size,
+    width: size,
+    borderRadius: "50%",
+    backgroundColor: getColorInner(theme as unknown as Theme, severity),
+    position: "absolute",
+  }),
+  circleOuter: ({ theme, severity, size }: StyleProps): CSSObject => {
+    const roundedOuterSize = Math.round(size * 1.5);
+    return {
+      height: roundedOuterSize,
+      width: roundedOuterSize,
+      borderRadius: "50%",
+      filter: `blur(${size / 6}px)`,
+      backgroundColor: getColorOuter(theme as unknown as Theme, severity),
+      "will-change": "transform",
+    };
+  },
+  containerCircle: ({ size }: Pick<StyleProps, "size">): CSSObject => ({
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: size,
+    height: size,
+  }),
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+  } as CSSObject,
+};

package/src/components/StatusLed/types.ts

@@ -0,0 +1,59 @@
+import { Theme } from "@mui/material/styles";
+
+export enum Severity {
+  Success = "success",
+  Info = "info",
+  Warning = "warning",
+  Error = "error",
+  Default = "default",
+  Static = "static",
+}
+
+export interface StyleProps {
+  severity: Severity;
+  size: number;
+  theme: Theme;
+}
+
+export interface StatusLedProps {
+  /**
+   * The severity of the StatusLed. This defines the color.
+   *
+   * @default 'default'
+   */
+  severity?: Severity;
+
+  /**
+   * A boolean that controls the presence of outer circle (glow) of the StatusLed.
+   * The overall size is rounded 150% of the size property value if glow is enabled
+   *
+   * @default False
+   */
+  glow?: boolean;
+
+  /**
+   * The size of the inner circle in pixels.
+   * The size of the outer circle (glow) is rounded 50% larger if present.
+   *
+   * @default 12
+   */
+  size?: number;
+
+  /**
+   * The label content.
+   */
+  label?: string;
+
+  /**
+   * Controls where the label should be placed.
+   *
+   * @default end
+   */
+
+  labelPosition?: "start" | "end";
+
+  /**
+   * For testing purposes
+   */
+  "data-testid"?: string;
+}

package/src/components/StatusLed/utils.ts

@@ -0,0 +1,31 @@
+import { lighten, PaletteOptions } from "@mui/material";
+import { Theme } from "@mui/material/styles";
+import { SimplePaletteColorOptions } from "@mui/material/styles/createPalette";
+
+import { Severity } from "./types";
+
+export const getColorInner = (theme: Theme, severity: Severity): string => {
+  const key = severity.toLowerCase() as keyof PaletteOptions;
+  const palette = theme.palette[key] as SimplePaletteColorOptions;
+  const finalColor =
+    palette?.main ||
+    (severity == Severity.Static
+      ? theme.palette.base?.dark || theme.palette.common.black
+      : theme.palette.base?.state?.disabledContent ||
+        lighten(theme.palette.common.black, 0.7));
+
+  return finalColor;
+};
+
+export const getColorOuter = (theme: Theme, severity: Severity): string => {
+  const key = severity.toLowerCase() as keyof PaletteOptions;
+  const palette = theme.palette[key] as SimplePaletteColorOptions;
+  const finalColor =
+    palette?.light ??
+    (severity == Severity.Static
+      ? theme.palette.base?.dark || theme.palette.common.black
+      : theme.palette.base?.state?.disabledContent ||
+        lighten(theme.palette.common.black, 0.8));
+
+  return finalColor;
+};

package/src/index.ts

@@ -32,6 +32,8 @@ export { default as Avatar, AvatarGroup } from "./components/Avatar";
 export type { AvatarProps, AvatarGroupProps } from "./components/Avatar";
 export { default as MobileStatusBar } from "./components/MobileStatusBar";
 export type { MobileStatusBarProps } from "./components/MobileStatusBar";
+export { default as StatusLed } from "./components/StatusLed";
+export type { StatusLedProps, Severity } from "./components/StatusLed";
 export * from "./components/theme";
 
 // Demo Icons - exported from main index to avoid deep-path imports