@butternutbox/pawprint-native 0.19.2 → 0.20.0

package/package.json

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

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

@@ -35,6 +35,11 @@ export default {
       control: { type: "boolean" },
       description: "Show/hide quantity picker"
     },
+    quantityBadge: {
+      control: { type: "boolean" },
+      description:
+        "Show a quantity badge over the image instead of the picker (mutually exclusive with the quantity picker)"
+    },
     disableQuantityButtons: {
       control: { type: "boolean" },
       description: "Disable quantity buttons"
@@ -271,3 +276,29 @@ export const WithCustomBanner = () => (
     />
   </View>
 )
+
+export const WithQuantityBadge = () => (
+  <View style={styles.column}>
+    {/* OOB recipe / Extras card: quantity shown as a badge over the image
+        instead of the picker. The two are mutually exclusive. */}
+    <ProductDisplayCard
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={6}
+      quantityBadge
+      image={placeholderImageUrl}
+    />
+    {/* Even with showQuantityPicker set, the badge wins and the picker is
+        suppressed. */}
+    <ProductDisplayCard
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={2}
+      quantityBadge
+      showQuantityPicker
+      image={placeholderImageUrl}
+    />
+  </View>
+)

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

@@ -188,4 +188,58 @@ describe("ProductDisplayCard (Native)", () => {
 
     expect(screen.getByText("Test Banner")).toBeTruthy()
   })
+
+  it("renders the quantity badge over the image when quantityBadge is true", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        quantity={6}
+        quantityBadge
+        image={
+          <View>
+            <Text>Image</Text>
+          </View>
+        }
+      />
+    )
+
+    expect(screen.getByText("6")).toBeTruthy()
+  })
+
+  it("does not render the quantity badge by default", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        quantity={6}
+        image={
+          <View>
+            <Text>Image</Text>
+          </View>
+        }
+      />
+    )
+
+    expect(screen.queryByText("6")).toBeFalsy()
+  })
+
+  it("suppresses the quantity picker when quantityBadge is set (mutually exclusive)", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        quantity={3}
+        quantityBadge
+        showQuantityPicker
+        image={
+          <View>
+            <Text>Image</Text>
+          </View>
+        }
+      />
+    )
+
+    // The badge shows the quantity...
+    expect(screen.getByText("3")).toBeTruthy()
+    // ...and the picker input is not rendered.
+    expect(screen.queryByDisplayValue("3")).toBeFalsy()
+  })
 })

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

@@ -3,6 +3,7 @@ import { View, ViewProps, Image, Pressable } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { Typography } from "../../atoms/Typography"
+import { Badge } from "../../atoms/Badge"
 import { NumberField } from "../../molecules/NumberField"
 import { Notification } from "../Notification"
 import { parseTokenValue } from "../../../utils"
@@ -14,6 +15,13 @@ export type ProductDisplayCardProps = ViewProps & {
   quantity?: number
   onQuantityChange?: (quantity: number) => void
   showQuantityPicker?: boolean
+  /**
+   * Show a quantity badge overlaid on the top-right of the image (rendering the
+   * current `quantity`) instead of the quantity picker. Defaults to `false`.
+   * The badge and the quantity picker are mutually exclusive — only one shows
+   * at a time; when `quantityBadge` is true the picker is never rendered.
+   */
+  quantityBadge?: boolean
   disableQuantityButtons?: boolean
   hideQuantityButtons?: boolean
   incrementDisabled?: boolean
@@ -77,6 +85,20 @@ const StyledImage = styled(View)<{
   position: "relative"
 }))
 
+// Anchors the quantity badge to the top-right corner of the image, inset by
+// `spacing.2xs` (4px) per the Figma spec (node 10864:736).
+const StyledBadgeOverlay = styled(View)(({ theme }) => {
+  const offset = parseTokenValue(
+    theme.tokens.semantics.dimensions.spacing["2xs"]
+  )
+  return {
+    position: "absolute",
+    top: offset,
+    right: offset,
+    zIndex: 2
+  }
+})
+
 const StyledContentArea = styled(View)(({ theme }) => {
   const { spacing } = theme.tokens.semantics.dimensions
   const paddingValue = parseTokenValue(spacing.md)
@@ -171,6 +193,9 @@ const StyledNoneBanner = styled(View)(({ theme }) => {
  * @param quantity - *(optional)* Current quantity value
  * @param onQuantityChange - *(optional)* Callback when quantity changes
  * @param showQuantityPicker - *(optional)* Show/hide quantity picker
+ * @param quantityBadge - *(optional)* Show a quantity badge over the image instead
+ *   of the picker (renders the current `quantity`). Mutually exclusive with the
+ *   quantity picker; defaults to `false`. Used on OOB recipe and Extras cards.
  * @param image - *(optional)* Image URL string or React element
  * @param banner - *(optional)* Banner content string or React element to show below card
  * @param showBanner - *(optional)* Show/hide banner
@@ -189,6 +214,7 @@ export const ProductDisplayCard = React.forwardRef<
       quantity = 1,
       onQuantityChange,
       showQuantityPicker = false,
+      quantityBadge = false,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
       incrementDisabled = false,
@@ -233,6 +259,13 @@ export const ProductDisplayCard = React.forwardRef<
               ) : (
                 image
               )}
+              {quantityBadge && (
+                <StyledBadgeOverlay pointerEvents="none">
+                  <Badge variant="primary" size="large">
+                    {String(quantity)}
+                  </Badge>
+                </StyledBadgeOverlay>
+              )}
             </StyledImage>
           </Pressable>
         )}
@@ -250,7 +283,7 @@ export const ProductDisplayCard = React.forwardRef<
             )}
           </StyledTextContainer>
 
-          {showQuantityPicker && (
+          {showQuantityPicker && !quantityBadge && (
             <View style={{ marginLeft: "auto" }}>
               <NumberField
                 size="sm"