@jobber/components-native 0.14.0 → 0.15.0

package/dist/src/ActionItem/ActionItem.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ActionItem.style";
+import { ActionItemContainer } from "./components/ActionItemContainer";
+import { Typography } from "../Typography";
+import { Icon } from "../Icon";
+export function ActionItem({ title, icon, iconColor, children, actionIcon = "edit", actionIconColour = "interactive", actionIconAlignment = "center", onPress, testID = "actionItem", }) {
+    const actionIconStyle = {
+        justifyContent: actionIconAlignment,
+    };
+    const addIconOffset = icon || onPress ? styles.offsetForIcons : undefined;
+    const titlePadding = children ? styles.titlePadding : undefined;
+    return (React.createElement(ActionItemContainer, { onPress: onPress, testID: testID, title: title },
+        icon && (React.createElement(View, { style: styles.icon },
+            React.createElement(Icon, { name: icon, color: iconColor }))),
+        React.createElement(View, { style: [styles.content, addIconOffset] },
+            title && (React.createElement(View, { style: titlePadding },
+                React.createElement(Typography, { color: "heading", fontFamily: "base", fontWeight: "bold", size: "default", lineHeight: "base", accessibilityRole: "header" }, title))),
+            children),
+        onPress && (React.createElement(View, { style: [actionIconStyle, styles.actionIcon] },
+            React.createElement(Icon, { name: getActionIcon(actionIcon), color: getActionIconColour(actionIconColour) })))));
+}
+function getActionIconColour(actionIconColour) {
+    if (actionIconColour === "subtle") {
+        return "interactiveSubtle";
+    }
+    return actionIconColour;
+}
+function getActionIcon(icon) {
+    if (icon === "edit") {
+        return "arrowRight";
+    }
+    else if (icon === "editpencil") {
+        return "edit";
+    }
+    return icon;
+}

package/dist/src/ActionItem/ActionItem.style.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    actionItemHorizontalOffset: {
+        paddingHorizontal: tokens["space-base"],
+    },
+    icon: {
+        justifyContent: "flex-start",
+        paddingRight: tokens["space-small"],
+    },
+    titlePadding: {
+        paddingBottom: tokens["space-smaller"],
+    },
+    content: {
+        flex: 1,
+    },
+    offsetForIcons: {
+        paddingTop: tokens["space-smallest"],
+    },
+    actionIcon: {
+        paddingLeft: tokens["space-small"],
+    },
+});

package/dist/src/ActionItem/ActionItemGroup.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ActionItem.style";
+import { Divider } from "../Divider";
+export function ActionItemGroup({ children, }) {
+    return React.createElement(View, null, renderChildren(children));
+}
+function renderChildren(children) {
+    const childArray = React.Children.toArray(children);
+    if (childArray.length === 1)
+        return children;
+    return childArray.map((child, index) => {
+        const isSubsequentChild = index !== 0;
+        return (React.createElement(View, { key: index },
+            isSubsequentChild && (React.createElement(View, { style: styles.actionItemHorizontalOffset },
+                React.createElement(Divider, null))),
+            child));
+    });
+}

package/dist/src/ActionItem/components/ActionItemContainer.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./ActionItemContainer.style";
+import { styles as actionItemStyles } from "../ActionItem.style";
+export function ActionItemContainer({ onPress, title, children, testID, }) {
+    if (onPress) {
+        return (React.createElement(Pressable, { onPress: onPress, style: ({ pressed }) => [
+                styles.container,
+                actionItemStyles.actionItemHorizontalOffset,
+                pressed && styles.pressed,
+            ], accessibilityRole: "button", accessibilityLabel: title, testID: testID }, children));
+    }
+    return (React.createElement(View, { style: [styles.container, actionItemStyles.actionItemHorizontalOffset], testID: testID }, children));
+}

package/dist/src/ActionItem/components/ActionItemContainer.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        flexDirection: "row",
+        paddingVertical: tokens["space-base"],
+    },
+    pressed: {
+        opacity: tokens["opacity-pressed"],
+    },
+});

package/dist/src/ActionItem/index.js

@@ -0,0 +1,2 @@
+export { ActionItem } from "./ActionItem";
+export { ActionItemGroup } from "./ActionItemGroup";

package/dist/src/Button/Button.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { TouchableHighlight, View } from "react-native";
 import { styles } from "./Button.style";
-// eslint-disable-next-line import/no-internal-modules
 import { InternalButtonLoading } from "./components/InternalButtonLoading";
 import { ActionLabel } from "../ActionLabel";
 import { Icon } from "../Icon";

package/dist/src/Card/Card.js

@@ -1,7 +1,6 @@
 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";

package/dist/src/index.js

@@ -14,3 +14,4 @@ export * from "./InputFieldWrapper";
 export * from "./ProgressBar";
 export * from "./Heading";
 export * from "./Chip";
+export * from "./ActionItem";