@butternutbox/pawprint-native 0.5.0 → 0.6.0

package/package.json

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

package/src/components/molecules/ButtonDock/ButtonDock.tsx

@@ -22,12 +22,14 @@ const StyledDockRoot = styled(View)<{
   dockBorderTopWidth: number
   dockBorderTopColor: string
   dockPaddingVertical: number
+  dockPaddingHorizontal: number
 }>(
   ({
     dockBgColor,
     dockBorderTopWidth,
     dockBorderTopColor,
-    dockPaddingVertical
+    dockPaddingVertical,
+    dockPaddingHorizontal
   }) => ({
     alignItems: "center",
     justifyContent: "center",
@@ -35,7 +37,8 @@ const StyledDockRoot = styled(View)<{
     backgroundColor: dockBgColor,
     borderTopWidth: dockBorderTopWidth,
     borderTopColor: dockBorderTopColor,
-    paddingVertical: dockPaddingVertical
+    paddingVertical: dockPaddingVertical,
+    paddingHorizontal: dockPaddingHorizontal
   })
 )
 
@@ -51,7 +54,7 @@ const StyledStackedInner = styled(View)<{ innerGap: number }>(
 const StyledButtonGroup = styled(View)<{
   groupDirection: "column" | "row"
   groupAlign: "stretch" | "center"
-  groupJustify: "center" | "space-around"
+  groupJustify: "center" | "space-between"
   groupGap: number
 }>(({ groupDirection, groupAlign, groupJustify, groupGap }) => ({
   flexDirection: groupDirection,
@@ -105,6 +108,9 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
         dockPaddingVertical={parseTokenValue(
           buttonDock.spacing[variant].mobile.topPadding
         )}
+        dockPaddingHorizontal={parseTokenValue(
+          buttonDock.spacing[variant].mobile.horizontalPadding
+        )}
         {...rest}
       >
         {isStacked ? (
@@ -134,7 +140,7 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
           <StyledButtonGroup
             groupDirection="row"
             groupAlign="center"
-            groupJustify="space-around"
+            groupJustify="space-between"
             groupGap={groupGap}
           >
             {children}

package/src/components/molecules/Drawer/DrawerBody.tsx

@@ -1,8 +1,9 @@
 import React from "react"
-import { ScrollView, ScrollViewProps } from "react-native"
+import { ScrollView, ScrollViewProps, useWindowDimensions } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { useDrawerHeaderContext } from "./DrawerHeaderContext"
+import { useDrawerFooterContext } from "./DrawerFooterContext"
 
 export type DrawerBodyProps = ScrollViewProps
 
@@ -12,12 +13,24 @@ const StyledScrollView = styled(ScrollView)<{
   bodyPaddingHorizontal: number
   bodyPaddingRight: number
   bodyGap: number
-}>(({ bodyPaddingHorizontal, bodyPaddingRight, bodyGap }) => ({
-  flex: 1,
-  paddingLeft: bodyPaddingHorizontal,
-  paddingRight: bodyPaddingRight,
-  gap: bodyGap
-}))
+  bodyMaxHeight: number
+  bodyPaddingBottom: number
+}>(
+  ({
+    bodyPaddingHorizontal,
+    bodyPaddingRight,
+    bodyGap,
+    bodyMaxHeight,
+    bodyPaddingBottom
+  }) => ({
+    flex: 1,
+    paddingLeft: bodyPaddingHorizontal,
+    paddingRight: bodyPaddingRight,
+    gap: bodyGap,
+    maxHeight: bodyMaxHeight,
+    paddingBottom: bodyPaddingBottom
+  })
+)
 
 /**
  * Scrollable content area of the drawer. Grows to fill available space
@@ -30,10 +43,13 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const { buttons } = theme.tokens.components
     const { content } = spacing
     const headerContext = useDrawerHeaderContext()
+    const footerContext = useDrawerFooterContext()
+    const { height: windowHeight } = useWindowDimensions()
 
     const gap = parseTokenValue(content.slot.gap)
     const horizontalPadding = parseTokenValue(content.slot.horizontalPadding)
     const topPadding = parseTokenValue(content.slot.verticalPadding)
+    const bodyMaxHeight = windowHeight - 300
 
     // When there's no header the close button floats in the top-right corner.
     // Reserve space on the right so body content doesn't slide under it.
@@ -43,12 +59,18 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
           parseTokenValue(buttons.size.sm.height)
         : horizontalPadding
 
+    const bodyPaddingBottom = !footerContext
+      ? parseTokenValue(theme.tokens.semantics.dimensions.spacing["2xl"])
+      : 0
+
     return (
       <StyledScrollView
         ref={ref}
         bodyPaddingHorizontal={horizontalPadding}
         bodyPaddingRight={paddingRight}
         bodyGap={gap}
+        bodyMaxHeight={bodyMaxHeight}
+        bodyPaddingBottom={bodyPaddingBottom}
         contentContainerStyle={[
           {
             gap,

package/src/components/molecules/Notification/Notification.tsx

@@ -29,7 +29,7 @@ type InlineVariantProps = BaseProps & {
   title?: string
   onClose?: () => void
   size?: never
-  link?: never
+  link?: { label: string; href?: string; onPress?: () => void }
 }
 
 type ToastVariantProps = BaseProps & {
@@ -45,7 +45,7 @@ type SystemVariantProps = BaseProps & {
   size?: NotificationSize
   title?: never
   onClose?: never
-  link?: never
+  link?: { label: string; href?: string; onPress?: () => void }
 }
 
 type NotificationOwnProps =
@@ -207,7 +207,7 @@ const StyledCloseButton = styled(Pressable)({
  * variants — inline (within content flow), toast (floating overlay), and
  * system (full-width banner) — each with four severity types.
  *
- * Note: Unlike the web version, toast link uses `onPress` callback instead
+ * Note: Unlike the web version, links use `onPress` callback instead
  * of `href` for navigation. The `href` prop is also available and opens
  * the URL via `Linking`.
  *
@@ -216,7 +216,7 @@ const StyledCloseButton = styled(Pressable)({
  * @param {boolean} [showIcon=true] - Whether to show the status icon.
  * @param {string} [title] - Optional headline (inline variant only).
  * @param {() => void} [onClose] - Close callback (inline and toast variants).
- * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (toast variant only).
+ * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (all variants).
  * @param {"sm" | "lg"} [size="sm"] - Size variant (system variant only).
  * @param {React.ReactNode} children - The notification body text.
  *
@@ -286,12 +286,24 @@ export const Notification = React.forwardRef<View, NotificationProps>(
               aria-label={type}
             />
           )}
-          <Typography
-            token={systemNotifications.notifications.typography.default}
-            color={systemNotifications.notification.colour.text.default}
-          >
-            {children}
-          </Typography>
+          <View style={{ flexDirection: "column", gap: 8, flex: 1 }}>
+            <Typography
+              token={systemNotifications.notifications.typography.default}
+              color={systemNotifications.notification.colour.text.default}
+            >
+              {children}
+            </Typography>
+            {link && (
+              <Link
+                href={link.href}
+                onPress={link.onPress}
+                weight="semiBold"
+                size="md"
+              >
+                {link.label}
+              </Link>
+            )}
+          </View>
         </StyledSystemRoot>
       )
     }
@@ -408,6 +420,20 @@ export const Notification = React.forwardRef<View, NotificationProps>(
               </Typography>
             </StyledInlineCopy>
           </StyledCopyRow>
+          {link && (
+            <StyledLinkWrapper
+              linkPaddingLeft={parseTokenValue(content.copy.spacing.gap)}
+            >
+              <Link
+                href={link.href}
+                onPress={link.onPress}
+                weight="semiBold"
+                size="md"
+              >
+                {link.label}
+              </Link>
+            </StyledLinkWrapper>
+          )}
         </StyledContents>
         {onClose && (
           <StyledCloseButton

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

@@ -3,6 +3,7 @@ import { View, StyleSheet } from "react-native"
 import { RadioGroup } from "./RadioGroup"
 import type { RadioGroupProps } from "./RadioGroup"
 import { Typography } from "../../atoms/Typography"
+import { StarRate } from "@butternutbox/pawprint-icons/core"
 
 export default {
   title: "Molecules/Radio",
@@ -95,6 +96,51 @@ export const TileVariant = () => (
   </View>
 )
 
+export const WithTag = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Tile with tag
+      </Typography>
+      <RadioGroup name="tag-tile" defaultValue="1">
+        <RadioGroup.Radio
+          variant="tile"
+          value="1"
+          label="1 pouch over 2 days"
+          subText="400g pouches"
+          tag={{ children: "Save up to £12.20 per box" }}
+        />
+        <RadioGroup.Radio
+          variant="tile"
+          value="2"
+          label="1 pouch per day"
+          subText="200g pouches"
+        />
+      </RadioGroup>
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Tag variants & icon
+      </Typography>
+      <RadioGroup name="tag-variants" defaultValue="1">
+        <RadioGroup.Radio
+          value="1"
+          label="Most popular"
+          subText="Recommended for most dogs"
+          tag={{ children: "Best value", variant: "promo", icon: StarRate }}
+        />
+        <RadioGroup.Radio
+          value="2"
+          label="Flexible plan"
+          subText="Change anytime"
+          tag={{ children: "New", variant: "success" }}
+        />
+      </RadioGroup>
+    </View>
+  </View>
+)
+
 export const States = () => (
   <View style={styles.column}>
     <View style={styles.section}>

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

@@ -40,6 +40,24 @@ describe("Radio", () => {
     })
   })
 
+  describe("when rendering a tag", () => {
+    it("renders the tag when provided", () => {
+      renderWithTheme(
+        <Radio
+          value="chicken"
+          label="Chicken"
+          tag={{ children: "Save up to £12.20 per box" }}
+        />
+      )
+      expect(screen.getByText("Save up to £12.20 per box")).toBeInTheDocument()
+    })
+
+    it("does not render a tag when omitted", () => {
+      renderWithTheme(<Radio value="chicken" label="Chicken" />)
+      expect(screen.queryByText("Best value")).not.toBeInTheDocument()
+    })
+  })
+
   describe("when component is interactive", () => {
     it("calls onSelect when pressed", async () => {
       const user = userEvent.setup()

package/src/components/molecules/Radio/Radio.tsx

@@ -4,6 +4,7 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import { Typography } from "../../atoms/Typography"
 import { Illustration, type IllustrationProps } from "../../atoms/Illustration"
+import { Tag, type TagProps } from "../../atoms/Tag"
 
 export type RadioOwnProps = {
   value: string
@@ -11,6 +12,7 @@ export type RadioOwnProps = {
   label?: React.ReactNode
   subText?: React.ReactNode
   asset?: IllustrationProps
+  tag?: TagProps
   disabled?: boolean
   selected?: boolean
   onSelect?: (value: string) => void
@@ -102,6 +104,13 @@ const StyledAssetWrapper = styled(View)({
   alignSelf: "center"
 })
 
+const StyledTagWrapper = styled(View)<{ tagTopPadding: number }>(
+  ({ tagTopPadding }) => ({
+    alignItems: "flex-start",
+    paddingTop: tagTopPadding
+  })
+)
+
 /**
  * Radio button component for single selection within a group.
  *
@@ -110,6 +119,7 @@ const StyledAssetWrapper = styled(View)({
  * @param {React.ReactNode} [label] - Main label text or content.
  * @param {React.ReactNode} [subText] - Optional descriptive subtext.
  * @param {IllustrationProps} [asset] - Optional illustration asset for tile variant.
+ * @param {TagProps} [tag] - Optional tag rendered below the label/subtext. Accepts the full Tag API (variant, icon, size). Hidden when omitted.
  * @param {boolean} [disabled=false] - Whether the radio is disabled.
  * @param {boolean} [selected=false] - Whether the radio is currently selected.
  * @param {(value: string) => void} [onSelect] - Callback when radio is selected.
@@ -124,6 +134,7 @@ export const Radio = React.forwardRef<View, RadioProps>(
       label,
       subText,
       asset,
+      tag,
       disabled = false,
       value,
       selected = false,
@@ -215,7 +226,7 @@ export const Radio = React.forwardRef<View, RadioProps>(
           )}
         </StyledRadioControl>
 
-        {(label || subText) && (
+        {(label || subText || tag) && (
           <StyledTextContent
             textContentGap={parseTokenValue(spacing.content.gap)}
           >
@@ -232,6 +243,13 @@ export const Radio = React.forwardRef<View, RadioProps>(
                 {subText}
               </Typography>
             )}
+            {tag && (
+              <StyledTagWrapper
+                tagTopPadding={parseTokenValue(spacing.content.tag.topPadding)}
+              >
+                <Tag {...tag} />
+              </StyledTagWrapper>
+            )}
           </StyledTextContent>
         )}