@jobber/components-native 0.71.2-TAYLORmax-6e14b32.19 → 0.71.2-improve-di-796b148.24

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.71.2-TAYLORmax-6e14b32.19+6e14b32d",
+    "version": "0.71.2-improve-di-796b148.24+796b148d",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -82,5 +82,5 @@
         "react-native-safe-area-context": "^4.5.2",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "6e14b32d5a326475566187872f9e4e695ec3c0f8"
+    "gitHead": "796b148d464e0e5d1fa64edd033e0e12c2a2ded3"
 }

package/dist/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.js

@@ -5,7 +5,7 @@ import { capitalize } from "../../../utils/intl";
 import { Text } from "../../../Text";
 import { Icon } from "../../../Icon";
 export function BottomSheetOption({ text, icon, iconColor, textAlign, destructive, textTransform = "capitalize", onPress, }) {
-    const destructiveColor = "critical";
+    const destructiveColor = "destructive";
     const textVariation = destructive ? destructiveColor : "subdued";
     return (React.createElement(TouchableOpacity, { style: styles.bottomSheetOption, onPress: onPress, accessibilityLabel: text },
         icon && (React.createElement(View, { style: styles.icon },

package/dist/src/Menu/components/MenuOption/MenuOption.js

@@ -7,7 +7,7 @@ import { Flex } from "../../../Flex";
 import { Typography } from "../../../Typography";
 import { Icon } from "../../../Icon";
 export function MenuOption({ label, icon, iconColor = "heading", textAlign, destructive, textTransform = "capitalize", onPress, setOpen, }) {
-    const destructiveColor = "critical";
+    const destructiveColor = "destructive";
     const textVariation = destructive ? destructiveColor : "heading";
     return (React.createElement(View, { testID: "ATL-MENU-OPTIONS" },
         React.createElement(Pressable, { style: ({ pressed }) => [

package/dist/src/Text/Text.js

@@ -16,9 +16,9 @@ export const TEXT_MAX_SCALED_FONT_SIZES = {
     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, italic = false, hideFromScreenReader = false, maxFontScaleSize, selectable, }) {
+export function Text({ level = "text", variation = "base", emphasis, allowFontScaling = true, adjustsFontSizeToFit = false, maxLines = "unlimited", align, children, reverseTheme = false, strikeThrough = false, italic = false, hideFromScreenReader = false, maxFontScaleSize, underline, selectable, }) {
     const accessibilityRole = "text";
-    return (React.createElement(Typography, Object.assign({ color: variation, fontFamily: "base", fontStyle: italic ? "italic" : "regular", fontWeight: getFontWeight({ level, emphasis }), maxFontScaleSize: maxFontScaleSize || TEXT_MAX_SCALED_FONT_SIZES[level], selectable: selectable }, Object.assign(Object.assign({}, levelStyles[level]), { allowFontScaling,
+    return (React.createElement(Typography, Object.assign({ color: variation, fontFamily: "base", fontStyle: italic ? "italic" : "regular", fontWeight: getFontWeight({ level, emphasis }), maxFontScaleSize: maxFontScaleSize || TEXT_MAX_SCALED_FONT_SIZES[level], selectable: selectable, underline: underline }, Object.assign(Object.assign({}, levelStyles[level]), { allowFontScaling,
         align,
         adjustsFontSizeToFit,
         accessibilityRole,

package/dist/src/Typography/Typography.js

@@ -15,7 +15,8 @@ const maxNumberOfLines = {
     unlimited: undefined,
 };
 export const Typography = React.memo(InternalTypography);
-function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing, reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, selectable = true, }) {
+// eslint-disable-next-line max-statements
+function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size = "default", children, maxLines = "unlimited", allowFontScaling = true, maxFontScaleSize, adjustsFontSizeToFit = false, lineHeight, letterSpacing, reverseTheme = false, hideFromScreenReader = false, accessibilityRole = "text", strikeThrough = false, underline, selectable = true, }) {
     const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
     const style = [
         getFontStyle(fontFamily, fontStyle, fontWeight),
@@ -30,6 +31,10 @@ function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, colo
     if (fontStyle === "italic") {
         style.push(styles.italic);
     }
+    if (underline) {
+        const underlineTextStyle = { textDecorationStyle: underline };
+        style.push(underlineTextStyle, styles.underline);
+    }
     const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
     const text = getTransformedText(children, transform);
     const accessibilityProps = hideFromScreenReader

package/dist/src/Typography/Typography.style.js

@@ -65,7 +65,14 @@ const fonts = Platform.select({
  */
 export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic: {
         fontStyle: "italic",
-    }, startAlign: {
+    }, underline: {
+        textDecorationColor: tokens["color-text--secondary"],
+        textDecorationLine: "underline",
+    }, 
+    /**
+     * Alignments
+     */
+    startAlign: {
         textAlign: "left",
     }, endAlign: {
         textAlign: "right",
@@ -73,9 +80,12 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         textAlign: "center",
     }, justifyAlign: {
         textAlign: "justify",
-    }, blue: {
-        color: tokens["color-heading"],
-    }, blueDark: {
+    }, 
+    /**
+     * Colors
+     */
+    // Base colors for backwards compatibility
+    blueDark: {
         color: tokens["color-blue--dark"],
     }, white: {
         color: tokens["color-white"],
@@ -121,10 +131,10 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         color: tokens["color-indigo--dark"],
     }, navy: {
         color: tokens["color-navy"],
-    }, heading: {
+    }, 
+    // Typography
+    heading: {
         color: tokens["color-heading"],
-    }, headingReverse: {
-        color: tokens["color-text--reverse"],
     }, text: {
         color: tokens["color-text"],
     }, textSecondary: {
@@ -133,47 +143,160 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         color: tokens["color-text--reverse"],
     }, textReverseSecondary: {
         color: tokens["color-text--reverse--secondary"],
-    }, success: {
-        color: tokens["color-success--onSurface"],
-    }, error: {
+    }, 
+    // Statuses
+    inactive: {
+        color: tokens["color-inactive"],
+    }, inactiveSurface: {
+        color: tokens["color-inactive--surface"],
+    }, inactiveOnSurface: {
+        color: tokens["color-inactive--onSurface"],
+    }, critical: {
         color: tokens["color-critical"],
-    }, base: {
-        color: tokens["color-text"],
-    }, subdued: {
-        color: tokens["color-text--secondary"],
-    }, warn: {
+    }, criticalSurface: {
+        color: tokens["color-critical--surface"],
+    }, criticalOnSurface: {
+        color: tokens["color-critical--onSurface"],
+    }, warning: {
+        color: tokens["color-warning"],
+    }, warningSurface: {
+        color: tokens["color-warning--surface"],
+    }, warningOnSurface: {
         color: tokens["color-warning--onSurface"],
-    }, info: {
+    }, informative: {
+        color: tokens["color-informative"],
+    }, informativeSurface: {
+        color: tokens["color-informative--surface"],
+    }, informativeOnSurface: {
         color: tokens["color-informative--onSurface"],
-    }, critical: {
+    }, 
+    // To be uncommented once success in Deprecated is removed
+    // success: {
+    //   color: tokens["color-success"],
+    // },
+    successSurface: {
+        color: tokens["color-success--surface"],
+    }, successOnSurface: {
+        color: tokens["color-success--onSurface"],
+    }, 
+    // Interactions
+    interactive: {
+        color: tokens["color-interactive"],
+    }, interactiveHover: {
+        color: tokens["color-interactive--hover"],
+    }, interactiveSubtle: {
+        color: tokens["color-interactive--subtle"],
+    }, interactiveSubtleHover: {
+        color: tokens["color-interactive--subtle--hover"],
+    }, destructive: {
+        color: tokens["color-destructive"],
+    }, destructiveHover: {
+        color: tokens["color-destructive--hover"],
+    }, disabled: {
+        color: tokens["color-disabled"],
+    }, disabledSecondary: {
+        color: tokens["color-disabled--secondary"],
+    }, 
+    // Workflow
+    request: {
+        color: tokens["color-request"],
+    }, requestSurface: {
+        color: tokens["color-request--surface"],
+    }, requestOnSurface: {
+        color: tokens["color-request--onSurface"],
+    }, quote: {
+        color: tokens["color-quote"],
+    }, quoteSurface: {
+        color: tokens["color-quote--surface"],
+    }, quoteOnSurface: {
+        color: tokens["color-quote--onSurface"],
+    }, job: {
+        color: tokens["color-job"],
+    }, jobSurface: {
+        color: tokens["color-job--surface"],
+    }, jobOnSurface: {
+        color: tokens["color-job--onSurface"],
+    }, visit: {
+        color: tokens["color-visit"],
+    }, visitSurface: {
+        color: tokens["color-visit--surface"],
+    }, visitOnSurface: {
+        color: tokens["color-visit--onSurface"],
+    }, task: {
+        color: tokens["color-task"],
+    }, taskSurface: {
+        color: tokens["color-task--surface"],
+    }, taskOnSurface: {
+        color: tokens["color-task--onSurface"],
+    }, event: {
+        color: tokens["color-event"],
+    }, eventSurface: {
+        color: tokens["color-event--surface"],
+    }, eventOnSurface: {
+        color: tokens["color-event--onSurface"],
+    }, invoice: {
+        color: tokens["color-invoice"],
+    }, invoiceSurface: {
+        color: tokens["color-invoice--surface"],
+    }, invoiceOnSurface: {
+        color: tokens["color-invoice--onSurface"],
+    }, payments: {
+        color: tokens["color-payments"],
+    }, paymentsSurface: {
+        color: tokens["color-payments--surface"],
+    }, paymentsOnSurface: {
+        color: tokens["color-payments--onSurface"],
+    }, client: {
+        color: tokens["color-client"],
+    }, 
+    // Miscellaneous
+    icon: {
+        color: tokens["color-icon"],
+    }, brand: {
+        color: tokens["color-brand"],
+    }, 
+    // Deprecated
+    blue: {
+        color: tokens["color-heading"],
+    }, base: {
+        color: tokens["color-text"],
+    }, baseReverse: {
+        color: tokens["color-text--reverse"],
+    }, headingReverse: {
+        color: tokens["color-text--reverse"],
+    }, error: {
         color: tokens["color-critical"],
-    }, successReverse: {
-        color: tokens["color-success"],
     }, errorReverse: {
         color: tokens["color-critical"],
-    }, baseReverse: {
-        color: tokens["color-text--reverse"],
-    }, subduedReverse: {
-        color: tokens["color-text--reverse--secondary"],
+    }, success: {
+        color: tokens["color-success--onSurface"],
+    }, successReverse: {
+        color: tokens["color-success"],
+    }, warn: {
+        color: tokens["color-warning--onSurface"],
     }, warnReverse: {
         color: tokens["color-warning"],
+    }, subdued: {
+        color: tokens["color-text--secondary"],
+    }, subduedReverse: {
+        color: tokens["color-text--reverse--secondary"],
+    }, info: {
+        color: tokens["color-informative--onSurface"],
     }, infoReverse: {
         color: tokens["color-informative"],
     }, criticalReverse: {
         color: tokens["color-critical"],
-    }, interactive: {
-        color: tokens["color-interactive"],
-    }, destructive: {
-        color: tokens["color-destructive"],
     }, learning: {
         color: tokens["color-informative"],
     }, subtle: {
         color: tokens["color-interactive--subtle"],
     }, onPrimary: {
         color: tokens["color-surface"],
-    }, disabled: {
-        color: tokens["color-disabled"],
-    }, smallestSize: {
+    }, 
+    /**
+     * Sizes
+     */
+    smallestSize: {
         fontSize: tokens["typography--fontSize-smallest"],
         lineHeight: minusculeLineHeight,
     }, smallerSize: {
@@ -200,7 +323,11 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
     }, extravagantSize: {
         fontSize: tokens["typography--fontSize-extravagant"],
         lineHeight: extravagantLineHeight,
-    }, extravagantLineHeight: {
+    }, 
+    /**
+     * Line Heights
+     */
+    extravagantLineHeight: {
         lineHeight: extravagantLineHeight,
     }, jumboLineHeight: {
         lineHeight: jumboLineHeight,
@@ -214,7 +341,11 @@ export const typographyTokens = Object.assign(Object.assign({}, fonts), { italic
         lineHeight: baseLineHeight,
     }, tightLineHeight: {
         lineHeight: tightLineHeight,
-    }, baseLetterSpacing: {
+    }, 
+    /**
+     * Letter Spacings
+     */
+    baseLetterSpacing: {
         letterSpacing: tokens["typography--letterSpacing-base"],
     }, looseLetterSpacing: {
         letterSpacing: tokens["typography--letterSpacing-loose"],