@jobber/components-native 0.111.1 → 0.112.0

package/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/src/BottomSheet/BottomSheet.tsx

@@ -161,7 +161,7 @@ function Footer({
         <Divider />
       </View>
 
-      <BottomSheetOption text={cancelLabel} icon="remove" onPress={close} />
+      <BottomSheetOption text={cancelLabel} icon="cross" onPress={close} />
     </View>
   );
 }

package/src/Chip/Chip.test.tsx

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

package/src/Chip/Chip.tsx

@@ -141,7 +141,7 @@ export function Chip({
       )}
       {isDismissible && (
         <View style={[styles.dismissIcon, dismissColor]}>
-          <Icon name={"remove"} size={"small"} />
+          <Icon name={"cross"} size={"small"} />
         </View>
       )}
     </Pressable>

package/src/Glimmer/Glimmer.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ComponentProps } from "react";
+import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Glimmer } from "@jobber/components-native";
 import { GlimmerBasic, GlimmerInDepth } from "./docs";
@@ -14,10 +15,9 @@ const meta = {
   decorators: [
     // Take out Storybook's wrapper layout to preserve native glimmer shapes.
     (Story: React.ComponentType) => (
-      // eslint-disable-next-line react/forbid-elements
-      <div style={{ display: "block" }}>
+      <View>
         <Story />
-      </div>
+      </View>
     ),
   ],
 } satisfies Meta<typeof Glimmer>;

package/src/Icon/Icon.test.tsx

@@ -56,6 +56,30 @@ it("renders an empty svg without throwing for an unknown icon name", () => {
   expect(svg.UNSAFE_root.findAllByType(Path)).toHaveLength(0);
 });
 
+it("renders the multi-color truck icon with its static fills", () => {
+  const svg = render(<Icon name="truck" />);
+  const fills = svg.UNSAFE_root.findAllByType(Path).map(
+    path => path.props.fill as string,
+  );
+
+  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(<Icon name="truck" customColor="#abc123" />);
+  const fills = svg.UNSAFE_root.findAllByType(Path).map(
+    path => path.props.fill as string,
+  );
+
+  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: ReturnType<typeof render>) {
     return svg.UNSAFE_root.findAllByType(Path).map(p => p.props.fill as string);

package/src/Icon/Icon.tsx

@@ -43,16 +43,25 @@ export function Icon({
   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 ?? []).map((path: string) => {
-    return <Path key={path} d={path} fill={customColor || svgStyle.fill} />;
-  });
+  const icon = (paths ?? []).map(path => (
+    <Path
+      key={path.d}
+      d={path.d}
+      fill={path.fill ?? (customColor || svgStyle.fill)}
+      fillOpacity={path.fillOpacity}
+      opacity={path.opacity}
+    />
+  ));
 
   return (
     <Svg

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

@@ -417,11 +417,6 @@ exports[`renders thumbsDown icon 1`] = `
         "display": "flex",
         "fill": "hsl(198, 35%, 21%)",
         "height": 24,
-        "transform": [
-          {
-            "scaleY": -1,
-          },
-        ],
         "verticalAlign": "middle",
         "width": 24,
       },
@@ -433,13 +428,6 @@ exports[`renders thumbsDown icon 1`] = `
     ]
   }
   testID="thumbsDown"
-  transform={
-    [
-      {
-        "scaleY": -1,
-      },
-    ]
-  }
   vbHeight={24}
   vbWidth={24}
 >
@@ -457,7 +445,7 @@ exports[`renders thumbsDown icon 1`] = `
     }
   >
     <RNSVGPath
-      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"
+      d="M8 12.22V5h8l3 5.76v1.29h-7.639l1.036 7.944L8 12.22ZM6.134 13l4.555 8.034c1.124 1.846 3.971.844 3.691-1.299l-.74-5.685h6.86a.5.5 0 0 0 .5-.5v-3a1 1 0 0 0-.084-.4l-3.276-6.648a.95.95 0 0 0-.44-.453c-.132-.065-.276-.049-.423-.049H4c-1.105 0-2 1.045-2 2.15V11a2 2 0 0 0 2 2h2.134ZM6 11H4V5h2v6Z"
       fill={
         {
           "payload": 4280499528,

package/src/IconButton/IconButton.stories.tsx

@@ -17,7 +17,7 @@ export const Basic: Story = {
   render: IconButtonBasic,
   args: {
     accessibilityLabel: "New Job",
-    name: "remove",
+    name: "cross",
     onPress: () => action("alert")("👍"),
   },
 };

package/src/IconButton/docs/IconButtonBasic.tsx

@@ -9,7 +9,7 @@ export function IconButtonBasic(props: Partial<IconButtonProps>) {
   return (
     <IconButton
       accessibilityLabel="New Job"
-      name="remove"
+      name="cross"
       onPress={() => action("alert")("👍")}
       {...props}
     />

package/src/InputDate/docs/InputDateBasic.tsx

@@ -3,7 +3,8 @@ import { InputDate } from "@jobber/components-native";
 import type { InputDateProps } from "@jobber/components-native";
 
 export function InputDateBasic(props: Partial<InputDateProps>) {
-  const [date, setDate] = useState(new Date("11/11/2011"));
+  // monthIndex 10 = November (Hermes can't parse a "MM/DD/YYYY" string).
+  const [date, setDate] = useState(new Date(2011, 10, 11));
 
   return <InputDate {...props} value={date} onChange={setDate} />;
 }

package/src/InputDate/docs/InputDateEmptyValueLabel.tsx

@@ -3,7 +3,8 @@ import { InputDate } from "@jobber/components-native";
 import type { InputDateProps } from "@jobber/components-native";
 
 export function InputDateEmptyValueLabel(props: Partial<InputDateProps>) {
-  const [date, setDate] = useState(new Date("11/11/2011"));
+  // monthIndex 10 = November (Hermes can't parse a "MM/DD/YYYY" string).
+  const [date, setDate] = useState(new Date(2011, 10, 11));
 
   return (
     <InputDate

package/src/InputDate/docs/InputDateInvalid.tsx

@@ -3,7 +3,8 @@ import { InputDate } from "@jobber/components-native";
 import type { InputDateProps } from "@jobber/components-native";
 
 export function InputDateInvalid(props: Partial<InputDateProps>) {
-  const [date, setDate] = useState(new Date("11/11/2011"));
+  // monthIndex 10 = November (Hermes can't parse a "MM/DD/YYYY" string).
+  const [date, setDate] = useState(new Date(2011, 10, 11));
 
   return (
     <InputDate

package/src/Toast/Toast.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { ToastBasic } from "./docs";
@@ -17,11 +18,10 @@ const meta = {
     Story => {
       return (
         <SafeAreaProvider>
-          {/* eslint-disable-next-line react/forbid-elements -- This is a
-          storybook decorator so it doesn't affect react-native stuff */}
-          <div style={{ height: "90vh" }}>
+          {/* flex: 1 fills the height so the Toast anchors to the bottom (web and native). */}
+          <View style={{ flex: 1 }}>
             <Story />
-          </div>
+          </View>
         </SafeAreaProvider>
       );
     },

package/src/Toast/Toast.tsx

@@ -33,7 +33,7 @@ function DefaultToast({ text1 }: ToastConfigParams<string>) {
         <View style={styles.toastIcon}>
           <IconButton
             onPress={Toast.hide}
-            name="remove"
+            name="cross"
             customColor={tokens["color-greyBlue--light"]}
             accessibilityLabel={t("dismiss")}
           />