@butternutbox/pawprint-native 0.8.0 → 0.10.0

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ViewProps, Image } from "react-native"
+import { View, ViewProps, Image, Pressable } from "react-native"
 import styled from "@emotion/native"
 import { Typography } from "../../atoms/Typography"
 import { NumberField } from "../../molecules/NumberField"
@@ -15,107 +15,74 @@ export type ProductDisplayCardProps = ViewProps & {
   showQuantityPicker?: boolean
   disableQuantityButtons?: boolean
   hideQuantityButtons?: boolean
-  showIncrementButton?: boolean
-  showDecrementButton?: boolean
   incrementDisabled?: boolean
   decrementDisabled?: boolean
+  minQuantity?: number
   image?: string | React.ReactNode
   imageBackgroundColor?: string
   thumbnailWidth?: number
-  thumbnailBackgroundColor?: string
-  showImageQuantityBadge?: boolean
-  borderless?: boolean
+  onImagePress?: () => void
   banner?: React.ReactNode
   showBanner?: boolean
   bannerType?: "error" | "success" | "warning" | "info"
   showBannerIcon?: boolean
 }
 
-const StyledCardContainer = styled(View)<{ borderless?: boolean }>(({
-  theme,
-  borderless
-}) => {
+const StyledCardContainer = styled(View, {
+  shouldForwardProp: (prop) => prop !== "showBanner"
+})<{ showBanner?: boolean }>(({ theme }) => {
   const { spacing, borderRadius } = theme.tokens.semantics.dimensions
   const { colour } = theme.tokens.semantics
   const spacingMd = parseTokenValue(spacing.md)
   const spacingXl = parseTokenValue(spacing.xl)
+  const radiusMd = parseTokenValue(borderRadius.md)
   return {
     flexDirection: "row",
     width: "100%",
-    height: borderless ? undefined : "100%",
-    maxHeight: spacingXl * 6 + spacingMd,
+    // 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
-        }),
-    borderRadius: parseTokenValue(borderRadius.md),
+    borderWidth: 1,
+    borderColor: colour.border.default,
+    shadowColor: "#522a10",
+    shadowOffset: { width: 0, height: spacingMd / 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: spacingXl - 4,
+    elevation: 5,
+    borderRadius: radiusMd,
     overflow: "hidden",
-    zIndex: 1
+    zIndex: 1,
+    // Don't apply negative margin when banner is shown; banner wrapper handles positioning
+    marginBottom: 0,
+    flex: 1
   }
 })
 
 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 +92,44 @@ 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
+  const radiusMd = parseTokenValue(borderRadius.md)
+  const spacingMd = parseTokenValue(spacing.md)
+  return {
+    width: "100%",
+    // Tuck the banner up to overlap with card bottom; the 27px notification padding
+    // shows the cream reveal under the card's rounded corners
+    marginTop: -(radiusMd + spacingMd),
+    marginBottom: 0,
+    paddingTop: spacingMd,
+    paddingBottom: spacingMd
+  }
+})
 
 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 +174,13 @@ export const ProductDisplayCard = React.forwardRef<
       showQuantityPicker = false,
       disableQuantityButtons = false,
       hideQuantityButtons = false,
-      showIncrementButton,
-      showDecrementButton,
       incrementDisabled = false,
       decrementDisabled = false,
+      minQuantity = 1,
       image,
       imageBackgroundColor,
       thumbnailWidth,
-      thumbnailBackgroundColor,
-      showImageQuantityBadge = false,
-      borderless = false,
+      onImagePress,
       banner,
       showBanner = false,
       bannerType = "info",
