@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-314c5ff.22

package/src/Banner/Banner.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, ReactElement } from "react";
 import { Pressable, Text as RNText, View } from "react-native";
 import { IconNames } from "@jobber/design";
 import { BannerProps, BannerTypes } from "./types";
-import { styles } from "./Banner.style";
+import { useStyles } from "./Banner.style";
 import { BannerIcon } from "./components/BannerIcon/BannerIcon";
 import { Content } from "../Content";
 import { Text } from "../Text";
@@ -24,6 +24,8 @@ export function Banner({
     Boolean(React.Children.count(children) === 1 && !text && !details) ||
     Boolean(text && !details && !children);
 
+  const styles = useStyles();
+
   return (
     <Pressable
       style={[styles.container]}
@@ -35,7 +37,7 @@ export function Banner({
           {bannerIcon && <BannerIcon icon={bannerIcon} type={type} />}
           <View style={styles.contentContainer}>
             <View style={styles.childrenContainer}>
-              <WrappingElement shouldFlow={shouldFlow}>
+              <WrappingElement shouldFlow={shouldFlow} styles={styles}>
                 <BannerChildren>{children}</BannerChildren>
 
                 {text && <Text level="text">{text}</Text>}
@@ -70,8 +72,10 @@ function BannerChildren({ children }: PropsWithChildren): JSX.Element {
 function WrappingElement({
   shouldFlow,
   children,
+  styles,
 }: PropsWithChildren<{
   readonly shouldFlow: boolean;
+  readonly styles: ReturnType<typeof useStyles>;
 }>): ReactElement {
   if (shouldFlow) {
     return <RNText testID="ATL-Banner-RNText">{children}</RNText>;

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

@@ -1,18 +1,19 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  bannerIcon: {
-    borderRadius: tokens["radius-circle"],
-    padding: tokens["space-smaller"],
-  },
-  error: {
-    backgroundColor: tokens["color-destructive"],
-  },
-  warning: {
-    backgroundColor: tokens["color-warning"],
-  },
-  notice: {
-    backgroundColor: tokens["color-informative"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    bannerIcon: {
+      borderRadius: tokens["radius-circle"],
+      padding: tokens["space-smaller"],
+    },
+    error: {
+      backgroundColor: tokens["color-destructive"],
+    },
+    warning: {
+      backgroundColor: tokens["color-warning"],
+    },
+    notice: {
+      backgroundColor: tokens["color-informative"],
+    },
+  };
 });

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { IconNames } from "@jobber/design";
 import { View } from "react-native";
-import { styles } from "./BannerIcon.style";
+import { useStyles } from "./BannerIcon.style";
 import { Icon } from "../../../Icon";
 import { BannerTypes } from "../../types";
 
@@ -11,6 +11,8 @@ export interface BannerIconProps {
 }
 
 export function BannerIcon({ icon, type }: BannerIconProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View style={[styles.bannerIcon, styles[type]]} testID="ATL-Banner-Icon">
       <Icon name={icon} color="white" size="small" />

package/src/BottomSheet/BottomSheet.style.ts

@@ -1,35 +1,38 @@
 import { Dimensions, StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
 const { height } = Dimensions.get("window");
-const modalBorderRadius = tokens["radius-larger"];
+const modalBorderRadius = staticTokens["radius-larger"];
 
-export const styles = StyleSheet.create({
-  overlayModalize: {
-    backgroundColor: "transparent",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    overlayModalize: {
+      backgroundColor: "transparent",
+    },
 
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: tokens["color-overlay"],
-    height,
-  },
-  modal: {
-    borderTopLeftRadius: modalBorderRadius,
-    borderTopRightRadius: modalBorderRadius,
-    paddingTop: tokens["space-small"],
-  },
-  children: {
-    paddingBottom: tokens["space-small"],
-  },
-  header: {
-    paddingHorizontal: tokens["space-base"],
-    paddingTop: tokens["space-small"],
-    paddingBottom: tokens["space-base"],
-  },
-  footerDivider: {
-    marginHorizontal: tokens["space-base"],
-    marginTop: tokens["space-small"],
-    marginBottom: tokens["space-smaller"],
-  },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: tokens["color-overlay"],
+      height,
+    },
+    modal: {
+      borderTopLeftRadius: modalBorderRadius,
+      borderTopRightRadius: modalBorderRadius,
+      paddingTop: tokens["space-small"],
+    },
+    children: {
+      paddingBottom: tokens["space-small"],
+    },
+    header: {
+      paddingHorizontal: tokens["space-base"],
+      paddingTop: tokens["space-small"],
+      paddingBottom: tokens["space-base"],
+    },
+    footerDivider: {
+      marginHorizontal: tokens["space-base"],
+      marginTop: tokens["space-small"],
+      marginBottom: tokens["space-smaller"],
+    },
+  };
 });

package/src/BottomSheet/BottomSheet.tsx

@@ -3,7 +3,7 @@ import { Modalize } from "react-native-modalize";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Keyboard, View } from "react-native";
 import { BottomSheetOption } from "./components/BottomSheetOption";
-import { styles } from "./BottomSheet.style";
+import { useStyles } from "./BottomSheet.style";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { Divider } from "../Divider";
 import { Heading } from "../Heading";
@@ -55,22 +55,26 @@ function BottomSheetInternal(
 ) {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const [open, setOpen] = useState<boolean>(false);
+  const styles = useStyles();
 
   return (
     <>
-      {open && <Overlay />}
+      {open && <Overlay styles={styles} />}
       <Modalize
         ref={ref}
         adjustToContentHeight={true}
         modalStyle={styles.modal}
         overlayStyle={styles.overlayModalize}
-        HeaderComponent={heading && <Header heading={heading} />}
+        HeaderComponent={
+          heading && <Header heading={heading} styles={styles} />
+        }
         FooterComponent={
           <Footer
             cancellable={(showCancel && !loading) || isScreenReaderEnabled}
             onCancel={() => {
               (ref as RefObject<BottomSheetRef>)?.current?.close();
             }}
+            styles={styles}
           />
         }
         withHandle={false}
@@ -101,7 +105,13 @@ function BottomSheetInternal(
   }
 }
 
-function Header({ heading }: { readonly heading: string }) {
+function Header({
+  heading,
+  styles,
+}: {
+  readonly heading: string;
+  readonly styles: ReturnType<typeof useStyles>;
+}) {
   return (
     <View style={styles.header}>
       <Heading level={"subtitle"}>{heading}</Heading>
@@ -112,9 +122,11 @@ function Header({ heading }: { readonly heading: string }) {
 function Footer({
   cancellable,
   onCancel,
+  styles,
 }: {
   readonly cancellable: boolean;
   readonly onCancel: () => void;
+  readonly styles: ReturnType<typeof useStyles>;
 }) {
   const insets = useSafeAreaInsets();
   const { t } = useAtlantisI18n();
@@ -143,6 +155,10 @@ function dismissKeyboard() {
   Keyboard.dismiss();
 }
 
-function Overlay() {
+function Overlay({
+  styles,
+}: {
+  readonly styles: ReturnType<typeof useStyles>;
+}) {
   return <View style={styles.overlay} />;
 }

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.styles.ts

@@ -1,19 +1,20 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  bottomSheetOption: {
-    display: "flex",
-    flexDirection: "row",
-    alignContent: "center",
-    alignItems: "center",
-    padding: tokens["space-small"],
-  },
-  icon: {
-    paddingHorizontal: tokens["space-small"],
-  },
-  title: {
-    paddingHorizontal: tokens["space-small"],
-    flexShrink: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    bottomSheetOption: {
+      display: "flex",
+      flexDirection: "row",
+      alignContent: "center",
+      alignItems: "center",
+      padding: tokens["space-small"],
+    },
+    icon: {
+      paddingHorizontal: tokens["space-small"],
+    },
+    title: {
+      paddingHorizontal: tokens["space-small"],
+      flexShrink: 1,
+    },
+  };
 });

package/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
-import { styles } from "./BottomSheetOption.styles";
+import { useStyles } from "./BottomSheetOption.styles";
 import { TextAlign } from "../../../Typography";
 import { capitalize } from "../../../utils/intl";
 import { Text } from "../../../Text";
@@ -28,6 +28,7 @@ export function BottomSheetOption({
 }: BottomSheetOptionProps): JSX.Element {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "subdued";
+  const styles = useStyles();
 
   return (
     <TouchableOpacity

package/src/Button/Button.style.ts

@@ -1,121 +1,120 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-
-const iconTranslateY = tokens["space-large"] / 2;
-const buttonRadius = tokens["radius-base"];
-export const baseButtonHeight = tokens["space-base"] * 3;
-export const smallButtonHeight = tokens["space-base"] * 2.5;
-
-export const styles = StyleSheet.create({
-  fullHeight: {
-    flexGrow: 1,
-    flexShrink: 0,
-  },
-
-  fullWidth: {
-    alignSelf: "stretch",
-  },
-
-  touchable: {
-    borderRadius: buttonRadius,
-  },
-
-  button: {
-    justifyContent: "center",
-    alignItems: "center",
-    alignSelf: "stretch",
-    flexDirection: "row",
-    overflow: "hidden",
-    margin: 0,
-    borderRadius: buttonRadius,
-    borderWidth: tokens["border-base"],
-    paddingVertical: tokens["space-small"],
-  },
-
-  base: {
-    minHeight: baseButtonHeight,
-    paddingHorizontal: tokens["space-base"],
-  },
-
-  small: {
-    minHeight: smallButtonHeight,
-    paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
-  },
-
-  reducedPaddingForFullWidth: {
-    paddingHorizontal: tokens["space-smaller"],
-  },
-
-  iconPaddingOffset: {
-    paddingRight: tokens["space-smaller"],
-  },
-
-  content: {
-    paddingLeft: tokens["space-large"],
-    height: "100%",
-  },
-
-  contentWithLabel: {
-    paddingLeft: tokens["space-large"] + tokens["space-small"],
-  },
-
-  iconStyle: {
-    position: "absolute",
-    top: "50%",
-    left: 0,
-    transform: [{ translateY: -iconTranslateY }],
-  },
-
-  labelStyle: {
-    flexGrow: 1,
-    justifyContent: "center",
-  },
-
-  /* Variations */
-
-  work: {
-    backgroundColor: tokens["color-interactive"],
-    borderColor: tokens["color-interactive"],
-  },
-
-  learning: {
-    backgroundColor: tokens["color-interactive--subtle"],
-    borderColor: tokens["color-interactive--subtle"],
-  },
-
-  destructive: {
-    backgroundColor: tokens["color-destructive"],
-    borderColor: tokens["color-destructive"],
-  },
-
-  /* Cancel is special because, by default, it's styled as a secondary button */
-  cancel: {
-    backgroundColor: tokens["color-surface"],
-    borderColor: tokens["color-border"],
-  },
-
-  cancelSecondary: {
-    borderColor: "transparent",
-  },
-
-  /* Types */
-
-  primary: {},
-
-  secondary: {
-    backgroundColor: tokens["color-surface"],
-    borderColor: tokens["color-border"],
-  },
-
-  tertiary: {
-    backgroundColor: tokens["color-surface"],
-    borderColor: "transparent",
-  },
-
-  /* Disabled */
-
-  disabled: {
-    borderColor: tokens["color-disabled--secondary"],
-    backgroundColor: tokens["color-disabled--secondary"],
-  },
+import { tokens as staticTokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+const iconTranslateY = staticTokens["space-large"] / 2;
+const buttonRadius = staticTokens["radius-base"];
+export const baseButtonHeight = staticTokens["space-base"] * 3;
+export const smallButtonHeight = staticTokens["space-base"] * 2.5;
+
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    fullHeight: {
+      flexGrow: 1,
+      flexShrink: 0,
+    },
+
+    fullWidth: {
+      alignSelf: "stretch",
+    },
+
+    touchable: {
+      borderRadius: buttonRadius,
+    },
+
+    button: {
+      justifyContent: "center",
+      alignItems: "center",
+      alignSelf: "stretch",
+      flexDirection: "row",
+      overflow: "hidden",
+      margin: 0,
+      borderRadius: buttonRadius,
+      borderWidth: tokens["border-base"],
+      paddingVertical: tokens["space-small"],
+    },
+
+    base: {
+      minHeight: baseButtonHeight,
+      // paddingHorizontal: tokens["space-base"],
+    },
+
+    small: {
+      minHeight: smallButtonHeight,
+      paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
+    },
+
+    reducedPaddingForFullWidth: {
+      paddingHorizontal: tokens["space-smaller"],
+    },
+
+    iconPaddingOffset: {
+      paddingRight: tokens["space-smaller"],
+    },
+
+    content: {
+      paddingLeft: tokens["space-large"],
+      height: "100%",
+    },
+
+    contentWithLabel: {
+      paddingLeft: tokens["space-large"] + tokens["space-small"],
+    },
+
+    iconStyle: {
+      position: "absolute",
+      top: "50%",
+      left: 0,
+      transform: [{ translateY: -iconTranslateY }],
+    },
+
+    labelStyle: {
+      flexGrow: 1,
+      justifyContent: "center",
+    },
+
+    /* Variations */
+    work: {
+      backgroundColor: tokens["color-interactive"],
+      borderColor: tokens["color-interactive"],
+    },
+
+    learning: {
+      backgroundColor: tokens["color-interactive--subtle"],
+      borderColor: tokens["color-interactive--subtle"],
+    },
+
+    destructive: {
+      backgroundColor: tokens["color-destructive"],
+      borderColor: tokens["color-destructive"],
+    },
+
+    /* Cancel is special because, by default, it's styled as a secondary button */
+    cancel: {
+      backgroundColor: tokens["color-surface"],
+      borderColor: tokens["color-border"],
+    },
+
+    cancelSecondary: {
+      borderColor: "transparent",
+    },
+
+    /* Types */
+    primary: {},
+
+    secondary: {
+      backgroundColor: tokens["color-surface"],
+      borderColor: tokens["color-border"],
+    },
+
+    tertiary: {
+      backgroundColor: tokens["color-surface"],
+      borderColor: "transparent",
+    },
+
+    /* Disabled */
+    disabled: {
+      borderColor: tokens["color-disabled--secondary"],
+      backgroundColor: tokens["color-disabled--secondary"],
+    },
+  };
 });

package/src/Button/Button.tsx

@@ -2,12 +2,12 @@ import React from "react";
 import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
-import { styles } from "./Button.style";
+import { useStyles } from "./Button.style";
 import { InternalButtonLoading } from "./components/InternalButtonLoading";
 import { ButtonSize, ButtonType, ButtonVariation } from "./types";
 import { ActionLabel, ActionLabelVariation } from "../ActionLabel";
 import { Icon } from "../Icon";
-import { tokens } from "../utils/design";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 interface CommonButtonProps {
   /**
@@ -81,7 +81,7 @@ interface CommonButtonProps {
   /**
    * **Use at your own risk:** Custom style for specific elements. This should only be used as a
    * **last resort**. Using this may result in unexpected side effects.
-   * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
    */
   readonly UNSAFE_style?: ButtonUnsafeStyle;
 }
@@ -123,6 +123,9 @@ export function Button({
   testID,
   UNSAFE_style,
 }: ButtonProps): JSX.Element {
+  const { tokens } = useAtlantisTheme();
+  const styles = useStyles();
+
   const buttonStyle = [
     styles.button,
     styles[size],
@@ -160,7 +163,7 @@ export function Button({
         {loading && <InternalButtonLoading variation={variation} type={type} />}
         <View
           style={[
-            getContentStyles(label, icon),
+            getContentStyles(label, icon, styles),
             UNSAFE_style?.contentContainer,
           ]}
           testID="contentContainer"
@@ -244,6 +247,7 @@ function getIconColorVariation(
 function getContentStyles(
   label: string | undefined,
   icon: IconNames | undefined,
+  styles: ReturnType<typeof useStyles>,
 ) {
   if (label && !icon) {
     return undefined;

package/src/ButtonGroup/ButtonGroup.style.ts

@@ -1,19 +1,20 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  buttonGroup: {
-    width: "100%",
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    gap: tokens["space-small"],
-  },
-  button: {
-    flexBasis: tokens["space-largest"],
-    flexGrow: 1,
-  },
-  moreButton: {
-    flexBasis: tokens["space-largest"],
-    flexGrow: 0,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    buttonGroup: {
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      gap: tokens["space-small"],
+    },
+    button: {
+      flexBasis: tokens["space-largest"],
+      flexGrow: 1,
+    },
+    moreButton: {
+      flexBasis: tokens["space-largest"],
+      flexGrow: 0,
+    },
+  };
 });

package/src/ButtonGroup/ButtonGroup.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { View } from "react-native";
 import { PrimaryAction, SecondaryAction } from "./ButtonGroupAction";
-import { styles } from "./ButtonGroup.style";
+import { useStyles } from "./ButtonGroup.style";
 import { SecondaryActionSheet } from "./components/SecondaryActionSheet";
 import { getActions, usePreventTapWhenOffline } from "./utils";
 import { ButtonGroupActionElement } from "./types";
@@ -50,6 +50,7 @@ export function ButtonGroup({
   const { handlePress } = usePreventTapWhenOffline();
   const secondaryActionsRef = useRef<BottomSheetRef>();
   const { primaryActions, secondaryActions } = getActions(children);
+  const styles = useStyles();
 
   return (
     <View style={styles.buttonGroup}>