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

package/README.md

@@ -154,6 +154,9 @@ Currently available components:
 - **Button** - Material-UI based button component with Carrier DPX design system styling
 - **Typography** - Text component with all Carrier DPX typography variants (h1-h6, body1-3, caps, etc.)
 - **TextField** - Input field component with Carrier DPX styling (supports multiple sizes, colors, validation states)
+- **Link** - Hyperlink component with typography variants and underline options
+- **Divider** - Horizontal and vertical divider lines (with optional text labels)
+- **Copyright** - Copyright notice component (automatically adds © and current year)
 
 More components coming soon!
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,19 +32,22 @@
   "author": "Carrier DPX",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@mui/material": "^5.0.0",
     "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0"
+    "@emotion/styled": "^11.0.0",
+    "@mui/material": "^5.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@figma/code-connect": "^1.0.0",
-    "@mui/material": "^5.15.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@figma/code-connect": "^1.0.0",
+    "@mui/material": "^5.15.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
   }
 }

package/src/components/Copyright/Copyright.figma.tsx

@@ -0,0 +1,19 @@
+/**
+ * Figma Code Connect Configuration for Copyright Component
+ */
+
+import figma from "@figma/code-connect";
+import Copyright from "./Copyright";
+
+figma.connect(
+  Copyright,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37592-67050",
+  {
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * Copyright automatically adds © symbol and current year
+     * Since Figma component has no props, we provide a default example
+     */
+    example: () => <Copyright text="Carrier" />,
+  }
+);

package/src/components/Copyright/Copyright.tsx

@@ -0,0 +1,36 @@
+import { FC, useMemo } from "react";
+import { CSSObject, styled } from "@mui/material/styles";
+import Typography from "../Typography";
+import { CopyrightProps } from "./types";
+import clsx from "clsx";
+import styles from "./styles";
+import { getSxStyles } from "../utils/styles";
+
+const CopyrightStyled = styled(Typography)(styles);
+const baseClassName = "copyright";
+
+/** The Copyright pattern provides legal confirmation for time of ownership.
+ *  //Default Import
+ * `import Copyright from '@carrier-io/air-react/Copyright'`
+ *  //Named Import
+ *  `import { Copyright } from '@carrier-io/air-react'`
+ */
+const Copyright: FC<CopyrightProps> = ({ text, sx, className }) => {
+  const currentYear = useMemo(() => {
+    return new Date().getFullYear();
+  }, []);
+
+  return (
+    <CopyrightStyled
+      variant="body3"
+      sx={(theme) =>
+        ({ fontSize: "12px", ...getSxStyles(theme, sx) } as CSSObject)
+      }
+      className={clsx(baseClassName, className)}
+    >
+      © {currentYear} {text}
+    </CopyrightStyled>
+  );
+};
+
+export default Copyright;

package/src/components/Copyright/index.ts

@@ -0,0 +1,3 @@
+export * from "./Copyright";
+export * from "./types";
+export { default } from "./Copyright";

package/src/components/Copyright/styles.ts

@@ -0,0 +1,8 @@
+import { lighten } from "@mui/material";
+import { StyledComponentDefaultProps } from "../types/common";
+
+const styles = ({ theme }: StyledComponentDefaultProps) => ({
+  color: lighten(theme.palette.common.black, 0.6),
+});
+
+export default styles;

package/src/components/Copyright/types.ts

