@butternutbox/pawprint-native 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -22,19 +22,18 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@butternutbox/pawprint-tokens": "^0.1.0",
+    "@butternutbox/pawprint-tokens": "^0.2.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",
     "@rn-primitives/avatar": "^1.4.0",
     "@rn-primitives/checkbox": "^1.4.0",
     "@rn-primitives/portal": "^1.0.5",
     "@rn-primitives/progress": "^1.4.0",
+    "@rn-primitives/select": "^1.4.0",
     "@rn-primitives/slider": "^1.4.0",
     "@rn-primitives/slot": "^1.0.5",
     "@rn-primitives/switch": "^1.4.0",
-    "@rn-primitives/toggle": "^1.4.0",
     "@rn-primitives/tooltip": "^1.4.0",
-    "@rn-primitives/types": "^1.0.5",
     "date-fns": "^4.1.0",
     "expo": "^55.0.9"
   },

package/src/components/atoms/Illustration/Illustration.stories.tsx

@@ -42,7 +42,7 @@ export default {
   argTypes: {
     size: {
       control: { type: "select" },
-      options: ["sm", "lg"] as IllustrationSize[],
+      options: ["sm", "lg", "xl"] as IllustrationSize[],
       description: "Size variant (controls height)"
     },
     illustration: {
@@ -71,7 +71,7 @@ Default.args = {
   size: "sm"
 }
 
-const allSizes: IllustrationSize[] = ["sm", "lg"]
+const allSizes: IllustrationSize[] = ["sm", "lg", "xl"]
 
 export const AllSizes = () => {
   const sample = illustrationMap[defaultIllustration] as PawprintIllustration

package/src/components/atoms/Illustration/Illustration.tsx

@@ -3,7 +3,7 @@ import { View, ViewProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 
-type IllustrationSize = "sm" | "lg"
+type IllustrationSize = "sm" | "lg" | "xl"
 
 type PawprintIllustration = React.ComponentType<{
   width?: number
@@ -42,7 +42,7 @@ const StyledRoot = styled(View)<{
  * ```
  *
  * @param illustration - **(required)** Illustration component
- * @param size - *(optional)* Size variant: sm (default), lg
+ * @param size - *(optional)* Size variant: sm (default), lg, xl
  * @param aria-label - *(optional)* Accessible label
  */
 const Illustration = React.forwardRef<View, IllustrationProps>(
@@ -69,7 +69,7 @@ const Illustration = React.forwardRef<View, IllustrationProps>(
         accessible={!!ariaLabel}
         {...rest}
       >
-        <IllustrationComponent height={dimension} />
+        <IllustrationComponent width={dimension} height={dimension} />
       </StyledRoot>
     )
   }

package/src/components/atoms/Link/Link.test.tsx

@@ -19,10 +19,10 @@ describe("Link", () => {
   })
 
   describe("when rendering standalone", () => {
-    it("renders with trailing arrow", () => {
-      renderWithTheme(<Link standalone>Standalone</Link>)
+    it("renders with trailing arrow icon", () => {
+      const { container } = renderWithTheme(<Link standalone>Standalone</Link>)
       expect(screen.getByText("Standalone")).toBeInTheDocument()
-      expect(screen.getByText("→", { exact: false })).toBeInTheDocument()
+      expect(container.querySelector("svg")).toBeInTheDocument()
     })
   })
 

package/src/components/atoms/Link/Link.tsx

@@ -7,6 +7,8 @@ import {
   ViewStyle
 } from "react-native"
 import { useTheme } from "@emotion/react"
+import { ArrowForward } from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../Icon"
 import { Typography } from "../Typography"
 
 export type LinkSize = "sm" | "md" | "lg"
@@ -101,12 +103,11 @@ export const Link = React.forwardRef<View, LinkProps>(
               {children}
             </Typography>
             {standalone && (
-              <Typography
-                token={typography.link[weight][size]}
-                color={pressed ? linkColour.hover : linkColour.default}
-              >
-                {" →"}
-              </Typography>
+              <Icon
+                icon={ArrowForward}
+                size="xs"
+                customColour={pressed ? linkColour.hover : linkColour.default}
+              />
             )}
           </>
         )}

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

@@ -52,9 +52,13 @@ const StyledControlTrack = styled(View)<{
     minWidth: controlWidth,
     minHeight: controlHeight,
     borderRadius: controlHeight,
-    borderWidth: switchChecked ? 0 : controlBorderWidth,
+    // Keep the border width constant and only toggle the colour. Animating
+    // the width between 0 and 2 was causing a momentary background bleed on
+    // Android when transitioning back to the off state.
+    borderWidth: controlBorderWidth,
     borderColor: switchChecked ? "transparent" : controlBorderColor,
     backgroundColor: switchChecked ? controlBgChecked : controlBgDefault,
+    overflow: "hidden",
     justifyContent: "center"
   })
 )
@@ -113,9 +117,13 @@ export const Switch = React.forwardRef<View, SwitchProps>(
     const controlHeight = parseTokenValue(size.control.height)
     const thumbSize = parseTokenValue(size.thumb.default)
     const borderWidthValue = parseTokenValue(borderWidth.control.default)
-    const outerInset = 5
-    const inset = outerInset - borderWidthValue
-    const translateX = controlWidth - thumbSize - outerInset * 2
+    // Thumb sits 2px inside the inner border edge in both states. With the
+    // border width constant, the absolute-position reference frame is the
+    // padding box in both states, so the on-state inset is
+    // controlWidth - 2*border - thumbSize - inset.
+    const inset = 2
+    const offTranslateX = inset
+    const onTranslateX = controlWidth - borderWidthValue * 2 - thumbSize - inset
 
     const animValue = useRef(new Animated.Value(isChecked ? 1 : 0)).current
 
@@ -129,7 +137,7 @@ export const Switch = React.forwardRef<View, SwitchProps>(
 
     const thumbTranslateX = animValue.interpolate({
       inputRange: [0, 1],
-      outputRange: [inset, inset + translateX + 3]
+      outputRange: [offTranslateX, onTranslateX]
     })
 
     const handleCheckedChange = (checked: boolean) => {

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

@@ -1,8 +1,13 @@
 import React from "react"
-import { View, StyleSheet, Text } from "react-native"
+import { View, StyleSheet } from "react-native"
+import {
+  KeyboardArrowLeft,
+  KeyboardArrowRight
+} from "@butternutbox/pawprint-icons/core"
 import { ButtonDock } from "./ButtonDock"
 import type { ButtonDockProps } from "./ButtonDock"
 import { Button } from "../../atoms/Button"
+import { Icon } from "../../atoms/Icon"
 
 export default {
   title: "Molecules/ButtonDock",
@@ -11,7 +16,7 @@ export default {
     variant: {
       control: { type: "select" },
       options: ["stacked", "inline"],
-      description: "Layout variant (stacked or inline)"
+      description: "Layout variant"
     },
     description: {
       control: { type: "text" },
@@ -23,13 +28,13 @@ export default {
 export const Playground = {
   args: {
     variant: "stacked",
-    description: "Helper text goes here"
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
   },
   render: (args: ButtonDockProps) => (
     <ButtonDock {...args}>
       <Button fullWidth>Continue</Button>
-      <Button fullWidth variant="outlined">
-        Go back
+      <Button fullWidth variant="filled" colour="secondary">
+        Back
       </Button>
     </ButtonDock>
   )
@@ -37,10 +42,13 @@ export const Playground = {
 
 export const Stacked = () => (
   <View style={styles.column}>
-    <ButtonDock variant="stacked" description="Need help? Contact support.">
+    <ButtonDock
+      variant="stacked"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    >
       <Button fullWidth>Continue</Button>
-      <Button fullWidth variant="outlined">
-        Go back
+      <Button fullWidth variant="filled" colour="secondary">
+        Back
       </Button>
     </ButtonDock>
   </View>
@@ -49,8 +57,22 @@ export const Stacked = () => (
 export const Inline = () => (
   <View style={styles.column}>
     <ButtonDock variant="inline">
-      <Button>Confirm</Button>
-      <Button variant="outlined">Cancel</Button>
+      <Button
+        variant="filled"
+        colour="secondary"
+        startIcon={
+          <Icon icon={KeyboardArrowLeft} size="md" colour="action-default" />
+        }
+      >
+        Back
+      </Button>
+      <Button
+        endIcon={
+          <Icon icon={KeyboardArrowRight} size="md" colour="action-inverse" />
+        }
+      >
+        Continue
+      </Button>
     </ButtonDock>
   </View>
 )
@@ -59,16 +81,12 @@ export const WithLeadingContent = () => (
   <View style={styles.column}>
     <ButtonDock
       variant="stacked"
-      leadingContent={
-        <Text style={styles.leadingText}>
-          By continuing you agree to our terms and conditions.
-        </Text>
-      }
-      description="You can change this later in settings."
+      leadingContent={<View style={styles.leadingSlot} />}
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     >
-      <Button fullWidth>Accept & Continue</Button>
-      <Button fullWidth variant="outlined">
-        Go back
+      <Button fullWidth>Continue</Button>
+      <Button fullWidth variant="filled" colour="secondary">
+        Back
       </Button>
     </ButtonDock>
   </View>
@@ -76,8 +94,8 @@ export const WithLeadingContent = () => (
 
 export const StackedSingleButton = () => (
   <View style={styles.column}>
-    <ButtonDock variant="stacked" description="Only one action available.">
-      <Button fullWidth>Continue</Button>
+    <ButtonDock variant="stacked">
+      <Button fullWidth>Update</Button>
     </ButtonDock>
   </View>
 )
@@ -87,9 +105,10 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     gap: 24
   },
-  leadingText: {
-    textAlign: "center",
-    fontSize: 14,
-    color: "#666"
+  leadingSlot: {
+    height: 64,
+    width: "100%",
+    backgroundColor: "#f5f5f5",
+    borderRadius: 8
   }
 })

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

@@ -39,12 +39,14 @@ const StyledDockRoot = styled(View)<{
   })
 )
 
-const StyledStackedInner = styled(View)({
-  alignItems: "center",
-  gap: 16,
-  width: "100%",
-  maxWidth: 520
-})
+const StyledStackedInner = styled(View)<{ innerGap: number }>(
+  ({ innerGap }) => ({
+    alignItems: "center",
+    gap: innerGap,
+    width: "100%",
+    maxWidth: 520
+  })
+)
 
 const StyledButtonGroup = styled(View)<{
   groupDirection: "column" | "row"
@@ -85,7 +87,7 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
   ) => {
     const theme = useTheme()
     const { buttonDock, buttonGroup } = theme.tokens.components
-    const { dimensions } = theme.tokens.semantics
+    const { dimensions, typography } = theme.tokens.semantics
     const isStacked = variant === "stacked"
 
     const groupGap = parseTokenValue(
@@ -101,12 +103,14 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
         dockBorderTopWidth={parseTokenValue(dimensions.borderWidth.sm)}
         dockBorderTopColor={buttonDock.colour.border}
         dockPaddingVertical={parseTokenValue(
-          buttonDock.spacing[variant].desktop.verticalPadding
+          buttonDock.spacing[variant].mobile.topPadding
         )}
         {...rest}
       >
         {isStacked ? (
-          <StyledStackedInner>
+          <StyledStackedInner
+            innerGap={parseTokenValue(buttonGroup.spacing.gap)}
+          >
             {leadingContent}
             <StyledButtonGroup
               groupDirection="column"
@@ -118,12 +122,11 @@ const ButtonDock = React.forwardRef<View, ButtonDockProps>(
             </StyledButtonGroup>
             {description && (
               <Typography
-                variant="body"
-                size="md"
-                weight="medium"
+                token={typography.body.medium.md}
+                color={buttonGroup.colour.text}
                 align="center"
               >
-                {typeof description === "string" ? description : description}
+                {description}
               </Typography>
             )}
           </StyledStackedInner>

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

@@ -11,59 +11,84 @@ export default {
     layout: {
       control: { type: "select" },
       options: ["stacked", "inline"],
-      description: "Layout direction (stacked or inline)"
+      description: "Layout direction for the buttons"
     },
     description: {
       control: { type: "text" },
-      description: "Optional text below buttons"
+      description: "Optional text displayed below the buttons"
     }
   }
 }
 
-export const Playground = {
-  args: {
-    layout: "stacked",
-    description: "Choose an option below"
+type PlaygroundArgs = ButtonGroupProps & {
+  primaryLabel: string
+  secondaryLabel: string
+}
+
+export const Playground = ({
+  primaryLabel,
+  secondaryLabel,
+  ...args
+}: PlaygroundArgs) => (
+  <ButtonGroup {...args}>
+    <Button colour="primary">{primaryLabel}</Button>
+    {secondaryLabel?.trim() && (
+      <Button colour="secondary">{secondaryLabel}</Button>
+    )}
+  </ButtonGroup>
+)
+Playground.args = {
+  layout: "stacked",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  primaryLabel: "Confirm",
+  secondaryLabel: "Cancel"
+}
+Playground.argTypes = {
+  primaryLabel: {
+    control: { type: "text" },
+    description: "Label for the primary button"
   },
-  render: (args: ButtonGroupProps) => (
-    <ButtonGroup {...args}>
-      <Button>Confirm</Button>
-      <Button variant="outlined">Cancel</Button>
-    </ButtonGroup>
-  )
+  secondaryLabel: {
+    control: { type: "text" },
+    description:
+      "Label for the secondary button (leave empty for single button)"
+  }
 }
 
 export const Stacked = () => (
   <View style={styles.column}>
-    <ButtonGroup layout="stacked" description="Two buttons stacked vertically">
-      <Button>Primary action</Button>
-      <Button variant="outlined">Secondary action</Button>
+    <ButtonGroup description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+      <Button colour="primary">Confirm</Button>
+      <Button colour="secondary">Cancel</Button>
     </ButtonGroup>
   </View>
 )
 
 export const Inline = () => (
   <View style={styles.column}>
-    <ButtonGroup layout="inline" description="Two buttons side by side">
+    <ButtonGroup
+      layout="inline"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    >
       <Button colour="secondary">Cancel</Button>
-      <Button>Confirm</Button>
+      <Button colour="primary">Confirm</Button>
     </ButtonGroup>
   </View>
 )
 
 export const SingleButton = () => (
   <View style={styles.column}>
-    <ButtonGroup layout="stacked" description="Just one button">
-      <Button>Continue</Button>
+    <ButtonGroup description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+      <Button colour="primary">Continue</Button>
     </ButtonGroup>
   </View>
 )
 
 export const WithoutDescription = () => (
   <View style={styles.column}>
-    <ButtonGroup layout="stacked">
-      <Button>Confirm</Button>
-      <Button variant="outlined">Cancel</Button>
+    <ButtonGroup>
+      <Button colour="primary">Confirm</Button>
+      <Button colour="secondary">Cancel</Button>
     </ButtonGroup>
   </View>
 )

package/src/components/molecules/FilterTab/FilterTab.tsx

@@ -64,7 +64,6 @@ const StyledItem = styled(Pressable)<{
   itemHeight: number
   itemMinWidth: number
   itemPaddingH: number
-  itemPaddingV: number
   itemBorderRadius: number
   itemBgColor: string
   itemOpacity: number
@@ -74,7 +73,6 @@ const StyledItem = styled(Pressable)<{
     itemHeight,
     itemMinWidth,
     itemPaddingH,
-    itemPaddingV,
     itemBorderRadius,
     itemBgColor,
     itemOpacity,
@@ -88,7 +86,10 @@ const StyledItem = styled(Pressable)<{
       ? { width: itemHeight, maxWidth: itemHeight }
       : { minWidth: itemMinWidth }),
     paddingHorizontal: itemPaddingH,
-    paddingVertical: itemPaddingV,
+    // Vertical padding is intentionally omitted: with a fixed `height` and
+    // flex centering, the label sits in the middle of the box. Applying
+    // `verticalPadding: 12px` on top of the 36px small height would leave a
+    // 12px inner area, clipping the 18px line-height text on Android.
     borderRadius: itemBorderRadius,
     backgroundColor: itemBgColor,
     opacity: itemOpacity,
@@ -159,7 +160,6 @@ const FilterTabItem = React.forwardRef<View, FilterTabItemProps>(
         itemHeight={height}
         itemMinWidth={minWidth}
         itemPaddingH={parseTokenValue(tabItem.spacing.horizontalPadding)}
-        itemPaddingV={parseTokenValue(tabItem.spacing.verticalPadding)}
         itemBorderRadius={parseTokenValue(tabItem.borderRadius.default)}
         itemBgColor={
           isActive

package/src/components/molecules/PasswordField/PasswordFieldError.tsx

@@ -30,18 +30,19 @@ export const PasswordFieldError = React.forwardRef<
   PasswordFieldErrorProps
 >(({ children, ...rest }, ref) => {
   const theme = useTheme()
-  const { colour, description, spacing } = theme.tokens.components.inputs
+  const { listItem } = theme.tokens.components.validationList
+  const { typography } = theme.tokens.semantics
 
   return (
     <StyledErrorRow
       ref={ref}
-      gap={parseTokenValue(spacing.description.leftPadding)}
+      gap={parseTokenValue(listItem.spacing.gap)}
       {...rest}
     >
-      <Icon icon={Cancel} size="sm" colour="error" />
+      <Icon icon={Cancel} size="xs" customColour={listItem.colour.icon.error} />
       <Typography
-        token={description.text.default}
-        color={colour.description.error}
+        token={typography.body.medium.md}
+        color={listItem.colour.text.default}
       >
         {children}
       </Typography>

package/src/components/molecules/PasswordField/PasswordFieldRequirements.tsx

@@ -46,7 +46,8 @@ export const PasswordFieldRequirements = React.forwardRef<
   PasswordFieldRequirementsProps
 >(({ requirements, ...rest }, ref) => {
   const theme = useTheme()
-  const { colour, description, spacing } = theme.tokens.components.inputs
+  const { listItem, list } = theme.tokens.components.validationList
+  const { typography } = theme.tokens.semantics
 
   if (!requirements || requirements.length === 0) {
     return null
@@ -60,25 +61,27 @@ export const PasswordFieldRequirements = React.forwardRef<
   return (
     <StyledRequirementsList
       ref={ref}
-      listGap={parseTokenValue(spacing.description.leftPadding)}
+      listGap={parseTokenValue(list.spacing.gap)}
       {...rest}
     >
       {normalizedRequirements.map((requirement, index) => {
-        const iconColour = requirement.satisfied ? "success" : "error"
+        const iconColour = requirement.satisfied
+          ? listItem.colour.icon.success
+          : listItem.colour.icon.error
 
         return (
           <StyledRequirementItem
             key={index}
-            itemGap={parseTokenValue(spacing.description.leftPadding)}
+            itemGap={parseTokenValue(listItem.spacing.gap)}
           >
             <Icon
               icon={requirement.satisfied ? CheckCircle : Cancel}
-              size="sm"
-              colour={iconColour}
+              size="xs"
+              customColour={iconColour}
             />
             <Typography
-              token={description.text.default}
-              color={colour.label.default}
+              token={typography.body.medium.md}
+              color={listItem.colour.text.default}
             >
               {requirement.text}
             </Typography>

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

@@ -7,12 +7,6 @@ import {
   ExcitedPrimaryFilled,
   DogWithBallPrimaryFilled
 } from "@butternutbox/pawprint-illustrations/poses"
-import {
-  CheckCircle,
-  StarRate,
-  Female,
-  Male
-} from "@butternutbox/pawprint-icons/core"
 
 export default {
   title: "Molecules/PictureSelector"
@@ -152,39 +146,6 @@ export const WithoutInsight = () => (
   </View>
 )
 
-export const WithIcons = () => (
-  <View style={styles.column}>
-    <PictureSelector
-      label="Sex"
-      defaultValue="female"
-      items={[
-        {
-          value: "female",
-          icon: Female,
-          ariaLabel: "Female"
-        },
-        {
-          value: "male",
-          icon: Male,
-          ariaLabel: "Male"
-        },
-        {
-          value: "either",
-          icon: StarRate,
-          ariaLabel: "Either",
-          insightTitle: "Either",
-          insightDescription: "We'll help you decide later."
-        },
-        {
-          value: "verified",
-          icon: CheckCircle,
-          ariaLabel: "Verified"
-        }
-      ]}
-    />
-  </View>
-)
-
 export const WithDisabledItem = () => (
   <View style={styles.column}>
     <PictureSelector