@jobber/components-native 0.15.0 → 0.17.0

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { IconColorNames, IconNames } from "@jobber/design";
+interface IconButtonProps {
+    /**
+     * Press handler
+     */
+    onPress?(): void;
+    /** The icon to show.  */
+    readonly name: IconNames;
+    /**
+     * Accessibilty label for the component. It's also used for testing
+     */
+    readonly accessibilityLabel: string;
+    /**
+     * Determines the color of the icon. If not specified, some icons have a default system colour
+     * like quotes, jobs, and invoices.
+     * Others that don't have a system colour fall back to greyBlue.
+     */
+    readonly color?: IconColorNames;
+    /**
+     * Sets a custom color for the icon. Can be a rgb() or hex value.
+     */
+    readonly customColor?: string;
+    /**
+     * a component that would render over the icon
+     * e.g. the number of notifications over the activity feed icon
+     */
+    readonly badge?: React.ReactNode;
+    /**
+     * Used to locate this button in tests
+     */
+    readonly testID?: string;
+}
+export declare function IconButton({ badge, name, color, customColor, onPress, accessibilityLabel, testID, }: IconButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+export declare const styles: {
+    container: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};

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

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

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

@@ -1,17 +1,18 @@
-export * from "./Icon";
-export * from "./Divider";
-export * from "./Typography";
-export * from "./Text";
-export * from "./ErrorMessageWrapper";
+export * from "./ActionItem";
 export * from "./ActionLabel";
-export * from "./Content";
 export * from "./ActivityIndicator";
-export * from "./Card";
-export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
+export * from "./Card";
+export * from "./Chip";
+export * from "./Content";
+export * from "./Divider";
+export * from "./ErrorMessageWrapper";
+export * from "./Heading";
+export * from "./Icon";
+export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./ProgressBar";
-export * from "./Heading";
-export * from "./Chip";
-export * from "./ActionItem";
+export * from "./StatusLabel";
+export * from "./Text";
+export * from "./Typography";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -21,7 +21,7 @@
     "build:clean": "rm -rf ./dist"
   },
   "dependencies": {
-    "@jobber/design": "^0.39.0",
+    "@jobber/design": "^0.40.0",
     "react-hook-form": "^7.30.0",
     "react-intl": "^6.4.2",
     "react-native-gesture-handler": "^2.5.0",
@@ -47,5 +47,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "3bb3bd6837e653ed965570d404324e625e2339ee"
+  "gitHead": "4f8524610aba80691217778e1824149409c65524"
 }

package/src/IconButton/IconButton.style.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: tokens["space-largest"],
+    height: tokens["space-largest"],
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/src/IconButton/IconButton.test.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { IconButton } from "./IconButton";
+import { Text } from "../Text";
+
+describe("IconButton", () => {
+  it("renders an IconButton", () => {
+    const pressHandler = jest.fn();
+    const { getByTestId } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        accessibilityLabel="Job Button"
+        testID="JobButton"
+      />,
+    );
+
+    expect(getByTestId("JobButton")).toBeDefined();
+  });
+
+  it("should call the onPress", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        accessibilityLabel={"Job Button"}
+      />,
+    );
+    fireEvent.press(getByLabelText("Job Button"));
+    expect(pressHandler).toHaveBeenCalled();
+  });
+
+  it("should render badge component", () => {
+    const pressHandler = jest.fn();
+    const badge = <Text>Hi</Text>;
+    const { getByText } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        badge={badge}
+        accessibilityLabel={"Job Button"}
+      />,
+    );
+    expect(getByText("Hi")).toBeDefined();
+  });
+
+  it("should render IconButton with custom color", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        customColor="#f33323"
+        accessibilityLabel={"Job Button"}
+      />,
+    );
+    const iconBtnColorProp = getByLabelText("Job Button").findByProps({
+      customColor: "#f33323",
+    }).props.customColor;
+
+    expect(iconBtnColorProp).toEqual("#f33323");
+  });
+
+  it("should expose testID", () => {
+    const pressHandler = jest.fn();
+    const testID = "JobButton";
+    const { getByTestId } = render(
+      <IconButton
+        onPress={pressHandler}
+        name="job"
+        accessibilityLabel={"Job Button"}
+        testID={testID}
+      />,
+    );
+    fireEvent.press(getByTestId(testID));
+    expect(pressHandler).toHaveBeenCalled();
+  });
+});

package/src/IconButton/IconButton.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { IconColorNames, IconNames } from "@jobber/design";
+import { styles } from "./IconButton.style";
+import { Icon } from "../Icon";
+
+interface IconButtonProps {
+  /**
+   * Press handler
+   */
+  onPress?(): void;
+
+  /** The icon to show.  */
+  readonly name: IconNames;
+
+  /**
+   * Accessibilty label for the component. It's also used for testing
+   */
+  readonly accessibilityLabel: string;
+
+  /**
+   * Determines the color of the icon. If not specified, some icons have a default system colour
+   * like quotes, jobs, and invoices.
+   * Others that don't have a system colour fall back to greyBlue.
+   */
+  readonly color?: IconColorNames;
+
+  /**
+   * Sets a custom color for the icon. Can be a rgb() or hex value.
+   */
+  readonly customColor?: string;
+
+  /**
+   * a component that would render over the icon
+   * e.g. the number of notifications over the activity feed icon
+   */
+  readonly badge?: React.ReactNode;
+
+  /**
+   * Used to locate this button in tests
+   */
+  readonly testID?: string;
+}
+
+export function IconButton({
+  badge,
+  name,
+  color,
+  customColor,
+  onPress,
+  accessibilityLabel,
+  testID,
+}: IconButtonProps): JSX.Element {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={styles.container}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      testID={testID}
+    >
+      {badge}
+      <Icon name={name} color={color} customColor={customColor} />
+    </TouchableOpacity>
+  );
+}

package/src/IconButton/index.ts

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

package/src/index.ts

@@ -1,17 +1,18 @@
-export * from "./Icon";
-export * from "./Divider";
-export * from "./Typography";
-export * from "./Text";
-export * from "./ErrorMessageWrapper";
+export * from "./ActionItem";
 export * from "./ActionLabel";
-export * from "./Content";
 export * from "./ActivityIndicator";
-export * from "./Card";
-export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
+export * from "./Card";
+export * from "./Chip";
+export * from "./Content";
+export * from "./Divider";
+export * from "./ErrorMessageWrapper";
+export * from "./Heading";
+export * from "./Icon";
+export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./ProgressBar";
-export * from "./Heading";
-export * from "./Chip";
-export * from "./ActionItem";
+export * from "./StatusLabel";
+export * from "./Text";
+export * from "./Typography";