Adjust spacing in river breakout

.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.

.changeset/strong-eels-wink.md

@@ -0,0 +1,9 @@
+---
+'@primer/brand-primitives': patch
+---
+
+Added new token for river breakout vertical spacing:
+
+```
+--brand-River-spacing-innerY
+```

packages/design-tokens/src/tokens/functional/components/river/river.json

@@ -12,6 +12,17 @@
           }
         }
       },
+      "innerY": {
+        "value": "var(--base-size-24)",
+        "responsive": {
+          "768px": {
+            "value": "var(--base-size-24)"
+          },
+          "1280px": {
+            "value": "var(--base-size-32)"
+          }
+        }
+      },
       "outer": {
         "value": "var(--base-size-36)",
         "responsive": {

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>
 )

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(--brand-River-spacing-innerY);
     grid-template-areas:
       'text trailingComponent'
       'cta trailingComponent';