@jobber/components-native 0.14.0 → 0.15.0

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

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import { IconColorNames, IconNames } from "@jobber/design";
+export interface ActionItemProps {
+    /**
+     * Title of the Action Item
+     */
+    readonly title?: string;
+    /**
+     * Name of the icon to display before content
+     */
+    readonly icon?: IconNames;
+    /**
+     * Colour of the icon displayed before content
+     */
+    readonly iconColor?: IconColorNames;
+    /**
+     * Content to display.
+     */
+    readonly children?: ReactNode;
+    /**
+     * Action icon to display
+     */
+    readonly actionIcon?: ActionIconNames;
+    /**
+     * Colour of the action icon
+     */
+    readonly actionIconColour?: ActionIconColour;
+    /**
+     * Alignment of action icon
+     */
+    readonly actionIconAlignment?: "flex-start" | "flex-end" | "center";
+    /**
+     * Press handler
+     */
+    readonly onPress?: () => void;
+    readonly testID?: string;
+}
+export declare function ActionItem({ title, icon, iconColor, children, actionIcon, actionIconColour, actionIconAlignment, onPress, testID, }: ActionItemProps): JSX.Element;
+type ActionIconColour = "interactive" | "destructive" | "informative" | "subtle";
+type ActionIconNames = IconNames | "editpencil";
+export {};

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

@@ -0,0 +1,21 @@
+export declare const styles: {
+    actionItemHorizontalOffset: {
+        paddingHorizontal: number;
+    };
+    icon: {
+        justifyContent: "flex-start";
+        paddingRight: number;
+    };
+    titlePadding: {
+        paddingBottom: number;
+    };
+    content: {
+        flex: number;
+    };
+    offsetForIcons: {
+        paddingTop: number;
+    };
+    actionIcon: {
+        paddingLeft: number;
+    };
+};

package/dist/types/src/ActionItem/ActionItemGroup.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from "react";
+import { ActionItem, ActionItemProps } from "./ActionItem";
+export type ActionItemElement = ReactElement<ActionItemProps, typeof ActionItem> | boolean | null | undefined;
+interface ActionItemGroupProps {
+    /**
+     * Action Items
+     */
+    readonly children: ActionItemElement | ActionItemElement[];
+}
+export declare function ActionItemGroup({ children, }: ActionItemGroupProps): JSX.Element;
+export {};

package/dist/types/src/ActionItem/components/ActionItemContainer.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface ActionItemContainerProps {
+    readonly children: ReactNode;
+    readonly title?: string;
+    readonly onPress?: () => void;
+    readonly testID?: string;
+}
+export declare function ActionItemContainer({ onPress, title, children, testID, }: ActionItemContainerProps): JSX.Element;
+export {};

package/dist/types/src/ActionItem/components/ActionItemContainer.style.d.ts

@@ -0,0 +1,10 @@
+export declare const styles: {
+    container: {
+        width: string;
+        flexDirection: "row";
+        paddingVertical: number;
+    };
+    pressed: {
+        opacity: number;
+    };
+};

package/dist/types/src/ActionItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionItem, ActionItemProps } from "./ActionItem";
+export { ActionItemGroup } from "./ActionItemGroup";

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

@@ -27,7 +27,7 @@ type HeaderActionProps = {
     readonly actionItem?: never;
 } | {
     readonly onPress: () => void;
-    readonly actionItem: ActionItem;
+    readonly actionItem: CardAction;
 };
 interface IconAction {
     readonly iconName: IconNames;
@@ -35,6 +35,6 @@ interface IconAction {
 interface ButtonAction {
     readonly label: string;
 }
-export type ActionItem = XOR<IconAction, ButtonAction>;
+export type CardAction = XOR<IconAction, ButtonAction>;
 export declare function Card({ header, footer, children, reportCardHeight: onCardHeightChange, testID, error, elevation, }: CardProps): JSX.Element;
 export {};

package/dist/types/src/Card/index.d.ts

@@ -1,2 +1,2 @@
 export { Card } from "./Card";
-export type { ActionItem, HeaderProps } from "./Card";
+export type { CardAction, HeaderProps } from "./Card";

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

@@ -14,3 +14,4 @@ export * from "./InputFieldWrapper";
 export * from "./ProgressBar";
 export * from "./Heading";
 export * from "./Chip";
+export * from "./ActionItem";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -47,5 +47,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "7237667e48edeb962f88a75bacaaca79e510f415"
+  "gitHead": "3bb3bd6837e653ed965570d404324e625e2339ee"
 }

package/src/ActionItem/ActionItem.style.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  actionItemHorizontalOffset: {
+    paddingHorizontal: tokens["space-base"],
+  },
+
+  icon: {
+    justifyContent: "flex-start",
+    paddingRight: tokens["space-small"],
+  },
+
+  titlePadding: {
+    paddingBottom: tokens["space-smaller"],
+  },
+
+  content: {
+    flex: 1,
+  },
+
+  offsetForIcons: {
+    paddingTop: tokens["space-smallest"],
+  },
+
+  actionIcon: {
+    paddingLeft: tokens["space-small"],
+  },
+});

