@jobber/components-native 0.25.1 → 0.26.0

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { Spacing } from "../Content";
+import { TextLevel } from "../Text";
+interface TextListProps {
+    /**
+     * Text to display.
+     */
+    readonly items?: string[];
+    /**
+     * Change the appearance of the text
+     */
+    readonly emphasis?: "strong";
+    /**
+     * Visual hierarchy of the text.
+     * @default "text"
+     */
+    readonly level?: TextLevel;
+    /**
+     * The amount of spacing that content will give.
+     * @default "none"
+     */
+    readonly spacing?: Spacing;
+    /**
+     * The amount of spacing that will be applied between the list items.
+     * @default "none"
+     */
+    readonly childSpacing?: Spacing;
+}
+export declare function TextList({ items, childSpacing, emphasis, level, spacing, }: TextListProps): JSX.Element;
+export {};

package/dist/types/src/TextList/TextList.style.d.ts

@@ -0,0 +1,14 @@
+export declare const styles: {
+    details: {
+        flexDirection: "column";
+        marginTop: number;
+    };
+    detail: {
+        flexDirection: "row";
+        paddingLeft: number;
+    };
+    detailText: {
+        paddingLeft: number;
+        flex: number;
+    };
+};

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

@@ -0,0 +1 @@
+export { TextList } from "./TextList";

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

@@ -17,6 +17,7 @@ export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputPressable";
 export * from "./InputText";
+export * from "./TextList";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
 export * from "./Switch";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -55,5 +55,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "7848543f52995ac5895fb9c96f0cf774f71966e7"
+  "gitHead": "8b036ebea9748a095b6a1d29ea2b45c0958a286b"
 }

package/src/TextList/TextList.style.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  details: {
+    flexDirection: "column",
+    marginTop: tokens["space-small"],
+  },
+  detail: {
+    flexDirection: "row",
+    paddingLeft: tokens["space-small"],
+  },
+  detailText: {
+    paddingLeft: tokens["space-small"],
+    flex: 1,
+  },
+});

