@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,83 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { ButtonDock } from "./ButtonDock"
+
+describe("ButtonDock", () => {
+  describe("when component is rendering", () => {
+    it("renders children", () => {
+      renderWithTheme(
+        <ButtonDock>
+          <button>Continue</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Continue")).toBeInTheDocument()
+    })
+
+    it("renders with default stacked variant", () => {
+      renderWithTheme(
+        <ButtonDock>
+          <button>Primary</button>
+          <button>Secondary</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Primary")).toBeInTheDocument()
+      expect(screen.getByText("Secondary")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering variants", () => {
+    it("renders stacked variant", () => {
+      renderWithTheme(
+        <ButtonDock variant="stacked">
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Action")).toBeInTheDocument()
+    })
+
+    it("renders inline variant", () => {
+      renderWithTheme(
+        <ButtonDock variant="inline">
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Action")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering with description", () => {
+    it("renders description in stacked variant", () => {
+      renderWithTheme(
+        <ButtonDock description="Helper text">
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Helper text")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering with leading content", () => {
+    it("renders leading content in stacked variant", () => {
+      renderWithTheme(
+        <ButtonDock leadingContent={<span>Leading</span>}>
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(screen.getByText("Leading")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(
+        <ButtonDock ref={ref}>
+          <button>Action</button>
+        </ButtonDock>
+      )
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/molecules/ButtonDock/ButtonDock.tsx

@@ -39,12 +39,14 @@ const StyledDockRoot = styled(View)<{
   })
 )
 
-const StyledStackedInner = styled(View)({
-  alignItems: "center",
-  gap: 16,
-  width: "100%",
-  maxWidth: 520
-})
+const StyledStackedInner = styled(View)<{ innerGap: number }>(
+  ({ innerGap }) => ({
+    alignItems: "center",
+    gap: innerGap,
+    width: "100%",
+    maxWidth: 520
+  })
+)
 
 const StyledButtonGroup = styled(View)<{
   groupDirection: "column" | "row"
@@ -85,7 +87,7 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
   ) => {
     const theme = useTheme()
     const { buttonDock, buttonGroup } = theme.tokens.components
-    const { dimensions } = theme.tokens.semantics
+    const { dimensions, typography } = theme.tokens.semantics
     const isStacked = variant === "stacked"
 
     const groupGap = parseTokenValue(
@@ -101,12 +103,14 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
         dockBorderTopWidth={parseTokenValue(dimensions.borderWidth.sm)}
         dockBorderTopColor={buttonDock.colour.border}
         dockPaddingVertical={parseTokenValue(
-          buttonDock.spacing[variant].desktop.verticalPadding
+          buttonDock.spacing[variant].mobile.topPadding
         )}
         {...rest}
       >
         {isStacked ? (
-          <StyledStackedInner>
+          <StyledStackedInner
+            innerGap={parseTokenValue(buttonGroup.spacing.gap)}
+          >
             {leadingContent}
             <StyledButtonGroup
               groupDirection="column"
@@ -118,12 +122,11 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
             </StyledButtonGroup>
             {description && (
               <Typography
-                variant="body"
-                size="md"
-                weight="medium"
+                token={typography.body.medium.md}
+                color={buttonGroup.colour.text}
                 align="center"
               >
-                {typeof description === "string" ? description : description}
+                {description}
               </Typography>
             )}
           </StyledStackedInner>

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

@@ -11,65 +11,84 @@ export default {
     layout: {
       control: { type: "select" },
       options: ["stacked", "inline"],
-      description: "Layout direction (stacked or inline)"
+      description: "Layout direction for the buttons"
     },
     description: {
       control: { type: "text" },
-      description: "Optional text below buttons"
+      description: "Optional text displayed below the buttons"
     }
   }
 }
 
-export const Playground = {
-  args: {
-    layout: "stacked",
-    description: "Choose an option below"
+type PlaygroundArgs = ButtonGroupProps & {
+  primaryLabel: string
+  secondaryLabel: string
+}
+
+export const Playground = ({
+  primaryLabel,
+  secondaryLabel,
+  ...args
+}: PlaygroundArgs) => (
+  <ButtonGroup {...args}>
+    <Button colour="primary">{primaryLabel}</Button>
+    {secondaryLabel?.trim() && (
+      <Button colour="secondary">{secondaryLabel}</Button>
+    )}
+  </ButtonGroup>
+)
+Playground.args = {
+  layout: "stacked",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  primaryLabel: "Confirm",
+  secondaryLabel: "Cancel"
+}
+Playground.argTypes = {
+  primaryLabel: {
+    control: { type: "text" },
+    description: "Label for the primary button"
   },
-  render: (args: ButtonGroupProps) => (
-    <ButtonGroup {...args}>
-      <Button fullWidth>Confirm</Button>
-      <Button fullWidth variant="outlined">
-        Cancel
-      </Button>
-    </ButtonGroup>
-  )
+  secondaryLabel: {
+    control: { type: "text" },
+    description:
+      "Label for the secondary button (leave empty for single button)"
+  }
 }
 
 export const Stacked = () => (
   <View style={styles.column}>
-    <ButtonGroup layout="stacked" description="Two buttons stacked vertically">
-      <Button fullWidth>Primary action</Button>
-      <Button fullWidth variant="outlined">
-        Secondary action
-      </Button>
+    <ButtonGroup description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+      <Button colour="primary">Confirm</Button>
+      <Button colour="secondary">Cancel</Button>
     </ButtonGroup>
   </View>
 )
 
 export const Inline = () => (
   <View style={styles.column}>
-    <ButtonGroup layout="inline" description="Two buttons side by side">
-      <Button>Confirm</Button>
-      <Button variant="outlined">Cancel</Button>
+    <ButtonGroup
+      layout="inline"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    >
+      <Button colour="secondary">Cancel</Button>
+      <Button colour="primary">Confirm</Button>
     </ButtonGroup>
   </View>
 )
 
 export const SingleButton = () => (
   <View style={styles.column}>
-    <ButtonGroup layout="stacked" description="Just one button">
-      <Button fullWidth>Continue</Button>
+    <ButtonGroup description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+      <Button colour="primary">Continue</Button>
     </ButtonGroup>
   </View>
 )
 
 export const WithoutDescription = () => (
   <View style={styles.column}>
-    <ButtonGroup layout="stacked">
-      <Button fullWidth>Confirm</Button>
-      <Button fullWidth variant="outlined">
-        Cancel
-      </Button>
+    <ButtonGroup>
+      <Button colour="primary">Confirm</Button>
+      <Button colour="secondary">Cancel</Button>
     </ButtonGroup>
   </View>
 )

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()
+    })
+  })
+})