@butternutbox/pawprint-native 0.0.1 → 0.1.0

package/src/components/molecules/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,73 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { ButtonGroup } from "./ButtonGroup"
+
+describe("ButtonGroup", () => {
+  describe("when component is rendering", () => {
+    it("renders children buttons", () => {
+      renderWithTheme(
+        <ButtonGroup>
+          <button>Confirm</button>
+          <button>Cancel</button>
+        </ButtonGroup>
+      )
+      expect(screen.getByText("Confirm")).toBeInTheDocument()
+      expect(screen.getByText("Cancel")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering layouts", () => {
+    it("renders stacked layout by default", () => {
+      renderWithTheme(
+        <ButtonGroup>
+          <button>Action</button>
+        </ButtonGroup>
+      )
+      expect(screen.getByText("Action")).toBeInTheDocument()
+    })
+
+    it("renders inline layout", () => {
+      renderWithTheme(
+        <ButtonGroup layout="inline">
+          <button>Action</button>
+        </ButtonGroup>
+      )
+      expect(screen.getByText("Action")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering with description", () => {
+    it("renders description text", () => {
+      renderWithTheme(
+        <ButtonGroup description="Choose an option">
+          <button>Yes</button>
+          <button>No</button>
+        </ButtonGroup>
+      )
+      expect(screen.getByText("Choose an option")).toBeInTheDocument()
+    })
+
+    it("does not render description when not provided", () => {
+      renderWithTheme(
+        <ButtonGroup>
+          <button>Yes</button>
+        </ButtonGroup>
+      )
+      expect(screen.queryByText("Choose an option")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(
+        <ButtonGroup ref={ref}>
+          <button>Action</button>
+        </ButtonGroup>
+      )
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/molecules/ButtonGroup/ButtonGroup.tsx

@@ -26,7 +26,7 @@ const StyledGroupRoot = styled(View)<{
 }))
 
 const StyledButtonRow = styled(View)<{
-  rowDirection: "row-reverse" | "column"
+  rowDirection: "row" | "column"
   rowAlign?: "center"
   rowGap: number
 }>(({ rowDirection, rowAlign, rowGap }) => ({
@@ -36,6 +36,14 @@ const StyledButtonRow = styled(View)<{
   ...(rowAlign ? { alignItems: rowAlign } : {})
 }))
 
+const StyledChildSlot = styled(View)<{ slotInline: boolean }>(
+  ({ slotInline }) => ({
+    ...(slotInline
+      ? { flex: 1, minWidth: 0 }
+      : { width: "100%", alignSelf: "stretch" })
+  })
+)
+
 /**
  * ButtonGroup arranges 1 or 2 buttons in a stacked or inline layout
  * with an optional description below.
@@ -67,7 +75,7 @@ export const ButtonGroup = React.forwardRef<View, ButtonGroupProps>(
         {...rest}
       >
         <StyledButtonRow
-          rowDirection={isInline ? "row-reverse" : "column"}
+          rowDirection={isInline ? "row" : "column"}
           rowAlign={isInline ? "center" : undefined}
           rowGap={parseTokenValue(
             isInline
@@ -75,7 +83,21 @@ export const ButtonGroup = React.forwardRef<View, ButtonGroupProps>(
               : buttonGroup.spacing.stacked.gap
           )}
         >
-          {children}
+          {React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child)) return child
+            return (
+              <StyledChildSlot key={index} slotInline={isInline}>
+                {React.cloneElement(
+                  child as React.ReactElement<{
+                    fullWidth?: boolean
+                  }>,
+                  {
+                    fullWidth: true
+                  }
+                )}
+              </StyledChildSlot>
+            )
+          })}
         </StyledButtonRow>
         {description && (
           <Typography

package/src/components/molecules/Checkbox/Checkbox.stories.tsx

@@ -1,10 +1,17 @@
 import React from "react"
 import { View, StyleSheet } from "react-native"
+import {
+  LabradorChefsHat,
+  CockerSpanielChefsHat,
+  CockapooBowl
+} from "@butternutbox/pawprint-illustrations/breeds"
 import { Checkbox } from "./Checkbox"
 import type { CheckboxProps } from "./Checkbox"
 import { CheckboxGroup } from "./CheckboxGroup"
 import { Typography } from "../../atoms/Typography"
 
+const ILLUSTRATION_SIZE = 72
+
 export default {
   title: "Molecules/Checkbox",
   component: Checkbox,
@@ -109,6 +116,71 @@ export const Tile = () => (
   </View>
 )
 
+export const WithIllustration = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Vertical
+      </Typography>
+      <CheckboxGroup orientation="vertical">
+        <Checkbox
+          variant="tile"
+          label="Chicken"
+          subText="Tender & tasty"
+          illustration={
+            <LabradorChefsHat
+              width={ILLUSTRATION_SIZE}
+              height={ILLUSTRATION_SIZE}
+            />
+          }
+        />
+        <Checkbox
+          variant="tile"
+          label="Treats"
+          subText="Tasty rewards"
+          illustration={
+            <CockerSpanielChefsHat
+              width={ILLUSTRATION_SIZE}
+              height={ILLUSTRATION_SIZE}
+            />
+          }
+        />
+        <Checkbox
+          variant="tile"
+          label="Dry Food"
+          subText="Crunchy kibble"
+          illustration={
+            <CockapooBowl
+              width={ILLUSTRATION_SIZE}
+              height={ILLUSTRATION_SIZE}
+            />
+          }
+        />
+      </CheckboxGroup>
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Selected
+      </Typography>
+      <CheckboxGroup orientation="vertical">
+        <Checkbox
+          variant="tile"
+          label="Chicken"
+          subText="Tender & tasty"
+          defaultChecked
+          illustration={
+            <LabradorChefsHat
+              width={ILLUSTRATION_SIZE}
+              height={ILLUSTRATION_SIZE}
+            />
+          }
+        />
+      </CheckboxGroup>
+    </View>
+  </View>
+)
+
 export const AllStates = () => (
   <View style={styles.column}>
     {(["standalone", "tile"] as const).map((variant) => (

package/src/components/molecules/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,117 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Checkbox } from "./Checkbox"
+
+describe("Checkbox", () => {
+  describe("when component is rendering", () => {
+    it("renders label text", () => {
+      renderWithTheme(<Checkbox label="Accept terms" />)
+      expect(screen.getByText("Accept terms")).toBeInTheDocument()
+    })
+
+    it("renders label and subText", () => {
+      renderWithTheme(
+        <Checkbox label="Accept terms" subText="Required to proceed" />
+      )
+      expect(screen.getByText("Accept terms")).toBeInTheDocument()
+      expect(screen.getByText("Required to proceed")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering variants", () => {
+    it("renders standalone variant", () => {
+      renderWithTheme(<Checkbox variant="standalone" label="Standalone" />)
+      expect(screen.getByText("Standalone")).toBeInTheDocument()
+    })
+
+    it("renders tile variant", () => {
+      renderWithTheme(<Checkbox variant="tile" label="Tile" />)
+      expect(screen.getByText("Tile")).toBeInTheDocument()
+    })
+
+    it("renders tile variant with illustration", () => {
+      renderWithTheme(
+        <Checkbox
+          variant="tile"
+          label="With illustration"
+          illustration={<span data-testid="illustration">🐶</span>}
+        />
+      )
+      expect(screen.getByTestId("illustration")).toBeInTheDocument()
+    })
+  })
+
+  describe("when component is uncontrolled", () => {
+    it("toggles checked state when clicked", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<Checkbox label="Toggle" />)
+
+      const checkbox = screen.getByRole("checkbox")
+      expect(checkbox).toHaveAttribute("aria-checked", "false")
+
+      await user.click(checkbox)
+      expect(checkbox).toHaveAttribute("aria-checked", "true")
+
+      await user.click(checkbox)
+      expect(checkbox).toHaveAttribute("aria-checked", "false")
+    })
+
+    it("can be initially checked via defaultChecked", () => {
+      renderWithTheme(<Checkbox label="Checked" defaultChecked />)
+
+      const checkbox = screen.getByRole("checkbox")
+      expect(checkbox).toHaveAttribute("aria-checked", "true")
+    })
+  })
+
+  describe("when component is controlled", () => {
+    it("calls onCheckedChange when clicked", async () => {
+      const user = userEvent.setup()
+      const onCheckedChange = vi.fn()
+      renderWithTheme(
+        <Checkbox
+          label="Controlled"
+          checked={false}
+          onCheckedChange={onCheckedChange}
+        />
+      )
+
+      await user.click(screen.getByRole("checkbox"))
+      expect(onCheckedChange).toHaveBeenCalledWith(true)
+    })
+
+    it("reflects controlled checked state", () => {
+      renderWithTheme(
+        <Checkbox label="Checked" checked={true} onCheckedChange={() => {}} />
+      )
+      expect(screen.getByRole("checkbox")).toHaveAttribute(
+        "aria-checked",
+        "true"
+      )
+    })
+  })
+
+  describe("when component is disabled", () => {
+    it("prevents interaction when disabled", async () => {
+      const user = userEvent.setup()
+      const onCheckedChange = vi.fn()
+      renderWithTheme(
+        <Checkbox label="Disabled" disabled onCheckedChange={onCheckedChange} />
+      )
+
+      await user.click(screen.getByRole("checkbox"))
+      expect(onCheckedChange).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Checkbox ref={ref} label="Ref test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/molecules/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, PressableProps } from "react-native"
+import { View, Pressable, PressableProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as CheckboxPrimitive from "@rn-primitives/checkbox"
@@ -27,7 +27,7 @@ export type CheckboxProps = CheckboxOwnProps &
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
-const StyledRoot = styled(CheckboxPrimitive.Root)<{
+const StyledRootPressable = styled(Pressable)<{
   rootFlexAlign: string
   rootGap: number
   rootOpacity: number
@@ -169,109 +169,115 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>(
     const controlSize = parseTokenValue(checkbox.size.control.default)
 
     return (
-      <StyledRoot
-        ref={ref}
+      <CheckboxPrimitive.Root
         checked={isChecked}
         onCheckedChange={handleCheckedChange}
         disabled={disabled}
-        rootFlexAlign={isTile ? "center" : "flex-start"}
-        rootGap={parseTokenValue(
-          isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
-        )}
-        rootOpacity={
-          disabled ? parseFloat(theme.tokens.primitives.opacity["40"]) : 1
-        }
-        rootPaddingVertical={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.spacing.verticalPadding)
-            : undefined
-        }
-        rootPaddingHorizontal={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.spacing.horizontalPadding)
-            : undefined
-        }
-        rootMaxWidth={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.size.maxWidth)
-            : undefined
-        }
-        rootBgColor={
-          isTile
-            ? isChecked
-              ? checkbox.checkboxTile.colour.background.selected
-              : checkbox.checkboxTile.colour.background.default
-            : undefined
-        }
-        rootBorderWidth={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.borderWidth.default)
-            : undefined
-        }
-        rootBorderColor={
-          isTile
-            ? isChecked
-              ? checkbox.checkboxTile.colour.border.selected
-              : checkbox.checkboxTile.colour.border.default
-            : undefined
-        }
-        rootBorderRadius={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.borderRadius.default)
-            : undefined
-        }
-        style={typeof style === "function" ? undefined : style}
-        {...rest}
+        asChild
       >
-        <StyledControl
-          controlSize={controlSize}
-          controlBorderWidth={parseTokenValue(checkbox.control.border.default)}
-          controlBorderColor={
-            isChecked
-              ? checkbox.colour.background.selected
-              : checkbox.colour.border.default
+        <StyledRootPressable
+          ref={ref}
+          rootFlexAlign={isTile ? "center" : "flex-start"}
+          rootGap={parseTokenValue(
+            isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
+          )}
+          rootOpacity={
+            disabled ? parseFloat(theme.tokens.primitives.opacity["40"]) : 1
+          }
+          rootPaddingVertical={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.spacing.verticalPadding)
+              : undefined
+          }
+          rootPaddingHorizontal={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.spacing.horizontalPadding)
+              : undefined
+          }
+          rootMaxWidth={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.size.maxWidth)
+              : undefined
+          }
+          rootBgColor={
+            isTile
+              ? isChecked
+                ? checkbox.checkboxTile.colour.background.selected
+                : checkbox.checkboxTile.colour.background.default
+              : undefined
           }
-          controlBorderRadius={parseTokenValue(dimensions.borderRadius.xs)}
-          controlBgColor={
-            isChecked ? checkbox.colour.background.selected : "transparent"
+          rootBorderWidth={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.borderWidth.default)
+              : undefined
           }
+          rootBorderColor={
+            isTile
+              ? isChecked
+                ? checkbox.checkboxTile.colour.border.selected
+                : checkbox.checkboxTile.colour.border.default
+              : undefined
+          }
+          rootBorderRadius={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.borderRadius.default)
+              : undefined
+          }
+          style={typeof style === "function" ? undefined : style}
+          {...rest}
         >
-          <CheckboxPrimitive.Indicator>
-            <Icon icon={Check} size="xs" colour="alt" />
-          </CheckboxPrimitive.Indicator>
-        </StyledControl>
+          <StyledControl
+            controlSize={controlSize}
+            controlBorderWidth={parseTokenValue(
+              checkbox.control.border.default
+            )}
+            controlBorderColor={
+              isChecked
+                ? checkbox.colour.background.selected
+                : checkbox.colour.border.default
+            }
+            controlBorderRadius={parseTokenValue(dimensions.borderRadius.xs)}
+            controlBgColor={
+              isChecked ? checkbox.colour.background.selected : "transparent"
+            }
+          >
+            <CheckboxPrimitive.Indicator>
+              <Icon icon={Check} size="xs" colour="alt" />
+            </CheckboxPrimitive.Indicator>
+          </StyledControl>
 
-        <StyledContent
-          contentGap={parseTokenValue(checkbox.spacing.content.gap)}
-        >
-          {label && (
-            <Typography
-              token={checkbox.typography.label}
-              color={checkbox.colour.text.title}
-            >
-              {label}
-            </Typography>
-          )}
-          {subText && (
-            <Typography
-              token={checkbox.typography.subText}
-              color={checkbox.colour.text.subtext}
+          <StyledContent
+            contentGap={parseTokenValue(checkbox.spacing.content.gap)}
+          >
+            {label && (
+              <Typography
+                token={checkbox.typography.label}
+                color={checkbox.colour.text.title}
+              >
+                {label}
+              </Typography>
+            )}
+            {subText && (
+              <Typography
+                token={checkbox.typography.subText}
+                color={checkbox.colour.text.subtext}
+              >
+                {subText}
+              </Typography>
+            )}
+          </StyledContent>
+
+          {isTile && illustration && (
+            <StyledIllustration
+              illustrationSize={parseTokenValue(
+                checkbox.checkboxTile.size.illustration.default
+              )}
             >
-              {subText}
-            </Typography>
+              {illustration}
+            </StyledIllustration>
           )}
-        </StyledContent>
-
-        {isTile && illustration && (
-          <StyledIllustration
-            illustrationSize={parseTokenValue(
-              checkbox.checkboxTile.size.illustration.default
-            )}
-          >
-            {illustration}
-          </StyledIllustration>
-        )}
-      </StyledRoot>
+        </StyledRootPressable>
+      </CheckboxPrimitive.Root>
     )
   }
 )