@jobber/components-native 0.8.0 → 0.10.0

package/src/Card/Card.tsx

@@ -0,0 +1,145 @@
+import React, { ReactNode } from "react";
+import {
+  LayoutChangeEvent,
+  Pressable,
+  PressableStateCallbackType,
+  View,
+} from "react-native";
+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";
+import { Typography } from "../Typography";
+import { Icon } from "../Icon";
+
+interface CardProps {
+  /**
+   * @deprecated Use <ActionItem /> with the title and onPress properties instead
+   */
+  readonly header?: HeaderProps;
+
+  readonly footer?: FooterProps;
+  readonly children?: ReactNode;
+  readonly reportCardHeight?: (height: number) => void;
+  readonly testID?: string;
+  readonly error?: string;
+  readonly elevation?: elevationProp;
+}
+
+type elevationProp = "none" | "low" | "base" | "high";
+
+export type HeaderProps = HeaderCommonProps & HeaderActionProps;
+
+interface FooterProps {
+  readonly onPress: () => void;
+  readonly title: string;
+}
+
+interface HeaderCommonProps {
+  readonly title: string;
+}
+
+type HeaderActionProps =
+  | {
+      readonly onPress?: never;
+      readonly actionItem?: never;
+    }
+  | {
+      readonly onPress: () => void;
+      readonly actionItem: ActionItem;
+    };
+
+interface IconAction {
+  readonly iconName: IconNames;
+}
+
+interface ButtonAction {
+  readonly label: string;
+}
+
+export type ActionItem = XOR<IconAction, ButtonAction>;
+
+function getElevationStyle(elevation: elevationProp) {
+  if (elevation === "none") {
+    return undefined;
+  }
+  return styles[`${elevation}Elevation`];
+}
+
+export function Card({
+  header,
+  footer,
+  children,
+  reportCardHeight: onCardHeightChange,
+  testID = "card",
+  error,
+  elevation = "none",
+}: CardProps): JSX.Element {
+  return (
+    <ErrorMessageWrapper message={error} wrapFor="card">
+      <View
+        onLayout={handleLayoutChange}
+        style={[styles.container, getElevationStyle(elevation)]}
+        testID={testID}
+      >
+        {header && (
+          <>
+            <InternalCardHeader
+              onPress={header.onPress}
+              testID={`${testID}Header`}
+              collapsable={!!children}
+            >
+              <View style={styles.headerTitle}>
+                <Typography
+                  color="heading"
+                  fontFamily="base"
+                  fontWeight="bold"
+                  size="default"
+                  lineHeight="base"
+                  accessibilityRole="header"
+                >
+                  {header.title}
+                </Typography>
+              </View>
+              <View style={styles.actionItem}>
+                {!!header.actionItem?.label && (
+                  <View style={styles.actionLabel}>
+                    <ActionLabel type="cardTitle">
+                      {header.actionItem.label}
+                    </ActionLabel>
+                  </View>
+                )}
+
+                {header.actionItem?.iconName && (
+                  <Icon name={header.actionItem.iconName} color="interactive" />
+                )}
+              </View>
+            </InternalCardHeader>
+          </>
+        )}
+        {children}
+        {footer && (
+          <Pressable
+            testID={`${testID}Footer`}
+            onPress={footer.onPress}
+            style={({ pressed }: PressableStateCallbackType) => [
+              styles.footer,
+              pressed && styles.pressed,
+            ]}
+            accessibilityRole={"button"}
+          >
+            <ActionLabel>{footer.title}</ActionLabel>
+          </Pressable>
+        )}
+      </View>
+    </ErrorMessageWrapper>
+  );
+
+  function handleLayoutChange(event: LayoutChangeEvent) {
+    const { height } = event.nativeEvent.layout;
+    onCardHeightChange?.(height);
+  }
+}

package/src/Card/components/InternalCardHeader.style.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+
+export const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    paddingTop: tokens["space-small"] + tokens["space-smaller"],
+    paddingHorizontal: tokens["space-base"],
+  },
+
+  pressed: {
+    opacity: tokens["opacity-pressed"],
+  },
+
+  noChildren: {
+    paddingBottom: tokens["space-small"] + tokens["space-smaller"],
+  },
+});

