@jobber/components-native 0.103.1 → 0.104.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.103.1",
+    "version": "0.104.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -122,5 +122,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "87938ccef4ab0c51ab356fd1b19c9a20ca1a73ab"
+    "gitHead": "53e34a184129137a1ea6e2dea8a287ad8a468cfb"
 }

package/dist/src/primitives/HelperText/HelperText.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { View } from "react-native";
+import { useStyles } from "./HelperText.style";
+import { Text } from "../../Text";
+import { Icon } from "../../Icon";
+export function HelperText({ message, status = "neutral" }) {
+    const styles = useStyles();
+    const isCritical = status === "critical";
+    return (React.createElement(View, { style: [styles.row, isCritical ? styles.rowCritical : styles.rowNeutral], accessible: isCritical || undefined, accessibilityRole: isCritical ? "alert" : undefined, accessibilityLiveRegion: isCritical ? "assertive" : undefined },
+        isCritical && (React.createElement(View, { style: styles.iconContainer },
+            React.createElement(Icon, { name: "alert", size: "small", color: "critical" }))),
+        React.createElement(Text, { level: "textSupporting", variation: isCritical ? "error" : "subdued" }, message)));
+}

package/dist/src/primitives/HelperText/HelperText.style.js

@@ -0,0 +1,19 @@
+import { tokens as staticTokens } from "../../utils/design";
+import { buildThemedStyles } from "../../AtlantisThemeContext";
+const tightLineHeight = staticTokens["typography--lineHeight-tight"];
+export const useStyles = buildThemedStyles(tokens => ({
+    row: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+    },
+    rowNeutral: {
+        gap: 0,
+    },
+    rowCritical: {
+        gap: tokens["space-smaller"],
+    },
+    iconContainer: {
+        height: tightLineHeight,
+        justifyContent: "center",
+    },
+}));

package/dist/src/primitives/HelperText/HelperText.test.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { AccessibilityInfo } from "react-native";
+import { HelperText } from ".";
+import { Icon } from "../../Icon";
+describe("HelperText", () => {
+    describe("neutral status (default)", () => {
+        it("renders the message as subdued supporting text without an alert icon or role", () => {
+            const { getByText, queryByRole } = render(React.createElement(HelperText, { message: "Pick a status" }));
+            expect(getByText("Pick a status")).toBeDefined();
+            expect(queryByRole("alert")).toBeNull();
+        });
+        it("renders identically when status is explicitly neutral", () => {
+            const { getByText, queryByRole } = render(React.createElement(HelperText, { status: "neutral", message: "Pick a status" }));
+            expect(getByText("Pick a status")).toBeDefined();
+            expect(queryByRole("alert")).toBeNull();
+        });
+    });
+    describe("critical status", () => {
+        it("renders the alert icon, error text, alert role, and assertive live region", () => {
+            const { getByText, getByRole, UNSAFE_getByType } = render(React.createElement(HelperText, { status: "critical", message: "Pick a status before continuing" }));
+            expect(getByText("Pick a status before continuing")).toBeDefined();
+            const alertWrapper = getByRole("alert");
+            expect(alertWrapper.props.accessibilityLiveRegion).toBe("assertive");
+            // Confirms the alert icon is present alongside the message.
+            const icon = UNSAFE_getByType(Icon);
+            expect(icon.props.name).toBe("alert");
+            expect(icon.props.size).toBe("small");
+            expect(icon.props.color).toBe("critical");
+        });
+    });
+    describe("leaf invariants", () => {
+        it("does not fire imperative accessibility announcements", () => {
+            jest.spyOn(AccessibilityInfo, "announceForAccessibility");
+            render(React.createElement(HelperText, { status: "neutral", message: "Neutral" }));
+            render(React.createElement(HelperText, { status: "critical", message: "Critical" }));
+            expect(AccessibilityInfo.announceForAccessibility).not.toHaveBeenCalled();
+            jest.mocked(AccessibilityInfo.announceForAccessibility).mockRestore();
+        });
+        it("renders successfully outside of any Atlantis context", () => {
+            // Renders bare (no providers) and asserts no warning or throw.
+            const warn = jest.spyOn(console, "warn").mockImplementation(() => {
+                // swallow warnings; we'll inspect the spy below
+            });
+            const error = jest.spyOn(console, "error").mockImplementation(() => {
+                // swallow errors; we'll inspect the spy below
+            });
+            expect(() => render(React.createElement(HelperText, { message: "Bare render" }))).not.toThrow();
+            expect(warn).not.toHaveBeenCalled();
+            expect(error).not.toHaveBeenCalled();
+            warn.mockRestore();
+            error.mockRestore();
+        });
+    });
+});

package/dist/src/primitives/HelperText/index.js

@@ -0,0 +1 @@
+export { HelperText } from "./HelperText";

package/dist/src/primitives/index.js

@@ -1 +1,4 @@
-export {};
+/**
+ * This file exports styled components-native primitives.
+ */
+export * from "./HelperText";