@factorialco/f0-react-native 0.32.0 → 0.34.0

package/src/components/F0Badge/F0Badge.types.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants"
+
+import type { IconType } from "../primitives/F0Icon"
+
+import {
+  badgeSizeClasses,
+  badgeVariantClasses,
+  type badgeVariants,
+} from "./F0Badge.styles"
+
+export type F0BadgeVariant = keyof typeof badgeVariantClasses
+
+export const F0_BADGE_VARIANTS = Object.keys(
+  badgeVariantClasses
+) as ReadonlyArray<F0BadgeVariant>
+
+export type F0BadgeSize = keyof typeof badgeSizeClasses
+
+export const F0_BADGE_SIZES = Object.keys(
+  badgeSizeClasses
+) as ReadonlyArray<F0BadgeSize>
+
+export const F0_BADGE_ICON_SIZES = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md",
+} as const
+
+export interface F0BadgeProps extends VariantProps<typeof badgeVariants> {
+  icon: IconType
+  variant?: F0BadgeVariant
+  size?: F0BadgeSize
+}

package/src/components/F0Badge/__tests__/F0Badge.spec.tsx

@@ -0,0 +1,63 @@
+import { render } from "@testing-library/react-native"
+import React from "react"
+
+import { Add } from "../../../icons/app"
+import { F0Badge } from "../F0Badge"
+
+const getClassName = (
+  json: ReturnType<ReturnType<typeof render>["toJSON"]>
+) => {
+  if (!json || Array.isArray(json)) return ""
+  return String(json.props.className ?? "")
+}
+
+describe("F0Badge", () => {
+  it("Snapshot - default", () => {
+    const { toJSON } = render(<F0Badge icon={Add} />)
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  it("Snapshot - all variants", () => {
+    const variants = [
+      "neutral",
+      "highlight",
+      "positive",
+      "critical",
+      "warning",
+    ] as const
+
+    variants.forEach((variant) => {
+      const { toJSON } = render(<F0Badge icon={Add} variant={variant} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  it("Snapshot - all sizes", () => {
+    const sizes = ["xs", "sm", "md", "lg"] as const
+
+    sizes.forEach((size) => {
+      const { toJSON } = render(<F0Badge icon={Add} size={size} />)
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  it("maps xs badge size to xs icon size", () => {
+    const { toJSON } = render(<F0Badge icon={Add} size="xs" />)
+    expect(getClassName(toJSON())).toContain("stroke-xs")
+  })
+
+  it("maps sm badge size to xs icon size", () => {
+    const { toJSON } = render(<F0Badge icon={Add} size="sm" />)
+    expect(getClassName(toJSON())).toContain("stroke-xs")
+  })
+
+  it("maps md badge size to sm icon size", () => {
+    const { toJSON } = render(<F0Badge icon={Add} size="md" />)
+    expect(getClassName(toJSON())).toContain("stroke-sm")
+  })
+
+  it("maps lg badge size to md icon size", () => {
+    const { toJSON } = render(<F0Badge icon={Add} size="lg" />)
+    expect(getClassName(toJSON())).toContain("stroke-md")
+  })
+})