@jobber/components-native 0.80.1-upgrade-to-64048d8.25 → 0.80.1-upgrade-to-2ee92b7.19

package/dist/types/src/ThumbnailList/types.d.ts

@@ -11,5 +11,5 @@ export interface ThumbnailListProps {
         index: number;
         imageList: File[];
     }) => void;
-    createThumbnail: CreateThumbnail;
+    createThumbnail?: CreateThumbnail;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.80.1-upgrade-to-64048d8.25+64048d84",
+  "version": "0.80.1-upgrade-to-2ee92b7.19+2ee92b75",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "64048d8470a27c7aee830228fe45d222ecdae2dc"
+  "gitHead": "2ee92b753e53fd4b5235e27553378ad899192068"
 }

package/src/Chip/Chip.test.tsx

@@ -35,7 +35,7 @@ it("renders an inactive Chip with a default backgroundColor", () => {
     backgroundColor: tokens["color-surface--reverse"],
   });
   expect(getByTestId("chipTest").props.style).toContainEqual({
-    backgroundColor: tokens["color-surface--background"],
+    backgroundColor: tokens["color-interactive--background"],
   });
 });
 

package/src/Chip/Chip.tsx

@@ -82,7 +82,7 @@ export function Chip({
         backgroundColor:
           inactiveBackgroundColor === "surface"
             ? tokens["color-surface"]
-            : tokens["color-surface--background"],
+            : tokens["color-interactive--background"],
       },
       isActive && { backgroundColor: accentColor },
     ];

package/src/Form/Form.tsx

