@butternutbox/pawprint-native 0.7.0 → 0.8.0

package/package.json

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

package/src/components/atoms/Switch/Switch.tsx

@@ -77,7 +77,9 @@ const StyledThumb = styled(Animated.View)<{
 const StyledContent = styled(View)<{
   contentGap: number
 }>(({ contentGap }) => ({
-  gap: contentGap
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
 }))
 
 /**

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

@@ -53,6 +53,7 @@ export const AllInlineVariants = {
         type="error"
         title="Optional headline here"
         onClose={() => {}}
+        link={{ label: "Optional link" }}
       >
         Try to keep the copy length here to a maximum of 2 lines
       </Notification>
@@ -60,6 +61,7 @@ export const AllInlineVariants = {
         type="success"
         title="Optional headline here"
         onClose={() => {}}
+        link={{ label: "Optional link" }}
       >
         Try to keep the copy length here to a maximum of 2 lines
       </Notification>
@@ -67,6 +69,7 @@ export const AllInlineVariants = {
         type="warning"
         title="Optional headline here"
         onClose={() => {}}
+        link={{ label: "Optional link" }}
       >
         Try to keep the copy length here to a maximum of 2 lines
       </Notification>
@@ -74,6 +77,7 @@ export const AllInlineVariants = {
         type="info"
         title="Optional headline here"
         onClose={() => {}}
+        link={{ label: "Optional link" }}
       >
         Try to keep the copy length here to a maximum of 2 lines
       </Notification>

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

@@ -278,30 +278,36 @@ export const Notification = React.forwardRef<View, NotificationProps>(
           rootAlignCenter={isLarge}
           {...(rest as ViewProps)}
         >
-          {showIcon && (
-            <Icon
-              icon={IconComponent}
-              size="md"
-              colour={type}
-              aria-label={type}
-            />
-          )}
-          <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"
+          <View style={{ flexDirection: "column", flex: 1 }}>
+            {showIcon && (
+              <Icon
+                icon={IconComponent}
                 size="md"
+                colour={type}
+                aria-label={type}
+              />
+            )}
+            <View style={{ flexDirection: "column", gap: 8, flex: 1 }}>
+              <Typography
+                token={systemNotifications.notifications.typography.default}
+                color={systemNotifications.notification.colour.text.default}
+              >
+                {children}
+              </Typography>
+            </View>
+            {link && (
+              <StyledLinkWrapper
+                linkPaddingLeft={parseTokenValue(sizeTokens.content.gap)}
               >
-                {link.label}
-              </Link>
+                <Link
+                  href={link.href}
+                  onPress={link.onPress}
+                  weight="semiBold"
+                  size="md"
+                >
+                  {link.label}
+                </Link>
+              </StyledLinkWrapper>
             )}
           </View>
         </StyledSystemRoot>
@@ -418,22 +424,23 @@ export const Notification = React.forwardRef<View, NotificationProps>(
               >
                 {children}
               </Typography>
+
+              {link && (
+                <StyledLinkWrapper
+                  linkPaddingLeft={parseTokenValue(content.copy.spacing.gap)}
+                >
+                  <Link
+                    href={link.href}
+                    onPress={link.onPress}
+                    weight="semiBold"
+                    size="md"
+                  >
+                    {link.label}
+                  </Link>
+                </StyledLinkWrapper>
+              )}
             </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/TabNavigation/TabNavigation.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { View, StyleSheet } from "react-native"
+import { Home } from "@butternutbox/pawprint-icons/core"
 import { TabNavigation } from "./TabNavigation"
 import type { TabNavigationProps } from "./TabNavigation"
 import { Typography } from "../../atoms/Typography"
@@ -149,6 +150,40 @@ export const States = {
   )
 }
 
+const DOG_PHOTO_URL = "https://placedog.net/200/200"
+
+export const WithIconsAndAvatars = {
+  name: "With Icons & Avatars",
+  render: () => (
+    <View style={styles.container}>
+      <TabNavigation defaultValue="home" layout="fixed">
+        <TabNavigation.List>
+          <TabNavigation.Tab value="home" icon={Home}>
+            Home
+          </TabNavigation.Tab>
+          <TabNavigation.Tab
+            value="dog"
+            avatar={{
+              src: DOG_PHOTO_URL,
+              alt: "Your dog",
+              size: "sm",
+              border: "sm"
+            }}
+          >
+            Your dog
+          </TabNavigation.Tab>
+        </TabNavigation.List>
+        <TabNavigation.Panel value="home">
+          <PanelBody>A leading icon sits before the label.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="dog">
+          <PanelBody>The Avatar atom can lead the label too.</PanelBody>
+        </TabNavigation.Panel>
+      </TabNavigation>
+    </View>
+  )
+}
+
 export const AnimatedContent = {
   name: "Animated Content (fade)",
   render: () => (

package/src/components/molecules/TabNavigation/TabNavigation.tsx

@@ -10,6 +10,8 @@ import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as TabsPrimitive from "@rn-primitives/tabs"
 import { Typography, type TypographyProps } from "../../atoms/Typography"
+import { Icon, type PawprintIcon } from "../../atoms/Icon"
+import { Avatar, type AvatarProps } from "../../atoms/Avatar"
 import { Animated, type AnimatedVariant } from "../Animated"
 
 type TabNavigationLayout = "fixed" | "intrinsic"
@@ -64,6 +66,8 @@ export type TabNavigationListProps = TabNavigationListOwnProps &
 type TabNavigationTabOwnProps = {
   value: string
   disabled?: boolean
+  icon?: PawprintIcon
+  avatar?: AvatarProps
   children: React.ReactNode
 }
 
@@ -169,12 +173,18 @@ TabNavigationList.displayName = "TabNavigation.List"
  * disabled state). Unlike the web version there are no hover or focus-visible
  * states (not applicable on mobile).
  *
+ * Optionally renders a leading `Avatar` and/or `Icon` before the label, matching
+ * the Figma design. The icon colour tracks the tab's label colour (brand when
+ * active/idle, muted when disabled); the avatar is rendered as-is from its props.
+ *
  * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
  * @param {boolean} [disabled=false] - Whether this tab is disabled.
+ * @param {PawprintIcon} [icon] - Optional leading icon from `@butternutbox/pawprint-icons`.
+ * @param {AvatarProps} [avatar] - Optional leading `Avatar`; props are forwarded to the `Avatar` atom.
  * @param {React.ReactNode} children - Tab label (and optional leading content).
  */
 const TabNavigationTab = React.forwardRef<View, TabNavigationTabProps>(
-  ({ value, disabled = false, children, ...rest }, ref) => {
+  ({ value, disabled = false, icon, avatar, children, ...rest }, ref) => {
     const { layout } = useTabNavigationContext()
     const { value: selectedValue } = TabsPrimitive.useRootContext()
     const theme = useTheme()
@@ -209,6 +219,10 @@ const TabNavigationTab = React.forwardRef<View, TabNavigationTabProps>(
           tabFlex={layout === "fixed" ? 1 : undefined}
           {...rest}
         >
+          {avatar && <Avatar {...avatar} />}
+          {icon && (
+            <Icon icon={icon} customColour={textColour as string} aria-hidden />
+          )}
           <Typography token={token} color={textColour}>
             {children}
           </Typography>