@butternutbox/pawprint-native 1.3.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/__mocks__/react-native-reanimated.tsx

@@ -51,6 +51,10 @@ export const useSharedValue = <T,>(initial: T) => ({ value: initial })
 
 export const useAnimatedStyle = (_fn: () => object) => ({})
 
+export const useReducedMotion = () => false
+
+export const cancelAnimation = (_value: unknown) => {}
+
 export const runOnJS =
   <Args extends unknown[], R>(fn: (..._args: Args) => R) =>
   (...args: Args) =>
@@ -58,6 +62,7 @@ export const runOnJS =
 
 export const withTiming = <T,>(value: T) => value
 export const withSpring = <T,>(value: T) => value
+export const withRepeat = <T,>(value: T) => value
 
 // Animation builder stub — supports chaining .duration() / .easing() / .delay()
 const createBuilder = () => {

package/src/__mocks__/react-native-svg.tsx

@@ -25,3 +25,4 @@ export const Stop = passThrough("Stop")
 export const G = passThrough("G")
 export const Path = passThrough("Path")
 export const ClipPath = passThrough("ClipPath")
+export const Polygon = passThrough("Polygon")

package/src/components/atoms/Button/Button.stories.tsx

@@ -41,8 +41,8 @@ export default {
     },
     colour: {
       control: { type: "select" },
-      options: ["primary", "secondary"],
-      description: "Colour scheme"
+      options: ["primary", "secondary", "tertiary"],
+      description: "Colour scheme (filled only)"
     },
     loading: {
       control: { type: "boolean" },
@@ -86,7 +86,7 @@ export const AllVariants = () => (
           {variant}
         </Typography>
         <View style={styles.row}>
-          {(["primary", "secondary"] as const).map((colour) => (
+          {(["primary", "secondary", "tertiary"] as const).map((colour) => (
             <Button key={colour} variant={variant} colour={colour}>
               {colour}
             </Button>
@@ -120,7 +120,7 @@ export const AllStates = () => (
   <View style={styles.column}>
     {(["filled", "outlined", "text"] as const).map((variant) => (
       <View key={variant} style={styles.section}>
-        {(["primary", "secondary"] as const).map((colour) => (
+        {(["primary", "secondary", "tertiary"] as const).map((colour) => (
           <View key={colour} style={styles.section}>
             <Typography size="sm" weight="semiBold" color="tertiary">
               {variant} / {colour}

package/src/components/atoms/Button/Button.test.tsx

@@ -2,7 +2,7 @@ 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 { renderWithTheme, theme } from "../../../test-utils"
 import { Button } from "./Button"
 
 describe("Button", () => {
@@ -36,13 +36,20 @@ describe("Button", () => {
   })
 
   describe("when rendering colours", () => {
-    it.each(["primary", "secondary"] as const)(
+    it.each(["primary", "secondary", "tertiary"] as const)(
       "renders %s colour",
       (colour) => {
         renderWithTheme(<Button colour={colour}>Colour</Button>)
         expect(screen.getByText("Colour")).toBeInTheDocument()
       }
     )
+
+    it("applies the tertiary text colour", () => {
+      renderWithTheme(<Button colour="tertiary">Tertiary</Button>)
+      expect(screen.getByText("Tertiary")).toHaveStyle({
+        color: theme.tokens.semantics.colour.text.action.default
+      })
+    })
   })
 
   describe("when component is interactive", () => {

package/src/components/atoms/Button/Button.tsx

@@ -1,14 +1,14 @@
 import React from "react"
 import { Pressable, View, PressableProps } from "react-native"
 import styled from "@emotion/native"
-import { useTheme } from "@emotion/react"
+import { useTheme, type Theme } from "@emotion/react"
 import { Typography } from "../Typography"
 import { Spinner } from "../Spinner"
 import { resolveFont } from "@butternutbox/pawprint-fonts"
 
 type ButtonVariant = "filled" | "outlined" | "text"
 type ButtonSize = "sm" | "md" | "lg"
-type ButtonColour = "primary" | "secondary"
+type ButtonColour = "primary" | "secondary" | "tertiary"
 
 type ButtonOwnProps = {
   variant?: ButtonVariant
@@ -26,6 +26,35 @@ type ButtonProps = ButtonOwnProps &
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
+type FilledColourTokens = {
+  background: {
+    default: string
+    selected: string
+    disabled: string
+  }
+  text: { default: string; selected?: string }
+}
+
+const getFilledColourTokens = (
+  theme: Theme,
+  colour: ButtonColour
+): FilledColourTokens => {
+  const buttons = theme.tokens.components.buttons
+
+  if (colour === "tertiary") {
+    const { text } = theme.tokens.semantics.colour
+    return {
+      background: buttons.iconButton.filledButton.colour.background.tertiary,
+      text: { default: text.action.default, selected: text.action.inverse }
+    }
+  }
+
+  return {
+    background: buttons.filledButton.colour.background[colour],
+    text: buttons.filledButton.colour.text[colour]
+  }
+}
+
 const sizeToTypographyKey: Record<ButtonSize, string> = {
   lg: "large",
   md: "medium",
@@ -104,7 +133,7 @@ const StyledSpinnerWrapper = styled(View)({
  *
  * @param variant - *(optional)* Visual variant: filled (default), outlined, or text.
  * @param size - *(optional)* Size variant: sm, md (default), lg
- * @param colour - *(optional)* Colour variant: primary (default), secondary
+ * @param colour - *(optional)* Colour variant: primary (default), secondary, tertiary. Only applies to filled variant.
  * @param loading - *(optional)* Shows spinner and disables interaction
  * @param fullWidth - *(optional)* Stretches button to fill its container
  * @param startIcon - *(optional)* Leading icon element
@@ -150,16 +179,19 @@ const Button = React.forwardRef<View, ButtonProps>(
       spinnerColor: string
     } => {
       if (variant === "filled") {
-        const bgTokens = buttons.filledButton.colour.background[colour]
-        const textToken = buttons.filledButton.colour.text[colour].default
+        const { background: bgTokens, text: textTokens } =
+          getFilledColourTokens(theme, colour)
         return {
           backgroundColor: isDisabled
             ? bgTokens.disabled
             : isPressed
               ? bgTokens.selected
               : bgTokens.default,
-          textColor: textToken,
-          spinnerColor: textToken
+          textColor:
+            isPressed && textTokens.selected
+              ? textTokens.selected
+              : textTokens.default,
+          spinnerColor: textTokens.default
         }
       }
 

package/src/components/atoms/ChefDogLoader/ChefDogLoader.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { ChefDogLoader } from "./ChefDogLoader"
+import type { ChefDogLoaderProps } from "./ChefDogLoader"
+
+export default {
+  title: "Atoms/ChefDogLoader",
+  component: ChefDogLoader,
+  argTypes: {
+    size: {
+      control: { type: "number" },
+      description: "Width and height in points"
+    }
+  }
+}
+
+export const Playground = (args: ChefDogLoaderProps) => (
+  <ChefDogLoader {...args} />
+)
+Playground.args = {
+  size: 240
+}

package/src/components/atoms/ChefDogLoader/ChefDogLoader.test.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { View } from "react-native"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { ChefDogLoader } from "./ChefDogLoader"
+
+describe("ChefDogLoader", () => {
+  describe("when component is rendering", () => {
+    it("renders with progressbar role", () => {
+      renderWithTheme(<ChefDogLoader />)
+      expect(screen.getByRole("progressbar")).toBeInTheDocument()
+    })
+
+    it("has accessible loading label", () => {
+      renderWithTheme(<ChefDogLoader />)
+      expect(screen.getByLabelText("Loading")).toBeInTheDocument()
+    })
+
+    it("accepts a custom accessibility label", () => {
+      renderWithTheme(<ChefDogLoader accessibilityLabel="Fetching your plan" />)
+      expect(screen.getByLabelText("Fetching your plan")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<View>()
+      renderWithTheme(<ChefDogLoader ref={ref} />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/atoms/ChefDogLoader/ChefDogLoader.tsx

@@ -0,0 +1,115 @@
+import React from "react"
+import { StyleSheet, View, ViewProps } from "react-native"
+import Svg, { ClipPath, Defs, G, Polygon } from "react-native-svg"
+import Reanimated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withTiming
+} from "react-native-reanimated"
+import { LabradorChefsHat } from "@butternutbox/pawprint-illustrations/breeds"
+
+type ChefDogLoaderOwnProps = {
+  size?: number
+}
+
+type ChefDogLoaderProps = ChefDogLoaderOwnProps &
+  Omit<ViewProps, keyof ChefDogLoaderOwnProps>
+
+const DEFAULT_SIZE = 240
+const TAIL_REGION = "0,0 15.5,0 15.5,22.4 12,26.5 0,26.5"
+const BODY_REGION = "15.5,0 48,0 48,48 0,48 0,26.5 12,26.5 15.5,22.4"
+const TAIL_ORIGIN = { x: 13.4 / 48 - 0.5, y: 24.6 / 48 - 0.5 }
+const TAIL_DOWN = -6
+const TAIL_UP = 14
+const WAG_DURATION = 180
+
+/**
+ * The labrador in a chef's hat wagging its tail, for indeterminate loading states.
+ *
+ * @example
+ * ```tsx
+ * import { ChefDogLoader } from "@butternutbox/pawprint-native"
+ *
+ * <ChefDogLoader />
+ * <ChefDogLoader size={160} />
+ * ```
+ *
+ * @param size - *(optional)* Width and height in points (default: 240)
+ */
+const ChefDogLoader = React.forwardRef<View, ChefDogLoaderProps>(
+  ({ size = DEFAULT_SIZE, ...rest }, ref) => {
+    const reducedMotion = useReducedMotion()
+    const rotation = useSharedValue(TAIL_DOWN)
+    const clipId = React.useId().replace(/:/g, "")
+
+    React.useEffect(() => {
+      if (reducedMotion) return
+      rotation.value = withRepeat(
+        withTiming(TAIL_UP, {
+          duration: WAG_DURATION,
+          easing: Easing.inOut(Easing.quad)
+        }),
+        -1,
+        true
+      )
+      return () => cancelAnimation(rotation)
+    }, [reducedMotion, rotation])
+
+    const originX = TAIL_ORIGIN.x * size
+    const originY = TAIL_ORIGIN.y * size
+
+    const tailStyle = useAnimatedStyle(() => ({
+      transform: [
+        { translateX: originX },
+        { translateY: originY },
+        { rotate: `${rotation.value}deg` },
+        { translateX: -originX },
+        { translateY: -originY }
+      ]
+    }))
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="progressbar"
+        accessibilityLabel="Loading"
+        {...rest}
+      >
+        <Svg width={size} height={size} viewBox="0 0 48 48">
+          <Defs>
+            <ClipPath id={`${clipId}-body`}>
+              <Polygon points={BODY_REGION} />
+            </ClipPath>
+          </Defs>
+          <G clipPath={`url(#${clipId}-body)`}>
+            <LabradorChefsHat />
+          </G>
+        </Svg>
+        <Reanimated.View
+          pointerEvents="none"
+          style={[StyleSheet.absoluteFill, tailStyle]}
+        >
+          <Svg width={size} height={size} viewBox="0 0 48 48">
+            <Defs>
+              <ClipPath id={`${clipId}-tail`}>
+                <Polygon points={TAIL_REGION} />
+              </ClipPath>
+            </Defs>
+            <G clipPath={`url(#${clipId}-tail)`}>
+              <LabradorChefsHat />
+            </G>
+          </Svg>
+        </Reanimated.View>
+      </View>
+    )
+  }
+)
+
+ChefDogLoader.displayName = "ChefDogLoader"
+
+export { ChefDogLoader }
+export type { ChefDogLoaderProps }

package/src/components/atoms/ChefDogLoader/index.ts

@@ -0,0 +1,2 @@
+export { ChefDogLoader } from "./ChefDogLoader"
+export type { ChefDogLoaderProps } from "./ChefDogLoader"

package/src/components/atoms/index.ts

@@ -3,6 +3,7 @@ export * from "./CarouselControls"
 export * from "./Typography"
 export * from "./Badge"
 export * from "./Button"
+export * from "./ChefDogLoader"
 export * from "./Divider"
 export * from "./Hint"
 export * from "./Icon"

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

@@ -0,0 +1,140 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { Add, Search, User } from "@butternutbox/pawprint-icons/core"
+import {
+  NavigationHeader,
+  type NavigationHeaderProps,
+  type NavigationHeaderSurface
+} from "./NavigationHeader"
+import { Typography } from "../../atoms/Typography"
+
+const actionElements: Record<string, React.ReactNode> = {
+  None: undefined,
+  Button: <NavigationHeader.Button>Pouch quantity</NavigationHeader.Button>,
+  "Icon buttons + Button": (
+    <>
+      <NavigationHeader.IconButton icon={Search} aria-label="Search" />
+      <NavigationHeader.IconButton icon={Add} aria-label="Add" />
+      <NavigationHeader.Button>Button</NavigationHeader.Button>
+    </>
+  ),
+  "Primary button": (
+    <NavigationHeader.Button variant="filled" colour="primary">
+      Button
+    </NavigationHeader.Button>
+  )
+}
+
+export default {
+  title: "Molecules/NavigationHeader",
+  component: NavigationHeader,
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "Page title, truncated to one line."
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["primary", "secondary"],
+      description:
+        "Header type. `primary` for landing pages; `secondary` adds a back button for child pages."
+    },
+    surface: {
+      control: { type: "select" },
+      options: ["brand", "subtle", "plain"],
+      description: "Background colour."
+    },
+    backLabel: {
+      control: { type: "text" },
+      description: "Accessible label for the back button."
+    },
+    showRadiusPips: {
+      control: { type: "boolean" },
+      description:
+        "Shows the rounded corners below the header. Defaults to `true` on the `brand` surface only."
+    },
+    safeAreaTop: {
+      control: { type: "boolean" },
+      description: "Pads the header by the top safe area inset."
+    },
+    actions: {
+      control: { type: "select" },
+      options: Object.keys(actionElements),
+      mapping: actionElements,
+      description: "Right-hand action group."
+    }
+  }
+}
+
+export const Playground = (args: NavigationHeaderProps) => (
+  <NavigationHeader {...args} />
+)
+Playground.args = {
+  title: "Title",
+  variant: "secondary",
+  surface: "brand",
+  backLabel: "Back",
+  safeAreaTop: false,
+  actions: actionElements["Icon buttons + Button"]
+}
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    {(["primary", "secondary"] as const).map((variant) => (
+      <NavigationHeader
+        key={variant}
+        variant={variant}
+        title={variant === "primary" ? "Hello, Katie" : "My dog"}
+        safeAreaTop={false}
+        actions={
+          <>
+            <NavigationHeader.IconButton icon={User} aria-label="Account" />
+            <NavigationHeader.Button>Button</NavigationHeader.Button>
+          </>
+        }
+      />
+    ))}
+  </View>
+)
+
+export const AllSurfaces = () => (
+  <View style={styles.column}>
+    {(["brand", "subtle", "plain"] as NavigationHeaderSurface[]).map(
+      (surface) => (
+        <View key={surface} style={styles.section}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            {surface}
+          </Typography>
+          <NavigationHeader
+            variant="secondary"
+            surface={surface}
+            title="Recipes"
+            safeAreaTop={false}
+            actions={
+              <>
+                <NavigationHeader.IconButton icon={Add} aria-label="Add" />
+                <NavigationHeader.Button>
+                  Pouch quantity
+                </NavigationHeader.Button>
+              </>
+            }
+          />
+        </View>
+      )
+    )}
+  </View>
+)
+
+export const LongTitle = () => (
+  <NavigationHeader
+    variant="secondary"
+    title="A very long page title that should truncate before the actions"
+    safeAreaTop={false}
+    actions={<NavigationHeader.Button>Pouch quantity</NavigationHeader.Button>}
+  />
+)
+
+const styles = StyleSheet.create({
+  column: { flexDirection: "column", gap: 24 },
+  section: { gap: 8 }
+})

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

@@ -0,0 +1,110 @@
+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 { NavigationHeader } from "./NavigationHeader"
+
+const MockIcon = () => <span data-testid="mock-icon" />
+
+describe("NavigationHeader", () => {
+  describe("when component is rendering", () => {
+    it("renders the title", () => {
+      renderWithTheme(<NavigationHeader title="Recipes" />)
+      expect(screen.getByText("Recipes")).toBeInTheDocument()
+    })
+
+    it.each(["primary", "secondary"] as const)(
+      "renders the %s variant",
+      (variant) => {
+        renderWithTheme(<NavigationHeader title="Recipes" variant={variant} />)
+        expect(screen.getByText("Recipes")).toBeInTheDocument()
+      }
+    )
+
+    it.each(["brand", "subtle", "plain"] as const)(
+      "renders the %s surface",
+      (surface) => {
+        renderWithTheme(<NavigationHeader title="Recipes" surface={surface} />)
+        expect(screen.getByText("Recipes")).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when rendering the back button", () => {
+    it("does not render it for the primary variant", () => {
+      renderWithTheme(<NavigationHeader title="Home" onBack={vi.fn()} />)
+      expect(screen.queryByLabelText("Back")).not.toBeInTheDocument()
+    })
+
+    it("calls onBack when pressed", async () => {
+      const user = userEvent.setup()
+      const onBack = vi.fn()
+      renderWithTheme(
+        <NavigationHeader title="Recipes" variant="secondary" onBack={onBack} />
+      )
+
+      await user.click(screen.getByLabelText("Back"))
+      expect(onBack).toHaveBeenCalledTimes(1)
+    })
+
+    it("uses a custom back label", () => {
+      renderWithTheme(
+        <NavigationHeader
+          title="Recipes"
+          variant="secondary"
+          backLabel="Retour"
+        />
+      )
+      expect(screen.getByLabelText("Retour")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering actions", () => {
+    it("renders text and icon actions", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(
+        <NavigationHeader
+          title="Recipes"
+          actions={
+            <>
+              <NavigationHeader.IconButton icon={MockIcon} aria-label="Add" />
+              <NavigationHeader.Button onPress={onPress}>
+                Pouch quantity
+              </NavigationHeader.Button>
+            </>
+          }
+        />
+      )
+      expect(screen.getByLabelText("Add")).toBeInTheDocument()
+
+      await user.click(screen.getByText("Pouch quantity"))
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("when rendering radius pips", () => {
+    const countPips = (container: HTMLElement) =>
+      container.querySelectorAll('[data-mock="Svg"]').length
+
+    it("renders them on the brand surface by default", () => {
+      const { container } = renderWithTheme(
+        <NavigationHeader title="Recipes" />
+      )
+      expect(countPips(container)).toBe(2)
+    })
+
+    it("hides them on other surfaces unless enabled", () => {
+      const { container, rerender } = renderWithTheme(
+        <NavigationHeader title="Recipes" surface="subtle" />
+      )
+      expect(countPips(container)).toBe(0)
+
+      rerender(
+        <NavigationHeader title="Recipes" surface="subtle" showRadiusPips />
+      )
+      expect(countPips(container)).toBe(2)
+    })
+  })
+})