@jobber/components-native 0.114.10 → 0.114.12

package/dist/docs/EmptyState/EmptyState.md

@@ -66,7 +66,7 @@ reflow to a second line if enough content is provided.
 |------|------|----------|---------|-------------|
 | `description` | `string` | No | — | Description of the empty state. |
 | `icon` | `IconNames` | No | — | Icon to display. |
-| `iconColor` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | `blue` | Color of Icon to display. |
+| `iconColor` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | `icon` | Color of Icon to display. |
 | `primaryAction` | `Action` | No | — | Handler for the primary action. |
 | `secondaryAction` | `Action` | No | — | Handler for the secondary action. |
 | `title` | `string` | No | — | Title of the empty state. |

package/dist/docs/Icon/Icon.md

@@ -213,6 +213,7 @@ export function IconSizesExample() {
 |      | `calendar`              |
 |      | `calendarCheck`         |
 |      | `clearFilters`          |
+|      | `dueDate`               |
 |      | `event`                 |
 |      | `onlineBooking`         |
 |      | `orientationHorizontal` |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.114.10",
+    "version": "0.114.12",
     "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.118.0",
+        "@jobber/design": "0.119.0",
         "@jobber/hooks": "2.21.1",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
@@ -123,5 +123,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "3b0b1abca8a868037f4b189dbbf663c10c0c3b7b"
+    "gitHead": "a9ac41dfb966649048fcaf7cce2db45f2569fc29"
 }

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

@@ -5,5 +5,5 @@ import { Icon } from "../../../Icon";
 export function BannerIcon({ icon, type }) {
     const styles = useStyles();
     return (React.createElement(View, { style: [styles.bannerIcon, styles[type]], testID: "ATL-Banner-Icon" },
-        React.createElement(Icon, { name: icon, color: "white", size: "small" })));
+        React.createElement(Icon, { name: icon, color: "surface", size: "small" })));
 }

package/dist/src/Button/Button.js

@@ -22,7 +22,7 @@ export function Button({ label, onPress, variation = "work", type = "primary", f
     // an InputText that was focused, it required two presses to activate the
     // Pressable.  Using a TouchableHighlight made things register correctly
     // in a single press
-    return (React.createElement(TouchableHighlight, { onPress: onPress, testID: buildTestID(testID, label, accessibilityLabel), accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, accessibilityRole: "button", accessibilityState: { disabled, busy: loading }, disabled: disabled || loading, underlayColor: tokens["color-greyBlue--dark"], activeOpacity: tokens["opacity-pressed"], style: [
+    return (React.createElement(TouchableHighlight, { onPress: onPress, testID: buildTestID(testID, label, accessibilityLabel), accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, accessibilityRole: "button", accessibilityState: { disabled, busy: loading }, disabled: disabled || loading, underlayColor: tokens["color-interactive--subtle"], activeOpacity: tokens["opacity-pressed"], style: [
             styles.touchable,
             fullWidth && styles.fullWidth,
             fullHeight && styles.fullHeight,

package/dist/src/Disclosure/Disclosure.js

@@ -30,7 +30,7 @@ function DisclosureHeader({ header, onToggle, isEmpty, open, animationDuration,
         React.createElement(View, { style: styles.headerContainer },
             header,
             !isEmpty && (React.createElement(ReanimatedView, { style: [animatedStyle] },
-                React.createElement(Icon, { name: "arrowUp", color: "grey" }))))));
+                React.createElement(Icon, { name: "arrowUp", color: "iconSecondary" }))))));
 }
 function DisclosureContent({ content, open, animationDuration, styles, }) {
     const [maxHeight, setMaxHeight] = useState(0);

package/dist/src/EmptyState/EmptyState.js

@@ -11,7 +11,7 @@ function ButtonAction({ action, type }) {
         return React.createElement(React.Fragment, null);
     return React.createElement(Button, Object.assign({ fullWidth: false, type: type }, action));
 }
-export function EmptyState({ icon, title, description, primaryAction, secondaryAction, iconColor = "blue", }) {
+export function EmptyState({ icon, title, description, primaryAction, secondaryAction, iconColor = "icon", }) {
     const styles = useStyles();
     return (React.createElement(Content, null,
         icon && (React.createElement(View, { style: styles.icon },

package/dist/src/EmptyState/EmptyState.test.js

@@ -11,6 +11,7 @@ import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react-native";
 import { Path } from "react-native-svg";
 import { EmptyState } from "./EmptyState";
+import { tokens } from "../utils/design";
 const primaryOnPress = jest.fn();
 const secondaryOnPress = jest.fn();
 const defaultProps = {
@@ -43,7 +44,7 @@ describe("EmptyState", () => {
         component();
         const icon = screen.getByTestId(defaultProps.icon);
         const path = icon.findByType(Path);
-        expect(path.props.fill).toBe("hsl(197, 90%, 12%)");
+        expect(path.props.fill).toBe(tokens["color-icon"]);
         expect(icon.props.style).toEqual(expect.arrayContaining([
             expect.objectContaining({
                 width: 32,

package/dist/src/FormatFile/components/ProgressBar/ProgressBar.style.js

@@ -10,7 +10,7 @@ export const useStyles = buildThemedStyles(tokens => {
         },
         progress: {
             height: "100%",
-            backgroundColor: tokens["color-green"],
+            backgroundColor: tokens["color-interactive"],
         },
     };
 });

package/dist/src/InputFieldWrapper/components/Prefix/Prefix.js

@@ -35,5 +35,7 @@ export function PrefixIcon({ focused, disabled, inputInvalid, icon, }) {
             inputInvalid && styles.inputInvalid,
         ] },
         React.createElement(View, { style: styles.prefixIcon },
-            React.createElement(Icon, { customColor: disabled ? tokens["color-disabled"] : tokens["color-greyBlue"], name: icon }))));
+            React.createElement(Icon, { customColor: disabled
+                    ? tokens["color-disabled"]
+                    : tokens["color-icon--secondary"], name: icon }))));
 }

package/dist/src/InputFieldWrapper/components/Suffix/Suffix.js

@@ -36,5 +36,7 @@ export function SuffixIcon({ focused, disabled, inputInvalid, icon, hasLeftMargi
             inputInvalid && styles.inputInvalid,
         ] },
         React.createElement(Pressable, { style: [styles.suffixIcon, hasLeftMargin && styles.suffixIconMargin], onPress: onPress },
-            React.createElement(Icon, { customColor: disabled ? tokens["color-disabled"] : tokens["color-greyBlue"], name: icon }))));
+            React.createElement(Icon, { customColor: disabled
+                    ? tokens["color-disabled"]
+                    : tokens["color-icon--secondary"], name: icon }))));
 }

package/dist/src/Switch/components/BaseSwitch/BaseSwitch.js

@@ -30,7 +30,7 @@ export function BaseSwitch({ value, defaultValue, onValueChange, disabled = fals
             return {
                 true: disabled
                     ? tokens["color-disabled--secondary"]
-                    : tokens["color-green--lighter"],
+                    : tokens["color-surface"],
                 false: disabled
                     ? tokens["color-disabled--secondary"]
                     : tokens["color-disabled"],

package/dist/src/Typography/Typography.js

@@ -102,7 +102,7 @@ function transformChildren(children, transform) {
 }
 function getColorStyle(styles, color, reverseTheme) {
     if (color === "default" || !color) {
-        return styles.greyBlue;
+        return styles.text;
     }
     const colorStyleKey = `${color}${reverseTheme ? "Reverse" : ""}`;
     return styles[`${colorStyleKey}`];