@jobber/components-native 0.79.0 → 0.80.0

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

@@ -1,5 +1,10 @@
 import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
 export type Spacing = "none" | "base" | "small" | "smaller" | "smallest" | "large";
+export interface ContentUnsafeStyle {
+    container?: StyleProp<ViewStyle>;
+    childWrapper?: StyleProp<ViewStyle>;
+}
 export interface ContentProps {
     /**
      * The child or children that will be given spacing.
@@ -14,5 +19,11 @@ export interface ContentProps {
      */
     readonly childSpacing?: Spacing;
     readonly direction?: "horizontal" | "vertical";
+    /**
+     * **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 in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: ContentUnsafeStyle;
 }
-export declare function Content({ children, spacing, childSpacing, direction, }: ContentProps): JSX.Element;
+export declare function Content({ children, spacing, childSpacing, direction, UNSAFE_style, }: ContentProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.79.0",
+  "version": "0.80.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -80,5 +80,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "0fbaebc80bf2e27b4be4fc36c93cd90e59300477"
+  "gitHead": "2a7c200ed284bace9d37382de5b7c4b5eda007f1"
 }

package/src/Content/Content.test.tsx

@@ -21,7 +21,10 @@ function getContentChildren(contentView: ReactTestInstance) {
 const text = "🌚 I am the text 🌞";
 
 function setupContent(
-  props?: Pick<ContentProps, "spacing" | "childSpacing" | "direction">,
+  props?: Pick<
+    ContentProps,
+    "spacing" | "childSpacing" | "direction" | "UNSAFE_style"
+  >,
 ) {
   const container = render(
     <View accessibilityLabel="contentView">
@@ -29,6 +32,7 @@ function setupContent(
         spacing={props?.spacing}
         childSpacing={props?.childSpacing}
         direction={props?.direction}
+        UNSAFE_style={props?.UNSAFE_style}
       >
         <Text>{text}</Text>
         <Text>{text}</Text>
@@ -269,3 +273,77 @@ describe("Horizontal", () => {
     });
   });
 });
+
+describe("UNSAFE_style", () => {
+  it("applies custom styles to container", () => {
+    const customStyle = {
+      backgroundColor: "red",
+      padding: 16,
+    };
+
+    const { parentView } = setupContent({
+      UNSAFE_style: {
+        container: customStyle,
+      },
+    });
+
+    const contentView = getContentComponent(parentView);
+    expect(contentView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(customStyle)]),
+    );
+  });
+
+  it("applies custom styles to child wrapper", () => {
+    const customStyle = {
+      backgroundColor: "blue",
+      marginLeft: 8,
+    };
+
+    const { parentView } = setupContent({
+      UNSAFE_style: {
+        childWrapper: customStyle,
+      },
+    });
+
+    const contentView = getContentComponent(parentView);
+    const contentChildren = getContentChildren(contentView);
+
+    contentChildren.forEach(child => {
+      expect(child.props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining(customStyle)]),
+      );
+    });
+  });
+
+  it("applies custom styles to both container and child wrapper", () => {
+    const containerStyle = {
+      backgroundColor: "red",
+      padding: 16,
+    };
+
+    const childWrapperStyle = {
+      backgroundColor: "blue",
+      marginLeft: 8,
+    };
+
+    const { parentView } = setupContent({
+      UNSAFE_style: {
+        container: containerStyle,
+        childWrapper: childWrapperStyle,
+      },
+    });
+
+    const contentView = getContentComponent(parentView);
+    const contentChildren = getContentChildren(contentView);
+
+    expect(contentView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(containerStyle)]),
+    );
+
+    contentChildren.forEach(child => {
+      expect(child.props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining(childWrapperStyle)]),
+      );
+    });
+  });
+});

package/src/Content/Content.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { View } from "react-native";
+import { StyleProp, View, ViewStyle } from "react-native";
 import { useHorizontalStyles } from "./ContentHorizontal.style";
 import { useVerticalStyles } from "./ContentVertical.style";
 import { useSpaceAroundStyles } from "./ContentSpaceAround.style";
@@ -12,6 +12,11 @@ export type Spacing =
   | "smallest"
   | "large";
 
+export interface ContentUnsafeStyle {
+  container?: StyleProp<ViewStyle>;
+  childWrapper?: StyleProp<ViewStyle>;
+}
+
 export interface ContentProps {
   /**
    * The child or children that will be given spacing.
@@ -29,6 +34,13 @@ export interface ContentProps {
   readonly childSpacing?: Spacing;
 
   readonly direction?: "horizontal" | "vertical";
+
+  /**
+   * **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 in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+   */
+  readonly UNSAFE_style?: ContentUnsafeStyle;
 }
 
 export function Content({
@@ -36,6 +48,7 @@ export function Content({
   spacing = "base",
   childSpacing = "base",
   direction = "vertical",
+  UNSAFE_style,
 }: ContentProps): JSX.Element {
   const horizontalStyles = useHorizontalStyles();
   const verticalStyles = useVerticalStyles();
@@ -46,7 +59,9 @@ export function Content({
   const containerStyle = spaceAroundStyles[styleName];
 
   return (
-    <View style={[styles.wrapper, containerStyle]}>{renderChildren()}</View>
+    <View style={[styles.wrapper, containerStyle, UNSAFE_style?.container]}>
+      {renderChildren()}
+    </View>
   );
 
   function renderChildren() {
@@ -57,12 +72,17 @@ export function Content({
     const childContainerStyle = styles[spaceName];
 
     return childArray.map((child, index) => {
-      // In order to get spacing between the children, we apply the child spacing on each of
-      // the children except for the first (top) child
       const childStyle = index !== 0 ? [childContainerStyle] : [];
 
       return (
-        <View key={index} style={[styles.childWrapper, ...childStyle]}>
+        <View
+          key={index}
+          style={[
+            styles.childWrapper,
+            ...childStyle,
+            UNSAFE_style?.childWrapper,
+          ]}
+        >
           {child}
         </View>
       );

package/src/TextList/__snapshots__/TextList.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
         {
           "padding": 0,
         },
+        undefined,
       ]
     }
   >
@@ -23,6 +24,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
       style={
         [
           {},
+          undefined,
         ]
       }
     >
@@ -114,6 +116,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
           {
             "padding": 0,
           },
+          undefined,
         ]
       }
     >