@jobber/components-native 0.12.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/index.d.ts

@@ -12,3 +12,4 @@ 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.12.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": "b059ff05b89ebdd41e79b4b2cf761e91706bc9c9"
+  "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/index.ts

@@ -12,3 +12,4 @@ export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
 export * from "./Heading";
+export * from "./Chip";