@jobber/components-native 0.69.3 → 0.69.4

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

@@ -42,6 +42,10 @@ interface TextProps extends Pick<TypographyProps<"base">, "maxFontScaleSize" | "
      * Have text styled with strike through
      */
     readonly strikeThrough?: boolean;
+    /**
+     * Use italic font style
+     */
+    readonly italic?: boolean;
     /**
      * This will make the text inaccessible to the screen reader.
      * This should be avoided unless there is a good reason.
@@ -53,5 +57,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, hideFromScreenReader, maxFontScaleSize, selectable, }: TextProps): JSX.Element;
+export declare function Text({ level, variation, emphasis, allowFontScaling, adjustsFontSizeToFit, maxLines, align, children, reverseTheme, strikeThrough, italic, hideFromScreenReader, maxFontScaleSize, selectable, }: TextProps): JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.69.3",
+  "version": "0.69.4",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "98d9817ee15a20b4621d662f673ea81df25e01df"
+  "gitHead": "540ed88344aa92c9f29d99113173d6278c54b55a"
 }

package/src/Text/Text.test.tsx

@@ -127,6 +127,11 @@ it("renders with strikethrough styling", () => {
   expect(text.toJSON()).toMatchSnapshot();
 });
 
+it("renders with italic styling", () => {
+  const text = render(<Text italic>Test Text</Text>);
+  expect(text.toJSON()).toMatchSnapshot();
+});
+
 it("renders text that is inaccessible", () => {
   const text = render(<Text hideFromScreenReader={true}>Test Text</Text>);
   expect(text.root.props).toEqual(

package/src/Text/Text.tsx

@@ -65,6 +65,11 @@ interface TextProps
    */
   readonly strikeThrough?: boolean;
 
+  /**
+   * Use italic font style
+   */
+  readonly italic?: boolean;
+
   /**
    * This will make the text inaccessible to the screen reader.
    * This should be avoided unless there is a good reason.
@@ -110,6 +115,7 @@ export function Text({
   children,
   reverseTheme = false,
   strikeThrough = false,
+  italic = false,
   hideFromScreenReader = false,
   maxFontScaleSize,
   selectable,
@@ -120,7 +126,7 @@ export function Text({
     <Typography
       color={variation}
       fontFamily="base"
-      fontStyle="regular"
+      fontStyle={italic ? "italic" : "regular"}
       fontWeight={getFontWeight({ level, emphasis })}
       maxFontScaleSize={maxFontScaleSize || TEXT_MAX_SCALED_FONT_SIZES[level]}
       selectable={selectable}
@@ -133,6 +139,7 @@ export function Text({
         reverseTheme,
         maxLines,
         strikeThrough,
+        italic,
         hideFromScreenReader,
       }}
     >

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

@@ -580,6 +580,43 @@ exports[`renders text with warn variation 1`] = `
 </Text>
 `;
 
+exports[`renders with italic styling 1`] = `
+<Text
+  accessibilityRole="text"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={3.125}
+  selectable={true}
+  selectionColor="hsl(86, 100%, 46%)"
+  style={
+    [
+      {
+        "fontFamily": "inter-italic",
+      },
+      {
+        "color": "hsl(198, 35%, 21%)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+      {
+        "fontStyle": "italic",
+      },
+    ]
+  }
+>
+  Test Text
+</Text>
+`;
+
 exports[`renders with strikethrough styling 1`] = `
 <Text
   accessibilityRole="text"

package/src/Typography/Typography.style.ts

@@ -32,6 +32,26 @@ const deviceFonts = {
     fontFamily: "inter-extrabold",
   },
 
+  baseItalicRegular: {
+    fontFamily: "inter-italic",
+  },
+
+  baseItalicMedium: {
+    fontFamily: "inter-italic-medium",
+  },
+
+  baseItalicBold: {
+    fontFamily: "inter-italic-bold",
+  },
+
+  baseItalicSemiBold: {
+    fontFamily: "inter-italic-semibold",
+  },
+
+  baseItalicExtraBold: {
+    fontFamily: "inter-italic-extrabold",
+  },
+
   displayRegularBold: {
     fontFamily: "jobberpro-bd",
   },
@@ -64,6 +84,10 @@ export const typographyTokens: { [index: string]: TextStyle } = {
   // { fontFamily }{ fontStyle }{ fontWeight }
   ...fonts,
 
+  italic: {
+    fontStyle: "italic",
+  },
+
   startAlign: {
     textAlign: "left",
   },

package/src/Typography/Typography.tsx

@@ -106,6 +106,7 @@ export interface TypographyProps<T extends FontFamily>
    * of the TextInput
    */
   readonly hideFromScreenReader?: boolean;
+
   /**
    * Have text styled with strike through
    */
@@ -156,6 +157,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);

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

@@ -211,7 +211,7 @@ exports[`renders text with bold weight and italic style 1`] = `
   style={
     [
       {
-        "fontFamily": "inter-regular",
+        "fontFamily": "inter-italic-bold",
       },
       {
         "color": "hsl(197, 15%, 45%)",
@@ -226,6 +226,9 @@ exports[`renders text with bold weight and italic style 1`] = `
       {
         "letterSpacing": 0,
       },
+      {
+        "fontStyle": "italic",
+      },
     ]
   }
 >
@@ -409,7 +412,7 @@ exports[`renders text with italic style 1`] = `
   style={
     [
       {
-        "fontFamily": "inter-regular",
+        "fontFamily": "inter-italic",
       },
       {
         "color": "hsl(197, 15%, 45%)",
@@ -424,6 +427,9 @@ exports[`renders text with italic style 1`] = `
       {
         "letterSpacing": 0,
       },
+      {
+        "fontStyle": "italic",
+      },
     ]
   }
 >