riverbreakout spacing updates

primer · Jan 8, 2025 · c2bb92e · c2bb92e
1 parent d11bf81
commit c2bb92e
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 47 deletions.
diff --git a/.changeset/nasty-boxes-float.md b/.changeset/nasty-boxes-float.md
@@ -0,0 +1,8 @@
+---
+'@primer/react-brand': patch
+---
+
+Visual spacing updates to `RiverBreakout`
+
+- Reduced vertical gap between the main text and link.
+- Applied a maximum width to the main text.
diff --git a/packages/react/src/river/RiverBreakout/RiverBreakout.stories.tsx b/packages/react/src/river/RiverBreakout/RiverBreakout.stories.tsx
@@ -1,13 +1,21 @@
 import React from 'react'
 import {Meta, StoryFn} from '@storybook/react'
 import {RiverBreakout} from '.'
-import {Link, Text, Timeline} from '../../'
-import {Container} from '../../component-helpers'
+import {Grid, Link, Text, Timeline} from '../../'
 import placeholderImage from '../../fixtures/images/placeholder-600x400.png'
 
 export default {
   title: 'Components/RiverBreakout',
   component: RiverBreakout,
+  decorators: [
+    Story => (
+      <Grid>
+        <Grid.Column>
+          <Story />
+        </Grid.Column>
+      </Grid>
+    ),
+  ],
 } as Meta<typeof RiverBreakout>
 
 const TrailingTimeline = () => (
@@ -26,55 +34,49 @@ const PlaceholderImage = () => (
 )
 
 export const Default: StoryFn<typeof RiverBreakout> = () => (
-  <Container>
-    <RiverBreakout>
-      <RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
-      <RiverBreakout.Visual>
-        <PlaceholderImage />
-      </RiverBreakout.Visual>
-      <RiverBreakout.Content trailingComponent={TrailingTimeline}>
-        <Text>
-          Accelerate your workflows and scale your business fast with access to millions of open source projects on
-          GitHub, the largest source code host.
-        </Text>
-        <Link href="#">Call to action</Link>
-      </RiverBreakout.Content>
-    </RiverBreakout>
-  </Container>
+  <RiverBreakout>
+    <RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
+    <RiverBreakout.Visual>
+      <PlaceholderImage />
+    </RiverBreakout.Visual>
+    <RiverBreakout.Content trailingComponent={TrailingTimeline}>
+      <Text>
+        Accelerate your workflows and scale your business fast with access to millions of open source projects on
+        GitHub, the largest source code host.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </RiverBreakout.Content>
+  </RiverBreakout>
 )
 
 export const HighlightedPortion: StoryFn<typeof RiverBreakout> = () => (
-  <Container>
-    <RiverBreakout>
-      <RiverBreakout.A11yHeading>River breakout highlight</RiverBreakout.A11yHeading>
-      <RiverBreakout.Visual>
-        <PlaceholderImage />
-      </RiverBreakout.Visual>
-      <RiverBreakout.Content trailingComponent={TrailingTimeline}>
-        <Text>
-          <b>This first sentence is a river breakout headline.</b> And this is where the body copy starts. Remember to
-          keep these nice and succinct.
-        </Text>
-        <Link href="#">Call to action</Link>
-      </RiverBreakout.Content>
-    </RiverBreakout>
-  </Container>
+  <RiverBreakout>
+    <RiverBreakout.A11yHeading>River breakout highlight</RiverBreakout.A11yHeading>
+    <RiverBreakout.Visual>
+      <PlaceholderImage />
+    </RiverBreakout.Visual>
+    <RiverBreakout.Content trailingComponent={TrailingTimeline}>
+      <Text>
+        <b>This first sentence is a river breakout headline.</b> And this is where the body copy starts. Remember to
+        keep these nice and succinct.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </RiverBreakout.Content>
+  </RiverBreakout>
 )
 
 export const WithoutTrailingComponent: StoryFn<typeof RiverBreakout> = () => (
-  <Container>
-    <RiverBreakout>
-      <RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
-      <RiverBreakout.Visual>
-        <PlaceholderImage />
-      </RiverBreakout.Visual>
-      <RiverBreakout.Content>
-        <Text>
-          Accelerate your workflows and scale your business fast with access to millions of open source projects on
-          GitHub, the largest source code host.
-        </Text>
-        <Link href="#">Call to action</Link>
-      </RiverBreakout.Content>
-    </RiverBreakout>
-  </Container>
+  <RiverBreakout>
+    <RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
+    <RiverBreakout.Visual>
+      <PlaceholderImage />
+    </RiverBreakout.Visual>
+    <RiverBreakout.Content>
+      <Text>
+        Accelerate your workflows and scale your business fast with access to millions of open source projects on
+        GitHub, the largest source code host.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </RiverBreakout.Content>
+  </RiverBreakout>
 )
diff --git a/packages/react/src/river/river-shared.module.css b/packages/react/src/river/river-shared.module.css
@@ -140,6 +140,7 @@
 }
 
 .RiverBreakout .River__text {
+  max-width: 37.5rem; /* 600px */
   color: var(--brand-color-text-default);
   font-size: var(--brand-text-size-500);
   font-weight: var(--brand-heading-weight-500);
@@ -176,6 +177,7 @@
   .RiverBreakout .River__content {
     display: grid;
     gap: var(--brand-River-spacing-inner);
+    row-gap: var(--base-size-32);
     grid-template-areas:
       'text trailingComponent'
       'cta trailingComponent';