@jobber/components-native 0.69.3-SCOTTTHd.31 → 0.69.3-SCOTTTHd.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.69.3-SCOTTTHd.31+15d0374e",
+  "version": "0.69.3-SCOTTTHd.45+8d76eff1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -82,5 +82,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "15d0374ed8f1863dbae171f3b6fc998e0be0097c"
+  "gitHead": "8d76eff16e7f4fad97727aff66cfb2435b30480a"
 }

package/src/Button/Button.test.tsx

@@ -209,8 +209,8 @@ describe("Button", () => {
     it("renders an icon Button with same color as the Button text", () => {
       const { iconColor, textColor } = getIconAndTextColorFromRender({});
 
-      expect(iconColor).toBe("rgba(255, 255, 255, 1)");
-      expect(textColor).toBe(tokens["color-white"]);
+      expect(iconColor).toBe(tokens["color-white"]);
+      expect(textColor).toBe(iconColor);
     });
 
     it("renders the learning variation and secondary type with icon and label with the same color", () => {
@@ -218,8 +218,8 @@ describe("Button", () => {
         variation: "learning",
         type: "secondary",
       });
-      expect(iconColor).toBe("hsl(198, 35%, 21%)");
-      expect(textColor).toBe(tokens["color-interactive--subtle"]);
+      expect(iconColor).toBe(tokens["color-interactive--subtle"]);
+      expect(textColor).toBe(iconColor);
     });
 
     it("renders the destructive variation and secondary type with icon and label with the same color", () => {
@@ -227,8 +227,8 @@ describe("Button", () => {
         variation: "destructive",
         type: "secondary",
       });
-      expect(iconColor).toBe("hsl(6, 64%, 51%)");
-      expect(textColor).toBe(tokens["color-destructive"]);
+      expect(iconColor).toBe(tokens["color-destructive"]);
+      expect(textColor).toBe(iconColor);
     });
 
     it("renders the cancel variation and tertiary type with icon and label with the same color", () => {
@@ -236,8 +236,8 @@ describe("Button", () => {
         variation: "cancel",
         type: "tertiary",
       });
-      expect(iconColor).toBe("hsl(198, 35%, 21%)");
-      expect(textColor).toBe("hsl(198, 35%, 21%)");
+      expect(iconColor).toBe(tokens["color-interactive--subtle"]);
+      expect(textColor).toBe(iconColor);
     });
 
     it("renders an icon Button if only an icon is passed", () => {

package/src/Icon/Icon.tsx

@@ -41,6 +41,7 @@ export function Icon({
     name,
     color,
     size,
+    platform: "mobile",
     format: "js",
   });
   const icon = paths.map((path: string) => {

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

@@ -417,7 +417,11 @@ exports[`renders thumbsDown icon 1`] = `
         "display": "flex",
         "fill": "hsl(198, 35%, 21%)",
         "height": 24,
-        "transform": "scaleY(-1)",
+        "transform": [
+          {
+            "scaleY": -1,
+          },
+        ],
         "verticalAlign": "middle",
         "width": 24,
       },
@@ -439,16 +443,6 @@ exports[`renders thumbsDown icon 1`] = `
         "type": 0,
       }
     }
-    matrix={
-      [
-        1,
-        0,
-        0,
-        1,
-        0,
-        0,
-      ]
-    }
     propList={
       [
         "fill",

package/src/Menu/Menu.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { View } from "react-native";
+import { tokens } from "@jobber/design/foundation";
 import { Menu, MenuOptionProps, MenuProps } from ".";
 import { Icon } from "../Icon";
 import { Button } from "../Button";
@@ -129,17 +130,13 @@ describe("Menu", () => {
       });
 
       fireEvent.press(getByLabelText(menuLabel));
-      expect(getByTestId("add").props.style).toStrictEqual([
-        { backgroundColor: "transparent", borderWidth: 0 },
-        {
-          display: "flex",
-          fill: "hsl(6, 64%, 51%)",
-          height: 24,
-          verticalAlign: "middle",
-          width: 24,
-        },
-        { flex: 0, height: 24, width: 24 },
-      ]);
+      expect(getByTestId("add").props.style).toContainEqual({
+        display: "flex",
+        fill: tokens["color-critical"],
+        height: 24,
+        verticalAlign: "middle",
+        width: 24,
+      });
     });
 
     it("closes the menu after clicking on a menu option", () => {