@jobber/components-native 0.11.0 → 0.12.0

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { TextAlign, TextColor, TruncateLength, TypographyProps } from "../Typography";
+type HeadingColor = Extract<TextColor, "text" | "subdued" | "heading">;
+export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";
+interface HeadingProps<T extends HeadingLevel> extends Pick<TypographyProps<"base">, "selectable"> {
+    /**
+     * Text to display.
+     */
+    readonly children: string;
+    /**
+     * The type of heading, e.g., "Title"
+     */
+    readonly level?: T;
+    /**
+     * The text color of heading
+     */
+    readonly variation?: HeadingColor;
+    /**
+     * Uses the reverse variant of the text color for the heading
+     */
+    readonly reverseTheme?: boolean;
+    /**
+     * Alignment of heading
+     */
+    readonly align?: TextAlign;
+    /**
+     * The maximum amount of lines the text can occupy before being truncated with "...".
+     * Uses predefined string values that correspond to a doubling scale for the amount of lines.
+     */
+    readonly maxLines?: TruncateLength;
+    /**
+     * Allow text to be resized based on user's device display scale
+     */
+    readonly allowFontScaling?: boolean;
+}
+export declare function Heading<T extends HeadingLevel = "heading">({ children, level, variation, reverseTheme, align, maxLines, allowFontScaling, selectable, }: HeadingProps<T>): JSX.Element;
+export {};

package/dist/types/src/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from "./Heading";
+export type { HeadingLevel } from "./Heading";

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

@@ -11,3 +11,4 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./Heading";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -47,5 +47,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "91380d5821e334f130fcf7a02290b25548fa05e2"
+  "gitHead": "b059ff05b89ebdd41e79b4b2cf761e91706bc9c9"
 }

