@butternutbox/pawprint-native 0.15.1 → 0.16.0

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, ViewProps } from "react-native"
+import { View, ViewProps, FlexStyle } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 
@@ -10,11 +10,20 @@ type PawprintIllustration = React.ComponentType<{
   height?: number
 }>
 
+type FlexboxProps = {
+  align?: FlexStyle["alignItems"]
+  justify?: FlexStyle["justifyContent"]
+  flexDirection?: FlexStyle["flexDirection"]
+  flexWrap?: FlexStyle["flexWrap"]
+  alignContent?: FlexStyle["alignContent"]
+  alignSelf?: FlexStyle["alignSelf"]
+}
+
 type IllustrationOwnProps = {
   illustration: PawprintIllustration
   size?: IllustrationSize
   "aria-label"?: string
-}
+} & FlexboxProps
 
 type IllustrationProps = IllustrationOwnProps &
   Omit<ViewProps, keyof IllustrationOwnProps>
@@ -23,15 +32,20 @@ const parseTokenValue = (value: string): number => parseFloat(value)
 
 const StyledRoot = styled(View)<{
   illustrationHeight: number
-}>(({ illustrationHeight }) => ({
-  alignItems: "center",
-  justifyContent: "center",
+  flexboxProps: FlexboxProps
+}>(({ illustrationHeight, flexboxProps }) => ({
+  alignItems: flexboxProps.align ?? "center",
+  justifyContent: flexboxProps.justify ?? "center",
+  flexDirection: flexboxProps.flexDirection,
+  flexWrap: flexboxProps.flexWrap,
+  alignContent: flexboxProps.alignContent,
+  alignSelf: flexboxProps.alignSelf,
   flexShrink: 0,
   height: illustrationHeight
 }))
 
 /**
- * Renders a multi-colour SVG illustration with token-based sizing.
+ * Renders a multi-colour SVG illustration with token-based sizing and flexbox alignment.
  *
  * @example
  * ```tsx
@@ -42,7 +56,17 @@ const StyledRoot = styled(View)<{
  * ```
  *
  * @param illustration - **(required)** Illustration component
+<<<<<<< Updated upstream
  * @param size - *(optional)* Size variant: sm (default), lg, xl, xxl, xxxl
+=======
+ * @param size - *(optional)* Size variant: sm (default), lg, xl
+ * @param align - *(optional)* Flexbox alignItems (default: center)
+ * @param justify - *(optional)* Flexbox justifyContent (default: center)
+ * @param flexDirection - *(optional)* Flexbox flex direction
+ * @param flexWrap - *(optional)* Flexbox wrap
+ * @param alignContent - *(optional)* Flexbox alignContent
+ * @param alignSelf - *(optional)* Flexbox alignSelf
+>>>>>>> Stashed changes
  * @param aria-label - *(optional)* Accessible label
  */
 const Illustration = React.forwardRef<View, IllustrationProps>(
@@ -50,6 +74,12 @@ const Illustration = React.forwardRef<View, IllustrationProps>(
     {
       illustration: IllustrationComponent,
       size = "sm",
+      align,
+      justify,
+      flexDirection,
+      flexWrap,
+      alignContent,
+      alignSelf,
       "aria-label": ariaLabel,
       ...rest
     },
@@ -60,10 +90,20 @@ const Illustration = React.forwardRef<View, IllustrationProps>(
       theme.tokens.components.illustrations.sizing.illustrations[size]
     )
 
+    const flexboxProps: FlexboxProps = {
+      align,
+      justify,
+      flexDirection,
+      flexWrap,
+      alignContent,
+      alignSelf
+    }
+
     return (
       <StyledRoot
         ref={ref}
         illustrationHeight={dimension}
+        flexboxProps={flexboxProps}
         accessibilityRole={ariaLabel ? "image" : undefined}
         accessibilityLabel={ariaLabel}
         accessible={!!ariaLabel}
@@ -78,4 +118,9 @@ const Illustration = React.forwardRef<View, IllustrationProps>(
 Illustration.displayName = "Illustration"
 
 export { Illustration }
-export type { IllustrationProps, PawprintIllustration, IllustrationSize }
+export type {
+  IllustrationProps,
+  PawprintIllustration,
+  IllustrationSize,
+  FlexboxProps
+}

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

@@ -143,6 +143,27 @@ export const InContext = () => (
   </View>
 )
 
+export const RichText = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm">
+      Rich text — emphasise part of the copy
+    </Typography>
+    <Tooltip
+      alignment="left"
+      position="bottom"
+      text={
+        <React.Fragment>
+          Your order is below{" "}
+          <Typography variant="body" weight="bold" size="md">
+            £8.00
+          </Typography>{" "}
+          minimum. Add more items to remove this fee.
+        </React.Fragment>
+      }
+    />
+  </View>
+)
+
 const styles = StyleSheet.create({
   container: {
     padding: 24,

package/src/components/molecules/Tooltip/Tooltip.tsx

@@ -12,7 +12,14 @@ type TooltipAlignment = "left" | "middle" | "right"
 type TooltipPosition = "top" | "bottom"
 
 type TooltipOwnProps = {
-  text: string
+  /**
+   * Tooltip body content. Pass a plain string for simple copy, or a
+   * `ReactNode` (e.g. a `<Trans>` / nested `<Text>`) when part of the text
+   * needs its own styling — bold, colour, underline, etc. A node is rendered
+   * inside the tooltip's own `<Typography>`, so it inherits the base font and
+   * only the emphasised spans override it.
+   */
+  text: string | React.ReactNode
   alignment?: TooltipAlignment
   position?: TooltipPosition
   /**
@@ -221,7 +228,7 @@ export const Tooltip = React.forwardRef<View, TooltipProps>(
         ref={ref}
         accessible={true}
         accessibilityRole="none"
-        accessibilityLabel={text}
+        accessibilityLabel={typeof text === "string" ? text : undefined}
         accessibilityLiveRegion="polite"
         {...props}
       >