@sproutsocial/seeds-react-narrative-kit 0.2.0 → 0.3.0

package/src/Playground/Playground.stories.tsx

@@ -8,12 +8,29 @@ import NarrativeHeadlineRoll from "../NarrativeHeadline/NarrativeHeadlineRoll";
 import PullQuote from "../PullQuote/PullQuote";
 import MetricHighlight from "../MetricHighlight/MetricHighlight";
 import EyebrowToken from "../EyebrowToken/EyebrowToken";
+import NarrativeDivider from "../NarrativeDivider/NarrativeDivider";
+import NarrativeSummary from "../NarrativeSummary/NarrativeSummary";
+import Button from "@sproutsocial/seeds-react-button";
 import Text from "@sproutsocial/seeds-react-text";
+import { SparklineChart } from "@sproutsocial/seeds-react-data-viz/sparkline";
 import "../narrative-container.css";
 import "../narrative-headline.css";
 import "../pull-quote.css";
 import "../metric-highlight.css";
 import "../eyebrow-token.css";
+import "../narrative-divider.css";
+import "../narrative-summary.css";
+import "@sproutsocial/seeds-react-button/dist/button.css";
+import "@sproutsocial/seeds-react-data-viz/sparkline.css";
+
+const spark = (data: number[]) => (
+  <SparklineChart
+    variant="line"
+    description="Trend"
+    data={data}
+    className="h-full w-full"
+  />
+);
 
 /**
  * Narrative Kit — Playground (showcase story)
@@ -40,49 +57,82 @@ 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">
-			<span>
-      <EyebrowToken className="mb-300 inline-flex">May 31, 2026</EyebrowToken>
-      <NarrativeHeadline headingLevel={1}>
-				The social suite built for{" "}
-				<NarrativeHeadlineRoll
-					words={["marketers", "agencies", "enterprise teams", "founders"]}
-				/>
-			</NarrativeHeadline>
-      <Text.BodyCopy mt={400} display="block" width="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>
-
-
+      <span>
+        <EyebrowToken className="mb-300 inline-flex">May 31, 2026</EyebrowToken>
+        <NarrativeHeadline headingLevel={1}>
+          The social suite built for{" "}
+          <NarrativeHeadlineRoll
+            words={["marketers", "agencies", "enterprise teams", "founders"]}
+          />
+        </NarrativeHeadline>
+        <Text.BodyCopy mt={400} display="block" width="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 ------------------------------------------------------- */}
       <NarrativeContainer className="w-full">
