@jobber/components-native 0.10.0 → 0.12.0

package/dist/types/src/Button/Button.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import { IconNames } from "@jobber/design";
+import { XOR } from "ts-xor";
+import { ButtonSize, ButtonType, ButtonVariation } from "./types";
+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 declare function Button({ label, onPress, variation, type, fullHeight, fullWidth, disabled, loading, size, accessibilityLabel, accessibilityHint, icon, }: ButtonProps): JSX.Element;
+export {};

package/dist/types/src/Button/Button.style.d.ts

@@ -0,0 +1,86 @@
+export declare const baseButtonHeight: number;
+export declare const smallButtonHeight: number;
+export declare const styles: {
+    fullHeight: {
+        flexGrow: number;
+        flexShrink: number;
+    };
+    fullWidth: {
+        alignSelf: "stretch";
+    };
+    touchable: {
+        borderRadius: number;
+    };
+    button: {
+        justifyContent: "center";
+        alignItems: "center";
+        alignSelf: "stretch";
+        flexDirection: "row";
+        overflow: "hidden";
+        margin: number;
+        borderRadius: number;
+        borderWidth: number;
+        paddingVertical: number;
+    };
+    base: {
+        minHeight: number;
+        paddingHorizontal: number;
+    };
+    small: {
+        minHeight: number;
+        paddingHorizontal: number;
+    };
+    reducedPaddingForFullWidth: {
+        paddingHorizontal: number;
+    };
+    iconPaddingOffset: {
+        paddingRight: number;
+    };
+    content: {
+        paddingLeft: number;
+        height: string;
+    };
+    contentWithLabel: {
+        paddingLeft: number;
+    };
+    iconStyle: {
+        position: "absolute";
+        top: string;
+        left: number;
+        transform: {
+            translateY: number;
+        }[];
+    };
+    labelStyle: {
+        flexGrow: number;
+        justifyContent: "center";
+    };
+    work: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    learning: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    destructive: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    cancel: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    primary: {};
+    secondary: {
+        backgroundColor: string;
+    };
+    tertiary: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    disabled: {
+        borderColor: string;
+        backgroundColor: string;
+    };
+};

package/dist/types/src/Button/components/InternalButtonLoading/InternalButtonLoading.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ButtonType, ButtonVariation } from "../../types";
+interface InternalButtonLoadingProps {
+    readonly variation: ButtonVariation;
+    readonly type: ButtonType;
+}
+declare function InternalButtonLoadingInternal({ variation, type, }: InternalButtonLoadingProps): JSX.Element;
+export declare const darkPattern = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAMUExURQAAAEdwTAAAAAAAAKDh18UAAAAEdFJOUxkADQwimkzpAAAAtUlEQVRIx+3NqxHDQBRDUc0YuxyXokxgSkmT7sdgP++3YoYrqAsOYDto+7gfpwtfHy4Xfj7cLvw3sYlNbOINAoI4IIgTgrggiBuCIAThQyB8CIQLkXAhEi5EwoVIWEiEhURYSISFRMyQiRkyMUMmZsjECIUYoRAjFGKEQvRQiR4q0UMleqhECwuihQXRwoJoYUEQgiAEQQiCEAQhCEIQhCAIQRCCIARBCIIQBCEIQhCEIAhB8AEuzZ5wHe17xgAAAABJRU5ErkJggg==";
+export declare const lightPattern = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAJUExURf///0dwTP///0SistEAAAADdFJOU0AAILGCadYAAAC0SURBVEjH7c2pFcNAFENRHTMX4pKUE5hS0oT7NZjlbyNmOIJ64AK2g7aP+3G68PXhcuHnw+3CfxOb2MQm3iAgiAOCOCGIC4K4IQhCED4EwodAuBAJFyLhQiRciISFRFhIhIVEWEjEDJmYIRMzZGKGTIxQiBEKMUIhRihED5XooRI9VKKHSrSwIFpYEC0siBYWBCEIQhCEIAhBEIIgBEEIghAEIQhCEIQgCEEQgiAEQQiCEAQfva6WeBniVLgAAAAASUVORK5CYII=";
+export declare const InternalButtonLoading: React.MemoExoticComponent<typeof InternalButtonLoadingInternal>;
+export {};

package/dist/types/src/Button/components/InternalButtonLoading/InternalButtonLoading.style.d.ts

@@ -0,0 +1,4 @@
+import { StyleSheet } from "react-native";
+export declare const styles: {
+    image: StyleSheet.AbsoluteFillStyle;
+};

package/dist/types/src/Button/components/InternalButtonLoading/index.d.ts

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

package/dist/types/src/Button/index.d.ts

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

package/dist/types/src/Button/types.d.ts

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

