@jobber/components-native 0.72.1 → 0.72.2

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

@@ -95,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" | "interactiveSubtle" | "destructive" | "learning" | "subtle" | "onPrimary";
-export type TextVariation = "success" | "interactive" | "interactiveSubtle" | "error" | "base" | "subdued" | "warn" | "info" | "disabled" | "destructive" | "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.72.1",
+  "version": "0.72.2",
   "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": "6dbe1a431543cacdc9e0b0f4896b7866bc1ae12d"
+  "gitHead": "5bf179fd86de1628e28da194dd8cc4c2d51ed9ab"
 }

package/src/Typography/Typography.style.ts

@@ -93,6 +93,10 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     textDecorationLine: "underline",
   },
 
+  /**
+   * Alignments
+   */
+
   startAlign: {
     textAlign: "left",
   },
@@ -109,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"],
@@ -205,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"],
   },
@@ -229,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: {
@@ -285,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"],
   },
@@ -305,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"],
@@ -354,6 +564,10 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     lineHeight: extravagantLineHeight,
   },
 
+  /**
+   * Line Heights
+   */
+
   extravagantLineHeight: {
     lineHeight: extravagantLineHeight,
   },
@@ -381,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();

package/src/Typography/Typography.tsx

@@ -310,8 +310,8 @@ export type DisplayStyle = Extract<FontStyle, "regular">;
 
 export type TextColor =
   | TextVariation
+  // Base colors for backwards compatibility
   | "default"
-  | "blue"
   | "blueDark"
   | "white"
   | "green"
@@ -335,30 +335,89 @@ export type TextColor =
   | "tealDark"
   | "indigoDark"
   | "navy"
-  | "text"
+
+  // Typography
   | "heading"
+  | "text"
   | "textSecondary"
   | "textReverse"
   | "textReverseSecondary"
-  | "interactive"
-  | "interactiveSubtle"
-  | "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"
   | "interactiveSubtle"
-  | "error"
-  | "base"
-  | "subdued"
-  | "warn"
-  | "info"
+  | "successOnSurface"
+  | "critical"
+  | "warning"
+  | "informativeOnSurface"
   | "disabled"
   | "destructive"
-  | "critical";
+
+  // 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"