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

package/dist/types/src/Text/Text.d.ts

@@ -46,6 +46,12 @@ interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "
      * Use italic font style
      */
     readonly italic?: boolean;
+    /**
+     * 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" | "dotted";
     /**
      * This will make the text inaccessible to the screen reader.
      * This should be avoided unless there is a good reason.
@@ -57,5 +63,5 @@ interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "
 }
 export type TextLevel = "text" | "textSupporting";
 export declare const TEXT_MAX_SCALED_FONT_SIZES: Record<TextLevel, number>;
-export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, selectable, }: TextProps): JSX.Element;
+export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, underline, selectable, }: TextProps): JSX.Element;
 export {};

package/dist/types/src/Typography/Typography.d.ts

@@ -55,6 +55,12 @@ export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "
      * Font style
      */
     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
      */
@@ -81,7 +87,7 @@ export interface TypographyProps<T extends FontFamily> extends Pick<TextProps, "
     readonly strikeThrough?: boolean;
 }
 export declare const Typography: React.MemoExoticComponent<typeof InternalTypography>;
-declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, selectable, }: TypographyProps<T>): JSX.Element;
+declare function InternalTypography<T extends FontFamily = "base">({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, selectable, }: TypographyProps<T>): JSX.Element;
 export type FontFamily = "base" | "display";
 export type FontStyle = "regular" | "italic";
 export type FontWeight = "regular" | "medium" | "bold" | "semiBold" | "extraBold" | "black";
@@ -89,8 +95,8 @@ export type BaseWeight = Extract<FontWeight, "regular" | "medium" | "semiBold" |
 export type DisplayWeight = Extract<FontWeight, "semiBold" | "bold" | "extraBold" | "black">;
 export type BaseStyle = FontStyle;
 export type DisplayStyle = Extract<FontStyle, "regular">;
-export type TextColor = TextVariation | "default" | "blue" | "blueDark" | "white" | "green" | "greenDark" | "grey" | "greyDark" | "greyBlue" | "greyBlueDark" | "lightBlue" | "lightBlueDark" | "red" | "redDark" | "yellow" | "yellowDark" | "yellowGreenDark" | "orangeDark" | "navyDark" | "limeDark" | "purpleDark" | "pinkDark" | "tealDark" | "indigoDark" | "navy" | "text" | "heading" | "textSecondary" | "textReverse" | "textReverseSecondary" | "interactive" | "destructive" | "learning" | "subtle" | "onPrimary";
-export type TextVariation = "success" | "interactive" | "error" | "base" | "subdued" | "warn" | "info" | "disabled" | "critical";
+export type TextColor = TextVariation | "default" | "blueDark" | "white" | "green" | "greenDark" | "grey" | "greyDark" | "greyBlue" | "greyBlueDark" | "lightBlue" | "lightBlueDark" | "red" | "redDark" | "yellow" | "yellowDark" | "yellowGreenDark" | "orangeDark" | "navyDark" | "limeDark" | "purpleDark" | "pinkDark" | "tealDark" | "indigoDark" | "navy" | "heading" | "text" | "textSecondary" | "textReverse" | "textReverseSecondary" | "inactive" | "inactiveSurface" | "inactiveOnSurface" | "critical" | "criticalSurface" | "criticalOnSurface" | "warning" | "warningSurface" | "warningOnSurface" | "informative" | "informativeSurface" | "informativeOnSurface" | "success" | "successSurface" | "successOnSurface" | "interactiveHover" | "interactiveSubtleHover" | "destructiveHover" | "disabledSecondary" | "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" | "blue" | "learning" | "subtle" | "onPrimary";
+export type TextVariation = "text" | "textSecondary" | "interactive" | "interactiveSubtle" | "successOnSurface" | "critical" | "warning" | "informativeOnSurface" | "disabled" | "destructive" | "base" | "subdued" | "error" | "warn" | "info";
 export type TextTransform = "uppercase" | "lowercase" | "capitalize" | "none";
 export type TextSize = "smallest" | "smaller" | "small" | "default" | "large" | "larger" | "largest" | "jumbo" | "extravagant";
 export type TextAlign = "start" | "end" | "center" | "justify";

package/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/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.tsx

@@ -26,7 +26,7 @@ export function BottomSheetOption({
   textTransform = "capitalize",
   onPress,
 }: BottomSheetOptionProps): JSX.Element {
-  const destructiveColor = "critical";
+  const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "subdued";
 
   return (

package/src/Menu/components/MenuOption/MenuOption.tsx

@@ -18,7 +18,7 @@ export function MenuOption({
   onPress,
   setOpen,
 }: MenuOptionInternalProps): JSX.Element {
-  const destructiveColor = "critical";
+  const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "heading";
 
   return (

package/src/Text/Text.test.tsx

@@ -142,3 +142,9 @@ it("renders text that is inaccessible", () => {
     }),
   );
 });
+
+it("renders text with underline styling", () => {
+  const text = render(<Text underline="dashed">Test Text</Text>);
+
+  expect(text.toJSON()).toMatchSnapshot();
+});

package/src/Text/Text.tsx

@@ -70,6 +70,13 @@ interface TextProps
    */
   readonly italic?: boolean;
 
+  /**
+   * 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" | "dotted";
+
   /**
    * This will make the text inaccessible to the screen reader.
    * This should be avoided unless there is a good reason.
@@ -118,6 +125,7 @@ export function Text({
   italic = false,
   hideFromScreenReader = false,
   maxFontScaleSize,
+  underline,
   selectable,
 }: TextProps): JSX.Element {
   const accessibilityRole: TextAccessibilityRole = "text";
@@ -130,6 +138,7 @@ export function Text({
       fontWeight={getFontWeight({ level, emphasis })}
       maxFontScaleSize={maxFontScaleSize || TEXT_MAX_SCALED_FONT_SIZES[level]}
       selectable={selectable}
+      underline={underline}
       {...{
         ...levelStyles[level],
         allowFontScaling,

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

@@ -546,6 +546,47 @@ exports[`renders text with success variation reverseTheme true 1`] = `
 </Text>
 `;
 
+exports[`renders text with underline styling 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={3.125}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-regular",
+      },
+      {
+        "color": "hsl(198, 35%, 21%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+      {
+        "textDecorationStyle": "dashed",
+      },
+      {
+        "textDecorationColor": "hsl(197, 15%, 45%)",
+        "textDecorationLine": "underline",
+      },
+    ]
+  }
+>
+  Test Text
+</Text>
+`;
+
 exports[`renders text with warn variation 1`] = `
 <Text
   accessibilityRole="text"

package/src/Typography/Typography.style.ts

@@ -88,6 +88,15 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     fontStyle: "italic",
   },
 
+  underline: {
+    textDecorationColor: tokens["color-text--secondary"],
+    textDecorationLine: "underline",
+  },
+
+  /**
+   * Alignments
+   */
+
   startAlign: {
     textAlign: "left",
   },
@@ -104,9 +113,11 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     textAlign: "justify",
   },
 
