@jobber/components-native 0.43.18-quick-use-.13 → 0.44.0

package/README.md

@@ -46,6 +46,46 @@ transformIgnorePatterns: [
 ],
 ```
 
+Also update the Jest config as to include the `jestSetup.js`
+
+```json
+setupFiles: [
+    ...
+    "./node_modules/@jobber/components-native/jestSetup.js",
+    ...
+  ],
+```
+
+You will also need to create a mock for the Form component
+
+```jsx
+jest.mock("./dist/src/Form", () => {
+  const { Form, AtlantisFormContext, ...Actual } =
+    jest.requireActual("./dist/src/Form");
+  const useConfirmBeforeBack = jest.fn(() => jest.fn());
+  const useInternalFormLocalCache = jest.fn(() => ({
+    setLocalCache: jest.fn(),
+    removeLocalCache: jest.fn(),
+  }));
+  // Or
+  const useConfirmBeforeBack = require("<path-to-your>/useConfirmBeforeBackHook");
+  const useInternalFormLocalCache = require("<path-to-your>/useInternalFormLocalCacheHook");
+  return {
+    ...Actual,
+    AtlantisFormContext: AtlantisFormContext,
+    Form: ({ children, ...props }) => {
+      return (
+        <AtlantisFormContext.Provider
+          value={{ useConfirmBeforeBack, useInternalFormLocalCache }}
+        >
+          <Form {...props}>{children}</Form>
+        </AtlantisFormContext.Provider>
+      );
+    },
+  };
+});
+```
+
 ## Further Reading
 
 More information on Atlantis can be found at

package/dist/src/Banner/Banner.js

@@ -1,15 +1,30 @@
 import React from "react";
-import { Pressable } from "react-native";
+import { Pressable, View } from "react-native";
 import { BannerTypeStyles } from "./constants";
 import { styles } from "./Banner.style";
+import { BannerIcon } from "./components/BannerIcon/BannerIcon";
 import { Content } from "../Content";
 import { Text } from "../Text";
 import { TextList } from "../TextList";
 import { ActionLabel } from "../ActionLabel";
-export function Banner({ action, details, text, type, }) {
+export function Banner({ action, details, text, type, children, icon, }) {
     return (React.createElement(Pressable, { style: [styles.container, BannerTypeStyles[type].styles], accessibilityRole: "alert", onPress: action === null || action === void 0 ? void 0 : action.onPress },
         React.createElement(Content, { childSpacing: "small" },
-            React.createElement(Text, { level: "textSupporting" }, text),
-            details && React.createElement(TextList, { items: details, level: "textSupporting" }),
+            React.createElement(View, { style: styles.bannerContent },
+                icon && React.createElement(BannerIcon, { icon: icon }),
+                React.createElement(View, { style: styles.contentContainer },
+                    React.createElement(View, { style: styles.childrenContainer },
+                        React.createElement(BannerChildren, null, children)),
+                    text && (React.createElement(View, { style: styles.textContainer },
+                        React.createElement(Text, { level: "textSupporting" }, text))),
+                    details && React.createElement(TextList, { items: details, level: "textSupporting" }))),
             action && React.createElement(ActionLabel, { align: "start" }, action.label))));
 }
+function BannerChildren({ children, }) {
+    if (!children)
+        return React.createElement(React.Fragment, null);
+    if (children && typeof children === "string") {
+        return React.createElement(Text, { level: "textSupporting" }, children);
+    }
+    return React.createElement(React.Fragment, null, children);
+}

package/dist/src/Banner/Banner.style.js

@@ -13,4 +13,20 @@ export const styles = StyleSheet.create({
     notice: {
         backgroundColor: tokens["color-informative--surface"],
     },
+    bannerContent: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    childrenContainer: {
+        marginTop: tokens["space-smallest"],
+    },
+    textContainer: {
+        marginTop: tokens["space-minuscule"],
+    },
+    bannerIcon: {
+        paddingRight: tokens["space-small"],
+    },
 });

package/dist/src/Banner/components/BannerIcon/BannerIcon.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { tokens } from "@jobber/design";
+import { View } from "react-native";
+import { Icon } from "../../../Icon";
+import { styles } from "../../Banner.style";
+export function BannerIcon({ icon }) {
+    return (React.createElement(View, { style: styles.bannerIcon },
+        React.createElement(Icon, { name: icon, customColor: tokens["color-text"] })));
+}

package/dist/src/Form/components/FormActionBar/FormActionBar.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet } from "react-native";
 import Reanimated from "react-native-reanimated";
 import { styles } from "./FormActionBar.style";
 import { FormSaveButton } from "../FormSaveButton";
-const ReanimatedView = Reanimated.createAnimatedComponent(View);
+const ReanimatedView = Reanimated.View;
 export function FormActionBar({ keyboardHeight, submit, isFormSubmitting, saveButtonLabel, renderStickySection, setSaveButtonHeight, secondaryActions, setSecondaryActionLoading, }) {
     const buttonStyle = StyleSheet.flatten([
         styles.saveButton,

package/dist/src/Form/hooks/useScrollToError/useScrollToError.js

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 import { Keyboard, Platform, } from "react-native";
-import { useIsScreenReaderEnabled } from "../../../hooks/useIsScreenReaderEnabled";
+import { useIsScreenReaderEnabled } from "../../../hooks";
 import { useErrorMessageContext } from "../../../ErrorMessageWrapper";
 export function useScrollToError({ formState: { errors, isValid, submitCount }, refNode, setFocus, scrollToPosition, }) {
     const [submitCounter, setSubmitCounter] = useState(submitCount);