package/src/Card/components/InternalCardHeader.test.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { InternalCardHeader } from "./InternalCardHeader";
+
+it("should render a pressable header", () => {
+  const handlePress = jest.fn();
+  const screen = render(
+    <InternalCardHeader collapsable onPress={handlePress} testID="cardHeader">
+      🍩
+    </InternalCardHeader>,
+  );
+
+  const header = screen.getByTestId("cardHeader");
+  expect(header).toBeDefined();
+  expect(header.props.accessibilityRole).toBe("button");
+
+  fireEvent.press(header);
+  expect(handlePress).toHaveBeenCalled();
+});
+
+it("should render an un-pressable header", () => {
+  const screen = render(
+    <InternalCardHeader collapsable testID="cardHeader">
+      🌞
+    </InternalCardHeader>,
+  );
+
+  const header = screen.getByTestId("cardHeader");
+  expect(header).toBeDefined();
+  expect(header.props.onPress).toBeUndefined();
+});

package/src/Card/components/InternalCardHeader.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./InternalCardHeader.style";
+
+interface InternalCardHeaderProps {
+  readonly children: ReactNode[] | ReactNode;
+  readonly onPress?: () => void;
+  readonly testID?: string;
+  readonly collapsable: boolean;
+}
+
+export function InternalCardHeader({
+  onPress,
+  children,
+  testID,
+  collapsable,
+}: InternalCardHeaderProps): JSX.Element {
+  const conditionalChildStyling = collapsable ? undefined : styles.noChildren;
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        onPress={onPress}
+        style={({ pressed }) => [
+          styles.header,
+          pressed && styles.pressed,
+          conditionalChildStyling,
+        ]}
+        accessibilityRole={"button"}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View testID={testID} style={[styles.header, conditionalChildStyling]}>
+      {children}
+    </View>
+  );
+}

package/src/Card/components/index.ts

@@ -0,0 +1 @@
+export { InternalCardHeader } from "./InternalCardHeader";

