@jobber/components-native 0.86.1 → 0.86.2-JOB-89949-ec4cb2a.11

package/dist/types/src/ActionLabel/ActionLabel.d.ts

@@ -1,11 +1,12 @@
+import React from "react";
 import type { TextAlign, TextColor } from "../Typography";
 export type ActionLabelVariation = Extract<TextColor, "interactive" | "destructive" | "learning" | "subtle" | "onPrimary">;
 type ActionLabelType = "default" | "cardTitle";
 interface ActionLabelProps {
     /**
-     * Text to display
+     * Text to display. Supports nesting text elements.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * Set the display text to disabled color
      */

package/dist/types/src/Heading/Heading.d.ts

@@ -1,11 +1,12 @@
+import React from "react";
 import type { TextAlign, TextColor, TruncateLength, TypographyProps } from "../Typography";
 type HeadingColor = Extract<TextColor, "text" | "subdued" | "heading">;
 export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";
 interface HeadingProps<T extends HeadingLevel> extends Pick<TypographyProps<"base">, "selectable"> {
     /**
-     * Text to display.
+     * Text to display. Supports nesting text elements.
      */
-    readonly children: string;
+    readonly children: React.ReactNode;
     /**
      * The type of heading, e.g., "Title"
      */

package/dist/types/src/Text/Text.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { OnTextLayoutEvent, TextAlign, TextVariation, TruncateLength, TypographyProps } from "../Typography";
 import type { TypographyUnsafeStyle } from "../Typography/Typography";
 export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "selectable"> {
@@ -31,9 +32,9 @@ export interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSi
      */
     readonly align?: TextAlign;
     /**
-     * Text to display
+     * Text to display. Supports nesting text elements.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * Reverse theme for better display on dark background
      */

package/dist/types/src/Typography/Typography.d.ts

@@ -24,9 +24,9 @@ export interface TypographyProps<T extends FontFamily> {
      */
     readonly size?: TextSize;
     /**
-     * Text to display
+     * Text to display. Supports nesting text elements.
      */
-    readonly children?: string;
+    readonly children?: React.ReactNode;
     /**
      * The maximum amount of lines the text can occupy before being truncated with "...".
      * Uses predefined string values that correspond to a doubling scale for the amount of lines.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.86.1",
+  "version": "0.86.2-JOB-89949-ec4cb2a.11+ec4cb2ad1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -95,5 +95,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "ca472a375fdf3c6b8e8596c3c26a3958893093ec"
+  "gitHead": "ec4cb2ad125a2793e88b405dc0d53041a4c1dab6"
 }

package/src/ActionLabel/ActionLabel.test.tsx

@@ -117,6 +117,18 @@ describe("ActionLabel", () => {
       });
     });
   });
+
+  it("supports nested inline content", () => {
+    const { Text } = require("../Text");
+    const { getByText, toJSON } = render(
+      <ActionLabel>
+        Before <Text variation="interactive">Inner</Text> After
+      </ActionLabel>,
+    );
+
+    expect(getByText("Inner")).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 function getStyleObject(el: ReactTestInstance) {

package/src/ActionLabel/ActionLabel.tsx

@@ -12,9 +12,9 @@ type ActionLabelType = "default" | "cardTitle";
 
 interface ActionLabelProps {
   /**
-   * Text to display
+   * Text to display. Supports nesting text elements.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * Set the display text to disabled color

package/src/ActionLabel/__snapshots__/ActionLabel.test.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionLabel supports nested inline content 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  maxFontSizeMultiplier={1.125}
+  selectable={false}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-semibold",
+      },
+      {
+        "color": "hsl(107, 58%, 33%)",
+      },
+      {
+        "textAlign": "center",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 18,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Before 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-regular",
+        },
+        {
+          "color": "hsl(107, 58%, 33%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    Inner
+  </Text>
+   After
+</Text>
+`;

package/src/Heading/Heading.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 import { Heading } from "./Heading";
+import { Text } from "../Text";
 
 describe("when Heading called with text as the only prop", () => {
   it("should match snapshot", () => {
@@ -81,3 +82,15 @@ describe("when Heading called with maxLines", () => {
     expect(view).toMatchSnapshot();
   });
 });
+
+describe("when Heading contains nested inline text", () => {
+  it("renders nested Text within Heading", () => {
+    const view = render(
+      <Heading>
+        Heading before <Text emphasis="strong">Inner</Text> after
+      </Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});

package/src/Heading/Heading.tsx

@@ -19,9 +19,9 @@ export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";
 interface HeadingProps<T extends HeadingLevel>
   extends Pick<TypographyProps<"base">, "selectable"> {
   /**
-   * Text to display.
+   * Text to display. Supports nesting text elements.
    */
-  readonly children: string;
+  readonly children: React.ReactNode;
 
   /**
    * The type of heading, e.g., "Title"

package/src/Heading/__snapshots__/Heading.test.tsx.snap

@@ -268,3 +268,68 @@ exports[`when Heading called with title variation should match snapshot 1`] = `
   Title Heading
 </Text>
 `;
+
+exports[`when Heading contains nested inline text renders nested Text within Heading 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-bold",
+      },
+      {
+        "color": "hsl(197, 90%, 12%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 20,
+        "lineHeight": 22,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Heading before 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-semibold",
+        },
+        {
+          "color": "hsl(198, 35%, 21%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    Inner
+  </Text>
+   after
+</Text>
+`;

package/src/Text/Text.test.tsx

@@ -151,6 +151,16 @@ it("renders text with underline styling", () => {
   expect(text.toJSON()).toMatchSnapshot();
 });
 
+it("supports nested Text children with mixed styles", () => {
+  const { getByText, toJSON } = render(
+    <Text>
+      Hello <Text emphasis="strong">World</Text>!
+    </Text>,
+  );
+  expect(getByText("World")).toBeDefined();
+  expect(toJSON()).toMatchSnapshot();
+});
+
 describe("UNSAFE_style", () => {
   it("applies custom styles via UNSAFE_style prop", () => {
     const customStyle = {

package/src/Text/Text.tsx

@@ -53,9 +53,9 @@ export interface TextProps
   readonly align?: TextAlign;
 
   /**
-   * Text to display
+   * Text to display. Supports nesting text elements.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * Reverse theme for better display on dark background

package/src/Text/__snapshots__/Text.test.tsx.snap

@@ -694,3 +694,69 @@ exports[`renders with strikethrough styling 1`] = `
   Test Text
 </Text>
 `;
+
+exports[`supports nested Text children with mixed styles 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={3.125}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(198, 35%, 21%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Hello 
+  <Text
+    accessibilityRole="text"
+    adjustsFontSizeToFit={false}
+    allowFontScaling={true}
+    collapsable={false}
+    maxFontSizeMultiplier={3.125}
+    selectable={true}
+    selectionColor="hsl(86, 100%, 46%)"
+    style={
+      [
+        {
+          "fontFamily": "inter-semibold",
+        },
+        {
+          "color": "hsl(198, 35%, 21%)",
+        },
+        {
+          "textAlign": "left",
+        },
+        {
+          "fontSize": 16,
+          "lineHeight": 20,
+        },
+        {
+          "letterSpacing": 0,
+        },
+      ]
+    }
+  >
+    World
+  </Text>
+  !
+</Text>
+`;

package/src/Typography/Typography.test.tsx

@@ -79,6 +79,67 @@ it("renders text with lowercase transform", () => {
   expect(typography.toJSON()).toMatchSnapshot();
 });
 
+it("supports nested children and applies transform only to string children", () => {
+  const typography = render(
+    <Typography transform="uppercase">
+      before <Typography fontWeight="bold">Inner</Typography> after
+    </Typography>,
+  );
+  expect(typography.toJSON()).toMatchSnapshot();
+});
+
+it("allows child Typography to control its own transform", () => {
+  const view = render(
+    <Typography transform="uppercase">
+      {"before "}
+      <Typography fontWeight="bold" transform="lowercase">
+        Inner
+      </Typography>
+      {" after"}
+    </Typography>,
+  ).toJSON();
+
+  expect(view).toMatchSnapshot();
+});
+
+it("supports multi-level nesting across Typography and Text", () => {
+  const view = render(
+    <Typography transform="uppercase">
+      {"level1 "}
+      <Typography>
+        and <Typography transform="lowercase">INNER</Typography>
+      </Typography>
+      {" end"}
+    </Typography>,
+  ).toJSON();
+
+  expect(view).toMatchSnapshot();
+});
+
+it("applies transform to parent strings only", () => {
+  const { getByText } = render(
+    <Typography transform="uppercase">
+      {"test "}
+      <Typography>inner</Typography>
+    </Typography>,
+  );
+
+  expect(getByText(/TEST/)).toBeDefined();
+  expect(getByText("inner")).toBeDefined();
+});
+
+it("allows child transform to override parent transform", () => {
+  const { getByText } = render(
+    <Typography transform="uppercase">
+      before <Typography transform="lowercase">INNER</Typography> after
+    </Typography>,
+  );
+
+  expect(getByText(/BEFORE/)).toBeDefined();
+  expect(getByText("inner")).toBeDefined();
+  expect(getByText(/AFTER/)).toBeDefined();
+});
+
 it("renders text with white color", () => {
   const typography = render(<Typography color="white">Test Text</Typography>);
   expect(typography.toJSON()).toMatchSnapshot();

package/src/Typography/Typography.tsx

@@ -41,9 +41,9 @@ export interface TypographyProps<T extends FontFamily> {
   readonly size?: TextSize;
 
   /**
-   * Text to display
+   * Text to display. Supports nesting text elements.
    */
-  readonly children?: string;
+  readonly children?: React.ReactNode;
 
   /**
    * The maximum amount of lines the text can occupy before being truncated with "...".
@@ -204,7 +204,7 @@ function InternalTypography<T extends FontFamily = "base">({
 
   const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
 
-  const text = getTransformedText(children, transform);
+  const content = transformChildren(children, transform);
   const accessibilityProps: AccessibilityProps = hideFromScreenReader
     ? {
         accessibilityRole: "none",
@@ -232,7 +232,7 @@ function InternalTypography<T extends FontFamily = "base">({
       selectionColor={tokens["color-brand--highlight"]}
       onTextLayout={onTextLayout}
     >
-      {text}
+      {content}
     </Text>
   );
 
@@ -273,19 +273,35 @@ function getFontStyle(
   }
 }
 
-function getTransformedText(text?: string, transform?: TextTransform) {
+function getTransformedText(text: string, transform?: TextTransform) {
   switch (transform) {
     case "lowercase":
-      return text?.toLocaleLowerCase();
+      return text.toLocaleLowerCase();
     case "uppercase":
-      return text?.toLocaleUpperCase();
+      return text.toLocaleUpperCase();
     case "capitalize":
-      return capitalize(text || "");
+      return capitalize(text);
     default:
       return text;
   }
 }
 
+function transformChildren(
+  children: React.ReactNode,
+  transform?: TextTransform,
+): React.ReactNode {
+  if (children == null || !transform || transform === "none") return children;
+
+  return React.Children.map(children, child => {
+    if (typeof child === "string") {
+      return getTransformedText(child, transform);
+    }
+
+    // Keep non-string children (numbers, elements, fragments) unchanged
+    return child;
+  });
+}
+
 function getColorStyle(
   styles: ReturnType<typeof useTypographyStyles>,
   color?: TextColor,