@jobber/components-native 0.9.0 → 0.11.0

package/src/Button/Button.test.tsx

@@ -0,0 +1,298 @@
+import React, { CSSProperties, ReactElement } from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
+import { ReactTestInstance } from "react-test-renderer";
+import { Button, ButtonType, ButtonVariation } from ".";
+import { ButtonSize } from "./types";
+import { baseButtonHeight, smallButtonHeight } from "./Button.style";
+import { tokens } from "../utils/design";
+
+function getIconAndTextColorFromRender({
+  type = "primary",
+  variation = "work",
+}: {
+  type?: ButtonType;
+  variation?: ButtonVariation;
+}) {
+  const pressHandler = jest.fn();
+  const text = "🌚 I am the text 🌚";
+  const iconName = "cog";
+
+  const { getByTestId, getByRole } = render(
+    <Button
+      onPress={pressHandler}
+      label={text}
+      icon={iconName}
+      type={type}
+      variation={variation}
+    />,
+  );
+
+  const iconColor = getByTestId(iconName).findByType(Path).props.fill;
+  const textColor = getByRole("text").props.style.find(
+    (style: CSSProperties) => style.color,
+  ).color;
+
+  return { iconColor, textColor };
+}
+
+function renderButton(element: ReactElement) {
+  const instance = render(element);
+
+  const button = instance.getByLabelText(element.props.label);
+  expect(button).toBeDefined();
+  expect(instance.getByText(element.props.label)).toBeDefined();
+
+  const buttonStyleEl = button.children[0] as ReactTestInstance;
+  const buttonStyle = buttonStyleEl.props.style.reduce(
+    (mergedStyles: CSSProperties, additionalStyles: CSSProperties) => ({
+      ...mergedStyles,
+      ...additionalStyles,
+    }),
+    {},
+  );
+
+  return { ...instance, button, buttonStyle };
+}
+
+describe("Button", () => {
+  it("renders the default primary button", () => {
+    const { button, buttonStyle } = renderButton(
+      <Button label={"Foo"} onPress={jest.fn()} />,
+    );
+
+    expect(button.props.accessibilityRole).toBe("button");
+    expect(buttonStyle).toMatchObject({
+      backgroundColor: tokens["color-interactive"],
+      borderColor: tokens["color-interactive"],
+    });
+  });
+
+  it.each<[ButtonVariation, Record<string, string>]>([
+    ["work", { bgColor: tokens["color-interactive"] }],
+    [
+      "cancel",
+      {
+        bgColor: tokens["color-white"],
+        borderColor: tokens["color-interactive--subtle"],
+      },
+    ],
+    ["destructive", { bgColor: tokens["color-destructive"] }],
+    ["learning", { bgColor: tokens["color-informative"] }],
+  ])("renders a %s Button", (variation, { bgColor, borderColor }) => {
+    const { buttonStyle } = renderButton(
+      <Button label={variation} variation={variation} onPress={jest.fn()} />,
+    );
+
+    expect(buttonStyle).toMatchObject({
+      backgroundColor: bgColor,
+      borderColor: borderColor || bgColor,
+    });
+  });
+
+  it.each<[ButtonType, Record<string, string>]>([
+    ["primary", { bgColor: tokens["color-interactive"] }],
+    [
+      "secondary",
+      {
+        bgColor: tokens["color-white"],
+        borderColor: tokens["color-interactive"],
+      },
+    ],
+    ["tertiary", { bgColor: tokens["color-white"] }],
+  ])("renders a %s Button", (type, { bgColor, borderColor }) => {
+    const { buttonStyle } = renderButton(
+      <Button label={type} type={type} onPress={jest.fn()} />,
+    );
+
+    expect(buttonStyle).toMatchObject({
+      backgroundColor: bgColor,
+      borderColor: borderColor || bgColor,
+    });
+  });
+
+  it.each<[ButtonSize, Record<string, number>]>([
+    [
+      "small",
+      {
+        minHeight: smallButtonHeight,
+      },
+    ],
+    [
+      "base",
+      {
+        minHeight: baseButtonHeight,
+      },
+    ],
+  ])("renders a %s Button", (size, { minHeight }) => {
+    const { buttonStyle } = renderButton(
+      <Button label="Button Size" size={size} />,
+    );
+
+    expect(buttonStyle).toMatchObject({
+      minHeight,
+    });
+  });
+
+  it("renders a disabled Button", () => {
+    const { button, buttonStyle } = renderButton(
+      <Button label="Can't touch this" disabled={true} onPress={jest.fn()} />,
+    );
+
+    expect(button.props.accessibilityState).toHaveProperty("disabled", true);
+    expect(buttonStyle).toMatchObject({
+      backgroundColor: tokens["color-disabled--secondary"],
+      borderColor: tokens["color-disabled--secondary"],
+    });
+  });
+
+  it("renders a non-fullWidth Button", () => {
+    const expectedValue = { alignSelf: "stretch" };
+    const { button, rerender } = renderButton(
+      <Button label="Thicc" onPress={jest.fn()} />,
+    );
+
+    expect(button.props.style).toContainEqual(expectedValue);
+
+    rerender(<Button label="Thicc" fullWidth={false} onPress={jest.fn()} />);
+
+    expect(button.props.style).not.toContainEqual(expectedValue);
+  });
+
+  it("should call the onPress handler", () => {
+    const pressHandler = jest.fn();
+    const text = "🌚 I am the text 🌚";
+    const a11yLabel = "A button";
+    const { getByLabelText } = render(
+      <Button
+        onPress={pressHandler}
+        label={text}
+        accessibilityLabel={a11yLabel}
+      />,
+    );
+
+    fireEvent.press(getByLabelText(a11yLabel));
+    expect(pressHandler).toHaveBeenCalled();
+  });
+
+  describe("accessibilityLabel", () => {
+    it("uses accessibilityLabel if specified", () => {
+      const pressHandler = jest.fn();
+      const text = "🌚 I am the text 🌚";
+      const a11yLabel = "A button";
+      const { getByLabelText } = render(
+        <Button
+          onPress={pressHandler}
+          label={text}
+          accessibilityLabel={a11yLabel}
+        />,
+      );
+
+      expect(getByLabelText(a11yLabel)).toBeTruthy();
+    });
+
+    it("uses label if unspecified", () => {
+      const pressHandler = jest.fn();
+      const text = "🌚 I am the text 🌚";
+      const { getByLabelText } = render(
+        <Button onPress={pressHandler} label={text} />,
+      );
+
+      expect(getByLabelText(text)).toBeTruthy();
+    });
+  });
+
+  describe("if an icon is passed in", () => {
+    it("renders an icon Button with same color as the Button text", () => {
+      const { iconColor, textColor } = getIconAndTextColorFromRender({});
+
+      expect(iconColor).toBe(tokens["color-white"]);
+      expect(textColor).toBe(iconColor);
+    });
+
+    it("renders the learning variation and secondary type with icon and label with the same color", () => {
+      const { iconColor, textColor } = getIconAndTextColorFromRender({
+        variation: "learning",
+        type: "secondary",
+      });
+      expect(iconColor).toBe(tokens["color-informative"]);
+      expect(textColor).toBe(iconColor);
+    });
+
+    it("renders the destructive variation and secondary type with icon and label with the same color", () => {
+      const { iconColor, textColor } = getIconAndTextColorFromRender({
+        variation: "destructive",
+        type: "secondary",
+      });
+      expect(iconColor).toBe(tokens["color-destructive"]);
+      expect(textColor).toBe(iconColor);
+    });
+
+    it("renders the cancel variation and tertiary type with icon and label with the same color", () => {
+      const { iconColor, textColor } = getIconAndTextColorFromRender({
+        variation: "cancel",
+        type: "tertiary",
+      });
+      expect(iconColor).toBe(tokens["color-interactive--subtle"]);
+      expect(textColor).toBe(iconColor);
+    });
+
+    it("renders an icon Button if only an icon is passed", () => {
+      const pressHandler = jest.fn();
+      const icon = "cog";
+      const accessibilityLabel = "cog";
+
+      const { getByLabelText } = render(
+        <Button
+          onPress={pressHandler}
+          icon={icon}
+          accessibilityLabel={accessibilityLabel}
+        />,
+      );
+
+      expect(getByLabelText(icon)).toBeDefined();
+    });
+  });
+
+  describe("Loading", () => {
+    const label = "I am loading";
+    it("does render a loading state", () => {
+      const { getByTestId, getByRole } = render(
+        <Button label={label} onPress={jest.fn} loading={true} />,
+      );
+
+      expect(getByTestId("loadingImage")).toBeDefined();
+      expect(getByRole("button", { busy: true })).toBeDefined();
+    });
+
+    it("doesn't render a loading state", () => {
+      const { queryByTestId, queryByRole, rerender } = render(
+        <Button label={label} onPress={jest.fn} loading={false} />,
+      );
+
+      expect(queryByTestId("loadingImage")).toBeNull();
+      expect(queryByRole("button", { busy: true })).toBeNull();
+
+      rerender(<Button label="I am loading" onPress={jest.fn} />);
+
+      expect(queryByTestId("loadingImage")).toBeNull();
+      expect(queryByRole("button", { busy: true })).toBeNull();
+    });
+
+    it("should not allow press events", () => {
+      const handlePress = jest.fn();
+      const setup = (loading?: boolean) => (
+        <Button label={label} onPress={handlePress} loading={loading} />
+      );
+      const { getByLabelText, rerender } = render(setup(true));
+
+      fireEvent.press(getByLabelText(label));
+      expect(handlePress).not.toHaveBeenCalled();
+
+      // Sanity check that it's not a false positive
+      rerender(setup());
+      fireEvent.press(getByLabelText(label));
+      expect(handlePress).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/Button/Button.tsx

@@ -0,0 +1,223 @@
+import React from "react";
+import { TouchableHighlight, View } from "react-native";
+import { IconColorNames, IconNames } from "@jobber/design";
+import { XOR } from "ts-xor";
+import { styles } from "./Button.style";
+// eslint-disable-next-line import/no-internal-modules
+import { InternalButtonLoading } from "./components/InternalButtonLoading";
+import { ButtonSize, ButtonType, ButtonVariation } from "./types";
+import { ActionLabel, ActionLabelVariation } from "../ActionLabel";
+import { Icon } from "../Icon";
+import { tokens } from "../utils/design";
+
+interface CommonButtonProps {
+  /**
+   * Press handler
+   */
+  readonly onPress?: () => void;
+
+  /**
+   * Themes the button to the type of action it performs
+   */
+  readonly variation?: ButtonVariation;
+
+  /**
+   * Sets the visual hierarchy
+   */
+  readonly type?: ButtonType;
+
+  /**
+   * Defines the size of the button
+   *
+   * @default "base"
+   */
+  readonly size?: ButtonSize;
+
+  /**
+   * Will make the button scale to take up all the available height
+   */
+  readonly fullHeight?: boolean;
+
+  /**
+   * Will make the button scale to take up all of the available width
+   */
+  readonly fullWidth?: boolean;
+
+  /**
+   * Makes the button un-clickable
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Accessibility hint to help users understand what will happen when they press the button
+   */
+  readonly accessibilityHint?: string;
+
+  /**
+   * Changes the button interface to imply loading and prevents the press callback
+   *
+   * @default false
+   */
+  readonly loading?: boolean;
+
+  /**
+   * Adds an leading icon beside the label.
+   */
+  readonly icon?: IconNames;
+
+  /**
+   * Accessibility label for the component. This is required for components that
+   * have an `icon` but not a `label`.
+   *
+   * If the string is the same as the `label` prop, you don't need to add an
+   * `accessibilityLabel`. **Don't use this for testing purposes.**
+   */
+  readonly accessibilityLabel?: string;
+}
+
+interface LabelButton extends CommonButtonProps {
+  /**
+   * Text to be displayed on the button
+   */
+  readonly label: string;
+}
+
+interface IconButton extends CommonButtonProps {
+  readonly icon: IconNames;
+  readonly accessibilityLabel: string;
+}
+
+export type ButtonProps = XOR<LabelButton, IconButton>;
+export function Button({
+  label,
+  onPress,
+  variation = "work",
+  type = "primary",
+  fullHeight = false,
+  fullWidth = true,
+  disabled = false,
+  loading = false,
+  size = "base",
+  accessibilityLabel,
+  accessibilityHint,
+  icon,
+}: ButtonProps): JSX.Element {
+  const buttonStyle = [
+    styles.button,
+    styles[variation],
+    styles[type],
+    styles[size],
+    disabled && styles.disabled,
+    fullHeight && styles.fullHeight,
+    fullWidth && styles.reducedPaddingForFullWidth,
+  ];
+
+  // attempts to use Pressable caused problems.  When a ScrollView contained
+  // an InputText that was focused, it required two presses to activate the
+  // Pressable.  Using a TouchableHighlight made things register correctly
+  // in a single press
+
+  return (
+    <TouchableHighlight
+      onPress={onPress}
+      testID={accessibilityLabel || label}
+      accessibilityLabel={accessibilityLabel || label}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, busy: loading }}
+      disabled={disabled || loading}
+      underlayColor={tokens["color-greyBlue--dark"]}
+      activeOpacity={tokens["opacity-pressed"]}
+      style={[
+        styles.touchable,
+        fullWidth && styles.fullWidth,
+        fullHeight && styles.fullHeight,
+      ]}
+    >
+      <View style={buttonStyle}>
+        {loading && <InternalButtonLoading variation={variation} type={type} />}
+        <View style={getContentStyles(label, icon)}>
+          {icon && (
+            <View style={styles.iconStyle}>
+              <Icon
+                name={icon}
+                color={getIconColorVariation(variation, type, disabled)}
+              />
+            </View>
+          )}
+          {label && (
+            <View style={styles.labelStyle}>
+              <ActionLabel
+                variation={getActionLabelVariation(variation, type)}
+                disabled={disabled}
+                align={icon ? "start" : undefined}
+              >
+                {label}
+              </ActionLabel>
+            </View>
+          )}
+        </View>
+      </View>
+    </TouchableHighlight>
+  );
+}
+
+function getActionLabelVariation(
+  variation: string,
+  type: string,
+): ActionLabelVariation {
+  if (type === "primary" && variation !== "cancel") {
+    return "onPrimary";
+  }
+
+  switch (variation) {
+    case "learning":
+      return "learning";
+    case "destructive":
+      return "destructive";
+    case "cancel":
+      return "subtle";
+    default:
+      return "interactive";
+  }
+}
+
+function getIconColorVariation(
+  variation: ButtonVariation,
+  type: string,
+  disabled: boolean,
+): IconColorNames {
+  if (disabled) {
+    return "disabled";
+  }
+
+  if (type === "primary" && variation !== "cancel") {
+    return "white";
+  }
+
+  switch (variation) {
+    case "learning":
+      return "informative";
+    case "destructive":
+      return "destructive";
+    case "cancel":
+      return "interactiveSubtle";
+    default:
+      return "interactive";
+  }
+}
+
+function getContentStyles(
+  label: string | undefined,
+  icon: IconNames | undefined,
+) {
+  if (label && !icon) {
+    return undefined;
+  }
+
+  return [
+    styles.content,
+    icon && !!label && styles.iconPaddingOffset,
+    !!label && styles.contentWithLabel,
+  ];
+}

package/src/Button/components/InternalButtonLoading/InternalButtonLoading.style.ts

@@ -0,0 +1,5 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  image: StyleSheet.absoluteFillObject,
+});

package/src/Button/components/InternalButtonLoading/InternalButtonLoading.test.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { cleanup, render } from "@testing-library/react-native";
+import {
+  InternalButtonLoading,
+  darkPattern,
+  lightPattern,
+} from "./InternalButtonLoading";
+import { ButtonType, ButtonVariation } from "../../types";
+
+afterEach(cleanup);
+
+describe("Loading pattern", () => {
+  it.each<[string, ButtonType, ButtonVariation]>([
+    [lightPattern, "primary", "work"],
+    [lightPattern, "primary", "destructive"],
+    [lightPattern, "primary", "learning"],
+    [darkPattern, "primary", "cancel"],
+    [darkPattern, "secondary", "cancel"],
+    [darkPattern, "secondary", "work"],
+    [darkPattern, "secondary", "destructive"],
+    [darkPattern, "secondary", "learning"],
+    [darkPattern, "tertiary", "cancel"],
+    [darkPattern, "tertiary", "work"],
+    [darkPattern, "tertiary", "destructive"],
+    [darkPattern, "tertiary", "learning"],
+  ])(
+    "should render a %s pattern on %s %s combination",
+    (pattern, type, variation) => {
+      const { getByTestId } = render(
+        <InternalButtonLoading type={type} variation={variation} />,
+      );
+
+      const component = getByTestId("loadingImage");
+      expect(component.props.source).toMatchObject({
+        uri: expect.stringContaining(pattern),
+      });
+    },
+  );
+});

package/src/Button/components/InternalButtonLoading/InternalButtonLoading.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { ImageBackground, PixelRatio } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { styles } from "./InternalButtonLoading.style";
+import { tokens } from "../../../utils/design";
+import { ButtonType, ButtonVariation } from "../../types";
+
+interface InternalButtonLoadingProps {
+  readonly variation: ButtonVariation;
+  readonly type: ButtonType;
+}
+
+const imageWidth = 96;
+const offset = PixelRatio.roundToNearestPixel(imageWidth / PixelRatio.get());
+const leftOffset = -1 * offset;
+
+const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
+
+function InternalButtonLoadingInternal({
+  variation,
+  type,
+}: InternalButtonLoadingProps): JSX.Element {
+  const translateX = useSharedValue(0);
+  translateX.value = withRepeat(
+    withTiming(offset, {
+      duration: tokens["timing-loading"],
+      easing: Easing.linear,
+    }),
+    -1,
+  );
+
+  const opacity = useSharedValue(0);
+  opacity.value = withDelay(
+    tokens["timing-quick"],
+    withTiming(1, {
+      duration: tokens["timing-base"],
+      easing: Easing.linear,
+    }),
+  );
+
+  const animations = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateX: translateX.value }],
+  }));
+
+  return (
+    <AnimatedImage
+      testID="loadingImage"
+      source={{ uri: getLoadingPattern({ variation, type }) }}
+      resizeMode="repeat"
+      style={[styles.image, { left: leftOffset }, animations]}
+    />
+  );
+}
+
+export const darkPattern =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAMUExURQAAAEdwTAAAAAAAAKDh18UAAAAEdFJOUxkADQwimkzpAAAAtUlEQVRIx+3NqxHDQBRDUc0YuxyXokxgSkmT7sdgP++3YoYrqAsOYDto+7gfpwtfHy4Xfj7cLvw3sYlNbOINAoI4IIgTgrggiBuCIAThQyB8CIQLkXAhEi5EwoVIWEiEhURYSISFRMyQiRkyMUMmZsjECIUYoRAjFGKEQvRQiR4q0UMleqhECwuihQXRwoJoYUEQgiAEQQiCEAQhCEIQhCAIQRCCIARBCIIQBCEIQhCEIAhB8AEuzZ5wHe17xgAAAABJRU5ErkJggg==";
+export const lightPattern =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAJUExURf///0dwTP///0SistEAAAADdFJOU0AAILGCadYAAAC0SURBVEjH7c2pFcNAFENRHTMX4pKUE5hS0oT7NZjlbyNmOIJ64AK2g7aP+3G68PXhcuHnw+3CfxOb2MQm3iAgiAOCOCGIC4K4IQhCED4EwodAuBAJFyLhQiRciISFRFhIhIVEWEjEDJmYIRMzZGKGTIxQiBEKMUIhRihED5XooRI9VKKHSrSwIFpYEC0siBYWBCEIQhCEIAhBEIIgBEEIghAEIQhCEIQgCEEQgiAEQQiCEAQfva6WeBniVLgAAAAASUVORK5CYII=";
+
+function getLoadingPattern({
+  variation,
+  type,
+}: InternalButtonLoadingProps): string {
+  if (variation === "cancel") return darkPattern;
+  if (type === "primary") return lightPattern;
+  return darkPattern;
+}
+
+export const InternalButtonLoading = React.memo(InternalButtonLoadingInternal);

