feat(site): convert description prop on PageSection to named slot

apps/site/src/pages/index.astro

@@ -162,9 +162,9 @@ const nextEvent = events[0];
     <PageSection
       eyebrow="Search Hosted Data"
       title="Discover Data in BDC"
-      description="Search by disease, phenotype, biological process, or anatomical entity."
       action={{ label: 'View all data search tools', href: '/data/explore' }}
     >
+      <p slot="description">Search by disease, phenotype, biological process, or anatomical entity.</p>
       <DugSearchBar
         id="home-discover-search"
         placeholder="Try “asthma,” “blood pressure,” or “atrial fibrillation”"
@@ -177,10 +177,15 @@ const nextEvent = events[0];
 
     <PageSection
       title="Start Your Research Journey"
-      description="BDC is a research community where investigators can find, access, store, share, and analyze heart, lung, blood, and sleep data in secure cloud workspaces. As one of NHLBI's data repositories, BDC helps researchers share scientific data, reproduce findings, and reuse trusted resources to accelerate biomedical discovery."
       centered
       tone="muted"
     >
+      <p slot="description">
+        BDC is a research community where investigators can find, access, store, share, and analyze
+        heart, lung, blood, and sleep data in secure cloud workspaces. As one of NHLBI's data
+        repositories, BDC helps researchers share scientific data, reproduce findings, and reuse
+        trusted resources to accelerate biomedical discovery.
+      </p>
       <div class="margin-top-5 margin-bottom-0 text-center display-flex text-primary-darker flex-align-center flex-justify-center">
         <IconBadge icon="support" tone="warm" size={4} class="margin-right-1" />
         <span class="margin-right-1">Need help with BDC?</span>{' '}
@@ -254,10 +259,13 @@ const nextEvent = events[0];
         <PageSection
           eyebrow="Research in Action"
           title="Latest Publications"
-          description="Explore the latest BDC-enabled publications and see how investigators are using BDC data and tools to advance heart, lung, blood, and sleep research"
           action={{ label: 'View all publications', href: '/news/bdc-enabled-research' }}
           tone="highlight"
         >
+          <p slot="description">
+            Explore the latest BDC-enabled publications and see how investigators are using BDC
+            data and tools to advance heart, lung, blood, and sleep research.
+          </p>
           <div class="display-flex flex-column">
             {featuredPublications.map((publication) => (
               <div class="margin-bottom-2">

packages/ui-astro/README.md

@@ -23,5 +23,6 @@ Shared Astro UI components for BDC apps.
 
 ## Notes
 
-- Components are presentational and receive all content via props.
+- Components are presentational and receive structured content through typed props.
+- Components can also receive markup through slots: the default slot for primary child content and named slots for content rendered in designated locations.
 - Components use USWDS utility classes and depend on the app's USWDS/theme setup.

packages/ui-astro/src/layout/PageSection.astro

@@ -9,7 +9,6 @@ interface SectionAction {
 interface Props extends astroHTML.JSX.HTMLAttributes<'section'> {
   eyebrow?: string;
   title: string;
-  description?: string;
   action?: SectionAction;
   centered?: boolean;
   tone?: 'default' | 'muted' | 'dark' | 'highlight';
@@ -20,13 +19,14 @@ const {
   class: className,
   eyebrow,
   title,
-  description,
   action,
   centered = false,
   tone = 'default',
   ...rest
 } = Astro.props;
 
+const hasDescription = Astro.slots.has('description');
+
 const classes = [
   'page-section',
   'padding-y-8',
@@ -51,7 +51,11 @@ const classes = [
     </div>
     <header class:list={['page-section__head-main', centered && 'margin-x-auto text-center']}>
       <h2 class="page-section__title margin-0 width-full">{title}</h2>
-      {description && <p class="page-section__description margin-0 margin-top-2 line-height-sans-5">{description}</p>}
+      {hasDescription && (
+        <div class="page-section__description margin-top-2 line-height-sans-5">
+          <slot name="description" />
+        </div>
+      )}
     </header>
     {action && centered && (
       <p class="page-section__action-centered margin-top-1 margin-bottom-3 text-center">