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

package/src/components/Breadcrumbs/BreadcrumbLink.figma.tsx

@@ -0,0 +1,137 @@
+/**
+ * Figma Code Connect Configuration for Breadcrumb Link Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=20464-143034
+ * 
+ * Figma Properties:
+ * - color (primary, main)
+ * - active (true, false)
+ * - state (enabled, hover) - visual state, not a prop
+ * - disabled (true, false)
+ * - Icon (true, false) - boolean hide/show
+ * - separator (true, false) - boolean hide/show
+ * 
+ * Structure:
+ * - Icon: Nested Icon component instance (when Icon=true)
+ * - Link: Nested Link component instance with text content
+ */
+
+import figma from "@figma/code-connect";
+import BreadcrumbLink from "./BreadcrumbLink";
+import Link from "../Link";
+import Icon from "../Icon";
+
+figma.connect(
+  BreadcrumbLink,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=20464-143034",
+  {
+    props: {
+      /**
+       * COLOR MAPPING
+       * Maps Figma's "color" property to React's "color" prop
+       * Figma: primary, main → React: primary, base
+       */
+      color: figma.enum("color", {
+        primary: "primary",
+        main: "base",
+      }),
+
+      /**
+       * ACTIVE STATE
+       * Maps Figma's "active" boolean to React's "active" prop
+       */
+      active: figma.boolean("active"),
+
+      /**
+       * DISABLED STATE
+       * Maps Figma's "disabled" boolean to React's "disabled" prop
+       */
+      disabled: figma.boolean("disabled"),
+
+      /**
+       * ICON VISIBILITY
+       * Maps Figma's "Icon" boolean - controls visibility of nested Icon component
+       */
+      showIcon: figma.boolean("Icon"),
+
+      /**
+       * SEPARATOR VISIBILITY
+       * Maps Figma's "separator" boolean - controls visibility of separator
+       * Note: Separator is typically handled by parent Breadcrumbs component
+       */
+      showSeparator: figma.boolean("separator"),
+
+      /**
+       * ICON NESTED PROPERTIES
+       * Access Icon's fontSize and SVG through nested properties
+       * The Icon component is nested within BreadcrumbLink when Icon is visible
+       */
+      icon: figma.nestedProps("Icon", {
+        fontSize: figma.enum("fontSize", {
+          large: "large",
+          medium: "medium",
+          small: "small",
+          xsmall: "xsmall",
+        }),
+        children: figma.instance("SVG"),
+      }),
+
+      /**
+       * LINK COMPONENT INSTANCE
+       * Maps nested Link component instance
+       * The Link component is nested within BreadcrumbLink
+       * Using figma.instance() to get the Link component instance
+       */
+      link: figma.instance("Link"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how BreadcrumbLink should be used with optional icon and link
+     */
+    example: ({ color, active, disabled, showIcon, icon, link }) => {
+      // Handle case with icon
+      if (showIcon && icon && icon.fontSize && icon.children && link) {
+        return (
+          <BreadcrumbLink
+            color={color}
+            active={active}
+            disabled={disabled}
+            icon={
+              <Icon fontSize={icon.fontSize}>
+                {icon.children}
+              </Icon>
+            }
+            href="#"
+          >
+            {link}
+          </BreadcrumbLink>
+        );
+      }
+
+      // Handle case without icon
+      if (link) {
+        return (
+          <BreadcrumbLink
+            color={color}
+            active={active}
+            disabled={disabled}
+            href="#"
+          >
+            {link}
+          </BreadcrumbLink>
+        );
+      }
+
+      // Fallback
+      return (
+        <BreadcrumbLink
+          color={color}
+          active={active}
+          disabled={disabled}
+          href="#"
+        />
+      );
+    },
+  }
+);

package/src/components/Breadcrumbs/BreadcrumbLink.tsx

@@ -0,0 +1,82 @@
+import { forwardRef } from "react";
+import Link from "../Link";
+import Icon from "../Icon";
+import { styled } from "@mui/material/styles";
+import { Theme } from "@mui/material";
+
+export interface BreadcrumbLinkProps {
+  /**
+   * The color of the breadcrumb link
+   */
+  color?: "primary" | "base";
+  /**
+   * Whether the breadcrumb link is active
+   */
+  active?: boolean;
+  /**
+   * Whether the breadcrumb link is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Icon element to display before the link text
+   */
+  icon?: React.ReactElement;
+  /**
+   * Link content (text)
+   */
+  children?: React.ReactNode;
+  /**
+   * href for the link
+   */
+  href?: string;
+  /**
+   * onClick handler
+   */
+  onClick?: () => void;
+}
+
+const StyledLink = styled(Link)<{ active?: boolean; disabled?: boolean }>(
+  ({ theme, active, disabled }: { theme: Theme; active?: boolean; disabled?: boolean }) => ({
+    ...(active && {
+      color: theme.palette.base?.text.primary,
+      fontWeight: 600,
+    }),
+    ...(disabled && {
+      color: theme.palette.base?.text.disabled,
+      cursor: "not-allowed",
+      pointerEvents: "none",
+    }),
+  })
+);
+
+/** BreadcrumbLink component used within Breadcrumbs
+ *
+ * `import BreadcrumbLink from '@carrier-io/air-react/Breadcrumbs/BreadcrumbLink'`
+ */
+
+const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ color, active, disabled, icon, children, href, onClick, ...rest }, ref) => {
+    // If children is a Link component instance, extract its content
+    const linkContent = children;
+    
+    return (
+      <StyledLink
+        ref={ref}
+        href={href}
+        onClick={onClick}
+        active={active}
+        disabled={disabled}
+        color={color === "base" ? undefined : color}
+        {...rest}
+      >
+        {icon}
+        {linkContent}
+      </StyledLink>
+    );
+  }
+);
+
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+export default BreadcrumbLink;
+export type { BreadcrumbLinkProps };

