@factorialco/f0-react-native 0.19.1

package/README.md

@@ -0,0 +1,54 @@
+# Factorial One React Native
+
+React Native implementation of the Factorial One Design System.
+
+## Installation
+
+```bash
+npm install @factorialco/f0-react-native
+# or
+yarn add @factorialco/f0-react-native
+# or
+pnpm add @factorialco/f0-react-native
+```
+
+## Usage
+
+```tsx
+import { ExampleComponent } from "@factorialco/f0-react-native";
+
+export default function App() {
+  return <ExampleComponent text="Hello from Factorial One!" />;
+}
+```
+
+## Icons
+
+The package includes a set of icons that can be imported and used in your React Native application.
+
+```tsx
+import { Icon, AppIcons } from "@factorialco/f0-react-native";
+
+// Basic usage
+<Icon icon={AppIcons.Calendar} size="sm" />;
+<Icon icon={AppIcons.Calendar} size="md" />;
+<Icon icon={AppIcons.Calendar} size="lg" />;
+```
+
+## Development
+
+### Building
+
+```bash
+pnpm build
+```
+
+### Testing
+
+```bash
+pnpm test
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@factorialco/f0-react-native",
+  "version": "0.19.1",
+  "type": "module",
+  "description": "React Native components for Factorial One Design System",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    },
+    "./icons": {
+      "import": "./src/icons/index.ts"
+    },
+    "./icons/app": {
+      "import": "./src/icons/app/index.ts"
+    },
+    "./icons/modules": {
+      "import": "./src/icons/modules/index.ts"
+    },
+    "./tailwind.config": "./tailwind.config.ts"
+  },
+  "files": [
+    "src",
+    "tailwind.config.ts"
+  ],
+  "keywords": [
+    "factorial",
+    "design-system",
+    "react-native",
+    "components"
+  ],
+  "author": "Factorial",
+  "license": "MIT",
+  "peerDependencies": {
+    "date-fns": "^3.6.0",
+    "nativewind": "^4.1.23",
+    "react": "^18.2.0",
+    "react-native": "^0.76.6",
+    "react-native-svg": "^15.8.0",
+    "tailwindcss": "^3.4.3",
+    "twemoji-parser": "^14.0.0",
+    "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "cva": "1.0.0-beta.3",
+    "expo-clipboard": "^7.1.4",
+    "lodash": "^4.17.21",
+    "react-native-safe-area-context": "4.12.0",
+    "tailwind-merge": "^2.6.0",
+    "@factorialco/f0-core": "1.25.1"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^8.1.0",
+    "@testing-library/react-native": "^12.9.0",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.16",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.73.0",
+    "@types/twemoji-parser": "^13.1.4",
+    "globals": "^16.0.0",
+    "jest": "^29.7.0",
+    "nativewind": "^4.1.23",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.5.2",
+    "prettier-plugin-tailwindcss": "^0.6.10",
+    "react": "^18.2.0",
+    "react-native": "^0.76.6",
+    "react-native-svg": "^15.8.0",
+    "tailwindcss": "^3.4.3",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "echo 'we ship source code as is'; exit 0",
+    "lint": "eslint -c eslint.config.mjs . --report-unused-disable-directives --max-warnings 0",
+    "lint-fix": "pnpm run lint -- --fix",
+    "test": "jest",
+    "generate-icons": "rm -fR src/icons/app/* src/icons/modules/* && run-p generate-app-icons generate-module-icons && find src/icons -name '*.tsx' -exec sed -i '' 's/SVGSVGElement/Svg/g; s/ xmlns=\"http:\\/\\/www.w3.org\\/2000\\/svg\"//g; s/ strokeWidth={[^}]*}//g; s/ strokeWidth=\"[^\"]*\"//g' {} +",
+    "generate-app-icons": "npx @svgr/cli --out-dir src/icons/app --native --svg-props className={props.className} ../../packages/core/assets/icons/app",
+    "generate-module-icons": "npx @svgr/cli --out-dir src/icons/modules --native --svg-props className={props.className} ../../packages/core/assets/icons/modules"
+  }
+}

package/src/components/Activity/ActivityItem/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActivityItem Snapshot 1`] = `
+<View
+  accessibilityLabel="activity-item"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  className="flex w-full flex-row gap-2 rounded-lg p-2 pr-3 "
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    className="flex-1"
+  >
+    <Text
+      className="line-clamp-1 text-lg font-medium text-f1-foreground"
+    >
+      Activity Title
+    </Text>
+    <Text
+      className="line-clamp-2 text-lg text-f1-foreground-secondary"
+    />
+    <View
+      className="mt-1.5 flex flex-row"
+    >
+      <Text
+        className="text-md text-f1-foreground-secondary"
+      >
+        Time off · Today
+      </Text>
+    </View>
+  </View>
+  <View
+    className="ml-1"
+  />
+</View>
+`;

