Improve duotone support in River (#894)

* improve duotone support in river * update changeset * fix linter
primer · Jan 17, 2025 · aecc8d8 · aecc8d8
1 parent e85c731
commit aecc8d8
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 51 deletions.
diff --git a/.changeset/friendly-carrots-hug.md b/.changeset/friendly-carrots-hug.md
@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Improvements to duotone text in `River` component. Now supports `<b>` elements using a semi-bold font weight.
+
+🔗 [See documentation for usage examples](https://primer.style/brand/components/River/react#duotone)
diff --git a/apps/docs/content/components/River/react.mdx b/apps/docs/content/components/River/react.mdx
@@ -29,7 +29,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River>
     <River.Visual>
       <img
-        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        src="/brand/assets/placeholder-600x400.png"
         alt="placeholder, blank area with an off-white background color"
       />
     </River.Visual>
@@ -46,7 +46,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River align="end">
     <River.Visual>
       <img
-        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        src="/brand/assets/placeholder-600x400.png"
         alt="placeholder, blank area with an off-white background color"
       />
     </River.Visual>
@@ -63,7 +63,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River align="center">
     <River.Visual>
       <img
-        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        src="/brand/assets/placeholder-600x400.png"
         alt="placeholder, blank area with an off-white background color"
       />
     </River.Visual>
@@ -89,7 +89,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River>
     <River.Visual>
       <img
-        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        src="/brand/assets/placeholder-600x400.png"
         alt="placeholder, blank area with an off-white background color"
       />
     </River.Visual>
@@ -104,7 +104,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River imageTextRatio="60:40">
     <River.Visual>
       <img
-        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        src="/brand/assets/placeholder-600x400.png"
         alt="placeholder, blank area with an off-white background color"
       />
     </River.Visual>
@@ -156,7 +156,7 @@ import {River, RiverBreakout} from '@primer/react-brand'
 <River imageTextRatio="60:40">
   <River.Visual>
     <img
-      src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+      src="/brand/assets/placeholder-600x400.png"
       alt="placeholder with an off-white background color"
     />
   </River.Visual>
@@ -170,14 +170,34 @@ import {River, RiverBreakout} from '@primer/react-brand'
 </River>
 ```
 
+### Duotone
+
+```jsx live
+<River>
+  <River.Visual>
+    <img
+      src="/brand/assets/placeholder-600x400.png"
+      alt="placeholder, blank area with an off-white background color"
+    />
+  </River.Visual>
+  <River.Content>
+    <Text size="300">
+      <b>This first sentence is highlighted</b> and here is where the body copy
+      starts. Remember to keep this nice and succinct.
+    </Text>
+    <Link href="#">Call to action</Link>
+  </River.Content>
+</River>
+```
+
 ### River breakout
 
 ```jsx live
 <RiverBreakout>
   <RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
   <RiverBreakout.Visual>
     <img
-      src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+      src="/brand/assets/placeholder-600x400.png"
       alt="placeholder, blank area with an off-white background color"
     />
   </RiverBreakout.Visual>

diff --git a/apps/docs/static/assets/placeholder-600x400.png b/apps/docs/static/assets/placeholder-600x400.png
diff --git a/packages/react/src/river/River/River.features.stories.tsx b/packages/react/src/river/River/River.features.stories.tsx
@@ -62,6 +62,21 @@ export const Center: StoryFn<typeof River> = () => (
   </River>
 )
 
+export const DuoTone: StoryFn<typeof River> = () => (
+  <River>
+    <River.Visual>
+      <PlaceholderImage />
+    </River.Visual>
+    <River.Content>
+      <Text size="300">
+        <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this nice and
+        succinct.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </River.Content>
+  </River>
+)
+
 export const ColumnRatio6040: StoryFn<typeof River> = () => (
   <Container>
     <River imageTextRatio="60:40">

diff --git a/packages/react/src/river/River/River.stories.tsx b/packages/react/src/river/River/River.stories.tsx
@@ -73,9 +73,9 @@ export const Copilot: StoryFn<typeof River> = args => (
         <PlaceholderImage />
       </River.Visual>
       <River.Content>
-        <Text variant="default">
-          <strong> Convert comments to code.</strong> Write a comment describing the logic you want, and let GitHub
-          Copilot assemble the code for you.
+        <Text size="300">
+          <b> Convert comments to code.</b> Write a comment describing the logic you want, and let GitHub Copilot
+          assemble the code for you.
         </Text>
       </River.Content>
     </River>
@@ -84,9 +84,9 @@ export const Copilot: StoryFn<typeof River> = args => (
         <PlaceholderImage />
       </River.Visual>
       <River.Content>
-        <Text variant="default">
-          <strong>Autofill for repetitive code.</strong> GitHub Copilot works great for quickly producing boilerplate
-          and repetitive code patterns. Feed it a few examples and let it generate the rest!
+        <Text size="300">
+          <b>Autofill for repetitive code.</b> GitHub Copilot works great for quickly producing boilerplate and
+          repetitive code patterns. Feed it a few examples and let it generate the rest!
         </Text>
       </River.Content>
     </River>

diff --git a/packages/react/src/river/River/River.visual.spec.ts b/packages/react/src/river/River/River.visual.spec.ts
@@ -51,6 +51,13 @@ test.describe('Visual Comparison: River', () => {
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
 
+  test('River / Duo Tone', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-river-features--duo-tone&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
+
   test('River / 60:40 image ratio', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-river-features--column-ratio-6040&viewMode=story',

diff --git a/...iver.visual.spec.ts-snapshots/Visual-Comparison-River-River-Copilot-1-linux.png b/...iver.visual.spec.ts-snapshots/Visual-Comparison-River-River-Copilot-1-linux.png
diff --git a/...ver.visual.spec.ts-snapshots/Visual-Comparison-River-River-Duo-Tone-1-linux.png b/...ver.visual.spec.ts-snapshots/Visual-Comparison-River-River-Duo-Tone-1-linux.png
diff --git a/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.features.stories.tsx b/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.features.stories.tsx
@@ -50,10 +50,9 @@ const Template: StoryFn<TemplateProps> = args => {
           />
         </River.Visual>
         <River.Content trailingComponent={args.withTrailingComponent ? TimelineExample : undefined}>
-          <Heading>Heading 1</Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
-            turpis felis nam pulvinar risus elementum.
+          <Text size="300">
+            <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this nice
+            and succinct.
           </Text>
           <Link href="#">Call to action</Link>
         </River.Content>
@@ -66,10 +65,9 @@ const Template: StoryFn<TemplateProps> = args => {
           />
         </River.Visual>
         <River.Content trailingComponent={args.withTrailingComponent ? TimelineExample : undefined}>
-          <Heading>Heading 2</Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
-            turpis felis nam pulvinar risus elementum.
+          <Text size="300">
+            <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this nice
+            and succinct.
           </Text>
           <Link href="#">Call to action</Link>
         </River.Content>
@@ -82,10 +80,9 @@ const Template: StoryFn<TemplateProps> = args => {
           />
         </River.Visual>
         <River.Content trailingComponent={args.withTrailingComponent ? TimelineExample : undefined}>
-          <Heading>Heading 3 </Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
-            turpis felis nam pulvinar risus elementum.
+          <Text size="300">
+            <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this nice
+            and succinct.
           </Text>
           <Link href="#">Call to action</Link>
         </River.Content>
@@ -98,10 +95,9 @@ const Template: StoryFn<TemplateProps> = args => {
           />
         </River.Visual>
         <River.Content trailingComponent={args.withTrailingComponent ? TimelineExample : undefined}>
-          <Heading>Heading 4</Heading>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
-            turpis felis nam pulvinar risus elementum.
+          <Text size="300">
+            <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this nice
+            and succinct.
           </Text>
           <Link href="#">Call to action</Link>
         </River.Content>
@@ -218,7 +214,7 @@ export const Video = args => (
       </River.Visual>
       <River.Content trailingComponent={args.withTrailingComponent ? TimelineExample : undefined}>
         <Heading>Heading 1</Heading>
-        <Text>
+        <Text size="300">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
           turpis felis nam pulvinar risus elementum.
         </Text>
@@ -237,7 +233,7 @@ export const Video = args => (
       </River.Visual>
       <River.Content trailingComponent={args.withTrailingComponent ? TimelineExample : undefined}>
         <Heading>Heading 2</Heading>
-        <Text>
+        <Text size="300">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
           turpis felis nam pulvinar risus elementum.
         </Text>
@@ -256,7 +252,7 @@ export const Video = args => (
       </River.Visual>
       <River.Content trailingComponent={args.withTrailingComponent ? TimelineExample : undefined}>
         <Heading>Heading 3 </Heading>
-        <Text>
+        <Text size="300">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
           turpis felis nam pulvinar risus elementum.
         </Text>
@@ -275,7 +271,7 @@ export const Video = args => (
       </River.Visual>
       <River.Content trailingComponent={args.withTrailingComponent ? TimelineExample : undefined}>
         <Heading>Heading 4</Heading>
-        <Text>
+        <Text size="300">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
           turpis felis nam pulvinar risus elementum.
         </Text>

diff --git a/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.stories.tsx b/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {StoryFn, Meta} from '@storybook/react'
 
 import {RiverStoryScroll} from '.'
-import {Heading, Text, Link, River, Box} from '../..'
+import {Text, Link, River, Box} from '../..'
 import {Container} from '../../component-helpers'
 
 export default {
@@ -22,10 +22,9 @@ const Template: StoryFn<typeof RiverStoryScroll> = args => (
             />
           </River.Visual>
           <River.Content>
-            <Heading>Heading 1</Heading>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
-              turpis felis nam pulvinar risus elementum.
+            <Text size="300">
+              <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this
+              nice and succinct.
             </Text>
             <Link href="#">Call to action</Link>
           </River.Content>
@@ -38,10 +37,9 @@ const Template: StoryFn<typeof RiverStoryScroll> = args => (
             />
           </River.Visual>
           <River.Content>
-            <Heading>Heading 2</Heading>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
-              turpis felis nam pulvinar risus elementum.
+            <Text size="300">
+              <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this
+              nice and succinct.
             </Text>
             <Link href="#">Call to action</Link>
           </River.Content>
@@ -54,10 +52,9 @@ const Template: StoryFn<typeof RiverStoryScroll> = args => (
             />
           </River.Visual>
           <River.Content>
-            <Heading>Heading 3 </Heading>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
-              turpis felis nam pulvinar risus elementum.
+            <Text size="300">
+              <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this
+              nice and succinct.
             </Text>
             <Link href="#">Call to action</Link>
           </River.Content>
@@ -70,10 +67,9 @@ const Template: StoryFn<typeof RiverStoryScroll> = args => (
             />
           </River.Visual>
           <River.Content>
-            <Heading>Heading 4</Heading>
-            <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
-              turpis felis nam pulvinar risus elementum.
+            <Text size="300">
+              <b>This first sentence is highlighted</b> and here is where the body copy starts. Remember to keep this
+              nice and succinct.
             </Text>
             <Link href="#">Call to action</Link>
           </River.Content>

diff --git a/...Scroll-Mobile-vie-fb8ff-arrow-RiverStoryScroll-With-Timeline-Narrow-1-linux.png b/...Scroll-Mobile-vie-fb8ff-arrow-RiverStoryScroll-With-Timeline-Narrow-1-linux.png
diff --git a/...apshots/Visual-Comparison-RiverStoryScroll-RiverStoryScroll-Default-1-linux.png b/...apshots/Visual-Comparison-RiverStoryScroll-RiverStoryScroll-Default-1-linux.png
diff --git a/...pshots/Visual-Comparison-RiverStoryScroll-RiverStoryScroll-Disabled-1-linux.png b/...pshots/Visual-Comparison-RiverStoryScroll-RiverStoryScroll-Disabled-1-linux.png
diff --git a/...s/Visual-Comparison-RiverStoryScroll-RiverStoryScroll-With-Timeline-1-linux.png b/...s/Visual-Comparison-RiverStoryScroll-RiverStoryScroll-With-Timeline-1-linux.png
diff --git a/packages/react/src/river/river-shared.module.css b/packages/react/src/river/river-shared.module.css
@@ -38,7 +38,9 @@
   margin-top: var(--base-size-24);
 }
 
-.River__text strong {
+.River__text strong,
+.River__text b {
+  font-weight: var(--base-text-weight-semibold);
   color: var(--brand-color-text-default);
 }