[Brand Refactor] Fixes CTABanner (#1362)

Author: danielguillan

.changeset/soft-banners-sparkle.md

@@ -1,4 +1,4 @@
-import React, {render, cleanup} from '@testing-library/react'
+import {render, cleanup} from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import {ButtonGroup} from './ButtonGroup'
@@ -26,6 +26,19 @@ describe('ButtonGroup', () => {
     expect(buttonGroupEl.classList).toContain(expectedClass)
   })
 
+  it('forwards a custom className alongside the default class', () => {
+    const {getByTestId} = render(
+      <ButtonGroup data-testid="test" className="custom-button-group">
+        <Button>Primary Action</Button>
+        <Button>Secondary Action</Button>
+      </ButtonGroup>,
+    )
+
+    const buttonGroupEl = getByTestId('test')
+    expect(buttonGroupEl).toHaveClass('ButtonGroup')
+    expect(buttonGroupEl).toHaveClass('custom-button-group')
+  })
+
   it('renders buttons with the correct element type when buttonAs is set', () => {
     const expectedTag = 'a'
 

packages/react/src/ButtonGroup/ButtonGroup.test.tsx

@@ -1,4 +1,5 @@
 import React, {forwardRef, type Ref} from 'react'
+import {clsx} from 'clsx'
 import type {BaseProps} from '../component-helpers'
 import {Button, ButtonProps} from '../Button'
 import styles from './ButtonGroup.module.css'
@@ -29,7 +30,7 @@ export const ButtonGroup = forwardRef(
       .slice(0, 2)
 
     return (
-      <section ref={ref} className={styles.ButtonGroup} {...props}>
+      <section ref={ref} {...props} className={clsx(styles.ButtonGroup, className)}>
         {buttonsToRender as React.ReactElement[]}
       </section>
     )

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -75,12 +75,16 @@
 }
 
 .CTABanner-container {
-  padding: var(--base-size-64) var(--base-size-32);
+  padding: var(--base-size-64) var(--base-size-20);
   z-index: 1;
   width: 100%;
   box-sizing: border-box;
 }
 
+.CTABanner-container--rounded {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
 .CTABanner--variant-balanced .CTABanner-container {
   padding-inline: var(--base-size-20);
   padding-block: var(--base-size-32);
@@ -92,16 +96,17 @@
 }
 
 .CTABanner-content {
+  --CTABanner-content-gap: var(--base-size-16);
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-16);
+  gap: var(--CTABanner-content-gap);
   align-items: flex-start;
   max-width: 800px;
   margin: 0 auto;
 }
 
 .CTABanner--variant-minimal .CTABanner-content {
-  gap: 0;
+  --CTABanner-content-gap: 0;
 }
 
 .CTABanner--variant-balanced .CTABanner-content,
@@ -170,11 +175,8 @@
 
 /* Large breakpoint and up */
 @media screen and (min-width: 63.25rem) {
-  .CTABanner-content {
-    gap: var(--base-size-24);
-  }
   .CTABanner--variant-balanced .CTABanner-content {
-    gap: var(--base-size-32);
+    --CTABanner-content-gap: var(--base-size-32);
   }
   .CTABanner-container {
     padding: var(--base-size-96) var(--base-size-64);
@@ -311,3 +313,8 @@
 .CTABanner-description.CTABanner-description:has(code) {
   line-height: calc(1lh * 1.25);
 }
+
+.CTABanner-buttonGroup {
+  margin-block-start: calc(-1 * var(--CTABanner-content-gap, 0px));
+  padding-block-start: var(--base-size-12);
+}

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

@@ -5,10 +5,12 @@ declare const styles: {
   readonly "CTABanner--variant-balanced": string;
   readonly "CTABanner--variant-default": string;
   readonly "CTABanner--variant-minimal": string;
+  readonly "CTABanner-buttonGroup": string;
   readonly "CTABanner-container": string;
   readonly "CTABanner-container--background": string;
   readonly "CTABanner-container--border": string;
   readonly "CTABanner-container--border-gridlines": string;
+  readonly "CTABanner-container--rounded": string;
   readonly "CTABanner-content": string;
   readonly "CTABanner-content--center": string;
   readonly "CTABanner-description": string;

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

@@ -298,6 +298,25 @@ describe('CTABanner', () => {
     expect(ctaBannerEl).toHaveClass('CTABanner--variant-minimal')
   })
 
+  it.each(['default', 'balanced', 'minimal'] as const)(
+    'applies rounded corners to the %s variant by default',
+    variant => {
+      const {getByTestId} = render(
+        <CTABanner variant={variant} data-testid="test">
+          <CTABanner.Heading>This is your heading</CTABanner.Heading>
+          {variant === 'balanced' && <CTABanner.Image src="image.png" alt="test" />}
+          {variant === 'minimal' && (
+            <CTABanner.ButtonGroup>
+              <Button>Action</Button>
+            </CTABanner.ButtonGroup>
+          )}
+        </CTABanner>,
+      )
+
+      expect(getByTestId('test').firstChild).toHaveClass('CTABanner-container--rounded')
+    },
+  )
+
   it('can render CTABanner.Image in the default variant alongside other children', () => {
     const {getByAltText} = render(
       <CTABanner>
@@ -383,6 +402,7 @@ describe('CTABanner', () => {
     const sectionEl = getByTestId('test')
     expect(sectionEl.parentElement).toHaveClass('CTABanner-outer-container--border')
     expect(sectionEl.firstChild).toHaveClass('CTABanner-container--border-gridlines')
+    expect(sectionEl.firstChild).not.toHaveClass('CTABanner-container--rounded')
   })
 
   it('does not render the hasGridLines outer border wrapper by default', () => {

packages/react/src/CTABanner/CTABanner.test.tsx

@@ -237,6 +237,7 @@ const Root = forwardRef(
               styles['CTABanner-container'],
               hasBorder && styles['CTABanner-container--border'],
               hasGridLines && styles['CTABanner-container--border-gridlines'],
+              !hasGridLines && styles['CTABanner-container--rounded'],
               hasBackground && styles['CTABanner-container--background'],
             )}
           >
@@ -319,7 +320,13 @@ const _ButtonGroup = forwardRef(
     ref: Ref<HTMLDivElement>,
   ) => {
     return (
-      <ButtonGroup buttonSize={buttonSize} buttonsAs={buttonsAs} className={className} ref={ref} {...props}>
+      <ButtonGroup
+        buttonSize={buttonSize}
+        buttonsAs={buttonsAs}
+        className={clsx(styles['CTABanner-buttonGroup'], className)}
+        ref={ref}
+        {...props}
+      >
         {children}
       </ButtonGroup>
     )