@jobber/components-native 0.102.2 → 0.103.1-JOB-fix-me-b57d779.1

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -1,16 +1,56 @@
 # Activity Indicator
 
-ActivityIndicator is used to indicate the loading of content where the actual
-amount of loading time or progress is unknown.
+`ActivityIndicator` is used to communicate an **indeterminate** activity the
+user cannot directly control or measure — loading, fetching, or waiting on an
+external system.
 
-## Related components
+Use `ActivityIndicator` when the loading time or fraction of progress is
+unknown. If you know the fraction of progress (for example, "3 of 4 files
+uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
+will subsume `ProgressBar` under the new naming is forthcoming.
 
-To indicate loading content in web applications, refer to
-[Spinner](/components/Spinner).
+## Design & usage guidelines
 
-ActivityIndicator uses the core component
-[ActivityIndicator](https://reactnative.dev/docs/activityIndicator) from
-`react-native`.
+The default `ActivityIndicator` size is `base` (32px) and can be used in most
+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.
+
+## 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"`).
+
+The indicator does not participate in the keyboard tab order.
+
+### Reduced motion
+
+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.
+
+## Relationship to Spinner
+
+The legacy [Spinner](/components/Spinner) component remains available and
+unchanged. New code should prefer `ActivityIndicator`. A follow-up change is
+expected to deprecate `Spinner` in favour of `ActivityIndicator`.
+
+## Mobile
+
+On mobile (`@jobber/components-native`), `ActivityIndicator` uses the
+[ActivityIndicator](https://reactnative.dev/docs/activityIndicator) core
+component from React Native.
 
 ## Mockup
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.102.2",
+    "version": "0.103.1-JOB-fix-me-b57d779.1+b57d779a",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -15,6 +15,19 @@
     "main": "dist/src/index.js",
     "module": "dist/src/index.js",
     "types": "dist/types/src/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/types/src/index.d.ts",
+            "default": "./dist/src/index.js"
+        },
+        "./primitives": {
+            "types": "./dist/types/src/primitives/index.d.ts",
+            "default": "./dist/src/primitives/index.js"
+        },
+        "./meta.json": "./dist/src/utils/meta/meta.json",
+        "./dist/src/utils/meta/meta.json": "./dist/src/utils/meta/meta.json",
+        "./package.json": "./package.json"
+    },
     "files": [
         "dist",
         "dist/docs/**/*",
@@ -58,7 +71,7 @@
     "devDependencies": {
         "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
-        "@jobber/design": "0.101.0",
+        "@jobber/design": "0.101.1",
         "@jobber/hooks": "2.20.1",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
@@ -109,5 +122,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "2829a8684a94528cf087b63fa471c531c95d01c8"
+    "gitHead": "b57d779ace9b72a8aaa258ee26ee1ebd3cdc4cbf"
 }

package/dist/src/Icon/Icon.js

@@ -1,13 +1,16 @@
 import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { getIcon } from "@jobber/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export function Icon({ name, color, size = "base", customColor, testID, }) {
+    const { tokens } = useAtlantisTheme();
     const { svgStyle, paths, viewBox } = getIcon({
         name,
         color,
         size,
         platform: "mobile",
         format: "js",
+        tokens,
     });
     const icon = paths.map((path) => {
         return React.createElement(Path, { key: path, d: path, fill: customColor || svgStyle.fill });

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

@@ -1,6 +1,9 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
+import { darkTokens } from "@jobber/design";
 import { Icon } from ".";
+import { AtlantisThemeContextProvider } from "../AtlantisThemeContext";
 it("renders home icon", () => {
     const tree = render(React.createElement(Icon, { name: "home" })).toJSON();
     expect(tree).toMatchSnapshot();
@@ -38,3 +41,37 @@ it("applies name prop as testID when testID prop is not provided", () => {
     const { getByTestId } = render(React.createElement(Icon, { name: "home" }));
     expect(getByTestId("home")).toBeDefined();
 });
+describe("theme-aware fill", () => {
+    function getPathFills(svg) {
+        return svg.UNSAFE_root.findAllByType(Path).map(p => p.props.fill);
+    }
+    it("resolves the icon color to the dark-theme token under a dark theme", () => {
+        const expected = darkTokens["color-icon"];
+        const svg = render(React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement(Icon, { name: "home", color: "icon" })));
+        expect(getPathFills(svg)[0]).toBe(expected);
+        expect(getPathFills(svg)[0]).not.toBe("hsl(198, 35%, 21%)");
+    });
+    it("resolves an icon's semantic default fill via live tokens when no color prop is given", () => {
+        // Regression check: semantic fills (e.g. quote -> color-quote) must
+        // resolve through their own token, not fall back to color-icon.
+        const expectedQuote = darkTokens["color-quote"];
+        const fallbackIcon = darkTokens["color-icon"];
+        const svg = render(React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement(Icon, { name: "quote" })));
+        expect(getPathFills(svg)[0]).toBe(expectedQuote);
+        expect(getPathFills(svg)[0]).not.toBe(fallbackIcon);
+    });
+    it("defaults to the color-icon token when no color prop and no semantic default exist", () => {
+        const expected = darkTokens["color-icon"];
+        const svg = render(React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement(Icon, { name: "home" })));
+        expect(getPathFills(svg)[0]).toBe(expected);
+        expect(getPathFills(svg)[0]).not.toBe("hsl(198, 35%, 21%)");
+    });
+    it("customColor still wins over theme tokens", () => {
+        const svg = render(React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement(Icon, { name: "home", color: "icon", customColor: "#f33323" })));
+        expect(getPathFills(svg)[0]).toBe("#f33323");
+    });
+});

package/dist/src/primitives/index.js

@@ -0,0 +1 @@
+export {};