-  blue: {
-    color: tokens["color-heading"],
-  },
+  /**
+   * Colors
+   */
+
+  // Base colors for backwards compatibility
 
   blueDark: {
     color: tokens["color-blue--dark"],
@@ -200,14 +211,11 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     color: tokens["color-navy"],
   },
 
+  // Typography
   heading: {
     color: tokens["color-heading"],
   },
 
-  headingReverse: {
-    color: tokens["color-text--reverse"],
-  },
-
   text: {
     color: tokens["color-text"],
   },
@@ -224,52 +232,267 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     color: tokens["color-text--reverse--secondary"],
   },
 
-  success: {
-    color: tokens["color-success--onSurface"],
+  // Statuses
+
+  inactive: {
+    color: tokens["color-inactive"],
   },
 
-  error: {
+  inactiveSurface: {
+    color: tokens["color-inactive--surface"],
+  },
+
+  inactiveOnSurface: {
+    color: tokens["color-inactive--onSurface"],
+  },
+
+  critical: {
     color: tokens["color-critical"],
   },
 
-  base: {
-    color: tokens["color-text"],
+  criticalSurface: {
+    color: tokens["color-critical--surface"],
   },
 
-  subdued: {
-    color: tokens["color-text--secondary"],
+  criticalOnSurface: {
+    color: tokens["color-critical--onSurface"],
   },
 
-  warn: {
+  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"],
+  },
+
+  errorReverse: {
     color: tokens["color-critical"],
   },
 
+  success: {
+    color: tokens["color-success--onSurface"],
+  },
+
   successReverse: {
     color: tokens["color-success"],
   },
 
-  errorReverse: {
-    color: tokens["color-critical"],
+  warn: {
+    color: tokens["color-warning--onSurface"],
   },
 
-  baseReverse: {
-    color: tokens["color-text--reverse"],
+  warnReverse: {
+    color: tokens["color-warning"],
+  },
+
+  subdued: {
+    color: tokens["color-text--secondary"],
   },
 
   subduedReverse: {
     color: tokens["color-text--reverse--secondary"],
   },
 
-  warnReverse: {
-    color: tokens["color-warning"],
+  info: {
+    color: tokens["color-informative--onSurface"],
   },
 
   infoReverse: {
@@ -280,14 +503,6 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     color: tokens["color-critical"],
   },
 
-  interactive: {
-    color: tokens["color-interactive"],
-  },
-
-  destructive: {
-    color: tokens["color-destructive"],
-  },
-
   learning: {
     color: tokens["color-informative"],
   },
@@ -300,9 +515,9 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     color: tokens["color-surface"],
   },
 
-  disabled: {
-    color: tokens["color-disabled"],
-  },
+  /**
+   * Sizes
+   */
 
   smallestSize: {
     fontSize: tokens["typography--fontSize-smallest"],
@@ -349,6 +564,10 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     lineHeight: extravagantLineHeight,
   },
 
+  /**
+   * Line Heights
+   */
+
   extravagantLineHeight: {
     lineHeight: extravagantLineHeight,
   },
@@ -376,6 +595,10 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     lineHeight: tightLineHeight,
   },
 
+  /**
+   * Letter Spacings
+   */
+
   baseLetterSpacing: {
     letterSpacing: tokens["typography--letterSpacing-base"],
   },

package/src/Typography/Typography.test.tsx

@@ -89,6 +89,13 @@ it("renders text with green color", () => {
   expect(typography.toJSON()).toMatchSnapshot();
 });
 
+it("renders text with semantic color", () => {
+  const typography = render(
+    <Typography color="inactiveOnSurface">Test Text</Typography>,
+  );
+  expect(typography.toJSON()).toMatchSnapshot();
+});
+
 it("renders text with default color", () => {
   const typography = render(<Typography color="default">Test Text</Typography>);
   expect(typography.toJSON()).toMatchSnapshot();
@@ -217,3 +224,16 @@ it("renders text that is inaccessible", () => {
     }),
   );
 });
+
+describe("underline", () => {
+  it.each(["solid", "double", "dotted", "dashed"] as const)(
+    "renders text with %s underline",
+    underlineStyle => {
+      const typography = render(
+        <Typography underline={underlineStyle}>Test Text</Typography>,
+      );
+
+      expect(typography.toJSON()).toMatchSnapshot();
+    },
+  );
+});