update river breakout docs (#832)

primer · Nov 26, 2024 · 4800771 · 4800771
1 parent aafffd9
commit 4800771
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/apps/docs/content/components/River/index.mdx b/apps/docs/content/components/River/index.mdx
@@ -149,43 +149,46 @@ 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>
     <img
       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>
     <img
       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
@@ -9,11 +9,11 @@ export const supportedComponents = [
   'Image',
   'Label',
   'Pillar',
-  'SectionIntro',
   'Stack',
+  'SectionIntro',
+  'Statistic',
   'Testimonial',
   'Text',
-  'Statistic',
   'Timeline',
   'Animate',
   'River',