Add new landing page article grid (#57757)

Author: Ebonsignori

data/ui.yml

@@ -261,18 +261,17 @@ footer:
   expert_services: Expert services
   blog: Blog
   machine: Some of this content may be machine- or AI-translated.
-bespoke_landing:
-  articles: Articles
-  all_categories: All categories
-  search_articles: Search articles
-discovery_landing:
-  recommended: Recommended
-  articles: Articles
-  all_categories: All categories
-  search_articles: Search articles
 journey_landing:
   articles: '{{ number }} Articles'
 product_landing:
+  article_grid:
+    heading: Articles
+    all_categories: All categories
+    search_articles: Search articles
+    no_articles_found: No articles found matching your criteria.
+    showing_results: Showing {start}-{end} of {total}
+  carousel:
+    recommended: Recommended
   quickstart: Quickstart
   reference: Reference
   overview: Overview

src/fixtures/fixtures/data/ui.yml

@@ -261,18 +261,17 @@ footer:
   expert_services: Expert services
   blog: Blog
   machine: Some of this content may be machine- or AI-translated.
-bespoke_landing:
-  articles: Articles
-  all_categories: All categories
-  search_articles: Search articles
-discovery_landing:
-  recommended: Recommended
-  articles: Articles
-  all_categories: All categories
-  search_articles: Search articles
 journey_landing:
   articles: '{{ number }} Articles'
 product_landing:
+  article_grid:
+    heading: Articles
+    all_categories: All categories
+    search_articles: Search articles
+    no_articles_found: No articles found matching your criteria.
+    showing_results: Showing {start}-{end} of {total}
+  carousel:
+    recommended: Recommended
   quickstart: Quickstart
   reference: Reference
   overview: Overview

src/frame/middleware/context/generic-toc.ts

@@ -106,6 +106,8 @@ export default async function genericToc(req: ExtendedRequest, res: Response, ne
       recurse: isRecursive,
       renderIntros,
       includeHidden,
+      textOnly:
+        isNewLandingPageFeature(req) || isNewLandingPage(req.context.currentLayoutName || ''),
     })
   }
 
@@ -120,6 +122,8 @@ export default async function genericToc(req: ExtendedRequest, res: Response, ne
           ? true
           : false,
       includeHidden,
+      textOnly:
+        isNewLandingPageFeature(req) || isNewLandingPage(req.context.currentLayoutName || ''),
     })
   }
 
@@ -132,6 +136,7 @@ type Options = {
   recurse: boolean
   renderIntros: boolean
   includeHidden: boolean
+  textOnly: boolean
 }
 
 async function getTocItems(node: Tree, context: Context, opts: Options): Promise<ToC[]> {
@@ -154,13 +159,13 @@ async function getTocItems(node: Tree, context: Context, opts: Options): Promise
         if (page.rawIntro) {
           // The intro can contain Markdown even though it might not
           // contain any Liquid.
-          // Deliberately don't use `textOnly:true` here because we intend
-          // to display the intro, in a table of contents component,
-          // with the HTML (dangerouslySetInnerHTML).
+          // Use textOnly for new landing pages to strip HTML tags.
+          // For other pages, we intend to display the intro in a table of contents
+          // component with the HTML (dangerouslySetInnerHTML).
           intro = await page.renderProp(
             'rawIntro',
             context,
-            context.currentLayoutName === 'category-landing' ? { textOnly: true } : {},
+            opts.textOnly ? { textOnly: true } : {},
           )
         }
       }

src/landings/components/bespoke/BespokeLanding.tsx

@@ -20,7 +20,7 @@ export const BespokeLanding = () => {
       <div data-search="article-body">
         <LandingHero title={title} intro={intro} heroImage={heroImage} introLinks={introLinks} />
 
-        <div data-search="hide">
+        <div className="container-xl px-3 px-md-6 mt-6 mb-4">
           <ArticleGrid flatArticles={flatArticles} />
         </div>
       </div>

src/landings/components/shared/LandingArticleGridWithFilter.module.scss

@@ -1,6 +1,165 @@
 @import "@primer/css/support/variables/layout.scss";
 @import "@primer/css/support/mixins/layout.scss";
 
+.headerTitleText {
+  font-size: var(--h3-size, 1.25rem);
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: var(--heading-lineHeight);
+}
+
+.noArticlesContainer {
+  width: 100%;
+  text-align: left;
+}
+
+.noArticlesText {
+  color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
+}
+
+.articleCardBox {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  min-height: 7.5rem;
+  box-shadow:
+    0 0.0625rem 0.1875rem 0 rgba(31, 35, 40, 0.08),
+    0 0.0625rem 0 0 rgba(31, 35, 40, 0.06);
+}
+
+.cardHeader {
+  display: flex;
+  flex-direction: column;
+}
+
+.cardTitle {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.cardTitleLink {
+  color: var(--fgColor-accent);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.cardIntro {
+  margin: 0;
+  color: var(--fgColor-muted);
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.tagsContainer {
+  margin-bottom: 0.5rem;
+}
+
+.filterHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-bottom: 1px solid var(--borderColor-default);
+  padding-bottom: 1rem;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  gap: 0.75rem;
+
+  // Medium screens: horizontal layout with tighter spacing
+  @include breakpoint(md) {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  // Large screens: horizontal layout with normal spacing
+  @include breakpoint(lg) {
+    gap: 1rem;
+  }
+}
+
+.titleAndDropdownRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  flex-shrink: 0;
+
+  // Medium screens and up: maintain tight spacing, don't grow
+  @include breakpoint(md) {
+    gap: 1rem;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+}
+
+.headerTitle {
+  flex-shrink: 0;
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-align: left;
+  width: auto;
+
+  // All screen sizes: keep title compact
+  @include breakpoint(md) {
+    flex-shrink: 0;
+    width: auto;
+  }
+}
+
+.categoryDropdown {
+  min-width: 12rem;
+  flex: 1;
+
+  button {
+    width: fit-content;
+    text-align: left !important;
+
+    span {
+      justify-content: start !important;
+    }
+
+    // Medium screens: full width but constrained by container
+    @include breakpoint(md) {
+      width: 100%;
+    }
+  }
+
+  // Medium screens: smaller min-width and constrained max-width
+  @include breakpoint(md) {
+    min-width: 20rem;
+    max-width: 30%;
+  }
+
+  // Large screens: larger sizing
+  @include breakpoint(lg) {
+    min-width: 20rem;
+    max-width: 40%;
+  }
+}
+
+.searchContainer {
+  margin-left: 0;
+  width: auto;
+
+  // Medium screens: flexible width with spacing
+  @include breakpoint(md) {
+    flex: 0 1 25%;
+    min-width: 12.5rem;
+    margin-left: auto;
+  }
+
+  // Large screens: larger width with auto margin
+  @include breakpoint(lg) {
+    width: 30%;
+    flex: 0 0 30%;
+    margin-left: auto;
+  }
+}
+
 .articleGrid {
   display: grid;
   gap: 1.5rem;
@@ -25,12 +184,24 @@
   height: 100%;
 }
 
-.cardContent {
+.paginationContainer {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  gap: 0.75rem;
+
+  // Medium screens and up: horizontal layout with space between
+  @include breakpoint(md) {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 0;
+  }
 }
 
-.cardFooter {
-  margin-top: auto;
+.showingResults {
+  color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
+  font-size: 0.875rem;
 }