@multiplatform.one/frappe-ui 7.34.4 → 7.35.0

package/src/record/RecordHero.tsx

@@ -1,76 +1,62 @@
-import { Skeleton, Text, XStack, YStack, type YStackProps } from "@multiplatform.one/components";
-import { Progress } from "@multiplatform.one/forms";
+import {
+  Skeleton,
+  TamaguiSizableText,
+  Text,
+  XStack,
+  YStack,
+  type YStackProps,
+} from "@multiplatform.one/components";
 import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 /**
  * The record hero's geometry, shared by the loaded hero and its skeleton so
- * the row does not jump when the record lands (LC-20).
+ * the page does not jump when the record lands (LC-20).
  */
-export const recordHeroArtBasis = 380;
-export const recordHeroArtMax = 480;
-export const recordHeroIdentityBasis = 320;
+export const recordHeroStageHeight = 250;
+export const recordHeroArtHeight = 220;
 
 export interface RecordHeroFrameProps extends YStackProps {
-  /** A theme hue painting the stage from its ramp. */
-  tint?: string;
+  /** Theme hues painting the stage from their ramps: one fills it, two split it. */
+  tints?: readonly (string | undefined)[];
   children: ReactNode;
 }
 
-export function RecordHeroFrame({ tint, children, ...rest }: RecordHeroFrameProps) {
+/** The full-bleed stage under the art, tinted by the record's facet. */
+export function RecordHeroFrame({ tints = [], children, ...rest }: RecordHeroFrameProps) {
   const { knobProps } = useResolvedKnobs();
+  const [first, second] = tints;
   return (
     <YStack
-      {...knobProps.borderRadius}
-      {...knobProps.panelPadding}
-      backgroundColor={tint ? (`$${tint}2` as never) : "$color3"}
       width="100%"
+      minHeight={sizeRecipeEscape(recordHeroStageHeight, "hero stage: the design's art band")}
+      paddingTop={knobProps.gap.gap}
+      backgroundColor={second ? "transparent" : ((first ? `$${first}3` : "$color3") as never)}
+      overflow="hidden"
+      position="relative"
+      data-record-art-band=""
       {...rest}
     >
+      {second ? (
+        <XStack fullscreen pointerEvents="none">
+          <YStack flex={1} backgroundColor={`$${first ?? "gray"}3` as never} />
+          <YStack flex={1} backgroundColor={`$${second}3` as never} />
+        </XStack>
+      ) : null}
       {children}
     </YStack>
   );
 }
 
-export function RecordHeroRow({ children }: { children: ReactNode }) {
-  const { knobProps } = useResolvedKnobs();
-  return (
-    <XStack {...knobProps.gapLg} flexWrap="wrap" alignItems="flex-start">
-      {children}
-    </XStack>
-  );
-}
-
-export function RecordHeroArtColumn({ children, ...rest }: YStackProps & { children: ReactNode }) {
-  const { knobProps } = useResolvedKnobs();
-  return (
-    <YStack
-      flexGrow={1}
-      flexBasis={recordHeroArtBasis}
-      maxWidth={recordHeroArtMax}
-      minWidth={0}
-      {...knobProps.gap}
-      {...rest}
-    >
-      {children}
-    </YStack>
-  );
-}
-
+/** The identity block under the stage: code, badges, title, subtitle and facts. */
 export function RecordHeroIdentityColumn({
   children,
   ...rest
 }: YStackProps & { children: ReactNode }) {
   const { knobProps } = useResolvedKnobs();
   return (
-    <YStack
-      flexGrow={999}
-      flexBasis={recordHeroIdentityBasis}
-      minWidth={0}
-      {...knobProps.gap}
-      {...rest}
-    >
+    <YStack {...knobProps.panelPadding} paddingBottom={0} gap="$1" minWidth={0} {...rest}>
       {children}
     </YStack>
   );
@@ -80,42 +66,33 @@ export interface RecordVitalTile {
   id: string;
   label: string;
   value: string;
-  /** Fill of a bar under the value, 0 to 100. */
-  percent?: number;
 }
 
-/** Nested fact tiles under the title: compact density so they recede. */
+/** The record's facts as plain label-over-value columns under the title. */
 export function RecordVitals({ tiles }: { tiles: readonly RecordVitalTile[] }) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   if (tiles.length === 0) return null;
   return (
-    <XStack {...knobProps.gap} flexWrap="wrap">
+    <XStack
+      columnGap={knobProps.gapLg.gap}
+      rowGap={knobProps.gap.gap}
+      flexWrap="wrap"
+      paddingTop={knobProps.gap.gap}
+      data-record-metrics=""
+    >
       {tiles.map((tile) => (
         <YStack
           key={tile.id}
-          {...knobProps.borderRadius}
-          {...knobProps.panelPadding}
-          backgroundColor="$color2"
-          borderWidth={0}
-          flexGrow={1}
-          flexBasis={140}
           gap="$1"
+          testID={`record-vital-${tile.id}`}
+          data-record-metric={tile.id}
         >
-          <Text {...knobProps.label} {...knobProps.body} color="$color10">
+          <Text {...knobProps.label} color="$color11" numberOfLines={1}>
             {tile.label}
           </Text>
-          <Text fontSize="$5" fontWeight="700">
+          <TamaguiSizableText size="$6" {...knobProps.heading} color="$color" numberOfLines={1}>
             {tile.value}
-          </Text>
-          {tile.percent === undefined ? null : (
-            <Progress
-              value={tile.percent}
-              max={100}
-              size="$2"
-              intent="accent"
-              progressProps={{ "aria-label": tile.label }}
-            />
-          )}
+          </TamaguiSizableText>
         </YStack>
       ))}
     </XStack>
@@ -125,61 +102,52 @@ export function RecordVitals({ tiles }: { tiles: readonly RecordVitalTile[] }) {
 const bone = (px: number) =>
   sizeRecipeEscape(px, "loading bones sized to the record page they stand in for");
 
-/** The breadcrumb line's loading twin. */
-export function RecordBreadcrumbBone() {
-  return (
-    <XStack alignItems="center" minHeight={bone(20)}>
-      <Skeleton width={bone(180)} height={bone(14)} />
-    </XStack>
-  );
-}
-
 /** The hero and tab strip's loading twin, on the same geometry. */
 export function RecordSkeleton({ testID }: { testID?: string }) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   return (
-    <YStack
-      {...knobProps.gapLg}
-      testID={testID}
-      data-async-skeleton="record"
-      aria-busy
-      aria-label={t("Loading")}
-    >
-      <RecordHeroFrame>
-        <RecordHeroRow>
-          <RecordHeroArtColumn {...{ "data-skeleton-part": "art" }}>
-            <Skeleton variant="rounded" width="100%" aspectRatio={1} />
-          </RecordHeroArtColumn>
-          <RecordHeroIdentityColumn {...{ "data-skeleton-part": "identity" }}>
-            <Skeleton width={bone(72)} height={bone(16)} />
-            <Skeleton width={bone(280)} height={bone(56)} />
-            <Skeleton width={bone(160)} height={bone(18)} />
-            <XStack gap="$1.5">
-              <Skeleton variant="rounded" width={bone(64)} height={bone(22)} />
-              <Skeleton variant="rounded" width={bone(64)} height={bone(22)} />
-            </XStack>
-            <XStack {...knobProps.gap} flexWrap="wrap">
-              {[0, 1, 2].map((tile) => (
-                <Skeleton
-                  key={tile}
-                  variant="rounded"
-                  flexGrow={1}
-                  flexBasis={140}
-                  height={bone(64)}
-                />
-              ))}
-            </XStack>
-          </RecordHeroIdentityColumn>
-        </RecordHeroRow>
+    <YStack testID={testID} data-async-skeleton="record" aria-busy aria-label={t("Loading")}>
+      <RecordHeroFrame {...{ "data-skeleton-part": "art" }}>
+        <YStack alignItems="center">
+          <Skeleton
+            variant="rounded"
+            width={bone(recordHeroArtHeight)}
+            height={bone(recordHeroArtHeight)}
+          />
+        </YStack>
       </RecordHeroFrame>
-      <YStack {...knobProps.gap}>
-        <XStack {...knobProps.gap} {...{ "data-skeleton-part": "tabs" }}>
-          {[104, 88, 96].map((width, tab) => (
-            <Skeleton key={tab} variant="rounded" width={bone(width)} height={bone(44)} />
+      <RecordHeroIdentityColumn {...{ "data-skeleton-part": "identity" }}>
+        <XStack gap="$2">
+          <Skeleton width={bone(40)} height={bone(20)} />
+          <Skeleton variant="rounded" width={bone(56)} height={bone(22)} />
+          <Skeleton variant="rounded" width={bone(56)} height={bone(22)} />
+        </XStack>
+        <Skeleton width={bone(220)} height={bone(40)} />
+        <Skeleton width={bone(140)} height={bone(18)} />
+        <XStack columnGap={knobProps.gapLg.gap} paddingTop={knobProps.gap.gap}>
+          {[0, 1, 2].map((tile) => (
+            <YStack key={tile} gap="$1">
+              <Skeleton width={bone(56)} height={bone(14)} />
+              <Skeleton width={bone(48)} height={bone(22)} />
+            </YStack>
           ))}
         </XStack>
-        <Skeleton.Text lines={4} />
+      </RecordHeroIdentityColumn>
+      <YStack {...knobProps.gapLg} paddingTop={knobProps.panelPadding.padding}>
+        <XStack
+          {...knobProps.gapLg}
+          {...knobProps.panelPadding}
+          paddingVertical={0}
+          {...{ "data-skeleton-part": "tabs" }}
+        >
+          {[96, 64, 88].map((width, tab) => (
+            <Skeleton key={tab} width={bone(width)} height={bone(40)} />
+          ))}
+        </XStack>
+        <YStack {...knobProps.panelPadding} paddingVertical={0}>
+          <Skeleton.Text lines={4} />
+        </YStack>
       </YStack>
     </YStack>
   );