Rename footer regions into sections

Author: danielguillan

.changeset/bright-dots-rest.md

@@ -6,4 +6,4 @@
 Updated `MinimalFooter` visual design and added new content slot and back to top control.
 
 - Added optional `MinimalFooter.Content` slot for custom content and optional `MinimalFooter.BackToTop` control.
-- Replaced the full GitHub logo with the GitHub logomark and reorganized the footer into top, content, and bottom regions.
+- Replaced the full GitHub logo with the GitHub logomark and reorganized the footer into top, content, and bottom sections.

apps/next-docs/content/components/MinimalFooter/index.mdx

@@ -77,7 +77,7 @@ Use up to five `MinimalFooter.Link` children. Links can render as anchors or but
 
 ### Custom content
 
-Use `MinimalFooter.Content` to render an opt-in slot between the top and the bottom regions. Use this page-specific controls or information such as a language selector, theme toggle, or status indicator, not to recreate top navigation.
+Use `MinimalFooter.Content` to render an opt-in slot between the top and bottom sections. Use this for page-specific controls or information such as a language selector, theme toggle, or status indicator, not to recreate top navigation.
 
 ```jsx live
 <MinimalFooter>
@@ -124,16 +124,16 @@ Use `scrollBehavior` to customize the DOM [scroll behavior](https://developer.mo
 | :------------------- | :------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------: | :------------------------------------------------------------ |
 | `className`          | `string`                                                                                                            |                                                                                       | Sets a custom class on the root element                       |
 | `children`           | <MinimalFooterChildrenProp />                                                                                       |                                      `undefined`                                      | Valid child components                                        |
-| `copyrightStatement` | `string` \| `ReactElement`                                                                                          |                        Current-year GitHub copyright statement                        | The copyright statement displayed in the bottom region.       |
+| `copyrightStatement` | `string` \| `ReactElement`                                                                                          |                        Current-year GitHub copyright statement                        | The copyright statement displayed in the bottom section.      |
 | `logoHref`           | `string`                                                                                                            |                                `'https://github.com'`                                 | The href for the GitHub logomark.                             |
 | `socialLinks`        | `Array<'x' \| 'github' \| 'linkedin' \| 'youtube' \| 'facebook' \| 'twitch' \| 'tiktok' \| 'instagram'>` \| `false` | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` | Ordered subset of social links, or `false` to hide all links. |
 
 ### MinimalFooter.Link
 
-| Name       | Type              |   Default   | Description                           |
-| :--------- | :---------------- | :---------: | :------------------------------------ |
-| `as`       | `'a'`, `'button'` |    `'a'`    | Applies the underlying HTML element   |
-| `children` | `string`          | `undefined` | Label for a link in the bottom region |
+| Name       | Type              |   Default   | Description                            |
+| :--------- | :---------------- | :---------: | :------------------------------------- |
+| `as`       | `'a'`, `'button'` |    `'a'`    | Applies the underlying HTML element    |
+| `children` | `string`          | `undefined` | Label for a link in the bottom section |
 
 ### MinimalFooter.Footnotes
 

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

@@ -130,11 +130,11 @@ export const DefaultNarrow: Story = {
     </MinimalFooter>
   ),
   play: async ({canvasElement}) => {
-    const bottom = canvasElement.querySelector('[data-footer-layout="social"]')
+    const socialLinks = within(canvasElement).getByRole('list')
+    const bottom = socialLinks.closest('section')
     const container = bottom?.firstElementChild
-    const socialLinks = bottom?.querySelector('ul')
 
-    if (!container || !socialLinks) {
+    if (!container) {
       throw new Error('Expected the social footer layout to render')
     }
 

packages/react/src/MinimalFooter/MinimalFooter.module.css

@@ -49,7 +49,7 @@
 }
 
 /**
- * Footer top region
+ * Footer top section
  */
 .Footer__top {
   padding-top: var(--base-size-48);
@@ -80,17 +80,21 @@
   }
 }
 
