@butternutbox/pawprint-native 0.3.1 → 0.4.0

package/src/components/molecules/Drawer/DrawerBody.tsx

@@ -2,9 +2,7 @@ import React from "react"
 import { ScrollView, ScrollViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
-import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
-import { useDrawerFooterContext } from "./DrawerFooterContext"
 
 export type DrawerBodyProps = ScrollViewProps
 
@@ -14,22 +12,12 @@ const StyledScrollView = styled(ScrollView)<{
   bodyPaddingHorizontal: number
   bodyPaddingRight: number
   bodyGap: number
-  bodyPaddingVertical: number
-}>(
-  ({
-    bodyPaddingHorizontal,
-    bodyPaddingRight,
-    bodyGap,
-    bodyPaddingVertical
-  }) => ({
-    flexGrow: 1,
-    flexShrink: 1,
-    paddingLeft: bodyPaddingHorizontal,
-    paddingRight: bodyPaddingRight,
-    gap: bodyGap,
-    paddingTop: bodyPaddingVertical
-  })
-)
+}>(({ bodyPaddingHorizontal, bodyPaddingRight, bodyGap }) => ({
+  flex: 1,
+  paddingLeft: bodyPaddingHorizontal,
+  paddingRight: bodyPaddingRight,
+  gap: bodyGap
+}))
 
 /**
  * Scrollable content area of the drawer. Grows to fill available space
@@ -42,13 +30,10 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const { buttons } = theme.tokens.components
     const { content } = spacing
     const headerContext = useDrawerHeaderContext()
-    const hasFooter = useDrawerFooterContext()
-    const insets = useSafeAreaInsets()
 
     const gap = parseTokenValue(content.slot.gap)
-    const verticalPadding = parseTokenValue(content.slot.verticalPadding)
-    const bottomPadding = verticalPadding + (hasFooter ? 0 : insets.bottom)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
+    const topPadding = parseTokenValue(content.slot.verticalPadding)
 
     // When there's no header the close button floats in the top-right corner.
     // Reserve space on the right so body content doesn't slide under it.
@@ -64,9 +49,12 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
         bodyGap={gap}
-        bodyPaddingVertical={verticalPadding}
         contentContainerStyle={[
-          { gap, paddingBottom: bottomPadding },
+          {
+            gap,
+            paddingTop: topPadding,
+            paddingBottom: 0
+          },
           contentContainerStyle
         ]}
         {...props}

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

@@ -0,0 +1,248 @@
+import React from "react"
+import { View, StyleSheet, Image } from "react-native"
+import { ProductDisplayCard } from "./ProductDisplayCard"
+import type { ProductDisplayCardProps } from "./ProductDisplayCard"
+
+const PlaceholderImage = () => (
+  <Image
+    source={{ uri: "https://placeholder.co/148x148?text=Recipe" }}
+    style={{ width: "100%", height: "100%" }}
+  />
+)
+
+const styles = StyleSheet.create({
+  column: { flexDirection: "column", gap: 24, padding: 16 }
+})
+
+export default {
+  title: "Molecules/ProductDisplayCard",
+  component: ProductDisplayCard,
+  argTypes: {
+    device: {
+      control: { type: "select" },
+      options: ["desktop", "mobile"],
+      description: "Device variant affecting sizing and typography"
+    },
+    title: {
+      control: { type: "text" },
+      description: "Product title"
+    },
+    subtext: {
+      control: { type: "text" },
+      description: "Secondary text (e.g. price)"
+    },
+    showSubtext: {
+      control: { type: "boolean" },
+      description: "Show/hide subtext"
+    },
+    quantity: {
+      control: { type: "number", min: 1 },
+      description: "Current quantity"
+    },
+    showQuantityPicker: {
+      control: { type: "boolean" },
+      description: "Show/hide quantity picker"
+    },
+    disableQuantityButtons: {
+      control: { type: "boolean" },
+      description: "Disable quantity buttons"
+    },
+    hideQuantityButtons: {
+      control: { type: "boolean" },
+      description: "Hide quantity buttons"
+    },
+    showIncrementButton: {
+      control: { type: "boolean" },
+      description: "Show/hide increment button"
+    },
+    showDecrementButton: {
+      control: { type: "boolean" },
+      description: "Show/hide decrement button"
+    },
+    incrementDisabled: {
+      control: { type: "boolean" },
+      description: "Disable increment button"
+    },
+    decrementDisabled: {
+      control: { type: "boolean" },
+      description: "Disable decrement button"
+    },
+    showBanner: {
+      control: { type: "boolean" },
+      description: "Show/hide banner below card"
+    },
+    onQuantityChange: {
+      control: false,
+      description: "Callback when quantity changes"
+    },
+    image: {
+      control: false,
+      description: "Image element or content"
+    },
+    banner: {
+      control: { type: "text" },
+      description: "Banner content to show below card"
+    },
+    bannerType: {
+      control: { type: "select" },
+      options: ["error", "success", "warning", "info"],
+      description: "Banner notification type"
+    },
+    showBannerIcon: {
+      control: { type: "boolean" },
+      description: "Show/hide banner notification icon"
+    }
+  }
+}
+
+export const Playground = (args: ProductDisplayCardProps) => (
+  <View style={styles.column}>
+    <ProductDisplayCard {...args} />
+  </View>
+)
+Playground.args = {
+  device: "mobile",
+  title: "Recipe Name",
+  subtext: "+£0.00/pouch",
+  showSubtext: true,
+  quantity: 1,
+  showQuantityPicker: true,
+  showBanner: true,
+  bannerType: "info",
+  showBannerIcon: false,
+  banner: " High in protein •  Natural ingredients •  Vet approved",
+  image: <PlaceholderImage />
+}
+
+export const Default = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      device="mobile"
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={1}
+      showQuantityPicker={false}
+      showBanner={false}
+      image={<PlaceholderImage />}
+    />
+  </View>
+)
+
+export const Desktop = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      device="desktop"
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={1}
+      showQuantityPicker
+      showBanner={false}
+      image={<PlaceholderImage />}
+    />
+  </View>
+)
+
+export const Mobile = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      device="mobile"
+      title="Recipe Name"
+      subtext="+£0.50/pouch"
+      showSubtext
+      quantity={1}
+      showQuantityPicker
+      showBanner={false}
+      image={<PlaceholderImage />}
+    />
+  </View>
+)
+
+export const WithBanner = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      device="mobile"
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={1}
+      showQuantityPicker
+      showBanner
+      bannerType="success"
+      showBannerIcon={false}
+      banner="High in protein • Natural ingredients • Vet approved"
+      image={<PlaceholderImage />}
+    />
+  </View>
+)
+
+export const WithBannerIcon = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      device="mobile"
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={1}
+      showQuantityPicker
+      showBanner
+      bannerType="success"
+      showBannerIcon
+      banner="High in protein • Natural ingredients • Vet approved"
+      image={<PlaceholderImage />}
+    />
+  </View>
+)
+
+export const NoSubtext = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      device="mobile"
+      title="Recipe Name"
+      showSubtext={false}
+      quantity={1}
+      showQuantityPicker
+      showBanner={false}
+      image={<PlaceholderImage />}
+    />
+  </View>
+)
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      device="desktop"
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={1}
+      showQuantityPicker
+      showBanner={false}
+      image={<PlaceholderImage />}
+    />
+
+    <ProductDisplayCard
+      device="mobile"
+      title="Recipe Name"
+      subtext="+£0.50/pouch"
+      showSubtext
+      quantity={2}
+      showQuantityPicker
+      showBanner={false}
+      image={<PlaceholderImage />}
+    />
+
+    <ProductDisplayCard
+      device="mobile"
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={1}
+      showQuantityPicker
+      showBanner
+      banner=" High in protein •  Natural ingredients"
+      image={<PlaceholderImage />}
+    />
+  </View>
+)

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

@@ -0,0 +1,198 @@
+import { describe, it, expect } from "vitest"
+import { screen } from "@testing-library/react"
+import { View, Text } from "react-native"
+import { ProductDisplayCard } from "./ProductDisplayCard"
+import { renderWithTheme } from "../../../test-utils"
+
+describe("ProductDisplayCard (Native)", () => {
+  it("renders with required title prop", () => {
+    renderWithTheme(<ProductDisplayCard title="Test Product" />)
+
+    expect(screen.getByText("Test Product")).toBeTruthy()
+  })
+
+  it("renders subtext when provided and showSubtext is true", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        subtext="£9.99"
+        showSubtext={true}
+      />
+    )
+
+    expect(screen.getByText("£9.99")).toBeTruthy()
+  })
+
+  it("hides subtext when showSubtext is false", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        subtext="£9.99"
+        showSubtext={false}
+      />
+    )
+
+    expect(screen.queryByText("£9.99")).toBeFalsy()
+  })
+
+  it("renders image when provided", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        image={
+          <View>
+            <Text>Image</Text>
+          </View>
+        }
+      />
+    )
+
+    expect(screen.getByText("Image")).toBeTruthy()
+  })
+
+  it("shows quantity picker when showQuantityPicker is true", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        showQuantityPicker={true}
+        quantity={1}
+      />
+    )
+
+    const numberInput = screen.getByDisplayValue("1")
+    expect(numberInput).toBeTruthy()
+  })
+
+  it("does not show quantity picker when showQuantityPicker is false", () => {
+    renderWithTheme(
+      <ProductDisplayCard title="Test Product" showQuantityPicker={false} />
+    )
+
+    expect(screen.queryByDisplayValue("1")).toBeFalsy()
+  })
+
+  it("renders banner when showBanner is true", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        showBanner={true}
+        banner={<Text>Test Banner</Text>}
+      />
+    )
+
+    expect(screen.getByText("Test Banner")).toBeTruthy()
+  })
+
+  it("does not render banner when showBanner is false", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        showBanner={false}
+        banner={<Text>Test Banner</Text>}
+      />
+    )
+
+    expect(screen.queryByText("Test Banner")).toBeFalsy()
+  })
+
+  it("renders with desktop device variant by default", () => {
+    renderWithTheme(<ProductDisplayCard title="Test Product" />)
+
+    expect(screen.getByText("Test Product")).toBeTruthy()
+  })
+
+  it("renders with mobile device variant when specified", () => {
+    renderWithTheme(<ProductDisplayCard title="Test Product" device="mobile" />)
+
+    expect(screen.getByText("Test Product")).toBeTruthy()
+  })
+
+  it("forwards ref correctly", () => {
+    const ref = { current: null as any }
+
+    renderWithTheme(<ProductDisplayCard ref={ref} title="Test Product" />)
+
+    expect(ref.current).toBeTruthy()
+  })
+
+  it("renders title and subtext together", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Premium Recipe"
+        subtext="+£0.00/pouch"
+        showSubtext={true}
+      />
+    )
+
+    expect(screen.getByText("Premium Recipe")).toBeTruthy()
+    expect(screen.getByText("+£0.00/pouch")).toBeTruthy()
+  })
+
+  it("accepts React element as image", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        image={
+          <View>
+            <Text>Custom Image</Text>
+          </View>
+        }
+      />
+    )
+
+    expect(screen.getByText("Custom Image")).toBeTruthy()
+  })
+
+  it("accepts React element as banner", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        showBanner={true}
+        banner={
+          <View>
+            <Text>Custom Banner</Text>
+          </View>
+        }
+      />
+    )
+
+    expect(screen.getByText("Custom Banner")).toBeTruthy()
+  })
+
+  it("renders banner with different types", () => {
+    const { rerender } = renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        showBanner={true}
+        banner={<Text>Test Banner</Text>}
+        bannerType="success"
+      />
+    )
+
+    expect(screen.getByText("Test Banner")).toBeTruthy()
+
+    rerender(
+      <ProductDisplayCard
+        title="Test Product"
+        showBanner={true}
+        banner={<Text>Error Banner</Text>}
+        bannerType="error"
+      />
+    )
+
+    expect(screen.getByText("Error Banner")).toBeTruthy()
+  })
+
+  it("displays banner with icon when showBannerIcon is true", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        showBanner={true}
+        banner={<Text>Test Banner</Text>}
+        showBannerIcon={true}
+      />
+    )
+
+    expect(screen.getByText("Test Banner")).toBeTruthy()
+  })
+})