@jobber/components-native 0.111.1 → 0.112.0

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -65,19 +65,19 @@ cases. The `small` size (16px) should be used on individual elements of an
 interface (e.g. inside a `Button` or `Card`) or when sitting next to short
 inline text.
 
-Layout is the consumer's responsibility — `ActivityIndicator` does not expose
-an `inline` prop. Place it inside your own flex / inline-block container, or
-pass a `className` / `style`, to control surrounding layout.
+Layout is the consumer's responsibility — `ActivityIndicator` does not expose an
+`inline` prop. Place it inside your own flex / inline-block container, or pass a
+`className` / `style`, to control surrounding layout.
 
 ## Accessibility
 
 `ActivityIndicator` announces itself politely to assistive technology:
 
-* `role="status"` marks the element as a polite live region, appropriate for
-  a non-urgent loading state.
-* `aria-label` defaults to the literal English string `"Loading"`. Pass a
-  custom `ariaLabel` to localize or to describe the specific activity
-  (e.g. `ariaLabel="Uploading file"`).
+* `role="status"` marks the element as a polite live region, appropriate for a
+  non-urgent loading state.
+* `aria-label` defaults to the literal English string `"Loading"`. Pass a custom
+  `ariaLabel` to localize or to describe the specific activity (e.g.
+  `ariaLabel="Uploading file"`).
 
 The indicator does not participate in the keyboard tab order.
 
@@ -85,9 +85,9 @@ The indicator does not participate in the keyboard tab order.
 
 When the user's operating system reports
 [`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion),
-the indicator hides its rocking and rotating layers, repaints a single
-static ring in the icon foreground colour, and gently pulses its opacity so
-the indicator still reads as "busy" without rotational motion.
+the indicator hides its rocking and rotating layers, repaints a single static
+ring in the icon foreground colour, and gently pulses its opacity so the
+indicator still reads as "busy" without rotational motion.
 
 ## Relationship to Spinner
 

package/dist/docs/Icon/Icon.md

@@ -427,7 +427,6 @@ export function IconSizesExample() {
 |      | `import`         |
 |      | `merge`          |
 |      | `redo`           |
-|      | `remove`         |
 |      | `search`         |
 |      | `sort`           |
 |      | `sync`           |
@@ -512,6 +511,25 @@ export function IconSizesExample() {
 |      | `plus2`  |
 
 
+## Validating icon names at runtime
+
+When icon names arrive as runtime data (API responses, configuration, user
+input), validate them before rendering with the exports from
+`@jobber/components` (also available from `@jobber/design`):
+
+* `iconNames`: a readonly array of every valid icon name
+* `isIconName(value)`: a type guard that narrows a value to `IconNames`
+
+```tsx
+import { Icon, isIconName } from "@jobber/components";
+
+function StatusIcon({ iconName }: { readonly iconName: string }) {
+  if (!isIconName(iconName)) return null;
+
+  return <Icon name={iconName} />;
+}
+```
+
 ## Component customization
 
 ### UNSAFE\_ props (advanced usage)

package/dist/docs/empty-states/empty-states.md

@@ -21,7 +21,8 @@ for the “emptiness” may include, but are not limited to…
 * Search results with no match
 * An error has resulted in the user not being able to access content they
   otherwise could
-* A specific field doesn't have a value (for example, a custom field that the user hasn't populated)
+* A specific field doesn't have a value (for example, a custom field that the
+  user hasn't populated)
 
 ## Solution
 
@@ -70,22 +71,29 @@ When a field doesn't have a value, use a dash to indicate the lack of a value.
 This provides:
 
 * confirmation that nothing was entered
-* confirmation that something *can* be entered there should the information require an update
+* confirmation that something *can* be entered there should the information
+  require an update
 
 ```tsx
 <Card>
     <Content>
       <Heading level={4}>Additional details</Heading>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Preferred service date</Text>
+        <Text size="small" variation="subdued">
+          Preferred service date
+        </Text>
         <Text>June 25, 2026</Text>
       </Stack>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Gate code</Text>
+        <Text size="small" variation="subdued">
+          Gate code
+        </Text>
         <Text>—</Text>
       </Stack>
       <Stack gap="smallest">
-        <Text size="small" variation="subdued">Additional requests</Text>
+        <Text size="small" variation="subdued">
+          Additional requests
+        </Text>
         <Text>—</Text>
       </Stack>
     </Content>

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.111.1",
+    "version": "0.112.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -73,7 +73,7 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.110.0",
+        "@jobber/design": "0.111.0",
         "@jobber/hooks": "2.21.0",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
@@ -124,5 +124,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "a9b32a282f2f70d07b99600c8ce8dfdd2d6e3db9"
+    "gitHead": "71ed27026cd539889c5ce6c627bd74a8d283112e"
 }

package/dist/src/BottomSheet/BottomSheet.js

