@jobber/components-native 0.24.0 → 0.24.1-migrate-te.4

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

@@ -16,6 +16,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.24.0",
+  "version": "0.24.1-migrate-te.4+d1f46563",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -53,5 +53,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "f7e84f89bafb316b80e4ba19455eb3ae4e232394"
+  "gitHead": "d1f46563a284bbab77190fb7405deb44d4c8a9ba"
 }

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/index.ts

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

package/src/index.ts

@@ -16,6 +16,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";