package/src/Card/index.ts

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

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from "react-native";
+import { typographyStyles } from "../Typography";
+import { tokens } from "../utils/design";
+
+export const commonInputStyles = StyleSheet.create({
+  input: {
+    width: "100%",
+    flexShrink: 1,
+    flexGrow: 1,
+    color: tokens["color-text"],
+    fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+    fontSize: typographyStyles.defaultSize.fontSize,
+    letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+    minHeight: tokens["space-largest"],
+    padding: 0,
+  },
+
+  inputEmpty: {
+    paddingTop: 0,
+  },
+
+  inputDisabled: {
+    color: typographyStyles.disabled.color,
+  },
+
+  container: {
+    marginVertical: tokens["space-smaller"],
+    backgroundColor: tokens["color-surface"],
+    minHeight: tokens["space-largest"],
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    borderColor: tokens["color-grey"],
+    borderStyle: "solid",
+    borderBottomWidth: tokens["border-base"],
+  },
+});

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -0,0 +1,93 @@
+import { StyleSheet } from "react-native";
+import { commonInputStyles } from "./CommonInputStyles.style";
+import { tokens } from "../utils/design";
+import { typographyStyles } from "../Typography";
+
+export const styles = StyleSheet.create({
+  container: StyleSheet.flatten([commonInputStyles.container]),
+
+  inputContainer: {
+    flexDirection: "row",
+    flex: 1,
+    justifyContent: "flex-start",
+  },
+
+  inputFocused: {
+    borderColor: tokens["color-interactive"],
+  },
+
+  inputInvalid: {
+    borderColor: tokens["color-critical"],
+  },
+
+  label: {
+    // for placeholder
+    position: "absolute",
+    top: typographyStyles.smallSize.fontSize,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+
+  miniLabel: {
+    top: 0,
+    paddingTop: tokens["space-smallest"],
+    backgroundColor: tokens["color-surface"],
+    maxHeight:
+      (typographyStyles.smallSize.lineHeight || 0) + tokens["space-smaller"],
+    zIndex: 1,
+  },
+  // Prevents the miniLabel from cutting off the ClearAction button
+  miniLabelShowClearAction: {
+    backgroundColor: "transparent",
+  },
+
+  disabled: {
+    backgroundColor: tokens["color-disabled--secondary"],
+    borderTopLeftRadius: tokens["radius-large"],
+    borderTopRightRadius: tokens["radius-large"],
+  },
+
+  fieldAffix: {
+    flexDirection: "row",
+  },
+
+  fieldAffixMiniLabel: {
+    paddingTop: 0,
+    // @ts-expect-error tsc-ci
+    top: typographyStyles.smallSize.fontSize / 2,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+
+  prefixIcon: {
+    justifyContent: "center",
+    paddingRight: tokens["space-small"],
+  },
+
+  prefixLabel: {
+    justifyContent: "center",
+    paddingTop: tokens["space-minuscule"],
+    paddingRight: tokens["space-minuscule"],
+  },
+
+  suffixIcon: {
+    justifyContent: "center",
+  },
+
+  suffixLabel: {
+    justifyContent: "center",
+    paddingTop: tokens["space-minuscule"],
+  },
+  suffixIconMargin: {
+    marginLeft: tokens["space-small"] + tokens["space-smaller"],
+  },
+  suffixLabelMargin: {
+    marginLeft: tokens["space-smallest"],
+  },
+  inputEndContainer: {
+    flexDirection: "row",
+    zIndex: 1,
+  },
+});

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -0,0 +1,243 @@
+import React from "react";
+import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
+// eslint-disable-next-line no-restricted-imports
+import { Text, ViewStyle } from "react-native";
+import { useIntl } from "react-intl";
+import {
+  InputFieldWrapper,
+  InputFieldWrapperProps,
+  commonInputStyles,
+} from ".";
+import { messages as clearMessages } from "./components/ClearAction";
+import { styles } from "./InputFieldWrapper.style";
+import { typographyStyles } from "../Typography";
+
+const mockLabel = { label: "$" };
+
+type InputFieldWrapperTestProps = Omit<InputFieldWrapperProps, "children">;
+
+function renderInputFieldWrapper(props: InputFieldWrapperTestProps): RenderAPI {
+  return render(
+    <InputFieldWrapper {...props}>
+      <Text>Test</Text>
+    </InputFieldWrapper>,
+  );
+}
+
+function renderWithPrefixLabel(hasValue: boolean): RenderAPI {
+  return renderInputFieldWrapper({ prefix: mockLabel, hasValue });
+}
+
+function renderWithSuffixLabel(hasValue: boolean): RenderAPI {
+  return renderInputFieldWrapper({ suffix: mockLabel, hasValue });
+}
+
+describe("InputFieldWrapper", () => {
+  it("renders an invalid InputFieldWrapper", () => {
+    const { getByTestId } = renderInputFieldWrapper({ invalid: true });
+
+    expect(getByTestId("ATL-InputFieldWrapper").props.style).toContainEqual(
+      styles.inputInvalid,
+    );
+  });
+
+  it("renders an invalid InputFieldWrapper with non-empty string", () => {
+    const invalid = "invalid string test";
+    const { getByText, getByTestId } = renderInputFieldWrapper({
+      invalid,
+    });
+
+    expect(getByTestId("ATL-InputFieldWrapper").props.style).toContainEqual(
+      styles.inputInvalid,
+    );
+    expect(getByText(invalid, { includeHiddenElements: true })).toBeDefined();
+  });
+
+  it("renders a valid InputFieldWrapper with empty string", () => {
+    const { getByTestId } = renderInputFieldWrapper({ invalid: "" });
+
+    expect(getByTestId("ATL-InputFieldWrapper").props.style).not.toContainEqual(
+      styles.inputInvalid,
+    );
+  });
+
+  it("renders a disabled InputFieldWrapper", () => {
+    const { getByTestId } = renderInputFieldWrapper({ disabled: true });
+
+    expect(getByTestId("ATL-InputFieldWrapper").props.style).toContainEqual({
+      backgroundColor: "rgb(225, 225, 225)",
+      borderTopLeftRadius: 4,
+      borderTopRightRadius: 4,
+    });
+  });
+
+  it("renders a InputFieldWrapper with placeholder", () => {
+    const placeholder = "test";
+    const { getByText } = renderInputFieldWrapper({ placeholder });
+
+    expect(
+      getByText(placeholder, { includeHiddenElements: true }),
+    ).toBeTruthy();
+  });
+
+  it("renders a prefix icon when specified", () => {
+    const { getByTestId } = renderInputFieldWrapper({
+      prefix: { icon: "invoice" },
+    });
+    expect(getByTestId("invoice")).toBeDefined();
+  });
+
+  it("renders a suffix icon when specified", () => {
+    const { getByTestId } = renderInputFieldWrapper({
+      suffix: { icon: "invoice" },
+    });
+    expect(getByTestId("invoice")).toBeDefined();
+  });
+
+  describe("when hasValue", () => {
+    it("renders a prefix label", () => {
+      const { getByText } = renderWithPrefixLabel(true);
+      expect(getByText(mockLabel.label)).toBeDefined();
+    });
+
+    it("renders a suffix label", () => {
+      const { getByText } = renderWithSuffixLabel(true);
+      expect(getByText(mockLabel.label)).toBeDefined();
+    });
+  });
+
+  describe("when not hasValue", () => {
+    it("does not render a prefix label", () => {
+      const { queryByText } = renderWithPrefixLabel(false);
+      expect(queryByText(mockLabel.label)).toBeNull();
+    });
+
+    it("does not render a suffix label", () => {
+      const { queryByText } = renderWithSuffixLabel(false);
+      expect(queryByText(mockLabel.label)).toBeNull();
+    });
+  });
+
+  describe("ClearAction", () => {
+    it("renders the Clear Action Button when showClearAction is true", () => {
+      const { formatMessage } = useIntl();
+      const { getByLabelText } = renderInputFieldWrapper({
+        showClearAction: true,
+      });
+      expect(
+        getByLabelText(formatMessage(clearMessages.clearTextLabel)),
+      ).toBeDefined();
+    });
+
+    it("does not render the Clear Action Button when showClearAction is false", () => {
+      const { formatMessage } = useIntl();
+      const { queryByLabelText } = renderInputFieldWrapper({
+        showClearAction: false,
+      });
+      expect(
+        queryByLabelText(formatMessage(clearMessages.clearTextLabel)),
+      ).toBeNull();
+    });
+
+    it("calls onClear when the Clear Action button is pressed", () => {
+      const { formatMessage } = useIntl();
+      const onClear = jest.fn();
+      const { getByLabelText } = renderInputFieldWrapper({
+        showClearAction: true,
+        onClear: onClear,
+      });
+      fireEvent(
+        getByLabelText(formatMessage(clearMessages.clearTextLabel)),
+        "press",
+      );
+      expect(onClear).toHaveBeenCalled();
+    });
+  });
+
+  describe("Custom Styling", () => {
+    it("has the default container styling when no style override is provided", () => {
+      const { getByTestId } = renderInputFieldWrapper({});
+      const container = getByTestId("ATL-InputFieldWrapper");
+      expect(container.props.style).toContainEqual({
+        ...commonInputStyles.container,
+      });
+    });
+
+    it("shows the container style override when provided", () => {
+      const styleOverride = {
+        container: {
+          backgroundColor: "purple",
+          width: "50%",
+        },
+      };
+      const { getByTestId } = renderInputFieldWrapper({
+        styleOverride,
+      });
+      const container = getByTestId("ATL-InputFieldWrapper");
+
+      const flattenedStyle = container.props.style.reduce(
+        (style: ViewStyle, additionalStyles: ViewStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+      expect(flattenedStyle.backgroundColor).toEqual(
+        styleOverride.container.backgroundColor,
+      );
+      expect(flattenedStyle.width).toEqual(styleOverride.container.width);
+      expect(flattenedStyle.borderColor).toEqual(
+        commonInputStyles.container.borderColor,
+      );
+      expect(flattenedStyle.marginVertical).toEqual(
+        commonInputStyles.container.marginVertical,
+      );
+    });
+    it("has the default placeholder styling when no style override is provided", () => {
+      const placeholderText = "myplaceholder";
+      const { getByText } = renderInputFieldWrapper({
+        placeholder: placeholderText,
+        focused: true,
+      });
+      const placeholder = getByText(placeholderText, {
+        includeHiddenElements: true,
+      });
+
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.interactive,
+      );
+      expect(placeholder.props.style).toContainEqual(
+        typographyStyles.defaultSize,
+      );
+    });
+
+    it("shows the placeholder style override when provided", () => {
+      const placeholderText = "myplaceholder";
+      const styleOverride = {
+        placeholderText: {
+          color: "purple",
+          fontSize: 30,
+        },
+      };
+      const { getByText } = renderInputFieldWrapper({
+        placeholder: placeholderText,
+        styleOverride,
+      });
+      const placeholder = getByText(placeholderText, {
+        includeHiddenElements: true,
+      });
+
+      const flattenedStyle = placeholder.props.style.reduce(
+        (style: ViewStyle, additionalStyles: ViewStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+      expect(flattenedStyle.color).toEqual(styleOverride.placeholderText.color);
+      expect(flattenedStyle.fontSize).toEqual(
+        styleOverride.placeholderText.fontSize,
+      );
+    });
+  });
+});