package/src/components/Breadcrumbs/Breadcrumbs.figma.tsx

@@ -0,0 +1,117 @@
+/**
+ * Figma Code Connect Configuration for Breadcrumbs Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=20464-143181
+ * 
+ * Figma Properties:
+ * - color (primary, main)
+ * - icon (true, false)
+ * - separator (slash, icon)
+ * - collapsed (true, false)
+ * - mobile (true, false)
+ * 
+ * Structure:
+ * - Breadcrumb 01-06: Multiple Breadcrumb Link instances with numbered layer names
+ */
+
+import figma from "@figma/code-connect";
+import Breadcrumbs from "./Breadcrumbs";
+
+figma.connect(
+  Breadcrumbs,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=20464-143181",
+  {
+    props: {
+      /**
+       * COLOR MAPPING
+       * Maps Figma's "color" property to React's "color" prop
+       * Figma: primary, main → React: primary, base
+       */
+      color: figma.enum("color", {
+        primary: "primary",
+        main: "base",
+      }),
+
+      /**
+       * ICON VISIBILITY
+       * Maps Figma's "icon" boolean property
+       * Controls visibility of icons in breadcrumbs
+       */
+      icon: figma.boolean("icon"),
+
+      /**
+       * SEPARATOR TYPE
+       * Maps Figma's "separator" property to React separator prop
+       * Figma: slash, icon → React: "/", icon component
+       */
+      separator: figma.enum("separator", {
+        slash: "/",
+        icon: "icon",
+      }),
+
+      /**
+       * COLLAPSED STATE
+       * Maps Figma's "collapsed" boolean property
+       * Controls collapsed state of breadcrumbs
+       */
+      collapsed: figma.boolean("collapsed"),
+
+      /**
+       * MOBILE STATE
+       * Maps Figma's "mobile" boolean property
+       * Controls mobile-specific behavior
+       */
+      mobile: figma.boolean("mobile"),
+
+      /**
+       * BREADCRUMB LINK CHILDREN
+       * Maps nested Breadcrumb Link instances from Figma
+       * Each "Breadcrumb XX" is an instance of the Breadcrumb Link component
+       * We map each one individually using the exact layer names
+       */
+      breadcrumb01: figma.children("Breadcrumb 01"),
+      breadcrumb02: figma.children("Breadcrumb 02"),
+      breadcrumb03: figma.children("Breadcrumb 03"),
+      breadcrumb04: figma.children("Breadcrumb 04"),
+      breadcrumb05: figma.children("Breadcrumb 05"),
+      breadcrumb06: figma.children("Breadcrumb 06"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how Breadcrumbs should be used with Breadcrumb Link children
+     * Note: separator prop handling may need adjustment based on actual implementation
+     */
+    example: ({ color, separator, breadcrumb01, breadcrumb02, breadcrumb03, breadcrumb04, breadcrumb05, breadcrumb06 }) => {
+      // Handle separator - if icon, use undefined (separator handled by parent), otherwise use the separator string
+      if (separator === "icon") {
+        return (
+          <Breadcrumbs
+            color={color}
+          >
+            {breadcrumb01}
+            {breadcrumb02}
+            {breadcrumb03}
+            {breadcrumb04}
+            {breadcrumb05}
+            {breadcrumb06}
+          </Breadcrumbs>
+        );
+      }
+      
+      return (
+        <Breadcrumbs
+          color={color}
+          separator={separator}
+        >
+          {breadcrumb01}
+          {breadcrumb02}
+          {breadcrumb03}
+          {breadcrumb04}
+          {breadcrumb05}
+          {breadcrumb06}
+        </Breadcrumbs>
+      );
+    },
+  }
+);

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from "react";
+
+import MuiBreadcrumbs, {
+  BreadcrumbsProps as MuiBreadcrumbsProps,
+} from "@mui/material/Breadcrumbs";
+import { CSSObject, Theme } from "@mui/material/styles";
+
+import { baseBreadcrumbsSx } from "./styles";
+import { getSxStyles } from "../utils/styles";
+import useMediaQuery from "../useMediaQuery/useMediaQuery";
+
+export interface BreadcrumbsProps extends MuiBreadcrumbsProps {
+  color?: "primary" | "base";
+}
+
+/** The Breadcrumbs component is a set of links that help users navigate
+ *  and visualize the current location within a hierarchical structure.
+ *
+ * // Default import
+ * import Breadcrumbs from '@carrier-io/air-react/Breadcrumbs'
+ *
+ * // Named import
+ * import { Breadcrumbs } from '@carrier-io/air-react'
+ */
+
+const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
+  ({ sx, color, ...rest }, ref) => {
+    const isMobile = useMediaQuery(`(max-width:599px)`);
+
+    const breadcrumbSX = (theme: Theme) => {
+      const baseStyles = getSxStyles(theme, sx);
+
+      return {
+        ...baseStyles,
+        ...baseBreadcrumbsSx(theme, color),
+      } as CSSObject;
+    };
+
+    return (
+      <MuiBreadcrumbs
+        {...rest}
+        sx={breadcrumbSX}
+        ref={ref}
+        separator={isMobile ? "" : "/"}
+      />
+    );
+  }
+);
+
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export default Breadcrumbs;
+export type { BreadcrumbsProps };

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,5 @@
+export { default } from "./Breadcrumbs";
+export { default as Breadcrumbs } from "./Breadcrumbs";
+export * from "./Breadcrumbs";
+export { default as BreadcrumbLink } from "./BreadcrumbLink";
+export * from "./BreadcrumbLink";

package/src/components/Breadcrumbs/styles.ts

@@ -0,0 +1,20 @@
+import { CSSObject, Theme } from "@mui/material";
+import { styleTokens } from "../theme/constants/styleTokens";
+
+export const baseBreadcrumbsSx = (
+  theme: Theme,
+  color: "primary" | "base" | undefined
+): CSSObject => ({
+  "& .MuiBreadcrumbs-separator": {
+    color: theme.palette.base?.filledInput.outlinedBorder,
+    marginRight: styleTokens.margin.medium,
+    marginLeft: styleTokens.margin.medium,
+  },
+  "& .MuiBreadcrumbs-li:last-child": {
+    color: theme.palette.base?.text.primary,
+  },
+  color:
+    color == "primary"
+      ? theme.palette.primary.main
+      : theme.palette.base?.state.active,
+});

package/src/components/List/List.figma.tsx

@@ -0,0 +1,110 @@
+/**
+ * Figma Code Connect Configuration for List Component
+ * 
+ * Figma URL: https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=19353-120893
+ * 
+ * Figma Properties:
+ * - subheader (true, false) - boolean hide/show
+ * 
+ * Structure:
+ * - Container: Frame wrapping Subheader and ListItem components
+ * - Subheader: Nested component "ListItems/List Subheader" with layer name "Subheader"
+ *   - Contains Typography component with layer name "↪ Subheader"
+ * - List Item 1-10: Multiple ListItem instances with numbered layer names
+ */
+
+import figma from "@figma/code-connect";
+import List from "./List";
+import ListSubheader from "./ListSubheader";
+import ListItem from "./ListItem";
+import Typography from "../Typography";
+
+figma.connect(
+  List,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=19353-120893",
+  {
+    props: {
+      /**
+       * SUBHEADER VISIBILITY
+       * Maps Figma's "subheader" boolean property
+       * When true, shows the nested "Subheader" component
+       */
+      subheader: figma.boolean("subheader"),
+
+      /**
+       * SUBHEADER TEXT CONTENT
+       * Maps text content from nested Typography component with layer name "Subheader/↪ Subheader"
+       * Using full path to avoid nested nestedProps
+       */
+      subheaderText: figma.nestedProps("Subheader/↪ Subheader", {
+        children: figma.children("Subheader/↪ Subheader"),
+      }),
+
+      /**
+       * LIST ITEM CHILDREN
+       * Maps nested ListItem instances from Figma
+       * Each "List Item X" is an instance of the ListItem component
+       * We map each one individually using the exact layer names
+       */
+      listItem1: figma.children("List Item 1"),
+      listItem2: figma.children("List Item 2"),
+      listItem3: figma.children("List Item 3"),
+      listItem4: figma.children("List Item 4"),
+      listItem5: figma.children("List Item 5"),
+      listItem6: figma.children("List Item 6"),
+      listItem7: figma.children("List Item 7"),
+      listItem8: figma.children("List Item 8"),
+      listItem9: figma.children("List Item 9"),
+      listItem10: figma.children("List Item 10"),
+    },
+
+    /**
+     * EXAMPLE CODE TEMPLATE
+     * Shows how List should be used with optional subheader and ListItem children
+     * Note: This example handles up to 10 list items. Adjust based on your design needs.
+     */
+    example: ({ subheader, subheaderText, listItem1, listItem2, listItem3, listItem4, listItem5, listItem6, listItem7, listItem8, listItem9, listItem10 }) => {
+      // Handle case with subheader and multiple list items
+      if (subheader && subheaderText && subheaderText.children) {
+        return (
+          <List
+            subheader={
+              <ListSubheader>
+                <Typography variant="body2Semibold">
+                  {subheaderText.children}
+                </Typography>
+              </ListSubheader>
+            }
+          >
+            {listItem1}
+            {listItem2}
+            {listItem3}
+            {listItem4}
+            {listItem5}
+            {listItem6}
+            {listItem7}
+            {listItem8}
+            {listItem9}
+            {listItem10}
+          </List>
+        );
+      }
+
+      // Handle case without subheader
+      return (
+        <List>
+          {listItem1}
+          {listItem2}
+          {listItem3}
+          {listItem4}
+          {listItem5}
+          {listItem6}
+          {listItem7}
+          {listItem8}
+          {listItem9}
+          {listItem10}
+        </List>
+      );
+    },
+  }
+);

package/src/components/List/List.tsx

@@ -0,0 +1,72 @@
+import { forwardRef } from "react";
+
+import {
+  List as MuiList,
+  ListProps as MuiListProps,
+  CSSObject,
+  Theme,
+} from "@mui/material";
+import { styleTokens } from "../theme/constants/styleTokens";
+import { getSxStyles } from "../utils/styles";
+
+export interface ListProps extends MuiListProps {
+  maxHeight?: string;
+  // this may be updated later if Design needs any props to be removed
+
+  /**
+   * The content of the subheader, normally `ListSubheader`.
+   */
+  subheader?: React.ReactNode;
+
+  /**
+   * Toggles the display of the subheader. Set to `true` to show the subheader.
+   */
+  showSubheader?: boolean;
+
+  /**
+   * Added padding between the list
+   * @default false
+   */
+  padded?: boolean;
+}
+
+/** The List component is useful for organizing related content or actions in a vertical format.
+ *
+ * `import List from '@carrier-io/air-react/List'`
+ */
+
+const List = forwardRef<HTMLUListElement, ListProps>(
+  (
+    { maxHeight, sx, subheader, showSubheader = true, padded = false, ...rest },
+    ref
+  ) => {
+    return (
+      <MuiList
+        ref={ref}
+        {...rest}
+        sx={(theme: Theme) =>
+          ({
+            backgroundColor: theme.palette.base?.background.paper,
+            maxHeight: maxHeight ?? "auto",
+            overflowY: maxHeight ? "auto" : "visible",
+            ...(padded && {
+              ".MuiListItem-root": {
+                padding: styleTokens.paddingItem,
+              },
+              ".MuiListItemButton-root": {
+                padding: styleTokens.paddingItem,
+              },
+            }),
+            ...getSxStyles(theme, sx),
+          } as CSSObject)
+        }
+        subheader={showSubheader && subheader ? subheader : null}
+      />
+    );
+  }
+);
+
+List.displayName = "List";
+
+export default List;
+export type { ListProps };