@@ -209,38 +190,37 @@ export const ProductDisplayCard = React.forwardRef<
     ref
   ) => {
     const handleQuantityChange = (newQuantity: number) => {
-      if (newQuantity >= 1) {
+      if (newQuantity >= minQuantity) {
         onQuantityChange?.(newQuantity)
       }
     }
 
     const cardContent = (
-      <StyledCardContainer ref={ref} borderless={borderless} {...rest}>
+      <StyledCardContainer
+        ref={ref}
+        showBanner={showBanner && !!banner}
+        {...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>
+          <Pressable disabled={!onImagePress} onPress={onImagePress}>
+            <StyledImage
+              imageBackgroundColor={imageBackgroundColor}
+              thumbnailWidth={thumbnailWidth}
+            >
+              {typeof image === "string" ? (
+                <Image
+                  source={{ uri: image }}
+                  resizeMode="cover"
+                  style={{ flex: 1, width: "100%" }}
+                />
+              ) : (
+                image
+              )}
+            </StyledImage>
+          </Pressable>
         )}
 
-        <StyledContentArea borderless={borderless}>
+        <StyledContentArea>
           <StyledTextContainer>
             <Typography variant="heading" size="2xs" color="primary">
               {title}
@@ -266,19 +246,11 @@ export const ProductDisplayCard = React.forwardRef<
                 }}
                 onIncrement={() => handleQuantityChange(quantity + 1)}
                 onDecrement={() => handleQuantityChange(quantity - 1)}
-                min={1}
+                min={minQuantity}
                 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.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { View } from "react-native"
+import { View, Text } from "react-native"
 import { ProductListingCard } from "./ProductListingCard"
 import { Badge } from "./Badge"
 import { ThumbsUpFilledPrimary } from "@butternutbox/pawprint-icons/marketing"
@@ -207,3 +207,67 @@ export const WithWasPrice = {
     </View>
   )
 }
