@jobber/components-native 0.30.0 → 0.32.0

package/src/InputNumber/messages.ts

@@ -0,0 +1,10 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  notANumberError: {
+    id: "notANumberError",
+    defaultMessage: "Enter a number",
+    description:
+      "Error message shown when a non-numeric value is typed in number input",
+  },
+});

package/src/Select/Select.style.ts

@@ -0,0 +1,51 @@
+import { StyleSheet } from "react-native";
+import { commonInputStyles } from "../InputFieldWrapper";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: StyleSheet.flatten([
+    commonInputStyles.container,
+    {
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      minHeight: tokens["space-largest"] + tokens["border-base"],
+    },
+  ]),
+
+  input: StyleSheet.flatten([
+    commonInputStyles.input,
+    {
+      flexDirection: "row",
+      flexGrow: 0,
+      paddingBottom: tokens["space-smaller"],
+      minHeight: 0,
+      minWidth: "100%",
+    },
+  ]),
+
+  value: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+
+  icon: {
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+
+  invalid: {
+    color: tokens["color-critical"],
+    borderColor: tokens["color-critical"],
+  },
+
+  errorMessageWrapperIcon: {
+    flex: 0,
+    flexBasis: "auto",
+    paddingTop: tokens["space-minuscule"],
+    paddingRight: tokens["space-smaller"],
+  },
+  messageWrapper: {
+    paddingTop: tokens["space-smaller"],
+    flexDirection: "row",
+  },
+});

package/src/Select/Select.test.tsx

