@butternutbox/pawprint-native 0.4.0 → 0.4.1

package/package.json

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

package/src/components/molecules/NumberField/NumberFieldInput.tsx

@@ -74,29 +74,20 @@ const StyledTextInput = styled(TextInput)<{
   inputFontFamily: string
   inputFontWeight?: FontWeight
   inputFontSize: number
-  inputLineHeight: number
-}>(
-  ({
-    inputColor,
-    inputFontFamily,
-    inputFontWeight,
-    inputFontSize,
-    inputLineHeight
-  }) => ({
-    textAlign: "center" as const,
-    outlineStyle: "none" as unknown as undefined,
-    padding: 0,
-    minWidth: 0,
-    minHeight: 0,
-    width: "100%",
-    height: "100%",
-    color: inputColor,
-    fontFamily: inputFontFamily,
-    ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
-    fontSize: inputFontSize,
-    lineHeight: inputLineHeight
-  })
-)
+}>(({ inputColor, inputFontFamily, inputFontWeight, inputFontSize }) => ({
+  textAlign: "center" as const,
+  outlineStyle: "none" as unknown as undefined,
+  padding: 0,
+  minWidth: 0,
+  minHeight: 0,
+  width: "100%",
+  height: "100%",
+  color: inputColor,
+  fontFamily: inputFontFamily,
+  ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
+  fontSize: inputFontSize,
+  lineHeight: 0
+}))
 
 const StyledRow = styled(View)<{
   rowGap: number
@@ -256,7 +247,6 @@ export const NumberFieldInput = React.forwardRef<
                 : undefined
             }
             inputFontSize={parseTokenValue(typographyToken.fontSize)}
-            inputLineHeight={parseTokenValue(typographyToken.lineHeight)}
             keyboardType="numeric"
             editable={!disabled}
             onFocus={handleFocus}

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

@@ -1,14 +1,9 @@
 import React from "react"