package/src/ActionItem/ActionItem.test.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { ActionItem } from "./ActionItem";
+import { Button } from "../Button";
+import { Text } from "../Text";
+
+describe("ActionItem", () => {
+  const pressHandler = jest.fn();
+  const defaultActionIcon = "arrowRight";
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("should call onPress when ActionItem is pressed", () => {
+    const text = "Get out of my swamp";
+    const { getByText } = render(
+      <ActionItem onPress={pressHandler}>
+        <Text>{text}</Text>
+      </ActionItem>,
+    );
+
+    fireEvent.press(getByText(text));
+    expect(pressHandler).toHaveBeenCalled();
+  });
+
+  it("should should display title when provided", () => {
+    const title = "Profitttt 💰";
+    const { getByText } = render(<ActionItem title={title} />);
+
+    expect(getByText(title)).toBeDefined();
+  });
+
+  it("should display icon when provided", () => {
+    const iconName = "calendar";
+    const { getByTestId } = render(
+      <ActionItem onPress={pressHandler} icon={iconName} />,
+    );
+
+    expect(getByTestId(iconName)).toBeDefined();
+  });
+
+  describe("Action Icon", () => {
+    it("should display default action icon when custom action icon is not provided", () => {
+      const { getByTestId } = render(<ActionItem onPress={pressHandler} />);
+
+      expect(getByTestId(defaultActionIcon)).toBeDefined();
+    });
+
+    it("should display custom action icon when provided", () => {
+      const iconName = "calendar";
+      const { getByTestId, queryByTestId } = render(
+        <ActionItem onPress={pressHandler} actionIcon={iconName} />,
+      );
+
+      expect(getByTestId(iconName)).toBeDefined();
+      expect(queryByTestId(defaultActionIcon)).toBeFalsy();
+    });
+
+    it("should not display action icon when onPress does not exist", () => {
+      const { queryByTestId } = render(<ActionItem title="Some title" />);
+
+      expect(queryByTestId(defaultActionIcon)).toBeFalsy();
+    });
+
+    it("should display arrowRight icon when edit name is used", () => {
+      const iconName = "edit";
+      const { getByTestId } = render(
+        <ActionItem onPress={pressHandler} actionIcon={iconName} />,
+      );
+
+      expect(getByTestId(defaultActionIcon)).toBeDefined();
+    });
+
+    it("should display actual edit icon when editpencil name is used", () => {
+      const iconName = "editpencil";
+      const { getByTestId } = render(
+        <ActionItem onPress={pressHandler} actionIcon={iconName} />,
+      );
+
+      expect(getByTestId("edit")).toBeDefined();
+    });
+  });
+
+  describe("When child has onPress event", () => {
+    const childPressHandler = jest.fn();
+    beforeEach(() => {
+      childPressHandler.mockClear();
+    });
+
+    it("should only call child onPress when child is pressed", () => {
+      const buttonLabel = "I am button label";
+      const text = "Some other text chillin";
+      const { getByText } = render(
+        <ActionItem onPress={pressHandler}>
+          <Button label={buttonLabel} onPress={childPressHandler} />
+          <Text>{text}</Text>
+        </ActionItem>,
+      );
+
+      fireEvent.press(getByText(buttonLabel));
+      expect(childPressHandler).toHaveBeenCalledTimes(1);
+      expect(pressHandler).toHaveBeenCalledTimes(0);
+    });
+
+    it("should only call parent onPress when the rest of Parent is pressed", () => {
+      const buttonLabel = "I am button label";
+      const text = "Some other text chillin";
+      const { getByText } = render(
+        <ActionItem onPress={pressHandler}>
+          <Button label={buttonLabel} onPress={childPressHandler} />
+          <Text>{text}</Text>
+        </ActionItem>,
+      );
+
+      fireEvent.press(getByText(text));
+      expect(pressHandler).toHaveBeenCalledTimes(1);
+      expect(childPressHandler).toHaveBeenCalledTimes(0);
+    });
+  });
+});

package/src/ActionItem/ActionItem.tsx

