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

package/src/Typography/Typography.tsx

@@ -7,6 +7,7 @@ import {
   // eslint-disable-next-line no-restricted-imports
   Text,
   TextProps,
+  TextStyle,
   ViewStyle,
 } from "react-native";
 import { TypographyGestureDetector } from "./TypographyGestureDetector";
@@ -83,6 +84,13 @@ export interface TypographyProps<T extends FontFamily>
    */
   readonly fontStyle?: T extends "base" ? BaseStyle : DisplayStyle;
 
+  /**
+   * Underline style to use for the text. The non-solid style is only supported
+   * on iOS, as per React Native's Text component's limitations.
+   * https://reactnative.dev/docs/text-style-props#textdecorationstyle-ios
+   */
+  readonly underline?: "solid" | "double" | "dotted" | "dashed" | undefined;
+
   /**
    * Font weight
    */
@@ -124,6 +132,7 @@ const maxNumberOfLines = {
 
 export const Typography = React.memo(InternalTypography);
 
+// eslint-disable-next-line max-statements
 function InternalTypography<T extends FontFamily = "base">({
   fontFamily,
   fontStyle,
@@ -143,6 +152,7 @@ function InternalTypography<T extends FontFamily = "base">({
   hideFromScreenReader = false,
   accessibilityRole = "text",
   strikeThrough = false,
+  underline,
   selectable = true,
 }: TypographyProps<T>): JSX.Element {
   const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
@@ -162,6 +172,11 @@ function InternalTypography<T extends FontFamily = "base">({
     style.push(styles.italic);
   }
 
+  if (underline) {
+    const underlineTextStyle: TextStyle = { textDecorationStyle: underline };
+    style.push(underlineTextStyle, styles.underline);
+  }
+
   const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
 
   const text = getTransformedText(children, transform);
@@ -295,8 +310,8 @@ export type DisplayStyle = Extract<FontStyle, "regular">;
 
 export type TextColor =
   | TextVariation
+  // Base colors for backwards compatibility
   | "default"
-  | "blue"
   | "blueDark"
   | "white"
   | "green"
@@ -320,27 +335,89 @@ export type TextColor =
   | "tealDark"
   | "indigoDark"
   | "navy"
-  | "text"
+
+  // Typography
   | "heading"
+  | "text"
   | "textSecondary"
   | "textReverse"
   | "textReverseSecondary"
-  | "interactive"
-  | "destructive"
-  | "learning"
-  | "subtle"
-  | "onPrimary";
 
-export type TextVariation =
+  // Statuses
+  | "inactive"
+  | "inactiveSurface"
+  | "inactiveOnSurface"
+  | "critical"
+  | "criticalSurface"
+  | "criticalOnSurface"
+  | "warning"
+  | "warningSurface"
+  | "warningOnSurface"
+  | "informative"
+  | "informativeSurface"
+  | "informativeOnSurface"
   | "success"
+  | "successSurface"
+  | "successOnSurface"
+
+  // Interactions
+  | "interactiveHover"
+  | "interactiveSubtleHover"
+  | "destructiveHover"
+  | "disabledSecondary"
+
+  // Workflow
+  | "request"
+  | "requestSurface"
+  | "requestOnSurface"
+  | "quote"
+  | "quoteSurface"
+  | "quoteOnSurface"
+  | "job"
+  | "jobSurface"
+  | "jobOnSurface"
+  | "visit"
+  | "visitSurface"
+  | "visitOnSurface"
+  | "task"
+  | "taskSurface"
+  | "taskOnSurface"
+  | "event"
+  | "eventSurface"
+  | "eventOnSurface"
+  | "invoice"
+  | "invoiceSurface"
+  | "invoiceOnSurface"
+  | "payments"
+  | "paymentsSurface"
+  | "paymentsOnSurface"
+  | "client"
+
+  // Deprecated
+  | "blue" // Use "heading" instead
+  | "learning" // Use "informative" instead
+  | "subtle" // Use "interactiveSubtle" instead
+  | "onPrimary"; // Use "subtle" instead
+
+// A subset of colors that can be used with the Text component
+export type TextVariation =
+  | "text"
+  | "textSecondary"
   | "interactive"
-  | "error"
-  | "base"
-  | "subdued"
-  | "warn"
-  | "info"
+  | "interactiveSubtle"
+  | "successOnSurface"
+  | "critical"
+  | "warning"
+  | "informativeOnSurface"
   | "disabled"
-  | "critical";
+  | "destructive"
+
+  // Deprecated
+  | "base" // Use "text" instead
+  | "subdued" // Use "textSecondary" instead
+  | "error" // Use "critical" instead
+  | "warn" // Use "warningOnSurface" instead
+  | "info"; // Use "informativeOnSurface" instead
 
 export type TextTransform = "uppercase" | "lowercase" | "capitalize" | "none";
 

package/src/Typography/__snapshots__/Typography.test.tsx.snap

@@ -734,6 +734,39 @@ exports[`renders text with reverseTheme true with reversible color 1`] = `
 </Text>
 `;
 
+exports[`renders text with semantic color 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(197, 90%, 12%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Test Text
+</Text>
+`;
+
 exports[`renders text with small size 1`] = `
 <Text
   accessibilityRole="text"
@@ -868,3 +901,163 @@ exports[`renders text with white color 1`] = `
   Test Text
 </Text>
 `;
+
+exports[`underline renders text with dashed underline 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(197, 15%, 45%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+      {
+        "textDecorationStyle": "dashed",
+      },
+      {
+        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationLine": "underline",
+      },
+    ]
+  }
+>
+  Test Text
+</Text>
+`;
+
+exports[`underline renders text with dotted underline 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(197, 15%, 45%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+      {
+        "textDecorationStyle": "dotted",
+      },
+      {
+        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationLine": "underline",
+      },
+    ]
+  }
+>
+  Test Text
+</Text>
+`;
+
+exports[`underline renders text with double underline 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(197, 15%, 45%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+      {
+        "textDecorationStyle": "double",
+      },
+      {
+        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationLine": "underline",
+      },
+    ]
+  }
+>
+  Test Text
+</Text>
+`;
+
+exports[`underline renders text with solid underline 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(197, 15%, 45%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+      {
+        "textDecorationStyle": "solid",
+      },
+      {
+        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationLine": "underline",
+      },
+    ]
+  }
+>
+  Test Text
+</Text>
+`;