package/src/components/Activity/ActivityItem/index.spec.tsx

@@ -0,0 +1,103 @@
+import { render, fireEvent, screen } from "@testing-library/react-native";
+import React from "react";
+import { IconType } from "../../Icon";
+import {
+  ActivityItem,
+  ActivityItemSkeleton,
+} from "../../Activity/ActivityItem";
+
+// Mock the IconAvatar component
+jest.mock("../../Avatars/IconAvatar", () => ({
+  IconAvatar: () => null,
+}));
+
+// Mock dependencies
+const mockIcon: IconType = "check" as unknown as IconType;
+const mockOnPress = jest.fn();
+
+describe("ActivityItem", () => {
+  const defaultProps = {
+    id: "activity-123",
+    date: "Today",
+    title: "Activity Title",
+    category: "Time off",
+    onPress: mockOnPress,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("Snapshot", () => {
+    const { toJSON } = render(<ActivityItem {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with required props", () => {
+    render(<ActivityItem {...defaultProps} />);
+
+    const title = screen.getByText("Activity Title");
+    const moduleDate = screen.getByText("Time off · Today");
+
+    expect(title).toBeDefined();
+    expect(moduleDate).toBeDefined();
+  });
+
+  it("renders correctly with description", () => {
+    render(<ActivityItem {...defaultProps} description="Test description" />);
+
+    const description = screen.getByText("Test description");
+
+    expect(description).toBeDefined();
+  });
+
+  it("renders icon container when icon is provided", () => {
+    render(<ActivityItem {...defaultProps} icon={mockIcon} />);
+
+    const icon = screen.getByLabelText("activity-icon-container");
+
+    expect(icon).toBeDefined();
+  });
+
+  it("does not render icon container when icon is not provided", () => {
+    render(<ActivityItem {...defaultProps} />);
+
+    const icon = screen.queryByLabelText("activity-icon-container");
+
+    expect(icon).toBeNull();
+  });
+
+  it("shows unread indicator when isUnread is true", () => {
+    render(<ActivityItem {...defaultProps} isUnread={true} />);
+
+    const indicator = screen.getByLabelText("unread-indicator");
+
+    expect(indicator).toBeDefined();
+  });
+
+  it("does not show unread indicator when isUnread is false", () => {
+    render(<ActivityItem {...defaultProps} isUnread={false} />);
+
+    const indicator = screen.queryByLabelText("unread-indicator");
+
+    expect(indicator).toBeNull();
+  });
+
+  it("calls onPress with correct id when pressed", () => {
+    render(<ActivityItem {...defaultProps} />);
+
+    fireEvent.press(screen.getByLabelText("activity-item"));
+
+    expect(mockOnPress).toHaveBeenCalledWith("activity-123");
+  });
+});
+
+describe("ActivityItemSkeleton", () => {
+  it("renders skeleton correctly", () => {
+    render(<ActivityItemSkeleton />);
+
+    const skeleton = screen.getByLabelText("activity-skeleton");
+
+    expect(skeleton).toBeDefined();
+  });
+});

package/src/components/Activity/ActivityItem/index.tsx

@@ -0,0 +1,90 @@
+import { View, Text, Pressable } from "react-native";
+import { useState } from "react";
+import { IconType } from "../../Icon";
+import { IconAvatar } from "../../Avatars/exports";
+
+export type ActivityItemProps = {
+  id: string;
+  date: string;
+  title: string;
+  description?: string;
+  icon?: IconType;
+  category: string;
+  isUnread?: boolean;
+  onPress: (id: string) => void;
+};
+
+export const ActivityItem = ({
+  id,
+  date,
+  title,
+  description,
+  icon,
+  category,
+  isUnread = false,
+  onPress,
+}: ActivityItemProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <Pressable
+      className={`flex w-full flex-row gap-2 rounded-lg p-2 pr-3 ${isPressed ? "bg-f1-background-hover" : ""}`}
+      onPressIn={() => setIsPressed(false)} // Disabled by default - no use case for now
+      onPressOut={() => setIsPressed(false)}
+      onPress={() => onPress(id)}
+      accessibilityLabel="activity-item"
+    >
+      {icon && (
+        <View accessibilityLabel="activity-icon-container">
+          <IconAvatar icon={icon} size="md" />
+        </View>
+      )}
+      <View className="flex-1">
+        <Text className="line-clamp-1 text-lg font-medium text-f1-foreground">
+          {title}
+        </Text>
+        <Text className="line-clamp-2 text-lg text-f1-foreground-secondary">
+          {description}
+        </Text>
+        <View className="mt-1.5 flex flex-row">
+          <Text className="text-md text-f1-foreground-secondary">{`${category} · ${date}`}</Text>
+        </View>
+      </View>
+      <View className="ml-1">
+        {isUnread && (
+          <View
+            accessibilityLabel="unread-indicator"
+            className="mt-1.5 h-2 w-2 rounded-full bg-f1-icon-accent"
+          />
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+export const ActivityItemSkeleton = () => {
+  return (
+    <View
+      accessibilityLabel="activity-skeleton"
+      className="flex w-full flex-row gap-2 rounded-lg p-2 pr-3"
+    >
+      {/* Avatar skeleton - match IconAvatar's border radius */}
+      <View className="h-10 w-10 rounded-lg bg-f1-background-secondary" />
+
+      <View className="flex-1">
+        {/* Title skeleton */}
+        <View className="mb-1 h-5 w-3/4 rounded-sm bg-f1-background-secondary" />
+
+        {/* Description skeleton - two lines */}
+        <View className="mb-1 h-5 w-full rounded-sm bg-f1-background-secondary" />
+        <View className="mb-1.5 h-5 w-2/3 rounded-sm bg-f1-background-secondary" />
+
+        {/* Category and date skeleton */}
+        <View className="h-5 w-1/2 rounded-sm bg-f1-background-secondary" />
+      </View>
+
+      {/* Space for the unread indicator */}
+      <View className="ml-1 w-2" />
+    </View>
+  );
+};

package/src/components/Avatars/Avatar.tsx

@@ -0,0 +1,56 @@
+import { sizes } from "../../ui/avatar";
+import { ComponentProps, ReactNode } from "react";
+import { CompanyAvatar } from "./CompanyAvatar";
+import { PersonAvatar } from "./PersonAvatar";
+import { TeamAvatar } from "./TeamAvatar";
+
+type PersonAvatarProps = ComponentProps<typeof PersonAvatar>;
+type TeamAvatarProps = ComponentProps<typeof TeamAvatar>;
+type CompanyAvatarProps = ComponentProps<typeof CompanyAvatar>;
+
+export type AvatarVariant =
+  | ({ type: "person" } & Omit<PersonAvatarProps, "size">)
+  | ({ type: "team" } & Omit<TeamAvatarProps, "size">)
+  | ({ type: "company" } & Omit<CompanyAvatarProps, "size">);
+
+export const Avatar = ({
+  avatar,
+  size = "xsmall",
+}: {
+  avatar: AvatarVariant;
+  size?: (typeof sizes)[number];
+}): ReactNode => {
+  switch (avatar.type) {
+    case "person":
+      return (
+        <PersonAvatar
+          firstName={avatar.firstName}
+          lastName={avatar.lastName}
+          src={avatar.src}
+          size={size}
+          aria-label={avatar["aria-label"]}
+          aria-labelledby={avatar["aria-labelledby"]}
+        />
+      );
+    case "team":
+      return (
+        <TeamAvatar
+          name={avatar.name}
+          src={avatar.src}
+          size={size}
+          aria-label={avatar["aria-label"]}
+          aria-labelledby={avatar["aria-labelledby"]}
+        />
+      );
+    case "company":
+      return (
+        <CompanyAvatar
+          name={avatar.name}
+          src={avatar.src}
+          size={size}
+          aria-label={avatar["aria-label"]}
+          aria-labelledby={avatar["aria-labelledby"]}
+        />
+      );
+  }
+};

package/src/components/Avatars/BaseAvatar/index.tsx

@@ -0,0 +1,126 @@
+import {
+  Avatar as AvatarComponent,
+  AvatarFallback,
+  AvatarImage,
+} from "../../../ui/avatar";
+import { ComponentProps, useMemo } from "react";
+import { Badge, BadgeProps } from "../../Badge";
+import { getAvatarColor, getInitials } from "./utils";
+import { View } from "react-native";
+import { ModuleAvatar, ModuleAvatarProps } from "../ModuleAvatar";
+import { AvatarBadge } from "../types";
+
+const getAvatarSize = (
+  size: ShadAvatarProps["size"],
+): ModuleAvatarProps["size"] | undefined => {
+  const sizeMap: Partial<
+    Record<
+      Exclude<ShadAvatarProps["size"], undefined>,
+      ModuleAvatarProps["size"]
+    >
+  > = {
+    xlarge: "lg",
+    large: "md",
+    small: "sm",
+  } as const;
+
+  return size && sizeMap[size] ? sizeMap[size] : sizeMap.small;
+};
+
+const getBadgeSize = (
+  size: ShadAvatarProps["size"],
+): BadgeProps["size"] | undefined => {
+  const sizeMap: Partial<
+    Record<Exclude<ShadAvatarProps["size"], undefined>, BadgeProps["size"]>
+  > = {
+    xlarge: "lg",
+    large: "md",
+    small: "sm",
+  } as const;
+
+  return size && sizeMap[size] ? sizeMap[size] : sizeMap.small;
+};
+
+type ShadAvatarProps = ComponentProps<typeof AvatarComponent>;
+
+type Props = {
+  type: ShadAvatarProps["type"];
+  name: string | string[];
+  src?: string;
+  size?: ShadAvatarProps["size"];
+  color?: ShadAvatarProps["color"] | "random";
+  badge?: AvatarBadge;
+} & Pick<ShadAvatarProps, "aria-label" | "aria-labelledby">;
+
+export const BaseAvatar = ({
+  src,
+  name,
+  size,
+  type = "base",
+  color = "random",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  badge,
+}: Props) => {
+  const initials = getInitials(name, size);
+  const avatarColor =
+    color === "random"
+      ? getAvatarColor(Array.isArray(name) ? name.join("") : name)
+      : color;
+
+  const hasAria = Boolean(ariaLabel || ariaLabelledby);
+  const badgeSize = getBadgeSize(size);
+  const moduleAvatarSize = getAvatarSize(size);
+
+  const badgeContent = useMemo(
+    () =>
+      badge ? (
+        <>
+          {badge.type === "module" && (
+            <ModuleAvatar module={badge.module} size={moduleAvatarSize} />
+          )}
+          {badge.type !== "module" && (
+            <Badge type={badge.type} icon={badge.icon} size={badgeSize} />
+          )}
+        </>
+      ) : null,
+    [badge, badgeSize, moduleAvatarSize],
+  );
+
+  return (
+    <View
+      className={`inline-flex ${badge && badge.type === "module" ? "p-[3px]" : ""}`}
+    >
+      <View className="h-fit w-fit">
+        <AvatarComponent
+          size={size}
+          type={type}
+          color={avatarColor}
+          role="img"
+          aria-hidden={!hasAria}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          data-a11y-color-contrast-ignore
+          className={
+            src
+              ? "dark:bg-f1-background-inverse-secondary bg-f1-background"
+              : ""
+          }
+        >
+          {src ? (
+            <AvatarImage src={src} alt={initials} />
+          ) : (
+            <AvatarFallback size={size} data-a11y-color-contrast-ignore>
+              {initials}
+            </AvatarFallback>
+          )}
+        </AvatarComponent>
+      </View>
+      {badge && (
+        <View className="absolute -bottom-0.5 -right-0.5">{badgeContent}</View>
+      )}
+    </View>
+  );
+};
+
+BaseAvatar.displayName = "BaseAvatar";

package/src/components/Avatars/BaseAvatar/utils.ts

@@ -0,0 +1,73 @@
+import {
+  color as AvatarColors,
+  Avatar as AvatarComponent,
+  type as avatarType,
+  sizes,
+} from "../../../ui/avatar";
+import { type ComponentProps } from "react";
+
+type ShadAvatarProps = ComponentProps<typeof AvatarComponent>;
+
+export function getInitials(
+  name: string | string[],
+  size?: ShadAvatarProps["size"],
+  isFile?: boolean,
+): string {
+  const nameArray = Array.isArray(name) ? name : [name];
+  const isSmall = size === "xsmall" || size === "small";
+  const minChar = isFile ? 3 : 2;
+
+  if (isSmall) return (nameArray[0][0] ?? "").toUpperCase();
+  if (!Array.isArray(name)) return name.slice(0, minChar).toUpperCase();
+
+  return nameArray
+    .slice(0, minChar)
+    .map((name) => name[0])
+    .join("")
+    .toUpperCase();
+}
+
+export function getAvatarColor(text: string): ShadAvatarProps["color"] {
+  let hash = 0;
+
+  for (let i = 0; i < text.length; i++) {
+    hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    hash = hash & hash;
+  }
+
+  const index =
+    ((hash % AvatarColors.length) + AvatarColors.length) % AvatarColors.length;
+
+  return AvatarColors[index];
+}
+
+export const getMask = {
+  base: {
+    xlarge:
+      "path('M72 0H0V72H52.202C49.6089 69.459 48 65.9174 48 62C48 54.268 54.268 48 62 48C65.9174 48 69.459 49.6089 72 52.202V0ZM72 71.798C71.9333 71.866 71.866 71.9333 71.798 72H72V71.798Z')",
+    large:
+      "path('M56 0H0V56H39.0556C37.1554 53.877 36 51.0734 36 48C36 41.3726 41.3726 36 48 36C51.0734 36 53.877 37.1554 56 39.0556V0Z')",
+    medium:
+      "path('M32 0H0V32H22.2547C21.4638 30.8662 21 29.4872 21 28C21 24.134 24.134 21 28 21C29.4872 21 30.8662 21.4638 32 22.2547V0Z')",
+    small:
+      "path('M24 0H0V24H14.2547C13.4638 22.8662 13 21.4872 13 20C13 16.134 16.134 13 20 13C21.4872 13 22.8662 13.4638 24 14.2547V0Z')",
+    xsmall:
+      "path('M20 0H0V20H10.2547C9.46381 18.8662 9 17.4872 9 16C9 12.134 12.134 9 16 9C17.4872 9 18.8662 9.46381 20 10.2547V0Z')",
+  },
+  rounded: {
+    xlarge:
+      "path('M69.1842 49.9814C70.9975 45.6828 72 40.9585 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72C40.9585 72 45.6828 70.9975 49.9814 69.1842C48.7232 67.0839 48 64.6264 48 62C48 54.268 54.268 48 62 48C64.6264 48 67.0839 48.7232 69.1842 49.9814Z')",
+    large:
+      "path('M54.2534 37.7562C55.3828 34.7182 56 31.4312 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56C31.4312 56 34.7182 55.3828 37.7562 54.2534C36.6421 52.4324 36 50.2912 36 48C36 41.3726 41.3726 36 48 36C50.2912 36 52.4324 36.6421 54.2534 37.7562Z')",
+    medium:
+      "path('M30.9702 21.6596C31.6358 19.9001 32 17.9926 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C17.9926 32 19.9001 31.6358 21.6596 30.9702C21.2365 30.0686 21 29.0619 21 28C21 24.134 24.134 21 28 21C29.0619 21 30.0686 21.2365 30.9702 21.6596Z')",
+    small:
+      "path('M23.8119 14.128C23.9355 13.4373 24 12.7262 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C12.7262 24 13.4373 23.9355 14.128 23.8119C13.4145 22.7151 13 21.406 13 20C13 16.134 16.134 13 20 13C21.406 13 22.7151 13.4145 23.8119 14.128Z')",
+    xsmall:
+      "path('M19.9969 10.2525C19.999 10.1686 20 10.0844 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C10.0844 20 10.1686 19.999 10.2525 19.9969C9.46297 18.8636 9 17.4859 9 16C9 12.134 12.134 9 16 9C17.4859 9 18.8636 9.46297 19.9969 10.2525Z')",
+  },
+  get: (
+    type: (typeof avatarType)[number] = "base",
+    size: (typeof sizes)[number] = "medium",
+  ) => getMask[type][size],
+} as const;

package/src/components/Avatars/CompanyAvatar/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CompanyAvatar Snapshot 1`] = `
+<View
+  className="inline-flex "
+>
+  <View
+    className="h-fit w-fit"
+  >
+    <View
+      aria-hidden={true}
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded bg-[hsl(theme(colors.viridian.50))]"
+      data-a11y-color-contrast-ignore={true}
+      role="img"
+    >
+      <Text
+        className="text-f1-foreground-inverse/90 text-md"
+        data-a11y-color-contrast-ignore={true}
+      >
+        FA
+      </Text>
+    </View>
+  </View>
+</View>
+`;

package/src/components/Avatars/CompanyAvatar/index.spec.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { CompanyAvatar } from "./";
+
+describe("CompanyAvatar", () => {
+  it("Snapshot", () => {
+    const { toJSON } = render(<CompanyAvatar name="Factorial" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});