Fixing minor UI bugs in Footnotes, Hero and SectionIntroStacked

.changeset/footnotes-gap-reduce.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Reduced the gap between `Footnotes` items from `24px` to `12px`

.changeset/hero-gridline-expressive-narrow-padding.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Adjusted the padding in the `gridline-expressive` variant of `Hero` on narrow viewports

.changeset/section-intro-stacked-icon-radius.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Increased the `border-radius` of icons in the `SectionIntroStacked` component from `8px` to `12px`

packages/react/src/ExpandableArrow/ExpandableArrow.stories.tsx

@@ -1,10 +1,18 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import React from 'react'
+import {Text} from '../Text'
 import {ExpandableArrow} from '.'
 
 const meta = {
   title: 'Components/ExpandableArrow',
   component: ExpandableArrow,
+  decorators: [
+    Story => (
+      <Text>
+        <Story />
+      </Text>
+    ),
+  ],
 } satisfies Meta<typeof ExpandableArrow>
 
 export default meta
@@ -27,9 +35,13 @@ export const Expanded: Story = {
 const ExpandOnHoverStory = () => {
   const [isHovered, setIsHovered] = React.useState(false)
   return (
-    <div style={{cursor: 'pointer'}} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+    <span
+      style={{display: 'block', cursor: 'pointer'}}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
       <ExpandableArrow expanded={isHovered} />
-    </div>
+    </span>
   )
 }
 

packages/react/src/Footnotes/Footnotes.module.css

@@ -2,7 +2,7 @@
   padding-block: var(--base-size-80);
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-24);
+  gap: var(--base-size-12);
 }
 
 .Footnotes--variant-citations {

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

@@ -380,8 +380,9 @@
 
 /* Header column (eyebrow, heading) */
 .Hero-expressive-header-column {
-  padding: var(--base-size-32);
-  padding-block-end: var(--base-size-24);
+  padding: var(--base-size-36);
+  padding-inline: var(--base-size-20);
+  padding-block-end: var(--base-size-28);
   border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
   display: flex;
   align-items: center;
@@ -390,6 +391,7 @@
 /* Body column (description, actions, trailing) */
 .Hero-expressive-body-column {
   padding: var(--base-size-32);
+  padding-inline: var(--base-size-20);
   padding-block-start: var(--base-size-24);
 }
 
@@ -423,7 +425,7 @@
   }
 
   .Hero--variant-gridline-expressive .Hero-actions {
-    margin-block-start: var(--base-size-28);
+    margin-block-start: var(--base-size-24);
   }
 
   .Hero--variant-gridline-expressive .Hero-trailing {

packages/react/src/SectionIntroStacked/SectionIntroStacked.module.css

@@ -158,5 +158,5 @@
 
 .SectionIntroStackedItem__icon {
   flex-shrink: 0;
-  border-radius: var(--brand-borderRadius-medium);
+  border-radius: var(--base-size-12);
 }

packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx

@@ -28,6 +28,7 @@ import {
   Tiles,
   Image,
   useTheme,
+  Footnotes,
 } from '../../..'
 import {RedlineBackground} from '../../../component-helpers'
 import placeholderBg from '../../../fixtures/images/dither-bg-landscape-purple.png'
@@ -502,9 +503,11 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
         <Box paddingBlockEnd={64}>
           <FAQGroup variant="gridline" defaultSelectedIndex={1}>
             <FAQGroup.Heading>
-              {content.faq.headingLine1}
-              <br />
-              {content.faq.headingLine2}
+              <Box paddingInlineStart="spacious">
+                {content.faq.headingLine1}
+                <br />
+                {content.faq.headingLine2}
+              </Box>
             </FAQGroup.Heading>
             {content.faq.groups.map(group => (
               <FAQ key={group.heading} variant="gridline">
@@ -523,6 +526,27 @@ export function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTempla
             ))}
           </FAQGroup>
         </Box>
+        <footer>
+          <Section as="div" paddingBlockStart="none" paddingBlockEnd="none">
+            <Grid>
+              <Grid.Column>
+                <Box paddingInlineStart={32}>
+                  <Footnotes>
+                    <Footnotes.Item id="economic-impact" href="#economic-impact-ref">
+                      Code review will incur Actions usage.{' '}
+                    </Footnotes.Item>
+                    <Footnotes.Item id="third-party" href="#third-party-ref">
+                      Response times may vary during periods of high usage. Requests may be subject to rate limiting.
+                    </Footnotes.Item>
+                    <Footnotes.Item id="ai" href="#ai-ref">
+                      Flex allotments will vary over time.
+                    </Footnotes.Item>
+                  </Footnotes>
+                </Box>
+              </Grid.Column>
+            </Grid>
+          </Section>
+        </footer>
 
         <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>
           <RedlineBackground