@@ -64,7 +64,7 @@ function Footer({ styles, close, cancelLabel, }) {
     return (React.createElement(View, null,
         React.createElement(View, { style: styles.footerDivider },
             React.createElement(Divider, null)),
-        React.createElement(BottomSheetOption, { text: cancelLabel, icon: "remove", onPress: close })));
+        React.createElement(BottomSheetOption, { text: cancelLabel, icon: "cross", onPress: close })));
 }
 function dismissKeyboard() {
     //Dismisses the keyboard before opening the bottom sheet.

package/dist/src/Chip/Chip.js

@@ -42,7 +42,7 @@ export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBa
         label && (React.createElement(View, { style: styles.chipText },
             React.createElement(Typography, { color: "base", fontWeight: "medium", maxFontScaleSize: tokens["typography--fontSize-large"], maxLines: "single", reverseTheme: isActive }, label))),
         isDismissible && (React.createElement(View, { style: [styles.dismissIcon, dismissColor] },
-            React.createElement(Icon, { name: "remove", size: "small" })))));
+            React.createElement(Icon, { name: "cross", size: "small" })))));
 }
 function getBorderStyle(inactiveBackgroundColor, tokens) {
     let borderColor = "transparent";

package/dist/src/Chip/Chip.test.js

@@ -38,7 +38,7 @@ it("renders an inactive Chip with icon", () => {
 });
 it("renders a Chip with the dismiss icon", () => {
     const { getByTestId } = render(React.createElement(Chip, { label: "Foo", onPress: jest.fn(), isActive: true, isDismissible: true }));
-    expect(getByTestId("remove")).toBeDefined();
+    expect(getByTestId("cross")).toBeDefined();
 });
 it("should call the handler with the new value", () => {
     const pressHandler = jest.fn();

package/dist/src/Icon/Icon.js

@@ -7,14 +7,18 @@ export function Icon({ name, color, size = "base", customColor, testID, }) {
     const { svgStyle, paths, viewBox } = getIcon({
         name,
         color,
+        customColor,
         size,
         platform: "mobile",
         format: "js",
         tokens,
     });
+    // Paths with their own fill are static artwork; only unfilled paths take
+    // the themed color and customColor.
     // getIcon returns undefined paths for an unknown icon name; render nothing rather than crash.
-    const icon = (paths !== null && paths !== void 0 ? paths : []).map((path) => {
-        return React.createElement(Path, { key: path, d: path, fill: customColor || svgStyle.fill });
+    const icon = (paths !== null && paths !== void 0 ? paths : []).map(path => {
+        var _a;
+        return (React.createElement(Path, { key: path.d, d: path.d, fill: (_a = path.fill) !== null && _a !== void 0 ? _a : (customColor || svgStyle.fill), fillOpacity: path.fillOpacity, opacity: path.opacity }));
     });
     return (React.createElement(Svg, { style: Object.assign(Object.assign({}, svgStyle), { display: "flex" }), testID: testID || name, viewBox: viewBox }, icon));
 }

package/dist/src/Icon/Icon.test.js

@@ -45,6 +45,20 @@ it("renders an empty svg without throwing for an unknown icon name", () => {
     const svg = render(React.createElement(Icon, { name: "someNonexistentIcon" }));
     expect(svg.UNSAFE_root.findAllByType(Path)).toHaveLength(0);
 });
+it("renders the multi-color truck icon with its static fills", () => {
+    const svg = render(React.createElement(Icon, { name: "truck" }));
+    const fills = svg.UNSAFE_root.findAllByType(Path).map(path => path.props.fill);
+    expect(fills).toHaveLength(5);
+    expect(fills).toContain("#2B2B2B");
+    expect(fills.filter(fill => fill.startsWith("#"))).toHaveLength(4);
+});
+it("applies customColor to the truck body path but not its static artwork", () => {
+    const svg = render(React.createElement(Icon, { name: "truck", customColor: "#abc123" }));
+    const fills = svg.UNSAFE_root.findAllByType(Path).map(path => path.props.fill);
+    expect(fills).toHaveLength(5);
+    expect(fills.filter(fill => fill === "#abc123")).toHaveLength(1);
+    expect(fills).toEqual(expect.arrayContaining(["#2B2B2B", "#000000", "#FFFFFF", "#2A2A2A"]));
+});
 describe("theme-aware fill", () => {
     function getPathFills(svg) {
         return svg.UNSAFE_root.findAllByType(Path).map(p => p.props.fill);

package/dist/src/Toast/Toast.js

@@ -21,7 +21,7 @@ function DefaultToast({ text1 }) {
             React.createElement(TouchableOpacity, { style: styles.toastMessage, accessibilityRole: "alert" },
                 React.createElement(Text, { reverseTheme: true }, text1)),
             React.createElement(View, { style: styles.toastIcon },
-                React.createElement(IconButton, { onPress: Toast.hide, name: "remove", customColor: tokens["color-greyBlue--light"], accessibilityLabel: t("dismiss") })))));
+                React.createElement(IconButton, { onPress: Toast.hide, name: "cross", customColor: tokens["color-greyBlue--light"], accessibilityLabel: t("dismiss") })))));
 }
 const toastConfig = {
     default: DefaultToast,