@sproutsocial/seeds-react-narrative-kit 0.5.1 → 0.6.0

package/src/Playground/Playground.stories.tsx

@@ -9,6 +9,7 @@ import PullQuote from "../PullQuote/PullQuote";
 import MetricHighlight from "../MetricHighlight/MetricHighlight";
 import EyebrowToken from "../EyebrowToken/EyebrowToken";
 import NarrativeDivider from "../NarrativeDivider/NarrativeDivider";
+import NarrativeSection from "../NarrativeSection/NarrativeSection";
 import NarrativeSummary from "../NarrativeSummary/NarrativeSummary";
 import NarrativeOrderedList from "../NarrativeOrderedList/NarrativeOrderedList";
 import NarrativeDataCallout from "../NarrativeDataCallout/NarrativeDataCallout";
@@ -25,12 +26,13 @@ import "../pull-quote.css";
 import "../metric-highlight.css";
 import "../eyebrow-token.css";
 import "../narrative-divider.css";
+import "../narrative-section.css";
 import "../narrative-summary.css";
 import "../narrative-ordered-list.css";
 import "../narrative-data-callout.css";
+import "../narrative-attribution.css";
 import "../narrative-social-media-card.css";
 import "@sproutsocial/seeds-react-button/dist/button.css";
-import "@sproutsocial/seeds-react-data-viz/sparkline.css";
 
 const spark = (data: number[], variant: "line" | "bar" = "line") => (
   <SparklineChart
@@ -65,7 +67,7 @@ const Attribution = ({ name }: { name: string }) => (
 
 const Brief = () => (
   <div className="box-border min-h-screen p-600 bg-app-bg-base">
-    <div className="max-w-280 mx-auto grid gap-500">
+    <div className="mx-auto grid gap-500">
       <span>
         <EyebrowToken className="mb-300 inline-flex">May 31, 2026</EyebrowToken>
         <NarrativeHeadline headingLevel={1}>
@@ -74,218 +76,235 @@ const Brief = () => (
             words={["marketers", "agencies", "enterprise teams", "founders"]}
           />
         </NarrativeHeadline>
-        <Text.BodyCopy mt={400} display="block" width="50ch">
+        <Text.BodyCopy mt={400} display="block" maxWidth="50ch">
           Empowering cross-functional stakeholders to drive engagement at scale
           and accelerate time-to-value through data-driven content strategies
           aligned with your brand's north-star KPIs.
         </Text.BodyCopy>
       </span>
 
-      {/* Pull quotes ------------------------------------------------------- */}
+      {/* Sectioned brief body — each block is grouped under a titled
+          NarrativeSection instead of being separated by dividers. */}
       <NarrativeContainer className="w-full">
         <Grid columns={{ sm: 1, md: 1 }} gap={500}>
           {/* Metric highlights — a row of 3 -------------------------------- */}
-          <Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
-            <MetricHighlight
-              label="Impressions"
-              value="1.2M"
-              trend={{ direction: "up", value: "18%", "aria-label": "up 18%" }}
-              sparkline={spark([8, 12, 9, 15, 13, 19])}
-            />
-            <MetricHighlight
-              label="Engagement rate"
-              value="6.4%"
-              trend={{
-                direction: "up",
-                value: "240%",
-                "aria-label": "up 240%",
-              }}
-              sparkline={spark([3, 5, 4, 7, 6, 9])}
-            />
-            <MetricHighlight
-              label="Response time"
-              value="2h"
-              trend={{
-                direction: "down",
-                value: "12%",
-                "aria-label": "down 12%",
-              }}
-              sparkline={spark([18, 16, 17, 13, 14, 10], "bar")}
-            />
-          </Grid>
-
-          {/* Divider — separates the metric row from the narrative below --- */}
-          <NarrativeDivider />
-
-          {/* Narrative summary (2-column) — between the pull quotes -------- */}
-          <NarrativeSummary
-            layout="two-column"
-            eyebrow="June 10th"
-            headline="Engagement climbed across every owned channel this month"
-            summary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec odio leo, gravida vitae sodales vitae, tempor eget ligula. Vestibulum nec enim eget mi placerat finibus. Donec tempor tincidunt elit."
-            keyThemes={[
-              "Reply threads outperformed paid pushes for the week.",
-              "Average response time dropped nearly in half.",
-              "Enterprise segment drove the largest share of new engagement.",
-            ]}
-          />
-
-          <PullQuote
-            quote="The reply thread on the 18th outperformed our entire paid push for the week."
-            attribution={<Attribution name="Jordan Lee" />}
-          />
-
-          <NarrativeDivider />
-
-          <NarrativeOrderedList
-            items={[
-              {
-                title: "Double down on reply threads",
-                description:
-                  "Shift a slice of paid budget toward the organic reply threads that outperformed this week.",
-                action: (
-                  <Button appearance="ai-secondary">Suggested Action</Button>
-                ),
-              },
-              {
-                title: "Protect response time at peak",
-                description:
-                  "Add coverage during the two peak windows to hold response time under two hours.",
-                action: (
-                  <Button appearance="ai-secondary">Suggested Action</Button>
-                ),
-              },
-              {
-                title: "Lean into the enterprise segment",
-                description:
-                  "Build a follow-up sequence for the enterprise cohort that drove the most new engagement.",
-                action: (
-                  <Button appearance="ai-secondary">Suggested Action</Button>
-                ),
-              },
-            ]}
-          />
-
-          <NarrativeDivider />
-
-          {/* Narrative summary (3-column) — below the pull quotes --------- */}
-          <NarrativeSummary
-            eyebrow="Quarterly review"
-            headline="Three themes defined the quarter for the brand"
-            action={<Button appearance="primary">View report</Button>}
-            summary="Praesent pretium libero vitae arcu blandit pellentesque. Aenean fermentum, nisi eu blandit placerat, ligula ligula euismod ante, id semper nibh diam ac ipsum."
-            keyThemes={[
-              "Owned channels outpaced paid across every region.",
-              "Response time held under two hours through peak weeks.",
-              "Sentiment trended positive after the product launch.",
-            ]}
-          />
-
-          <PullQuote
-            appearance="vivid"
-            quote="This rollout cut our average response time nearly in half."
-            attribution={<Attribution name="Priya Nair" />}
-          />
+          <NarrativeSection sectionTitle="Performance at a glance">
+            <Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
+              <MetricHighlight
+                label="Impressions"
+                value="1.2M"
+                trend={{
+                  direction: "up",
+                  value: "18%",
+                  "aria-label": "up 18%",
+                }}
+                sparkline={spark([8, 12, 9, 15, 13, 19])}
+              />
+              <MetricHighlight
+                label="Engagement rate"
+                value="6.4%"
+                trend={{
+                  direction: "up",
+                  value: "240%",
+                  "aria-label": "up 240%",
+                }}
+                sparkline={spark([3, 5, 4, 7, 6, 9])}
+              />
+              <MetricHighlight
+                label="Response time"
+                value="2h"
+                trend={{
+                  direction: "down",
+                  value: "12%",
+                  "aria-label": "down 12%",
+                }}
+                sparkline={spark([18, 16, 17, 13, 14, 10], "bar")}
+              />
+            </Grid>
+          </NarrativeSection>
 
           <NarrativeDivider />
 
-          {/* Data callout — a data-viz visual paired with narrative copy ---- */}
-          <NarrativeDataCallout
-            visual={
-              <DonutChart
-                description="Goal completion: 80% complete"
-                data={[
-                  { name: "Complete", value: 80 },
-                  { name: "Remaining", value: 20 },
-                ]}
-              />
-            }
-          >
-            We're 80% of the way to closing out this quarter's goal — a clear
-            signal that the cross-functional alignment we drove upstream is now
-            compounding into measurable downstream velocity. With the remaining
-            20% squarely in view, we're doubling down on the workstreams that
-            move the needle and sunsetting the low-leverage noise to land this
-            initiative ahead of the curve.
-          </NarrativeDataCallout>
+          {/* Narrative summary (2-column) + supporting pull quote ---------- */}
+          <NarrativeSection sectionTitle="What's happening">
+            <NarrativeSummary
+              layout="two-column"
+              eyebrow="June 10th"
+              headline="Engagement climbed across every owned channel this month"
+              summary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec odio leo, gravida vitae sodales vitae, tempor eget ligula. Vestibulum nec enim eget mi placerat finibus. Donec tempor tincidunt elit."
+              keyThemes={[
+                "Reply threads outperformed paid pushes for the week.",
+                "Average response time dropped nearly in half.",
+                "Enterprise segment drove the largest share of new engagement.",
+              ]}
+            />
+            <PullQuote
+              quote="The reply thread on the 18th outperformed our entire paid push for the week."
+              attribution={<Attribution name="Jordan Lee" />}
+            />
+          </NarrativeSection>
 
           <NarrativeDivider />
 
-          {/* Social media cards — a row of 3 sample posts -------------------- */}
-          <Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
-            <NarrativeSocialMediaCard
-              avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix"
-              avatarAlt="Sprout Social avatar"
-              displayName="Sprout Social"
-              socialIcon={<PartnerLogo partnerName="twitter" size="small" />}
-              text="Just launched our new product! Check it out and let us know what you think."
-              meta={[
+          {/* Recommended actions ------------------------------------------- */}
+          <NarrativeSection sectionTitle="Recommended actions">
+            <NarrativeOrderedList
+              items={[
                 {
-                  icon: <Icon name="reply-outline" />,
-                  value: 12,
-                  label: "Replies",
+                  title: "Double down on reply threads",
+                  description:
+                    "Shift a slice of paid budget toward the organic reply threads that outperformed this week.",
+                  action: (
+                    <Button appearance="ai-secondary">Suggested Action</Button>
+                  ),
                 },
                 {
-                  icon: <Icon name="heart-outline" />,
-                  value: 128,
-                  label: "Likes",
+                  title: "Protect response time at peak",
+                  description:
+                    "Add coverage during the two peak windows to hold response time under two hours.",
+                  action: (
+                    <Button appearance="ai-secondary">Suggested Action</Button>
+                  ),
                 },
                 {
-                  icon: <Icon name="repost-outline" />,
-                  value: 42,
-                  label: "Reposts",
+                  title: "Lean into the enterprise segment",
+                  description:
+                    "Build a follow-up sequence for the enterprise cohort that drove the most new engagement.",
+                  action: (
+                    <Button appearance="ai-secondary">Suggested Action</Button>
+                  ),
                 },
               ]}
             />
-            <NarrativeSocialMediaCard
-              avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Jordan"
-              avatarAlt="Marketing Team avatar"
-              displayName="Marketing Team"
-              socialIcon={<PartnerLogo partnerName="linkedin" size="small" />}
-              text="Our most viral post ever! Thanks for all the engagement. The community response has been incredible and we're excited to keep the momentum going."
-              meta={[
-                {
-                  icon: <Icon name="reply-outline" />,
-                  value: 45,
-                  label: "Comments",
-                },
-                {
-                  icon: <Icon name="heart-outline" />,
-                  value: 892,
-                  label: "Likes",
-                },
-                {
-                  icon: <Icon name="repost-outline" />,
-                  value: 156,
-                  label: "Shares",
-                },
+          </NarrativeSection>
+
+          <NarrativeDivider />
+
+          {/* Narrative summary (3-column) + supporting pull quote ---------- */}
+          <NarrativeSection sectionTitle="The quarter in review">
+            <NarrativeSummary
+              eyebrow="Quarterly review"
+              headline="Three themes defined the quarter for the brand"
+              action={<Button appearance="primary">View report</Button>}
+              summary="Praesent pretium libero vitae arcu blandit pellentesque. Aenean fermentum, nisi eu blandit placerat, ligula ligula euismod ante, id semper nibh diam ac ipsum."
+              keyThemes={[
+                "Owned channels outpaced paid across every region.",
+                "Response time held under two hours through peak weeks.",
+                "Sentiment trended positive after the product launch.",
               ]}
             />
-            <NarrativeSocialMediaCard
-              avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Alex"
-              avatarAlt="Brand Studio avatar"
-              displayName="Brand Studio"
-              socialIcon={<PartnerLogo partnerName="instagram" size="small" />}
-              text="Behind the scenes of today's campaign launch. Swipe to see the creative process!"
-              meta={[
-                {
-                  icon: <Icon name="reply-outline" />,
-                  value: 89,
-                  label: "Comments",
-                },
-                {
-                  icon: <Icon name="heart-outline" />,
-                  value: 1240,
-                  label: "Likes",
-                },
-                {
-                  icon: <Icon name="repost-outline" />,
-                  value: 203,
-                  label: "Shares",
-                },
-              ]}
+            <PullQuote
+              appearance="vivid"
+              quote="This rollout cut our average response time nearly in half."
+              attribution={<Attribution name="Priya Nair" />}
             />
-          </Grid>
+          </NarrativeSection>
+
+          <NarrativeDivider />
+
+          {/* Data callout — a data-viz visual paired with narrative copy ---- */}
+          <NarrativeSection sectionTitle="Goal progress">
+            <NarrativeDataCallout
+              visual={
+                <DonutChart
+                  description="Goal completion: 80% complete"
+                  data={[
+                    { name: "Complete", value: 80 },
+                    { name: "Remaining", value: 20 },
+                  ]}
+                />
+              }
+            >
+              We're 80% of the way to closing out this quarter's goal — a clear
+              signal that the cross-functional alignment we drove upstream is
+              now compounding into measurable downstream velocity. With the
+              remaining 20% squarely in view, we're doubling down on the
+              workstreams that move the needle and sunsetting the low-leverage
+              noise to land this initiative ahead of the curve.
+            </NarrativeDataCallout>
+          </NarrativeSection>
+
+          <NarrativeDivider />
+
+          {/* Social media cards — a row of 3 sample posts -------------------- */}
+          <NarrativeSection sectionTitle="From the community">
+            <Grid columns={{ sm: 1, md: 2, lg: 3 }} gap={400}>
+              <NarrativeSocialMediaCard
+                avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix"
+                avatarAlt="Sprout Social avatar"
+                displayName="Sprout Social"
+                socialIcon={<PartnerLogo partnerName="twitter" size="small" />}
+                text="Just launched our new product! Check it out and let us know what you think."
+                meta={[
+                  {
+                    icon: <Icon name="reply-outline" />,
+                    value: 12,
+                    label: "Replies",
+                  },
+                  {
+                    icon: <Icon name="heart-outline" />,
+                    value: 128,
+                    label: "Likes",
+                  },
+                  {
+                    icon: <Icon name="repost-outline" />,
+                    value: 42,
+                    label: "Reposts",
+                  },
+                ]}
+              />
+              <NarrativeSocialMediaCard
+                avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Jordan"
+                avatarAlt="Marketing Team avatar"
+                displayName="Marketing Team"
+                socialIcon={<PartnerLogo partnerName="linkedin" size="small" />}
+                text="Our most viral post ever! Thanks for all the engagement. The community response has been incredible and we're excited to keep the momentum going."
+                meta={[
+                  {
+                    icon: <Icon name="reply-outline" />,
+                    value: 45,
+                    label: "Comments",
+                  },
+                  {
+                    icon: <Icon name="heart-outline" />,
+                    value: 892,
+                    label: "Likes",
+                  },
+                  {
+                    icon: <Icon name="repost-outline" />,
+                    value: 156,
+                    label: "Shares",
+                  },
+                ]}
+              />
+              <NarrativeSocialMediaCard
+                avatar="https://api.dicebear.com/7.x/avataaars/svg?seed=Alex"
+                avatarAlt="Brand Studio avatar"
+                displayName="Brand Studio"
+                socialIcon={
+                  <PartnerLogo partnerName="instagram" size="small" />
+                }
+                text="Behind the scenes of today's campaign launch. Swipe to see the creative process!"
+                meta={[
+                  {
+                    icon: <Icon name="reply-outline" />,
+                    value: 89,
+                    label: "Comments",
+                  },
+                  {
+                    icon: <Icon name="heart-outline" />,
+                    value: 1240,
+                    label: "Likes",
+                  },
+                  {
+                    icon: <Icon name="repost-outline" />,
+                    value: 203,
+                    label: "Shares",
+                  },
+                ]}
+              />
+            </Grid>
+          </NarrativeSection>
         </Grid>
       </NarrativeContainer>
 

package/src/index.ts

@@ -61,4 +61,10 @@ export {
   type TypeNarrativeAttributionProps,
 } from "./NarrativeAttribution";
 
+export {
+  NarrativeSection,
+  type TypeNarrativeSectionProps,
+  type TypeNarrativeSectionHeadingLevel,
+} from "./NarrativeSection";
+
 export type { TypeNarrativeTone } from "./_internal/types";

package/src/metric-highlight.css

@@ -17,6 +17,11 @@
 .seeds-metric-highlight {
   box-sizing: border-box;
   display: flex;
+  /* Wrap the fixed-width chart onto its own line when the metric block + chart
+     can't sit side by side (narrow cards / mobile). The metric block claims its
+     min-content width below, so a cramped row drops the chart down rather than
+     overflowing the card and getting clipped by the container. */
+  flex-wrap: wrap;
   align-items: flex-start;
   gap: var(--space-350); /* 12px */
   border-radius: var(--radius-800); /* 12px */
@@ -43,8 +48,11 @@
   flex-direction: column;
   align-items: flex-start;
   gap: var(--space-200); /* 4px */
-  flex: 1 0 0;
-  min-width: 0;
+  /* Grow to fill the row, but never shrink below the metric's own content
+     (the nowrap value + trend pill). That min-content floor is what forces the
+     chart to wrap below on narrow cards instead of the row overflowing. */
+  flex: 1 1 auto;
+  min-width: min-content;
 }
 
 .seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
@@ -76,6 +84,7 @@
 
 .seeds-metric-highlight-value-row {
   display: flex;
+  flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
   align-items: center;
   gap: var(--space-300); /* 8px */
 }

package/src/narrative-container.css

@@ -25,6 +25,24 @@
   font-family: var(--font-family);
 }
 
+/* Grid and flex items default to `min-width: auto`, so they never shrink below
+   their own min-content. A wide row of widgets (a metric grid, a card grid) then
+   forces its column wider than the padded surface — and since the container clips
+   with overflow:hidden, the excess is cut off at the edge, eating the right-hand
+   padding, and the whole layout can't reflow down to mobile widths. Letting the
+   container and its layout descendants shrink to zero lets the grids collapse to
+   their fair 1fr share and reflow within the padding, so the padding stays
+   consistent at every size.
+
+   Wrapped in :where() so the whole rule carries ZERO specificity — it is only a
+   default. Any component that needs a real floor (e.g. the data callout's 270px
+   donut slot) sets its own min-width via a plain class and always wins, instead
+   of racing this rule on source order. */
+:where(.seeds-narrative-container),
+:where(.seeds-narrative-container *) {
+  min-width: 0;
+}
+
 /* Decorative inner gradient border anchored to the top-left corner.
    A masked ::before so the gradient renders as a uniform-width ring that follows
    border-radius and never tints the content. The radial ellipse fades to

package/src/narrative-section.css

@@ -0,0 +1,46 @@
+/**
+ * Seeds NarrativeSection component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <section class="seeds-narrative-section">
+ *     <h2 class="seeds-narrative-section-title">What's Happening</h2>
+ *     <div class="seeds-narrative-section-content">...</div>
+ *   </section>
+ */
+
+@layer components {
+
+/* The wrapper stacks the title above the content with a small gap. It carries
+   no surface of its own — it's meant to sit inside a NarrativeContainer. */
+.seeds-narrative-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-400); /* 16px — title to content */
+}
+
+/* The content slot stacks the section's widgets with the same 32px rhythm a
+   single-column grid (gap={500}) would give them, so multiple primitives inside
+   one section are spaced exactly as they are between sections. */
+.seeds-narrative-section-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-500); /* 32px — between widgets */
+}
+
+/* The section title: bold 14px/24px in the headline color token (#273333,
+   which also tracks dark mode). Matches the summary-label recipe used across
+   the kit. The heading element ships with user-agent margins, so reset them. */
+.seeds-narrative-section-title {
+  margin: 0;
+  font-family: var(--font-family);
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline); /* #273333 */
+}
+
+}

package/src/narrative-social-media-card.css

@@ -16,13 +16,16 @@
 @layer components {
 
 /* Main card container — gray background with rounded corners and padding.
-   Uses Seeds tokens for spacing, colors, and radius to match the design system. */
+   Uses Seeds tokens for spacing, colors, and radius to match the design system.
+   Fills the width it is given (e.g. a grid column) and stretches its content to
+   match, mirroring the horizontal NarrativeOrderedList — so a row of cards grows
+   and resizes together instead of being pinned to a fixed 320px. */
 .seeds-narrative-social-media-card {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  max-width: 320px;
+  align-items: stretch;
+  width: 100%;
   padding: var(--space-450); /* 24px */
   border-radius: var(--radius-500); /* 6px */
   background-color: var(--color-app-bg-base);