-[data-footer-region='content'] > .Footer__container {
+.Footer__section {
+  min-width: 0;
+}
+
+.Footer__section--content > .Footer__container {
   padding-top: var(--base-size-32);
   padding-bottom: var(--base-size-32);
 }
 
-.Footer [data-footer-region='content'] + [data-footer-region='bottom'] {
+.Footer__section--content + .Footer__section--bottom {
   border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);
 }
 
 /**
- * Footer bottom region
+ * Footer bottom section
  */
 .Footer__bottom-row,
 .Footer__copyright-and-links {
@@ -151,11 +155,11 @@
   gap: var(--base-size-20);
 }
 
-[data-footer-layout='no-social'] .Footer__copyright-and-links {
+.Footer__bottom--no-social .Footer__copyright-and-links {
   width: 100%;
 }
 
-[data-footer-layout='no-social'] .Footer__links {
+.Footer__bottom--no-social .Footer__links {
   width: 100%;
   justify-content: space-between;
   order: -1;
@@ -222,11 +226,11 @@
     flex-wrap: wrap;
   }
 
-  [data-footer-layout='no-social'] .Footer__copyright-and-links {
+  .Footer__bottom--no-social .Footer__copyright-and-links {
     justify-content: space-between;
   }
 
-  [data-footer-layout='no-social'] .Footer__links {
+  .Footer__bottom--no-social .Footer__links {
     width: auto;
     justify-content: flex-start;
     order: initial;

packages/react/src/MinimalFooter/MinimalFooter.module.css.d.ts

@@ -4,6 +4,7 @@ declare const styles: {
   readonly "Footer__backToTop-content": string;
   readonly "Footer__backToTop-icon": string;
   readonly "Footer__bottom": string;
+  readonly "Footer__bottom--no-social": string;
   readonly "Footer__bottom-row": string;
   readonly "Footer__container": string;
   readonly "Footer__copyright": string;
@@ -12,6 +13,9 @@ declare const styles: {
   readonly "Footer__link-text": string;
   readonly "Footer__links": string;
   readonly "Footer__logo": string;
+  readonly "Footer__section": string;
+  readonly "Footer__section--bottom": string;
+  readonly "Footer__section--content": string;
   readonly "Footer__social-icon": string;
   readonly "Footer__social-link": string;
   readonly "Footer__social-links": string;
@@ -21,4 +25,3 @@ declare const styles: {
   readonly "Footer__top-row": string;
 };
 export = styles;
-

packages/react/src/MinimalFooter/MinimalFooter.test.tsx

@@ -443,8 +443,9 @@ describe('MinimalFooter', () => {
 
     expect(sections[0]).toContainElement(container.querySelector('.Footer__terms'))
 
-    const topRegion = container.querySelector('[data-footer-region="top"]')
-    expect(topRegion).toBeInTheDocument()
+    const topSection = container.querySelector('.Footer__top')?.parentElement
+    expect(topSection).toBeInTheDocument()
+    expect(topSection).toHaveClass('Footer__section')
   })
 
   it('renders component with only footnotes', () => {
@@ -691,31 +692,30 @@ describe('MinimalFooter', () => {
     expect(queryByRole('link', {name: 'Link 6'})).not.toBeInTheDocument()
   })
 
-  it('omits the content region when no Content is provided', () => {
+  it('omits the content section when no Content is provided', () => {
     const {container} = render(<MinimalFooter />)
 
-    const regions = Array.from(container.querySelectorAll('[data-footer-region]')).map(region =>
-      region.getAttribute('data-footer-region'),
-    )
-
-    expect(regions).toEqual(['top', 'bottom'])
+    const footer = container.querySelector('footer')
+    expect(footer?.children[0]).toHaveClass('Footer__section')
+    expect(footer?.children[0]).toContainElement(container.querySelector('.Footer__top'))
+    expect(footer?.children[1]).toHaveClass('Footer__section--bottom')
   })
 
-  it('renders top, content, and bottom regions in the approved order', () => {
+  it('renders top, content, and bottom sections in the approved order', () => {
     const {container, getByText} = render(
       <MinimalFooter>
         <MinimalFooter.Content>Custom content</MinimalFooter.Content>
       </MinimalFooter>,
     )
 
-    const regions = Array.from(container.querySelectorAll('[data-footer-region]')).map(region =>
-      region.getAttribute('data-footer-region'),
-    )
-
-    expect(regions).toEqual(['top', 'content', 'bottom'])
-    expect(container.querySelector('[data-footer-region="top"] .Footer__logo')).toBeInTheDocument()
-    expect(getByText('Custom content').closest('[data-footer-region="bottom"]')).not.toBeInTheDocument()
-    expect(getByText('Custom content').closest('[data-footer-region="content"]')).toBeInTheDocument()
+    const footer = container.querySelector('footer')
+    expect(footer?.children[0]).toHaveClass('Footer__section')
+    expect(footer?.children[0]).toContainElement(container.querySelector('.Footer__top'))
+    expect(footer?.children[1]).toHaveClass('Footer__section--content')
+    expect(footer?.children[2]).toHaveClass('Footer__section--bottom')
+    expect(container.querySelector('.Footer__top .Footer__logo')).toBeInTheDocument()
+    expect(getByText('Custom content').closest('.Footer__section--bottom')).not.toBeInTheDocument()
+    expect(getByText('Custom content').closest('.Footer__section--content')).toBeInTheDocument()
   })
 
   it('places the logomark and Back to Top in the same top row', () => {
@@ -731,18 +731,18 @@ describe('MinimalFooter', () => {
     expect(logo.closest('.Footer__top-row')).toBe(backToTop.closest('.Footer__top-row'))
   })
 
-  it('places footer links and social links in the bottom region', () => {
+  it('places footer links and social links in the bottom section', () => {
     const {getByRole} = render(
       <MinimalFooter socialLinks={['x']}>
         <MinimalFooter.Link href="/test">Test Link</MinimalFooter.Link>
       </MinimalFooter>,
     )
 
-    expect(getByRole('link', {name: 'Test Link'}).closest('[data-footer-region="bottom"]')).toBeInTheDocument()
-    expect(getByRole('link', {name: 'GitHub on X'}).closest('[data-footer-region="bottom"]')).toBeInTheDocument()
+    expect(getByRole('link', {name: 'Test Link'}).closest('.Footer__section--bottom')).toBeInTheDocument()
+    expect(getByRole('link', {name: 'GitHub on X'}).closest('.Footer__section--bottom')).toBeInTheDocument()
   })
 
-  it('places Footnotes ahead of the mapped regions and preserves full region order when every optional child is present', () => {
+  it('places Footnotes ahead of the mapped sections and preserves full section order when every optional child is present', () => {
     const {getByRole} = render(
       <MinimalFooter>
         <MinimalFooter.Footnotes>
@@ -755,11 +755,14 @@ describe('MinimalFooter', () => {
     )
 
     const footer = getByRole('contentinfo')
-    const topLevelRegionNames = Array.from(footer.children).map(
-      element => element.getAttribute('data-footer-region') ?? 'footnotes',
-    )
+    const topLevelSectionNames = Array.from(footer.children).map(element => {
+      if (element.classList.contains('Footer__section--content')) return 'content'
+      if (element.classList.contains('Footer__section--bottom')) return 'bottom'
+      if (element.querySelector('.Footer__top')) return 'top'
+      return 'footnotes'
+    })
 
-    expect(topLevelRegionNames).toEqual(['footnotes', 'top', 'content', 'bottom'])
+    expect(topLevelSectionNames).toEqual(['footnotes', 'top', 'content', 'bottom'])
   })
 
   it('does not impose internal layout on MinimalFooter.Content', () => {
@@ -773,7 +776,7 @@ describe('MinimalFooter', () => {
       </MinimalFooter>,
     )
 
-    // The region wrapper only positions Content within the footer; it does not alter or
+    // The section wrapper only positions Content within the footer; it does not alter or
     // wrap the consumer's own children.
     expect(getByTestId('consumer-layout').parentElement).toHaveClass('Footer__container')
   })
@@ -789,23 +792,17 @@ describe('MinimalFooter', () => {
     expect(queryAllByRole('link', {name: isSocialLink})).toHaveLength(0)
   })
 
-  it('marks the bottom region with stable social and no-social layout hooks', () => {
+  it('applies a no-social modifier class to the bottom section', () => {
     const {container, rerender} = render(
       <MinimalFooter>
         <MinimalFooter.Link href="/test">Test Link</MinimalFooter.Link>
       </MinimalFooter>,
     )
 
-    expect(container.querySelector('[data-footer-region="bottom"] section')).toHaveAttribute(
-      'data-footer-layout',
-      'social',
-    )
+    expect(container.querySelector('.Footer__bottom')).not.toHaveClass('Footer__bottom--no-social')
 
     rerender(<MinimalFooter socialLinks={false} />)
-    expect(container.querySelector('[data-footer-region="bottom"] section')).toHaveAttribute(
-      'data-footer-layout',
-      'no-social',
-    )
+    expect(container.querySelector('.Footer__bottom')).toHaveClass('Footer__bottom--no-social')
   })
 
   it('preserves logo href, analytics, accessibility, and semantic styling', () => {
@@ -891,15 +888,15 @@ describe('MinimalFooter', () => {
     expect(queryByRole('button', {name: 'Second'})).not.toBeInTheDocument()
   })
 
-  it('renders Back to Top within the top region', () => {
+  it('renders Back to Top within the top section', () => {
     const {getByRole} = render(
       <MinimalFooter>
         <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
       </MinimalFooter>,
     )
 
     const button = getByRole('button', {name: 'Back to top'})
-    expect(button.closest('[data-footer-region="top"]')).toBeInTheDocument()
+    expect(button.closest('.Footer__section')).toBeInTheDocument()
   })
 
   it('forwards ARIA, data, analytics, and native button attributes', () => {

packages/react/src/MinimalFooter/MinimalFooter.tsx

@@ -131,11 +131,11 @@ function parseRootChildren(children: React.ReactNode) {
 }
 
 /**
- * The footer's top-level regions, in rendering order. `top` and `bottom`
+ * The footer's top-level sections, in rendering order. `top` and `bottom`
  * are always populated, while `content` is only rendered when a
  * `MinimalFooter.Content` child is present.
  */
-type FooterRegionName = 'top' | 'content' | 'bottom'
+type FooterSectionName = 'top' | 'content' | 'bottom'
 
 function Root({
   className,
@@ -152,7 +152,7 @@ function Root({
   const renderedSocialLinks = resolvedSocialLinks === false ? [] : resolvedSocialLinks
   const hasSocialLinks = renderedSocialLinks.length > 0
 
-  const topRegion = (
+  const topSection = (
     <section className={styles.Footer__top}>
       <div className={styles.Footer__container}>
         <div className={styles['Footer__top-row']}>
@@ -163,8 +163,8 @@ function Root({
     </section>
   )
 
-  const bottomRegion = (
-    <section className={styles.Footer__bottom} data-footer-layout={hasSocialLinks ? 'social' : 'no-social'}>
+  const bottomSection = (
+    <section className={clsx(styles.Footer__bottom, !hasSocialLinks && styles['Footer__bottom--no-social'])}>
       <div className={styles.Footer__container}>
         <div className={styles['Footer__bottom-row']}>
           <div className={styles['Footer__copyright-and-links']}>
@@ -179,20 +179,28 @@ function Root({
     </section>
   )
 
-  const regions: {name: FooterRegionName; node: React.ReactNode}[] = [
-    {name: 'top', node: topRegion},
-    {name: 'content', node: content},
-    {name: 'bottom', node: bottomRegion},
+  const sections: {name: FooterSectionName; node: React.ReactNode; className: string}[] = [
+    {name: 'top', node: topSection, className: styles.Footer__section},
+    {
+      name: 'content',
+      node: content,
+      className: clsx(styles.Footer__section, styles['Footer__section--content']),
+    },
+    {
+      name: 'bottom',
+      node: bottomSection,
+      className: clsx(styles.Footer__section, styles['Footer__section--bottom']),
+    },
   ]
 
   return (
     <footer className={clsx(styles.Footer, className)} {...rest}>
       {footnotes}
-      {regions
-        .filter(region => Boolean(region.node))
-        .map(region => (
-          <div key={region.name} data-footer-region={region.name}>
-            {region.node}
+      {sections
+        .filter(section => Boolean(section.node))
+        .map(section => (
+          <div key={section.name} className={section.className}>
+            {section.node}
           </div>
         ))}
     </footer>