@multiplatform.one/components 7.7.6 → 7.10.0

package/src/textAccentSecondary.spec.tsx

@@ -0,0 +1,187 @@
+/**
+ * MPO-154 — `textAccent` reaches SECONDARY text, not just body text.
+ *
+ * The `secondary` / `muted` keys on componentColors' text table were a static
+ * `$color11` read straight into the `color` prop, so every helper, caption and
+ * inactive label rendered the same ink at `low`, `medium` and `high`. The resolver
+ * already answers this: `knobProps.textAccentColor` is `$color11` at the two
+ * dim stops (the AA legibility floor) and `$color` at `high`.
+ *
+ * Measurement follows the Text.spec.tsx discipline: read the TEXT NODE's
+ * `_col-` atomic class, compare between knob stops by identity, never against
+ * a hashed literal. Meter publishes its resolved value ink on
+ * `data-meter-value-color`, so that surface asserts the token directly.
+ *
+ * Both schemes are covered because `textAccent` is scheme-independent by
+ * construction — the tokens are theme-relative — and a regression that
+ * re-pins one scheme would show up here.
+ */
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { Theme } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Accordion } from "./Accordion";
+import { componentColors } from "./componentColors";
+import { Meter } from "./Meter";
+import { Quote } from "./Quote";
+import { Tabs } from "./Tabs";
+
+afterEach(cleanup);
+
+type Accent = "low" | "medium" | "high";
+type Scheme = "light" | "dark";
+
+function inScheme(scheme: Scheme, node: ReactElement): ReactElement {
+  return scheme === "dark" ? <Theme name="dark">{node}</Theme> : node;
+}
+
+/** The TEXT NODE's colour atom, by identity — hashed names never asserted. */
+function inkAtoms(el: Element): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_col-"))
+    .sort();
+}
+
+function inkOf(scheme: Scheme, accent: Accent, label: string, node: ReactElement): string[] {
+  renderWithProviders(inScheme(scheme, <Preset overrides={{ textAccent: accent }}>{node}</Preset>));
+  const atoms = inkAtoms(screen.getByText(label));
+  cleanup();
+  return atoms;
+}
+
+const schemes: Scheme[] = ["light", "dark"];
+
+describe("Tabs — textAccent reaches the inactive tab label (MPO-154)", () => {
+  const items = [
+    { value: "address", label: "Address & Contact", content: <>address panel</> },
+    { value: "settings", label: "Settings", content: <>settings panel</> },
+  ];
+  const tabs = <Tabs items={items} defaultValue="address" />;
+
+  for (const scheme of schemes) {
+    it(`${scheme}: the inactive label moves between low and high`, () => {
+      const low = inkOf(scheme, "low", "Settings", tabs);
+      const high = inkOf(scheme, "high", "Settings", tabs);
+      expect(low).not.toHaveLength(0);
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+    });
+
+    it(`${scheme}: the inactive label keeps the AA floor at low and medium`, () => {
+      expect(inkOf(scheme, "low", "Settings", tabs)).toEqual(
+        inkOf(scheme, "medium", "Settings", tabs),
+      );
+    });
+  }
+});
+
+describe("Accordion — textAccent reaches the section description (MPO-154)", () => {
+  const description = "Where should we deliver the order?";
+  const accordion = (
+    <Accordion defaultValue="shipping">
+      <Accordion.Item value="shipping">
+        <Accordion.Trigger description={description}>Shipping details</Accordion.Trigger>
+        <Accordion.Content>ship</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+
+  for (const scheme of schemes) {
+    it(`${scheme}: the description moves between low and high`, () => {
+      const low = inkOf(scheme, "low", description, accordion);
+      const high = inkOf(scheme, "high", description, accordion);
+      expect(low).not.toHaveLength(0);
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+    });
+
+    it(`${scheme}: the description keeps the AA floor at low and medium`, () => {
+      expect(inkOf(scheme, "low", description, accordion)).toEqual(
+        inkOf(scheme, "medium", description, accordion),
+      );
+    });
+  }
+});
+
+describe("Quote — textAccent reaches the attribution (MPO-154)", () => {
+  const quote = <Quote cite="Alan Kay">The best way to predict the future.</Quote>;
+
+  // The attribution renders as `<cite>— {name}</cite>`, two text runs in one
+  // node, so getByText cannot reach it. Read the cite element itself.
+  function citeInk(scheme: Scheme, accent: Accent): string[] {
+    const { container } = renderWithProviders(
+      inScheme(scheme, <Preset overrides={{ textAccent: accent }}>{quote}</Preset>),
+    );
+    const cite = container.querySelector("cite");
+    expect(cite?.textContent).toContain("Alan Kay");
+    const atoms = inkAtoms(cite as Element);
+    cleanup();
+    return atoms;
+  }
+
+  for (const scheme of schemes) {
+    it(`${scheme}: the attribution moves between low and high`, () => {
+      const low = citeInk(scheme, "low");
+      const high = citeInk(scheme, "high");
+      expect(low).not.toHaveLength(0);
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+    });
+
+    it(`${scheme}: the attribution keeps the AA floor at low and medium`, () => {
+      expect(citeInk(scheme, "low")).toEqual(citeInk(scheme, "medium"));
+    });
+  }
+});
+
+describe("Meter — textAccent reaches the ok-zone value readout (MPO-154)", () => {
+  const meter = <Meter label="Disk usage" value={6.2} min={0} max={8} unit="GB" />;
+
+  function valueInk(scheme: Scheme, accent: Accent): string | null {
+    const { container } = renderWithProviders(
+      inScheme(scheme, <Preset overrides={{ textAccent: accent }}>{meter}</Preset>),
+    );
+    const token = container
+      .querySelector("[data-meter-value]")
+      ?.getAttribute("data-meter-value-color");
+    cleanup();
+    return token ?? null;
+  }
+
+  for (const scheme of schemes) {
+    it(`${scheme}: the ok value readout rides the resolver, not a static $color11`, () => {
+      expect(valueInk(scheme, "low")).toBe("$color11");
+      expect(valueInk(scheme, "medium")).toBe("$color11");
+      expect(valueInk(scheme, "high")).toBe("$color");
+    });
+  }
+
+  it("a verdict zone keeps its semantic ink at every stop", () => {
+    const warned = (accent: Accent) => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ textAccent: accent }}>
+          <Meter label="Disk usage" value={7.5} min={0} max={8} low={2} high={6} unit="GB" />
+        </Preset>,
+      );
+      const token = container
+        .querySelector("[data-meter-value]")
+        ?.getAttribute("data-meter-value-color");
+      cleanup();
+      return token;
+    };
+    expect(warned("low")).toBe("$orange11");
+    expect(warned("high")).toBe("$orange11");
+  });
+});
+
+describe("componentColors keeps no second answer for secondary ink (MPO-154)", () => {
+  it("the text table exposes no static secondary or muted step", () => {
+    const text = componentColors.text as Record<string, string | undefined>;
+    expect(text.secondary).toBeUndefined();
+    expect(text.muted).toBeUndefined();
+    expect(text.primary).toBe("$color");
+  });
+});

