@jobber/components-native 0.7.0 → 0.9.0

package/dist/src/Card/Card.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Pressable, View, } from "react-native";
+import { styles } from "./Card.style";
+// eslint-disable-next-line import/no-internal-modules
+import { InternalCardHeader } from "./components/InternalCardHeader";
+import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
+import { ActionLabel } from "../ActionLabel";
+import { Typography } from "../Typography";
+import { Icon } from "../Icon";
+function getElevationStyle(elevation) {
+    if (elevation === "none") {
+        return undefined;
+    }
+    return styles[`${elevation}Elevation`];
+}
+export function Card({ header, footer, children, reportCardHeight: onCardHeightChange, testID = "card", error, elevation = "none", }) {
+    var _a, _b;
+    return (React.createElement(ErrorMessageWrapper, { message: error, wrapFor: "card" },
+        React.createElement(View, { onLayout: handleLayoutChange, style: [styles.container, getElevationStyle(elevation)], testID: testID },
+            header && (React.createElement(React.Fragment, null,
+                React.createElement(InternalCardHeader, { onPress: header.onPress, testID: `${testID}Header`, collapsable: !!children },
+                    React.createElement(View, { style: styles.headerTitle },
+                        React.createElement(Typography, { color: "heading", fontFamily: "base", fontWeight: "bold", size: "default", lineHeight: "base", accessibilityRole: "header" }, header.title)),
+                    React.createElement(View, { style: styles.actionItem },
+                        !!((_a = header.actionItem) === null || _a === void 0 ? void 0 : _a.label) && (React.createElement(View, { style: styles.actionLabel },
+                            React.createElement(ActionLabel, { type: "cardTitle" }, header.actionItem.label))),
+                        ((_b = header.actionItem) === null || _b === void 0 ? void 0 : _b.iconName) && (React.createElement(Icon, { name: header.actionItem.iconName, color: "interactive" })))))),
+            children,
+            footer && (React.createElement(Pressable, { testID: `${testID}Footer`, onPress: footer.onPress, style: ({ pressed }) => [
+                    styles.footer,
+                    pressed && styles.pressed,
+                ], accessibilityRole: "button" },
+                React.createElement(ActionLabel, null, footer.title))))));
+    function handleLayoutChange(event) {
+        const { height } = event.nativeEvent.layout;
+        onCardHeightChange === null || onCardHeightChange === void 0 ? void 0 : onCardHeightChange(height);
+    }
+}

package/dist/src/Card/Card.style.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        backgroundColor: tokens["color-surface"],
+    },
+    lowElevation: Object.assign({}, tokens["shadow-low"]),
+    baseElevation: Object.assign({}, tokens["shadow-base"]),
+    highElevation: Object.assign({}, tokens["shadow-high"]),
+    headerTitle: {
+        flexGrow: 1,
+        flex: 1,
+    },
+    footer: {
+        height: tokens["space-largest"],
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    pressed: {
+        opacity: tokens["opacity-pressed"],
+    },
+    actionItem: {
+        height: tokens["typography--lineHeight-base"],
+        justifyContent: "center",
+    },
+    actionLabel: {
+        paddingTop: tokens["space-smallest"],
+    },
+});

package/dist/src/Card/components/InternalCardHeader.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./InternalCardHeader.style";
+export function InternalCardHeader({ onPress, children, testID, collapsable, }) {
+    const conditionalChildStyling = collapsable ? undefined : styles.noChildren;
+    if (onPress) {
+        return (React.createElement(Pressable, { testID: testID, onPress: onPress, style: ({ pressed }) => [
+                styles.header,
+                pressed && styles.pressed,
+                conditionalChildStyling,
+            ], accessibilityRole: "button" }, children));
+    }
+    return (React.createElement(View, { testID: testID, style: [styles.header, conditionalChildStyling] }, children));
+}

package/dist/src/Card/components/InternalCardHeader.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+export const styles = StyleSheet.create({
+    header: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        paddingTop: tokens["space-small"] + tokens["space-smaller"],
+        paddingHorizontal: tokens["space-base"],
+    },
+    pressed: {
+        opacity: tokens["opacity-pressed"],
+    },
+    noChildren: {
+        paddingBottom: tokens["space-small"] + tokens["space-smaller"],
+    },
+});

package/dist/src/Card/components/index.js

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

package/dist/src/Card/index.js

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

package/dist/src/StatusLabel/StatusLabel.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./StatusLabel.style";
+import { tokens } from "../utils/design";
+import { Text } from "../Text";
+export function StatusLabel({ text, alignment = "end", status = "success", }) {
+    return (React.createElement(View, { style: [
+            styles.statusLabelRow,
+            alignment === "start" && styles.labelTextStartAligned,
+        ] },
+        React.createElement(View, { style: styles.statusLabelText },
+            React.createElement(Text, { align: alignment, level: "textSupporting", variation: "subdued" }, text)),
+        React.createElement(View, { style: styles.innerPad }),
+        React.createElement(StatusLabelIcon, { status: status })));
+}
+function StatusLabelIcon({ status }) {
+    return (React.createElement(View, { testID: `${status}LabelIcon`, style: [
+            styles.statusLabelIcon,
+            { backgroundColor: tokens[`color-${status}`] },
+        ] }));
+}

