@jobber/components-native 0.7.0 → 0.9.0

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}`] },
+      ]}
+    />
+  );
+}

package/src/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap

@@ -0,0 +1,554 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusLabel alignment when alignment prop set to "end" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+        "flexWrap": "nowrap",
+        "justifyContent": "flex-end",
+      },
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexShrink": 1,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      adjustsFontSizeToFit={false}
+      allowFontScaling={true}
+      collapsable={false}
+      maxFontSizeMultiplier={1.1428571428571428}
+      selectable={true}
+      selectionColor="rgb(160, 215, 42)"
+      style={
+        [
+          {
+            "fontFamily": "inter-medium",
+          },
+          {
+            "color": "rgba(101, 120, 132, 1)",
+          },
+          {
+            "textAlign": "right",
+          },
+          {
+            "fontSize": 14,
+            "lineHeight": 18,
+          },
+          {
+            "letterSpacing": 0,
+          },
+        ]
+      }
+    >
+      End Aligned
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+          "borderRadius": 2,
+          "height": 12,
+          "marginTop": 3,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+        },
+      ]
+    }
+    testID="successLabelIcon"
+  />
+</View>
+`;
+
+exports[`StatusLabel alignment when alignment prop set to default ("start") should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+        "flexWrap": "nowrap",
+        "justifyContent": "flex-end",
+      },
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexShrink": 1,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      adjustsFontSizeToFit={false}
+      allowFontScaling={true}
+      collapsable={false}
+      maxFontSizeMultiplier={1.1428571428571428}
+      selectable={true}
+      selectionColor="rgb(160, 215, 42)"
+      style={
+        [
+          {
+            "fontFamily": "inter-medium",
+          },
+          {
+            "color": "rgba(101, 120, 132, 1)",
+          },
+          {
+            "textAlign": "right",
+          },
+          {
+            "fontSize": 14,
+            "lineHeight": 18,
+          },
+          {
+            "letterSpacing": 0,
+          },
+        ]
+      }
+    >
+      Start Aligned
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+          "borderRadius": 2,
+          "height": 12,
+          "marginTop": 3,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+        },
+      ]
+    }
+    testID="successLabelIcon"
+  />
+</View>
+`;
+
+exports[`StatusLabel status when status prop set to "critical" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+        "flexWrap": "nowrap",
+        "justifyContent": "flex-end",
+      },
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexShrink": 1,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      adjustsFontSizeToFit={false}
+      allowFontScaling={true}
+      collapsable={false}
+      maxFontSizeMultiplier={1.1428571428571428}
+      selectable={true}
+      selectionColor="rgb(160, 215, 42)"
+      style={
+        [
+          {
+            "fontFamily": "inter-medium",
+          },
+          {
+            "color": "rgba(101, 120, 132, 1)",
+          },
+          {
+            "textAlign": "right",
+          },
+          {
+            "fontSize": 14,
+            "lineHeight": 18,
+          },
+          {
+            "letterSpacing": 0,
+          },
+        ]
+      }
+    >
+      Critical
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+          "borderRadius": 2,
+          "height": 12,
+          "marginTop": 3,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "rgb(201, 66, 33)",
+        },
+      ]
+    }
+    testID="criticalLabelIcon"
+  />
+</View>
+`;
+
+exports[`StatusLabel status when status prop set to "inactive" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+        "flexWrap": "nowrap",
+        "justifyContent": "flex-end",
+      },
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexShrink": 1,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      adjustsFontSizeToFit={false}
+      allowFontScaling={true}
+      collapsable={false}
+      maxFontSizeMultiplier={1.1428571428571428}
+      selectable={true}
+      selectionColor="rgb(160, 215, 42)"
+      style={
+        [
+          {
+            "fontFamily": "inter-medium",
+          },
+          {
+            "color": "rgba(101, 120, 132, 1)",
+          },
+          {
+            "textAlign": "right",
+          },
+          {
+            "fontSize": 14,
+            "lineHeight": 18,
+          },
+          {
+            "letterSpacing": 0,
+          },
+        ]
+      }
+    >
+      Inactive
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+          "borderRadius": 2,
+          "height": 12,
+          "marginTop": 3,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "rgb(77, 105, 116)",
+        },
+      ]
+    }
+    testID="inactiveLabelIcon"
+  />
+</View>
+`;
+
+exports[`StatusLabel status when status prop set to "informative" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+        "flexWrap": "nowrap",
+        "justifyContent": "flex-end",
+      },
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexShrink": 1,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      adjustsFontSizeToFit={false}
+      allowFontScaling={true}
+      collapsable={false}
+      maxFontSizeMultiplier={1.1428571428571428}
+      selectable={true}
+      selectionColor="rgb(160, 215, 42)"
+      style={
+        [
+          {
+            "fontFamily": "inter-medium",
+          },
+          {
+            "color": "rgba(101, 120, 132, 1)",
+          },
+          {
+            "textAlign": "right",
+          },
+          {
+            "fontSize": 14,
+            "lineHeight": 18,
+          },
+          {
+            "letterSpacing": 0,
+          },
+        ]
+      }
+    >
+      Informative
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+          "borderRadius": 2,
+          "height": 12,
+          "marginTop": 3,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "rgb(60, 162, 224)",
+        },
+      ]
+    }
+    testID="informativeLabelIcon"
+  />
+</View>
+`;
+
+exports[`StatusLabel status when status prop set to "warning" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+        "flexWrap": "nowrap",
+        "justifyContent": "flex-end",
+      },
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexShrink": 1,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      adjustsFontSizeToFit={false}
+      allowFontScaling={true}
+      collapsable={false}
+      maxFontSizeMultiplier={1.1428571428571428}
+      selectable={true}
+      selectionColor="rgb(160, 215, 42)"
+      style={
+        [
+          {
+            "fontFamily": "inter-medium",
+          },
+          {
+            "color": "rgba(101, 120, 132, 1)",
+          },
+          {
+            "textAlign": "right",
+          },
+          {
+            "fontSize": 14,
+            "lineHeight": 18,
+          },
+          {
+            "letterSpacing": 0,
+          },
+        ]
+      }
+    >
+      Warning
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+          "borderRadius": 2,
+          "height": 12,
+          "marginTop": 3,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "rgb(221, 195, 15)",
+        },
+      ]
+    }
+    testID="warningLabelIcon"
+  />
+</View>
+`;
+
+exports[`StatusLabel status when status prop set to default ("success") should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+        "flexWrap": "nowrap",
+        "justifyContent": "flex-end",
+      },
+      false,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexShrink": 1,
+      }
+    }
+  >
+    <Text
+      accessibilityRole="text"
+      adjustsFontSizeToFit={false}
+      allowFontScaling={true}
+      collapsable={false}
+      maxFontSizeMultiplier={1.1428571428571428}
+      selectable={true}
+      selectionColor="rgb(160, 215, 42)"
+      style={
+        [
+          {
+            "fontFamily": "inter-medium",
+          },
+          {
+            "color": "rgba(101, 120, 132, 1)",
+          },
+          {
+            "textAlign": "right",
+          },
+          {
+            "fontSize": 14,
+            "lineHeight": 18,
+          },
+          {
+            "letterSpacing": 0,
+          },
+        ]
+      }
+    >
+      Success
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "width": 8,
+      }
+    }
+  />
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+          "borderRadius": 2,
+          "height": 12,
+          "marginTop": 3,
+          "width": 12,
+        },
+        {
+          "backgroundColor": "rgb(125, 176, 14)",
+        },
+      ]
+    }
+    testID="successLabelIcon"
+  />
+</View>
+`;

package/src/StatusLabel/index.ts

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