@jobber/components-native 0.114.1 → 0.114.3

package/dist/docs/Icon/Icon.md

@@ -521,6 +521,7 @@ export function IconSizesExample() {
 |      | `partlySunny`       |
 |      | `snow`              |
 |      | `thunderLightening` |
+|      | `windy`             |
 
 ### Legacy
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.114.1",
+    "version": "0.114.3",
     "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.114.0",
+        "@jobber/design": "0.115.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": "4a36de673236ab322545979a34a08007ca49e1cc"
+    "gitHead": "b38e35f5b813caa27834c947d6f3340e6762d297"
 }

package/dist/src/Checkbox/Checkbox.js

@@ -53,7 +53,7 @@ function CheckboxInternal({ label, checked, defaultChecked, indeterminate = fals
                     {
                         backgroundColor,
                     },
-                ] }, (internalValue || indeterminate) && (React.createElement(Icon, { name: iconName, color: "white" }))))));
+                ] }, (internalValue || indeterminate) && (React.createElement(Icon, { name: iconName, color: "surface" }))))));
 }
 function getBackgroundColor(checked, disabled, indeterminate) {
     const { tokens } = useAtlantisTheme();

package/dist/src/Glimmer/Glimmer.js

@@ -5,7 +5,9 @@ import { shineWidth, useStyles } from "./Glimmer.style";
 import { useSizeStyles } from "./Glimmer.size.style";
 import { useShapeStyles } from "./Glimmer.shape.style";
 import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 export const GLIMMER_TEST_ID = "ATL-Glimmer";
+export const GLIMMER_BACKGROUND_TEST_ID = "ATL-Glimmer-Background";
 export const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
 export function Glimmer({ width, shape = "rectangle", size = "base", timing = "base", }) {
     const leftPosition = useRef(new Animated.Value(-shineWidth)).current;
@@ -25,19 +27,22 @@ export function Glimmer({ width, shape = "rectangle", size = "base", timing = "b
     const styles = useStyles();
     const sizeStyles = useSizeStyles();
     const shapeStyles = useShapeStyles();
+    const { effectiveTheme, tokens: themeTokens } = useAtlantisTheme();
+    const shineOpacity = effectiveTheme === "dark" ? 0.2 : 0.75;
     return (React.createElement(View, { style: [
             styles.container,
             sizeStyles[size],
             shapeStyles[shape],
             { width },
         ], onLayout: getWidth, testID: GLIMMER_TEST_ID },
+        React.createElement(View, { style: styles.background, testID: GLIMMER_BACKGROUND_TEST_ID }),
         React.createElement(Animated.View, { style: [styles.shine, { transform: [{ translateX: leftPosition }] }], testID: GLIMMER_SHINE_TEST_ID },
             React.createElement(Svg, null,
                 React.createElement(Defs, null,
                     React.createElement(LinearGradient, { id: "gradientShine", x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
-                        React.createElement(Stop, { offset: "0%", stopColor: "rgba(255,255,255,0)", stopOpacity: "0" }),
-                        React.createElement(Stop, { offset: "50%", stopColor: "rgba(255,255,255,1)", stopOpacity: "1" }),
-                        React.createElement(Stop, { offset: "100%", stopColor: "rgba(255,255,255,0)", stopOpacity: "0" }))),
+                        React.createElement(Stop, { offset: "0%", stopColor: themeTokens["color-white"], stopOpacity: "0" }),
+                        React.createElement(Stop, { offset: "50%", stopColor: themeTokens["color-white"], stopOpacity: shineOpacity }),
+                        React.createElement(Stop, { offset: "100%", stopColor: themeTokens["color-white"], stopOpacity: "0" }))),
                 React.createElement(Rect, { fill: "url(#gradientShine)", height: "100%", width: "100%" })))));
     function getWidth(event) {
         setParentWidth(event.nativeEvent.layout.width);

package/dist/src/Glimmer/Glimmer.style.js

@@ -4,13 +4,21 @@ export const shineWidth = staticTokens["space-largest"];
 export const useStyles = buildThemedStyles(tokens => {
     return {
         container: {
-            backgroundColor: "rgba(0, 0, 0, 0.05)",
             overflow: "hidden",
             position: "relative",
             width: "100%",
             height: tokens["space-base"],
             borderRadius: tokens["radius-base"],
         },
+        background: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: tokens["color-surface--reverse"],
+            opacity: 0.075,
+        },
         shine: {
             position: "absolute",
             top: 0,

package/dist/src/Glimmer/Glimmer.test.js

@@ -10,7 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React from "react";
 import { act, fireEvent, render as renderComponent, } from "@testing-library/react-native";
 import { Animated } from "react-native";
-import { GLIMMER_SHINE_TEST_ID, GLIMMER_TEST_ID, Glimmer } from "./Glimmer";
+import { Stop } from "react-native-svg";
+import { androidTokens, darkTokens } from "@jobber/design";
+import { GLIMMER_BACKGROUND_TEST_ID, GLIMMER_SHINE_TEST_ID, GLIMMER_TEST_ID, Glimmer, } from "./Glimmer";
+import { AtlantisThemeContextProvider } from "../AtlantisThemeContext";
 let screen;
 function render(...params) {
     screen = renderComponent(...params);
@@ -25,6 +28,19 @@ describe("Glimmer", () => {
             expect.objectContaining({ width: "100%" }),
         ]));
     });
+    it("uses a theme token for its dark-mode shine", () => {
+        const rendered = render(React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: "dark" },
+            React.createElement(Glimmer, null)));
+        expect(rendered.getByTestId(GLIMMER_BACKGROUND_TEST_ID).props.style).toEqual(expect.objectContaining({
+            backgroundColor: darkTokens["color-surface--reverse"],
+            opacity: 0.075,
+        }));
+        const shineStops = rendered.UNSAFE_root.findAllByType(Stop);
+        expect(shineStops[1].props).toEqual(expect.objectContaining({
+            stopColor: androidTokens["color-white"],
+            stopOpacity: 0.2,
+        }));
+    });
     it("renders a Glimmer with custom width", () => {
         render(React.createElement(Glimmer, { width: 50 }));
         const element = screen.getByTestId(GLIMMER_TEST_ID);