@jobber/components-native 0.9.0 → 0.11.0

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

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

@@ -0,0 +1,104 @@
+import React from "react";
+import {
+  // eslint-disable-next-line no-restricted-imports
+  Text as RNText,
+  StyleProp,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+import { IconNames } from "@jobber/design";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+import { tokens } from "../../../utils/design";
+import { typographyStyles } from "../../../Typography";
+import { styles } from "../../InputFieldWrapper.style";
+
+export interface PrefixLabelProps {
+  focused: boolean;
+  disabled?: boolean;
+  hasMiniLabel: boolean;
+  inputInvalid: boolean;
+  label: string;
+  styleOverride?: StyleProp<TextStyle>;
+}
+
+export const prefixLabelTestId = "ATL-InputFieldWrapper-PrefixLabel";
+export const prefixIconTestId = "ATL-InputFieldWrapper-PrefixIcon";
+
+export function PrefixLabel({
+  focused,
+  disabled,
+  hasMiniLabel,
+  inputInvalid,
+  label,
+  styleOverride,
+}: PrefixLabelProps): JSX.Element {
+  return (
+    <View
+      style={[
+        styles.fieldAffix,
+        focused && styles.inputFocused,
+        inputInvalid && styles.inputInvalid,
+      ]}
+      testID={prefixLabelTestId}
+    >
+      <View
+        style={[styles.prefixLabel, hasMiniLabel && styles.fieldAffixMiniLabel]}
+      >
+        {!styleOverride ? (
+          <Text variation={disabled ? "disabled" : "base"}>{label}</Text>
+        ) : (
+          <RNText
+            allowFontScaling={true}
+            style={[
+              typographyStyles.baseRegularRegular,
+              typographyStyles.base,
+              typographyStyles.defaultSize,
+              disabled ? typographyStyles.subdued : typographyStyles.base,
+              styleOverride,
+            ]}
+          >
+            {label}
+          </RNText>
+        )}
+      </View>
+    </View>
+  );
+}
+
+export interface PrefixIconProps {
+  focused: boolean;
+  disabled?: boolean;
+  hasMiniLabel: boolean;
+  inputInvalid?: boolean;
+  icon: IconNames;
+  styleOverride?: StyleProp<ViewStyle>;
+}
+
+export function PrefixIcon({
+  focused,
+  disabled,
+  inputInvalid,
+  icon,
+}: PrefixIconProps): JSX.Element {
+  return (
+    <View
+      testID={prefixIconTestId}
+      style={[
+        styles.fieldAffix,
+        focused && styles.inputFocused,
+        inputInvalid && styles.inputInvalid,
+      ]}
+    >
+      <View style={styles.prefixIcon}>
+        <Icon
+          customColor={
+            disabled ? tokens["color-disabled"] : tokens["color-greyBlue"]
+          }
+          name={icon}
+        />
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,101 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { TextStyle } from "react-native";
+import {
+  SuffixIcon,
+  SuffixIconProps,
+  SuffixLabel,
+  SuffixLabelProps,
+} from "./Suffix";
+import { typographyStyles } from "../../../Typography";
+
+const mockLabel = "$";
+
+function setupLabel({
+  disabled = false,
+  focused = false,
+  hasMiniLabel = false,
+  inputInvalid = false,
+  label = mockLabel,
+  styleOverride,
+}: Partial<SuffixLabelProps>) {
+  return render(
+    <SuffixLabel
+      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<SuffixIconProps>) {
+  return render(
+    <SuffixIcon
+      disabled={disabled}
+      focused={focused}
+      hasMiniLabel={hasMiniLabel}
+      inputInvalid={inputInvalid}
+      icon={icon}
+    />,
+  );
+}
+
+describe("Suffix", () => {
+  it("renders a suffix label when specified", () => {
+    const { getByText } = setupLabel({});
+    expect(getByText(mockLabel)).toBeDefined();
+  });
+
+  it("renders a suffix icon when specified", () => {
+    const { getByTestId } = setupIcon({});
+    expect(getByTestId("invoice")).toBeDefined();
+  });
+
+  describe("Custom Label Style", () => {
+    it("uses default styling when no style override is provided", () => {
+      const { getByText } = setupLabel({});
+      const suffix = getByText(mockLabel);
+      const expectedStyle = [
+        typographyStyles.baseRegularRegular,
+        typographyStyles.base,
+        typographyStyles.startAlign,
+        typographyStyles.defaultSize,
+        typographyStyles.baseLetterSpacing,
+      ];
+      expect(suffix.props.style).toEqual(expectedStyle);
+    });
+
+    it("uses style override for label when provided", () => {
+      const styleOverride = {
+        fontSize: 50,
+        color: "purple",
+      };
+      const { getByText } = setupLabel({ styleOverride });
+      const suffix = getByText(mockLabel);
+      const flattenedStyle = suffix.props.style.reduce(
+        (style: TextStyle, additionalStyles: TextStyle) => ({
+          ...style,
+          ...additionalStyles,
+        }),
+        {},
+      );
+
+      const expectedStyle = {
+        ...typographyStyles.baseRegularRegular,
+        lineHeight: typographyStyles.defaultSize.lineHeight,
+        ...styleOverride,
+      };
+
+      expect(flattenedStyle).toEqual(expectedStyle);
+    });
+  });
+});

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import {
+  Pressable,
+  // eslint-disable-next-line no-restricted-imports
+  Text as RNText,
+  StyleProp,
+  TextStyle,
+  View,
+} from "react-native";
+import { IconNames } from "@jobber/design";
+import { tokens } from "../../../utils/design";
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+import { typographyStyles } from "../../../Typography";
+import { styles } from "../../InputFieldWrapper.style";
+
+export interface SuffixLabelProps {
+  focused: boolean;
+  disabled?: boolean;
+  hasMiniLabel: boolean;
+  inputInvalid?: boolean;
+  label: string;
+  hasLeftMargin?: boolean;
+  styleOverride?: StyleProp<TextStyle>;
+}
+
+export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
+export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";
+
+export function SuffixLabel({
+  focused,
+  disabled,
+  hasMiniLabel,
+  inputInvalid,
+  label,
+  hasLeftMargin = true,
+  styleOverride,
+}: SuffixLabelProps): JSX.Element {
+  return (
+    <View
+      testID={suffixLabelTestId}
+      style={[
+        styles.fieldAffix,
+        focused && styles.inputFocused,
+        inputInvalid && styles.inputInvalid,
+        hasLeftMargin && styles.suffixLabelMargin,
+      ]}
+    >
+      <View
+        style={[styles.suffixLabel, hasMiniLabel && styles.fieldAffixMiniLabel]}
+      >
+        {!styleOverride ? (
+          <Text variation={disabled ? "disabled" : "base"}>{label}</Text>
+        ) : (
+          <RNText
+            allowFontScaling={true}
+            style={[
+              typographyStyles.baseRegularRegular,
+              typographyStyles.base,
+              typographyStyles.defaultSize,
+              disabled ? typographyStyles.subdued : typographyStyles.base,
+              styleOverride,
+            ]}
+          >
+            {label}
+          </RNText>
+        )}
+      </View>
+    </View>
+  );
+}
+
+export interface SuffixIconProps {
+  focused: boolean;
+  disabled?: boolean;
+  hasMiniLabel: boolean;
+  inputInvalid?: boolean;
+  icon: IconNames;
+  hasLeftMargin?: boolean;
+  onPress?: () => void;
+}
+
+export function SuffixIcon({
+  focused,
+  disabled,
+  inputInvalid,
+  icon,
+  hasLeftMargin = false,
+  onPress,
+}: SuffixIconProps): JSX.Element {
+  return (
+    <View
+      testID={suffixIconTestId}
+      style={[
+        styles.fieldAffix,
+        focused && styles.inputFocused,
+        inputInvalid && styles.inputInvalid,
+      ]}
+    >
+      <Pressable
+        style={[styles.suffixIcon, hasLeftMargin && styles.suffixIconMargin]}
+        onPress={onPress}
+      >
+        <Icon
+          customColor={
+            disabled ? tokens["color-disabled"] : tokens["color-greyBlue"]
+          }
+          name={icon}
+        />
+      </Pressable>
+    </View>
+  );
+}