package/dist/src/StatusLabel/StatusLabel.style.js

@@ -0,0 +1,27 @@
+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/dist/src/StatusLabel/index.js

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

package/dist/src/Typography/Typography.style.js

@@ -1,4 +1,5 @@
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
+import { webFonts } from "./webFonts";
 import { tokens } from "../utils/design";
 const extravagantLineHeight = tokens["typography--lineHeight-extravagant"];
 const jumboLineHeight = tokens["typography--lineHeight-jumbo"];
@@ -8,22 +9,7 @@ const largeLineHeight = tokens["typography--lineHeight-large"];
 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 = {
-    // This follows a pattern of
-    // { fontFamily }{ fontStyle }{ fontWeight }
+const deviceFonts = {
     baseRegularRegular: {
         fontFamily: "inter-regular",
     },
@@ -48,233 +34,184 @@ export const typographyTokens = {
     displayRegularBlack: {
         fontFamily: "jobberpro-blk",
     },
-    startAlign: {
+};
+/**
+ * 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 = Object.assign(Object.assign({}, fonts), { startAlign: {
         textAlign: "left",
-    },
-    endAlign: {
+    }, endAlign: {
         textAlign: "right",
-    },
-    centerAlign: {
+    }, centerAlign: {
         textAlign: "center",
-    },
-    justifyAlign: {
+    }, justifyAlign: {
         textAlign: "justify",
-    },
-    blue: {
+    }, blue: {
         color: tokens["color-heading"],
-    },
-    blueDark: {
+    }, blueDark: {
         color: tokens["color-blue--dark"],
-    },
-    white: {
+    }, white: {
         color: tokens["color-white"],
-    },
-    green: {
+    }, green: {
         color: tokens["color-green"],
-    },
-    greenDark: {
+    }, greenDark: {
         color: tokens["color-green--dark"],
-    },
-    grey: {
+    }, grey: {
         color: tokens["color-grey"],
-    },
-    greyDark: {
+    }, greyDark: {
         color: tokens["color-grey--dark"],
-    },
-    greyBlue: {
+    }, greyBlue: {
         color: tokens["color-greyBlue"],
-    },
-    greyBlueDark: {
+    }, greyBlueDark: {
         color: tokens["color-greyBlue--dark"],
-    },
-    lightBlue: {
+    }, lightBlue: {
         color: tokens["color-lightBlue"],
-    },
-    lightBlueDark: {
+    }, lightBlueDark: {
         color: tokens["color-lightBlue--dark"],
-    },
-    red: {
+    }, red: {
         color: tokens["color-red"],
-    },
-    redDark: {
+    }, redDark: {
         color: tokens["color-red--dark"],
-    },
-    yellow: {
+    }, yellow: {
         color: tokens["color-yellow"],
-    },
-    yellowDark: {
+    }, yellowDark: {
         color: tokens["color-yellow--dark"],
-    },
-    yellowGreenDark: {
+    }, yellowGreenDark: {
         color: tokens["color-yellowGreen--dark"],
-    },
-    orangeDark: {
+    }, orangeDark: {
         color: tokens["color-orange--dark"],
-    },
-    navyDark: {
+    }, navyDark: {
         color: tokens["color-navy--dark"],
-    },
-    limeDark: {
+    }, limeDark: {
         color: tokens["color-lime--dark"],
-    },
-    purpleDark: {
+    }, purpleDark: {
         color: tokens["color-purple--dark"],
-    },
-    pinkDark: {
+    }, pinkDark: {
         color: tokens["color-pink--dark"],
-    },
-    tealDark: {
+    }, tealDark: {
         color: tokens["color-teal--dark"],
-    },
-    indigoDark: {
+    }, indigoDark: {
         color: tokens["color-indigo--dark"],
-    },
-    navy: {
+    }, navy: {
         color: tokens["color-navy"],
-    },
-    heading: {
+    }, heading: {
         color: tokens["color-heading"],
-    },
-    headingReverse: {
+    }, headingReverse: {
         color: tokens["color-text--reverse"],
-    },
-    text: {
+    }, text: {
         color: tokens["color-text"],
-    },
-    textSecondary: {
+    }, textSecondary: {
         color: tokens["color-text--secondary"],
-    },
-    textReverse: {
+    }, textReverse: {
         color: tokens["color-text--reverse"],
-    },
-    textReverseSecondary: {
+    }, textReverseSecondary: {
         color: tokens["color-text--reverse--secondary"],
-    },
-    success: {
+    }, success: {
         color: tokens["color-success--onSurface"],
-    },
-    error: {
+    }, error: {
         color: tokens["color-critical"],
-    },
-    base: {
+    }, base: {
         color: tokens["color-text"],
-    },
-    subdued: {
+    }, subdued: {
         color: tokens["color-text--secondary"],
-    },
-    warn: {
+    }, warn: {
         color: tokens["color-warning--onSurface"],
-    },
-    info: {
+    }, info: {
         color: tokens["color-informative--onSurface"],
-    },
-    critical: {
+    }, critical: {
         color: tokens["color-critical"],
-    },
-    successReverse: {
+    }, successReverse: {
         color: tokens["color-success"],
-    },
-    errorReverse: {
+    }, errorReverse: {
         color: tokens["color-critical"],
-    },
-    baseReverse: {
+    }, baseReverse: {
         color: tokens["color-text--reverse"],
-    },
-    subduedReverse: {
+    }, subduedReverse: {
         color: tokens["color-text--reverse--secondary"],
-    },
-    warnReverse: {
+    }, warnReverse: {
         color: tokens["color-warning"],
-    },
-    infoReverse: {
+    }, infoReverse: {
         color: tokens["color-informative"],
-    },
-    criticalReverse: {
+    }, criticalReverse: {
         color: tokens["color-critical"],
-    },
-    interactive: {
+    }, interactive: {
         color: tokens["color-interactive"],
-    },
-    destructive: {
+    }, destructive: {
         color: tokens["color-destructive"],
-    },
-    learning: {
+    }, learning: {
         color: tokens["color-informative"],
-    },
-    subtle: {
+    }, subtle: {
         color: tokens["color-interactive--subtle"],
-    },
-    onPrimary: {
+    }, onPrimary: {
         color: tokens["color-surface"],
-    },
-    disabled: {
+    }, disabled: {
         color: tokens["color-disabled"],
-    },
-    smallestSize: {
+    }, smallestSize: {
         fontSize: tokens["typography--fontSize-smallest"],
         lineHeight: minisculeLineHeight,
-    },
-    smallerSize: {
+    }, smallerSize: {
         fontSize: tokens["typography--fontSize-smaller"],
         lineHeight: tightLineHeight,
-    },
-    smallSize: {
+    }, smallSize: {
         fontSize: tokens["typography--fontSize-small"],
         lineHeight: tightLineHeight,
-    },
-    defaultSize: {
+    }, defaultSize: {
         fontSize: tokens["typography--fontSize-base"],
         lineHeight: baseLineHeight,
-    },
-    largeSize: {
+    }, largeSize: {
         fontSize: tokens["typography--fontSize-large"],
         lineHeight: largeLineHeight,
-    },
-    largerSize: {
+    }, largerSize: {
         fontSize: tokens["typography--fontSize-larger"],
         lineHeight: largeLineHeight,
-    },
-    largestSize: {
+    }, largestSize: {
         fontSize: tokens["typography--fontSize-largest"],
         lineHeight: largerLineHeight,
-    },
-    jumboSize: {
+    }, jumboSize: {
         fontSize: tokens["typography--fontSize-jumbo"],
         lineHeight: jumboLineHeight,
-    },
-    extravagantSize: {
+    }, extravagantSize: {
         fontSize: tokens["typography--fontSize-extravagant"],
         lineHeight: extravagantLineHeight,
-    },
-    extravagantLineHeight: {
+    }, extravagantLineHeight: {
         lineHeight: extravagantLineHeight,
-    },
-    jumboLineHeight: {
+    }, jumboLineHeight: {
         lineHeight: jumboLineHeight,
-    },
-    largestLineHeight: {
+    }, largestLineHeight: {
         lineHeight: largestLineHeight,
-    },
-    largerLineHeight: {
+    }, largerLineHeight: {
         lineHeight: largerLineHeight,
-    },
-    largeLineHeight: {
+    }, largeLineHeight: {
         lineHeight: largeLineHeight,
-    },
-    baseLineHeight: {
+    }, baseLineHeight: {
         lineHeight: baseLineHeight,
-    },
-    tightLineHeight: {
+    }, tightLineHeight: {
         lineHeight: tightLineHeight,
-    },
-    baseLetterSpacing: {
+    }, baseLetterSpacing: {
         letterSpacing: tokens["typography--letterSpacing-base"],
-    },
-    looseLetterSpacing: {
+    }, looseLetterSpacing: {
         letterSpacing: tokens["typography--letterSpacing-loose"],
-    },
-    strikeThrough: {
+    }, strikeThrough: {
         textDecorationLine: "line-through",
-    },
-};
+    } });
+/**
+ * `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 = StyleSheet.create(typographyTokens);

package/dist/src/Typography/webFonts.js

@@ -0,0 +1,34 @@
+export const webFonts = {
+    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/dist/src/index.js

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