@jobber/components-native 0.7.0 → 0.8.0

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
+export interface StatusLabelType {
+    readonly statusLabel: string;
+    readonly statusType?: StatusType;
+}
+interface StatusLabelProps {
+    /**
+     * Text to display.
+     */
+    readonly text: string;
+    /**
+     * Alignment of text
+     */
+    readonly alignment?: "start" | "end";
+    /**
+     * Status color of the square beside text
+     */
+    readonly status?: StatusType;
+}
+export declare function StatusLabel({ text, alignment, status, }: StatusLabelProps): JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+export declare const styles: {
+    statusLabelRow: {
+        flexDirection: "row";
+        justifyContent: "flex-end";
+        flexWrap: "nowrap";
+    };
+    statusLabelText: {
+        flexShrink: number;
+    };
+    statusLabelIcon: {
+        borderRadius: number;
+        backgroundColor: string;
+        width: number;
+        height: number;
+        marginTop: number;
+    };
+    labelTextStartAligned: {
+        flexDirection: "row-reverse";
+    };
+    innerPad: {
+        width: number;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { StatusLabel } from "./StatusLabel";
+export type { StatusType, StatusLabelType } from "./StatusLabel";

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

@@ -1,4 +1,10 @@
 import { TextStyle } from "react-native";
+/**
+ * Reusable typography tokens to ensure consistency for any client facing texts.
+ */
+export declare const typographyTokens: {
+    [index: string]: TextStyle;
+};
 /**
  * `StyleSheet` for Typography.tsx.
  *
@@ -9,12 +15,6 @@ import { TextStyle } from "react-native";
  * import { typographyStyles } from "@jobber/components-native"
  * ```
  */
-/**
- * Reusable typography tokens to ensure consistency for any client facing texts.
- */
-export declare const typographyTokens: {
-    [index: string]: TextStyle;
-};
 export declare const typographyStyles: {
     [index: string]: TextStyle;
 };

package/dist/types/src/Typography/webFonts.d.ts

@@ -0,0 +1,4 @@
+import { TextStyle } from "react-native";
+export declare const webFonts: {
+    [index: string]: TextStyle;
+};

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

@@ -6,4 +6,5 @@ export * from "./ErrorMessageWrapper";
 export * from "./ActionLabel";
 export * from "./Content";
 export * from "./ActivityIndicator";
+export * from "./StatusLabel";
 export * from "./AtlantisContext";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -44,5 +44,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "d4d0fe8b51c3f1a1bbbc5f221bd64fc90dc6a3cd"
+  "gitHead": "098e6c092be15121c96d37b3f959a05ea06c9e1d"
 }

package/src/StatusLabel/StatusLabel.style.ts

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const statusLabelIconDiameter = tokens["space-base"] - tokens["space-smaller"]; //12px
+
+const indicatorOffset = tokens["space-smallest"] + tokens["space-minuscule"];
+
+export const styles = StyleSheet.create({
+  statusLabelRow: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    flexWrap: "nowrap",
+  },
+  statusLabelText: {
+    flexShrink: 1,
+  },
+  statusLabelIcon: {
+    borderRadius: tokens["radius-base"],
+    backgroundColor: tokens["color-success"],
+    width: statusLabelIconDiameter,
+    height: statusLabelIconDiameter,
+    marginTop: indicatorOffset,
+  },
+  labelTextStartAligned: {
+    flexDirection: "row-reverse",
+  },
+  innerPad: {
+    width: tokens["space-small"],
+  },
+});

package/src/StatusLabel/StatusLabel.test.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { StatusLabel } from "./StatusLabel";
+
+describe("StatusLabel", () => {
+  describe("alignment", () => {
+    describe('when alignment prop set to default ("start")', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusLabel text="Start Aligned" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when alignment prop set to "end"', () => {
+      it("should match snapshot", () => {
+        const view = render(
+          <StatusLabel text="End Aligned" alignment="end" />,
+        ).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe("status", () => {
+    describe('when status prop set to default ("success")', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusLabel text="Success" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "warning"', () => {
+      it("should match snapshot", () => {
+        const view = render(
+          <StatusLabel text="Warning" status="warning" />,
+        ).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "critical"', () => {
+      it("should match snapshot", () => {
+        const view = render(
+          <StatusLabel text="Critical" status="critical" />,
+        ).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "inactive"', () => {
+      it("should match snapshot", () => {
+        const view = render(
+          <StatusLabel text="Inactive" status="inactive" />,
+        ).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "informative"', () => {
+      it("should match snapshot", () => {
+        const view = render(
+          <StatusLabel text="Informative" status="informative" />,
+        ).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+  });
+});

package/src/StatusLabel/StatusLabel.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./StatusLabel.style";
+import { tokens } from "../utils/design";
+import { Text } from "../Text";
+
+export type StatusType =
+  | "success"
+  | "warning"
+  | "critical"
+  | "inactive"
+  | "informative";
+
+export interface StatusLabelType {
+  readonly statusLabel: string;
+  readonly statusType?: StatusType;
+}
+
+interface StatusLabelProps {
+  /**
+   * Text to display.
+   */
+  readonly text: string;
+
+  /**
+   * Alignment of text
+   */
+  readonly alignment?: "start" | "end";
+
+  /**
+   * Status color of the square beside text
+   */
+  readonly status?: StatusType;
+}
+
+export function StatusLabel({
+  text,
+  alignment = "end",
+  status = "success",
+}: StatusLabelProps): JSX.Element {
+  return (
+    <View
+      style={[
+        styles.statusLabelRow,
+        alignment === "start" && styles.labelTextStartAligned,
+      ]}
+    >
+      <View style={styles.statusLabelText}>
+        <Text align={alignment} level="textSupporting" variation="subdued">
+          {text}
+        </Text>
+      </View>
+      <View style={styles.innerPad} />
+      <StatusLabelIcon status={status} />
+    </View>
+  );
+}
+
+interface StatusLabelIconProps {
+  status: StatusType;
+}
+
+function StatusLabelIcon({ status }: StatusLabelIconProps) {
+  return (
+    <View
+      testID={`${status}LabelIcon`}
+      style={[
+        styles.statusLabelIcon,
+        { backgroundColor: tokens[`color-${status}`] },
+      ]}
+    />
+  );
+}