@jobber/components-native 0.10.0 → 0.12.0

package/dist/src/Button/Button.js

@@ -0,0 +1,78 @@
+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";
+import { tokens } from "../utils/design";
+export function Button({ label, onPress, variation = "work", type = "primary", fullHeight = false, fullWidth = true, disabled = false, loading = false, size = "base", accessibilityLabel, accessibilityHint, icon, }) {
+    const buttonStyle = [
+        styles.button,
+        styles[variation],
+        styles[type],
+        styles[size],
+        disabled && styles.disabled,
+        fullHeight && styles.fullHeight,
+        fullWidth && styles.reducedPaddingForFullWidth,
+    ];
+    // attempts to use Pressable caused problems.  When a ScrollView contained
+    // an InputText that was focused, it required two presses to activate the
+    // Pressable.  Using a TouchableHighlight made things register correctly
+    // in a single press
+    return (React.createElement(TouchableHighlight, { onPress: onPress, testID: accessibilityLabel || label, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, accessibilityRole: "button", accessibilityState: { disabled, busy: loading }, disabled: disabled || loading, underlayColor: tokens["color-greyBlue--dark"], activeOpacity: tokens["opacity-pressed"], style: [
+            styles.touchable,
+            fullWidth && styles.fullWidth,
+            fullHeight && styles.fullHeight,
+        ] },
+        React.createElement(View, { style: buttonStyle },
+            loading && React.createElement(InternalButtonLoading, { variation: variation, type: type }),
+            React.createElement(View, { style: getContentStyles(label, icon) },
+                icon && (React.createElement(View, { style: styles.iconStyle },
+                    React.createElement(Icon, { name: icon, color: getIconColorVariation(variation, type, disabled) }))),
+                label && (React.createElement(View, { style: styles.labelStyle },
+                    React.createElement(ActionLabel, { variation: getActionLabelVariation(variation, type), disabled: disabled, align: icon ? "start" : undefined }, label)))))));
+}
+function getActionLabelVariation(variation, type) {
+    if (type === "primary" && variation !== "cancel") {
+        return "onPrimary";
+    }
+    switch (variation) {
+        case "learning":
+            return "learning";
+        case "destructive":
+            return "destructive";
+        case "cancel":
+            return "subtle";
+        default:
+            return "interactive";
+    }
+}
+function getIconColorVariation(variation, type, disabled) {
+    if (disabled) {
+        return "disabled";
+    }
+    if (type === "primary" && variation !== "cancel") {
+        return "white";
+    }
+    switch (variation) {
+        case "learning":
+            return "informative";
+        case "destructive":
+            return "destructive";
+        case "cancel":
+            return "interactiveSubtle";
+        default:
+            return "interactive";
+    }
+}
+function getContentStyles(label, icon) {
+    if (label && !icon) {
+        return undefined;
+    }
+    return [
+        styles.content,
+        icon && !!label && styles.iconPaddingOffset,
+        !!label && styles.contentWithLabel,
+    ];
+}

package/dist/src/Button/Button.style.js