-        <Grid columns={{ sm: 1, md: 1 }} gap={400}>
-					{/* 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%" }}
-							data={[8, 12, 9, 15, 13, 19]}
-						/>
-						<MetricHighlight
-							label="Engagement rate"
-							value="6.4%"
-							trend={{ direction: "up", value: "240%", "aria-label": "up 240%" }}
-							data={[3, 5, 4, 7, 6, 9]}
-						/>
-						<MetricHighlight
-							label="Response time"
-							value="2h"
-							trend={{ direction: "down", value: "12%", "aria-label": "down 12%" }}
-							data={[18, 16, 17, 13, 14, 10]}
-						/>
-					</Grid>
+        <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])}
+            />
+          </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 />
+
+          {/* 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."

package/src/PullQuote/PullQuote.stories.tsx

@@ -16,7 +16,9 @@ type Story = StoryObj<typeof meta>;
 
 const Attribution = () => (
   <>
-    <span aria-hidden className="text-400">🧵</span>
+    <span aria-hidden className="text-400">
+      🧵
+    </span>
     <span>Display Name</span>
   </>
 );

package/src/PullQuote/PullQuoteTypes.ts

@@ -1,7 +1,6 @@
 import type * as React from "react";
 
-export interface TypePullQuoteProps
-  extends React.HTMLAttributes<HTMLElement> {
+export interface TypePullQuoteProps extends React.HTMLAttributes<HTMLElement> {
   /** The quotation text, rendered emphasized inside the accented bar. */
   quote: React.ReactNode;
   /**

package/src/index.ts

@@ -19,10 +19,21 @@ export { PullQuote, type TypePullQuoteProps } from "./PullQuote";
 
 export { EyebrowToken, type TypeEyebrowTokenProps } from "./EyebrowToken";
 
+export {
+  NarrativeDivider,
+  type TypeNarrativeDividerProps,
+} from "./NarrativeDivider";
+
 export {
   MetricHighlight,
   type TypeMetricHighlightProps,
   type TypeMetricHighlightTrend,
 } from "./MetricHighlight";
 
+export {
+  NarrativeSummary,
+  type TypeNarrativeSummaryProps,
+  type TypeNarrativeSummaryLayout,
+} from "./NarrativeSummary";
+
 export type { TypeNarrativeTone } from "./_internal/types";

package/src/metric-highlight.css

@@ -131,47 +131,37 @@
   stroke-width: 1.5;
 }
 
-/* Sparkline — a single normalized polyline stretched to fit. The non-scaling
-   stroke keeps a crisp 2px line at any aspect ratio. */
-.seeds-metric-highlight-spark {
-  display: block;
+/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
+   stroke/background styling, so the injected chart controls its own look. Heights
+   are explicit (never percentage/stretch) so a Highcharts chart always measures a
+   concrete container instead of falling back to its 400px default. */
+.seeds-metric-highlight-chart {
+  box-sizing: border-box;
   flex: 0 0 auto;
-  /* Matches the design's Data Viz / Categorical 01 line color (#0b968f). */
-  stroke: var(--color-teal-700);
-}
-
-/* Downward trend: the red analog at the same scale step (#db3e3e). */
-.seeds-metric-highlight-spark-negative {
-  stroke: var(--color-red-700);
-}
-
-.seeds-metric-highlight-spark path {
-  stroke: inherit;
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
+  align-self: center;
+  /* Center the injected chart as a flex item — an inline/inline-block child
+     (e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
+     descender space below it, reading as vertically off-center in the slot. */
+  display: flex;
+  align-items: center;
 }
 
-/* Horizontal: a compact fixed-width chart beside the metric, matched to the
-   metric block's height. */
-.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+.seeds-metric-highlight:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
   width: 104px;
-  align-self: stretch;
-  min-height: 40px;
+  height: 48px;
 }
 
-.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-spark {
+.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical) .seeds-metric-highlight-chart {
   width: 88px;
   height: 40px;
-  align-self: center;
 }
 
-/* Vertical: a full-width chart stacked beneath the metric. */
-.seeds-metric-highlight-vertical .seeds-metric-highlight-spark {
+.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
   width: 100%;
   height: 96px;
 }
 
-.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-spark {
+.seeds-metric-highlight-vertical.seeds-metric-highlight-small .seeds-metric-highlight-chart {
   height: 56px;
 }
 

package/src/narrative-divider.css

@@ -0,0 +1,27 @@
+/**
+ * Seeds NarrativeDivider 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:
+ *   <hr class="seeds-narrative-divider" />
+ */
+
+@layer components {
+
+/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
+   and a beveled border, so reset those and draw the line with a single
+   border-top using the container-border-base token (#dee1e1), which also
+   tracks dark mode. */
+.seeds-narrative-divider {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0;
+  margin: 0;
+  border: 0;
+  border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
+}
+
+}

package/src/narrative-headline.css

@@ -27,6 +27,13 @@
   color: var(--color-text-headline);
 }
 
+/* Compact size for denser layouts (e.g. NarrativeSummary). Weight, letter
+   spacing, and color are inherited from the base class. */
+.seeds-narrative-headline-small {
+  font-size: var(--font-size-600); /* 24px */
+  line-height: var(--line-height-600); /* 32px */
+}
+
 /* Static gradient accent for a span of headline text ("highlighted word").
    Paints the AI brand gradient onto the glyphs via background-clip. */
 .seeds-narrative-headline-highlight {

package/src/narrative-summary.css

@@ -0,0 +1,126 @@
+/**
+ * Seeds NarrativeSummary 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. Also relies on
+ * narrative-headline.css (headline) and eyebrow-token.css (eyebrow).
+ *
+ * The layout is a CSS grid driven by a container query on the root, so the
+ * columns collapse based on the width the component is given, not the viewport.
+ *
+ * Usage:
+ *   <div class="seeds-narrative-summary">
+ *     <div class="seeds-narrative-summary-grid">…</div>
+ *   </div>
+ */
+
+@layer components {
+
+/* Establishes the query container. The grid inside reacts to this element's
+   inline size. */
+.seeds-narrative-summary {
+  container-type: inline-size;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+/* Stacked single column by default (narrow). The container query below expands
+   it once there is room. */
+.seeds-narrative-summary-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-450); /* 24px */
+}
+
+/* The lead column: eyebrow, headline, optional action. align-items:flex-start
+   keeps the eyebrow pill and the action sized to their content — without it the
+   column's default stretch would blow the eyebrow out to full width. The
+   headline still fills and wraps because its text is wider than the track. */
+.seeds-narrative-summary-lead {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-300); /* 8px */
+  min-width: 0;
+}
+
+/* The headline area grows so the action anchors toward the bottom of the lead
+   column when the neighboring columns are taller. align-self:stretch fills the
+   track width (the lead column pins other items to flex-start) so the headline
+   wraps at the column edge regardless of its length. */
+.seeds-narrative-summary-headline {
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+/* In three-column mode the content wrapper is transparent to the grid, so its
+   two sections become grid items in their own columns. In two-column mode the
+   container query below turns it into a real, stacking grid item. */
+.seeds-narrative-summary-content {
+  display: contents;
+}
+
+.seeds-narrative-summary-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-300); /* 8px */
+  min-width: 0;
+}
+
+/* Section label. 14px / 24px has no exact type token (the scale skips from
+   13px to 16px), so the design value is kept verbatim — same rationale as
+   eyebrow-token.css. All other values use tokens. */
+.seeds-narrative-summary-label {
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline);
+}
+
+.seeds-narrative-summary-text {
+  margin: 0;
+  font-size: 14px; /* off-scale, see label above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-summary-list {
+  margin: 0;
+  padding-inline-start: 21px;
+  list-style: disc;
+  font-size: 14px; /* off-scale, see label above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-summary-list li {
+  margin: 0;
+}
+
+/* Expand to the multi-column layout once the component is wide enough. The
+   threshold is on the component's own width (container query), so a narrow card
+   on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
+@container (min-width: 640px) {
+  .seeds-narrative-summary-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  /* 1/3 lead + 2/3 content. */
+  .seeds-narrative-summary-two-column {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  /* The content wrapper becomes a real grid item that stacks its two sections. */
+  .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-450); /* 24px */
+    min-width: 0;
+  }
+}
+
+}