@jobber/components-native 0.3.0 → 0.5.0

package/src/Content/Content.test.tsx

@@ -0,0 +1,260 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { View } from "react-native";
+import { ReactTestInstance } from "react-test-renderer";
+import { Content, ContentProps } from "./Content";
+import { spaceStyles } from "./ContentSpaceAround.style";
+import { verticalStyles } from "./ContentVertical.style";
+import { horizontalStyles } from "./ContentHorizontal.style";
+import { Text } from "../Text";
+
+function getContentComponent(parentView: ReactTestInstance) {
+  return (parentView?.children[0] as ReactTestInstance)
+    ?.children[0] as ReactTestInstance;
+}
+
+function getContentChildren(contentView: ReactTestInstance) {
+  return (contentView.children[0] as ReactTestInstance)
+    ?.children as ReactTestInstance[];
+}
+
+const text = "🌚 I am the text 🌞";
+
+function setupContent(
+  props?: Pick<ContentProps, "spacing" | "childSpacing" | "direction">,
+) {
+  const container = render(
+    <View accessibilityLabel="contentView">
+      <Content
+        spacing={props?.spacing}
+        childSpacing={props?.childSpacing}
+        direction={props?.direction}
+      >
+        <Text>{text}</Text>
+        <Text>{text}</Text>
+      </Content>
+    </View>,
+  );
+
+  const parentView = container.getByLabelText("contentView");
+  const contentView = getContentComponent(parentView);
+  const contentChildren = getContentChildren(contentView);
+  return { ...container, parentView, contentView, contentChildren };
+}
+
+describe("Space around", () => {
+  it("should have a base padding around the component", () => {
+    const { contentView } = setupContent();
+    expect(contentView.props.style).toContainEqual(spaceStyles.baseSpace);
+  });
+
+  it("should have a small padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "small" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.smallSpace);
+  });
+
+  it("should have a large padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "large" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.largeSpace);
+  });
+
+  it("should have a no padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "none" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.noneSpace);
+  });
+
+  it("should have a smaller padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "smaller" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.smallerSpace);
+  });
+
+  it("should have the smallest padding around the component", () => {
+    const { contentView } = setupContent({ spacing: "smallest" });
+    expect(contentView.props.style).toContainEqual(spaceStyles.smallestSpace);
+  });
+});
+
+describe("Vertical", () => {
+  it("should have the vertical wrapper style", () => {
+    const { contentView } = setupContent();
+    expect(contentView.props.style).toContainEqual(verticalStyles.wrapper);
+  });
+
+  describe("Child space between", () => {
+    it("should have a base top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "base",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.baseChildSpace,
+      );
+    });
+
+    it("should have a small top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "small",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.smallChildSpace,
+      );
+    });
+
+    it("should have a large top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "large",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.largeChildSpace,
+      );
+    });
+
+    it("should have no top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "none",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.noneChildSpace,
+      );
+    });
+
+    it("should have a smaller top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "smaller",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.smallerChildSpace,
+      );
+    });
+
+    it("should have the smallest top padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "vertical",
+        childSpacing: "smallest",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        verticalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        verticalStyles.smallestChildSpace,
+      );
+    });
+  });
+});
+
+describe("Horizontal", () => {
+  it("should have the horizontal wrapper style", () => {
+    const { contentView } = setupContent({ direction: "horizontal" });
+    expect(contentView.props.style).toContainEqual(horizontalStyles.wrapper);
+  });
+
+  describe("Child space between", () => {
+    it("should have a base left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "base",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.baseChildSpace,
+      );
+    });
+
+    it("should have a small left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "small",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.smallChildSpace,
+      );
+    });
+
+    it("should have a large left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "large",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.largeChildSpace,
+      );
+    });
+
+    it("should have no left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "none",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.noneChildSpace,
+      );
+    });
+
+    it("should have a smaller left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "smaller",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.smallerChildSpace,
+      );
+    });
+    it("should have the smallest left padding on every child but the first", () => {
+      const { contentChildren } = setupContent({
+        direction: "horizontal",
+        childSpacing: "smallest",
+      });
+
+      expect(contentChildren[0].props.style).toEqual([
+        horizontalStyles.childWrapper,
+      ]);
+      expect(contentChildren[1].props.style).toContainEqual(
+        horizontalStyles.smallestChildSpace,
+      );
+    });
+  });
+});

