@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,185 @@
+import React from "react"
+import { screen, fireEvent } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Accordion } from "./Accordion"
+
+describe("Accordion", () => {
+  describe("rendering", () => {
+    it("renders item titles", () => {
+      renderWithTheme(
+        <Accordion>
+          <Accordion.Item title="Question one">Answer one</Accordion.Item>
+          <Accordion.Item title="Question two">Answer two</Accordion.Item>
+        </Accordion>
+      )
+
+      expect(screen.getByText("Question one")).toBeInTheDocument()
+      expect(screen.getByText("Question two")).toBeInTheDocument()
+    })
+
+    it("hides panel content when closed", () => {
+      renderWithTheme(
+        <Accordion>
+          <Accordion.Item title="Question">Hidden answer</Accordion.Item>
+        </Accordion>
+      )
+
+      expect(screen.queryByText("Hidden answer")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("interaction", () => {
+    it("opens panel when trigger is pressed", () => {
+      renderWithTheme(
+        <Accordion>
+          <Accordion.Item title="Question">Revealed answer</Accordion.Item>
+        </Accordion>
+      )
+
+      fireEvent.click(screen.getByRole("button", { name: /Question/ }))
+      expect(screen.getByText("Revealed answer")).toBeInTheDocument()
+    })
+
+    it("closes panel when trigger is pressed again", () => {
+      renderWithTheme(
+        <Accordion>
+          <Accordion.Item title="Question">Answer</Accordion.Item>
+        </Accordion>
+      )
+
+      const trigger = screen.getByRole("button", { name: /Question/ })
+      fireEvent.click(trigger)
+      fireEvent.click(trigger)
+
+      expect(screen.queryByText("Answer")).not.toBeInTheDocument()
+    })
+
+    it("closes sibling when a new item opens (single mode)", () => {
+      renderWithTheme(
+        <Accordion>
+          <Accordion.Item title="First">First answer</Accordion.Item>
+          <Accordion.Item title="Second">Second answer</Accordion.Item>
+        </Accordion>
+      )
+
+      fireEvent.click(screen.getByRole("button", { name: /First/ }))
+      expect(screen.getByText("First answer")).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole("button", { name: /Second/ }))
+      expect(screen.getByText("Second answer")).toBeInTheDocument()
+      expect(screen.queryByText("First answer")).not.toBeInTheDocument()
+    })
+
+    it("allows multiple open items when multiple is true", () => {
+      renderWithTheme(
+        <Accordion multiple>
+          <Accordion.Item title="First">First answer</Accordion.Item>
+          <Accordion.Item title="Second">Second answer</Accordion.Item>
+        </Accordion>
+      )
+
+      fireEvent.click(screen.getByRole("button", { name: /First/ }))
+      fireEvent.click(screen.getByRole("button", { name: /Second/ }))
+
+      expect(screen.getByText("First answer")).toBeInTheDocument()
+      expect(screen.getByText("Second answer")).toBeInTheDocument()
+    })
+
+    it("calls onValueChange when an item opens", () => {
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <Accordion onValueChange={onValueChange}>
+          <Accordion.Item value="item-1" title="Question">
+            Answer
+          </Accordion.Item>
+        </Accordion>
+      )
+
+      fireEvent.click(screen.getByRole("button", { name: /Question/ }))
+      expect(onValueChange).toHaveBeenCalledWith(["item-1"])
+    })
+  })
+
+  describe("controlled state", () => {
+    it("opens items specified in value prop", () => {
+      renderWithTheme(
+        <Accordion value={["item-1"]}>
+          <Accordion.Item value="item-1" title="Question">
+            Controlled answer
+          </Accordion.Item>
+        </Accordion>
+      )
+
+      expect(screen.getByText("Controlled answer")).toBeInTheDocument()
+    })
+
+    it("opens items specified in defaultValue", () => {
+      renderWithTheme(
+        <Accordion defaultValue={["item-1"]}>
+          <Accordion.Item value="item-1" title="Question">
+            Default open answer
+          </Accordion.Item>
+        </Accordion>
+      )
+
+      expect(screen.getByText("Default open answer")).toBeInTheDocument()
+    })
+  })
+
+  describe("disabled state", () => {
+    it("prevents opening when item is disabled", () => {
+      renderWithTheme(
+        <Accordion>
+          <Accordion.Item title="Question" disabled>
+            Hidden answer
+          </Accordion.Item>
+        </Accordion>
+      )
+
+      fireEvent.click(screen.getByRole("button", { name: /Question/ }))
+      expect(screen.queryByText("Hidden answer")).not.toBeInTheDocument()
+    })
+
+    it("disables all items when root is disabled", () => {
+      renderWithTheme(
+        <Accordion disabled>
+          <Accordion.Item title="Question">Answer</Accordion.Item>
+        </Accordion>
+      )
+
+      fireEvent.click(screen.getByRole("button", { name: /Question/ }))
+      expect(screen.queryByText("Answer")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("renders trigger as a button", () => {
+      renderWithTheme(
+        <Accordion>
+          <Accordion.Item title="Question">Answer</Accordion.Item>
+        </Accordion>
+      )
+
+      expect(
+        screen.getByRole("button", { name: /Question/ })
+      ).toBeInTheDocument()
+    })
+
+    it("sets expanded state on trigger", () => {
+      renderWithTheme(
+        <Accordion defaultValue={["q"]}>
+          <Accordion.Item value="q" title="Question">
+            Answer
+          </Accordion.Item>
+        </Accordion>
+      )
+
+      expect(screen.getByRole("button", { name: /Question/ })).toHaveAttribute(
+        "aria-expanded",
+        "true"
+      )
+    })
+  })
+})

package/src/components/molecules/Accordion/Accordion.tsx

@@ -0,0 +1,284 @@
+import React from "react"
+import { View, Pressable, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import {
+  AddCircle,
+  AddCircleOutline,
+  RemoveCircle,
+  RemoveCircleOutline
+} from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../../atoms/Icon"
+import { Typography } from "../../atoms/Typography"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type AccordionSize = "small" | "large"
+
+type AccordionRootOwnProps = {
+  size?: AccordionSize
+  multiple?: boolean
+  defaultValue?: string[]
+  value?: string[]
+  onValueChange?: (value: string[]) => void
+  disabled?: boolean
+  children: React.ReactNode
+}
+
+export type AccordionProps = AccordionRootOwnProps &
+  Omit<ViewProps, keyof AccordionRootOwnProps>
+
+type AccordionItemOwnProps = {
+  title: string
+  children: React.ReactNode
+  value?: string
+  disabled?: boolean
+}
+
+export type AccordionItemProps = AccordionItemOwnProps &
+  Omit<ViewProps, keyof AccordionItemOwnProps>
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+type AccordionContextValue = {
+  openValues: string[]
+  toggle: (value: string) => void
+  disabled: boolean
+  size: AccordionSize
+}
+
+const AccordionContext = React.createContext<AccordionContextValue>({
+  openValues: [],
+  toggle: () => {},
+  disabled: false,
+  size: "small"
+})
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const StyledRoot = styled(View)<{ rootGap: number }>(({ rootGap }) => ({
+  width: "100%",
+  flexDirection: "column",
+  gap: rootGap
+}))
+
+const StyledItem = styled(View)({
+  flexDirection: "column"
+})
+
+const StyledTrigger = styled(Pressable)<{
+  triggerOpacity: number
+}>(({ triggerOpacity }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  opacity: triggerOpacity
+}))
+
+const StyledPanel = styled(View)<{ panelGap: number }>(({ panelGap }) => ({
+  marginTop: panelGap
+}))
+
+const StyledDivider = styled(View)<{
+  dividerColor: string
+  dividerMarginTop: number
+}>(({ dividerColor, dividerMarginTop }) => ({
+  height: 1,
+  backgroundColor: dividerColor,
+  marginTop: dividerMarginTop
+}))
+
+// ─── AccordionItem ────────────────────────────────────────────────────────────
+
+/**
+ * A single item within an `Accordion`. Renders a pressable header and
+ * collapsible panel content.
+ *
+ * @param {string} title - The header text shown at all times.
+ * @param {React.ReactNode} children - Content revealed when open.
+ * @param {string} [value] - Unique identifier for controlled state.
+ * @param {boolean} [disabled=false] - Prevents the item from being opened.
+ */
+const AccordionItem = React.forwardRef<View, AccordionItemProps>(
+  ({ title, children, value, disabled: itemDisabled, ...rest }, ref) => {
+    const theme = useTheme()
+    const { accordion } = theme.tokens.components
+    const {
+      openValues,
+      toggle,
+      disabled: rootDisabled,
+      size
+    } = React.useContext(AccordionContext)
+
+    const itemValue = value ?? title
+    const isOpen = openValues.includes(itemValue)
+    const isDisabled = itemDisabled || rootDisabled
+    const titleToken =
+      size === "large"
+        ? accordion.typography.desktop.title
+        : accordion.typography.mobile.title
+
+    const handlePress = () => {
+      if (!isDisabled) {
+        toggle(itemValue)
+      }
+    }
+
+    return (
+      <StyledItem ref={ref} {...rest}>
+        <StyledTrigger
+          onPress={handlePress}
+          disabled={isDisabled}
+          accessibilityRole="button"
+          accessibilityState={{ expanded: isOpen, disabled: isDisabled }}
+          triggerOpacity={isDisabled ? 0.4 : 1}
+        >
+          {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => {
+            const isFilled = pressed || hovered
+            const icon = isOpen
+              ? isFilled
+                ? RemoveCircle
+                : RemoveCircleOutline
+              : isFilled
+                ? AddCircle
+                : AddCircleOutline
+
+            return (
+              <>
+                <View style={{ flex: 1 }}>
+                  <Typography
+                    token={titleToken}
+                    color={accordion.colour.text.title}
+                  >
+                    {title}
+                  </Typography>
+                </View>
+                <Icon icon={icon} size="md" colour="primary" />
+              </>
+            )
+          }}
+        </StyledTrigger>
+
+        {isOpen && (
+          <StyledPanel
+            panelGap={parseTokenValue(accordion.spacing.content.gap)}
+          >
+            <Typography
+              token={accordion.typography.subText}
+              color={accordion.colour.text.subText}
+            >
+              {children}
+            </Typography>
+          </StyledPanel>
+        )}
+
+        <StyledDivider
+          dividerColor={theme.tokens.semantics.colour.border.default}
+          dividerMarginTop={parseTokenValue(accordion.spacing.gap)}
+        />
+      </StyledItem>
+    )
+  }
+)
+
+AccordionItem.displayName = "Accordion.Item"
+
+// ─── Accordion (Root) ─────────────────────────────────────────────────────────
+
+/**
+ * A vertically stacked list of items that expand or collapse to reveal
+ * associated content with full accessibility support.
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <Accordion.Item title="What ingredients do you use?">
+ *     We use 60% human-quality protein with fresh vegetables.
+ *   </Accordion.Item>
+ *   <Accordion.Item title="How is the food delivered?">
+ *     Fresh-frozen and delivered straight to your door.
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ *
+ * @param {"small" | "large"} [size="small"] - Title size variant.
+ * @param {boolean} [multiple=false] - Allow multiple items open at once.
+ * @param {string[]} [defaultValue] - Uncontrolled: items open by default.
+ * @param {string[]} [value] - Controlled open items (requires `onValueChange`).
+ * @param {(value: string[]) => void} [onValueChange] - Fires when open items change.
+ * @param {boolean} [disabled=false] - Disables all items.
+ * @param {React.ReactNode} children - One or more `Accordion.Item` elements.
+ */
+const AccordionRoot = React.forwardRef<View, AccordionProps>(
+  (
+    {
+      children,
+      size = "small",
+      multiple = false,
+      defaultValue,
+      value: controlledValue,
+      onValueChange,
+      disabled = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { accordion } = theme.tokens.components
+
+    const isControlled = controlledValue !== undefined
+    const [internalValue, setInternalValue] = React.useState<string[]>(
+      defaultValue ?? []
+    )
+    const openValues = isControlled ? controlledValue : internalValue
+
+    const toggle = React.useCallback(
+      (itemValue: string) => {
+        const isOpen = openValues.includes(itemValue)
+        let next: string[]
+
+        if (isOpen) {
+          next = openValues.filter((v) => v !== itemValue)
+        } else if (multiple) {
+          next = [...openValues, itemValue]
+        } else {
+          next = [itemValue]
+        }
+
+        if (!isControlled) {
+          setInternalValue(next)
+        }
+        onValueChange?.(next)
+      },
+      [openValues, multiple, isControlled, onValueChange]
+    )
+
+    const ctx = React.useMemo(
+      () => ({ openValues, toggle, disabled, size }),
+      [openValues, toggle, disabled, size]
+    )
+
+    return (
+      <AccordionContext.Provider value={ctx}>
+        <StyledRoot
+          ref={ref}
+          rootGap={parseTokenValue(accordion.spacing.gap)}
+          {...rest}
+        >
+          {children}
+        </StyledRoot>
+      </AccordionContext.Provider>
+    )
+  }
+)
+
+AccordionRoot.displayName = "Accordion"
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem
+})

package/src/components/molecules/Accordion/index.ts

@@ -0,0 +1,6 @@
+export { Accordion } from "./Accordion"
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionSize
+} from "./Accordion"