@jobber/components-native 0.102.2 → 0.103.0

package/dist/types/src/primitives/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.102.2",
+  "version": "0.103.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -15,6 +15,17 @@
   "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"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist",
     "dist/docs/**/*",
@@ -58,7 +69,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 +120,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "2829a8684a94528cf087b63fa471c531c95d01c8"
+  "gitHead": "7b859533f0b0482ad30654fb0fde5d41c2d918ba"
 }

package/src/Icon/Icon.test.tsx

@@ -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(<Icon name="home" />).toJSON();
@@ -47,3 +50,58 @@ it("applies name prop as testID when testID prop is not provided", () => {
   const { getByTestId } = render(<Icon name="home" />);
   expect(getByTestId("home")).toBeDefined();
 });
+
+describe("theme-aware fill", () => {
+  function getPathFills(svg: ReturnType<typeof render>) {
+    return svg.UNSAFE_root.findAllByType(Path).map(p => p.props.fill as string);
+  }
+
+  it("resolves the icon color to the dark-theme token under a dark theme", () => {
+    const expected = (darkTokens as Record<string, string>)["color-icon"];
+    const svg = render(
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <Icon name="home" color="icon" />
+      </AtlantisThemeContextProvider>,
+    );
+
+    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 as Record<string, string>)["color-quote"];
+    const fallbackIcon = (darkTokens as Record<string, string>)["color-icon"];
+    const svg = render(
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <Icon name="quote" />
+      </AtlantisThemeContextProvider>,
+    );
+
+    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 as Record<string, string>)["color-icon"];
+    const svg = render(
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <Icon name="home" />
+      </AtlantisThemeContextProvider>,
+    );
+
+    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(
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <Icon name="home" color="icon" customColor="#f33323" />
+      </AtlantisThemeContextProvider>,
+    );
+
+    expect(getPathFills(svg)[0]).toBe("#f33323");
+  });
+});

package/src/Icon/Icon.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import type { IconColorNames, IconNames, IconSizes } from "@jobber/design";
 import { getIcon } from "@jobber/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export interface IconProps {
   /** The icon to show.  */
@@ -38,12 +39,14 @@ export function Icon({
   customColor,
   testID,
 }: IconProps) {
+  const { tokens } = useAtlantisTheme();
   const { svgStyle, paths, viewBox } = getIcon({
     name,
     color,
     size,
     platform: "mobile",
     format: "js",
+    tokens,
   });
 
   const icon = paths.map((path: string) => {

package/src/primitives/index.ts

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