add block styling to escape hatches

Author: rezrah

packages/react/src/Bento/Bento.visual.spec.ts-snapshots/Visual-Comparison-Bento-Bento-Mixed-2-1-darwin.png

@@ -9,6 +9,7 @@ import lightNarrowBg from '../fixtures/images/light-vertical-banner.png'
 import lightWideBg from '../fixtures/images/light-horizontal-banner.png'
 import darkNarrowBg from '../fixtures/images/dark-vertical-banner.png'
 import darkWideBg from '../fixtures/images/dark-horizontal-banner.png'
+import placeholderImage from '../fixtures/images/placeholder.png'
 
 import {LogoGithubIcon} from '@primer/octicons-react'
 import {ThemeProvider} from '../ThemeProvider'
@@ -100,6 +101,21 @@ export const AlignedCenter = () => (
   </BreakoutBanner>
 )
 
+export const LeadingMedia = () => (
+  <BreakoutBanner
+    leadingVisual={
+      <picture>
+        <img src={placeholderImage} alt="Placeholder leading visual" width={64} height={64} />
+      </picture>
+    }
+  >
+    <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>
+    <BreakoutBanner.LinkGroup>
+      <Link href="#">Primary action</Link>
+    </BreakoutBanner.LinkGroup>
+  </BreakoutBanner>
+)
+
 export const OptionalDescription = () => (
   <BreakoutBanner>
     <BreakoutBanner.Heading>Where the most ambitious teams build great things</BreakoutBanner.Heading>

packages/react/src/BreakoutBanner/BreakoutBanner.features.stories.tsx

@@ -62,6 +62,10 @@
   margin-block-end: var(--base-size-48);
 }
 
+.BreakoutBanner-leadingVisual :is(img, picture) {
+  display: block;
+}
+
 /* Regular */
 @media screen and (min-width: 48rem) {
   .BreakoutBanner {

packages/react/src/BreakoutBanner/BreakoutBanner.module.css

@@ -102,18 +102,23 @@ describe('BreakoutBanner', () => {
   })
 
   it('provides an escape hatch to render a custom leading visual', () => {
-    const MockLeadingVisual = () => <svg data-testid="mock-svg" aria-label="Mock SVG" />
+    const MockLeadingVisual = () => (
+      <picture>
+        <img src="image.jpg" alt="Mock visual" />
+      </picture>
+    )
 
-    const {getByTestId} = render(
+    const {getByRole} = render(
       <BreakoutBanner leadingVisual={<MockLeadingVisual />}>
         <BreakoutBanner.Heading>This is your heading</BreakoutBanner.Heading>
         <BreakoutBanner.Description>This is your description</BreakoutBanner.Description>
       </BreakoutBanner>,
     )
 
-    const elLeadingVisual = getByTestId('mock-svg')
+    const leadingVisual = getByRole('img', {name: 'Mock visual'})
 
-    expect(elLeadingVisual).toBeInTheDocument()
+    expect(leadingVisual).toBeInTheDocument()
+    expect(leadingVisual.closest('div')).toHaveClass('BreakoutBanner-leadingVisual')
   })
 
   it('provides a way to pass a background image', () => {

packages/react/src/BreakoutBanner/BreakoutBanner.test.tsx

@@ -71,6 +71,17 @@ test.describe('Visual Comparison: BreakoutBanner', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('BreakoutBanner / Leading Media', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-breakoutbanner-features--leading-media&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   test('BreakoutBanner / Optional Description', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-breakoutbanner-features--optional-description&viewMode=story',

packages/react/src/BreakoutBanner/BreakoutBanner.visual.spec.ts

@@ -271,6 +271,22 @@ export const WithLeadingComponent: Story = {
   ),
 }
 
+export const WithMediaComponents: Story = {
+  render: () => (
+    <CTABanner
+      leadingComponent={() => (
+        <picture>
+          <img src={placeholderImage} alt="Placeholder leading visual" width={64} height={64} />
+        </picture>
+      )}
+      trailingComponent={() => <img src={placeholderImage} alt="Placeholder trailing visual" width={64} height={64} />}
+    >
+      <CTABanner.Heading>Where the most ambitious teams build great things</CTABanner.Heading>
+      <CTABanner.Description>Build, scale, and deliver secure software with GitHub.</CTABanner.Description>
+    </CTABanner>
+  ),
+}
+
 export const WithOctovisualLeadingComponent: Story = {
   render: () => (
     <CTABanner

packages/react/src/BreakoutBanner/BreakoutBanner.visual.spec.ts-snapshots/Visual-Comparison-BreakoutBanner-BreakoutBanner-Leading-Media-1-darwin.png

@@ -105,6 +105,10 @@
   margin: 0 auto;
 }
 
+.CTABanner-content :is(img, picture) {
+  display: block;
+}
+
 .CTABanner--variant-minimal .CTABanner-content {
   --CTABanner-content-gap: 0;
 }

packages/react/src/CTABanner/CTABanner.features.stories.tsx

@@ -143,19 +143,23 @@ describe('CTABanner', () => {
   })
 
   it('provides an escape hatch to render a custom trailing component', () => {
-    const trailingText = 'Custom trailing'
-    const MockTrailingComponent = () => <div>{trailingText}</div>
+    const MockTrailingComponent = () => (
+      <picture>
+        <img src="trailing.jpg" alt="Custom trailing" />
+      </picture>
+    )
 
-    const {getByText} = render(
+    const {getByRole} = render(
       <CTABanner trailingComponent={MockTrailingComponent}>
         <CTABanner.Heading>This is your heading</CTABanner.Heading>
         <CTABanner.Description>This is your description</CTABanner.Description>
       </CTABanner>,
     )
 
-    const elTrailing = getByText(trailingText)
+    const trailingImage = getByRole('img', {name: 'Custom trailing'})
 
-    expect(elTrailing).toBeInTheDocument()
+    expect(trailingImage).toBeInTheDocument()
+    expect(trailingImage.closest('[class*="CTABanner-content"]')).toBeInTheDocument()
   })
 
   it('provides a way to pass a background image', () => {
@@ -433,19 +437,23 @@ describe('CTABanner', () => {
   })
 
   it('provides an escape hatch to render a custom leading component', () => {
-    const leadingText = 'Custom leading'
-    const MockLeadingComponent = () => <div>{leadingText}</div>
+    const MockLeadingComponent = () => (
+      <picture>
+        <img src="leading.jpg" alt="Custom leading" />
+      </picture>
+    )
 
-    const {getByText} = render(
+    const {getByRole} = render(
       <CTABanner leadingComponent={MockLeadingComponent}>
         <CTABanner.Heading>This is your heading</CTABanner.Heading>
         <CTABanner.Description>This is your description</CTABanner.Description>
       </CTABanner>,
     )
 
-    const elLeading = getByText(leadingText)
+    const leadingImage = getByRole('img', {name: 'Custom leading'})
 
-    expect(elLeading).toBeInTheDocument()
+    expect(leadingImage).toBeInTheDocument()
+    expect(leadingImage.closest('[class*="CTABanner-content"]')).toBeInTheDocument()
   })
 
   it('renders leading component before heading and trailing component after children', () => {

packages/react/src/CTABanner/CTABanner.module.css

@@ -126,6 +126,17 @@ test.describe('Visual Comparison: CTABanner', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('CTABanner / With Media Components', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-ctabanner-features--with-media-components&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
   test('CTABanner / With Octovisual Leading Component', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-ctabanner-features--with-octovisual-leading-component&viewMode=story',