package/src/Heading/Heading.test.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Heading } from "./Heading";
+
+describe("when Heading called with text as the only prop", () => {
+  it("should match snapshot", () => {
+    const view = render(<Heading>Default Heading</Heading>).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with reverseTheme", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading reverseTheme>Reverse Theme Heading</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with title variation", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading level={"title"}>Title Heading</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with Subtitle variation", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading level={"subtitle"}>Subtitle</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with sub-heading variation", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading level={"subHeading"}>Sub-Heading</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with sub-heading variation and text-color", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading level={"subHeading"} variation={"subdued"}>
+        Sub-Heading
+      </Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with an alignment", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading align={"end"}>Text Aligned Right</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});
+
+describe("when Heading called with maxLines", () => {
+  it("should match snapshot", () => {
+    const view = render(
+      <Heading maxLines="single">Text Aligned Right</Heading>,
+    ).toJSON();
+
+    expect(view).toMatchSnapshot();
+  });
+});

package/src/Heading/Heading.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import {
+  FontFamily,
+  TextAlign,
+  TextColor,
+  TruncateLength,
+  Typography,
+  TypographyProps,
+} from "../Typography";
+import { tokens } from "../utils/design";
+
+type HeadingStyle = Pick<
+  TypographyProps<FontFamily>,
+  "fontFamily" | "fontWeight" | "size" | "lineHeight" | "color"
+>;
+type HeadingColor = Extract<TextColor, "text" | "subdued" | "heading">;
+export type HeadingLevel = "title" | "subtitle" | "heading" | "subHeading";
+
+interface HeadingProps<T extends HeadingLevel>
+  extends Pick<TypographyProps<"base">, "selectable"> {
+  /**
+   * Text to display.
+   */
+  readonly children: string;
+
+  /**
+   * The type of heading, e.g., "Title"
+   */
+  readonly level?: T;
+
+  /**
+   * The text color of heading
+   */
+  readonly variation?: HeadingColor;
+
+  /**
+   * Uses the reverse variant of the text color for the heading
+   */
+  readonly reverseTheme?: boolean;
+
+  /**
+   * Alignment of heading
+   */
+  readonly align?: TextAlign;
+
+  /**
+   * The maximum amount of lines the text can occupy before being truncated with "...".
+   * Uses predefined string values that correspond to a doubling scale for the amount of lines.
+   */
+  readonly maxLines?: TruncateLength;
+
+  /**
+   * Allow text to be resized based on user's device display scale
+   */
+  readonly allowFontScaling?: boolean;
+}
+
+const maxScaledFontSize: Record<HeadingLevel, number> = {
+  subHeading: tokens["typography--fontSize-base"] * 1.375,
+  heading: tokens["typography--fontSize-base"] * 1.5,
+  subtitle: tokens["typography--fontSize-base"] * 1.5,
+  title: tokens["typography--fontSize-base"] * 2.125,
+};
+
+export function Heading<T extends HeadingLevel = "heading">({
+  children,
+  level,
+  variation = "heading",
+  reverseTheme = false,
+  align,
+  maxLines = "unlimited",
+  allowFontScaling = true,
+  selectable,
+}: HeadingProps<T>): JSX.Element {
+  const headingStyle = getHeadingStyle(level, variation);
+  const accessibilityRole = "header";
+
+  return (
+    <Typography
+      {...{
+        ...headingStyle,
+        accessibilityRole,
+        reverseTheme,
+        align,
+        maxLines,
+        allowFontScaling,
+      }}
+      maxFontScaleSize={maxScaledFontSize[level as HeadingLevel]}
+      selectable={selectable}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+function getHeadingStyle(
+  level: HeadingLevel = "heading",
+  variation: HeadingColor,
+): HeadingStyle {
+  const headingLevelToStyle: Record<HeadingLevel, HeadingStyle> = {
+    title: {
+      fontFamily: "display",
+      fontWeight: "black",
+      size: "jumbo",
+      lineHeight: "jumbo",
+      color: variation,
+    },
+    subtitle: {
+      fontFamily: "display",
+      fontWeight: "extraBold",
+      size: "largest",
+      lineHeight: "largest",
+      color: variation,
+    },
+    heading: {
+      fontFamily: "display",
+      fontWeight: "extraBold",
+      size: "larger",
+      lineHeight: "large",
+      color: variation,
+    },
+    subHeading: {
+      fontFamily: "base",
+      fontWeight: "semiBold",
+      size: "default",
+      lineHeight: "base",
+      color: variation,
+    },
+  };
+
+  return headingLevelToStyle[level];
+}

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

@@ -0,0 +1,270 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when Heading called with Subtitle variation should match snapshot 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={1}
+  selectable={true}
+  selectionColor="rgb(160, 215, 42)"
+  style={
+    [
+      {
+        "fontFamily": "jobberpro-xbd",
+      },
+      {
+        "color": "rgb(1, 41, 57)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 24,
+        "lineHeight": 28,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Subtitle
+</Text>
+`;
+
+exports[`when Heading called with an alignment should match snapshot 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="rgb(160, 215, 42)"
+  style={
+    [
+      {
+        "fontFamily": "jobberpro-xbd",
+      },
+      {
+        "color": "rgb(1, 41, 57)",
+      },
+      {
+        "textAlign": "right",
+      },
+      {
+        "fontSize": 20,
+        "lineHeight": 22,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Text Aligned Right
+</Text>
+`;
+
+exports[`when Heading called with maxLines should match snapshot 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  numberOfLines={1}
+  selectable={true}
+  selectionColor="rgb(160, 215, 42)"
+  style={
+    [
+      {
+        "fontFamily": "jobberpro-xbd",
+      },
+      {
+        "color": "rgb(1, 41, 57)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 20,
+        "lineHeight": 22,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Text Aligned Right
+</Text>
+`;
+
+exports[`when Heading called with reverseTheme should match snapshot 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="rgb(160, 215, 42)"
+  style={
+    [
+      {
+        "fontFamily": "jobberpro-xbd",
+      },
+      {
+        "color": "rgba(255, 255, 255, 1)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 20,
+        "lineHeight": 22,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Reverse Theme Heading
+</Text>
+`;
+
+exports[`when Heading called with sub-heading variation and text-color should match snapshot 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={1.375}
+  selectable={true}
+  selectionColor="rgb(160, 215, 42)"
+  style={
+    [
+      {
+        "fontFamily": "inter-semibold",
+      },
+      {
+        "color": "rgba(101, 120, 132, 1)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Sub-Heading
+</Text>
+`;
+
+exports[`when Heading called with sub-heading variation should match snapshot 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={1.375}
+  selectable={true}
+  selectionColor="rgb(160, 215, 42)"
+  style={
+    [
+      {
+        "fontFamily": "inter-semibold",
+      },
+      {
+        "color": "rgb(1, 41, 57)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Sub-Heading
+</Text>
+`;
+
+exports[`when Heading called with text as the only prop should match snapshot 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  selectable={true}
+  selectionColor="rgb(160, 215, 42)"
+  style={
+    [
+      {
+        "fontFamily": "jobberpro-xbd",
+      },
+      {
+        "color": "rgb(1, 41, 57)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 20,
+        "lineHeight": 22,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Default Heading
+</Text>
+`;
+
+exports[`when Heading called with title variation should match snapshot 1`] = `
+<Text
+  accessibilityRole="header"
+  adjustsFontSizeToFit={false}
+  allowFontScaling={true}
+  collapsable={false}
+  maxFontSizeMultiplier={1.0625}
+  selectable={true}
+  selectionColor="rgb(160, 215, 42)"
+  style={
+    [
+      {
+        "fontFamily": "jobberpro-blk",
+      },
+      {
+        "color": "rgb(1, 41, 57)",
+      },
+      {
+        "textAlign": "left",
+      },
+      {
+        "fontSize": 32,
+        "lineHeight": 36,
+      },
+      {
+        "letterSpacing": 0,
+      },
+    ]
+  }
+>
+  Title Heading
+</Text>
+`;

package/src/Heading/index.ts

@@ -0,0 +1,2 @@
+export { Heading } from "./Heading";
+export type { HeadingLevel } from "./Heading";

package/src/index.ts

@@ -11,3 +11,4 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./Heading";