@@ -0,0 +1,8 @@
+import { StylesExtendable } from "../types/props";
+
+export interface CopyrightProps extends StylesExtendable {
+  /**
+   * The content rendered within the component.
+   */
+  text: string;
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Figma Code Connect Configuration for Divider Component (Horizontal)
+ */
+
+import figma from "@figma/code-connect";
+import Divider from "./Divider";
+
+figma.connect(
+  Divider,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=15518-67418",
+  {
+    props: {
+      /**
+       * VARIANT MAPPING
+       */
+      variant: figma.enum("variant", {
+        full: "full",
+        padded: "padded",
+      }),
+
+      /**
+       * TEXT ALIGN MAPPING
+       */
+      textAlign: figma.enum("textAlign", {
+        center: "center",
+        left: "left",
+        right: "right",
+      }),
+
+      /**
+       * TEXT CONTENT
+       * When text boolean is true, shows Typography children
+       */
+      children: figma.boolean("text") ? figma.children("*") : undefined,
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * Horizontal divider (default orientation)
+     */
+    example: ({ variant, textAlign, children }) =>
+      children ? (
+        <Divider variant={variant} textAlign={textAlign}>
+          {children}
+        </Divider>
+      ) : (
+        <Divider variant={variant} />
+      ),
+  }
+);

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,57 @@
+import { forwardRef } from "react";
+
+import MuiDivider, {
+  DividerProps as MuiDividerProps,
+} from "@mui/material/Divider";
+import { styled } from "@mui/material/styles";
+
+import { styleTokens } from "../theme/constants/styleTokens";
+
+export interface DividerProps extends Omit<MuiDividerProps, "light"> {}
+
+declare module "@mui/material/Divider" {
+  interface DividerPropsVariantOverrides {
+    padded: true;
+    middle: false;
+    full: true;
+    fullWidth: false;
+    inset: false;
+  }
+}
+
+/** The Divider component is a thin line that groups content in lists and layouts.
+ *
+ * // Default import
+ * import Divider from '@carrier-io/air-react/Divider'
+ *
+ * // Named import
+ * import { Divider } from '@carrier-io/air-react'
+ */
+
+const MuiDividerStyled = styled(MuiDivider)(({ theme }) => ({
+  "&.MuiDivider-padded": {
+    marginLeft: styleTokens.margin.large,
+    marginRight: styleTokens.margin.large,
+    paddingTop: "8px",
+    paddingBottom: "8px",
+  },
+  "& .MuiDivider-wrapper": {
+    paddingLeft: styleTokens.padding.xsmall,
+    paddingRight: styleTokens.padding.xsmall,
+    color: theme.palette.base?.text.primary,
+  },
+  "&.MuiDivider-root": {
+    borderColor: theme.palette.base?.divider,
+    "&:before, &:after": {
+      borderTop: `thin solid ${theme.palette.base?.divider}`,
+    },
+  },
+}));
+
+const Divider = forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
+  return <MuiDividerStyled {...props} ref={ref} />;
+});
+
+Divider.displayName = "Divider";
+
+export default Divider;

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