@@ -0,0 +1,131 @@
+import React, { ReactNode } from "react";
+import { View } from "react-native";
+import { IconColorNames, IconNames } from "@jobber/design";
+import { styles } from "./ActionItem.style";
+import { ActionItemContainer } from "./components/ActionItemContainer";
+import { Typography } from "../Typography";
+import { Icon } from "../Icon";
+
+export interface ActionItemProps {
+  /**
+   * Title of the Action Item
+   */
+  readonly title?: string;
+
+  /**
+   * Name of the icon to display before content
+   */
+  readonly icon?: IconNames;
+
+  /**
+   * Colour of the icon displayed before content
+   */
+  readonly iconColor?: IconColorNames;
+
+  /**
+   * Content to display.
+   */
+  readonly children?: ReactNode;
+
+  /**
+   * Action icon to display
+   */
+  readonly actionIcon?: ActionIconNames;
+
+  /**
+   * Colour of the action icon
+   */
+  readonly actionIconColour?: ActionIconColour;
+
+  /**
+   * Alignment of action icon
+   */
+  readonly actionIconAlignment?: "flex-start" | "flex-end" | "center";
+
+  /**
+   * Press handler
+   */
+  readonly onPress?: () => void;
+
+  readonly testID?: string;
+}
+
+export function ActionItem({
+  title,
+  icon,
+  iconColor,
+  children,
+  actionIcon = "edit",
+  actionIconColour = "interactive",
+  actionIconAlignment = "center",
+  onPress,
+  testID = "actionItem",
+}: ActionItemProps): JSX.Element {
+  const actionIconStyle = {
+    justifyContent: actionIconAlignment,
+  };
+
+  const addIconOffset = icon || onPress ? styles.offsetForIcons : undefined;
+  const titlePadding = children ? styles.titlePadding : undefined;
+
+  return (
+    <ActionItemContainer onPress={onPress} testID={testID} title={title}>
+      {icon && (
+        <View style={styles.icon}>
+          <Icon name={icon} color={iconColor} />
+        </View>
+      )}
+      <View style={[styles.content, addIconOffset]}>
+        {title && (
+          <View style={titlePadding}>
+            <Typography
+              color="heading"
+              fontFamily="base"
+              fontWeight="bold"
+              size="default"
+              lineHeight="base"
+              accessibilityRole="header"
+            >
+              {title}
+            </Typography>
+          </View>
+        )}
+        {children}
+      </View>
+      {onPress && (
+        <View style={[actionIconStyle, styles.actionIcon]}>
+          <Icon
+            name={getActionIcon(actionIcon)}
+            color={getActionIconColour(actionIconColour)}
+          />
+        </View>
+      )}
+    </ActionItemContainer>
+  );
+}
+
+type ActionIconColour =
+  | "interactive"
+  | "destructive"
+  | "informative"
+  | "subtle";
+
+function getActionIconColour(
+  actionIconColour: ActionIconColour,
+): IconColorNames {
+  if (actionIconColour === "subtle") {
+    return "interactiveSubtle";
+  }
+  return actionIconColour;
+}
+
+type ActionIconNames = IconNames | "editpencil";
+
+function getActionIcon(icon: ActionIconNames): IconNames {
+  if (icon === "edit") {
+    return "arrowRight";
+  } else if (icon === "editpencil") {
+    return "edit";
+  }
+  return icon;
+}

package/src/ActionItem/ActionItemGroup.test.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ActionItemGroup } from "./ActionItemGroup";
+import { Text } from "../Text";
+
+describe("ActionItemGroup", () => {
+  const dividerTestId = "Divider";
+
+  describe("Separate By Dividers", () => {
+    it("should display dividers between children", () => {
+      const text = "Get out of my swamp";
+      const { queryAllByTestId } = render(
+        <ActionItemGroup>
+          <Text>{text}</Text>
+          <Text>{text}</Text>
+          <Text>{text}</Text>
+        </ActionItemGroup>,
+      );
+      const dividers = queryAllByTestId(dividerTestId);
+      expect(dividers).toHaveLength(2);
+    });
+
+    it("should not display divider when only 1 child", () => {
+      const text = "Get out of my swamp";
+      const { queryByTestId } = render(
+        <ActionItemGroup>
+          <Text>{text}</Text>
+        </ActionItemGroup>,
+      );
+      const dividers = queryByTestId(dividerTestId);
+      expect(dividers).toBeFalsy();
+    });
+  });
+});

package/src/ActionItem/ActionItemGroup.tsx

@@ -0,0 +1,43 @@
+import React, { ReactElement } from "react";
+import { View } from "react-native";
+import { ActionItem, ActionItemProps } from "./ActionItem";
+import { styles } from "./ActionItem.style";
+import { Divider } from "../Divider";
+
+export type ActionItemElement =
+  | ReactElement<ActionItemProps, typeof ActionItem>
+  | boolean
+  | null
+  | undefined;
+
+interface ActionItemGroupProps {
+  /**
+   * Action Items
+   */
+  readonly children: ActionItemElement | ActionItemElement[];
+}
+
+export function ActionItemGroup({
+  children,
+}: ActionItemGroupProps): JSX.Element {
+  return <View>{renderChildren(children)}</View>;
+}
+
+function renderChildren(children: ActionItemElement | ActionItemElement[]) {
+  const childArray = React.Children.toArray(children);
+  if (childArray.length === 1) return children;
+
+  return childArray.map((child, index) => {
+    const isSubsequentChild = index !== 0;
+    return (
+      <View key={index}>
+        {isSubsequentChild && (
+          <View style={styles.actionItemHorizontalOffset}>
+            <Divider />
+          </View>
+        )}
+        {child}
+      </View>
+    );
+  });
+}