package/src/Content/Content.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode } from "react";
+import { View } from "react-native";
+import { horizontalStyles } from "./ContentHorizontal.style";
+import { verticalStyles } from "./ContentVertical.style";
+import { spaceStyles } from "./ContentSpaceAround.style";
+
+export type Spacing =
+  | "none"
+  | "base"
+  | "small"
+  | "smaller"
+  | "smallest"
+  | "large";
+
+export interface ContentProps {
+  /**
+   * The child or children that will be given spacing.
+   */
+  readonly children: ReactNode;
+
+  /**
+   * The amount of spacing that content will give.
+   */
+  readonly spacing?: Spacing;
+
+  /**
+   * The amount of spacing that will be applied between children.
+   */
+  readonly childSpacing?: Spacing;
+
+  readonly direction?: "horizontal" | "vertical";
+}
+
+export function Content({
+  children,
+  spacing = "base",
+  childSpacing = "base",
+  direction = "vertical",
+}: ContentProps): JSX.Element {
+  const styles = direction === "horizontal" ? horizontalStyles : verticalStyles;
+  const styleName = `${spacing}Space` as const;
+  const containerStyle = spaceStyles[styleName];
+
+  return (
+    <View style={[styles.wrapper, containerStyle]}>{renderChildren()}</View>
+  );
+
+  function renderChildren() {
+    const childArray = React.Children.toArray(children);
+    if (childArray.length === 1) return children;
+
+    const spaceName = `${childSpacing}ChildSpace` as const;
+    const childContainerStyle = styles[spaceName];
+
+    return childArray.map((child, index) => {
+      // In order to get spacing between the children, we apply the child spacing on each of
+      // the children except for the first (top) child
+      const childStyle = index !== 0 ? [childContainerStyle] : [];
+      return (
+        <View key={index} style={[styles.childWrapper, ...childStyle]}>
+          {child}
+        </View>
+      );
+    });
+  }
+}

package/src/Content/ContentHorizontal.style.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const horizontalStyles = StyleSheet.create({
+  wrapper: {
+    flexDirection: "row",
+  },
+
+  childWrapper: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+  },
+
+  noneChildSpace: {
+    padding: 0,
+  },
+
+  smallestChildSpace: {
+    paddingLeft: tokens["space-smallest"],
+  },
+
+  smallerChildSpace: {
+    paddingLeft: tokens["space-smaller"],
+  },
+
+  smallChildSpace: {
+    paddingLeft: tokens["space-small"],
+  },
+
+  baseChildSpace: {
+    paddingLeft: tokens["space-base"],
+  },
+
+  largeChildSpace: {
+    paddingLeft: tokens["space-large"],
+  },
+});

package/src/Content/ContentSpaceAround.style.ts

@@ -0,0 +1,28 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const spaceStyles = StyleSheet.create({
+  noneSpace: {
+    padding: 0,
+  },
+
+  smallestSpace: {
+    padding: tokens["space-smallest"],
+  },
+
+  smallerSpace: {
+    padding: tokens["space-smaller"],
+  },
+
+  smallSpace: {
+    padding: tokens["space-small"],
+  },
+
+  baseSpace: {
+    padding: tokens["space-base"],
+  },
+
+  largeSpace: {
+    padding: tokens["space-large"],
+  },
+});

package/src/Content/ContentVertical.style.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const verticalStyles = StyleSheet.create({
+  wrapper: {
+    // No style. Default `<View />` styling should suffice.
+    // Only need this key to exist.
+  },
+
+  childWrapper: {
+    // No style. Default `<View />` styling should suffice.
+    // Only need this key to exist.
+  },
+
+  noneChildSpace: {
+    padding: 0,
+  },
+
+  smallestChildSpace: {
+    paddingTop: tokens["space-smallest"],
+  },
+
+  smallerChildSpace: {
+    paddingTop: tokens["space-smaller"],
+  },
+
+  smallChildSpace: {
+    paddingTop: tokens["space-small"],
+  },
+
+  baseChildSpace: {
+    paddingTop: tokens["space-base"],
+  },
+
+  largeChildSpace: {
+    paddingTop: tokens["space-large"],
+  },
+});

package/src/Content/index.ts

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

package/src/index.ts

@@ -2,3 +2,6 @@ export * from "./Icon";
 export * from "./Divider";
 export * from "./Typography";
 export * from "./Text";
+export * from "./ActionLabel";
+export * from "./Content";
+export * from "./ActivityIndicator";