@jobber/components-native 0.114.0 → 0.114.2

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

@@ -5,6 +5,7 @@ export declare const useStyles: () => {
     background: {
         borderTopLeftRadius: number;
         borderTopRightRadius: number;
+        backgroundColor: string;
     };
     footerContainer: {
         backgroundColor: string;

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

@@ -26,6 +26,7 @@ interface GlimmerProps {
     readonly width?: number | `${number}%`;
 }
 export declare const GLIMMER_TEST_ID = "ATL-Glimmer";
+export declare const GLIMMER_BACKGROUND_TEST_ID = "ATL-Glimmer-Background";
 export declare const GLIMMER_SHINE_TEST_ID = "ATL-Glimmer-Shine";
 export declare function Glimmer({ width, shape, size, timing, }: GlimmerProps): React.JSX.Element;
 export {};

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

@@ -1,13 +1,21 @@
 export declare const shineWidth: number;
 export declare const useStyles: () => {
     container: {
-        backgroundColor: string;
         overflow: "hidden";
         position: "relative";
         width: "100%";
         height: number;
         borderRadius: number;
     };
+    background: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: "100%";
+        height: "100%";
+        backgroundColor: string;
+        opacity: number;
+    };
     shine: {
         position: "absolute";
         top: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.114.0",
+  "version": "0.114.2",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -123,5 +123,5 @@
     "react-native-screens": ">=4.18.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "d79c88a2241ded3f29e879cd3c0d5a1e2dceb568"
+  "gitHead": "063105930b808aca83b9c45624e4319711165b68"
 }

package/src/BottomSheet/BottomSheet.style.ts

@@ -10,6 +10,7 @@ export const useStyles = buildThemedStyles(tokens => {
     background: {
       borderTopLeftRadius: modalBorderRadius,
       borderTopRightRadius: modalBorderRadius,
+      backgroundColor: tokens["color-surface"],
     },
     footerContainer: {
       backgroundColor: tokens["color-surface"],

package/src/Glimmer/Glimmer.style.ts

@@ -6,7 +6,6 @@ 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%",
@@ -14,6 +13,16 @@ export const useStyles = buildThemedStyles(tokens => {
       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/src/Glimmer/Glimmer.test.tsx

@@ -5,7 +5,15 @@ import {
   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: ReturnType<typeof renderComponent<typeof Glimmer>>;
 
@@ -28,6 +36,32 @@ describe("Glimmer", () => {
     );
   });
 
+  it("uses a theme token for its dark-mode shine", () => {
+    const rendered = render(
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <Glimmer />
+      </AtlantisThemeContextProvider>,
+    );
+
+    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(<Glimmer width={50} />);
     const element = screen.getByTestId(GLIMMER_TEST_ID);

package/src/Glimmer/Glimmer.tsx

@@ -6,6 +6,7 @@ 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 type GlimmerShapes = keyof ReturnType<typeof useShapeStyles>;
 export type GlimmerSizes = keyof ReturnType<typeof useSizeStyles>;
@@ -37,6 +38,7 @@ interface GlimmerProps {
 }
 
 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({
@@ -69,6 +71,8 @@ export function Glimmer({
   const styles = useStyles();
   const sizeStyles = useSizeStyles();
   const shapeStyles = useShapeStyles();
+  const { effectiveTheme, tokens: themeTokens } = useAtlantisTheme();
+  const shineOpacity = effectiveTheme === "dark" ? 0.2 : 0.75;
 
   return (
     <View
@@ -81,6 +85,7 @@ export function Glimmer({
       onLayout={getWidth}
       testID={GLIMMER_TEST_ID}
     >
+      <View style={styles.background} testID={GLIMMER_BACKGROUND_TEST_ID} />
       <Animated.View
         style={[styles.shine, { transform: [{ translateX: leftPosition }] }]}
         testID={GLIMMER_SHINE_TEST_ID}
@@ -90,17 +95,17 @@ export function Glimmer({
             <LinearGradient id="gradientShine" x1={0} y1={0.5} x2={1} y2={0.5}>
               <Stop
                 offset="0%"
-                stopColor="rgba(255,255,255,0)"
+                stopColor={themeTokens["color-white"]}
                 stopOpacity="0"
               />
               <Stop
                 offset="50%"
-                stopColor="rgba(255,255,255,1)"
-                stopOpacity="1"
+                stopColor={themeTokens["color-white"]}
+                stopOpacity={shineOpacity}
               />
               <Stop
                 offset="100%"
-                stopColor="rgba(255,255,255,0)"
+                stopColor={themeTokens["color-white"]}
                 stopOpacity="0"
               />
             </LinearGradient>