+
+export const WithStringImage = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image="https://placehold.co/232x232/E8E8E8/666?text=Product"
+        imageAlt="Product Image"
+        badge={defaultBadge}
+        category="Daily supplements"
+        title="Fish Oil"
+        size="200ml"
+        price="From £7.49"
+        showBadge={true}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}
+
+export const WithCustomComponent = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image={
+          <View
+            style={{
+              flex: 1,
+              backgroundColor: "#F5E6D3",
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
+            <View
+              style={{
+                width: 80,
+                height: 80,
+                backgroundColor: "#D4A574",
+                borderRadius: 40,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <Text style={{ fontSize: 40 }}>🐟</Text>
+            </View>
+          </View>
+        }
+        imageAlt="Custom component"
+        badge={defaultBadge}
+        category="Daily supplements"
+        title="Fish Oil"
+        size="200ml"
+        price="From £7.49"
+        showBadge={true}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}

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

@@ -12,7 +12,7 @@ import { Badge } from "./Badge"
 import { Grid } from "./Grid"
 
 type ProductListingCardOwnProps = {
-  image?: ImageSourcePropType
+  image?: string | React.ReactNode | ImageSourcePropType
   imageAlt?: string
   badge?: React.ReactNode
   category?: string
@@ -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 }) => {
@@ -167,11 +145,21 @@ const _ProductListingCard = React.forwardRef<View, ProductListingCardProps>(
         <ImageContainer>
           {image && (
             <View style={{ flex: 1, width: "100%", height: "100%" }}>
-              <StyledImage
-                source={image}
-                accessibilityLabel={imageAlt}
-                accessible
-              />
+              {typeof image === "string" ? (
+                <StyledImage
+                  source={{ uri: image }}
+                  accessibilityLabel={imageAlt}
+                  accessible
+                />
+              ) : React.isValidElement(image) ? (
+                image
+              ) : (
+                <StyledImage
+                  source={image as ImageSourcePropType}
+                  accessibilityLabel={imageAlt}
+                  accessible
+                />
+              )}
             </View>
           )}
           {showBadge && badge && <BadgeContainer>{badge}</BadgeContainer>}
@@ -194,11 +182,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>
 

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react"
 import { View, StyleSheet } from "react-native"
-import { PortalHost } from "@rn-primitives/portal"
 import { SelectField, useSelectField } from "."
 import { Typography } from "../../atoms/Typography"
 import { Icon } from "../../atoms/Icon"
@@ -8,10 +7,7 @@ import { Search, Settings, Lock, Info } from "@butternutbox/pawprint-icons/core"
 import type { Option } from "@rn-primitives/select"
 
 const StoryWrapper = ({ children }: { children: React.ReactNode }) => (
-  <>
-    {children}
-    <PortalHost />
-  </>
+  <>{children}</>
 )
 
 export default {
@@ -304,6 +300,115 @@ export const Controlled = () => {
   )
 }
 
+export const Searchable = () => (
+  <StoryWrapper>
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Searchable Select
+        </Typography>
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          description="Type to filter countries"
+          searchable
+          searchPlaceholder="Search countries..."
+        >
+          <SelectField.Item value="au">Australia</SelectField.Item>
+          <SelectField.Item value="br">Brazil</SelectField.Item>
+          <SelectField.Item value="ca">Canada</SelectField.Item>
+          <SelectField.Item value="dk">Denmark</SelectField.Item>
+          <SelectField.Item value="eg">Egypt</SelectField.Item>
+          <SelectField.Item value="fr">France</SelectField.Item>
+          <SelectField.Item value="de">Germany</SelectField.Item>
+          <SelectField.Item value="in">India</SelectField.Item>
+          <SelectField.Item value="jp">Japan</SelectField.Item>
+          <SelectField.Item value="mx">Mexico</SelectField.Item>
+          <SelectField.Item value="nl">Netherlands</SelectField.Item>
+          <SelectField.Item value="nz">New Zealand</SelectField.Item>
+          <SelectField.Item value="no">Norway</SelectField.Item>
+          <SelectField.Item value="pl">Poland</SelectField.Item>
+          <SelectField.Item value="pt">Portugal</SelectField.Item>
+          <SelectField.Item value="es">Spain</SelectField.Item>
+          <SelectField.Item value="se">Sweden</SelectField.Item>
+          <SelectField.Item value="ch">Switzerland</SelectField.Item>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+        </SelectField>
+      </View>
+    </View>
+  </StoryWrapper>
+)
+
+export const SearchableControlled = () => {
+  const [value, setValue] = useState<Option | string | null>(null)
+
+  const displayValue = (() => {
+    if (!value) return "(none)"
+    if (typeof value === "object" && "value" in value) return value.value
+    return String(value)
+  })()
+
+  return (
+    <StoryWrapper>
+      <View style={styles.column}>
+        <View style={styles.section}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            Controlled value: {displayValue}
+          </Typography>
+          <SelectField
+            label="Country"
+            placeholder="Select a country"
+            description="Select a country — the clear button resets the controlled value"
+            searchable
+            searchPlaceholder="Search countries..."
+            value={value}
+            onValueChange={(newValue) => setValue(newValue)}
+          >
+            <SelectField.Item value="au">Australia</SelectField.Item>
+            <SelectField.Item value="ca">Canada</SelectField.Item>
+            <SelectField.Item value="fr">France</SelectField.Item>
+            <SelectField.Item value="de">Germany</SelectField.Item>
+            <SelectField.Item value="jp">Japan</SelectField.Item>
+            <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+            <SelectField.Item value="us">United States</SelectField.Item>
+          </SelectField>
+        </View>
+      </View>
+    </StoryWrapper>
+  )
+}
+
+export const SearchableDefaultPlaceholder = () => (
+  <StoryWrapper>
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Default Search Placeholder
+        </Typography>
+        <SelectField label="Pet breed" placeholder="Select a breed" searchable>
+          <SelectField.Item value="labrador">
+            Labrador Retriever
+          </SelectField.Item>
+          <SelectField.Item value="german-shepherd">
+            German Shepherd
+          </SelectField.Item>
+          <SelectField.Item value="golden-retriever">
+            Golden Retriever
+          </SelectField.Item>
+          <SelectField.Item value="bulldog">Bulldog</SelectField.Item>
+          <SelectField.Item value="poodle">Poodle</SelectField.Item>
+          <SelectField.Item value="beagle">Beagle</SelectField.Item>
+          <SelectField.Item value="rottweiler">Rottweiler</SelectField.Item>
+          <SelectField.Item value="yorkshire-terrier">
+            Yorkshire Terrier
+          </SelectField.Item>
+        </SelectField>
+      </View>
+    </View>
+  </StoryWrapper>
+)
+
 const styles = StyleSheet.create({
   container: {
     width: 320