npm - @titan-design/react-ui - Versions diffs - 0.12.1 → 0.14.0 - Mend

@titan-design/react-ui 0.12.1 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (531) hide show

package/src/components/custom/Workout/WeightBadge.test.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { WeightBadge } from './WeightBadge'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { resolveColor } from '../../../theme/resolve-color'
 // Read from the token, not pinned: these used to be hand-copied hexes and
 // silently desynced when borders became alpha hairlines (TD-07.16).
@@ -47,18 +48,14 @@ describe('WeightBadge', () => {
   describe('reps (rep-max context)', () => {
     it('shows the estimated 1RM label when reps is omitted', () => {
       render(<WeightBadge value={315} unit="lbs" />)
-      expect(
-        screen.getByLabelText('Estimated one rep max: 315 lbs'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Estimated one rep max: 315 lbs')).toBeInTheDocument()
       expect(screen.queryByTestId('weight-badge-repmax')).not.toBeInTheDocument()
     })
     it('shows the rep-max qualifier and label when reps is provided', () => {
       render(<WeightBadge value={275} unit="lbs" reps={5} />)
       expect(screen.getByTestId('weight-badge-repmax')).toHaveTextContent('5RM')
-      expect(
-        screen.getByLabelText('5 rep max: 275 lbs'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('5 rep max: 275 lbs')).toBeInTheDocument()
     })
   })
@@ -127,27 +124,63 @@ describe('WeightBadge', () => {
     })
   })
+  // Regression (E3 B3): the value, rep-max and delta colours were read through
+  // `getSemanticColors('dark')` / `greyRamp` ON THE RENDER PATH, which pins the badge
+  // to dark-mode hex and leaves it unreadable once `.light` is on <html>. Each of these
+  // asserts the `var()` reference `resolveColor` returns on web; every one of them
+  // fails against the old literal.
+  describe('theme-correct colours', () => {
+    it('draws a PR value from the brand-primary token, not a dark-mode hex', () => {
+      render(<WeightBadge value={315} isPr />)
+      expect(screen.getByText(/315 lbs/)).toHaveStyle({ color: resolveColor('brand-primary') })
+    })
+    // A load value is not a heading. Typography's h-variants render role="heading",
+    // which both misreports the badge and breaks the parity layer's text selector.
+    it('renders the value as text, not a heading', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.queryByRole('heading')).not.toBeInTheDocument()
+      expect(screen.getByText('225 lbs').getAttribute('dir')).toBe('auto')
+    })
+    it('draws a non-PR value from the text-secondary token', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.getByText('225 lbs')).toHaveStyle({ color: resolveColor('text-secondary') })
+    })
+    it('tints the rep-max qualifier with the same token as the value', () => {
+      render(<WeightBadge value={275} reps={5} isPr />)
+      expect(screen.getByTestId('weight-badge-repmax')).toHaveStyle({
+        color: resolveColor('brand-primary'),
+      })
+    })
+    it.each([
+      [3, 'result-improve'],
+      [-2, 'result-degrade'],
+    ] as const)('draws a %s%% delta from the %s token', (delta, token) => {
+      render(<WeightBadge value={225} delta={delta} />)
+      expect(screen.getByTestId('weight-badge-delta')).toHaveStyle({
+        color: resolveColor(token),
+      })
+    })
+  })
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <WeightBadge value={225} isPr onPress={() => {}} />,
-      )
+      const { container } = render(<WeightBadge value={225} isPr onPress={() => {}} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
     it('has no accessibility violations with delta', async () => {
-      const { container } = render(
-        <WeightBadge value={225} delta={3} onPress={() => {}} />,
-      )
+      const { container } = render(<WeightBadge value={225} delta={3} onPress={() => {}} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
     it('has no accessibility violations as static badge', async () => {
-      const { container } = render(
-        <WeightBadge value={315} unit="kg" isPr delta={-2} />,
-      )
+      const { container } = render(<WeightBadge value={315} unit="kg" isPr delta={-2} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
@@ -155,15 +188,13 @@ describe('WeightBadge', () => {
     it('includes delta in the e1RM accessibility label', () => {
       render(<WeightBadge value={225} delta={5} />)
       expect(
-        screen.getByLabelText('Estimated one rep max: 225 lbs, +5% change'),
+        screen.getByLabelText('Estimated one rep max: 225 lbs, +5% change')
       ).toBeInTheDocument()
     })
     it('includes delta in the rep-max accessibility label', () => {
       render(<WeightBadge value={275} reps={5} delta={-3} />)
-      expect(
-        screen.getByLabelText('5 rep max: 275 lbs, -3% change'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('5 rep max: 275 lbs, -3% change')).toBeInTheDocument()
     })
   })
 })

package/src/components/custom/Workout/WeightBadge.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { Text } from 'react-native'
+import { Typography } from '../Typography'
 import { DumbbellIcon } from './icons'
 import {
   BaseBadge,
@@ -7,13 +7,11 @@ import {
   type BaseBadgeSize,
   type BaseBadgeProps,
 } from './BaseBadge'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { greyRamp } from '../../../theme/tokens/primitives'
+import { resolveColor } from '../../../theme/resolve-color'
 export type WeightBadgeSize = BaseBadgeSize
-export interface WeightBadgeProps
-  extends Omit<BaseBadgeProps, 'variant' | 'icon' | 'children'> {
+export interface WeightBadgeProps extends Omit<BaseBadgeProps, 'variant' | 'icon' | 'children'> {
   value: number
   unit?: 'lbs' | 'kg'
   /**
@@ -31,6 +29,9 @@ export interface WeightBadgeProps
   className?: string
 }
+/**
+ * @deprecated Use `<Pill tone="neutral">` — removed after AW-127 consumer migration.
+ */
 export function WeightBadge({
   value,
   unit = 'lbs',
@@ -44,15 +45,14 @@ export function WeightBadge({
   ...props
 }: WeightBadgeProps) {
   const config = baseBadgeSizeConfig[size]
-  const textColor = isPr ? getSemanticColors('dark')['brand-primary'] : greyRamp[400]
+  const textColor = isPr ? resolveColor('brand-primary') : resolveColor('text-secondary')
   // Dumbbell reads clearly as a weight/strength metric and is unit-agnostic
   // across estimated-1RM and N-rep-max contexts (vs. TrendingUp which implies
   // change/trend rather than a load value).
   const iconColor = textColor
   const repMaxClause = reps != null ? `${reps} rep max` : 'Estimated one rep max'
-  const deltaLabel =
-    delta != null ? `, ${delta >= 0 ? '+' : ''}${delta}% change` : ''
+  const deltaLabel = delta != null ? `, ${delta >= 0 ? '+' : ''}${delta}% change` : ''
   const fullLabel = `${repMaxClause}: ${value} ${unit}${deltaLabel}`
   return (
@@ -70,22 +70,24 @@ export function WeightBadge({
       testID="weight-badge"
       {...props}
     >
-      <Text
-        style={{
-          fontFamily: '"Space Grotesk", sans-serif',
-          fontWeight: '600',
-          fontSize: config.fontSize,
-          color: textColor,
-        }}
+      {/* `body2` + `font-heading`, NOT `h6`: a load value is not a heading, and the
+          heading variants make Typography render `role="heading"`. The size prop still
+          drives the step, so the fontSize stays computed (BaseBadge's 9/10/12 config). */}
+      <Typography
+        variant="body2"
+        color="inherit"
+        className="font-heading font-semibold leading-[normal]"
+        style={{ fontSize: config.fontSize, color: textColor }}
       >
         {isPr ? '✳ ' : ''}
         {value} {unit}
-      </Text>
+      </Typography>
       {reps != null && (
-        <Text
+        <Typography
+          variant="body2"
+          color="inherit"
+          className="font-heading font-semibold leading-[normal]"
           style={{
-            fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: '600',
             fontSize: config.fontSize,
             marginLeft: 2,
             color: textColor,
@@ -94,24 +96,23 @@ export function WeightBadge({
           testID="weight-badge-repmax"
         >
           {reps}RM
-        </Text>
+        </Typography>
       )}
       {delta != null && (
-        <Text
+        <Typography
+          variant="body2"
+          color="inherit"
+          className="font-heading leading-[normal]"
           style={{
-            fontFamily: '"Space Grotesk", sans-serif',
             fontSize: config.fontSize,
             marginLeft: 4,
-            color:
-              delta >= 0
-                ? getSemanticColors('dark')['result-improve']
-                : getSemanticColors('dark')['result-degrade'],
+            color: resolveColor(delta >= 0 ? 'result-improve' : 'result-degrade'),
           }}
           testID="weight-badge-delta"
         >
           {delta >= 0 ? '+' : ''}
           {delta}%
-        </Text>
+        </Typography>
       )}
     </BaseBadge>
   )

package/src/components/custom/Workout/WorkoutCard.stories.tsx CHANGED Viewed

@@ -4,8 +4,13 @@ import { WorkoutCard } from './WorkoutCard'
 import type { ExerciseCardProps } from './ExerciseCard'
 const meta: Meta<typeof WorkoutCard> = {
-  title: 'Workout/WorkoutCard',
+  title: 'Custom/Workout/WorkoutCard',
   component: WorkoutCard,
+  parameters: {
+    docs: {
+      description: { component: 'Composes **Card** · **ExerciseCard** · **MuscleGroupChip**.' },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     status: {

package/src/components/custom/Workout/WorkoutCard.test.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { WorkoutCard, type WorkoutCardProps } from './WorkoutCard'
 import type { ExerciseCardProps } from './ExerciseCard'
+import { resolveColor } from '../../../theme/resolve-color'
 const baseProps: WorkoutCardProps = {
   name: 'Upper A',
@@ -110,6 +111,23 @@ describe('WorkoutCard', () => {
         opacity: 0.6,
       })
     })
+    it.each([
+      ['completed', 'status-success'],
+      ['today', 'brand-primary'],
+      ['upcoming', 'hairline-default'],
+    ] as const)('draws the %s accent stripe from the %s token', (status, token) => {
+      render(<WorkoutCard {...baseProps} status={status} />)
+      const style = screen.getByTestId('workout-card').getAttribute('style') ?? ''
+      expect(style).toContain(`border-left-color: ${resolveColor(token)}`)
+    })
+    it("washes today's card with the brand subtle token", () => {
+      render(<WorkoutCard {...baseProps} status="today" />)
+      expect(screen.getByTestId('workout-card')).toHaveStyle({
+        backgroundColor: resolveColor('brand-primary-subtle'),
+      })
+    })
   })
   describe('accessibility', () => {

package/src/components/custom/Workout/WorkoutCard.tsx CHANGED Viewed

@@ -1,25 +1,15 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, ScrollView, Pressable, type ViewProps } from 'react-native'
+import { View, ScrollView, Pressable, type ViewProps } from 'react-native'
 import { Card } from '../../ui/card'
 import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
-import {
-  MuscleGroupChip,
-  type VolumeStatus,
-} from './MuscleGroupChip'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
-const t = getSemanticColors('dark')
+import { MuscleGroupChip, type VolumeStatus } from './MuscleGroupChip'
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
 export type WorkoutStatus = 'completed' | 'today' | 'upcoming'
 /** Spec volume-status vocabulary; mapped to MuscleGroupChip's VolumeStatus internally. */
-export type WorkoutMuscleVolumeStatus =
-  | 'under'
-  | 'maintenance'
-  | 'productive'
-  | 'over'
+export type WorkoutMuscleVolumeStatus = 'under' | 'maintenance' | 'productive' | 'over'
 export interface WorkoutMuscleGroup {
   /** Muscle group identifier (free-form to match plan data). */
@@ -47,17 +37,14 @@ export interface WorkoutCardProps extends ViewProps {
   className?: string
 }
-const COLORS = {
-  statusSuccess: t['status-success'],
-  brandPrimary: t['brand-primary'],
-  borderDefault: HAIRLINE_DEFAULT,
-  brandPrimarySubtle: 'rgba(255,121,0,0.06)',
-}
-const statusBorderColors: Record<WorkoutStatus, string> = {
-  completed: COLORS.statusSuccess,
-  today: COLORS.brandPrimary,
-  upcoming: COLORS.borderDefault,
+/** Accent-stripe token per status, resolved per theme at render. */
+const statusAccentToken: Record<
+  WorkoutStatus,
+  'status-success' | 'brand-primary' | 'hairline-default'
+> = {
+  completed: 'status-success',
+  today: 'brand-primary',
+  upcoming: 'hairline-default',
 }
 /** Maps the spec's volume-status vocabulary onto MuscleGroupChip's enum. */
@@ -72,7 +59,7 @@ function formatStats(
   totalSets: number,
   totalVolume: number | undefined,
   unit: 'lbs' | 'kg',
-  duration: string | undefined,
+  duration: string | undefined
 ): string {
   const parts = [`${totalSets} sets`]
   if (totalVolume != null) parts.push(`${totalVolume} ${unit}`)
@@ -123,41 +110,36 @@ export function WorkoutCard({
   const summary = (
     <View style={{ padding: 14 }} testID="workout-card-body">
       <View className="flex-row items-center" testID="workout-card-header">
-        <Text
-          className="text-text-primary"
-          style={{
-            fontSize: 15,
-            fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: '700',
-          }}
+        {/* The card name was 15px/700 Space Grotesk — off the type scale between
+            `sm` and `base`. `h6` carries the heading face; `base` is the step up. */}
+        <Typography
+          variant="h6"
+          color="primary"
+          className="text-base font-bold leading-[normal]"
           testID="workout-card-name"
         >
           {name}
-        </Text>
+        </Typography>
         <View className="flex-1" />
-        <Text
-          className="text-text-tertiary"
-          style={{
-            fontSize: 11,
-            fontFamily: 'Inter, sans-serif',
-          }}
+        {/* 11px is off the scale too; `2xs` (10px) is the step below. */}
+        <Typography
+          variant="caption"
+          color="tertiary"
+          className="text-2xs leading-[normal]"
           testID="workout-card-date"
         >
           {date}
-        </Text>
+        </Typography>
       </View>
-      <Text
-        className="text-text-secondary"
-        style={{
-          marginTop: 4,
-          fontSize: 12,
-          fontFamily: 'Inter, sans-serif',
-        }}
+      <Typography
+        variant="caption"
+        color="secondary"
+        className="mt-1 leading-[normal]"
         testID="workout-card-stats"
       >
         {formatStats(totalSets, totalVolume, unit, duration)}
-      </Text>
+      </Typography>
       {muscleGroups.length > 0 && (
         <ScrollView
@@ -171,11 +153,7 @@ export function WorkoutCard({
             <MuscleGroupChip
               key={muscle.group}
               name={muscle.label}
-              volumeStatus={
-                muscle.volumeStatus
-                  ? volumeStatusMap[muscle.volumeStatus]
-                  : undefined
-              }
+              volumeStatus={muscle.volumeStatus ? volumeStatusMap[muscle.volumeStatus] : undefined}
             />
           ))}
         </ScrollView>
@@ -187,8 +165,8 @@ export function WorkoutCard({
     <Card
       variant="accent"
       elevation={1}
-      accentColor={statusBorderColors[status]}
-      bgColor={isToday ? COLORS.brandPrimarySubtle : undefined}
+      accentColor={resolveColor(statusAccentToken[status])}
+      bgColor={isToday ? resolveColor('brand-primary-subtle') : undefined}
       className={className}
       style={isUpcoming ? { opacity: 0.6 } : undefined}
       testID="workout-card"

package/src/components/custom/Workout/WorkoutPill.stories.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { WorkoutPill } from './WorkoutPill'
 const meta: Meta<typeof WorkoutPill> = {
-  title: 'Workout/WorkoutPill',
+  title: 'Custom/Workout/WorkoutPill',
   component: WorkoutPill,
   tags: ['autodocs'],
   argTypes: {
@@ -14,7 +14,10 @@ const meta: Meta<typeof WorkoutPill> = {
       description: 'Pill status',
     },
     pulse: { control: 'boolean', description: 'Pulsing animation (independent of status)' },
-    highlighted: { control: 'boolean', description: 'Highlighted with thicker border and slight scale' },
+    highlighted: {
+      control: 'boolean',
+      description: 'Highlighted with thicker border and slight scale',
+    },
   },
 }

package/src/components/custom/Workout/WorkoutPill.test.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { WorkoutPill } from './WorkoutPill'
+import { resolveColor } from '../../../theme/resolve-color'
 describe('WorkoutPill', () => {
   it('renders the workout name', () => {
@@ -80,6 +81,41 @@ describe('WorkoutPill', () => {
     }
   })
+  // The rim is a whole rung above the wash. Asserting both rules out the
+  // flattening that collapses a two-step pill onto one `-subtle`.
+  describe('wash ladder', () => {
+    it.each([
+      ['completed', 'status-success'],
+      ['current', 'brand-primary'],
+      ['missed', 'status-error'],
+    ] as const)('washes the %s pill with %s -subtle inside a -muted rim', (status, role) => {
+      render(<WorkoutPill name="Upper A" status={status} />)
+      const pill = screen.getByLabelText(`Upper A workout, ${status}`)
+      expect(pill).toHaveStyle({ backgroundColor: resolveColor(`${role}-subtle`) })
+      expect(pill.style.borderTopColor).toBe(resolveColor(`${role}-muted`))
+    })
+    it('gives the washless next pill the -strong rim, a rung above current', () => {
+      render(<WorkoutPill name="Upper A" status="next" />)
+      const pill = screen.getByLabelText('Upper A workout, next')
+      // jsdom normalises the `transparent` keyword to its rgba() form.
+      expect(pill.style.backgroundColor).toBe('rgba(0, 0, 0, 0)')
+      expect(pill.style.borderTopColor).toBe(resolveColor('brand-primary-strong'))
+    })
+    it.each([
+      ['completed', 'status-success'],
+      ['current', 'brand-primary'],
+      ['upcoming', 'text-tertiary'],
+      ['missed', 'status-error-dark'],
+    ] as const)('labels the %s pill from the %s token', (status, token) => {
+      render(<WorkoutPill name="Upper A" status={status} />)
+      expect(screen.getByTestId('workout-pill-name')).toHaveStyle({
+        color: resolveColor(token),
+      })
+    })
+  })
   describe('pulse', () => {
     it('pulses by default on current status', () => {
       render(<WorkoutPill name="Upper A" status="current" />)
@@ -128,16 +164,14 @@ describe('WorkoutPill', () => {
     })
     it('has no accessibility violations as static pill', async () => {
-      const { container } = render(
-        <WorkoutPill name="Lower B" status="upcoming" />,
-      )
+      const { container } = render(<WorkoutPill name="Lower B" status="upcoming" />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
     it('has no accessibility violations for missed status', async () => {
       const { container } = render(
-        <WorkoutPill name="Rest Day" status="missed" onPress={() => {}} />,
+        <WorkoutPill name="Rest Day" status="missed" onPress={() => {}} />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -145,9 +179,7 @@ describe('WorkoutPill', () => {
     it('pressable has correct accessibility label', () => {
       render(<WorkoutPill name="Upper A" status="completed" onPress={() => {}} />)
-      expect(
-        screen.getByLabelText('Upper A workout, completed'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Upper A workout, completed')).toBeInTheDocument()
     })
   })
 })