@@ -138,7 +138,6 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
-  // Comment to trigger build once more and again and again and again
   return (
     <FormProvider {...formMethods}>
       <>

package/src/FormatFile/components/ProgressBar/ProgressBar.style.tsx

@@ -7,7 +7,7 @@ export const useStyles = buildThemedStyles(tokens => {
       height: 8,
       borderRadius: tokens["radius-circle"],
       overflow: "hidden",
-      backgroundColor: tokens["color-surface--background"],
+      backgroundColor: tokens["color-interactive--background"],
     },
     progress: {
       height: "100%",

package/src/ProgressBar/ProgressBar.tsx

@@ -33,7 +33,9 @@ export function ProgressBar({
         <ProgressBarStepped
           total={total}
           current={current}
-          color={reverseTheme ? undefined : tokens["color-surface--background"]}
+          color={
+            reverseTheme ? undefined : tokens["color-interactive--background"]
+          }
           loading={loading}
           inProgress={inProgress}
         />
@@ -43,7 +45,7 @@ export function ProgressBar({
             width={100}
             animationDuration={0}
             color={
-              reverseTheme ? undefined : tokens["color-surface--background"]
+              reverseTheme ? undefined : tokens["color-interactive--background"]
             }
           />
           {!loading && (

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

@@ -34,7 +34,7 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "width": "100%",
           },
           {
-            "backgroundColor": "hsl(53, 21%, 93%)",
+            "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
         ]
@@ -116,7 +116,7 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "width": "100%",
           },
           {
-            "backgroundColor": "hsl(53, 21%, 93%)",
+            "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
         ]

package/src/Switch/components/BaseSwitch/BaseSwitch.test.tsx

@@ -2,61 +2,86 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { BaseSwitch } from "./BaseSwitch";
 
-it("renders a Switch with value true", () => {
-  const tree = render(<BaseSwitch value={true} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+describe("BaseSwitch", () => {
+  describe("rendering", () => {
+    it("renders with value true", () => {
+      const { getByRole } = render(<BaseSwitch value={true} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(true);
+    });
 
-it("renders a Switch with defaultValue true", () => {
-  const tree = render(<BaseSwitch defaultValue={true} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders with defaultValue true", () => {
+      const { getByRole } = render(<BaseSwitch defaultValue={true} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(true);
+    });
 
-it("renders a Switch with value false", () => {
-  const tree = render(<BaseSwitch value={false} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders with value false", () => {
+      const { getByRole } = render(<BaseSwitch value={false} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(false);
+    });
 
-it("renders a Switch with defaultValue false", () => {
-  const tree = render(<BaseSwitch defaultValue={false} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders with defaultValue false", () => {
+      const { getByRole } = render(<BaseSwitch defaultValue={false} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(false);
+    });
 
-it("renders a disabled Switch with value true", () => {
-  const tree = render(<BaseSwitch value={true} disabled={true} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders correctly when disabled with value true", () => {
+      const { getByRole } = render(<BaseSwitch value={true} disabled={true} />);
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(true);
+      expect(switchElement.props.accessibilityState.disabled).toBe(true);
+    });
 
-it("renders a disabled Switch with value false", () => {
-  const tree = render(<BaseSwitch value={false} disabled={true} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+    it("renders correctly when disabled with value false", () => {
+      const { getByRole } = render(
+        <BaseSwitch value={false} disabled={true} />,
+      );
+      const switchElement = getByRole("switch");
+      expect(switchElement).toBeDefined();
+      expect(switchElement.props.accessibilityState.checked).toBe(false);
+      expect(switchElement.props.accessibilityState.disabled).toBe(true);
+    });
+  });
 
-it("invokes the valueChange callback", () => {
-  const valueChangedCallback = jest.fn();
-  const tree = render(
-    <BaseSwitch
-      value={false}
-      onValueChange={valueChangedCallback}
-      accessibilityLabel={"test switch"}
-    />,
-  );
-  fireEvent(tree.getByLabelText("test switch"), "valueChange", true);
-  expect(valueChangedCallback).toHaveBeenCalledWith(true);
-  fireEvent(tree.getByLabelText("test switch"), "valueChange", false);
-  expect(valueChangedCallback).toHaveBeenCalledWith(false);
-});
+  describe("behavior", () => {
+    it("invokes the valueChange callback", () => {
+      const valueChangedCallback = jest.fn();
+      const { getByLabelText } = render(
+        <BaseSwitch
+          value={false}
+          onValueChange={valueChangedCallback}
+          accessibilityLabel={"test switch"}
+        />,
+      );
+
+      fireEvent(getByLabelText("test switch"), "valueChange", true);
+      expect(valueChangedCallback).toHaveBeenCalledWith(true);
+
+      fireEvent(getByLabelText("test switch"), "valueChange", false);
+      expect(valueChangedCallback).toHaveBeenCalledWith(false);
+    });
+
+    it("doesn't invoke the valueChange callback if disabled", () => {
+      const valueChangedCallback = jest.fn();
+      const { getByLabelText } = render(
+        <BaseSwitch
+          value={false}
+          disabled={true}
+          onValueChange={valueChangedCallback}
+          accessibilityLabel={"test switch"}
+        />,
+      );
 
-it("doesn't invoke the valueChange callback if disabled", () => {
-  const valueChangedCallback = jest.fn();
-  const tree = render(
-    <BaseSwitch
-      value={false}
-      disabled={true}
-      onValueChange={valueChangedCallback}
-      accessibilityLabel={"test switch"}
-    />,
-  );
-  fireEvent(tree.getByLabelText("test switch"), "valueChange", true);
-  expect(valueChangedCallback).not.toHaveBeenCalled();
+      fireEvent(getByLabelText("test switch"), "valueChange", true);
+      expect(valueChangedCallback).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -60,7 +60,7 @@ export function BaseSwitch({
       } else if (internalValue) {
         return tokens["color-interactive"];
       } else {
-        return tokens["color-surface--background"];
+        return tokens["color-interactive--background"];
       }
     }
 
@@ -81,7 +81,7 @@ export function BaseSwitch({
       //iOS
       return {
         true: tokens["color-interactive"],
-        false: tokens["color-surface--background"],
+        false: tokens["color-interactive--background"],
       };
     }
   }
@@ -98,7 +98,7 @@ export function BaseSwitch({
       disabled={disabled}
       thumbColor={getThumbColor()}
       trackColor={getTrackColors()}
-      ios_backgroundColor={tokens["color-surface--background"]}
+      ios_backgroundColor={tokens["color-interactive--background"]}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={"switch"}
       accessibilityState={{

package/src/ThumbnailList/types.ts

@@ -17,5 +17,5 @@ export interface ThumbnailListProps {
     index: number;
     imageList: File[];
   }) => void;
-  createThumbnail: CreateThumbnail;
+  createThumbnail?: CreateThumbnail;
 }

package/src/Switch/components/BaseSwitch/__snapshots__/BaseSwitch.test.tsx.snap

@@ -1,217 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders a Switch with defaultValue false 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  accessibilityState={
-    {
-      "checked": false,
-      "disabled": false,
-    }
-  }
-  collapsable={false}
-  disabled={false}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  onChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="hsl(107, 58%, 33%)"
-  style={
-    [
-      {
-        "height": 31,
-        "width": 51,
-      },
-      {
-        "backgroundColor": "hsl(53, 21%, 93%)",
-        "borderRadius": 16,
-      },
-    ]
-  }
-  tintColor="hsl(53, 21%, 93%)"
-  value={false}
-/>
-`;
-
-exports[`renders a Switch with defaultValue true 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  accessibilityState={
-    {
-      "checked": true,
-      "disabled": false,
-    }
-  }
-  collapsable={false}
-  disabled={false}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  onChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="hsl(107, 58%, 33%)"
-  style={
-    [
-      {
-        "height": 31,
-        "width": 51,
-      },
-      {
-        "backgroundColor": "hsl(53, 21%, 93%)",
-        "borderRadius": 16,
-      },
-    ]
-  }
-  tintColor="hsl(53, 21%, 93%)"
-  value={true}
-/>
-`;
-
-exports[`renders a Switch with value false 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  accessibilityState={
-    {
-      "checked": false,
-      "disabled": false,
-    }
-  }
-  collapsable={false}
-  disabled={false}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  onChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="hsl(107, 58%, 33%)"
-  style={
-    [
-      {
-        "height": 31,
-        "width": 51,
-      },
-      {
-        "backgroundColor": "hsl(53, 21%, 93%)",
-        "borderRadius": 16,
-      },
-    ]
-  }
-  tintColor="hsl(53, 21%, 93%)"
-  value={false}
-/>
-`;
-
-exports[`renders a Switch with value true 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  accessibilityState={
-    {
-      "checked": true,
-      "disabled": false,
-    }
-  }
-  collapsable={false}
-  disabled={false}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  onChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="hsl(107, 58%, 33%)"
-  style={
-    [
-      {
-        "height": 31,
-        "width": 51,
-      },
-      {
-        "backgroundColor": "hsl(53, 21%, 93%)",
-        "borderRadius": 16,
-      },
-    ]
-  }
-  tintColor="hsl(53, 21%, 93%)"
-  value={true}
-/>
-`;
-
-exports[`renders a disabled Switch with value false 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  accessibilityState={
-    {
-      "checked": false,
-      "disabled": true,
-    }
-  }
-  collapsable={false}
-  disabled={true}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  onChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="hsl(107, 58%, 33%)"
-  style={
-    [
-      {
-        "height": 31,
-        "width": 51,
-      },
-      {
-        "backgroundColor": "hsl(53, 21%, 93%)",
-        "borderRadius": 16,
-      },
-    ]
-  }
-  tintColor="hsl(53, 21%, 93%)"
-  value={false}
-/>
-`;
-
-exports[`renders a disabled Switch with value true 1`] = `
-<RCTSwitch
-  accessibilityRole="switch"
-  accessibilityState={
-    {
-      "checked": true,
-      "disabled": true,
-    }
-  }
-  collapsable={false}
-  disabled={true}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  onChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  onTintColor="hsl(107, 58%, 33%)"
-  style={
-    [
-      {
-        "height": 31,
-        "width": 51,
-      },
-      {
-        "backgroundColor": "hsl(53, 21%, 93%)",
-        "borderRadius": 16,
-      },
-    ]
-  }
-  tintColor="hsl(53, 21%, 93%)"
-  value={true}
-/>
-`;