package/dist/types/src/Heading/Heading.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { TextAlign, TextColor, TruncateLength, TypographyProps } from "../Typography";
+type HeadingColor = Extract<TextColor, "text" | "subdued" | "heading">;
+export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";
+interface HeadingProps<T extends HeadingLevel> extends Pick<TypographyProps<"base">, "selectable"> {
+    /**
+     * Text to display.
+     */
+    readonly children: string;
+    /**
+     * The type of heading, e.g., "Title"
+     */
+    readonly level?: T;
+    /**
+     * The text color of heading
+     */
+    readonly variation?: HeadingColor;
+    /**
+     * Uses the reverse variant of the text color for the heading
+     */
+    readonly reverseTheme?: boolean;
+    /**
+     * Alignment of heading
+     */
+    readonly align?: TextAlign;
+    /**
+     * The maximum amount of lines the text can occupy before being truncated with "...".
+     * Uses predefined string values that correspond to a doubling scale for the amount of lines.
+     */
+    readonly maxLines?: TruncateLength;
+    /**
+     * Allow text to be resized based on user's device display scale
+     */
+    readonly allowFontScaling?: boolean;
+}
+export declare function Heading<T extends HeadingLevel = "heading">({ children, level, variation, reverseTheme, align, maxLines, allowFontScaling, selectable, }: HeadingProps<T>): JSX.Element;
+export {};

package/dist/types/src/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from "./Heading";
+export type { HeadingLevel } from "./Heading";

package/dist/types/src/index.d.ts

@@ -9,4 +9,6 @@ export * from "./ActivityIndicator";
 export * from "./Card";
 export * from "./StatusLabel";
 export * from "./AtlantisContext";
+export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./Heading";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -26,6 +26,7 @@
     "react-intl": "^6.4.2",
     "react-native-gesture-handler": "^2.5.0",
     "react-native-localize": "^2.2.6",
+    "react-native-reanimated": "^2.17.0",
     "react-native-svg": "^13.9.0",
     "react-native-uuid": "^1.4.9",
     "ts-xor": "^1.1.0"
@@ -46,5 +47,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "d363c516d3f72dc510c7b0ad002fdbf479bf9292"
+  "gitHead": "b059ff05b89ebdd41e79b4b2cf761e91706bc9c9"
 }

package/src/Button/Button.style.ts

@@ -0,0 +1,116 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const iconTranslateY = tokens["space-large"] / 2;
+const buttonRadius = tokens["radius-large"];
+export const baseButtonHeight = tokens["space-base"] * 3.5;
+export const smallButtonHeight = tokens["space-base"] * 2.25;
+
+export const styles = StyleSheet.create({
+  fullHeight: {
+    flexGrow: 1,
+    flexShrink: 0,
+  },
+
+  fullWidth: {
+    alignSelf: "stretch",
+  },
+
+  touchable: {
+    borderRadius: buttonRadius,
+  },
+
+  button: {
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    flexDirection: "row",
+    overflow: "hidden",
+    margin: 0,
+    borderRadius: buttonRadius,
+    borderWidth: tokens["border-base"],
+    paddingVertical: tokens["space-small"],
+  },
+
+  base: {
+    minHeight: baseButtonHeight,
+    paddingHorizontal: tokens["space-base"],
+  },
+
+  small: {
+    minHeight: smallButtonHeight,
+    paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
+  },
+
+  reducedPaddingForFullWidth: {
+    paddingHorizontal: tokens["space-smaller"],
+  },
+
+  iconPaddingOffset: {
+    paddingRight: tokens["space-smaller"],
+  },
+
+  content: {
+    paddingLeft: tokens["space-large"],
+    height: "100%",
+  },
+
+  contentWithLabel: {
+    paddingLeft: tokens["space-large"] + tokens["space-small"],
+  },
+
+  iconStyle: {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    transform: [{ translateY: -iconTranslateY }],
+  },
+
+  labelStyle: {
+    flexGrow: 1,
+    justifyContent: "center",
+  },
+
+  /* Variations */
+
+  work: {
+    backgroundColor: tokens["color-interactive"],
+    borderColor: tokens["color-interactive"],
+  },
+
+  learning: {
+    backgroundColor: tokens["color-informative"],
+    borderColor: tokens["color-informative"],
+  },
+
+  destructive: {
+    backgroundColor: tokens["color-destructive"],
+    borderColor: tokens["color-destructive"],
+  },
+
+  /* Cancel is special because, by default, it's styled as a secondary button */
+  cancel: {
+    backgroundColor: tokens["color-surface"],
+    borderColor: tokens["color-interactive--subtle"],
+  },
+
+  /* Types */
+
+  primary: {},
+
+  secondary: {
+    backgroundColor: tokens["color-surface"],
+  },
+
+  tertiary: {
+    backgroundColor: tokens["color-surface"],
+    borderColor: tokens["color-surface"],
+  },
+
+  /* Disabled */
+
+  disabled: {
+    borderColor: tokens["color-disabled--secondary"],
+    backgroundColor: tokens["color-disabled--secondary"],
+  },
+});

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