@butternutbox/pawprint-native 0.5.1 → 0.7.0

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>
         )}
 

package/src/components/molecules/index.ts

@@ -13,6 +13,7 @@ export * from "./Radio"
 export * from "./SearchField"
 export * from "./SegmentedControl"
 export * from "./SelectField"
+export * from "./NativeSelectPicker"
 export * from "./Slider"
 export * from "./Notification"
 export * from "./Tooltip"