@jobber/components-native 0.69.1 → 0.69.3-SCOTTTHd.31

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/dist/types/src/utils/design/index.d.ts

@@ -1,2 +1,2 @@
-import { tokens as mobileFoundationBase } from "@jobber/design/foundation.native";
-export declare const tokens: typeof mobileFoundationBase;
+import { iosTokens } from "@jobber/design";
+export declare const tokens: typeof iosTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.69.1",
+  "version": "0.69.3-SCOTTTHd.31+15d0374e",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -36,8 +36,6 @@
     "build:clean": "rm -rf ./dist"
   },
   "dependencies": {
-    "@jobber/design": "^0.62.1",
-    "@jobber/hooks": "^2.10.1",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-picker/picker": "^2.4.10",
     "autolinker": "^4.0.0",
@@ -70,9 +68,9 @@
   "peerDependencies": {
     "@babel/core": "^7.4.5",
     "@react-native-community/datetimepicker": ">=6.7.0",
-    "date-fns": "^2.0.0",
-    "date-fns-tz": "*",
-    "react": "^18",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
+    "react": "^18.2.0",
     "react-intl": "^6.4.2",
     "react-native": ">=0.69.2",
     "react-native-gesture-handler": ">=2.10.0",
@@ -80,9 +78,9 @@
     "react-native-modal-datetime-picker": " >=13.0.0",
     "react-native-modalize": "^2.0.13",
     "react-native-portalize": "^1.0.7",
-    "react-native-reanimated": "^2.0.0 || ^3.0.0",
+    "react-native-reanimated": "^3.0.0",
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "a91af7d8d57e09c43c28ad9b7739d96afae6ed45"
+  "gitHead": "15d0374ed8f1863dbae171f3b6fc998e0be0097c"
 }

package/src/Button/Button.test.tsx

@@ -209,8 +209,8 @@ describe("Button", () => {
     it("renders an icon Button with same color as the Button text", () => {
       const { iconColor, textColor } = getIconAndTextColorFromRender({});
 
-      expect(iconColor).toBe(tokens["color-white"]);
-      expect(textColor).toBe(iconColor);
+      expect(iconColor).toBe("rgba(255, 255, 255, 1)");
+      expect(textColor).toBe(tokens["color-white"]);
     });
 
     it("renders the learning variation and secondary type with icon and label with the same color", () => {
@@ -218,8 +218,8 @@ describe("Button", () => {
         variation: "learning",
         type: "secondary",
       });
-      expect(iconColor).toBe(tokens["color-interactive--subtle"]);
-      expect(textColor).toBe(iconColor);
+      expect(iconColor).toBe("hsl(198, 35%, 21%)");
+      expect(textColor).toBe(tokens["color-interactive--subtle"]);
     });
 
     it("renders the destructive variation and secondary type with icon and label with the same color", () => {
@@ -227,8 +227,8 @@ describe("Button", () => {
         variation: "destructive",
         type: "secondary",
       });
-      expect(iconColor).toBe(tokens["color-destructive"]);
-      expect(textColor).toBe(iconColor);
+      expect(iconColor).toBe("hsl(6, 64%, 51%)");
+      expect(textColor).toBe(tokens["color-destructive"]);
     });
 
     it("renders the cancel variation and tertiary type with icon and label with the same color", () => {
@@ -236,8 +236,8 @@ describe("Button", () => {
         variation: "cancel",
         type: "tertiary",
       });
-      expect(iconColor).toBe(tokens["color-interactive--subtle"]);
-      expect(textColor).toBe(iconColor);
+      expect(iconColor).toBe("hsl(198, 35%, 21%)");
+      expect(textColor).toBe("hsl(198, 35%, 21%)");
     });
 
     it("renders an icon Button if only an icon is passed", () => {

package/src/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ColorValue, Pressable, View } from "react-native";
 import { XOR } from "ts-xor";
-import { tokens } from "@jobber/design/foundation";
+import { tokens } from "@jobber/design";
 import { styles } from "./Checkbox.style";
 import { Text } from "../Text";
 import { Icon } from "../Icon";

package/src/Form/components/FormActionBar/FormActionBar.tsx

@@ -35,7 +35,8 @@ export function FormActionBar({
   const buttonStyle = StyleSheet.flatten([
     styles.saveButton,
     {
-      position: keyboardHeight > 0 ? "absolute" : "relative",
+      position:
+        keyboardHeight > 0 ? ("absolute" as const) : ("relative" as const),
       bottom: 0,
     },
   ]);
@@ -45,7 +46,6 @@ export function FormActionBar({
   };
 
   return (
-    //@ts-expect-error tsc-ci
     <ReanimatedView style={buttonStyle} onLayout={onLayout}>
       {renderStickySection ? (
         renderStickySection(submit, saveButtonLabel, isFormSubmitting)

package/src/Icon/Icon.tsx

@@ -1,15 +1,6 @@
 import React from "react";
-import Svg, { FillProps, Path, SvgProps } from "react-native-svg";
-import {
-  IconColorNames,
-  IconNames,
-  IconSizes,
-  colorsClassMap,
-  getIcon,
-  iconClassMap,
-  iconStyles,
-  sizesClassMap,
-} from "@jobber/design";
+import Svg, { Path } from "react-native-svg";
+import { IconColorNames, IconNames, IconSizes, getIcon } from "@jobber/design";
 
 export interface IconProps {
   /** The icon to show.  */
@@ -46,72 +37,23 @@ export function Icon({
   customColor,
   testID,
 }: IconProps): JSX.Element {
-  const { svgClassNames, pathClassNames, paths, viewBox } = getIcon({
+  const { svgStyle, pathStyle, paths, viewBox } = getIcon({
     name,
     color,
     size,
+    format: "js",
   });
-
-  /*
-   *  This is to fix a bug where icons with built-in colours do not respect
-   *  their color property. At time of writing, if you pass a color to getIcon,
-   *  pathClassNames will return the color class first in pathClassNames.
-   *  getSvgStyle applies styles in order, so the styles in the last class
-   *  processed take precedence.
-   *
-   *  This fix reverses the order of pathClassNames, so any color-specific
-   *  CSS classes are processed last. The order of classes in pathClassNames
-   *  is not contractual, so this is potentially fragile if there are updates
-   *  to the @jobber/design package it comes from.
-   */
-  const reversedPathClassNames = pathClassNames.split(" ").reverse().join(" ");
-
-  const svgStyle = getSvgStyle(svgClassNames + " " + reversedPathClassNames);
-
   const icon = paths.map((path: string) => {
-    return <Path key={path} d={path} fill={customColor || svgStyle.fill} />;
+    return <Path key={path} d={path} fill={customColor || pathStyle.fill} />;
   });
 
   return (
-    <Svg style={svgStyle} testID={testID || name} viewBox={viewBox}>
+    <Svg
+      style={{ ...svgStyle, display: "flex" }}
+      testID={testID || name}
+      viewBox={viewBox}
+    >
       {icon}
     </Svg>
   );
 }
-
-/*
- * get svg styles based on the class names
- * @param className - list of hashed names separated by space - "_2GsLyQLHv8yNULHeXGdver _1ANbiqwd8qgeLaumvLs27n"
- * @default ""
- * @return - style object for the icon  - {"display": "flex" "height": 24, "width": 24, "verticalAlign": "middle" }
- *
- * Since the class names are hashed, we use the [name]ClassMap to find the actual class name. For example if we get
- * "_2GsLyQLHv8yNULHeXGdver _1ANbiqwd8qgeLaumvLs27n", it might map to ".icon .base". Then using the mapped class names,
- * we get the style from the css files which will be something like {"display": "flex" "height": 24, "width": 24, "verticalAlign": "middle" }
- *
- * Atlantis returns "display: inline-block" for icons, but since React Native doesn't support that, we override it with
- * the default "display" value for React Native which is "flex"
- */
-function getSvgStyle(classNames = ""): SvgProps["style"] & FillProps {
-  const classMap = {
-    ...iconClassMap,
-    ...sizesClassMap,
-    ...colorsClassMap,
-  };
-  const svgStyle = getStylesForClassNames(classNames.split(" "), classMap);
-
-  return { ...svgStyle, display: "flex" };
-}
-
-function getStylesForClassNames(
-  classNames: string[],
-  classMap: Record<string, string>,
-) {
-  return classNames.reduce(
-    (acc, className) => ({
-      ...acc,
-      ...iconStyles[classMap[className] as keyof typeof iconStyles],
-    }),
-    {},
-  );
-}

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

@@ -50,7 +50,7 @@ exports[`renders apple icon 1`] = `
       d="M18.467 12.754c-.027-2.996 2.453-4.453 2.566-4.52-1.404-2.048-3.581-2.328-4.346-2.35-1.828-.193-3.601 1.094-4.533 1.094-.95 0-2.384-1.076-3.93-1.044-1.988.03-3.849 1.182-4.87 2.97C1.25 12.55 2.82 17.91 4.838 20.856c1.01 1.443 2.189 3.055 3.733 2.998 1.51-.062 2.074-.963 3.897-.963 1.806 0 2.335.963 3.91.927 1.62-.026 2.641-1.45 3.615-2.907 1.166-1.654 1.635-3.283 1.653-3.367-.038-.013-3.147-1.2-3.178-4.79Zm-2.974-8.81c.812-1.015 1.368-2.397 1.213-3.8-1.175.053-2.646.814-3.492 1.807-.75.876-1.418 2.31-1.246 3.66 1.321.099 2.677-.666 3.525-1.666Z"
       fill={
         {
-          "payload": 4280499528,
+          "payload": 4278190080,
           "type": 0,
         }
       }
@@ -114,7 +114,7 @@ exports[`renders home icon 1`] = `
       d="M13.147 3.582a2 2 0 0 0-2.294 0l-9.426 6.599a1 1 0 1 0 1.147 1.638L5 10.121V18a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-7.88l2.427 1.7a1 1 0 0 0 1.146-1.64l-9.426-6.598ZM17 8.721V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8.72l5-3.5 5 3.5Z"
       fill={
         {
-          "payload": 4280499528,
+          "payload": 4278190080,
           "type": 0,
         }
       }
@@ -178,7 +178,7 @@ exports[`renders large arrowDown icon 1`] = `
       d="M7.703 8.291a.996.996 0 0 0-1.41.001.994.994 0 0 0 0 1.41l5 5.005a.998.998 0 0 0 1.415 0l5-5a.994.994 0 0 0 0-1.41.995.995 0 0 0-1.411-.001L12 12.584 7.703 8.291Z"
       fill={
         {
-          "payload": 4280499528,
+          "payload": 4278190080,
           "type": 0,
         }
       }
@@ -320,7 +320,7 @@ exports[`renders small more icon 1`] = `
       d="M4 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm6 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm8-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
       fill={
         {
-          "payload": 4280499528,
+          "payload": 4278190080,
           "type": 0,
         }
       }
@@ -417,11 +417,7 @@ exports[`renders thumbsDown icon 1`] = `
         "display": "flex",
         "fill": "hsl(198, 35%, 21%)",
         "height": 24,
-        "transform": [
-          {
-            "scaleY": -1,
-          },
-        ],
+        "transform": "scaleY(-1)",
         "verticalAlign": "middle",
         "width": 24,
       },
@@ -443,6 +439,16 @@ exports[`renders thumbsDown icon 1`] = `
         "type": 0,
       }
     }
+    matrix={
+      [
+        1,
+        0,
+        0,
+        1,
+        0,
+        0,
+      ]
+    }
     propList={
       [
         "fill",
@@ -453,7 +459,7 @@ exports[`renders thumbsDown icon 1`] = `
       d="M8 11.78V19h8l3-5.76v-1.29h-7.639l1.036-7.944L8 11.78ZM6.134 11l4.555-8.034c1.124-1.846 3.971-.844 3.691 1.299l-.74 5.685h6.86a.5.5 0 0 1 .5.5v3a1 1 0 0 1-.084.4l-3.276 6.648a.95.95 0 0 1-.44.453c-.132.065-.276.049-.423.049H4c-1.105 0-2-1.045-2-2.15V13a2 2 0 0 1 2-2h2.134ZM6 13H4v6h2v-6Z"
       fill={
         {
-          "payload": 4280499528,
+          "payload": 4278190080,
           "type": 0,
         }
       }

package/src/InputPressable/InputPressable.style.ts

@@ -1,4 +1,4 @@
-import { tokens } from "@jobber/design/foundation";
+import { tokens } from "@jobber/design";
 import { StyleSheet } from "react-native";
 import { typographyStyles } from "../Typography/Typography.style";
 

package/src/Menu/Menu.test.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { View } from "react-native";
-import { tokens } from "@jobber/design/foundation";
 import { Menu, MenuOptionProps, MenuProps } from ".";
 import { Icon } from "../Icon";
 import { Button } from "../Button";
@@ -130,13 +129,17 @@ describe("Menu", () => {
       });
 
       fireEvent.press(getByLabelText(menuLabel));
-      expect(getByTestId("add").props.style).toContainEqual({
-        display: "flex",
-        fill: tokens["color-critical"],
-        height: 24,
-        verticalAlign: "middle",
-        width: 24,
-      });
+      expect(getByTestId("add").props.style).toStrictEqual([
+        { backgroundColor: "transparent", borderWidth: 0 },
+        {
+          display: "flex",
+          fill: "hsl(6, 64%, 51%)",
+          height: 24,
+          verticalAlign: "middle",
+          width: 24,
+        },
+        { flex: 0, height: 24, width: 24 },
+      ]);
     });
 
     it("closes the menu after clicking on a menu option", () => {

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

@@ -9,7 +9,7 @@ const largerLineHeight = tokens["typography--lineHeight-larger"];
 const largeLineHeight = tokens["typography--lineHeight-large"];
 const baseLineHeight = tokens["typography--lineHeight-base"];
 const tightLineHeight = tokens["typography--lineHeight-tight"];
-const minisculeLineHeight = tokens["typography--lineHeight-miniscule"];
+const minusculeLineHeight = tokens["typography--lineHeight-minuscule"];
 
 const deviceFonts = {
   baseRegularRegular: {
@@ -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",
   },
@@ -282,7 +306,7 @@ export const typographyTokens: { [index: string]: TextStyle } = {
 
   smallestSize: {
     fontSize: tokens["typography--fontSize-smallest"],
-    lineHeight: minisculeLineHeight,
+    lineHeight: minusculeLineHeight,
   },
 
   smallerSize: {

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",
+      },
     ]
   }
 >

package/src/utils/design/index.ts

@@ -1,8 +1,8 @@
-import { tokens as mobileFoundationBase } from "@jobber/design/foundation.native";
 import { Platform } from "react-native";
+import { androidTokens, iosTokens } from "@jobber/design";
 
-export const tokens: typeof mobileFoundationBase = Platform.select({
-  ios: () => require("@jobber/design/foundation.ios").tokens,
-  android: () => require("@jobber/design/foundation.android").tokens,
-  default: () => require("@jobber/design/foundation.native").tokens,
+export const tokens: typeof iosTokens = Platform.select({
+  ios: () => iosTokens,
+  android: () => androidTokens,
+  default: () => androidTokens,
 })();