@butternutbox/pawprint-native 0.4.0 → 0.5.0

package/package.json

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

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

@@ -40,6 +40,11 @@ export default {
     label: {
       control: { type: "text" },
       description: "Customizable prefix label (inline layout only)"
+    },
+    labels: {
+      control: { type: "object" },
+      description:
+        "Per-unit labels (days/hours/minutes/seconds). Pass translated strings; omitted units fall back to the English defaults."
     }
   }
 }
@@ -139,6 +144,36 @@ export const WithoutSeconds = {
   )
 }
 
+export const TranslatedLabels = {
+  name: "Translated Labels",
+  render: () => (
+    <View style={styles.column}>
+      <Countdown
+        layout="stacked"
+        labels={{
+          days: { singular: "jour", plural: "jours" },
+          hours: { singular: "heure", plural: "heures" },
+          minutes: { singular: "min", plural: "min" },
+          seconds: { singular: "sec", plural: "sec" }
+        }}
+        days={1}
+        hours={2}
+        minutes={48}
+        seconds={38}
+      />
+      <Countdown
+        layout="inline"
+        label="La vente se termine dans :"
+        labels={{ days: "j", hours: "h", minutes: "min", seconds: "s" }}
+        days={2}
+        hours={9}
+        minutes={48}
+        seconds={38}
+      />
+    </View>
+  )
+}
+
 export const AllVariants = {
   name: "All Variants",
   render: () => (

package/src/components/molecules/Countdown/Countdown.tsx

@@ -12,6 +12,20 @@ type CountdownUnit = {
   label: string
 }
 
+/**
+ * A unit label. Pass a plain string to use it regardless of count, or a
+ * `{ singular, plural }` pair to pluralise based on the unit's value
+ * (`singular` when the value is exactly 1, `plural` otherwise).
+ */
+export type CountdownUnitLabel = string | { singular: string; plural: string }
+
+export type CountdownLabels = {
+  days?: CountdownUnitLabel
+  hours?: CountdownUnitLabel
+  minutes?: CountdownUnitLabel
+  seconds?: CountdownUnitLabel
+}
+
 type CountdownOwnProps = {
   layout?: CountdownLayout
   days?: number
@@ -21,17 +35,25 @@ type CountdownOwnProps = {
   showDays?: boolean
   showSeconds?: boolean
   label?: React.ReactNode
+  labels?: CountdownLabels
 }
 
 export type CountdownProps = CountdownOwnProps &
   Omit<ViewProps, keyof CountdownOwnProps>
 
-const UNIT_LABELS = {
-  days: "days",
-  hours: "hrs",
-  minutes: "min",
-  seconds: "secs"
-} as const
+const DEFAULT_UNIT_LABELS: Required<CountdownLabels> = {
+  days: { singular: "day", plural: "days" },
+  hours: { singular: "hr", plural: "hrs" },
+  minutes: { singular: "min", plural: "min" },
+  seconds: { singular: "sec", plural: "secs" }
+}
+
+const resolveLabel = (label: CountdownUnitLabel, value: number): string =>
+  typeof label === "string"
+    ? label
+    : value === 1
+      ? label.singular
+      : label.plural
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
@@ -154,6 +176,7 @@ const InlineCount = styled(View)<{ countGap: number }>(({ countGap }) => ({
  * @param {boolean} [showDays=true] - Whether to render the days unit and its separator.
  * @param {boolean} [showSeconds=true] - Whether to render the seconds unit and its separator.
  * @param {React.ReactNode} [label] - Customizable prefix label, rendered in the `inline` layout only.
+ * @param {CountdownLabels} [labels] - Overrides the per-unit labels (`days`/`hours`/`minutes`/`seconds`). Each label is either a plain string or a `{ singular, plural }` pair that resolves against the unit's value. Pass translated strings here; any omitted unit falls back to its English default.
  *
  * @example
  * ```tsx
@@ -161,6 +184,14 @@ const InlineCount = styled(View)<{ countGap: number }>(({ countGap }) => ({
  *
  * <Countdown layout="stacked" days={2} hours={9} minutes={48} seconds={38} />
  * <Countdown layout="inline" label="Sale ends:" showDays={false} hours={3} minutes={49} seconds={38} />
+ * <Countdown
+ *   labels={{
+ *     days: { singular: "jour", plural: "jours" },
+ *     hours: { singular: "heure", plural: "heures" }
+ *   }}
+ *   days={1}
+ *   hours={2}
+ * />
  * ```
  */
 export const Countdown = React.forwardRef<View, CountdownProps>(
@@ -174,6 +205,7 @@ export const Countdown = React.forwardRef<View, CountdownProps>(
       showDays = true,
       showSeconds = true,
       label,
+      labels,
       ...rest
     },
     ref
@@ -182,18 +214,28 @@ export const Countdown = React.forwardRef<View, CountdownProps>(
     const { countdown } = theme.tokens.components
     const { countdownItem } = countdown
 
+    const unitLabels = { ...DEFAULT_UNIT_LABELS, ...labels }
+
     const units: CountdownUnit[] = [
       showDays && {
         key: "days" as const,
         value: days,
-        label: UNIT_LABELS.days
+        label: resolveLabel(unitLabels.days, days)
+      },
+      {
+        key: "hours" as const,
+        value: hours,
+        label: resolveLabel(unitLabels.hours, hours)
+      },
+      {
+        key: "minutes" as const,
+        value: minutes,
+        label: resolveLabel(unitLabels.minutes, minutes)
       },
-      { key: "hours" as const, value: hours, label: UNIT_LABELS.hours },
-      { key: "minutes" as const, value: minutes, label: UNIT_LABELS.minutes },
       showSeconds && {
         key: "seconds" as const,
         value: seconds,
-        label: UNIT_LABELS.seconds
+        label: resolveLabel(unitLabels.seconds, seconds)
       }
     ].filter(Boolean) as CountdownUnit[]
 

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

@@ -1,2 +1,6 @@
 export { Countdown } from "./Countdown"
-export type { CountdownProps } from "./Countdown"
+export type {
+  CountdownProps,
+  CountdownLabels,
+  CountdownUnitLabel
+} from "./Countdown"

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,20 +110,19 @@ Playground.args = {
   bannerType: "info",
   showBannerIcon: false,
   banner: " High in protein •  Natural ingredients •  Vet approved",
-  image: <PlaceholderImage />
+  image: placeholderImageUrl
 }
 
 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 />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -132,14 +130,13 @@ export const Default = () => (
 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 />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -147,14 +144,13 @@ export const Desktop = () => (
 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 />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -162,7 +158,6 @@ export const Mobile = () => (
 export const WithBanner = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -172,7 +167,7 @@ export const WithBanner = () => (
       bannerType="success"
       showBannerIcon={false}
       banner="High in protein • Natural ingredients • Vet approved"
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -180,7 +175,6 @@ export const WithBanner = () => (
 export const WithBannerIcon = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -190,7 +184,7 @@ export const WithBannerIcon = () => (
       bannerType="success"
       showBannerIcon
       banner="High in protein • Natural ingredients • Vet approved"
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -198,13 +192,38 @@ export const WithBannerIcon = () => (
 export const NoSubtext = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       showSubtext={false}
       quantity={1}
       showQuantityPicker
       showBanner={false}
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
+    />
+  </View>
+)
+
+export const WithImageQuantityBadge = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      title="Gobble Gobble Turkey"
+      subtext="+£0.50/pouch"
+      showSubtext
+      quantity={4}
+      showQuantityPicker={false}
+      showImageQuantityBadge
+      showBanner={false}
+      image={placeholderImageUrl}
+    />
+
+    <ProductDisplayCard
+      title="Salmon Delight"
+      subtext="+£0.25/pouch"
+      showSubtext
+      quantity={2}
+      showQuantityPicker
+      showImageQuantityBadge
+      showBanner={false}
+      image={placeholderImageUrl}
     />
   </View>
 )
@@ -212,29 +231,26 @@ export const NoSubtext = () => (
 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 />}
+      image={placeholderImageUrl}
     />
 
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.50/pouch"
       showSubtext
       quantity={2}
       showQuantityPicker
       showBanner={false}
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
     />
 
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -242,7 +258,32 @@ export const AllVariants = () => (
       showQuantityPicker
       showBanner
       banner=" High in protein •  Natural ingredients"
-      image={<PlaceholderImage />}
+      image={placeholderImageUrl}
+    />
+  </View>
+)
+
+export const Borderless = () => (
+  <View style={styles.column}>
+    <ProductDisplayCard
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={1}
+      showQuantityPicker
+      borderless
+      image={placeholderImageUrl}
+    />
+
+    <ProductDisplayCard
+      title="Premium Recipe"
+      subtext="+£0.50/pouch"
+      showSubtext
+      quantity={2}
+      showQuantityPicker
+      showImageQuantityBadge
+      borderless
+      image={placeholderImageUrl}
     />
   </View>
 )

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

@@ -102,7 +102,7 @@ describe("ProductDisplayCard (Native)", () => {
   })
 
   it("renders with mobile device variant when specified", () => {
-    renderWithTheme(<ProductDisplayCard title="Test Product" device="mobile" />)
+    renderWithTheme(<ProductDisplayCard title="Test Product" />)
 
     expect(screen.getByText("Test Product")).toBeTruthy()
   })

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

@@ -1,17 +1,14 @@
 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"
 import { Notification } from "../Notification"
 import { parseTokenValue } from "../../../utils"
 
-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,16 +19,22 @@ export type ProductDisplayCardProps = ViewProps & {
   showDecrementButton?: boolean
   incrementDisabled?: boolean
   decrementDisabled?: boolean
-  image?: React.ReactNode
+  image?: string | React.ReactNode
+  imageBackgroundColor?: string
+  thumbnailWidth?: number
+  thumbnailBackgroundColor?: string
+  showImageQuantityBadge?: boolean
+  borderless?: boolean
   banner?: React.ReactNode
   showBanner?: boolean
   bannerType?: "error" | "success" | "warning" | "info"
   showBannerIcon?: boolean
 }
 
-const StyledCardContainer = styled(View)<{
-  cardDevice: ProductDisplayCardDevice
-}>(({ theme }) => {
+const StyledCardContainer = styled(View)<{ borderless?: boolean }>(({
+  theme,
+  borderless
+}) => {
   const { spacing, borderRadius } = theme.tokens.semantics.dimensions
   const { colour } = theme.tokens.semantics
   const spacingMd = parseTokenValue(spacing.md)
@@ -39,38 +42,80 @@ const StyledCardContainer = styled(View)<{
   return {
     flexDirection: "row",
     width: "100%",
-    height: "100%",
+    height: borderless ? undefined : "100%",
     maxHeight: spacingXl * 6 + spacingMd,
     backgroundColor: colour.background.surface.default,
-    borderWidth: 1,
-    borderColor: colour.border.default,
+    ...(borderless
+      ? {}
+      : {
+          borderWidth: 1,
+          borderColor: colour.border.default,
+          shadowColor: "#522a10",
+          shadowOffset: { width: 0, height: spacingMd / 4 },
+          shadowOpacity: 0.05,
+          shadowRadius: spacingXl - 4,
+          elevation: 5
+        }),
     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 StyledImage = styled(View)<{
+  imageBackgroundColor?: string
+  thumbnailWidth?: number
+  thumbnailBackgroundColor?: string
+}>(
+  ({
+    theme,
+    imageBackgroundColor,
+    thumbnailWidth = 100,
+    thumbnailBackgroundColor
+  }) => ({
+    flexShrink: 0,
+    backgroundColor:
+      thumbnailBackgroundColor ||
+      imageBackgroundColor ||
+      theme.tokens.semantics.colour.background.container.secondary,
+    overflow: "hidden",
+    aspectRatio: "1 / 1",
+    width: thumbnailWidth,
+    height: thumbnailWidth,
+    position: "relative"
+  })
+)
 
-const StyledContentArea = styled(View)<{
-  contentDevice: ProductDisplayCardDevice
-}>(({ theme }) => {
+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)<{ borderless?: boolean }>(({
+  theme,
+  borderless
+}) => {
   const { spacing } = theme.tokens.semantics.dimensions
+  const paddingValue = parseTokenValue(spacing.md)
   return {
     flex: 1,
-    paddingHorizontal: parseTokenValue(spacing.md),
-    paddingVertical: parseTokenValue(spacing.md),
+    paddingHorizontal: paddingValue,
+    paddingVertical: borderless ? 0 : paddingValue,
     gap: parseTokenValue(spacing.xs),
     justifyContent: "space-between"
   }
@@ -112,7 +157,6 @@ const StyledNotification = styled(Notification as any)(({ theme }) => {
  * import { ProductDisplayCard } from "@butternutbox/pawprint-native"
  *
  * <ProductDisplayCard
- *   device="mobile"
  *   title="Premium Recipe"
  *   subtext="+£0.00/pouch"
  *   quantity={1}
@@ -120,7 +164,6 @@ 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 showSubtext - *(optional)* Show/hide subtext
@@ -139,7 +182,6 @@ export const ProductDisplayCard = React.forwardRef<
 >(
   (
     {
-      device = "mobile",
       title,
       subtext,
       showSubtext = true,
@@ -153,6 +195,11 @@ export const ProductDisplayCard = React.forwardRef<
       incrementDisabled = false,
       decrementDisabled = false,
       image,
+      imageBackgroundColor,
+      thumbnailWidth,
+      thumbnailBackgroundColor,
+      showImageQuantityBadge = false,
+      borderless = false,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -168,12 +215,34 @@ export const ProductDisplayCard = React.forwardRef<
     }
 
     const cardContent = (
-      <StyledCardContainer ref={ref} cardDevice={device} {...rest}>
-        {image && <StyledImage>{image}</StyledImage>}
+      <StyledCardContainer ref={ref} borderless={borderless} {...rest}>
+        {image && (
+          <StyledImage
+            imageBackgroundColor={imageBackgroundColor}
+            thumbnailWidth={thumbnailWidth}
+            thumbnailBackgroundColor={thumbnailBackgroundColor}
+          >
+            {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}>
+        <StyledContentArea borderless={borderless}>
           <StyledTextContainer>
-            <Typography variant="heading" size="xs" color="primary">
+            <Typography variant="heading" size="2xs" color="primary">
               {title}
             </Typography>
 

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

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