@butternutbox/pawprint-native 0.25.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.25.1",
+  "version": "1.1.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -22,6 +22,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@butternutbox/pawprint-fonts": "^2.0.0",
     "@butternutbox/pawprint-tokens": "^0.5.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",

package/src/components/atoms/Button/Button.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { Typography } from "../Typography"
 import { Spinner } from "../Spinner"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 
 type ButtonVariant = "filled" | "outlined" | "text"
 type ButtonSize = "sm" | "md" | "lg"

package/src/components/atoms/Input/InputField.tsx

@@ -13,7 +13,7 @@ import {
   Error as ErrorIcon,
   CheckCircle as SuccessIcon
 } from "@butternutbox/pawprint-icons/core"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 import { Icon } from "../Icon"
 
 export type InputState = "default" | "error" | "success"

package/src/components/atoms/TextArea/TextAreaField.tsx

@@ -13,7 +13,7 @@ import {
   Error as ErrorIcon,
   CheckCircle as SuccessIcon
 } from "@butternutbox/pawprint-icons/core"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 import { Icon } from "../Icon"
 import type { InputState } from "../Input/InputField"
 

package/src/components/atoms/Typography/Typography.tsx

@@ -3,7 +3,7 @@ import { Text, TextStyle, TextProps } from "react-native"
 import { useTheme } from "@emotion/react"
 import styled from "@emotion/native"
 import { type BrandThemeSemanticsColourText } from "@butternutbox/pawprint-tokens"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 
 type BodySize = "xs" | "sm" | "md" | "lg"
 type HeadingSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl"

package/src/components/molecules/NativeSelectPicker/NativeSelectPicker.styled.ts

@@ -3,7 +3,7 @@ import { View, Text } from "react-native"
 import Animated from "react-native-reanimated"
 import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
 
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 
 type AndroidOptionTextProps = {
   isSelected: boolean

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

@@ -4,7 +4,7 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { IconButton } from "../../atoms/IconButton"
 import { Add, Remove } from "@butternutbox/pawprint-icons/core"
-import { resolveFont } from "../../../fonts"
+import { resolveFont } from "@butternutbox/pawprint-fonts"
 import { Typography } from "../../atoms/Typography"
 
 type NumberFieldSize = "sm" | "lg"

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

@@ -38,7 +38,12 @@ export default {
     quantityBadge: {
       control: { type: "boolean" },
       description:
-        "Show a quantity badge over the image instead of the picker (mutually exclusive with the quantity picker)"
+        "@deprecated — use `thumbnailBadge`. Show a legacy quantity badge over the image instead of the picker."
+    },
+    thumbnailBadge: {
+      control: false,
+      description:
+        "Render a Badge over the image (accepts any BadgeProps). Mutually exclusive with the quantity picker."
     },
     disableQuantityButtons: {
       control: { type: "boolean" },
@@ -277,10 +282,42 @@ export const WithCustomBanner = () => (
   </View>
 )
 
+export const WithThumbnailBadge = () => (
+  <View style={styles.column}>
+    {/* Consumer controls the badge content and variant. */}
+    <ProductDisplayCard
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      thumbnailBadge={{ variant: "primary", size: "large", children: "New" }}
+      image={placeholderImageUrl}
+    />
+    <ProductDisplayCard
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      thumbnailBadge={{ variant: "promo", size: "large", children: "Popular" }}
+      image={placeholderImageUrl}
+    />
+    {/* Suppresses the picker even when showQuantityPicker is set. */}
+    <ProductDisplayCard
+      title="Recipe Name"
+      subtext="+£0.00/pouch"
+      showSubtext
+      quantity={2}
+      showQuantityPicker
+      thumbnailBadge={{ variant: "primary", size: "large", children: "2" }}
+      image={placeholderImageUrl}
+    />
+  </View>
+)
+
+/**
+ * @deprecated Prefer `thumbnailBadge`. This story documents the legacy
+ * `quantityBadge` prop behaviour during the deprecation window.
+ */
 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"
@@ -289,8 +326,6 @@ export const WithQuantityBadge = () => (
       quantityBadge
       image={placeholderImageUrl}
     />
-    {/* Even with showQuantityPicker set, the badge wins and the picker is
-        suppressed. */}
     <ProductDisplayCard
       title="Recipe Name"
       subtext="+£0.00/pouch"

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

@@ -242,4 +242,59 @@ describe("ProductDisplayCard (Native)", () => {
     // ...and the picker input is not rendered.
     expect(screen.queryByDisplayValue("3")).toBeFalsy()
   })
+
+  it("renders a thumbnailBadge from BadgeProps", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        thumbnailBadge={{ variant: "primary", size: "large", children: "New" }}
+        image={
+          <View>
+            <Text>Image</Text>
+          </View>
+        }
+      />
+    )
+
+    expect(screen.getByText("New")).toBeTruthy()
+  })
+
+  it("suppresses the quantity picker when thumbnailBadge is set", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        quantity={2}
+        thumbnailBadge={{ children: "New" }}
+        showQuantityPicker
+        image={
+          <View>
+            <Text>Image</Text>
+          </View>
+        }
+      />
+    )
+
+    expect(screen.getByText("New")).toBeTruthy()
+    expect(screen.queryByDisplayValue("2")).toBeFalsy()
+  })
+
+  it("prefers thumbnailBadge over the deprecated quantityBadge when both are set", () => {
+    renderWithTheme(
+      <ProductDisplayCard
+        title="Test Product"
+        quantity={9}
+        quantityBadge
+        thumbnailBadge={{ children: "Popular" }}
+        image={
+          <View>
+            <Text>Image</Text>
+          </View>
+        }
+      />
+    )
+
+    expect(screen.getByText("Popular")).toBeTruthy()
+    // The legacy quantity badge should not render alongside it.
+    expect(screen.queryByText("9")).toBeFalsy()
+  })
 })

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

