@jobber/components-native 0.8.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/index.js

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