@carrier-dpx/air-react-library 0.2.2 → 0.3.0

package/README.md

@@ -80,6 +80,30 @@ function App() {
 - `onClick`: `() => void` - Click handler
 - All standard Material-UI Button props
 
+### Typography Component
+
+```tsx
+import { Typography } from '@carrier-dpx/air-react-library';
+
+function App() {
+  return (
+    <>
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="body1">Regular body text</Typography>
+      <Typography variant="body1Semibold">Semibold body text</Typography>
+      <Typography variant="caps2">UPPERCASE TEXT</Typography>
+    </>
+  );
+}
+```
+
+#### Available Typography Variants
+
+- **Headings**: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
+- **Body**: `body1`, `body1Semibold`, `body1Bold`, `body2`, `body2Semibold`, `body2Bold`, `body3`, `body3Semibold`, `body3Bold`
+- **Caps**: `caps1`, `caps1Bold`, `caps2`, `caps2Bold`, `caps3`, `caps3Bold`, `caps4`, `caps4Bold`
+- All standard Material-UI Typography props
+
 ## Figma Integration
 
 This library is integrated with Figma Code Connect. When using Figma Make, components from this library will be automatically suggested and used in generated code.
@@ -89,6 +113,7 @@ This library is integrated with Figma Code Connect. When using Figma Make, compo
 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.)
 
 More components coming soon!
 

package/package.json

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

package/src/components/Typography/Typography.figma.tsx

