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

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.
Files changed (50) hide show
  1. package/.turbo/turbo-build.log +11 -11
  2. package/CHANGELOG.md +33 -0
  3. package/dist/ai-container.css +39 -0
  4. package/dist/esm/index.js +199 -0
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/index.d.mts +186 -4
  7. package/dist/index.d.ts +186 -4
  8. package/dist/index.js +204 -0
  9. package/dist/index.js.map +1 -1
  10. package/dist/narrative-attribution.css +56 -0
  11. package/dist/narrative-data-callout.css +103 -0
  12. package/dist/narrative-ordered-list.css +112 -0
  13. package/dist/narrative-social-media-card.css +82 -0
  14. package/dist/pull-quote.css +4 -25
  15. package/package.json +12 -5
  16. package/src/AIContainer/AIContainer.stories.tsx +54 -0
  17. package/src/AIContainer/AIContainer.tsx +35 -0
  18. package/src/AIContainer/AIContainerTypes.ts +14 -0
  19. package/src/AIContainer/__tests__/AIContainer.test.tsx +61 -0
  20. package/src/AIContainer/index.ts +2 -0
  21. package/src/NarrativeAttribution/NarrativeAttribution.stories.tsx +78 -0
  22. package/src/NarrativeAttribution/NarrativeAttribution.tsx +54 -0
  23. package/src/NarrativeAttribution/NarrativeAttributionTypes.ts +13 -0
  24. package/src/NarrativeAttribution/index.ts +2 -0
  25. package/src/NarrativeDataCallout/NarrativeDataCallout.stories.tsx +71 -0
  26. package/src/NarrativeDataCallout/NarrativeDataCallout.tsx +50 -0
  27. package/src/NarrativeDataCallout/NarrativeDataCalloutTypes.ts +18 -0
  28. package/src/NarrativeDataCallout/__tests__/NarrativeDataCallout.test.tsx +69 -0
  29. package/src/NarrativeDataCallout/index.ts +2 -0
  30. package/src/NarrativeOrderedList/NarrativeOrderedList.stories.tsx +69 -0
  31. package/src/NarrativeOrderedList/NarrativeOrderedList.tsx +74 -0
  32. package/src/NarrativeOrderedList/NarrativeOrderedListTypes.ts +39 -0
  33. package/src/NarrativeOrderedList/__tests__/NarrativeOrderedList.test.tsx +89 -0
  34. package/src/NarrativeOrderedList/index.ts +6 -0
  35. package/src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.stories.tsx +111 -0
  36. package/src/NarrativeSocialMediaCard/NarrativeSocialMediaCard.tsx +80 -0
  37. package/src/NarrativeSocialMediaCard/NarrativeSocialMediaCardTypes.ts +30 -0
  38. package/src/NarrativeSocialMediaCard/__tests__/NarrativeSocialMediaCard.test.tsx +154 -0
  39. package/src/NarrativeSocialMediaCard/index.ts +5 -0
  40. package/src/Playground/Playground.stories.tsx +176 -5
  41. package/src/PullQuote/PullQuote.stories.tsx +1 -0
  42. package/src/PullQuote/PullQuote.tsx +6 -3
  43. package/src/ai-container.css +39 -0
  44. package/src/css.d.ts +1 -0
  45. package/src/index.ts +25 -0
  46. package/src/narrative-attribution.css +56 -0
  47. package/src/narrative-data-callout.css +103 -0
  48. package/src/narrative-ordered-list.css +112 -0
  49. package/src/narrative-social-media-card.css +82 -0
  50. package/src/pull-quote.css +4 -25
package/src/pull-quote.css CHANGED
@@ -2,20 +2,17 @@
2
2
  * Seeds PullQuote component classes.
3
3
  * Use these instead of writing out individual Tailwind utility classes.
4
4
  *
5
- * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
6
- * CSS variable definitions and dark mode support.
5
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css and
6
+ * ai-container.css imported for CSS variable definitions and surface styles.
7
7
  *
8
8
  * Usage:
9
- * <figure class="seeds-pull-quote">…</figure> // subtle (default)
10
- * <figure class="seeds-pull-quote seeds-pull-quote-vivid">…</figure>
9
+ * <figure class="seeds-pull-quote seeds-ai-container">…</figure> // subtle (default)
10
+ * <figure class="seeds-pull-quote seeds-ai-container seeds-ai-container-vivid seeds-pull-quote-vivid">…</figure>
11
11
  */
12
12
 
13
13
  @layer components {
14
14
 
15
15
  .seeds-pull-quote {
16
- position: relative;
17
- overflow: hidden;
18
- box-sizing: border-box;
19
16
  width: 100%;
20
17
  display: flex;
21
18
  flex-direction: column;
@@ -24,24 +21,6 @@
24
21
  /* 40px block / 48px inline — 48px is off the space scale, so derive it from
25
22
  two tokens (40 + 8) rather than hardcoding an off-scale value. */
26
23
  padding: var(--space-600) calc(var(--space-600) + var(--space-300));
27
- border-radius: var(--radius-800);
28
- box-shadow: var(--shadow-low);
29
- font-family: var(--font-family);
30
- /* Subtle (default): the 20% AI gradient tint composited over the base
31
- surface. --color-gradient-ai-subtle is already translucent, so layering it
32
- over the opaque base color produces the soft wash. */
33
- background-color: var(--color-container-bg-base);
34
- background-image: var(--color-gradient-ai-subtle);
35
- color: var(--color-text-headline);
36
- }
37
-
38
- /* Vivid: the full-saturation AI gradient with white content. White has no
39
- semantic Seeds token; it is part of the AI gradient treatment (mirrors the
40
- raw brand hex used in --color-gradient-ai). */
41
- .seeds-pull-quote-vivid {
42
- background-color: transparent;
43
- background-image: var(--color-gradient-ai);
44
- color: #fff;
45
24
  }
46
25
 
47
26
  /* The accented bar holding the quote and attribution. */