@butternutbox/pawprint-native 0.3.2 → 0.4.0

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

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

@@ -0,0 +1,243 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { Typography } from "../../atoms/Typography"
+import { NumberField } from "../../molecules/NumberField"
+import { Notification } from "../Notification"
+import { parseTokenValue } from "../../../utils"
+
+export type ProductDisplayCardDevice = "desktop" | "mobile"
+
+export type ProductDisplayCardProps = ViewProps & {
+  device?: ProductDisplayCardDevice
+  title: string
+  subtext?: string
+  showSubtext?: boolean
+  quantity?: number
+  onQuantityChange?: (quantity: number) => void
+  showQuantityPicker?: boolean
+  disableQuantityButtons?: boolean
+  hideQuantityButtons?: boolean
+  showIncrementButton?: boolean
+  showDecrementButton?: boolean
+  incrementDisabled?: boolean
+  decrementDisabled?: boolean
+  image?: React.ReactNode
+  banner?: React.ReactNode
+  showBanner?: boolean
+  bannerType?: "error" | "success" | "warning" | "info"
+  showBannerIcon?: boolean
+}
+
+const StyledCardContainer = styled(View)<{
+  cardDevice: ProductDisplayCardDevice
+}>(({ theme }) => {
+  const { spacing, borderRadius } = theme.tokens.semantics.dimensions
+  const { colour } = theme.tokens.semantics
+  const spacingMd = parseTokenValue(spacing.md)
+  const spacingXl = parseTokenValue(spacing.xl)
+  return {
+    flexDirection: "row",
+    width: "100%",
+    height: "100%",
+    maxHeight: spacingXl * 6 + spacingMd,
+    backgroundColor: colour.background.surface.default,
+    borderWidth: 1,
+    borderColor: colour.border.default,
+    borderRadius: parseTokenValue(borderRadius.md),
+    overflow: "hidden",
+    shadowColor: "#522a10",
+    shadowOffset: { width: 0, height: spacingMd / 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: spacingXl - 4,
+    elevation: 5,
+    zIndex: 1
+  }
+})
+
+const StyledImage = styled(View)(() => ({
+  flexShrink: 0,
+  backgroundColor: "#f5f5f5",
+  overflow: "hidden",
+  aspectRatio: "1 / 1",
+  height: "100%"
+}))
+
+const StyledContentArea = styled(View)<{
+  contentDevice: ProductDisplayCardDevice
+}>(({ theme }) => {
+  const { spacing } = theme.tokens.semantics.dimensions
+  return {
+    flex: 1,
+    paddingHorizontal: parseTokenValue(spacing.md),
+    paddingVertical: parseTokenValue(spacing.md),
+    gap: parseTokenValue(spacing.xs),
+    justifyContent: "space-between"
+  }
+})
+
+const StyledTextContainer = styled(View)(() => ({
+  gap: 2
+}))
+
+const StyledBannerWrapper = styled(View)(() => ({
+  width: "100%",
+  marginTop: -48,
+  paddingTop: 24,
+  paddingBottom: 16
+}))
+
+const StyledRootWrapper = styled(View)(() => {
+  return {
+    flexDirection: "column",
+    width: "100%",
+    height: "100%"
+  }
+})
+
+const StyledNotification = styled(Notification as any)(({ theme }) => {
+  const { spacing } = theme.tokens.semantics.dimensions
+  return {
+    top: parseTokenValue(spacing.md),
+    paddingHorizontal: parseTokenValue(spacing.xl),
+    paddingVertical: parseTokenValue(spacing.md)
+  }
+})
+
+/**
+ * Product Display Card component for showing product information with optional quantity picker.
+ *
+ * @example
+ * ```tsx
+ * import { ProductDisplayCard } from "@butternutbox/pawprint-native"
+ *
+ * <ProductDisplayCard
+ *   device="mobile"
+ *   title="Premium Recipe"
+ *   subtext="+£0.00/pouch"
+ *   quantity={1}
+ *   showQuantityPicker
+ * />
+ * ```
+ *
+ * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
+ * @param title - Product title
+ * @param subtext - *(optional)* Subtitle text (e.g. price)
+ * @param showSubtext - *(optional)* Show/hide subtext
+ * @param quantity - *(optional)* Current quantity value
+ * @param onQuantityChange - *(optional)* Callback when quantity changes
+ * @param showQuantityPicker - *(optional)* Show/hide quantity picker
+ * @param image - *(optional)* Image element or content
+ * @param banner - *(optional)* Banner content to show below card
+ * @param showBanner - *(optional)* Show/hide banner
+ * @param bannerType - *(optional)* Banner notification type: "error", "success", "warning", or "info" (default)
+ * @param showBannerIcon - *(optional)* Show/hide banner notification icon
+ */
+export const ProductDisplayCard = React.forwardRef<
+  View,
+  ProductDisplayCardProps
+>(
+  (
+    {
+      device = "mobile",
+      title,
+      subtext,
+      showSubtext = true,
+      quantity = 1,
+      onQuantityChange,
+      showQuantityPicker = false,
+      disableQuantityButtons = false,
+      hideQuantityButtons = false,
+      showIncrementButton,
+      showDecrementButton,
+      incrementDisabled = false,
+      decrementDisabled = false,
+      image,
+      banner,
+      showBanner = false,
+      bannerType = "info",
+      showBannerIcon = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const handleQuantityChange = (newQuantity: number) => {
+      if (newQuantity >= 1) {
+        onQuantityChange?.(newQuantity)
+      }
+    }
+
+    const cardContent = (
+      <StyledCardContainer ref={ref} cardDevice={device} {...rest}>
+        {image && <StyledImage>{image}</StyledImage>}
+
+        <StyledContentArea contentDevice={device}>
+          <StyledTextContainer>
+            <Typography variant="heading" size="xs" color="primary">
+              {title}
+            </Typography>
+
+            {showSubtext && subtext && (
+              <Typography variant="body" size="sm" color="secondary">
+                {subtext}
+              </Typography>
+            )}
+          </StyledTextContainer>
+
+          {showQuantityPicker && (
+            <View style={{ marginLeft: "auto" }}>
+              <NumberField
+                size="sm"
+                value={String(quantity)}
+                onChangeText={(text) => {
+                  const value = parseInt(text, 10)
+                  if (!isNaN(value)) {
+                    handleQuantityChange(value)
+                  }
+                }}
+                onIncrement={() => handleQuantityChange(quantity + 1)}
+                onDecrement={() => handleQuantityChange(quantity - 1)}
+                min={1}
+                accessible
+                accessibilityLabel={`Quantity: ${quantity}`}
+                showIncrementButton={
+                  showIncrementButton !== undefined
+                    ? showIncrementButton
+                    : !hideQuantityButtons
+                }
+                showDecrementButton={
+                  showDecrementButton !== undefined
+                    ? showDecrementButton
+                    : !hideQuantityButtons
+                }
+                incrementDisabled={incrementDisabled || disableQuantityButtons}
+                decrementDisabled={decrementDisabled || disableQuantityButtons}
+              />
+            </View>
+          )}
+        </StyledContentArea>
+      </StyledCardContainer>
+    )
+
+    if (showBanner && banner) {
+      return (
+        <StyledRootWrapper>
+          {cardContent}
+          <StyledBannerWrapper>
+            <StyledNotification
+              variant="inline"
+              type={bannerType}
+              showIcon={showBannerIcon}
+            >
+              {banner}
+            </StyledNotification>
+          </StyledBannerWrapper>
+        </StyledRootWrapper>
+      )
+    }
+
+    return cardContent
+  }
+)
+
+ProductDisplayCard.displayName = "ProductDisplayCard"

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

@@ -0,0 +1,5 @@
+export { ProductDisplayCard } from "./ProductDisplayCard"
+export type {
+  ProductDisplayCardProps,
+  ProductDisplayCardDevice
+} from "./ProductDisplayCard"