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

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-ordered-list.css

@@ -0,0 +1,112 @@
+/**
+ * Seeds NarrativeOrderedList 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:
+ *   <div class="seeds-narrative-ordered-list">
+ *     <ol class="seeds-narrative-ordered-list-track">
+ *       <li class="seeds-narrative-ordered-list-item">…</li>
+ *     </ol>
+ *   </div>
+ */
+
+@layer components {
+
+/* Establishes the query container. The track inside reacts to this element's
+   inline size — a container query can only style descendants of the container,
+   never the container element itself. */
+.seeds-narrative-ordered-list {
+  container-type: inline-size;
+  box-sizing: border-box;
+  font-family: var(--font-family);
+}
+
+/* The list itself, and the default (stacked) layout. The horizontal modifier
+   only expands to a row once the container query below has room, so horizontal
+   collapses back to this stack when narrow. */
+.seeds-narrative-ordered-list-track {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-400); /* 16px */
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* An item row: the ordinal beside the body, on its own rounded surface. */
+.seeds-narrative-ordered-list-item {
+  display: flex;
+  gap: var(--space-450); /* 24px */
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--space-400) var(--space-450); /* 16px 24px */
+  border-radius: var(--radius-800); /* 12px */
+  background-color: var(--color-app-bg-base);
+}
+
+/* The ordinal (01, 02, …). No mono token exists yet, so fall back to a system
+   monospace stack — mirrors the value treatment in metric-highlight.css. */
+.seeds-narrative-ordered-list-number {
+  margin: 0;
+  flex-shrink: 0;
+  font-family: var(--font-family-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace);
+  font-size: var(--font-size-700); /* 32px */
+  line-height: var(--line-height-700); /* 40px */
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-headline);
+}
+
+/* Title + description + optional action, stacked. */
+.seeds-narrative-ordered-list-body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-200); /* 4px */
+  min-width: 0;
+}
+
+/* Title. 16px / 28px — the 28px line-height has no exact type token (the scale
+   skips from 24px to 32px), so the design value is kept verbatim. Same
+   rationale as narrative-summary.css. */
+.seeds-narrative-ordered-list-title {
+  margin: 0;
+  font-size: var(--font-size-300); /* 16px */
+  line-height: 28px; /* off-scale, see comment above */
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-body);
+}
+
+/* Description. 14px / 24px has no exact type token, so it is kept verbatim —
+   same rationale as the title above. */
+.seeds-narrative-ordered-list-description {
+  margin: 0;
+  font-size: 14px; /* off-scale, see title above */
+  line-height: 24px;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-body);
+}
+
+.seeds-narrative-ordered-list-action {
+  padding-top: var(--space-350); /* 12px */
+}
+
+/* Expand the horizontal variant to a row of equal columns 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, matching narrative-summary.css. */
+@container (min-width: 640px) {
+  .seeds-narrative-ordered-list-horizontal {
+    flex-direction: row;
+  }
+
+  .seeds-narrative-ordered-list-horizontal > .seeds-narrative-ordered-list-item {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+
+}

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;
+  }
+}
+
+}

package/src/pull-quote.css

@@ -2,20 +2,17 @@
  * Seeds PullQuote 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.
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css and
+ * ai-container.css imported for CSS variable definitions and surface styles.
  *
  * Usage:
- *   <figure class="seeds-pull-quote">…</figure>            // subtle (default)
- *   <figure class="seeds-pull-quote seeds-pull-quote-vivid">…</figure>
+ *   <figure class="seeds-pull-quote seeds-ai-container">…</figure>            // subtle (default)
+ *   <figure class="seeds-pull-quote seeds-ai-container seeds-ai-container-vivid seeds-pull-quote-vivid">…</figure>
  */
 
 @layer components {
 
 .seeds-pull-quote {
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -24,24 +21,6 @@
   /* 40px block / 48px inline — 48px is off the space scale, so derive it from
      two tokens (40 + 8) rather than hardcoding an off-scale value. */
   padding: var(--space-600) calc(var(--space-600) + var(--space-300));
-  border-radius: var(--radius-800);
-  box-shadow: var(--shadow-low);
-  font-family: var(--font-family);
-  /* Subtle (default): the 20% AI gradient tint composited over the base
-     surface. --color-gradient-ai-subtle is already translucent, so layering it
-     over the opaque base color produces the soft wash. */
-  background-color: var(--color-container-bg-base);
-  background-image: var(--color-gradient-ai-subtle);
-  color: var(--color-text-headline);
-}
-
-/* Vivid: the full-saturation AI gradient with white content. White has no
-   semantic Seeds token; it is part of the AI gradient treatment (mirrors the
-   raw brand hex used in --color-gradient-ai). */
-.seeds-pull-quote-vivid {
-  background-color: transparent;
-  background-image: var(--color-gradient-ai);
-  color: #fff;
 }
 
 /* The accented bar holding the quote and attribution. */