@@ -0,0 +1,54 @@
+/**
+ * Figma Code Connect Configuration for Divider Component (Vertical)
+ */
+
+import figma from "@figma/code-connect";
+import Divider from "./Divider";
+
+figma.connect(
+  Divider,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=15556-68596",
+  {
+    props: {
+      /**
+       * VARIANT MAPPING
+       */
+      variant: figma.enum("variant", {
+        full: "full",
+        padded: "padded",
+      }),
+
+      /**
+       * TEXT ALIGN MAPPING
+       */
+      textAlign: figma.enum("textAlign", {
+        center: "center",
+        left: "left",
+        right: "right",
+      }),
+
+      /**
+       * TEXT CONTENT
+       * When text boolean is true, shows Typography children
+       */
+      children: figma.boolean("text") ? figma.children("*") : undefined,
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * Vertical divider - sets orientation="vertical"
+     */
+    example: ({ variant, textAlign, children }) =>
+      children ? (
+        <Divider
+          orientation="vertical"
+          variant={variant}
+          textAlign={textAlign}
+        >
+          {children}
+        </Divider>
+      ) : (
+        <Divider orientation="vertical" variant={variant} />
+      ),
+  }
+);

package/src/components/Divider/index.ts

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

package/src/components/Icon/ArrowLeftIcon.figma.tsx

@@ -0,0 +1,32 @@
+/**
+ * Figma Code Connect Configuration for ArrowLeft Icon
+ * 
+ * NOTE: Import ArrowLeftIcon from your actual icon library package.
+ * Example: import { ArrowLeftIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { ArrowLeftIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual ArrowLeftIcon import
+const ArrowLeftIcon = ({ variant, ...props }: any) => <span {...props}>ArrowLeftIcon</span>;
+
+figma.connect(
+  ArrowLeftIcon,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=ARROW-LEFT-ICON-NODE-ID",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <ArrowLeftIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/ArrowRightIcon.figma.tsx

@@ -0,0 +1,32 @@
+/**
+ * Figma Code Connect Configuration for ArrowRight Icon
+ * 
+ * NOTE: Import ArrowRightIcon from your actual icon library package.
+ * Example: import { ArrowRightIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { ArrowRightIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual ArrowRightIcon import
+const ArrowRightIcon = ({ variant, ...props }: any) => <span {...props}>ArrowRightIcon</span>;
+
+figma.connect(
+  ArrowRightIcon,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=ARROW-RIGHT-ICON-NODE-ID",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <ArrowRightIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/CheckIcon.figma.tsx

@@ -0,0 +1,32 @@
+/**
+ * Figma Code Connect Configuration for Check Icon
+ * 
+ * NOTE: Import CheckIcon from your actual icon library package.
+ * Example: import { CheckIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { CheckIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual CheckIcon import
+const CheckIcon = ({ variant, ...props }: any) => <span {...props}>CheckIcon</span>;
+
+figma.connect(
+  CheckIcon,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=CHECK-ICON-NODE-ID",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <CheckIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/CloseIcon.figma.tsx

@@ -0,0 +1,32 @@
+/**
+ * Figma Code Connect Configuration for Close Icon
+ * 
+ * NOTE: Import CloseIcon from your actual icon library package.
+ * Example: import { CloseIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { CloseIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual CloseIcon import
+const CloseIcon = ({ variant, ...props }: any) => <span {...props}>CloseIcon</span>;
+
+figma.connect(
+  CloseIcon,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=CLOSE-ICON-NODE-ID",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <CloseIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/HomeIcon.figma.tsx

@@ -0,0 +1,32 @@
+/**
+ * Figma Code Connect Configuration for Home Icon
+ * 
+ * NOTE: Import HomeIcon from your actual icon library package.
+ * Example: import { HomeIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { HomeIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual HomeIcon import
+const HomeIcon = ({ variant, ...props }: any) => <span {...props}>HomeIcon</span>;
+
+figma.connect(
+  HomeIcon,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=HOME-ICON-NODE-ID",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <HomeIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from "react";
+
+import { Icon as MuiIcon, IconProps as MuiIconProps } from "@mui/material";
+
+export interface IconProps extends MuiIconProps {}
+
+declare module "@mui/material/Icon" {
+  interface IconPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+/** The Icon component provides access to our Icon Library and allows graphic, size and color customization.
+ *
+ * `import Icon from '@carrier-io/air-react/Icon'`
+ */
+
+const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return <MuiIcon {...props} ref={ref} />;
+});
+
+Icon.displayName = "Icon";
+
+export default Icon;

package/src/components/Icon/InfoIcon.figma.tsx

@@ -0,0 +1,32 @@
+/**
+ * Figma Code Connect Configuration for Info Icon
+ * 
+ * NOTE: Import InfoIcon from your actual icon library package.
+ * Example: import { InfoIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { InfoIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual InfoIcon import
+const InfoIcon = ({ variant, ...props }: any) => <span {...props}>InfoIcon</span>;
+
+figma.connect(
+  InfoIcon,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=INFO-ICON-NODE-ID",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <InfoIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);

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

@@ -0,0 +1,32 @@
+/**
+ * Figma Code Connect Configuration for Menu Icon
+ * 
+ * NOTE: Import MenuIcon from your actual icon library package.
+ * Example: import { MenuIcon } from '@carrier-io/icons';
+ */
+
+import figma from "@figma/code-connect";
+import Icon from "./Icon";
+// TODO: Import from your actual icon library
+// import { MenuIcon } from '@carrier-io/icons';
+
+// Placeholder - replace with actual MenuIcon import
+const MenuIcon = ({ variant, ...props }: any) => <span {...props}>MenuIcon</span>;
+
+figma.connect(
+  MenuIcon,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=MENU-ICON-NODE-ID",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        outlined: "outlined",
+        filled: "filled",
+      }),
+    },
+    example: ({ variant }) => (
+      <Icon fontSize="medium">
+        <MenuIcon variant={variant} />
+      </Icon>
+    ),
+  }
+);