@@ -0,0 +1,66 @@
+/**
+ * Figma Code Connect Configuration for Typography Component
+ * 
+ * Maps Figma Typography component to React Typography component
+ */
+
+import figma from "@figma/code-connect";
+import Typography from "./Typography";
+
+figma.connect(
+  Typography,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=10984-58055",
+  {
+    props: {
+      /**
+       * VARIANT MAPPING
+       * Maps Figma's "variant" property to React's "variant" prop
+       * 
+       * Figma variant names with spaces need to be converted to camelCase for React
+       */
+      variant: figma.enum("variant", {
+        body1: "body1",
+        "body1 semibold": "body1Semibold",
+        "body1 bold": "body1Bold",
+        body2: "body2",
+        "body2 semibold": "body2Semibold",
+        "body2 bold": "body2Bold",
+        body3: "body3",
+        "body3 semibold": "body3Semibold",
+        "body3 bold": "body3Bold",
+        h1: "h1",
+        h2: "h2",
+        h3: "h3",
+        h4: "h4",
+        h5: "h5",
+        h6: "h6",
+        caps1: "caps1",
+        "caps1 bold": "caps1Bold",
+        caps2: "caps2",
+        "caps2 bold": "caps2Bold",
+        caps3: "caps3",
+        "caps3 bold": "caps3Bold",
+        caps4: "caps4",
+        "caps4 bold": "caps4Bold",
+      }),
+
+      /**
+       * TEXT CONTENT
+       * Maps the text content from Figma's "Label" layer
+       * This is the editable text in the Typography component
+       */
+      children: figma.children("Label"),
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * 
+     * Shows how the Typography component should be used in React code
+     */
+    example: ({ variant, children }) => (
+      <Typography variant={variant}>
+        {children}
+      </Typography>
+    ),
+  }
+);

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from "react";
+import MuiTypography from "@mui/material/Typography";
+import { TypographyProps } from "./types";
+
+/** The Typography component provides access to available font variations within the FDS theme and is useful for creating content hierarchy and instance swapping.
+ *
+ * `import Typography from '@carrier-io/air-react/Typography'`
+ */
+const Typography = forwardRef<HTMLSpanElement, TypographyProps>(
+  (props, ref) => {
+    return <MuiTypography {...props} ref={ref} />;
+  }
+);
+
+Typography.displayName = "Typography";
+
+export default Typography;

package/src/components/Typography/index.ts

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

package/src/components/Typography/types.ts

@@ -0,0 +1,185 @@
+import { ElementType, CSSProperties } from "react";
+import { ResponsiveStyleValue, AllSystemCSSProperties } from "@mui/system";
+import { TypographyProps as MuiTypographyProps } from "@mui/material/Typography";
+
+export interface AdditionalTypographyVariants {
+  body3: CSSProperties;
+  buttonLarge: CSSProperties;
+  buttonMedium: CSSProperties;
+  buttonSmall: CSSProperties;
+  avatarLetter: CSSProperties;
+  inputText1: CSSProperties;
+  inputText2: CSSProperties;
+  alertTitle: CSSProperties;
+  tableHeader1: CSSProperties;
+  tableHeader2: CSSProperties;
+  inputLabel: CSSProperties;
+  chip: CSSProperties;
+  helperText: CSSProperties;
+  badge: CSSProperties;
+  tooltip: CSSProperties;
+  body1Semibold: CSSProperties;
+  body1Bold: CSSProperties;
+  body2Semibold: CSSProperties;
+  body2Bold: CSSProperties;
+  body3Semibold: CSSProperties;
+  body3Bold: CSSProperties;
+  caps1: CSSProperties;
+  caps1Bold: CSSProperties;
+  caps2: CSSProperties;
+  caps2Bold: CSSProperties;
+  caps3: CSSProperties;
+  caps3Bold: CSSProperties;
+  caps4: CSSProperties;
+  caps4Bold: CSSProperties;
+  body4Semibold: CSSProperties;
+}
+
+export interface ExtraTypographyFontWeightOptions {
+  fontWeightExtraLight?: CSSProperties["fontWeight"];
+  fontWeightSemiBold?: CSSProperties["fontWeight"];
+  fontWeightExtraBold?: CSSProperties["fontWeight"];
+  fontWeightBlack?: CSSProperties["fontWeight"];
+}
+
+export type UnnecessaryTypographyVariants = "button";
+
+export type CustomTypographyVariant =
+  | "body3"
+  | "buttonLarge"
+  | "buttonMedium"
+  | "buttonSmall"
+  | "avatarLetter"
+  | "inputLabel"
+  | "chip"
+  | "helperText"
+  | "badge"
+  | "tooltip"
+  | "inputText1"
+  | "inputText2"
+  | "alertTitle"
+  | "tableHeader1"
+  | "tableHeader2"
+  | "body1Semibold"
+  | "body1Bold"
+  | "body2Semibold"
+  | "body2Bold"
+  | "body3Semibold"
+  | "body3Bold"
+  | "caps1"
+  | "caps1Bold"
+  | "caps2"
+  | "caps2Bold"
+  | "caps3"
+  | "caps3Bold"
+  | "caps4"
+  | "caps4Bold"
+  | "body4Semibold";
+
+declare module "@mui/material/styles" {
+  /**
+   * Extended TypographyVariants
+   */
+  interface TypographyVariants
+    extends AdditionalTypographyVariants,
+      ExtraTypographyFontWeightOptions {}
+  /**
+   * Extended TypographyVariantsOptions (allow configuration using `createTheme`)
+   */
+  interface TypographyVariantsOptions
+    extends AdditionalTypographyVariants,
+      ExtraTypographyFontWeightOptions {}
+}
+
+declare module "@mui/material/Typography" {
+  /**
+   * Update the Typography's variant prop options
+   */
+  interface TypographyPropsVariantOverrides {
+    body3: true;
+    button: false;
+    buttonLarge: true;
+    buttonMedium: true;
+    buttonSmall: true;
+    avatarLetter: true;
+    inputText1: true;
+    inputText2: true;
+    alertTitle: true;
+    tableHeader1: true;
+    tableHeader2: true;
+    inputLabel: true;
+    chip: true;
+    helperText: true;
+    badge: true;
+    tooltip: true;
+    body1Semibold: true;
+    body1Bold: true;
+    body2Semibold: true;
+    body2Bold: true;
+    body3Semibold: true;
+    body3Bold: true;
+    caps1: true;
+    caps1Bold: true;
+    caps2: true;
+    caps2Bold: true;
+    caps3: true;
+    caps3Bold: true;
+    caps4: true;
+    caps4Bold: true;
+    body4Semibold: true;
+  }
+}
+
+export interface TypographyProps
+  extends Omit<MuiTypographyProps, "variant" | "variantMapping"> {
+  /**
+   * Applies the theme typography styles.
+   * @default 'body1'
+   */
+  variant?:
+    | Exclude<MuiTypographyProps["variant"], UnnecessaryTypographyVariants>
+    | CustomTypographyVariant;
+  /**
+   * The component maps the variant prop to a range of different HTML element types.
+   * For instance, subtitle1 to `<h6>`.
+   * If you wish to change that mapping, you can provide your own.
+   * Alternatively, you can use the `component` prop.
+   * @default {
+   *   h1: 'h1',
+   *   h2: 'h2',
+   *   h3: 'h3',
+   *   h4: 'h4',
+   *   h5: 'h5',
+   *   h6: 'h6',
+   *   subtitle1: 'h6',
+   *   subtitle2: 'h6',
+   *   body1: 'p',
+   *   body2: 'p',
+   *   body3: 'p',
+   *   inherit: 'p',
+   *   buttonLarge: "span",
+   *   buttonMedium: "span",
+   *   buttonSmall: "span",
+   *   avatarLetter: "span",
+   *   inputText1: "span",
+   *   inputText2: "span",
+   *   alertTitle: "span",
+   *   tableHeader1: "span",
+   *   tableHeader2: "span",
+   *   inputLabel: "span",
+   *   chip: "span",
+   *   helperText: "span",
+   *   badge: "span",
+   *   tooltip: "span",
+   * }
+   */
+  variantMapping?: MuiTypographyProps["variantMapping"];
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: ElementType;
+  /**
+   * Specifies how to capitalize an element's text
+   */
+  textTransform?: ResponsiveStyleValue<AllSystemCSSProperties["textTransform"]>;
+}

package/src/index.ts

@@ -1,3 +1,5 @@
 export { default as Button } from "./components/Button";
 export type { ButtonProps } from "./components/Button";
+export { default as Typography } from "./components/Typography";
+export type { TypographyProps } from "./components/Typography";
 export * from "./components/theme";