@jobber/components-native 0.10.0 → 0.12.0

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/Heading/Heading.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Heading } from "./Heading";
+
+describe("when Heading called with text as the only prop", () => {
+  it("should match snapshot", () => {
+    const view = render(<Heading>Default Heading</Heading>).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with reverseTheme", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading reverseTheme>Reverse Theme Heading</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with title variation", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading level={"title"}>Title Heading</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with Subtitle variation", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading level={"subtitle"}>Subtitle</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with sub-heading variation", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading level={"subHeading"}>Sub-Heading</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with sub-heading variation and text-color", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading level={"subHeading"} variation={"subdued"}>
+        Sub-Heading
+      </Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with an alignment", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading align={"end"}>Text Aligned Right</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with maxLines", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading maxLines="single">Text Aligned Right</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});

package/src/Heading/Heading.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import {
+  FontFamily,
+  TextAlign,
+  TextColor,
+  TruncateLength,
+  Typography,
+  TypographyProps,
+} from "../Typography";
+import { tokens } from "../utils/design";
+
+type HeadingStyle = Pick<
+  TypographyProps<FontFamily>,
+  "fontFamily" | "fontWeight" | "size" | "lineHeight" | "color"
+>;
+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;
+}
+
+const maxScaledFontSize: Record<HeadingLevel, number> = {
+  subHeading: tokens["typography--fontSize-base"] * 1.375,
+  heading: tokens["typography--fontSize-base"] * 1.5,
+  subtitle: tokens["typography--fontSize-base"] * 1.5,
+  title: tokens["typography--fontSize-base"] * 2.125,
+};
+
+export function Heading<T extends HeadingLevel = "heading">({
+  children,
+  level,
+  variation = "heading",
+  reverseTheme = false,
+  align,
+  maxLines = "unlimited",
+  allowFontScaling = true,
+  selectable,
+}: HeadingProps<T>): JSX.Element {
+  const headingStyle = getHeadingStyle(level, variation);
+  const accessibilityRole = "header";
+
+  return (
+    <Typography
+      {...{
+        ...headingStyle,
+        accessibilityRole,
+        reverseTheme,
+        align,
+        maxLines,
+        allowFontScaling,
+      }}
+      maxFontScaleSize={maxScaledFontSize[level as HeadingLevel]}
+      selectable={selectable}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+function getHeadingStyle(
+  level: HeadingLevel = "heading",
+  variation: HeadingColor,
+): HeadingStyle {
+  const headingLevelToStyle: Record<HeadingLevel, HeadingStyle> = {
+    title: {
+      fontFamily: "display",
+      fontWeight: "black",
+      size: "jumbo",
+      lineHeight: "jumbo",
+      color: variation,
+    },
+    subtitle: {
+      fontFamily: "display",
+      fontWeight: "extraBold",
+      size: "largest",
+      lineHeight: "largest",
+      color: variation,
+    },
+    heading: {
+      fontFamily: "display",
+      fontWeight: "extraBold",
+      size: "larger",
+      lineHeight: "large",
+      color: variation,
+    },
+    subHeading: {
+      fontFamily: "base",
+      fontWeight: "semiBold",
+      size: "default",
+      lineHeight: "base",
+      color: variation,
+    },
+  };
+
+  return headingLevelToStyle[level];
+}