@@ -0,0 +1,323 @@
+import React from "react";
+import {
+  RenderAPI,
+  cleanup,
+  fireEvent,
+  render,
+} from "@testing-library/react-native";
+import { tokens } from "@jobber/design/foundation";
+import { AccessibilityInfo } from "react-native";
+import { Option, Select } from ".";
+import { messages } from "./messages";
+import { SelectInternalPicker } from "./components/SelectInternalPicker";
+
+const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
+
+const onChange = jest.fn();
+
+beforeEach(() => {
+  A11yInfoSpy.mockImplementation(() => Promise.resolve(false));
+});
+
+afterEach(() => {
+  cleanup();
+  jest.resetAllMocks();
+});
+
+describe("Select", () => {
+  it("renders a Select", () => {
+    const component = render(
+      <Select onChange={onChange}>
+        <Option value={"one"}>one</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+    expect(component.getByTestId("arrowDown")).toBeDefined();
+    expect(
+      component.getByText(messages.emptyValue.defaultMessage, {
+        includeHiddenElements: true,
+      }),
+    ).toBeDefined();
+  });
+
+  it("renders a Select with a label", () => {
+    const label = "Press me";
+    const { getByText } = render(
+      <Select onChange={onChange} label={label}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+
+    expect(getByText(label, { includeHiddenElements: true })).toBeDefined();
+  });
+
+  it("renders a Select with a placeholder", () => {
+    const placeholder = "I am a placeholder";
+    const { getByText } = render(
+      <Select onChange={onChange} placeholder={placeholder}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+
+    expect(
+      getByText(placeholder, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  it("renders a Select with assistive text", () => {
+    const assistiveText = "You need to pick something";
+    const { getByText } = render(
+      <Select onChange={onChange} assistiveText={assistiveText}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+    expect(
+      getByText(assistiveText, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  describe("when invalid", () => {
+    const labelText = "labelText";
+
+    it("renders an invalid Select", () => {
+      const { getByText } = render(
+        <Select onChange={onChange} invalid={true} label={labelText}>
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+      expect(
+        getByText(labelText, { includeHiddenElements: true }).props.style,
+      ).toContainEqual({
+        color: tokens["color-critical"],
+      });
+    });
+
+    it("renders an invalid Select with placeholder", () => {
+      const placeholder = "Place me in the holder";
+      const { getByText } = render(
+        <Select
+          label={labelText}
+          onChange={onChange}
+          invalid={true}
+          placeholder={placeholder}
+        >
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      expect(
+        getByText(placeholder, { includeHiddenElements: true }),
+      ).toBeDefined();
+      expect(
+        getByText(labelText, { includeHiddenElements: true }).props.style,
+      ).toContainEqual({
+        color: tokens["color-critical"],
+      });
+    });
+  });
+
+  it("renders a disabled Select", () => {
+    const labelText = "labelText";
+    const { getByText } = render(
+      <Select label={labelText} onChange={onChange} disabled={true}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+      </Select>,
+    );
+    expect(
+      getByText(labelText, { includeHiddenElements: true }).props.style,
+    ).toContainEqual({
+      color: tokens["color-disabled"],
+    });
+  });
+
+  it("renders a Select with a value provided", () => {
+    const expectedValue = "That should be me";
+    const { getByText } = render(
+      <Select onChange={onChange} value={"2"}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>{expectedValue}</Option>
+      </Select>,
+    );
+
+    expect(
+      getByText(expectedValue, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  it("renders a Select with a defaultValue provided", () => {
+    const expectedValue = "It's the 3rd value";
+    const { getByText } = render(
+      <Select onChange={onChange} defaultValue={"3"}>
+        <Option value={"1"}>1</Option>
+        <Option value={"2"}>2</Option>
+        <Option value={"3"}>{expectedValue}</Option>
+      </Select>,
+    );
+
+    expect(
+      getByText(expectedValue, { includeHiddenElements: true }),
+    ).toBeDefined();
+  });
+
+  describe("fires the onChange callback", () => {
+    it("fires", () => {
+      const { getByTestId } = render(
+        <Select onChange={onChange} value={"2"}>
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      const select = getByTestId("ATL-Select").findByType(SelectInternalPicker);
+      expect(select).toBeTruthy();
+      fireEvent(select, "onChange", "1");
+      expect(onChange).toHaveBeenCalledWith("1");
+    });
+  });
+
+  describe("Invalid value", () => {
+    it("renders with the empty value option", () => {
+      const { getByText } = render(
+        <Select onChange={onChange} value={"invalid"}>
+          <Option value={"first"}>first</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      expect(
+        getByText(messages.emptyValue.defaultMessage, {
+          includeHiddenElements: true,
+        }),
+      ).toBeDefined();
+    });
+
+    it("renders with the placeholder", () => {
+      const { getByText } = render(
+        <Select
+          onChange={onChange}
+          value={"invalid"}
+          placeholder={"Make a selection"}
+        >
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      expect(
+        getByText("Make a selection", { includeHiddenElements: true }),
+      ).toBeDefined();
+    });
+  });
+
+  describe("accessibilityLabel", () => {
+    it("uses accessibilityLabel if specified", () => {
+      const { getByLabelText } = render(
+        <Select
+          onChange={onChange}
+          label="label"
+          accessibilityLabel="accessibilityLabel"
+        >
+          <Option value={"1"}>1</Option>
+          <Option value={"2"}>2</Option>
+        </Select>,
+      );
+
+      expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+    });
+  });
+
+  describe("when validations are passed to the component", () => {
+    describe("validations fail", () => {
+      let tree: RenderAPI;
+      const labelText = "labelText";
+      const errorMsg = "Too short";
+      beforeEach(() => {
+        tree = render(
+          <Select
+            label={labelText}
+            onChange={onChange}
+            value={"Watermelon"}
+            validations={{
+              minLength: { value: 60, message: errorMsg },
+            }}
+          >
+            <Option value={"Apple"}>Apple</Option>
+            <Option value={"Watermelon"}>Watermelon</Option>
+          </Select>,
+        );
+      });
+
+      it("renders the error message when there is an error", async () => {
+        const select = tree
+          .getByTestId("ATL-Select")
+          .findByType(SelectInternalPicker);
+        fireEvent(select, "onChange", "Apple");
+        expect(
+          await tree.findByText(errorMsg, { includeHiddenElements: true }),
+        ).toBeTruthy();
+      });
+
+      it("shows the invalid colours", async () => {
+        const select = tree
+          .getByTestId("ATL-Select")
+          .findByType(SelectInternalPicker);
+        fireEvent(select, "onChange", "Apple");
+        expect(
+          (await tree.findByText(labelText, { includeHiddenElements: true }))
+            .props.style,
+        ).toContainEqual({
+          color: tokens["color-critical"],
+        });
+      });
+    });
+
+    describe("validations passes", () => {
+      let tree: RenderAPI;
+      const labelText = "labelText";
+      const errorMsg = "Not too short";
+      beforeEach(() => {
+        tree = render(
+          <Select
+            label={labelText}
+            onChange={onChange}
+            value={"Watermelon"}
+            validations={{
+              minLength: { value: 4, message: errorMsg },
+            }}
+          >
+            <Option value={"Apple"}>Apple</Option>
+            <Option value={"Watermelon"}>Watermelon</Option>
+          </Select>,
+        );
+      });
+
+      it("does not render any error messages", () => {
+        const select = tree
+          .getByTestId("ATL-Select")
+          .findByType(SelectInternalPicker);
+        expect(select).toBeTruthy();
+        fireEvent(select, "onChange", "Apple");
+        expect(tree.queryByText(errorMsg)).toBeNull();
+      });
+
+      it("has non-critical colours", () => {
+        const select = tree
+          .getByTestId("ATL-Select")
+          .findByType(SelectInternalPicker);
+        fireEvent(select, "onChange", "Apple");
+        expect(
+          tree.getByText(labelText, { includeHiddenElements: true }).props
+            .style,
+        ).toContainEqual({
+          color: tokens["color-text--secondary"],
+        });
+      });
+    });
+  });
+});

package/src/Select/Select.tsx

@@ -0,0 +1,240 @@
+import React, { ReactElement } from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { RegisterOptions } from "react-hook-form";
+import { styles } from "./Select.style";
+import { SelectInternalPicker } from "./components/SelectInternalPicker";
+import { messages } from "./messages";
+import { InputFieldWrapper } from "../InputFieldWrapper";
+import { Icon } from "../Icon";
+import { TextVariation } from "../Typography";
+import { Text } from "../Text";
+import { useFormController } from "../hooks";
+
+export interface SelectOption {
+  /**
+   * Text that shows up as the option
+   */
+  readonly children: string;
+
+  /**
+   * The value that gets returned when an option is selected
+   */
+  readonly value: string;
+}
+
+export interface SelectProps {
+  /**
+   * Current value of the component
+   */
+  readonly value?: string;
+
+  /**
+   * Default value for when the component is uncontrolled
+   */
+  readonly defaultValue?: string;
+
+  /**
+   * Adds a first option to let users select a "no value".
+   * Placeholder item selected by default until a selection is made.
+   */
+  readonly placeholder?: string;
+
+  /**
+   * Label text shown above the selection.
+   */
+  readonly label?: string;
+
+  /**
+   * Help text shown below the control.
+   */
+  readonly assistiveText?: string;
+
+  /**
+   * Callback that provides the new value when the selection changes
+   */
+  readonly onChange?: (newValue?: string) => void;
+
+  /**
+   * Disables input selection
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Indicates the current selection is invalid
+   */
+  readonly invalid?: boolean;
+
+  /**
+   * VoiceOver will read this string when a user selects the element
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Helps users understand what will happen when they perform an action
+   */
+  readonly accessibilityHint?: string;
+
+  /**
+   * Name of the input.
+   */
+  readonly name?: string;
+
+  /**
+   * The options to select from
+   */
+  readonly children: ReactElement<SelectOption>[];
+
+  /**
+   * The validations that will mark this component as invalid
+   */
+  readonly validations?: RegisterOptions;
+}
+
+export function Select({
+  value,
+  defaultValue,
+  onChange,
+  children,
+  placeholder,
+  label,
+  assistiveText,
+  disabled,
+  invalid,
+  validations,
+  accessibilityLabel,
+  name,
+}: SelectProps): JSX.Element {
+  const { field, error } = useFormController({
+    name,
+    validations,
+    value: value ?? defaultValue,
+  });
+
+  const { formatMessage } = useIntl();
+  const internalValue = value ?? field.value;
+  const textVariation = getTextVariation({
+    disabled,
+    invalid: invalid || !!error,
+  });
+  const valueTextVariation = disabled ? "disabled" : undefined;
+  const hasValue = internalValue && internalValue?.length > 0;
+
+  return (
+    <InputFieldWrapper
+      error={error}
+      invalid={invalid || !!error}
+      hasValue={hasValue}
+      styleOverride={{
+        container: { borderBottomWidth: undefined },
+      }}
+    >
+      <View
+        testID="ATL-Select"
+        accessible={true}
+        accessibilityLabel={getA11yLabel()}
+        accessibilityValue={{ text: getValue() }}
+        accessibilityHint={formatMessage(messages.a11yHint)}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: disabled }}
+      >
+        <SelectInternalPicker
+          disabled={disabled}
+          options={getOptions()}
+          onChange={handleChange}
+        >
+          <View
+            style={[styles.container, (invalid || !!error) && styles.invalid]}
+          >
+            {label && (
+              <Text
+                level="textSupporting"
+                variation={textVariation}
+                hideFromScreenReader={true}
+              >
+                {label}
+              </Text>
+            )}
+
+            <View style={styles.input}>
+              <View style={styles.value}>
+                <Text
+                  variation={disabled ? "disabled" : "base"}
+                  hideFromScreenReader={true}
+                >
+                  {getValue()}
+                </Text>
+              </View>
+              <View style={styles.icon}>
+                <Icon name="arrowDown" color={valueTextVariation} />
+              </View>
+            </View>
+          </View>
+        </SelectInternalPicker>
+
+        {assistiveText && (
+          <Text
+            level="textSupporting"
+            variation={textVariation}
+            hideFromScreenReader={true}
+          >
+            {assistiveText}
+          </Text>
+        )}
+      </View>
+    </InputFieldWrapper>
+  );
+
+  function getA11yLabel(): string | undefined {
+    let text = [accessibilityLabel || label, assistiveText];
+    text = text.filter(Boolean);
+    return text.join(", ");
+  }
+
+  function handleChange(val: string) {
+    onChange?.(val);
+    // need this onBlur for validations to occur
+    field.onBlur();
+    field.onChange(val);
+  }
+
+  function getOptions() {
+    const options = children.map(({ props }) => ({
+      label: props.children,
+      value: props.value,
+      isActive: props.value === internalValue,
+    }));
+
+    if (!internalValue || placeholder) {
+      options.unshift({
+        label: placeholder || formatMessage(messages.emptyValue),
+        value: "",
+        isActive: !internalValue,
+      });
+    }
+
+    return options;
+  }
+
+  function getValue() {
+    const options = getOptions();
+
+    const activeValue = options.find(option => option.isActive);
+    return (
+      activeValue?.label || placeholder || formatMessage(messages.emptyValue)
+    );
+  }
+}
+
+function getTextVariation({
+  invalid,
+  disabled,
+}: Pick<SelectProps, "invalid" | "disabled">): TextVariation {
+  if (invalid) return "error";
+  if (disabled) return "disabled";
+  return "subdued";
+}
+
+export function Option({ children }: SelectOption): JSX.Element {
+  return <>{children}</>;
+}

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import {
+  // Need to use iOS style button
+  Button,
+  Modal,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Picker } from "@react-native-picker/picker";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useIntl } from "react-intl";
+import { styles } from "./SelectDefaultPicker.style";
+import { messages } from "./messages";
+import { SelectInternalPickerProps } from "../../types";
+import { SelectPressable } from "../SelectPressable/SelectPressable";
+
+type SelectDefaultPickerProps = SelectInternalPickerProps;
+
+export function SelectDefaultPicker({
+  children,
+  options,
+  onChange,
+}: SelectDefaultPickerProps): JSX.Element {
+  const [show, setShow] = useState(false);
+  const { formatMessage } = useIntl();
+  const selectedLanguage = options.find(option => option.isActive);
+
+  return (
+    <>
+      <SelectPressable onPress={showPicker}>{children}</SelectPressable>
+      <Modal
+        visible={show}
+        transparent
+        animationType="slide"
+        onRequestClose={hidePicker}
+      >
+        <TouchableOpacity style={styles.overlay} onPress={hidePicker} />
+        <View style={styles.actionBar}>
+          <Button title={formatMessage(messages.done)} onPress={hidePicker} />
+        </View>
+        <View style={styles.pickerContainer} testID="select-wheel-picker">
+          <SafeAreaView edges={["bottom"]}>
+            <Picker
+              selectedValue={selectedLanguage?.value}
+              onValueChange={onChange}
+            >
+              {options.map(({ label, value }, i) => (
+                <Picker.Item key={i} label={label} value={value} />
+              ))}
+            </Picker>
+          </SafeAreaView>
+        </View>
+      </Modal>
+    </>
+  );
+
+  function showPicker() {
+    setShow(true);
+  }
+
+  function hidePicker() {
+    setShow(false);
+  }
+}