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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.69.3-SCOTTTHd.31+15d0374e",
+  "version": "0.69.3-SCOTTTHd.48+a0b5bb3c",
   "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": "a0b5bb3ca4c74c2d2bb86edae9e34e2b3482b364"
 }

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

@@ -37,14 +37,16 @@ export function Icon({
   customColor,
   testID,
 }: IconProps): JSX.Element {
-  const { svgStyle, pathStyle, paths, viewBox } = getIcon({
+  const { svgStyle, paths, viewBox } = getIcon({
     name,
     color,
     size,
+    platform: "mobile",
     format: "js",
   });
+
   const icon = paths.map((path: string) => {
-    return <Path key={path} d={path} fill={customColor || pathStyle.fill} />;
+    return <Path key={path} d={path} fill={customColor || svgStyle.fill} />;
   });
 
   return (

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

@@ -50,7 +50,7 @@ exports[`renders apple icon 1`] = `
       d="M18.467 12.754c-.027-2.996 2.453-4.453 2.566-4.52-1.404-2.048-3.581-2.328-4.346-2.35-1.828-.193-3.601 1.094-4.533 1.094-.95 0-2.384-1.076-3.93-1.044-1.988.03-3.849 1.182-4.87 2.97C1.25 12.55 2.82 17.91 4.838 20.856c1.01 1.443 2.189 3.055 3.733 2.998 1.51-.062 2.074-.963 3.897-.963 1.806 0 2.335.963 3.91.927 1.62-.026 2.641-1.45 3.615-2.907 1.166-1.654 1.635-3.283 1.653-3.367-.038-.013-3.147-1.2-3.178-4.79Zm-2.974-8.81c.812-1.015 1.368-2.397 1.213-3.8-1.175.053-2.646.814-3.492 1.807-.75.876-1.418 2.31-1.246 3.66 1.321.099 2.677-.666 3.525-1.666Z"
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4280499528,
           "type": 0,
         }
       }
@@ -114,7 +114,7 @@ exports[`renders home icon 1`] = `
       d="M13.147 3.582a2 2 0 0 0-2.294 0l-9.426 6.599a1 1 0 1 0 1.147 1.638L5 10.121V18a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-7.88l2.427 1.7a1 1 0 0 0 1.146-1.64l-9.426-6.598ZM17 8.721V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8.72l5-3.5 5 3.5Z"
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4280499528,
           "type": 0,
         }
       }
@@ -178,7 +178,7 @@ exports[`renders large arrowDown icon 1`] = `
       d="M7.703 8.291a.996.996 0 0 0-1.41.001.994.994 0 0 0 0 1.41l5 5.005a.998.998 0 0 0 1.415 0l5-5a.994.994 0 0 0 0-1.41.995.995 0 0 0-1.411-.001L12 12.584 7.703 8.291Z"
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4280499528,
           "type": 0,
         }
       }
@@ -320,7 +320,7 @@ exports[`renders small more icon 1`] = `
       d="M4 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm6 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm8-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4280499528,
           "type": 0,
         }
       }
@@ -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",
@@ -459,7 +453,7 @@ exports[`renders thumbsDown icon 1`] = `
       d="M8 11.78V19h8l3-5.76v-1.29h-7.639l1.036-7.944L8 11.78ZM6.134 11l4.555-8.034c1.124-1.846 3.971-.844 3.691 1.299l-.74 5.685h6.86a.5.5 0 0 1 .5.5v3a1 1 0 0 1-.084.4l-3.276 6.648a.95.95 0 0 1-.44.453c-.132.065-.276.049-.423.049H4c-1.105 0-2-1.045-2-2.15V13a2 2 0 0 1 2-2h2.134ZM6 13H4v6h2v-6Z"
       fill={
         {
-          "payload": 4278190080,
+          "payload": 4280499528,
           "type": 0,
         }
       }

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", () => {