@jobber/components-native 0.65.5 → 0.66.1-JOB-101940.4

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

@@ -41,14 +41,14 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
           collapsable={false}
           maxFontSizeMultiplier={3.125}
           selectable={true}
-          selectionColor="rgb(132, 234, 0)"
+          selectionColor="hsl(86, 100%, 46%)"
           style={
             [
               {
                 "fontFamily": "inter-regular",
               },
               {
-                "color": "rgb(66, 78, 86)",
+                "color": "hsl(198, 35%, 21%)",
               },
               {
                 "textAlign": "left",
@@ -80,14 +80,14 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
             collapsable={false}
             maxFontSizeMultiplier={3.125}
             selectable={true}
-            selectionColor="rgb(132, 234, 0)"
+            selectionColor="hsl(86, 100%, 46%)"
             style={
               [
                 {
                   "fontFamily": "inter-regular",
                 },
                 {
-                  "color": "rgb(66, 78, 86)",
+                  "color": "hsl(198, 35%, 21%)",
                 },
                 {
                   "textAlign": "left",
@@ -132,14 +132,14 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
           collapsable={false}
           maxFontSizeMultiplier={3.125}
           selectable={true}
-          selectionColor="rgb(132, 234, 0)"
+          selectionColor="hsl(86, 100%, 46%)"
           style={
             [
               {
                 "fontFamily": "inter-regular",
               },
               {
-                "color": "rgb(66, 78, 86)",
+                "color": "hsl(198, 35%, 21%)",
               },
               {
                 "textAlign": "left",
@@ -171,14 +171,14 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
             collapsable={false}
             maxFontSizeMultiplier={3.125}
             selectable={true}
-            selectionColor="rgb(132, 234, 0)"
+            selectionColor="hsl(86, 100%, 46%)"
             style={
               [
                 {
                   "fontFamily": "inter-regular",
                 },
                 {
-                  "color": "rgb(66, 78, 86)",
+                  "color": "hsl(198, 35%, 21%)",
                 },
                 {
                   "textAlign": "left",

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

@@ -70,8 +70,8 @@ exports[`renders a thumbnail component with attachments 1`] = `
             style={
               [
                 {
-                  "backgroundColor": "rgb(241, 239, 233)",
-                  "borderColor": "rgb(218, 224, 226)",
+                  "backgroundColor": "hsl(53, 21%, 93%)",
+                  "borderColor": "hsl(200, 13%, 87%)",
                   "borderRadius": 8,
                   "borderWidth": 1,
                   "marginBottom": 8,

package/src/Typography/Typography.style.ts

@@ -64,6 +64,10 @@ export const typographyTokens: { [index: string]: TextStyle } = {
   // { fontFamily }{ fontStyle }{ fontWeight }
   ...fonts,
 
+  italic: {
+    fontStyle: "italic",
+  },
+
   startAlign: {
     textAlign: "left",
   },

package/src/Typography/Typography.tsx

@@ -146,7 +146,7 @@ function InternalTypography<T extends FontFamily = "base">({
 }: TypographyProps<T>): JSX.Element {
   const sizeAndHeight = getSizeAndHeightStyle(size, lineHeight);
   const style: StyleProp<ViewStyle>[] = [
-    getFontStyle(fontFamily, fontStyle, fontWeight),
+    getFontStyle(fontFamily, fontWeight),
     getColorStyle(color, reverseTheme),
     getAlignStyle(align),
     sizeAndHeight,
@@ -156,6 +156,11 @@ function InternalTypography<T extends FontFamily = "base">({
   if (strikeThrough) {
     style.push(styles.strikeThrough);
   }
+
+  if (fontStyle === "italic") {
+    style.push(styles.italic);
+  }
+
   const numberOfLinesForNativeText = maxNumberOfLines[maxLines];
 
   const text = getTransformedText(children, transform);
@@ -198,14 +203,11 @@ function getScaleMultiplier(maxFontScaleSize = 0, size = 1) {
 
 function getFontStyle(
   fontFamily: FontFamily = "base",
-  fontStyle: FontStyle = "regular",
   fontWeight: FontWeight = "regular",
 ) {
   const defaultBaseFontStyling = styles.baseRegularRegular;
   const defaultDisplayFontStyling = styles.displayRegularBold;
-  const styleKey = `${fontFamily}${capitalize(fontStyle)}${capitalize(
-    fontWeight,
-  )}`;
+  const styleKey = `${fontFamily}Regular${capitalize(fontWeight)}`;
   const fontStyling = styles[styleKey];
 
   if (fontStyling) {

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

@@ -7,14 +7,14 @@ exports[`renders text respecting the text direction 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "right",
@@ -41,14 +41,14 @@ exports[`renders text using the maxLines is also passed 1`] = `
   collapsable={false}
   numberOfLines={2}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -75,14 +75,14 @@ exports[`renders text with adjustsFontSizeToFit set to true 1`] = `
   collapsable={false}
   numberOfLines={1}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -108,14 +108,14 @@ exports[`renders text with black style and display as fontFamily 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "jobberpro-blk",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -141,14 +141,14 @@ exports[`renders text with bold style 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-bold",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -174,14 +174,14 @@ exports[`renders text with bold style and display as fontFamily 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "jobberpro-bd",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -207,14 +207,14 @@ exports[`renders text with bold weight and italic style 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
-        "fontFamily": "inter-regular",
+        "fontFamily": "inter-bold",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -226,6 +226,9 @@ exports[`renders text with bold weight and italic style 1`] = `
       {
         "letterSpacing": 0,
       },
+      {
+        "fontStyle": "italic",
+      },
     ]
   }
 >
@@ -240,14 +243,14 @@ exports[`renders text with center align 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "center",
@@ -273,14 +276,14 @@ exports[`renders text with default color 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -306,14 +309,14 @@ exports[`renders text with default size 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -339,14 +342,14 @@ exports[`renders text with extraBold weight and display as fontFamily 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "jobberpro-xbd",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -372,14 +375,14 @@ exports[`renders text with green color 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(50, 130, 28)",
+        "color": "hsl(107, 58%, 33%)",
       },
       {
         "textAlign": "left",
@@ -405,14 +408,14 @@ exports[`renders text with italic style 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -424,6 +427,9 @@ exports[`renders text with italic style 1`] = `
       {
         "letterSpacing": 0,
       },
+      {
+        "fontStyle": "italic",
+      },
     ]
   }
 >
@@ -438,14 +444,14 @@ exports[`renders text with large size 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -471,14 +477,14 @@ exports[`renders text with letter spacing 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -504,14 +510,14 @@ exports[`renders text with line height override 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -537,14 +543,14 @@ exports[`renders text with lowercase transform 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -570,7 +576,7 @@ exports[`renders text with multiple properties 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
@@ -603,14 +609,14 @@ exports[`renders text with no additional props 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -636,14 +642,14 @@ exports[`renders text with regular style 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -669,14 +675,14 @@ exports[`renders text with reverseTheme false with reversible color 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(14, 78, 26)",
+        "color": "hsl(107, 64%, 16%)",
       },
       {
         "textAlign": "left",
@@ -702,14 +708,14 @@ exports[`renders text with reverseTheme true with reversible color 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgb(50, 130, 28)",
+        "color": "hsl(107, 58%, 33%)",
       },
       {
         "textAlign": "left",
@@ -735,14 +741,14 @@ exports[`renders text with small size 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -768,14 +774,14 @@ exports[`renders text with strikethough styling 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -804,14 +810,14 @@ exports[`renders text with uppercase transform 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {
         "fontFamily": "inter-regular",
       },
       {
-        "color": "rgba(101, 120, 132, 1)",
+        "color": "hsl(197, 15%, 45%)",
       },
       {
         "textAlign": "left",
@@ -837,7 +843,7 @@ exports[`renders text with white color 1`] = `
   allowFontScaling={true}
   collapsable={false}
   selectable={true}
-  selectionColor="rgb(132, 234, 0)"
+  selectionColor="hsl(86, 100%, 46%)"
   style={
     [
       {