@butternutbox/pawprint-native 0.15.0 → 0.15.2

package/package.json

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

package/src/components/atoms/Typography/Typography.tsx

@@ -140,7 +140,16 @@ const VARIANT_DEFAULTS = {
   display: { size: "lg" } as const
 }
 
-const StyledText = styled(Text)({})
+// Android reserves extra vertical padding from the font's ascent/descent
+// (`includeFontPadding`, on by default) and top-aligns glyphs within that box.
+// With the tall Ida Narrow metrics this shifts/clips copy — headings and button
+// labels that sit on one line on iOS get squeezed or clipped on Android. Turning
+// it off and centring vertically makes Android match iOS. Both props are
+// Android-only; iOS ignores them.
+const StyledText = styled(Text)({
+  includeFontPadding: false,
+  textAlignVertical: "center"
+})
 
 /**
  * Typography component for body text, headings, and display copy.

package/src/components/molecules/NativeSelectPicker/NativeSelectPicker.styled.ts

@@ -3,6 +3,8 @@ import { View, Text } from "react-native"
 import Animated from "react-native-reanimated"
 import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
 
+import { resolveFont } from "../../../fonts"
+
 type AndroidOptionTextProps = {
   isSelected: boolean
 }
@@ -16,6 +18,31 @@ const parseSize = (value: string): number => {
   return parseInt(value.replace("px", ""), 10)
 }
 
+type TypographyToken = {
+  fontFamily: string
+  fontWeight: string
+  fontSize: string
+  letterSpacing?: string
+}
+
+// Resolve the brand PostScript font from a typography token. Without this the
+// text falls back to the system font (the weight-encoded family isn't set by
+// fontWeight alone), so we resolve fontFamily and drop the separate fontWeight.
+const resolveTypography = (
+  typography: TypographyToken
+): { fontFamily: string; fontSize: number; letterSpacing: number } => {
+  const { fontFamily } = resolveFont(
+    typography.fontFamily,
+    typography.fontWeight
+  )
+  const fontSize = parseSize(typography.fontSize)
+  const letterSpacing = typography.letterSpacing?.endsWith("%")
+    ? (parseFloat(typography.letterSpacing) / 100) * fontSize
+    : parseFloat(typography.letterSpacing ?? "0")
+
+  return { fontFamily, fontSize, letterSpacing }
+}
+
 const Wrapper = styled(View)({
   borderWidth: parseSize(inputTokens.borderWidth.field.selected),
   borderColor: inputTokens.colour.field.border.selected,
@@ -37,15 +64,13 @@ const SelectIcon = styled(Animated.View)({
 
 const InputText = styled(Text)({
   color: inputTokens.colour.field.text.default,
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+  ...resolveTypography(inputTokens.field.placeholder.default),
   flex: 1
 })
 
 const PlaceholderText = styled(Text)({
   color: inputTokens.colour.field.text.placeholder,
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+  ...resolveTypography(inputTokens.field.placeholder.default),
   flex: 1
 })
 
@@ -67,8 +92,7 @@ const AndroidDialog = styled(View)({
 })
 
 const DialogTitle = styled(Text)({
-  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-  fontWeight: inputTokens.text.label.fontWeight,
+  ...resolveTypography(inputTokens.text.label),
   color: inputTokens.colour.field.text.default,
   marginBottom: parseSize(dimensions.spacing.md),
   marginLeft: parseSize(dimensions.spacing.xs)
@@ -103,10 +127,11 @@ const RadioInner = styled(View)({
 
 const AndroidOptionText = styled(Text)<AndroidOptionTextProps>(
   ({ isSelected }) => ({
-    fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
-    fontWeight: isSelected
-      ? inputTokens.text.label.fontWeight
-      : inputTokens.field.placeholder.default.fontWeight,
+    ...resolveTypography(
+      isSelected
+        ? inputTokens.text.label
+        : inputTokens.field.placeholder.default
+    ),
     color: inputTokens.colour.field.text.default,
     flex: 1
   })

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