@jobber/components-native 0.8.0 → 0.10.0

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

package/src/InputFieldWrapper/hooks/useShowClear.test.ts

@@ -0,0 +1,158 @@
+import { useShowClear } from "./useShowClear";
+import { Clearable } from "..";
+
+interface UseShowClearParameters {
+  clearable: Clearable;
+  hasValue: boolean;
+  focused: boolean;
+  multiline: boolean;
+  disabled: boolean;
+  expected: boolean;
+}
+
+describe("useShowClear", () => {
+  describe.each<UseShowClearParameters>([
+    {
+      clearable: "always",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: false,
+      expected: true,
+    },
+    {
+      clearable: "always",
+      hasValue: true,
+      focused: true,
+      multiline: false,
+      disabled: false,
+      expected: true,
+    },
+    {
+      clearable: "always",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "always",
+      hasValue: false,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "while-editing",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: false,
+      expected: false,
+    },
+    {
+      clearable: "while-editing",
+      hasValue: true,
+      focused: true,
+      multiline: false,
+      disabled: false,
+      expected: true,
+    },
+    {
+      clearable: "while-editing",
+      hasValue: false,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "while-editing",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "never",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: false,
+      expected: false,
+    },
+    {
+      clearable: "never",
+      hasValue: true,
+      focused: true,
+      multiline: false,
+      disabled: false,
+      expected: false,
+    },
+    {
+      clearable: "never",
+      hasValue: false,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "never",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+  ])(
+    "%j",
+    ({
+      clearable,
+      hasValue,
+      focused,
+      multiline,
+      disabled,
+      expected,
+    }: UseShowClearParameters) => {
+      it(`returns ${expected}`, () => {
+        expect(
+          useShowClear({ clearable, multiline, focused, hasValue, disabled }),
+        ).toEqual(expected);
+      });
+    },
+  );
+
+  it("throws an error if multiline is true and clearable isn't never", () => {
+    expect(() => {
+      useShowClear({
+        clearable: "always",
+        multiline: true,
+        focused: true,
+        hasValue: true,
+        disabled: false,
+      });
+    }).toThrow();
+    expect(() => {
+      useShowClear({
+        clearable: "while-editing",
+        multiline: true,
+        focused: true,
+        hasValue: true,
+        disabled: false,
+      });
+    }).toThrow();
+    expect(() => {
+      useShowClear({
+        clearable: "never",
+        multiline: true,
+        focused: true,
+        hasValue: true,
+        disabled: false,
+      });
+    }).not.toThrow();
+  });
+});

package/src/InputFieldWrapper/hooks/useShowClear.ts

@@ -0,0 +1,31 @@
+import { Clearable } from "../InputFieldWrapper";
+
+interface UseShowClearParameters {
+  clearable: Clearable;
+  multiline: boolean;
+  focused: boolean;
+  hasValue: boolean;
+  disabled?: boolean;
+}
+
+export function useShowClear({
+  clearable,
+  multiline,
+  focused,
+  hasValue,
+  disabled = false,
+}: UseShowClearParameters): boolean | undefined {
+  if (multiline && clearable !== "never") {
+    throw new Error("Multiline inputs can not be clearable");
+  }
+  // Do not show if there is no value
+  if (!hasValue || clearable === "never" || disabled) {
+    return false;
+  }
+  switch (clearable) {
+    case "while-editing":
+      return focused;
+    case "always":
+      return true;
+  }
+}

package/src/InputFieldWrapper/index.ts

@@ -0,0 +1,4 @@
+export { commonInputStyles } from "./CommonInputStyles.style";
+export { InputFieldWrapper } from "./InputFieldWrapper";
+export type { InputFieldWrapperProps, Clearable } from "./InputFieldWrapper";
+export { useShowClear } from "./hooks/useShowClear";

package/src/index.ts

@@ -6,5 +6,7 @@ export * from "./ErrorMessageWrapper";
 export * from "./ActionLabel";
 export * from "./Content";
 export * from "./ActivityIndicator";
+export * from "./Card";
 export * from "./StatusLabel";
 export * from "./AtlantisContext";
+export * from "./InputFieldWrapper";