package/src/TextList/TextList.test.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { TextList } from "./TextList";
+
+describe("TextList", () => {
+  describe("when the bulletItems is provided", () => {
+    it("displays the text list", () => {
+      const items = ["this is list item uno", "this is list item dos"];
+      const tree = render(<TextList items={items} />);
+
+      expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it("displays will not display a bulleted list", () => {
+      const tree = render(<TextList />);
+
+      expect(tree.toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/TextList/TextList.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./TextList.style";
+import { Content, Spacing } from "../Content";
+import { Text, TextLevel } from "../Text";
+
+const BULLET_SYMBOL = `\u2022`;
+
+interface TextListProps {
+  /**
+   * Text to display.
+   */
+  readonly items?: string[];
+
+  /**
+   * Change the appearance of the text
+   */
+  readonly emphasis?: "strong";
+
+  /**
+   * Visual hierarchy of the text.
+   * @default "text"
+   */
+  readonly level?: TextLevel;
+
+  /**
+   * The amount of spacing that content will give.
+   * @default "none"
+   */
+  readonly spacing?: Spacing;
+
+  /**
+   * The amount of spacing that will be applied between the list items.
+   * @default "none"
+   */
+  readonly childSpacing?: Spacing;
+}
+
+export function TextList({
+  items,
+  childSpacing = "none",
+  emphasis,
+  level = "text",
+  spacing = "none",
+}: TextListProps): JSX.Element {
+  return (
+    <>
+      {items && (
+        <View style={styles.details}>
+          <Content spacing={spacing} childSpacing={childSpacing}>
+            {items.map((item, index) => (
+              <View style={styles.detail} key={index}>
+                <Text level={level} emphasis={emphasis}>
+                  {BULLET_SYMBOL}
+                </Text>
+                <View style={styles.detailText}>
+                  <Text level={level} emphasis={emphasis}>
+                    {item}
+                  </Text>
+                </View>
+              </View>
+            ))}
+          </Content>
+        </View>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextList when the bulletItems is provided displays the text list 1`] = `
+<View
+  style={
+    {
+      "flexDirection": "column",
+      "marginTop": 8,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        {
+          "padding": 0,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {},
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "paddingLeft": 8,
+          }
+        }
+      >
+        <Text
+          accessibilityRole="text"
+          adjustsFontSizeToFit={false}
+          allowFontScaling={true}
+          collapsable={false}
+          maxFontSizeMultiplier={3.125}
+          selectable={true}
+          selectionColor="rgb(132, 234, 0)"
+          style={
+            [
+              {
+                "fontFamily": "inter-regular",
+              },
+              {
+                "color": "rgb(66, 78, 86)",
+              },
+              {
+                "textAlign": "left",
+              },
+              {
+                "fontSize": 16,
+                "lineHeight": 20,
+              },
+              {
+                "letterSpacing": 0,
+              },
+            ]
+          }
+        >
+          •
+        </Text>
+        <View
+          style={
+            {
+              "flex": 1,
+              "paddingLeft": 8,
+            }
+          }
+        >
+          <Text
+            accessibilityRole="text"
+            adjustsFontSizeToFit={false}
+            allowFontScaling={true}
+            collapsable={false}
+            maxFontSizeMultiplier={3.125}
+            selectable={true}
+            selectionColor="rgb(132, 234, 0)"
+            style={
+              [
+                {
+                  "fontFamily": "inter-regular",
+                },
+                {
+                  "color": "rgb(66, 78, 86)",
+                },
+                {
+                  "textAlign": "left",
+                },
+                {
+                  "fontSize": 16,
+                  "lineHeight": 20,
+                },
+                {
+                  "letterSpacing": 0,
+                },
+              ]
+            }
+          >
+            this is list item uno
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        [
+          {},
+          {
+            "padding": 0,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "flexDirection": "row",
+            "paddingLeft": 8,
+          }
+        }
+      >
+        <Text
+          accessibilityRole="text"
+          adjustsFontSizeToFit={false}
+          allowFontScaling={true}
+          collapsable={false}
+          maxFontSizeMultiplier={3.125}
+          selectable={true}
+          selectionColor="rgb(132, 234, 0)"
+          style={
+            [
+              {
+                "fontFamily": "inter-regular",
+              },
+              {
+                "color": "rgb(66, 78, 86)",
+              },
+              {
+                "textAlign": "left",
+              },
+              {
+                "fontSize": 16,
+                "lineHeight": 20,
+              },
+              {
+                "letterSpacing": 0,
+              },
+            ]
+          }
+        >
+          •
+        </Text>
+        <View
+          style={
+            {
+              "flex": 1,
+              "paddingLeft": 8,
+            }
+          }
+        >
+          <Text
+            accessibilityRole="text"
+            adjustsFontSizeToFit={false}
+            allowFontScaling={true}
+            collapsable={false}
+            maxFontSizeMultiplier={3.125}
+            selectable={true}
+            selectionColor="rgb(132, 234, 0)"
+            style={
+              [
+                {
+                  "fontFamily": "inter-regular",
+                },
+                {
+                  "color": "rgb(66, 78, 86)",
+                },
+                {
+                  "textAlign": "left",
+                },
+                {
+                  "fontSize": 16,
+                  "lineHeight": 20,
+                },
+                {
+                  "letterSpacing": 0,
+                },
+              ]
+            }
+          >
+            this is list item dos
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`TextList when the bulletItems is provided displays will not display a bulleted list 1`] = `null`;

package/src/TextList/index.ts

@@ -0,0 +1 @@
+export { TextList } from "./TextList";

package/src/index.ts

@@ -17,6 +17,7 @@ export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputPressable";
 export * from "./InputText";
+export * from "./TextList";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
 export * from "./Switch";