package/src/ActionItem/components/ActionItemContainer.style.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    paddingVertical: tokens["space-base"],
+  },
+
+  pressed: {
+    opacity: tokens["opacity-pressed"],
+  },
+});

package/src/ActionItem/components/ActionItemContainer.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { ActionItemContainer } from "./ActionItemContainer";
+import { Text } from "../../Text";
+
+describe("ActionItemContainer", () => {
+  const testID = "actionItemContainer";
+  const text = "some text";
+
+  it("should render a pressable header", () => {
+    const handlePress = jest.fn();
+
+    const { getByTestId } = render(
+      <ActionItemContainer onPress={handlePress} testID={testID}>
+        <Text>{text}</Text>
+      </ActionItemContainer>,
+    );
+
+    const container = getByTestId(testID);
+    expect(container.props.accessibilityRole).toBe("button");
+
+    fireEvent.press(container);
+    expect(handlePress).toHaveBeenCalled();
+  });
+
+  it("should render an un-pressable header", () => {
+    const { getByTestId } = render(
+      <ActionItemContainer testID={testID}>
+        <Text>{text}</Text>
+      </ActionItemContainer>,
+    );
+
+    const container = getByTestId(testID);
+    expect(container.props.accessibilityRole).not.toBe("button");
+    expect(container.props.onPress).toBeUndefined();
+  });
+});

package/src/ActionItem/components/ActionItemContainer.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./ActionItemContainer.style";
+import { styles as actionItemStyles } from "../ActionItem.style";
+
+interface ActionItemContainerProps {
+  readonly children: ReactNode;
+  readonly title?: string;
+  readonly onPress?: () => void;
+  readonly testID?: string;
+}
+
+export function ActionItemContainer({
+  onPress,
+  title,
+  children,
+  testID,
+}: ActionItemContainerProps): JSX.Element {
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [
+          styles.container,
+          actionItemStyles.actionItemHorizontalOffset,
+          pressed && styles.pressed,
+        ]}
+        accessibilityRole="button"
+        accessibilityLabel={title}
+        testID={testID}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.container, actionItemStyles.actionItemHorizontalOffset]}
+      testID={testID}
+    >
+      {children}
+    </View>
+  );
+}

package/src/ActionItem/index.ts

@@ -0,0 +1,2 @@
+export { ActionItem, ActionItemProps } from "./ActionItem";
+export { ActionItemGroup } from "./ActionItemGroup";

package/src/Button/Button.tsx

@@ -3,7 +3,6 @@ import { TouchableHighlight, View } from "react-native";
 import { IconColorNames, IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
 import { styles } from "./Button.style";
-// eslint-disable-next-line import/no-internal-modules
 import { InternalButtonLoading } from "./components/InternalButtonLoading";
 import { ButtonSize, ButtonType, ButtonVariation } from "./types";
 import { ActionLabel, ActionLabelVariation } from "../ActionLabel";

package/src/Card/Card.tsx

@@ -8,7 +8,6 @@ import {
 import { IconNames } from "@jobber/design";
 import { XOR } from "ts-xor";
 import { styles } from "./Card.style";
-// eslint-disable-next-line import/no-internal-modules
 import { InternalCardHeader } from "./components/InternalCardHeader";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
 import { ActionLabel } from "../ActionLabel";
@@ -49,7 +48,7 @@ type HeaderActionProps =
     }
   | {
       readonly onPress: () => void;
-      readonly actionItem: ActionItem;
+      readonly actionItem: CardAction;
     };
 
 interface IconAction {
@@ -60,7 +59,7 @@ interface ButtonAction {
   readonly label: string;
 }
 
-export type ActionItem = XOR<IconAction, ButtonAction>;
+export type CardAction = XOR<IconAction, ButtonAction>;
 
 function getElevationStyle(elevation: elevationProp) {
   if (elevation === "none") {

package/src/Card/index.ts

@@ -1,2 +1,2 @@
 export { Card } from "./Card";
-export type { ActionItem, HeaderProps } from "./Card";
+export type { CardAction, HeaderProps } from "./Card";

package/src/index.ts

@@ -14,3 +14,4 @@ export * from "./InputFieldWrapper";
 export * from "./ProgressBar";
 export * from "./Heading";
 export * from "./Chip";
+export * from "./ActionItem";