Fix Hero picture border radius (#1416)

Author: danielguillan

.changeset/fuzzy-years-smile.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed the `Hero` image border radius when rendering a `picture` element.

packages/react/src/Hero/Hero.images-videos.stories.tsx

@@ -41,6 +41,31 @@ export const WithImageBlockEndDefault: Story = {
   ),
 }
 
+export const WithPictureBlockEndDefault: Story = {
+  name: 'Picture (left + bottom)',
+  render: () => (
+    <Grid>
+      <Grid.Column>
+        <Hero>
+          <Hero.Label>Label</Hero.Label>
+          <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
+          <Hero.Description>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed
+            turpis felis nam pulvinar risus elementum.
+          </Hero.Description>
+          <Hero.PrimaryAction href="#">Primary action</Hero.PrimaryAction>
+          <Hero.Image
+            as="picture"
+            src={placeholderImage}
+            sources={[{srcset: placeholderImage, media: '(min-width: 0)'}]}
+            alt="placeholder image, blank with gray solid fill"
+          />
+        </Hero>
+      </Grid.Column>
+    </Grid>
+  ),
+}
+
 export const WithImageBlockEndCenter: Story = {
   name: 'Image (centered + bottom)',
   render: () => (

packages/react/src/Hero/Hero.module.css

@@ -67,6 +67,10 @@
   width: 100%;
 }
 
+.Hero-image > img {
+  border-radius: inherit;
+}
+
 .Hero-mediaContainer {
   width: 100%;
   height: 100%;

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

@@ -474,6 +474,17 @@ test.describe('Visual Comparison: Hero', () => {
     await expect(page).toHaveScreenshot({fullPage: true})
   })
 
+  test('Hero / Picture (left + bottom)', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-hero-features-images-and-videos--with-picture-block-end-default&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('Hero / Image (centered + bottom)', async ({page}) => {
     await page.goto(
       'http://localhost:6006/iframe.html?args=&id=components-hero-features-images-and-videos--with-image-block-end-center&viewMode=story',