WIP feat: add optional header prop to Box component

docs/component-adapter/component-inventory.md

@@ -100,6 +100,7 @@
 | Prop          | Type              | Required | Description                                                               |
 | ------------- | ----------------- | -------- | ------------------------------------------------------------------------- |
 | **children**  | `React.ReactNode` | Yes      | Content to be displayed inside the box                                    |
+| **header**    | `React.ReactNode` | No       | Content rendered at the top of the box with an edge-to-edge bottom border |
 | **footer**    | `React.ReactNode` | No       | Content rendered at the bottom of the box with an edge-to-edge top border |
 | **className** | `string`          | No       | CSS className to be applied                                               |
 

src/components/Common/UI/Box/Box.module.scss

@@ -6,6 +6,11 @@
   border: 1px solid var(--g-colorBorderSecondary);
 }
 
+.boxHeader {
+  padding: toRem(20);
+  border-bottom: 1px solid var(--g-colorBorderSecondary);
+}
+
 .boxBody {
   padding: toRem(20);
 }

src/components/Common/UI/Box/Box.stories.tsx

@@ -22,6 +22,17 @@ export const Default: Story = {
   args: {},
 }
 
+export const WithHeader: Story = {
+  render: () => {
+    const Components = useComponentContext()
+    return (
+      <Components.Box header={<Components.Heading as="h2">Section Title</Components.Heading>}>
+        <Components.Text>This is the main content area with padding.</Components.Text>
+      </Components.Box>
+    )
+  },
+}
+
 export const WithFooter: Story = {
   render: () => {
     const Components = useComponentContext()
@@ -39,6 +50,24 @@ export const WithFooter: Story = {
   },
 }
 
+export const WithHeaderAndFooter: Story = {
+  render: () => {
+    const Components = useComponentContext()
+    return (
+      <Components.Box
+        header={<Components.Heading as="h2">Section Title</Components.Heading>}
+        footer={
+          <Components.Button variant="primary" onClick={() => {}}>
+            Save
+          </Components.Button>
+        }
+      >
+        <Components.Text>This is the main content area with padding.</Components.Text>
+      </Components.Box>
+    )
+  },
+}
+
 export const WithCustomClassName: Story = {
   decorators: [
     Story => (

src/components/Common/UI/Box/Box.test.tsx

@@ -10,6 +10,18 @@ describe('Box Component', () => {
     expect(screen.getByText('Test Content')).toBeInTheDocument()
   })
 
+  test('renders header when provided', () => {
+    renderWithProviders(<Box header={<h2>Title</h2>}>Content</Box>)
+
+    expect(screen.getByText('Title')).toBeInTheDocument()
+  })
+
+  test('does not render header when omitted', () => {
+    renderWithProviders(<Box>Content</Box>)
+
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument()
+  })
+
   test('renders footer when provided', () => {
     renderWithProviders(<Box footer={<button>Save</button>}>Content</Box>)
 
@@ -50,13 +62,28 @@ describe('Box Component', () => {
           ),
         },
       },
+      {
+        name: 'box with header',
+        props: {
+          children: 'Main content',
+          header: <h2>Title</h2>,
+        },
+      },
       {
         name: 'box with footer',
         props: {
           children: 'Main content',
           footer: <button>Save</button>,
         },
       },
+      {
+        name: 'box with header and footer',
+        props: {
+          children: 'Main content',
+          header: <h2>Title</h2>,
+          footer: <button>Save</button>,
+        },
+      },
     ]
 
     it.each(testCases)(

src/components/Common/UI/Box/Box.tsx

@@ -2,9 +2,10 @@ import cn from 'classnames'
 import styles from './Box.module.scss'
 import { type BoxProps } from '@/components/Common/UI/Box/BoxTypes'
 
-export function Box({ children, footer, className }: BoxProps) {
+export function Box({ children, header, footer, className }: BoxProps) {
   return (
     <div className={cn(styles.boxContainer, className)} data-testid="data-box">
+      {header && <div className={styles.boxHeader}>{header}</div>}
       <div className={styles.boxBody}>{children}</div>
       {footer && <div className={styles.boxFooter}>{footer}</div>}
     </div>

src/components/Common/UI/Box/BoxTypes.ts

@@ -5,6 +5,10 @@ export interface BoxProps {
    * Content to be displayed inside the box
    */
   children: ReactNode
+  /**
+   * Content rendered at the top of the box with an edge-to-edge bottom border
+   */
+  header?: ReactNode
   /**
    * Content rendered at the bottom of the box with an edge-to-edge top border
    */