@growth-operations/ui-shared 1.26.1 → 1.26.2
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.
- package/package.json +1 -1
- package/src/home/HealthHero.jsx +22 -12
package/package.json
CHANGED
package/src/home/HealthHero.jsx
CHANGED
|
@@ -31,21 +31,31 @@ export function HealthHero({ appName, state }) {
|
|
|
31
31
|
const planFit = state.state?.plan_fit ?? state.plan_fit;
|
|
32
32
|
const onRightPlan =
|
|
33
33
|
health.level === "healthy" && planFit?.verdict === "right_plan";
|
|
34
|
+
const reasons = health.reasons ?? [];
|
|
35
|
+
// The reassurance rides in the TITLE, not the Alert body: HubSpot's Alert
|
|
36
|
+
// lays icon + title + children out side-by-side and the children column
|
|
37
|
+
// does NOT grow to fill the banner (Box flex="auto" didn't win — the body
|
|
38
|
+
// still wrapped narrow with half the banner empty, seen on the ATS Home
|
|
39
|
+
// hero 2026-10-14). The title slot grows with its content, so the line
|
|
40
|
+
// renders full-width on one line. The body is reserved for actual
|
|
41
|
+
// reasons (attention/critical), and omitted entirely when there are none.
|
|
42
|
+
const baseTitle = HEALTH_TITLE[health.level] ?? "Status";
|
|
43
|
+
const title = onRightPlan
|
|
44
|
+
? `${baseTitle} — and you're on the right plan`
|
|
45
|
+
: baseTitle;
|
|
34
46
|
return (
|
|
35
47
|
<Flex direction="column" gap="small">
|
|
36
48
|
{name && <Heading>{name}</Heading>}
|
|
37
|
-
<Alert
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
</Flex>
|
|
48
|
-
</Box>
|
|
49
|
+
<Alert title={title} variant={HEALTH_VARIANT[health.level] ?? "info"}>
|
|
50
|
+
{reasons.length > 0 && (
|
|
51
|
+
<Box flex="auto">
|
|
52
|
+
<Flex direction="column" gap="extra-small">
|
|
53
|
+
{reasons.map((r, i) => (
|
|
54
|
+
<Text key={i}>{r}</Text>
|
|
55
|
+
))}
|
|
56
|
+
</Flex>
|
|
57
|
+
</Box>
|
|
58
|
+
)}
|
|
49
59
|
</Alert>
|
|
50
60
|
</Flex>
|
|
51
61
|
);
|