@jobber/components-native 0.85.1-move-dupli-99be0f8.13 → 0.86.0

package/dist/types/src/Banner/components/BannerIcon/BannerIcon.style.d.ts

@@ -12,4 +12,7 @@ export declare const useStyles: () => {
     notice: {
         backgroundColor: string;
     };
+    success: {
+        backgroundColor: string;
+    };
 };

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

@@ -1,7 +1,7 @@
 import type { IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
-export type BannerTypes = "error" | "warning" | "notice";
+export type BannerTypes = "error" | "warning" | "notice" | "success";
 export interface BannerStyleProps {
     /**
      * Styles applied to the main view of the banner. Styles are grabbed from Banner.style.ts file

package/dist/types/src/InputFieldWrapper/InputFieldWrapper.style.d.ts

@@ -23,6 +23,7 @@ export declare const useStyles: () => {
         right: number;
         bottom: number;
         left: number;
+        zIndex: number;
     };
     miniLabel: {
         top: number;
@@ -30,7 +31,6 @@ export declare const useStyles: () => {
         backgroundColor: string;
         marginRight: number;
         maxHeight: number;
-        zIndex: number;
     };
     miniLabelShowClearAction: {
         backgroundColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.85.1-move-dupli-99be0f8.13+99be0f87a",
+  "version": "0.86.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -53,6 +53,7 @@
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
+    "@react-native-community/datetimepicker": "^7.1.0",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/react": "^9.1.2",
     "@storybook/react-native-web-vite": "^9.1.2",
@@ -66,6 +67,13 @@
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "metro-react-native-babel-preset": "^0.76.0",
+    "react-native": "^0.77.0",
+    "react-native-gesture-handler": "^2.10.2",
+    "react-native-modal-datetime-picker": "^15.0.1",
+    "react-native-reanimated": "^3.7.1",
+    "react-native-safe-area-context": "^5.4.0",
+    "react-native-svg": "^15.1.0",
+    "react-native-web": "^0.20.0",
     "react-test-renderer": "^18.2.0",
     "storybook": "^9.1.2"
   },
@@ -87,5 +95,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "99be0f87adc5047e339f84deab23a6cdaeb8ba22"
+  "gitHead": "712019a3de148ba8511e117278495ced049f331f"
 }

package/src/Banner/Banner.test.tsx

@@ -35,6 +35,18 @@ describe("Banner", () => {
       expect(getByText("Notice me")).toBeDefined();
       expect(icon.props.children.props.name).toBe("starburst");
     });
+
+    it("renders a success Banner", () => {
+      const { getByText, getByTestId } = render(
+        <Banner type="success">
+          <Text>Your import is complete</Text>
+        </Banner>,
+      );
+
+      const icon = getByTestId("ATL-Banner-Icon");
+      expect(getByText("Your import is complete")).toBeDefined();
+      expect(icon.props.children.props.name).toBe("checkmark");
+    });
   });
 
   describe("Children", () => {

package/src/Banner/Banner.tsx

@@ -97,5 +97,7 @@ function getBannerIcon(type: BannerTypes): IconNames | undefined {
       return "help";
     case "error":
       return "alert";
+    case "success":
+      return "checkmark";
   }
 }

package/src/Banner/components/BannerIcon/BannerIcon.style.ts

@@ -15,5 +15,8 @@ export const useStyles = buildThemedStyles(tokens => {
     notice: {
       backgroundColor: tokens["color-informative"],
     },
+    success: {
+      backgroundColor: tokens["color-success"],
+    },
   };
 });

package/src/Banner/types.ts

@@ -2,7 +2,7 @@ import type { IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 
-export type BannerTypes = "error" | "warning" | "notice";
+export type BannerTypes = "error" | "warning" | "notice" | "success";
 
 export interface BannerStyleProps {
   /**

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -43,6 +43,7 @@ export const useStyles = buildThemedStyles(tokens => {
       right: 0,
       bottom: 0,
       left: 0,
+      zIndex: 1,
     },
 
     miniLabel: {
@@ -53,7 +54,6 @@ export const useStyles = buildThemedStyles(tokens => {
       maxHeight:
         (typographyStyles.defaultSize.lineHeight || 0) +
         tokens["space-smaller"],
-      zIndex: 1,
     },
     // Prevents the miniLabel from cutting off the ClearAction button
     miniLabelShowClearAction: {