@jobber/components-native 0.11.0 → 0.13.0

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { AccessibilityRole } from "react-native";
+import { IconNames } from "@jobber/design";
+export type AccentType = "client" | "invoice" | "job" | "request" | "quote";
+export interface ChipProps {
+    /**
+     * label of the chip.
+     */
+    readonly label?: string;
+    /**
+     * chip's active status
+     */
+    readonly isActive: boolean;
+    /**
+     * Boolean for chip's ability to be dismissed
+     */
+    readonly isDismissible?: boolean;
+    /**
+     * Background color to be used for inactive chips
+     *
+     * @default "background"
+     */
+    readonly inactiveBackgroundColor?: "surface" | "background";
+    /**
+     * Accessibility label for the component. It's also used for testing
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Accessibility role for the component
+     */
+    readonly accessibilityRole?: AccessibilityRole;
+    /**
+     * Press handler
+     */
+    onPress?(): void;
+    /**
+     * Optional Icon
+     */
+    readonly icon?: IconNames;
+    /**
+     * Background color to be used for Active chips
+     */
+    readonly accent?: AccentType;
+}
+export declare function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBackgroundColor, accessibilityLabel, accessibilityRole, accent, }: ChipProps): JSX.Element;

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

@@ -0,0 +1,29 @@
+export declare const styles: {
+    container: {
+        alignItems: "center";
+        borderRadius: number;
+        flexDirection: "row";
+        height: number;
+        justifyContent: "center";
+        marginHorizontal: number;
+        marginTop: number;
+        paddingHorizontal: number;
+    };
+    iconLeft: {
+        marginHorizontal: number;
+    };
+    chipText: {
+        flexGrow: number;
+        flexShrink: number;
+        marginHorizontal: number;
+    };
+    dismissIcon: {
+        backgroundColor: string;
+        borderRadius: number;
+        marginLeft: number;
+        padding: number;
+    };
+    activeDismissIcon: {
+        backgroundColor: string;
+    };
+};

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

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

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

@@ -11,3 +11,5 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./Heading";
+export * from "./Chip";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -47,5 +47,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "91380d5821e334f130fcf7a02290b25548fa05e2"
+  "gitHead": "bfc022e4558ae4f056b05b1186c4f82eb137ae0e"
 }

package/src/Chip/Chip.style.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const chipHeight = tokens["space-larger"] + tokens["space-small"];
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    borderRadius: tokens["radius-circle"],
+    flexDirection: "row",
+    height: chipHeight,
+    justifyContent: "center",
+    marginHorizontal: tokens["space-smaller"],
+    marginTop: tokens["space-small"],
+    paddingHorizontal: tokens["space-small"],
+  },
+  iconLeft: {
+    marginHorizontal: tokens["space-smallest"],
+  },
+  chipText: {
+    flexGrow: 1,
+    flexShrink: 1,
+    marginHorizontal: tokens["space-smallest"],
+  },
+  dismissIcon: {
+    backgroundColor: tokens["color-surface"],
+    borderRadius: tokens["radius-circle"],
+    marginLeft: tokens["space-smaller"],
+    padding: tokens["space-smaller"],
+  },
+  activeDismissIcon: {
+    backgroundColor: tokens["color-surface--background"],
+  },
+});

package/src/Chip/Chip.test.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Chip } from "./Chip";
+import { tokens } from "../utils/design";
+
+it("renders an active Chip", () => {
+  const { getByText, getByLabelText } = render(
+    <Chip
+      label="Foo"
+      onPress={jest.fn()}
+      accessibilityLabel={"Foo chip"}
+      isActive
+    />,
+  );
+  expect(getByText("Foo")).toBeDefined();
+  expect(getByLabelText("Foo chip").props.style).toContainEqual({
+    backgroundColor: tokens["color-surface--reverse"],
+  });
+});
+
+it("renders an active Chip without onPress as disabled", () => {
+  const { getByTestId } = render(
+    <Chip label="Foo" accessibilityLabel={"Foo chip"} isActive />,
+  );
+  expect(
+    getByTestId("chipTest").props.accessibilityState.disabled,
+  ).toBeTruthy();
+});
+
+it("renders an inactive Chip with a default backgroundColor", () => {
+  const { getByTestId } = render(
+    <Chip label="Foo" onPress={jest.fn()} isActive={false} />,
+  );
+  expect(getByTestId("chipTest").props.style).not.toContainEqual({
+    backgroundColor: tokens["color-surface--reverse"],
+  });
+  expect(getByTestId("chipTest").props.style).toContainEqual({
+    backgroundColor: tokens["color-surface--background"],
+  });
+});
+
+it("renders an inactive Chip with a surface backgroundColor", () => {
+  const { getByTestId } = render(
+    <Chip
+      label="Foo"
+      onPress={jest.fn()}
+      isActive={false}
+      inactiveBackgroundColor={"surface"}
+    />,
+  );
+  expect(getByTestId("chipTest").props.style).toContainEqual({
+    backgroundColor: tokens["color-surface"],
+  });
+});
+
+it("renders an active Chip with icon", () => {
+  const { getByTestId } = render(
+    <Chip onPress={jest.fn()} icon="invoice" isActive />,
+  );
+  expect(getByTestId("invoice")).toBeDefined();
+});
+
+it("renders an inactive Chip with icon", () => {
+  const { getByTestId } = render(
+    <Chip onPress={jest.fn()} icon="invoice" isActive={false} />,
+  );
+  expect(getByTestId("invoice")).toBeDefined();
+});
+
+it("renders a Chip with the dismiss icon", () => {
+  const { getByTestId } = render(
+    <Chip label="Foo" onPress={jest.fn()} isActive isDismissible={true} />,
+  );
+  expect(getByTestId("remove")).toBeDefined();
+});
+
+it("should call the handler with the new value", () => {
+  const pressHandler = jest.fn();
+  const accessibilityLabel = "test chip";
+  const { getByLabelText } = render(
+    <Chip
+      onPress={pressHandler}
+      label={"foo"}
+      accessibilityLabel={accessibilityLabel}
+      isActive
+    />,
+  );
+
+  fireEvent.press(getByLabelText(accessibilityLabel));
+  expect(pressHandler).toHaveBeenCalled();
+});
+
+describe("accessibilityLabel", () => {
+  it("uses accessibilityLabel if specified", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <Chip
+        onPress={pressHandler}
+        label="label"
+        accessibilityLabel="accessibilityLabel"
+        isActive
+      />,
+    );
+
+    expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+  });
+
+  it("uses label if unspecified", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <Chip onPress={pressHandler} label="label" isActive />,
+    );
+
+    expect(getByLabelText("label")).toBeTruthy();
+  });
+});
+
+describe("accent", () => {
+  it("uses accent color when present and chip is Active", () => {
+    const { getByTestId } = render(
+      <Chip
+        label="Foo"
+        onPress={jest.fn()}
+        accessibilityLabel={"Foo chip"}
+        isActive={true}
+        accent={"client"}
+      />,
+    );
+    expect(getByTestId("chipTest").props.style).toContainEqual({
+      backgroundColor: tokens["color-client"],
+    });
+  });
+});

