@butternutbox/pawprint-native 0.15.1 → 0.15.2

package/package.json

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

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