@jobber/components-native 0.8.0 → 0.10.0

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

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

@@ -0,0 +1,221 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { TextStyle } from "react-native";
+import { ReactTestInstance } from "react-test-renderer";
+import {
+  PrefixIcon,
+  PrefixIconProps,
+  PrefixLabel,
+  PrefixLabelProps,
+  prefixIconTestId,
+  prefixLabelTestId,
+} from "./Prefix";
+import { typographyStyles } from "../../../Typography";
+import { styles } from "../../InputFieldWrapper.style";
+import { tokens } from "../../../utils/design";
+import * as IconComponent from "../../../Icon/Icon";
+
+const iconSpy = jest.spyOn(IconComponent, "Icon");
+
+const mockLabel = "$";
+
+function setupLabel({
+  disabled = false,
+  focused = false,
+  hasMiniLabel = false,
+  inputInvalid = false,
+  label = mockLabel,
+  styleOverride,
+}: Partial<PrefixLabelProps>) {
+  return render(
+    <PrefixLabel
+      disabled={disabled}
+      focused={focused}
+      hasMiniLabel={hasMiniLabel}
+      inputInvalid={inputInvalid}
+      label={label}
+      styleOverride={styleOverride}
+    />,
+  );
+}
+
+function setupIcon({
+  disabled = false,
+  focused = false,
+  hasMiniLabel = false,
+  inputInvalid = false,
+  icon = "invoice",
+}: Partial<PrefixIconProps>) {
+  return render(
+    <PrefixIcon
+      disabled={disabled}
+      focused={focused}
+      hasMiniLabel={hasMiniLabel}
+      inputInvalid={inputInvalid}
+      icon={icon}
+    />,
+  );
+}
+
+describe("Prefix", () => {
+  it("renders a prefix label when specified", () => {
+    const { getByText } = setupLabel({});
+    expect(getByText(mockLabel)).toBeDefined();
+  });
+
+  it("renders a prefix icon when specified", () => {
+    const { getByTestId } = setupIcon({});
+    expect(getByTestId("invoice")).toBeDefined();
+  });
+
+  describe("updates the styles when focused", () => {
+    it("for the label", () => {
+      const tree = setupLabel({
+        focused: true,
+      });
+      const expectedStyle = { ...styles.fieldAffix, ...styles.inputFocused };
+      const prefixLabel = tree.getByTestId(prefixLabelTestId);
+      const flattenedStyle = prefixLabel.props.style.reduce(
+        (style: TextStyle, additionalStyles: TextStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      expect(flattenedStyle).toEqual(expectedStyle);
+    });
+
+    it("for the icon", () => {
+      const tree = setupIcon({
+        focused: true,
+      });
+      const expectedStyle = { ...styles.fieldAffix, ...styles.inputFocused };
+      const icon = tree.getByTestId(prefixIconTestId);
+      const flattenedStyle = icon.props.style.reduce(
+        (style: TextStyle, additionalStyles: TextStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      expect(flattenedStyle).toEqual(expectedStyle);
+    });
+  });
+
+  describe("updates the styles when input is invalid", () => {
+    it("for the label", () => {
+      const tree = setupLabel({
+        inputInvalid: true,
+      });
+      const expectedStyle = { ...styles.fieldAffix, ...styles.inputInvalid };
+      const prefixLabel = tree.getByTestId(prefixLabelTestId);
+      const flattenedStyle = prefixLabel.props.style.reduce(
+        (style: TextStyle, additionalStyles: TextStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      expect(flattenedStyle).toEqual(expectedStyle);
+    });
+
+    it("for the icon", () => {
+      const tree = setupIcon({
+        inputInvalid: true,
+      });
+      const expectedStyle = { ...styles.fieldAffix, ...styles.inputInvalid };
+      const prefixIcon = tree.getByTestId(prefixIconTestId);
+      const flattenedStyle = prefixIcon.props.style.reduce(
+        (style: TextStyle, additionalStyles: TextStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      expect(flattenedStyle).toEqual(expectedStyle);
+    });
+  });
+
+  it("updates the position of the label when a value is entered", () => {
+    const tree = setupLabel({
+      hasMiniLabel: true,
+    });
+    const prefixLabel = tree.getByTestId(prefixLabelTestId);
+    const labelWrapper = prefixLabel.children[0] as ReactTestInstance;
+    const expectedStyle = [styles.prefixLabel, styles.fieldAffixMiniLabel];
+    expect(labelWrapper.props.style).toEqual(expectedStyle);
+  });
+
+  describe("when disabled", () => {
+    it("updates the label", () => {
+      const tree = setupLabel({
+        disabled: true,
+      });
+      const prefixLabel = tree.getByText(mockLabel);
+      const expectedStyle = [
+        typographyStyles.baseRegularRegular,
+        typographyStyles.disabled,
+        typographyStyles.startAlign,
+        typographyStyles.defaultSize,
+        typographyStyles.baseLetterSpacing,
+      ];
+      expect(prefixLabel.props.style).toEqual(expectedStyle);
+    });
+
+    it("updates the icon", () => {
+      setupIcon({
+        disabled: true,
+      });
+      expect(iconSpy).toHaveBeenCalledWith(
+        {
+          customColor: tokens["color-disabled"],
+          name: "invoice",
+        },
+        {},
+      );
+    });
+  });
+
+  describe("Custom Label Style", () => {
+    it("uses default styling when style override not used", () => {
+      const { getByText } = setupLabel({});
+      const prefix = getByText(mockLabel);
+      const expectedStyle = [
+        typographyStyles.baseRegularRegular,
+        typographyStyles.base,
+        typographyStyles.startAlign,
+        typographyStyles.defaultSize,
+        typographyStyles.baseLetterSpacing,
+      ];
+      expect(prefix.props.style).toEqual(expectedStyle);
+    });
+
+    it("uses style override for label when provided", () => {
+      const styleOverride = {
+        fontSize: 50,
+        color: "purple",
+      };
+      const { getByText } = setupLabel({ styleOverride });
+      const prefix = getByText(mockLabel);
+      const flattenedStyle = prefix.props.style.reduce(
+        (style: TextStyle, additionalStyles: TextStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      const expectedStyle = {
+        ...styleOverride,
+        ...typographyStyles.baseRegularRegular,
+        lineHeight: typographyStyles.defaultSize.lineHeight,
+      };
+
+      expect(flattenedStyle).toEqual(expectedStyle);
+    });
+  });
+});