@jobber/components-native 0.7.0 → 0.8.0

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";

package/src/Typography/Typography.style.ts

@@ -1,4 +1,5 @@
-import { StyleSheet, TextStyle } from "react-native";
+import { Platform, StyleSheet, TextStyle } from "react-native";
+import { webFonts } from "./webFonts";
 import { tokens } from "../utils/design";
 
 const extravagantLineHeight = tokens["typography--lineHeight-extravagant"];
@@ -10,23 +11,7 @@ const baseLineHeight = tokens["typography--lineHeight-base"];
 const tightLineHeight = tokens["typography--lineHeight-tight"];
 const minisculeLineHeight = tokens["typography--lineHeight-miniscule"];
 
-/**
- * `StyleSheet` for Typography.tsx.
- *
- * If you find yourself needing to use what's inside this object on files other
- * than `<Typography />`, please import from `@jobber/components-native` instead.
- *
- * ```
- * import { typographyStyles } from "@jobber/components-native"
- * ```
- */
-
-/**
- * Reusable typography tokens to ensure consistency for any client facing texts.
- */
-export const typographyTokens: { [index: string]: TextStyle } = {
-  // This follows a pattern of
-  // { fontFamily }{ fontStyle }{ fontWeight }
+const deviceFonts = {
   baseRegularRegular: {
     fontFamily: "inter-regular",
   },
@@ -58,6 +43,26 @@ export const typographyTokens: { [index: string]: TextStyle } = {
   displayRegularBlack: {
     fontFamily: "jobberpro-blk",
   },
+};
+
+/**
+ * We need to use web fonts for rendering Typography on Storybook
+ * because it uses font files (.ttf) to render them on devices.
+ * As we don't want to expose the font files, we are setting the fonts
+ * in CSS.
+ */
+const fonts = Platform.select({
+  web: webFonts,
+  default: deviceFonts,
+});
+
+/**
+ * Reusable typography tokens to ensure consistency for any client facing texts.
+ */
+export const typographyTokens: { [index: string]: TextStyle } = {
+  // This follows a pattern of
+  // { fontFamily }{ fontStyle }{ fontWeight }
+  ...fonts,
 
   startAlign: {
     textAlign: "left",
@@ -360,5 +365,15 @@ export const typographyTokens: { [index: string]: TextStyle } = {
   },
 };
 
+/**
+ * `StyleSheet` for Typography.tsx.
+ *
+ * If you find yourself needing to use what's inside this object on files other
+ * than `<Typography />`, please import from `@jobber/components-native` instead.
+ *
+ * ```
+ * import { typographyStyles } from "@jobber/components-native"
+ * ```
+ */
 export const typographyStyles: { [index: string]: TextStyle } =
   StyleSheet.create(typographyTokens);

package/src/Typography/webFonts.ts

@@ -0,0 +1,43 @@
+import { TextStyle } from "react-native";
+
+export const webFonts: { [index: string]: TextStyle } = {
+  baseRegularRegular: {
+    fontFamily: "'Inter', Helvetica, Arial, sans-serif",
+    fontWeight: "400",
+  },
+
+  baseRegularMedium: {
+    fontFamily: "'Inter', Helvetica, Arial, sans-serif",
+    fontWeight: "500",
+  },
+
+  baseRegularSemiBold: {
+    fontFamily: "'Inter', Helvetica, Arial, sans-serif",
+    fontWeight: "600",
+  },
+
+  baseRegularBold: {
+    fontFamily: "'Inter', Helvetica, Arial, sans-serif",
+    fontWeight: "700",
+  },
+
+  baseRegularExtraBold: {
+    fontFamily: "'Inter', Helvetica, Arial, sans-serif",
+    fontWeight: "800",
+  },
+
+  displayRegularBold: {
+    fontFamily: "'Jobber Pro', 'Poppins', Helvetica, Arial, sans-serif",
+    fontWeight: "700",
+  },
+
+  displayRegularExtraBold: {
+    fontFamily: "'Jobber Pro', 'Poppins', Helvetica, Arial, sans-serif",
+    fontWeight: "800",
+  },
+
+  displayRegularBlack: {
+    fontFamily: "'Jobber Pro', 'Poppins', Helvetica, Arial, sans-serif",
+    fontWeight: "900",
+  },
+};

package/src/index.ts

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