@jobber/components-native 0.11.0 → 0.13.0

package/dist/src/Chip/Chip.js

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./Chip.style";
+import { Icon } from "../Icon";
+import { Typography } from "../Typography";
+import { tokens } from "../utils/design";
+const defaultAccentColor = tokens["color-surface--reverse"];
+export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBackgroundColor = "background", accessibilityLabel, accessibilityRole = "radio", accent, }) {
+    const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
+        const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
+        const iconColor = isActive ? tokens["color-surface"] : accentColor;
+        const chip = [
+            styles.container,
+            {
+                backgroundColor: inactiveBackgroundColor === "surface"
+                    ? tokens["color-surface"]
+                    : tokens["color-surface--background"],
+            },
+            isActive && { backgroundColor: accentColor },
+        ];
+        const dismiss = (isActive || inactiveBackgroundColor === "surface") &&
+            styles.activeDismissIcon;
+        return {
+            chipStyle: chip,
+            iconCustomColor: iconColor,
+            dismissColor: dismiss,
+        };
+    }, [accent, isActive, inactiveBackgroundColor]);
+    const accessibilityState = useMemo(() => {
+        const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
+        if (checkableRoles.includes(accessibilityRole)) {
+            return { checked: isActive };
+        }
+        return {};
+    }, [accessibilityRole, isActive]);
+    return (React.createElement(Pressable, { testID: "chipTest", hitSlop: { top: 8, bottom: 8, left: 4, right: 4 }, onPress: onPress, disabled: typeof onPress !== "function", style: chipStyle, accessibilityLabel: accessibilityLabel || label, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState },
+        icon && (React.createElement(View, { style: styles.iconLeft },
+            React.createElement(Icon, { name: icon, size: "base", customColor: iconCustomColor }))),
+        label && (React.createElement(View, { style: styles.chipText },
+            React.createElement(Typography, { color: "base", fontWeight: "medium", maxFontScaleSize: tokens["typography--fontSize-large"], maxLines: "single", reverseTheme: isActive }, label))),
+        isDismissible && (React.createElement(View, { style: [styles.dismissIcon, dismissColor] },
+            React.createElement(Icon, { name: "remove", size: "small" })))));
+}

package/dist/src/Chip/Chip.style.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const chipHeight = tokens["space-larger"] + tokens["space-small"];
+export const styles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        borderRadius: tokens["radius-circle"],
+        flexDirection: "row",
+        height: chipHeight,
+        justifyContent: "center",
+        marginHorizontal: tokens["space-smaller"],
+        marginTop: tokens["space-small"],
+        paddingHorizontal: tokens["space-small"],
+    },
+    iconLeft: {
+        marginHorizontal: tokens["space-smallest"],
+    },
+    chipText: {
+        flexGrow: 1,
+        flexShrink: 1,
+        marginHorizontal: tokens["space-smallest"],
+    },
+    dismissIcon: {
+        backgroundColor: tokens["color-surface"],
+        borderRadius: tokens["radius-circle"],
+        marginLeft: tokens["space-smaller"],
+        padding: tokens["space-smaller"],
+    },
+    activeDismissIcon: {
+        backgroundColor: tokens["color-surface--background"],
+    },
+});

package/dist/src/Chip/index.js

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

package/dist/src/Heading/Heading.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { Typography, } from "../Typography";
+import { tokens } from "../utils/design";
+const maxScaledFontSize = {
+    subHeading: tokens["typography--fontSize-base"] * 1.375,
+    heading: tokens["typography--fontSize-base"] * 1.5,
+    subtitle: tokens["typography--fontSize-base"] * 1.5,
+    title: tokens["typography--fontSize-base"] * 2.125,
+};
+export function Heading({ children, level, variation = "heading", reverseTheme = false, align, maxLines = "unlimited", allowFontScaling = true, selectable, }) {
+    const headingStyle = getHeadingStyle(level, variation);
+    const accessibilityRole = "header";
+    return (React.createElement(Typography, Object.assign({}, Object.assign(Object.assign({}, headingStyle), { accessibilityRole,
+        reverseTheme,
+        align,
+        maxLines,
+        allowFontScaling }), { maxFontScaleSize: maxScaledFontSize[level], selectable: selectable }), children));
+}
+function getHeadingStyle(level = "heading", variation) {
+    const headingLevelToStyle = {
+        title: {
+            fontFamily: "display",
+            fontWeight: "black",
+            size: "jumbo",
+            lineHeight: "jumbo",
+            color: variation,
+        },
+        subtitle: {
+            fontFamily: "display",
+            fontWeight: "extraBold",
+            size: "largest",
+            lineHeight: "largest",
+            color: variation,
+        },
+        heading: {
+            fontFamily: "display",
+            fontWeight: "extraBold",
+            size: "larger",
+            lineHeight: "large",
+            color: variation,
+        },
+        subHeading: {
+            fontFamily: "base",
+            fontWeight: "semiBold",
+            size: "default",
+            lineHeight: "base",
+            color: variation,
+        },
+    };
+    return headingLevelToStyle[level];
+}

package/dist/src/Heading/index.js

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

package/dist/src/index.js

@@ -11,3 +11,5 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./Heading";
+export * from "./Chip";