From 480077176fdb1f2b514c83e730e47f4d94dc0173 Mon Sep 17 00:00:00 2001
From: Rez <13340707+rezrah@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:53:11 +0000
Subject: [PATCH] update river breakout docs (#832)

---
 apps/docs/content/components/River/index.mdx   | 17 ++++++++++-------
 apps/docs/scripts/components-with-animation.js |  4 ++--
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/docs/content/components/River/index.mdx b/apps/docs/content/components/River/index.mdx
index b4edb4c36..f5ca00812 100644
--- a/apps/docs/content/components/River/index.mdx
+++ b/apps/docs/content/components/River/index.mdx
@@ -149,7 +149,7 @@ Some examples of when to use a river breakout:
   </Dont>
 </DoDontContainer>
 
-The headline in the river component must always be present, but the supplemental content is optional.
+The leading content in a river breakout component must always be present, but the trailing content is optional.
 
 <DoDontContainer>
   <Do>
@@ -157,18 +157,18 @@ The headline in the river component must always be present, but the supplemental
       alt=""
       src="https://github.com/primer/brand/assets/2313998/433b1fba-4505-452b-8f8c-7cda69cc316d"
     />
-    <Caption>Exclude the supplemental content if it's not needed.</Caption>
+    <Caption>Always provide leading content.</Caption>
   </Do>
   <Dont>
     <img
       alt=""
       src="https://github.com/primer/brand/assets/2313998/62cf1c98-6b7d-46e9-a2d4-6d211a9103ad"
     />
-    <Caption>Don't exclude the headline.</Caption>
+    <Caption>Don't exclude the leading content.</Caption>
   </Dont>
 </DoDontContainer>
 
-Limit supplemental content to a maximum of 500 characters or two timeline items to avoid overwhelming the user and disrupting the layout's balance.
+Limit trailing content to a maximum of 500 characters (or two timeline items) to avoid overwhelming the user and disrupting the layout's balance.
 
 <DoDontContainer>
   <Do>
@@ -176,16 +176,19 @@ Limit supplemental content to a maximum of 500 characters or two timeline items
       alt=""
       src="https://github.com/primer/brand/assets/175638/c5879e94-09c3-4494-aa42-87543570dfb4"
     />
-    <Caption>Limit supplemental timeline content to two items.</Caption>
+    <Caption>
+      Limit high character counts in trailing content to preserve visual
+      balance.
+    </Caption>
   </Do>
   <Dont>
     <img
       alt=""
       src="https://github.com/primer/design/assets/175638/8a083960-e12a-4f11-b282-45d663be2e28"
     />
-    <Caption>Avoid unbalanced river breakout content.</Caption>
+    <Caption>Avoid using high character counts in trailing content.</Caption>
   </Dont>
-</DoDontContainer>{' '}
+</DoDontContainer>
 
 ### River story scroll
 
diff --git a/apps/docs/scripts/components-with-animation.js b/apps/docs/scripts/components-with-animation.js
index c5004cc7d..98574c8d0 100644
--- a/apps/docs/scripts/components-with-animation.js
+++ b/apps/docs/scripts/components-with-animation.js
@@ -9,11 +9,11 @@ export const supportedComponents = [
   'Image',
   'Label',
   'Pillar',
-  'SectionIntro',
   'Stack',
+  'SectionIntro',
+  'Statistic',
   'Testimonial',
   'Text',
-  'Statistic',
   'Timeline',
   'Animate',
   'River',