@jobber/components-native 0.2.1 → 0.4.0

package/dist/src/ActivityIndicator/ActivityIndicator.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { ActivityIndicator } from "react-native";
+import { tokens } from "../utils/design";
+export function JobberActivityIndicator(props) {
+    return (React.createElement(ActivityIndicator, Object.assign({}, props, { color: props.color || tokens["color-greyBlue"], testID: props.testID || "ActivityIndicator" })));
+}

package/dist/src/ActivityIndicator/index.js

@@ -0,0 +1 @@
+export { JobberActivityIndicator as ActivityIndicator } from "./ActivityIndicator";

package/dist/src/Content/Content.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { View } from "react-native";
+import { horizontalStyles } from "./ContentHorizontal.style";
+import { verticalStyles } from "./ContentVertical.style";
+import { spaceStyles } from "./ContentSpaceAround.style";
+export function Content({ children, spacing = "base", childSpacing = "base", direction = "vertical", }) {
+    const styles = direction === "horizontal" ? horizontalStyles : verticalStyles;
+    const styleName = `${spacing}Space`;
+    const containerStyle = spaceStyles[styleName];
+    return (React.createElement(View, { style: [styles.wrapper, containerStyle] }, renderChildren()));
+    function renderChildren() {
+        const childArray = React.Children.toArray(children);
+        if (childArray.length === 1)
+            return children;
+        const spaceName = `${childSpacing}ChildSpace`;
+        const childContainerStyle = styles[spaceName];
+        return childArray.map((child, index) => {
+            // In order to get spacing between the children, we apply the child spacing on each of
+            // the children except for the first (top) child
+            const childStyle = index !== 0 ? [childContainerStyle] : [];
+            return (React.createElement(View, { key: index, style: [styles.childWrapper, ...childStyle] }, child));
+        });
+    }
+}

package/dist/src/Content/ContentHorizontal.style.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const horizontalStyles = StyleSheet.create({
+    wrapper: {
+        flexDirection: "row",
+    },
+    childWrapper: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+    },
+    noneChildSpace: {
+        padding: 0,
+    },
+    smallestChildSpace: {
+        paddingLeft: tokens["space-smallest"],
+    },
+    smallerChildSpace: {
+        paddingLeft: tokens["space-smaller"],
+    },
+    smallChildSpace: {
+        paddingLeft: tokens["space-small"],
+    },
+    baseChildSpace: {
+        paddingLeft: tokens["space-base"],
+    },
+    largeChildSpace: {
+        paddingLeft: tokens["space-large"],
+    },
+});

package/dist/src/Content/ContentSpaceAround.style.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const spaceStyles = StyleSheet.create({
+    noneSpace: {
+        padding: 0,
+    },
+    smallestSpace: {
+        padding: tokens["space-smallest"],
+    },
+    smallerSpace: {
+        padding: tokens["space-smaller"],
+    },
+    smallSpace: {
+        padding: tokens["space-small"],
+    },
+    baseSpace: {
+        padding: tokens["space-base"],
+    },
+    largeSpace: {
+        padding: tokens["space-large"],
+    },
+});

package/dist/src/Content/ContentVertical.style.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const verticalStyles = StyleSheet.create({
+    wrapper: {
+    // No style. Default `<View />` styling should suffice.
+    // Only need this key to exist.
+    },
+    childWrapper: {
+    // No style. Default `<View />` styling should suffice.
+    // Only need this key to exist.
+    },
+    noneChildSpace: {
+        padding: 0,
+    },
+    smallestChildSpace: {
+        paddingTop: tokens["space-smallest"],
+    },
+    smallerChildSpace: {
+        paddingTop: tokens["space-smaller"],
+    },
+    smallChildSpace: {
+        paddingTop: tokens["space-small"],
+    },
+    baseChildSpace: {
+        paddingTop: tokens["space-base"],
+    },
+    largeChildSpace: {
+        paddingTop: tokens["space-large"],
+    },
+});

package/dist/src/Content/index.js

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

package/dist/src/Text/Text.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Typography, } from "../Typography";
+import { tokens } from "../utils/design";
+const levelStyles = {
+    text: {
+        size: "default",
+        lineHeight: "base",
+    },
+    textSupporting: {
+        size: "small",
+        lineHeight: "tight",
+    },
+};
+const MAX_TEXT_FONT_SIZE_SCALE = 50;
+const maxScaledFontSize = {
+    text: MAX_TEXT_FONT_SIZE_SCALE,
+    textSupporting: tokens["typography--fontSize-base"],
+};
+export function Text({ level = "text", variation = "base", emphasis, allowFontScaling = true, adjustsFontSizeToFit = false, maxLines = "unlimited", align, children, reverseTheme = false, strikeThrough = false, hideFromScreenReader = false, maxFontScaleSize, selectable, }) {
+    const accessibilityRole = "text";
+    return (React.createElement(Typography, Object.assign({ color: variation, fontFamily: "base", fontStyle: "regular", fontWeight: getFontWeight({ level, emphasis }), maxFontScaleSize: maxFontScaleSize || maxScaledFontSize[level], selectable: selectable }, Object.assign(Object.assign({}, levelStyles[level]), { allowFontScaling,
+        align,
+        adjustsFontSizeToFit,
+        accessibilityRole,
+        reverseTheme,
+        maxLines,
+        strikeThrough,
+        hideFromScreenReader })), children));
+}
+function getFontWeight({ level, emphasis, }) {
+    if (emphasis === "strong")
+        return "semiBold";
+    if (level === "textSupporting")
+        return "medium";
+    return "regular";
+}

package/dist/src/Text/index.js

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

package/dist/src/index.js

@@ -1,3 +1,6 @@
 export * from "./Icon";
 export * from "./Divider";
 export * from "./Typography";
+export * from "./Text";
+export * from "./Content";
+export * from "./ActivityIndicator";