@jobber/components-native 0.71.2 → 0.72.0

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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.71.2",
+  "version": "0.72.0",
   "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": "88ff540bdd1af6f58af44e60d20fe00921084adb"
+  "gitHead": "26cb076b2f8a8cbdaee1df6be72b211987a4e5eb"
 }

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,11 @@ export const typographyTokens: { [index: string]: TextStyle } = {
     fontStyle: "italic",
   },
 
+  underline: {
+    textDecorationColor: tokens["color-text--secondary"],
+    textDecorationLine: "underline",
+  },
+
   startAlign: {
     textAlign: "left",
   },

package/src/Typography/Typography.test.tsx

@@ -217,3 +217,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();
+    },
+  );
+});

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);

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

@@ -868,3 +868,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>
+`;