@@ -3,7 +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 { Badge, type BadgeProps } from "../../atoms/Badge"
 import { NumberField } from "../../molecules/NumberField"
 import { Notification } from "../Notification"
 import { parseTokenValue } from "../../../utils"
@@ -16,12 +16,25 @@ export type ProductDisplayCardProps = ViewProps & {
   onQuantityChange?: (quantity: number) => void
   showQuantityPicker?: boolean
   /**
+   * @deprecated Use `thumbnailBadge` instead. When both are set, `thumbnailBadge`
+   * wins. This prop will be removed in a future major release.
+   *
    * 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
+  /**
+   * Render a `Badge` overlaid on the top-right of the image. Accepts any
+   * `BadgeProps` (variant, size, icon, children, etc.) — pass them as an object.
+   * Mutually exclusive with the quantity picker: when set, the picker is never
+   * rendered.
+   *
+   * @example
+   * thumbnailBadge={{ variant: "primary", size: "large", children: "New" }}
+   */
+  thumbnailBadge?: BadgeProps
   disableQuantityButtons?: boolean
   hideQuantityButtons?: boolean
   incrementDisabled?: boolean
@@ -194,9 +207,14 @@ 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 quantityBadge - *(optional)* **@deprecated** — use `thumbnailBadge` instead.
+ *   Show a legacy quantity badge over the image (renders the current `quantity`
+ *   as a primary/large Badge). Mutually exclusive with the picker; defaults to
+ *   `false`. When both `thumbnailBadge` and `quantityBadge` are set, `thumbnailBadge`
+ *   wins.
+ * @param thumbnailBadge - *(optional)* Render a `Badge` overlaid on the top-right
+ *   of the image. Accepts any `BadgeProps` (`variant`, `size`, `icon`, `children`, …).
+ *   Mutually exclusive with the quantity picker.
  * @param quantityStep - *(optional)* Increment/decrement amount (default: 1)
  * @param image - *(optional)* Image URL string or React element
  * @param banner - *(optional)* Banner content string or React element to show below card
@@ -217,6 +235,7 @@ export const ProductDisplayCard = React.forwardRef<
       onQuantityChange,
       showQuantityPicker = false,
       quantityBadge = false,
+      thumbnailBadge,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
       incrementDisabled = false,
@@ -241,6 +260,15 @@ export const ProductDisplayCard = React.forwardRef<
       }
     }
 
+    // `thumbnailBadge` supersedes the deprecated `quantityBadge`. When set,
+    // consumers control the entire badge; when unset, the legacy `quantityBadge`
+    // boolean falls back to the previous hardcoded quantity chip.
+    const resolvedBadgeProps: BadgeProps | undefined =
+      thumbnailBadge ??
+      (quantityBadge
+        ? { variant: "primary", size: "large", children: String(quantity) }
+        : undefined)
+
     const cardContent = (
       <StyledCardContainer
         ref={ref}
@@ -262,11 +290,9 @@ export const ProductDisplayCard = React.forwardRef<
               ) : (
                 image
               )}