package/src/Chip/Chip.tsx

@@ -0,0 +1,142 @@
+import React, { useMemo } from "react";
+import { AccessibilityRole, Pressable, View } from "react-native";
+import { IconNames } from "@jobber/design";
+import { styles } from "./Chip.style";
+import { Icon } from "../Icon";
+import { Typography } from "../Typography";
+import { tokens } from "../utils/design";
+
+export type AccentType = "client" | "invoice" | "job" | "request" | "quote";
+
+export interface ChipProps {
+  /**
+   * label of the chip.
+   */
+  readonly label?: string;
+
+  /**
+   * chip's active status
+   */
+  readonly isActive: boolean;
+
+  /**
+   * Boolean for chip's ability to be dismissed
+   */
+  readonly isDismissible?: boolean;
+
+  /**
+   * Background color to be used for inactive chips
+   *
+   * @default "background"
+   */
+  readonly inactiveBackgroundColor?: "surface" | "background";
+
+  /**
+   * Accessibility label for the component. It's also used for testing
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Accessibility role for the component
+   */
+  readonly accessibilityRole?: AccessibilityRole;
+
+  /**
+   * Press handler
+   */
+  onPress?(): void;
+
+  /**
+   * Optional Icon
+   */
+  readonly icon?: IconNames;
+
+  /**
+   * Background color to be used for Active chips
+   */
+  readonly accent?: AccentType;
+}
+
+const defaultAccentColor = tokens["color-surface--reverse"];
+
+export function Chip({
+  icon,
+  label,
+  onPress,
+  isDismissible,
+  isActive,
+  inactiveBackgroundColor = "background",
+  accessibilityLabel,
+  accessibilityRole = "radio",
+  accent,
+}: ChipProps): JSX.Element {
+  const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
+    const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
+
+    const iconColor = isActive ? tokens["color-surface"] : accentColor;
+    const chip = [
+      styles.container,
+      {
+        backgroundColor:
+          inactiveBackgroundColor === "surface"
+            ? tokens["color-surface"]
+            : tokens["color-surface--background"],
+      },
+      isActive && { backgroundColor: accentColor },
+    ];
+    const dismiss =
+      (isActive || inactiveBackgroundColor === "surface") &&
+      styles.activeDismissIcon;
+
+    return {
+      chipStyle: chip,
+      iconCustomColor: iconColor,
+      dismissColor: dismiss,
+    };
+  }, [accent, isActive, inactiveBackgroundColor]);
+
+  const accessibilityState = useMemo(() => {
+    const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
+    if (checkableRoles.includes(accessibilityRole)) {
+      return { checked: isActive };
+    }
+    return {};
+  }, [accessibilityRole, isActive]);
+
+  return (
+    <Pressable
+      testID="chipTest"
+      hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+      onPress={onPress}
+      disabled={typeof onPress !== "function"}
+      style={chipStyle}
+      accessibilityLabel={accessibilityLabel || label}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={accessibilityState}
+    >
+      {icon && (
+        <View style={styles.iconLeft}>
+          <Icon name={icon} size={"base"} customColor={iconCustomColor} />
+        </View>
+      )}
+      {label && (
+        <View style={styles.chipText}>
+          <Typography
+            color="base"
+            fontWeight="medium"
+            maxFontScaleSize={tokens["typography--fontSize-large"]}
+            maxLines="single"
+            reverseTheme={isActive}
+          >
+            {label}
+          </Typography>
+        </View>
+      )}
+      {isDismissible && (
+        <View style={[styles.dismissIcon, dismissColor]}>
+          <Icon name={"remove"} size={"small"} />
+        </View>
+      )}
+    </Pressable>
+  );
+}

package/src/Chip/index.ts

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

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