@butternutbox/pawprint-native 0.8.0 → 0.9.0

package/package.json

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

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

@@ -3,7 +3,8 @@ import { View, StyleSheet } from "react-native"
 import { ProductDisplayCard } from "./ProductDisplayCard"
 import type { ProductDisplayCardProps } from "./ProductDisplayCard"
 
-const placeholderImageUrl = "https://placeholder.co/100x100?text=Recipe"
+const placeholderImageUrl =
+  "https://placehold.co/148x148/EEE/31343C?font=oswald&text=product"
 
 const styles = StyleSheet.create({
   column: { flexDirection: "column", gap: 24, padding: 16 }
@@ -13,11 +14,6 @@ export default {
   title: "Molecules/ProductDisplayCard",
   component: ProductDisplayCard,
   argTypes: {
-    device: {
-      control: { type: "select" },
-      options: ["desktop", "mobile"],
-      description: "Device variant affecting sizing and typography"
-    },
     title: {
       control: { type: "text" },
       description: "Product title"
@@ -38,10 +34,6 @@ 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"
@@ -50,14 +42,6 @@ export default {
       control: { type: "boolean" },
       description: "Hide quantity buttons"
     },
-    showIncrementButton: {
-      control: { type: "boolean" },
-      description: "Show/hide increment button"
-    },
-    showDecrementButton: {
-      control: { type: "boolean" },
-      description: "Show/hide decrement button"
-    },
     incrementDisabled: {
       control: { type: "boolean" },
       description: "Disable increment button"
@@ -100,7 +84,6 @@ export const Playground = (args: ProductDisplayCardProps) => (
   </View>
 )
 Playground.args = {
-  device: "mobile",
   title: "Recipe Name",
   subtext: "+£0.00/pouch",
   showSubtext: true,
@@ -127,20 +110,6 @@ export const Default = () => (
   </View>
 )
 
-export const Desktop = () => (
-  <View style={styles.column}>
-    <ProductDisplayCard
-      title="Recipe Name"
-      subtext="+£0.00/pouch"
-      showSubtext
-      quantity={1}
-      showQuantityPicker
-      showBanner={false}
-      image={placeholderImageUrl}
-    />
-  </View>
-)
-
 export const Mobile = () => (
   <View style={styles.column}>
     <ProductDisplayCard
@@ -202,32 +171,6 @@ export const NoSubtext = () => (
   </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>
-)
-
 export const AllVariants = () => (
   <View style={styles.column}>
     <ProductDisplayCard
@@ -262,28 +205,3 @@ 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

@@ -95,13 +95,7 @@ describe("ProductDisplayCard (Native)", () => {
     expect(screen.queryByText("Test Banner")).toBeFalsy()
   })
 
-  it("renders with desktop device variant by default", () => {
-    renderWithTheme(<ProductDisplayCard title="Test Product" />)
-
-    expect(screen.getByText("Test Product")).toBeTruthy()
-  })
-
-  it("renders with mobile device variant when specified", () => {
+  it("renders as a mobile card", () => {
     renderWithTheme(<ProductDisplayCard title="Test Product" />)
 
     expect(screen.getByText("Test Product")).toBeTruthy()

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

@@ -15,26 +15,18 @@ export type ProductDisplayCardProps = ViewProps & {
   showQuantityPicker?: boolean
   disableQuantityButtons?: boolean
   hideQuantityButtons?: boolean
-  showIncrementButton?: boolean
-  showDecrementButton?: boolean
   incrementDisabled?: boolean
   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)<{ borderless?: boolean }>(({
-  theme,
-  borderless
-}) => {
+const StyledCardContainer = styled(View)(({ theme }) => {
   const { spacing, borderRadius } = theme.tokens.semantics.dimensions
   const { colour } = theme.tokens.semantics
   const spacingMd = parseTokenValue(spacing.md)
@@ -42,20 +34,20 @@ const StyledCardContainer = styled(View)<{ borderless?: boolean }>(({
   return {
     flexDirection: "row",
     width: "100%",
-    height: borderless ? undefined : "100%",
-    maxHeight: spacingXl * 6 + spacingMd,
+    // Cap at the Figma mobile card width (can be narrower — responsive).
+    maxWidth: 358,
+    // The 148px image sets the baseline height; the card grows if the content
+    // is taller (e.g. a long or translated title wrapping to multiple lines)
+    // so nothing is clipped.
+    minHeight: 148,
     backgroundColor: colour.background.surface.default,
-    ...(borderless
-      ? {}
-      : {
-          borderWidth: 1,
-          borderColor: colour.border.default,
-          shadowColor: "#522a10",
-          shadowOffset: { width: 0, height: spacingMd / 4 },
-          shadowOpacity: 0.05,
-          shadowRadius: spacingXl - 4,
-          elevation: 5
-        }),
+    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",
     zIndex: 1
@@ -65,57 +57,26 @@ const StyledCardContainer = styled(View)<{ borderless?: boolean }>(({
 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 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
-  }
-})
+}>(({ theme, imageBackgroundColor, thumbnailWidth = 148 }) => ({
+  flexShrink: 0,
+  backgroundColor:
+    imageBackgroundColor ||
+    theme.tokens.semantics.colour.background.container.secondary,
+  overflow: "hidden",
+  width: thumbnailWidth,
+  // Square (148) by default; stretches taller to fill the card when the
+  // content makes it taller than the image.
+  minHeight: thumbnailWidth,
+  position: "relative"
+}))
 
-const StyledContentArea = styled(View)<{ borderless?: boolean }>(({
-  theme,
-  borderless
-}) => {
+const StyledContentArea = styled(View)(({ theme }) => {
   const { spacing } = theme.tokens.semantics.dimensions
   const paddingValue = parseTokenValue(spacing.md)
   return {
     flex: 1,
     paddingHorizontal: paddingValue,
-    paddingVertical: borderless ? 0 : paddingValue,
+    paddingVertical: paddingValue,
     gap: parseTokenValue(spacing.xs),
     justifyContent: "space-between"
   }
@@ -125,27 +86,40 @@ const StyledTextContainer = styled(View)(() => ({
   gap: 2
 }))
 
-const StyledBannerWrapper = styled(View)(() => ({
-  width: "100%",
-  marginTop: -48,
-  paddingTop: 24,
-  paddingBottom: 16
-}))
+const StyledBannerWrapper = styled(View)(({ theme }) => {
+  const { spacing, borderRadius } = theme.tokens.semantics.dimensions
+  return {
+    width: "100%",
+    // Tuck the banner up behind the card by the corner radius so its square top
+    // corners hide under the card's rounded bottom; the rest sits below.
+    marginTop: -parseTokenValue(borderRadius.md),
+    paddingBottom: parseTokenValue(spacing.md)
+  }
+})
 
 const StyledRootWrapper = styled(View)(() => {
   return {
     flexDirection: "column",
     width: "100%",
-    height: "100%"
+    maxWidth: 358
   }
 })
 
 const StyledNotification = styled(Notification as any)(({ theme }) => {
-  const { spacing } = theme.tokens.semantics.dimensions
+  const { spacing, borderRadius } = theme.tokens.semantics.dimensions
+  const spacingMd = parseTokenValue(spacing.md)
+  const radiusMd = parseTokenValue(borderRadius.md)
   return {
-    top: parseTokenValue(spacing.md),
-    paddingHorizontal: parseTokenValue(spacing.xl),
-    paddingVertical: parseTokenValue(spacing.md)
+    paddingHorizontal: spacingMd,
+    // 27px top padding (Figma) leaves a small cream reveal above the text once
+    // the banner tucks behind the card.
+    paddingTop: 27,
+    paddingBottom: spacingMd,
+    // Square top corners, rounded bottom corners (banner tucks under the card).
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: radiusMd,
+    borderBottomRightRadius: radiusMd
   }
 })
 
@@ -190,16 +164,11 @@ export const ProductDisplayCard = React.forwardRef<
       showQuantityPicker = false,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
-      showIncrementButton,
-      showDecrementButton,
       incrementDisabled = false,
       decrementDisabled = false,
       image,
       imageBackgroundColor,
       thumbnailWidth,
-      thumbnailBackgroundColor,
-      showImageQuantityBadge = false,
-      borderless = false,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -215,32 +184,25 @@ export const ProductDisplayCard = React.forwardRef<
     }
 
     const cardContent = (
-      <StyledCardContainer ref={ref} borderless={borderless} {...rest}>
+      <StyledCardContainer ref={ref} {...rest}>
         {image && (
           <StyledImage
             imageBackgroundColor={imageBackgroundColor}
             thumbnailWidth={thumbnailWidth}
-            thumbnailBackgroundColor={thumbnailBackgroundColor}
           >
             {typeof image === "string" ? (
               <Image
                 source={{ uri: image }}
-                style={{ width: "100%", height: "100%" }}
+                resizeMode="cover"
+                style={{ flex: 1, width: "100%" }}
               />
             ) : (
               image
             )}
-            {showImageQuantityBadge && quantity && (
-              <StyledQuantityBadge>
-                <Typography variant="body" size="sm" weight="bold">
-                  {quantity}
-                </Typography>
-              </StyledQuantityBadge>
-            )}
           </StyledImage>
         )}
 
-        <StyledContentArea borderless={borderless}>
+        <StyledContentArea>
           <StyledTextContainer>
             <Typography variant="heading" size="2xs" color="primary">
               {title}
@@ -269,16 +231,8 @@ export const ProductDisplayCard = React.forwardRef<
                 min={1}
                 accessible
                 accessibilityLabel={`Quantity: ${quantity}`}
-                showIncrementButton={
-                  showIncrementButton !== undefined
-                    ? showIncrementButton
-                    : !hideQuantityButtons
-                }
-                showDecrementButton={
-                  showDecrementButton !== undefined
-                    ? showDecrementButton
-                    : !hideQuantityButtons
-                }
+                showIncrementButton={!hideQuantityButtons}
+                showDecrementButton={!hideQuantityButtons}
                 incrementDisabled={incrementDisabled || disableQuantityButtons}
                 decrementDisabled={decrementDisabled || disableQuantityButtons}
               />

package/src/components/molecules/ProductListingCard/Badge.tsx

@@ -27,8 +27,8 @@ const BadgeContainer = styled(View)(({ theme }) => {
     alignItems: "center",
     justifyContent: "center",
     height: parseTokenValue(sizing["2xl"]),
-    paddingRight: parseTokenValue(spacing.sm),
-    backgroundColor: colour.background.container.alt,
+    paddingRight: parseTokenValue(spacing.xs),
+    backgroundColor: colour.background.container.brand,
     borderTopRightRadius: parseTokenValue(borderRadius.xs),
     borderBottomRightRadius: parseTokenValue(borderRadius.xs)
   }

package/src/components/molecules/ProductListingCard/ProductListingCard.tsx

@@ -48,12 +48,15 @@ const StyledRoot = styled(Pressable)(({ theme }) => {
   }
 })
 
-const ImageContainer = styled(View)({
+const ImageContainer = styled(View)(({ theme }) => ({
   position: "relative",
   width: "100%",
   aspectRatio: 1,
-  overflow: "hidden"
-})
+  overflow: "hidden",
+  borderRadius: parseTokenValue(
+    theme.tokens.semantics.dimensions.borderRadius.md
+  )
+}))
 
 const StyledImage = styled(Image)({
   width: "100%",
@@ -61,27 +64,13 @@ const StyledImage = styled(Image)({
   resizeMode: "cover"
 })
 
-const BadgeContainer = styled(View)(({ theme }) => {
-  const spacing = theme.tokens.semantics.dimensions.spacing
-  const { sizing, borderRadius } = theme.tokens.semantics.dimensions
-  const { colour } = theme.tokens.semantics
-
-  return {
-    position: "absolute",
-    top: parseTokenValue(spacing.md),
-    left: 0,
-    display: "flex",
-    flexDirection: "row",
-    gap: parseTokenValue(spacing["2xs"]),
-    alignItems: "center",
-    justifyContent: "center",
-    height: parseTokenValue(sizing["2xl"]),
-    paddingRight: parseTokenValue(spacing.sm),
-    backgroundColor: colour.background.container.alt,
-    borderTopRightRadius: parseTokenValue(borderRadius.sm),
-    borderBottomRightRadius: parseTokenValue(borderRadius.sm)
-  }
-})
+// Positioning only — the visual badge (background, padding, radius) is the
+// `Badge` component rendered inside, so it isn't double-wrapped.
+const BadgeContainer = styled(View)(({ theme }) => ({
+  position: "absolute",
+  top: parseTokenValue(theme.tokens.semantics.dimensions.spacing.md),
+  left: 0
+}))
 
 const ContentContainer = styled(View)(({ theme }) => {
   const spacing = theme.tokens.semantics.dimensions.spacing
@@ -110,23 +99,12 @@ const CategoryWrapper = styled(View)(({ theme }) => {
   }
 })
 
-const TitleContainer = styled(View)(({ theme }) => {
-  const spacing = theme.tokens.semantics.dimensions.spacing
-
-  return {
-    display: "flex",
-    flexDirection: "row",
-    width: "100%",
-    marginBottom: parseTokenValue(spacing.xs)
-  }
-})
-
-const SizeWrapper = styled(View)(({ theme }) => {
-  const spacing = theme.tokens.semantics.dimensions.spacing
-
-  return {
-    marginBottom: parseTokenValue(spacing.md)
-  }
+const TitleContainer = styled(View)({
+  display: "flex",
+  flexDirection: "row",
+  width: "100%",
+  // 6px below the title to match Figma (4px title bottom padding + 2px gap).
+  marginBottom: 6
 })
 
 const PricingContainer = styled(View)(({ theme }) => {
@@ -194,11 +172,9 @@ const _ProductListingCard = React.forwardRef<View, ProductListingCardProps>(
               </TitleContainer>
             )}
             {showSize && size && (
-              <SizeWrapper>
-                <Typography variant="body" size="md" color="secondary">
-                  {size}
-                </Typography>
-              </SizeWrapper>
+              <Typography variant="body" size="md" color="secondary">
+                {size}
+              </Typography>
             )}
           </DetailsContainer>