@jobber/components-native 0.3.0 → 0.5.0

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { TextAlign, TextColor } from "../Typography";
+export type ActionLabelVariation = Extract<TextColor, "interactive" | "destructive" | "learning" | "subtle" | "onPrimary">;
+type ActionLabelType = "default" | "cardTitle";
+interface ActionLabelProps {
+    /**
+     * Text to display
+     */
+    readonly children?: string;
+    /**
+     * Set the display text to disabled color
+     */
+    readonly disabled?: boolean;
+    /**
+     * The text color
+     */
+    readonly variation?: ActionLabelVariation;
+    /**
+     * Changes the appearance to match the style of where it's getting used
+     */
+    readonly type?: ActionLabelType;
+    /**
+     * Alignment of action label
+     */
+    readonly align?: TextAlign;
+}
+export declare function ActionLabel({ children, variation, type, disabled, align, }: ActionLabelProps): JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ActivityIndicatorProps } from "react-native";
+export declare function JobberActivityIndicator(props: ActivityIndicatorProps): JSX.Element;

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

@@ -0,0 +1 @@
+export { JobberActivityIndicator as ActivityIndicator } from "./ActivityIndicator";

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export type Spacing = "none" | "base" | "small" | "smaller" | "smallest" | "large";
+export interface ContentProps {
+    /**
+     * The child or children that will be given spacing.
+     */
+    readonly children: ReactNode;
+    /**
+     * The amount of spacing that content will give.
+     */
+    readonly spacing?: Spacing;
+    /**
+     * The amount of spacing that will be applied between children.
+     */
+    readonly childSpacing?: Spacing;
+    readonly direction?: "horizontal" | "vertical";
+}
+export declare function Content({ children, spacing, childSpacing, direction, }: ContentProps): JSX.Element;

package/dist/types/src/Content/ContentHorizontal.style.d.ts

@@ -0,0 +1,28 @@
+export declare const horizontalStyles: {
+    wrapper: {
+        flexDirection: "row";
+    };
+    childWrapper: {
+        flexGrow: number;
+        flexShrink: number;
+        flexBasis: number;
+    };
+    noneChildSpace: {
+        padding: number;
+    };
+    smallestChildSpace: {
+        paddingLeft: number;
+    };
+    smallerChildSpace: {
+        paddingLeft: number;
+    };
+    smallChildSpace: {
+        paddingLeft: number;
+    };
+    baseChildSpace: {
+        paddingLeft: number;
+    };
+    largeChildSpace: {
+        paddingLeft: number;
+    };
+};

package/dist/types/src/Content/ContentSpaceAround.style.d.ts

@@ -0,0 +1,20 @@
+export declare const spaceStyles: {
+    noneSpace: {
+        padding: number;
+    };
+    smallestSpace: {
+        padding: number;
+    };
+    smallerSpace: {
+        padding: number;
+    };
+    smallSpace: {
+        padding: number;
+    };
+    baseSpace: {
+        padding: number;
+    };
+    largeSpace: {
+        padding: number;
+    };
+};

package/dist/types/src/Content/ContentVertical.style.d.ts

@@ -0,0 +1,22 @@
+export declare const verticalStyles: {
+    wrapper: {};
+    childWrapper: {};
+    noneChildSpace: {
+        padding: number;
+    };
+    smallestChildSpace: {
+        paddingTop: number;
+    };
+    smallerChildSpace: {
+        paddingTop: number;
+    };
+    smallChildSpace: {
+        paddingTop: number;
+    };
+    baseChildSpace: {
+        paddingTop: number;
+    };
+    largeChildSpace: {
+        paddingTop: number;
+    };
+};

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

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

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

@@ -2,3 +2,6 @@ export * from "./Icon";
 export * from "./Divider";
 export * from "./Typography";
 export * from "./Text";
+export * from "./ActionLabel";
+export * from "./Content";
+export * from "./ActivityIndicator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -32,6 +32,7 @@
     "@types/react": "^18.0.28",
     "@types/react-native": "^0.71.6",
     "metro-react-native-babel-preset": "^0.76.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
@@ -39,5 +40,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "ee03002fcb4de15bd75bfe817698ad95c2feae7a"
+  "gitHead": "28a0933c17617009875afd1895e58131f5036337"
 }

package/src/ActionLabel/ActionLabel.test.tsx

