fix!: refactor off-cycle CTA to use BoxHeader and footer slot

.reports/embedded-react-sdk.api.md

@@ -815,7 +815,7 @@ export interface BoxHeaderProps {
 
 // @public
 export interface BoxProps {
-    children: ReactNode;
+    children?: ReactNode;
     className?: string;
     footer?: ReactNode;
     header?: ReactNode;

docs/reference/component-inventory.md

@@ -221,7 +221,7 @@ Renders a sectioned layout container with distinct header, body, and footer area
 
 | Property | Type | Description |
 | ------ | ------ | ------ |
-| `children` | `ReactNode` | Content rendered inside the box body. |
+| `children?` | `ReactNode` | Content rendered inside the box body. |
 | `className?` | `string` | CSS className to be applied to the root element. |
 | `footer?` | `ReactNode` | Optional content rendered below the body in the box footer section. |
 | `header?` | `ReactNode` | Optional content rendered above the body in the box header section. |

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

@@ -28,3 +28,7 @@
   padding: toRem(20);
   border-top: 1px solid var(--g-colorBorderSecondary);
 }
+
+.header + .footer {
+  border-top: none;
+}

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

@@ -13,7 +13,9 @@ export function Box({ children, header, footer, withPadding = true, className }:
   return (
     <div className={cn(styles.root, className)} data-testid="data-box">
       {header && <div className={styles.header}>{header}</div>}
-      <div className={withPadding ? styles.content : styles.contentFlush}>{children}</div>
+      {children && (
+        <div className={withPadding ? styles.content : styles.contentFlush}>{children}</div>
+      )}
       {footer && <div className={styles.footer}>{footer}</div>}
     </div>
   )

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

@@ -11,7 +11,7 @@ export interface BoxProps {
   /**
    * Content rendered inside the box body.
    */
-  children: ReactNode
+  children?: ReactNode
   /**
    * Optional content rendered above the body in the box header section.
    */

src/components/Payroll/PayrollList/PayrollListPresentation.module.scss

@@ -20,22 +20,11 @@
   white-space: nowrap;
 }
 
-.offCycleCta[data-testid] {
-  background-color: var(--g-colorBodyAccent);
-}
-
-.offCycleCtaText {
-  display: flex;
-  flex-direction: column;
-  gap: toRem(4);
-  min-width: 0;
+.offCycleCta {
+  width: 100%;
+  max-width: toRem(640);
 }
 
 .menuPlaceholder {
   visibility: hidden;
 }
-
-.offCycleCtaButton {
-  flex-shrink: 0;
-  white-space: nowrap;
-}

src/components/Payroll/PayrollList/PayrollListPresentation.tsx

@@ -94,7 +94,7 @@ export const PayrollListPresentation = ({
   dateRangeFilter,
   hasUnprocessedTransitions = false,
 }: PayrollListPresentationProps) => {
-  const { Box, Button, ButtonIcon, Dialog, Heading, Text, Alert } = useComponentContext()
+  const { Box, BoxHeader, Button, ButtonIcon, Dialog, Heading, Text, Alert } = useComponentContext()
   useI18n('Payroll.PayrollList')
   const { t } = useTranslation('Payroll.PayrollList')
   const dateFormatter = useDateFormatter()
@@ -453,26 +453,21 @@ export const PayrollListPresentation = ({
         >
           {t('deletePayrollDialog.body')}
         </Dialog>
-        <Box className={styles.offCycleCta}>
-          <Flex
-            flexDirection={{ base: 'column', medium: 'row' }}
-            justifyContent="space-between"
-            alignItems={{ base: 'stretch', medium: 'center' }}
-            gap={16}
-          >
-            <Flex flexDirection="column" gap={4}>
-              <Text weight="bold">{t('offCycleCta.title')}</Text>
-              <Text variant="supporting" size="sm">
-                {t('offCycleCta.description')}
-              </Text>
-            </Flex>
-            <div className={styles.offCycleCtaButton}>
+        <div className={styles.offCycleCta}>
+          <Box
+            header={
+              <BoxHeader
+                title={t('offCycleCta.title')}
+                description={t('offCycleCta.description')}
+              />
+            }
+            footer={
               <Button variant="secondary" onClick={onRunOffCyclePayroll}>
                 {t('offCycleCta.button')}
               </Button>
-            </div>
-          </Flex>
-        </Box>
+            }
+          />
+        </div>
       </Flex>
     </div>
   )