-import { View, StyleSheet, Image } from "react-native"
+import { View, StyleSheet } 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 placeholderImageUrl = "https://placeholder.co/100x100?text=Recipe"
 
 const styles = StyleSheet.create({
   column: { flexDirection: "column", gap: 24, padding: 16 }
@@ -43,6 +38,10 @@ export default {
       control: { type: "boolean" },
       description: "Show/hide quantity picker"
     },
+    showImageQuantityBadge: {
+      control: { type: "boolean" },
+      description: "Show/hide quantity badge overlay on image"
+    },
     disableQuantityButtons: {
       control: { type: "boolean" },
       description: "Disable quantity buttons"
@@ -111,7 +110,7 @@ Playground.args = {
   bannerType: "info",
   showBannerIcon: false,
   banner: " High in protein •  Natural ingredients •  Vet approved",
-  image: <PlaceholderImage />
+  image: placeholderImageUrl
 }
 
 export const Default = () => (
@@ -124,7 +123,7 @@ export const Default = () => (
       quantity={1}
       showQuantityPicker={false}
       showBanner={false}
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -139,7 +138,7 @@ export const Desktop = () => (
       quantity={1}
       showQuantityPicker
       showBanner={false}
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -154,7 +153,7 @@ export const Mobile = () => (
       quantity={1}
       showQuantityPicker
       showBanner={false}
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -172,7 +171,7 @@ export const WithBanner = () => (
       bannerType="success"
       showBannerIcon={false}
       banner="High in protein • Natural ingredients • Vet approved"
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -190,7 +189,7 @@ export const WithBannerIcon = () => (
       bannerType="success"
       showBannerIcon
       banner="High in protein • Natural ingredients • Vet approved"
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -204,7 +203,35 @@ export const NoSubtext = () => (
       quantity={1}
       showQuantityPicker
       showBanner={false}
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
+    />
+  </View>
+)
+
+export const WithImageQuantityBadge = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      device="mobile"
+      title="Gobble Gobble Turkey"
+      subtext="+£0.50/pouch"
+      showSubtext
+      quantity={4}
+      showQuantityPicker={false}
+      showImageQuantityBadge
+      showBanner={false}
+      image={placeholderImageUrl}
+    />
+
+    <ProductDisplayCard
+      device="mobile"
+      title="Salmon Delight"
+      subtext="+£0.25/pouch"
+      showSubtext
+      quantity={2}
+      showQuantityPicker
+      showImageQuantityBadge
+      showBanner={false}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -219,7 +246,7 @@ export const AllVariants = () => (
       quantity={1}
       showQuantityPicker
       showBanner={false}
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
 
     <ProductDisplayCard
@@ -230,7 +257,7 @@ export const AllVariants = () => (
       quantity={2}
       showQuantityPicker
       showBanner={false}
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
 
     <ProductDisplayCard
@@ -242,7 +269,7 @@ export const AllVariants = () => (
       showQuantityPicker
       showBanner
       banner=" High in protein •  Natural ingredients"
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
   </View>
 )

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ViewProps } from "react-native"
+import { View, ViewProps, Image } from "react-native"
 import styled from "@emotion/native"
 import { Typography } from "../../atoms/Typography"
 import { NumberField } from "../../molecules/NumberField"
@@ -11,7 +11,7 @@ export type ProductDisplayCardDevice = "desktop" | "mobile"
 export type ProductDisplayCardProps = ViewProps & {
   device?: ProductDisplayCardDevice
   title: string
-  subtext?: string
+  subtext?: string | React.ReactNode
   showSubtext?: boolean
   quantity?: number
   onQuantityChange?: (quantity: number) => void
@@ -22,7 +22,9 @@ export type ProductDisplayCardProps = ViewProps & {
   showDecrementButton?: boolean
   incrementDisabled?: boolean
   decrementDisabled?: boolean
-  image?: React.ReactNode
+  image?: string | React.ReactNode
+  imageBackgroundColor?: string
+  showImageQuantityBadge?: boolean
   banner?: React.ReactNode
   showBanner?: boolean
   bannerType?: "error" | "success" | "warning" | "info"
@@ -55,13 +57,38 @@ const StyledCardContainer = styled(View)<{
   }
 })
 
-const StyledImage = styled(View)(() => ({
-  flexShrink: 0,
-  backgroundColor: "#f5f5f5",
-  overflow: "hidden",
-  aspectRatio: "1 / 1",
-  height: "100%"
-}))
+const StyledImage = styled(View)<{ imageBackgroundColor?: string }>(
+  ({ theme, imageBackgroundColor }) => ({
+    flexShrink: 0,
+    backgroundColor:
+      imageBackgroundColor ||
+      theme.tokens.semantics.colour.background.container.secondary,
+    overflow: "hidden",
+    aspectRatio: "1 / 1",
+    height: "100%",
+    position: "relative"
+  })
+)
+
+const StyledQuantityBadge = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+  const borderRadius = theme.tokens.semantics.dimensions.borderRadius
+  const { colour } = theme.tokens.semantics
+
+  return {
+    position: "absolute",
+    top: parseTokenValue(spacing["2xs"]),
+    right: parseTokenValue(spacing["2xs"]),
+    backgroundColor: colour.background.container.brand,
+    borderRadius: parseTokenValue(borderRadius.xs),
+    paddingHorizontal: parseTokenValue(spacing.sm),
+    height: parseTokenValue(spacing["2xl"]),
+    minWidth: parseTokenValue(spacing["2xl"]),
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2
+  }
+})
 
 const StyledContentArea = styled(View)<{
   contentDevice: ProductDisplayCardDevice
@@ -122,12 +149,14 @@ const StyledNotification = styled(Notification as any)(({ theme }) => {
  *
  * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
  * @param title - Product title
- * @param subtext - *(optional)* Subtitle text (e.g. price)
+ * @param subtext - *(optional)* Subtitle text or JSX element (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 image - *(optional)* Image URL string or React element/JSX content
+ * @param imageBackgroundColor - *(optional)* Background color for image container (default: theme background.container.secondary)
+ * @param showImageQuantityBadge - *(optional)* Show/hide quantity badge overlay on image
  * @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)
@@ -153,6 +182,8 @@ export const ProductDisplayCard = React.forwardRef<
       incrementDisabled = false,
       decrementDisabled = false,
       image,
+      imageBackgroundColor,
+      showImageQuantityBadge = false,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -169,7 +200,25 @@ export const ProductDisplayCard = React.forwardRef<
 
     const cardContent = (
       <StyledCardContainer ref={ref} cardDevice={device} {...rest}>
-        {image && <StyledImage>{image}</StyledImage>}
+        {image && (
+          <StyledImage imageBackgroundColor={imageBackgroundColor}>
+            {typeof image === "string" ? (
+              <Image
+                source={{ uri: image }}
+                style={{ width: "100%", height: "100%" }}
+              />
+            ) : (
+              image
+            )}
+            {showImageQuantityBadge && quantity && (
+              <StyledQuantityBadge>
+                <Typography variant="body" size="sm" weight="bold">
+                  {quantity}
+                </Typography>
+              </StyledQuantityBadge>
+            )}
+          </StyledImage>
+        )}
 
         <StyledContentArea contentDevice={device}>
           <StyledTextContainer>