package/src/views/Calendar.tsx

@@ -434,6 +434,7 @@ function DayNumberDisc({
   nestedBox: NestedControlBox;
   label: NestedLabel;
 }) {
+  const { knobProps } = useResolvedKnobs();
   return (
     <YStack
       {...nestedBox}
@@ -455,7 +456,7 @@ function DayNumberDisc({
         {...label}
         fontWeight={today ? "700" : label.fontWeight}
         color={
-          today ? (onAccent ?? "$accentColor") : inMonth ? "$color" : componentColors.text.muted
+          today ? (onAccent ?? "$accentColor") : inMonth ? "$color" : knobProps.textAccentColor
         }
         textAlign="center"
       >
@@ -1731,7 +1732,7 @@ export function Calendar({
               role="columnheader"
               {...{ backgroundColor: componentColors.surface.background }}
             >
-              <Text {...nestedKnobs.label} fontWeight="500" color={componentColors.text.muted}>
+              <Text {...nestedKnobs.label} fontWeight="500" color={knobProps.textAccentColor}>
                 {day}
               </Text>
             </YStack>
@@ -1851,7 +1852,7 @@ export function Calendar({
                                 hoverStyle={{ opacity: 0.7 }}
                                 {...{ "data-calendar-overflow": String(hiddenCount) }}
                               >
-                                <Text fontSize="$1" color={componentColors.text.muted}>
+                                <Text fontSize="$1" color={knobProps.textAccentColor}>
                                   {withInterp(t("+{{count}} more"), { count: hiddenCount })}
                                 </Text>
                               </XStack>
@@ -2073,7 +2074,7 @@ export function Calendar({
                 onDateSelect?.(day);
               }}
             >
-              <Text {...nestedKnobs.label} fontWeight="500" color={componentColors.text.muted}>
+              <Text {...nestedKnobs.label} fontWeight="500" color={knobProps.textAccentColor}>
                 {weekdayNames[day.getDay()]}
               </Text>
               <DayNumberDisc
@@ -2094,7 +2095,7 @@ export function Calendar({
         {/* All-day / untimed strip (also the day-granularity drop row) */}
         <XStack {...hairline.bottom} borderColor="$borderColor" minHeight={MIN_PRESS_TARGET}>
           <YStack width={56} justifyContent="center" alignItems="flex-end" paddingInlineEnd="$2">
-            <Text fontSize="$1" color={componentColors.text.muted}>
+            <Text fontSize="$1" color={knobProps.textAccentColor}>
               {t("All day")}
             </Text>
           </YStack>
@@ -2135,7 +2136,7 @@ export function Calendar({
             <YStack width={56}>
               {hours.map((hour) => (
                 <YStack key={hour} height={hourHeight} alignItems="flex-end" paddingInlineEnd="$2">
-                  <Text fontSize="$1" color={componentColors.text.muted}>
+                  <Text fontSize="$1" color={knobProps.textAccentColor}>
                     {formatHour(hour)}
                   </Text>
                 </YStack>
@@ -2305,13 +2306,13 @@ export function Calendar({
                             onChangeText={setDraftTitle}
                             inputProps={{ autoFocus: true } as any}
                           />
-                          <Text fontSize="$2" color={componentColors.text.muted}>
+                          <Text fontSize="$2" color={knobProps.textAccentColor}>
                             {`${formatDayLong(editorHere.start)}, ${formatTimeRangeLabel(
                               editorHere.start,
                               editorHere.end,
                             )}`}
                           </Text>
-                          <Text fontSize="$1" color={componentColors.text.muted}>
+                          <Text fontSize="$1" color={knobProps.textAccentColor}>
                             {t("Changes apply when the editor closes")}
                           </Text>
                         </YStack>

package/src/views/Dashboard.stories.tsx

@@ -8,7 +8,8 @@ import {
   UsersIcon,
 } from "@phosphor-icons/react";
 import type { Meta } from "@storybook/react-native-web-vite";
-import { Dashboard, type DashboardWidget } from "./Dashboard";
+import { YStack } from "tamagui";
+import { Dashboard, KPICard, type DashboardWidget } from "./Dashboard";
 
 const iconSize = 16;
 
@@ -165,6 +166,42 @@ const meta: Meta = {
 
 export default meta;
 
+export const TrendSentiment = {
+  render: () => (
+    <YStack width="100%" maxWidth={360} gap="$3">
+      <KPICard
+        config={{
+          id: "improving",
+          title: "Improving revenue",
+          value: 120,
+          trend: "up",
+          trendValue: "+12%",
+          goodDirection: "up",
+        }}
+      />
+      <KPICard
+        config={{
+          id: "worsening",
+          title: "Worsening revenue",
+          value: 96,
+          trend: "down",
+          trendValue: "-4%",
+          goodDirection: "up",
+        }}
+      />
+      <KPICard
+        config={{
+          id: "undeclared",
+          title: "Undeclared sentiment",
+          value: 102,
+          trend: "up",
+          trendValue: "2%",
+        }}
+      />
+    </YStack>
+  ),
+};
+
 export const Default = {
   name: "Main",
   render: () => (

package/src/views/Dashboard.tsx

@@ -1,4 +1,5 @@
 import { Meter } from "../Meter";
+import { ChartDataView } from "../charts/ChartDataView";
 import { BarChart } from "../charts/BarChart";
 import { LineChart } from "../charts/LineChart";
 import { PieChart } from "../charts/PieChart";
@@ -12,7 +13,7 @@ import {
   formatPercent,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import React, { useCallback, useMemo, type ReactNode } from "react";
+import React, { useCallback, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
 import {
   ScrollView,
@@ -56,6 +57,13 @@ function trendFill(color: string): string {
   return "$color4";
 }
 
+function trendInk(color: string): string {
+  // Step 11 clears the page, but falls below AA on the status pill's step 4 wash.
+  if (color === componentColors.semantic.success) return "$green12";
+  if (color === componentColors.semantic.error) return "$red12";
+  return color;
+}
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -222,7 +230,7 @@ export interface DashboardProps extends Omit<YStackProps, "children"> {
 // Shared card chrome
 // ============================================================================
 
-function useWidgetChrome(onPress?: () => void) {
+function useWidgetChrome(onPress?: YStackProps["onPress"]) {
   const resolved = useResolvedKnobs();
   const { knobProps, control } = resolved;
   const nested = splitNestedControl(knobProps.nestedControl);
@@ -294,11 +302,11 @@ function TrendPill({
       {...radius}
       data-nested-px={px}
     >
-      <Text {...label} color={color}>
+      <Text {...label} color={trendInk(color)}>
         {symbol}
       </Text>
       {value != null && value !== "" && (
-        <Text {...label} color={color}>
+        <Text {...label} color={trendInk(color)}>
           {value}
         </Text>
       )}
@@ -318,15 +326,20 @@ export interface KPICardProps extends Omit<YStackProps, "children"> {
  * The one sentinel resolver for trend sentiment color (LC-36
  * TREND-SENTIMENT): color encodes sentiment — `trend × goodDirection` —
  * never direction alone. Undeclared or `"none"` sentiment renders the
- * neutral muted tier; a metric whose polarity the system doesn't know
- * must not wear a verdict color.
+ * neutral tier; a metric whose polarity the system doesn't know must not
+ * wear a verdict color.
+ *
+ * MPO-154: the neutral ink is passed in, not looked up. It is ordinary
+ * secondary text, so the caller hands over `knobProps.textAccentColor` —
+ * a static tier here could not see the `textAccent` knob.
  */
 export function resolveTrendColor(
   trend: TrendDirection | undefined,
   goodDirection: KPICardConfig["goodDirection"],
+  neutral: string,
 ): string {
-  if (!trend || trend === "neutral") return componentColors.text.muted;
-  if (!goodDirection || goodDirection === "none") return componentColors.text.muted;
+  if (!trend || trend === "neutral") return neutral;
+  if (!goodDirection || goodDirection === "none") return neutral;
   return trend === goodDirection
     ? componentColors.semantic.success
     : componentColors.semantic.error;
@@ -339,8 +352,13 @@ export function resolveTrendColor(
  */
 export function KPICard({ config, ...stackProps }: KPICardProps) {
   const { t } = useTranslation();
-  const { knobProps, nested, interactive } = useWidgetChrome(config.onClick);
+  const { onPress: consumerOnPress, ...cardProps } = stackProps;
+  const onPress = Object.hasOwn(stackProps, "onPress") ? consumerOnPress : config.onClick;
+  const { knobProps, nested, interactive } = useWidgetChrome(onPress);
   const { px, box } = nested;
+  const [dataActionSize, setDataActionSize] = useState({ width: 0, height: 44 });
+  const [dataHeaderHeight, setDataHeaderHeight] = useState(44);
+  const hasDataView = Boolean(config.sparkline?.length);
   const formatMetric = useCallback(
     (num: number) => {
       if (config.format === "currency") {
@@ -360,8 +378,8 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
   );
 
   const trendColor = useMemo(
-    () => resolveTrendColor(config.trend, config.goodDirection),
-    [config.trend, config.goodDirection],
+    () => resolveTrendColor(config.trend, config.goodDirection, knobProps.textAccentColor),
+    [config.trend, config.goodDirection, knobProps.textAccentColor],
   );
 
   const trendSymbol = useMemo(() => {
@@ -370,15 +388,16 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
     return "—";
   }, [config.trend]);
 
-  return (
-    <Card
-      width="100%"
-      elevation={knobProps.elevation}
-      {...knobProps.surface}
-      {...interactive}
-      {...stackProps}
-    >
-      <XStack justifyContent="space-between" alignItems="flex-start">
+  const content = (
+    <>
+      <XStack
+        justifyContent="space-between"
+        alignItems="center"
+        {...knobProps.gap}
+        onLayout={
+          hasDataView ? (event) => setDataHeaderHeight(event.nativeEvent.layout.height) : undefined
+        }
+      >
         <Text {...knobProps.label} color={knobProps.textAccentColor} flex={1}>
           {config.title}
         </Text>
@@ -387,6 +406,13 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
             {config.icon}
           </NestedIconWell>
         ) : null}
+        {hasDataView ? (
+          <YStack
+            width={dataActionSize.width}
+            height={dataActionSize.height}
+            pointerEvents="none"
+          />
+        ) : null}
       </XStack>
 
       <Text fontSize="$8" color="$color" {...knobProps.heading}>
@@ -394,7 +420,12 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
       </Text>
 
       {config.sparkline && config.sparkline.length > 0 ? (
-        <Sparkline data={config.sparkline} height={px} title={config.title} />
+        <Sparkline
+          data={config.sparkline}
+          height={px}
+          title={config.title}
+          valueFormatter={formatMetric}
+        />
       ) : null}
 
       {(config.trend || config.trendValue) && (
@@ -414,10 +445,70 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
           )}
         </XStack>
       )}
-    </Card>
+    </>
+  );
+  if (!hasDataView)
+    return (
+      <Card
+        width="100%"
+        elevation={knobProps.elevation}
+        {...knobProps.surface}
+        {...interactive}
+        {...stackProps}
+      >
+        {content}
+      </Card>
+    );
+  return (
+    <ChartDataView data={config.sparkline!} title={config.title} valueFormatter={formatMetric}>
+      {({ action }) => (
+        <Card width="100%" elevation={knobProps.elevation} {...knobProps.surface} {...cardProps}>
+          <YStack position="relative">
+            <YStack
+              {...knobProps.gap}
+              {...knobProps.containerRadius}
+              {...interactive}
+              focusable={Boolean(onPress)}
+              {...(isWeb
+                ? {
+                    "data-mpo-kpi-navigation": config.id,
+                    tabIndex: onPress ? 0 : undefined,
+                    onKeyDown: onPress
+                      ? (event: React.KeyboardEvent<HTMLElement>) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            if (!event.repeat) event.currentTarget.click();
+                          }
+                        }
+                      : undefined,
+                  }
+                : {})}
+            >
+              {content}
+            </YStack>
+            <YStack
+              position="absolute"
+              top={Math.max(0, (dataHeaderHeight - dataActionSize.height) / 2)}
+              right={0}
+              minHeight={44}
+              justifyContent="center"
+              onLayout={(event) => {
+                const { width, height } = event.nativeEvent.layout;
+                setDataActionSize((previous) =>
+                  previous.width === width && previous.height === height
+                    ? previous
+                    : { width, height },
+                );
+              }}
+            >
+              {action}
+            </YStack>
+          </YStack>
+        </Card>
+      )}
+    </ChartDataView>
   );
 }
-
 // ============================================================================
 // Chart Card Component
 // ============================================================================
@@ -455,11 +546,14 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
   const dataColors = config.colors ?? colors;
   const showXAxis = config.showLabels !== false;
 
-  return (
+  const renderCard = (action?: ReactNode) => (
     <YStack {...knobProps.gap} width="100%" {...stackProps}>
-      <HeadingTag margin={0} {...knobProps.heading} {...sectionHeading}>
-        {config.title}
-      </HeadingTag>
+      <XStack alignItems="center" justifyContent="space-between" {...knobProps.gap}>
+        <HeadingTag flex={1} minWidth={0} margin={0} {...knobProps.heading} {...sectionHeading}>
+          {config.title}
+        </HeadingTag>
+        {action}
+      </XStack>
       <Card elevation={knobProps.elevation} {...knobProps.surface}>
         {config.type === "pie" ? (
           <PieChart
@@ -473,6 +567,7 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
         ) : config.type === "line" ? (
           <LineChart
             data={config.data}
+            title={config.title}
             height={config.height}
             color={dataColors?.[0]}
             showPoints
@@ -482,6 +577,7 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
         ) : (
           <BarChart
             data={config.data}
+            title={config.title}
             height={config.height}
             colors={dataColors}
             showXAxis={showXAxis}
@@ -491,6 +587,13 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
       </Card>
     </YStack>
   );
+  return config.type === "pie" && config.showLegend !== false ? (
+    renderCard()
+  ) : (
+    <ChartDataView data={config.data} title={config.title}>
+      {({ action }) => renderCard(action)}
+    </ChartDataView>
+  );
 }
 
 // ============================================================================
@@ -562,7 +665,7 @@ export function ShortcutCard({ config, ...stackProps }: ShortcutCardProps) {
             {...knobProps.borderRadius}
             data-nested-px={px}
           >
-            <Text {...knobProps.label} color={componentColors.text.secondary}>
+            <Text {...knobProps.label} color={knobProps.textAccentColor}>
               {config.count}
             </Text>
           </XStack>
@@ -610,7 +713,7 @@ export function ListCard({ config, headingLevel = 2, ...stackProps }: ListCardPr
               {item.label}
             </Text>
             {item.meta ? (
-              <Text {...knobProps.label} color={componentColors.text.muted}>
+              <Text {...knobProps.label} color={knobProps.textAccentColor}>
                 {item.meta}
               </Text>
             ) : null}