@jobber/components-native 0.9.0 → 0.10.0

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,
+      );
+    });
+  });
+});

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -0,0 +1,317 @@
+import React from "react";
+import {
+  // eslint-disable-next-line no-restricted-imports
+  Text as RNText,
+  StyleProp,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+import { FieldError } from "react-hook-form";
+import { IconNames } from "@jobber/design";
+import { styles } from "./InputFieldWrapper.style";
+import { PrefixIcon, PrefixLabel } from "./components/Prefix/Prefix";
+import { SuffixIcon, SuffixLabel } from "./components/Suffix/Suffix";
+import { ClearAction } from "./components/ClearAction";
+import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
+import { TextVariation, typographyStyles } from "../Typography";
+import { Text } from "../Text";
+
+export type Clearable = "never" | "while-editing" | "always";
+
+export interface InputFieldStyleOverride {
+  prefixLabel?: StyleProp<TextStyle>;
+  suffixLabel?: StyleProp<TextStyle>;
+  container?: StyleProp<ViewStyle>;
+  placeholderText?: StyleProp<TextStyle>;
+}
+export interface InputFieldWrapperProps {
+  /**
+   * Highlights the field red and shows message below (if string) to indicate an error
+   */
+  readonly invalid?: boolean | string;
+
+  /**
+   * Disable the input
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Hint text that goes above the value once the field is filled out
+   */
+  readonly placeholder?: string;
+
+  /**
+   * Text that goes below the input to help the user understand the input
+   */
+  readonly assistiveText?: string;
+
+  readonly hasMiniLabel?: boolean;
+
+  readonly hasValue?: boolean;
+
+  /**
+   * Symbol to display before the text input
+   */
+  readonly prefix?: {
+    icon?: IconNames;
+    label?: string;
+  };
+
+  /**
+   * Symbol to display after the text input
+   */
+  readonly suffix?: {
+    icon?: IconNames;
+    label?: string;
+    onPress?: () => void;
+  };
+
+  readonly error?: FieldError;
+
+  readonly focused?: boolean;
+
+  readonly children: React.ReactNode;
+
+  /**
+   * Adds the ClearAction that will call the onClear handler when pressed
+   */
+  readonly showClearAction?: boolean;
+
+  /**
+   * Callback called when the user clicks the ClearAction button. Should clear the value passed.
+   * To disallow clearing set the clearable prop to never
+   */
+  readonly onClear?: () => void;
+
+  /**
+   * Custom styling to override default style of the input field
+   */
+  readonly styleOverride?: InputFieldStyleOverride;
+}
+
+export function InputFieldWrapper({
+  invalid,
+  disabled,
+  placeholder,
+  assistiveText,
+  prefix,
+  suffix,
+  hasMiniLabel = false,
+  hasValue = false,
+  error,
+  focused = false,
+  children,
+  onClear,
+  showClearAction = false,
+  styleOverride,
+}: InputFieldWrapperProps): JSX.Element {
+  fieldAffixRequiredPropsCheck([prefix, suffix]);
+  const handleClear = onClear ?? noopClear;
+  warnIfClearActionWithNoOnClear(onClear, showClearAction);
+  const inputInvalid = Boolean(invalid) || Boolean(error);
+
+  return (
+    <ErrorMessageWrapper message={getMessage({ invalid, error })}>
+      <View
+        testID={"ATL-InputFieldWrapper"}
+        style={[
+          styles.container,
+          focused && styles.inputFocused,
+          (Boolean(invalid) || error) && styles.inputInvalid,
+          disabled && styles.disabled,
+          styleOverride?.container,
+        ]}
+      >
+        {prefix?.icon && (
+          <PrefixIcon
+            disabled={disabled}
+            focused={focused}
+            hasMiniLabel={hasMiniLabel}
+            inputInvalid={inputInvalid}
+            icon={prefix.icon}
+          />
+        )}
+        <View style={[styles.inputContainer]}>
+          <View
+            style={[
+              !!placeholder && styles.label,
+              hasMiniLabel && styles.miniLabel,
+              disabled && styles.disabled,
+              hasMiniLabel &&
+                showClearAction &&
+                styles.miniLabelShowClearAction,
+            ]}
+            pointerEvents="none"
+          >
+            <Placeholder
+              placeholder={placeholder}
+              labelVariation={getLabelVariation(
+                error,
+                invalid,
+                focused,
+                disabled,
+              )}
+              hasMiniLabel={hasMiniLabel}
+              styleOverride={styleOverride?.placeholderText}
+            />
+          </View>
+          {prefix?.label && hasValue && (
+            <PrefixLabel
+              disabled={disabled}
+              focused={focused}
+              hasMiniLabel={hasMiniLabel}
+              inputInvalid={inputInvalid}
+              label={prefix.label}
+              styleOverride={styleOverride?.prefixLabel}
+            />
+          )}
+          {children}
+          {(showClearAction || suffix?.label || suffix?.icon) && (
+            <View style={styles.inputEndContainer}>
+              {showClearAction && (
+                <ClearAction
+                  hasMarginRight={!!suffix?.icon || !!suffix?.label}
+                  onPress={handleClear}
+                />
+              )}
+              {suffix?.label && hasValue && (
+                <SuffixLabel
+                  disabled={disabled}
+                  focused={focused}
+                  hasMiniLabel={hasMiniLabel}
+                  inputInvalid={inputInvalid}
+                  label={suffix.label}
+                  hasLeftMargin={!showClearAction}
+                  styleOverride={styleOverride?.suffixLabel}
+                />
+              )}
+              {suffix?.icon && (
+                <SuffixIcon
+                  disabled={disabled}
+                  focused={focused}
+                  hasMiniLabel={hasMiniLabel}
+                  hasLeftMargin={!!(!showClearAction || suffix?.label)}
+                  inputInvalid={inputInvalid}
+                  icon={suffix.icon}
+                  onPress={suffix.onPress}
+                />
+              )}
+            </View>
+          )}
+        </View>
+      </View>
+      {assistiveText && !error && !invalid && (
+        <Text
+          level="textSupporting"
+          variation={
+            disabled ? "disabled" : focused ? "interactive" : "subdued"
+          }
+        >
+          {assistiveText}
+        </Text>
+      )}
+    </ErrorMessageWrapper>
+  );
+}
+
+function getLabelVariation(
+  error?: FieldError,
+  invalid?: boolean | string,
+  focused?: boolean,
+  disabled?: boolean,
+): TextVariation {
+  if (invalid || error) {
+    return "error";
+  } else if (disabled) {
+    return "disabled";
+  } else if (focused) {
+    return "interactive";
+  }
+  return "subdued";
+}
+
+function fieldAffixRequiredPropsCheck(
+  affixPair: [
+    InputFieldWrapperProps["prefix"],
+    InputFieldWrapperProps["suffix"],
+  ],
+) {
+  affixPair.map(affix => {
+    if (typeof affix !== "undefined" && !affix.icon && !affix.label) {
+      throw new Error(
+        `One of 'label' or 'icon' is required by the field affix component.`,
+      );
+    }
+  });
+}
+
+function warnIfClearActionWithNoOnClear(
+  onClear?: () => void,
+  showClearAction?: boolean,
+): void {
+  if (showClearAction && !onClear && __DEV__) {
+    console.warn(
+      "Declare an `onClear` prop on your input. You can set `clearable` to never or `showClearAction` to false if you don't need a clearable input",
+    );
+  }
+}
+
+function noopClear() {
+  warnIfClearActionWithNoOnClear(undefined, true);
+}
+
+function getMessage({
+  invalid,
+  error,
+}: Pick<InputFieldWrapperProps, "invalid" | "error">): string | undefined {
+  const messages: string[] = [];
+  if (error?.message) messages.push(error.message);
+  if (invalid && typeof invalid === "string") messages.push(invalid);
+
+  return messages.join("\n");
+}
+
+function Placeholder({
+  placeholder,
+  styleOverride,
+  labelVariation,
+  hasMiniLabel,
+}: {
+  placeholder?: string;
+  styleOverride: StyleProp<TextStyle>;
+  labelVariation: TextVariation;
+  hasMiniLabel: boolean;
+}) {
+  return (
+    <>
+      {!styleOverride ? (
+        <Text
+          hideFromScreenReader={true}
+          maxLines="single"
+          variation={labelVariation}
+          level={hasMiniLabel ? "textSupporting" : "text"}
+        >
+          {placeholder}
+        </Text>
+      ) : (
+        <RNText
+          accessibilityRole="none"
+          accessible={false}
+          importantForAccessibility="no-hide-descendants"
+          numberOfLines={1}
+          style={[
+            typographyStyles[labelVariation],
+            typographyStyles.baseRegularRegular,
+            hasMiniLabel
+              ? typographyStyles.smallSize
+              : typographyStyles.defaultSize,
+            styleOverride,
+          ]}
+        >
+          {placeholder}
+        </RNText>
+      )}
+    </>
+  );
+}

package/src/InputFieldWrapper/components/ClearAction/ClearAction.style.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+const width = tokens["space-smaller"] + tokens["space-larger"];
+
+export const styles = StyleSheet.create({
+  container: {
+    width,
+    height: "100%",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "center",
+  },
+  circle: {
+    backgroundColor: tokens["color-surface--background"],
+    borderRadius: tokens["radius-circle"],
+    width: tokens["space-large"],
+    height: tokens["space-large"],
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  addedMargin: {
+    marginRight: tokens["space-small"],
+  },
+});

package/src/InputFieldWrapper/components/ClearAction/ClearAction.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { useIntl } from "react-intl";
+import { ClearAction } from "./ClearAction";
+import { messages } from "./messages";
+
+it("should call the handler", () => {
+  const pressHandler = jest.fn();
+  const { formatMessage } = useIntl();
+
+  const { getByLabelText } = render(<ClearAction onPress={pressHandler} />);
+
+  fireEvent.press(getByLabelText(formatMessage(messages.clearTextLabel)));
+  expect(pressHandler).toHaveBeenCalled();
+});

package/src/InputFieldWrapper/components/ClearAction/ClearAction.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./ClearAction.style";
+import { messages } from "./messages";
+import { Icon } from "../../../Icon";
+
+interface ClearActionProps {
+  /**
+   * Press handler
+   */
+  readonly onPress: () => void;
+  readonly hasMarginRight?: boolean;
+}
+
+export function ClearAction({
+  onPress,
+  hasMarginRight = false,
+}: ClearActionProps): JSX.Element {
+  const { formatMessage } = useIntl();
+  return (
+    <Pressable
+      style={[styles.container, hasMarginRight && styles.addedMargin]}
+      onPress={onPress}
+      accessibilityLabel={formatMessage(messages.clearTextLabel)}
+    >
+      <View style={styles.circle}>
+        <Icon size="small" name="cross" color="interactiveSubtle" />
+      </View>
+    </Pressable>
+  );
+}

package/src/InputFieldWrapper/components/ClearAction/index.ts

@@ -0,0 +1,2 @@
+export { ClearAction } from "./ClearAction";
+export { messages } from "./messages";

package/src/InputFieldWrapper/components/ClearAction/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  clearTextLabel: {
+    id: "clearTextLabel",
+    defaultMessage: "Clear input",
+    description: "Accessiblity label for the clear input button",
+  },
+});