@butternutbox/pawprint-native 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.4.1",
+  "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/ProductDisplayCard/ProductDisplayCard.stories.tsx

@@ -116,7 +116,6 @@ Playground.args = {
 export const Default = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -131,7 +130,6 @@ export const Default = () => (
 export const Desktop = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="desktop"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -146,7 +144,6 @@ export const Desktop = () => (
 export const Mobile = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.50/pouch"
       showSubtext
@@ -161,7 +158,6 @@ export const Mobile = () => (
 export const WithBanner = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -179,7 +175,6 @@ export const WithBanner = () => (
 export const WithBannerIcon = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -197,7 +192,6 @@ export const WithBannerIcon = () => (
 export const NoSubtext = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       showSubtext={false}
       quantity={1}
@@ -211,7 +205,6 @@ export const NoSubtext = () => (
 export const WithImageQuantityBadge = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="mobile"
       title="Gobble Gobble Turkey"
       subtext="+£0.50/pouch"
       showSubtext
@@ -223,7 +216,6 @@ export const WithImageQuantityBadge = () => (
     />
 
     <ProductDisplayCard
-      device="mobile"
       title="Salmon Delight"
       subtext="+£0.25/pouch"
       showSubtext
@@ -239,7 +231,6 @@ export const WithImageQuantityBadge = () => (
 export const AllVariants = () => (
   <View style={styles.column}>
     <ProductDisplayCard
-      device="desktop"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -250,7 +241,6 @@ export const AllVariants = () => (
     />
 
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.50/pouch"
       showSubtext
@@ -261,7 +251,6 @@ export const AllVariants = () => (
     />
 
     <ProductDisplayCard
-      device="mobile"
       title="Recipe Name"
       subtext="+£0.00/pouch"
       showSubtext
@@ -273,3 +262,28 @@ export const AllVariants = () => (
     />
   </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

@@ -6,10 +6,7 @@ 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 | React.ReactNode
   showSubtext?: boolean
@@ -24,16 +21,20 @@ export type ProductDisplayCardProps = ViewProps & {
   decrementDisabled?: boolean
   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)
@@ -41,31 +42,46 @@ 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)<{ imageBackgroundColor?: string }>(
-  ({ theme, imageBackgroundColor }) => ({
+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",
-    height: "100%",
+    width: thumbnailWidth,
+    height: thumbnailWidth,
     position: "relative"
   })
 )
@@ -90,14 +106,16 @@ const StyledQuantityBadge = styled(View)(({ theme }) => {
   }
 })
 
-const StyledContentArea = styled(View)<{
-  contentDevice: ProductDisplayCardDevice
-}>(({ theme }) => {
+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"
   }
@@ -139,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}
@@ -147,16 +164,13 @@ 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 or JSX element (e.g. price)
+ * @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 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 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)
@@ -168,7 +182,6 @@ export const ProductDisplayCard = React.forwardRef<
 >(
   (
     {
-      device = "mobile",
       title,
       subtext,
       showSubtext = true,
@@ -183,7 +196,10 @@ export const ProductDisplayCard = React.forwardRef<
       decrementDisabled = false,
       image,
       imageBackgroundColor,
+      thumbnailWidth,
+      thumbnailBackgroundColor,
       showImageQuantityBadge = false,
+      borderless = false,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -199,9 +215,13 @@ export const ProductDisplayCard = React.forwardRef<
     }
 
     const cardContent = (
-      <StyledCardContainer ref={ref} cardDevice={device} {...rest}>
+      <StyledCardContainer ref={ref} borderless={borderless} {...rest}>
         {image && (
-          <StyledImage imageBackgroundColor={imageBackgroundColor}>
+          <StyledImage
+            imageBackgroundColor={imageBackgroundColor}
+            thumbnailWidth={thumbnailWidth}
+            thumbnailBackgroundColor={thumbnailBackgroundColor}
+          >
             {typeof image === "string" ? (
               <Image
                 source={{ uri: image }}
@@ -220,9 +240,9 @@ export const ProductDisplayCard = React.forwardRef<
           </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"