@@ -0,0 +1,92 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const iconTranslateY = tokens["space-large"] / 2;
+const buttonRadius = tokens["radius-large"];
+export const baseButtonHeight = tokens["space-base"] * 3.5;
+export const smallButtonHeight = tokens["space-base"] * 2.25;
+export const styles = StyleSheet.create({
+    fullHeight: {
+        flexGrow: 1,
+        flexShrink: 0,
+    },
+    fullWidth: {
+        alignSelf: "stretch",
+    },
+    touchable: {
+        borderRadius: buttonRadius,
+    },
+    button: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "stretch",
+        flexDirection: "row",
+        overflow: "hidden",
+        margin: 0,
+        borderRadius: buttonRadius,
+        borderWidth: tokens["border-base"],
+        paddingVertical: tokens["space-small"],
+    },
+    base: {
+        minHeight: baseButtonHeight,
+        paddingHorizontal: tokens["space-base"],
+    },
+    small: {
+        minHeight: smallButtonHeight,
+        paddingHorizontal: tokens["space-small"] + tokens["space-smaller"],
+    },
+    reducedPaddingForFullWidth: {
+        paddingHorizontal: tokens["space-smaller"],
+    },
+    iconPaddingOffset: {
+        paddingRight: tokens["space-smaller"],
+    },
+    content: {
+        paddingLeft: tokens["space-large"],
+        height: "100%",
+    },
+    contentWithLabel: {
+        paddingLeft: tokens["space-large"] + tokens["space-small"],
+    },
+    iconStyle: {
+        position: "absolute",
+        top: "50%",
+        left: 0,
+        transform: [{ translateY: -iconTranslateY }],
+    },
+    labelStyle: {
+        flexGrow: 1,
+        justifyContent: "center",
+    },
+    /* Variations */
+    work: {
+        backgroundColor: tokens["color-interactive"],
+        borderColor: tokens["color-interactive"],
+    },
+    learning: {
+        backgroundColor: tokens["color-informative"],
+        borderColor: tokens["color-informative"],
+    },
+    destructive: {
+        backgroundColor: tokens["color-destructive"],
+        borderColor: tokens["color-destructive"],
+    },
+    /* Cancel is special because, by default, it's styled as a secondary button */
+    cancel: {
+        backgroundColor: tokens["color-surface"],
+        borderColor: tokens["color-interactive--subtle"],
+    },
+    /* Types */
+    primary: {},
+    secondary: {
+        backgroundColor: tokens["color-surface"],
+    },
+    tertiary: {
+        backgroundColor: tokens["color-surface"],
+        borderColor: tokens["color-surface"],
+    },
+    /* Disabled */
+    disabled: {
+        borderColor: tokens["color-disabled--secondary"],
+        backgroundColor: tokens["color-disabled--secondary"],
+    },
+});

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { ImageBackground, PixelRatio } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withTiming, } from "react-native-reanimated";
+import { styles } from "./InternalButtonLoading.style";
+import { tokens } from "../../../utils/design";
+const imageWidth = 96;
+const offset = PixelRatio.roundToNearestPixel(imageWidth / PixelRatio.get());
+const leftOffset = -1 * offset;
+const AnimatedImage = Animated.createAnimatedComponent(ImageBackground);
+function InternalButtonLoadingInternal({ variation, type, }) {
+    const translateX = useSharedValue(0);
+    translateX.value = withRepeat(withTiming(offset, {
+        duration: tokens["timing-loading"],
+        easing: Easing.linear,
+    }), -1);
+    const opacity = useSharedValue(0);
+    opacity.value = withDelay(tokens["timing-quick"], withTiming(1, {
+        duration: tokens["timing-base"],
+        easing: Easing.linear,
+    }));
+    const animations = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ translateX: translateX.value }],
+    }));
+    return (React.createElement(AnimatedImage, { testID: "loadingImage", source: { uri: getLoadingPattern({ variation, type }) }, resizeMode: "repeat", style: [styles.image, { left: leftOffset }, animations] }));
+}
+export const darkPattern = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAMUExURQAAAEdwTAAAAAAAAKDh18UAAAAEdFJOUxkADQwimkzpAAAAtUlEQVRIx+3NqxHDQBRDUc0YuxyXokxgSkmT7sdgP++3YoYrqAsOYDto+7gfpwtfHy4Xfj7cLvw3sYlNbOINAoI4IIgTgrggiBuCIAThQyB8CIQLkXAhEi5EwoVIWEiEhURYSISFRMyQiRkyMUMmZsjECIUYoRAjFGKEQvRQiR4q0UMleqhECwuihQXRwoJoYUEQgiAEQQiCEAQhCEIQhCAIQRCCIARBCIIQBCEIQhCEIAhB8AEuzZ5wHe17xgAAAABJRU5ErkJggg==";
+export const lightPattern = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAAITgAACE4AUWWMWAAAAAJUExURf///0dwTP///0SistEAAAADdFJOU0AAILGCadYAAAC0SURBVEjH7c2pFcNAFENRHTMX4pKUE5hS0oT7NZjlbyNmOIJ64AK2g7aP+3G68PXhcuHnw+3CfxOb2MQm3iAgiAOCOCGIC4K4IQhCED4EwodAuBAJFyLhQiRciISFRFhIhIVEWEjEDJmYIRMzZGKGTIxQiBEKMUIhRihED5XooRI9VKKHSrSwIFpYEC0siBYWBCEIQhCEIAhBEIIgBEEIghAEIQhCEIQgCEEQgiAEQQiCEAQfva6WeBniVLgAAAAASUVORK5CYII=";
+function getLoadingPattern({ variation, type, }) {
+    if (variation === "cancel")
+        return darkPattern;
+    if (type === "primary")
+        return lightPattern;
+    return darkPattern;
+}
+export const InternalButtonLoading = React.memo(InternalButtonLoadingInternal);

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.style.js

@@ -0,0 +1,4 @@
+import { StyleSheet } from "react-native";
+export const styles = StyleSheet.create({
+    image: StyleSheet.absoluteFillObject,
+});

package/dist/src/Button/components/InternalButtonLoading/index.js

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

package/dist/src/Button/index.js

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

package/dist/src/Button/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -9,4 +9,6 @@ export * from "./ActivityIndicator";
 export * from "./Card";
 export * from "./StatusLabel";
 export * from "./AtlantisContext";
+export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./Heading";