Bugfixes to card, river and image components (#971)

Author: rezrah

.changeset/early-kangaroos-lick.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed border radius inconsistency in the `River` component where `picture` elements were only showing rounded corners at the top but not the bottom.

.changeset/silver-pants-matter.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+`River` headings and body text now have a maximum width of `400px` on default 50:50 layouts.

.changeset/tame-pants-cheer.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed border radius inconsistency in the `Card` component where `picture` elements were only showing rounded corners at the top but not the bottom.

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

@@ -228,13 +228,22 @@ export const IconAndLabel: StoryFn<typeof Card> = () => {
 
 export const Image: StoryFn<typeof Card> = () => {
   return (
-    <Card href="https://github.com">
-      <Card.Image src={placeholderImage} alt="placeholder, blank area with an gray background color" />
-      <Card.Heading>Code search & code view</Card.Heading>
-      <Card.Description>
-        Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
-      </Card.Description>
-    </Card>
+    <Stack direction="horizontal">
+      <Card href="https://github.com">
+        <Card.Image src={placeholderImage} alt="placeholder, blank area with an gray background color" />
+        <Card.Heading>Code search & code view</Card.Heading>
+        <Card.Description>
+          Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
+        </Card.Description>
+      </Card>
+      <Card href="https://github.com">
+        <Card.Image as="picture" src={placeholderImage} alt="placeholder, blank area with an gray background color" />
+        <Card.Heading>Code search & code view</Card.Heading>
+        <Card.Description>
+          Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
+        </Card.Description>
+      </Card>
+    </Stack>
   )
 }
 

packages/react/src/Card/Card.module.css

@@ -133,6 +133,7 @@
 }
 
 .Card__image img,
+.Card__image picture,
 .Card__image span {
   display: block;
 }