-              {quantityBadge && (
+              {resolvedBadgeProps && (
                 <StyledBadgeOverlay pointerEvents="none">
-                  <Badge variant="primary" size="large">
-                    {String(quantity)}
-                  </Badge>
+                  <Badge {...resolvedBadgeProps} />
                 </StyledBadgeOverlay>
               )}
             </StyledImage>
@@ -286,7 +312,7 @@ export const ProductDisplayCard = React.forwardRef<
             )}
           </StyledTextContainer>
 
-          {showQuantityPicker && !quantityBadge && (
+          {showQuantityPicker && !resolvedBadgeProps && (
             <View style={{ marginLeft: "auto" }}>
               <NumberField
                 size="sm"

package/src/index.ts

@@ -4,7 +4,7 @@ export { tokens } from "@butternutbox/pawprint-tokens"
 
 export { default as styled } from "@emotion/native"
 
-export * from "./fonts"
+export * from "@butternutbox/pawprint-fonts"
 export * from "./theme"
 export * from "./components"
 export * from "./hooks"

package/tsup.config.ts

@@ -14,10 +14,9 @@ export default defineConfig({
     "react-native-svg",
     "react-native-worklets",
     /^@rn-primitives\/.*/,
-    /\.ttf$/
+    /^@butternutbox\/pawprint-fonts/
   ],
   treeshake: true,
-  onSuccess: "cp src/fonts/*.ttf dist/",
   esbuildOptions(options) {
     options.conditions = ["react-native", "import", "module", "default"]
     options.loader = {

package/src/fonts/index.ts

@@ -1,48 +0,0 @@
-import { Brand, BrandName } from "@butternutbox/pawprint-tokens"
-import type { FontSource } from "expo-font"
-
-import idaNarrow500 from "./ida-narrow-500-normal.ttf"
-import idaNarrow700 from "./ida-narrow-700-normal.ttf"
-import ibmPlexSansCondensed400 from "./ibm-plex-sans-condensed-400-normal.ttf"
-import ibmPlexSansCondensed500 from "./ibm-plex-sans-condensed-500-normal.ttf"
-import ibmPlexSansCondensed600 from "./ibm-plex-sans-condensed-600-normal.ttf"
-import ibmPlexSansCondensed700 from "./ibm-plex-sans-condensed-700-normal.ttf"
-
-// Keys passed to useFonts — each key becomes the exact @font-face family name
-// that expo-font registers on web, and the postscript font name on iOS/Android.
-export const BRAND_FONTS: Partial<
-  Record<BrandName, Record<string, FontSource>>
-> = {
-  [Brand.Butternutbox]: {
-    "IdaWebNarrow-Medium": idaNarrow500 as FontSource,
-    "IdaWebNarrow-Bold": idaNarrow700 as FontSource,
-    "IBMPlexSansCond-Regular": ibmPlexSansCondensed400 as FontSource,
-    "IBMPlexSansCond-Medium": ibmPlexSansCondensed500 as FontSource,
-    "IBMPlexSansCond-SemiBold": ibmPlexSansCondensed600 as FontSource,
-    "IBMPlexSansCond-Bold": ibmPlexSansCondensed700 as FontSource
-  }
-}
-
-// Maps token fontFamily + fontWeight → PostScript font name.
-// Keys must match the PostScript name embedded in the font file — iOS registers
-// fonts under their PostScript name regardless of the useFonts key.
-const FONT_MAP: Record<string, Record<string, string>> = {
-  "IBM Plex Sans Condensed": {
-    "400": "IBMPlexSansCond-Regular",
-    "500": "IBMPlexSansCond-Medium",
-    "600": "IBMPlexSansCond-SemiBold",
-    "700": "IBMPlexSansCond-Bold"
-  },
-  "Ida Narrow": {
-    "500": "IdaWebNarrow-Medium",
-    "700": "IdaWebNarrow-Bold"
-  }
-}
-
-export const resolveFont = (
-  fontFamily: string,
-  fontWeight: string
-): { fontFamily: string } => {
-  const resolved = FONT_MAP[fontFamily]?.[fontWeight]
-  return { fontFamily: resolved ?? fontFamily }
-}

package/src/types/fonts.d.ts

@@ -1,4 +0,0 @@
-declare module "*.ttf" {
-  const src: string
-  export default src
-}