@@ -0,0 +1,129 @@
+import React, { CSSProperties } from "react";
+import { render } from "@testing-library/react-native";
+import { ReactTestInstance } from "react-test-renderer";
+import { ActionLabel } from "./ActionLabel";
+import { tokens } from "../utils/design";
+
+const defaultStyles = {
+  fontFamily: "inter-extrabold",
+  color: tokens["color-interactive"],
+  textAlign: "center",
+  fontSize: tokens["typography--fontSize-base"],
+  lineHeight: tokens["typography--lineHeight-tight"],
+  letterSpacing: tokens["typography--letterSpacing-loose"],
+};
+
+describe("ActionLabel", () => {
+  it("renders the default action label", () => {
+    const text = "Default Action Label";
+    const { getByText } = render(<ActionLabel>{text}</ActionLabel>);
+
+    const el = getByText(text);
+    expect(el).toBeDefined();
+    expect(getStyleObject(el)).toMatchObject(defaultStyles);
+  });
+
+  describe("Variations", () => {
+    it("renders a destructive variation", () => {
+      const text = "Destructive Action Label";
+      const { getByText } = render(
+        <ActionLabel variation="destructive">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-destructive"],
+      });
+    });
+
+    it("renders a learning variation", () => {
+      const text = "Learning Action Label";
+      const { getByText } = render(
+        <ActionLabel variation="learning">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-informative"],
+      });
+    });
+
+    it("renders a subtle variation", () => {
+      const text = "Subtle Action Label";
+      const { getByText } = render(
+        <ActionLabel variation="subtle">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-interactive--subtle"],
+      });
+    });
+
+    it("renders an onPrimary variation", () => {
+      const text = "onPrimary Action Label";
+      const { getByText } = render(
+        <ActionLabel variation="onPrimary">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-surface"],
+      });
+    });
+  });
+
+  describe("when action label is disabled", () => {
+    it("renders text with disabled color, overriding variation", () => {
+      const text = "Disabled Action Label";
+      const { getByText } = render(
+        <ActionLabel disabled variation="destructive">
+          {text}
+        </ActionLabel>,
+      );
+
+      const styles = getStyleObject(getByText(text));
+      expect(styles).toMatchObject({
+        ...defaultStyles,
+        color: tokens["color-disabled"],
+      });
+      expect(styles).not.toHaveProperty("color", tokens["color-destructive"]);
+    });
+  });
+
+  describe("when action label is aligned", () => {
+    it("renders text with left alignment", () => {
+      const text = "Left Aligned Action Label";
+      const { getByText } = render(
+        <ActionLabel align="start">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        textAlign: "left",
+      });
+    });
+
+    it("renders text with right alignment", () => {
+      const text = "Right Aligned Action Label";
+      const { getByText } = render(
+        <ActionLabel align="end">{text}</ActionLabel>,
+      );
+
+      expect(getStyleObject(getByText(text))).toMatchObject({
+        ...defaultStyles,
+        textAlign: "right",
+      });
+    });
+  });
+});
+
+function getStyleObject(el: ReactTestInstance) {
+  return el.props.style.reduce(
+    (mergedStyles: CSSProperties, additionalStyles: CSSProperties) => ({
+      ...mergedStyles,
+      ...additionalStyles,
+    }),
+    {},
+  );
+}

package/src/ActionLabel/ActionLabel.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { tokens } from "../utils/design";
+import { TextAlign, TextColor, Typography } from "../Typography";
+
+export type ActionLabelVariation = Extract<
+  TextColor,
+  "interactive" | "destructive" | "learning" | "subtle" | "onPrimary"
+>;
+
+type ActionLabelType = "default" | "cardTitle";
+
+interface ActionLabelProps {
+  /**
+   * Text to display
+   */
+  readonly children?: string;
+
+  /**
+   * Set the display text to disabled color
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * The text color
+   */
+  readonly variation?: ActionLabelVariation;
+
+  /**
+   * Changes the appearance to match the style of where it's getting used
+   */
+  readonly type?: ActionLabelType;
+
+  /**
+   * Alignment of action label
+   */
+  readonly align?: TextAlign;
+}
+
+export function ActionLabel({
+  children,
+  variation = "interactive",
+  type = "default",
+  disabled = false,
+  align = "center",
+}: ActionLabelProps): JSX.Element {
+  return (
+    <Typography
+      color={getColor(variation, disabled)}
+      fontFamily="base"
+      size="default"
+      fontWeight={getFontWeight(type)}
+      align={align}
+      lineHeight="tight"
+      letterSpacing={getLetterSpacing(type)}
+      maxFontScaleSize={tokens["typography--fontSize-large"]}
+      selectable={false}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+function getColor(variation: ActionLabelVariation, disabled: boolean) {
+  if (disabled) {
+    return "disabled";
+  }
+  if (variation) {
+    return variation;
+  }
+
+  return "interactive";
+}
+
+function getFontWeight(type: ActionLabelType) {
+  if (type === "cardTitle") {
+    return "bold";
+  }
+
+  return "extraBold";
+}
+
+function getLetterSpacing(type: ActionLabelType) {
+  if (type === "cardTitle") {
+    return "base";
+  }
+
+  return "loose";
+}

package/src/ActionLabel/index.ts

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

package/src/ActivityIndicator/ActivityIndicator.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ActivityIndicator } from "./index";
+import { tokens } from "../utils/design";
+
+const testId = "ActivityIndicator";
+describe("ActivityIndicator", () => {
+  it("renders with the default color when no props are provided", () => {
+    const { getByTestId } = render(<ActivityIndicator />);
+    expect(getByTestId(testId).props.color).toBe(tokens["color-greyBlue"]);
+  });
+
+  it("renders with a custom color", () => {
+    const color = "red";
+    const { getByTestId } = render(<ActivityIndicator color={color} />);
+    expect(getByTestId(testId).props.color).toBe(color);
+  });
+
+  it("renders with large size", () => {
+    const size = "large";
+    const color = "red";
+    const { getByTestId } = render(
+      <ActivityIndicator color={color} size={size} />,
+    );
+    expect(getByTestId(testId).props.size).toBe(size);
+    expect(getByTestId(testId).props.color).toBe(color);
+  });
+});

package/src/ActivityIndicator/ActivityIndicator.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { ActivityIndicator, ActivityIndicatorProps } from "react-native";
+import { tokens } from "../utils/design";
+
+export function JobberActivityIndicator(
+  props: ActivityIndicatorProps,
+): JSX.Element {
+  return (
+    <ActivityIndicator
+      {...props}
+      color={props.color || tokens["color-greyBlue"]}
+      testID={props.testID || "ActivityIndicator"}
+    />
+  );
+}

package/src/ActivityIndicator/index.ts

@@ -0,0 +1 @@
+export { JobberActivityIndicator as ActivityIndicator } from "./ActivityIndicator";