package/src/Button/components/InternalButtonLoading/index.ts

@@ -0,0 +1 @@
+export { InternalButtonLoading } from "./InternalButtonLoading";

package/src/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonVariation, ButtonType } from "./types";

package/src/Button/types.ts

@@ -0,0 +1,3 @@
+export type ButtonVariation = "work" | "cancel" | "destructive" | "learning";
+export type ButtonType = "primary" | "secondary" | "tertiary";
+export type ButtonSize = "small" | "base";

package/src/InputFieldWrapper/CommonInputStyles.style.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from "react-native";
+import { typographyStyles } from "../Typography";
+import { tokens } from "../utils/design";
+
+export const commonInputStyles = StyleSheet.create({
+  input: {
+    width: "100%",
+    flexShrink: 1,
+    flexGrow: 1,
+    color: tokens["color-text"],
+    fontFamily: typographyStyles.baseRegularRegular.fontFamily,
+    fontSize: typographyStyles.defaultSize.fontSize,
+    letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
+    minHeight: tokens["space-largest"],
+    padding: 0,
+  },
+
+  inputEmpty: {
+    paddingTop: 0,
+  },
+
+  inputDisabled: {
+    color: typographyStyles.disabled.color,
+  },
+
+  container: {
+    marginVertical: tokens["space-smaller"],
+    backgroundColor: tokens["color-surface"],
+    minHeight: tokens["space-largest"],
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    borderColor: tokens["color-grey"],
+    borderStyle: "solid",
+    borderBottomWidth: tokens["border-base"],
+  },
+});