Updating name: sublanding to guides and using DropdownMenu for type/t…

…opics filter (github#23290)

* updating sublanding to guides page and using DropdownMenu primer component

* fix linting error

* remove unnecessary import

* updating translation files

* move data-testid

* trying to fix test

* fix browser tests

* Update content/README.md

Co-authored-by: Francis <15894826+francisfuzz@users.noreply.github.com>

Co-authored-by: Francis <15894826+francisfuzz@users.noreply.github.com>

components/context/ProductSubLandingContext.tsx → components/context/ProductGuidesContext.tsx

@@ -17,7 +17,7 @@ export type ArticleGuide = {
   topics: Array<string>
 }
 
-export type ProductSubLandingContextT = {
+export type ProductGuidesContextT = {
   title: string
   intro: string
   featuredTrack?: FeaturedTrack
@@ -26,21 +26,21 @@ export type ProductSubLandingContextT = {
   allTopics?: Array<string>
 }
 
-export const ProductSubLandingContext = createContext<ProductSubLandingContextT | null>(null)
+export const ProductGuidesContext = createContext<ProductGuidesContextT | null>(null)
 
-export const useProductSubLandingContext = (): ProductSubLandingContextT => {
-  const context = useContext(ProductSubLandingContext)
+export const useProductGuidesContext = (): ProductGuidesContextT => {
+  const context = useContext(ProductGuidesContext)
 
   if (!context) {
     throw new Error(
-      '"useProductSubLandingContext" may only be used inside "ProductSubLandingContext.Provider"'
+      '"useProductGuidesContext" may only be used inside "ProductGuidesContext.Provider"'
     )
   }
 
   return context
 }
 
-export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
+export const getProductGuidesContextFromRequest = (req: any): ProductGuidesContextT => {
   const page = req.context.page
 
   return {

components/sublanding/ArticleCard.tsx → components/guides/ArticleCard.tsx

@@ -1,4 +1,4 @@
-import { ArticleGuide } from 'components/context/ProductSubLandingContext'
+import { ArticleGuide } from 'components/context/ProductGuidesContext'
 import { Label } from '@primer/components'
 
 type Props = {

components/guides/ArticleCards.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react'
+
+import {
+  ArticleGuide,
+  useProductGuidesContext,
+} from 'components/context/ProductGuidesContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ArticleCard } from './ArticleCard'
+import { DropdownMenu } from '@primer/components'
+import { ItemInput } from '@primer/components/lib/ActionList/List'
+
+const PAGE_SIZE = 9
+export const ArticleCards = () => {
+  const { t } = useTranslation('product_guides')
+  const guideTypes: Record<string, string> = t('guide_types')
+  const { allTopics, includeGuides } = useProductGuidesContext()
+  const [numVisible, setNumVisible] = useState(PAGE_SIZE)
+  const [typeFilter, setTypeFilter] = useState<ItemInput | undefined>()
+  const [topicFilter, setTopicFilter] = useState<ItemInput | undefined>()
+  const [filteredResults, setFilteredResults] = useState<Array<ArticleGuide>>([])
+
+  useEffect(() => {
+    setNumVisible(PAGE_SIZE)
+    setFilteredResults(
+      (includeGuides || []).filter((card) => {
+        const matchesType = card.type === typeFilter?.key
+        const matchesTopic = card.topics.some((key) => key === topicFilter?.key)
+        return (typeFilter?.key ? matchesType : true) && (topicFilter?.key ? matchesTopic : true)
+      })
+    )
+  }, [typeFilter, topicFilter])
+
+  const isUserFiltering = typeFilter !== undefined || topicFilter !== undefined
+
+  const guides = isUserFiltering ? filteredResults : includeGuides || []
+
+  const types = Object.entries(guideTypes).map(([key, val]) => {
+    return (
+      {text: val, key: key}
+    )
+  }) as ItemInput[]
+
+  types.unshift({text: t('filters.all'), key: undefined})
+
+  const topics = allTopics?.map((topic) => {
+    return (
+      {text: topic, key: topic}
+    )
+  }) as ItemInput[]
+
+  topics.unshift({text: t('filters.all'), key: undefined})
+
+  return (
+    <div>
+      <label htmlFor="guide-filter-form">{t('filter_instructions')}</label>
+      <form name="guide-filter-form" className="mt-2 mb-5 d-flex d-flex">
+        <div data-testid="card-filter-types">
+          <label htmlFor="type" className="text-uppercase f6 color-fg-muted d-block">
+            {t('filters.type')}
+          </label>
+            <DropdownMenu
+              aria-label="guide types"
+              data-testid="types-dropdown"
+              placeholder={t('filters.all')}
+              items={types}
+              selectedItem={typeFilter}
+              onChange={setTypeFilter} />
+        </div>
+
+        <div data-testid="card-filter-topics" className="mx-4">
+          <label htmlFor="topic" className="text-uppercase f6 color-fg-muted d-block">
+            {t('filters.topic')}
+          </label>
+            <DropdownMenu
+              aria-label="guide topics"
+              data-testid="topics-dropdown"
+              placeholder={t('filters.all')}
+              items={topics}
+              selectedItem={topicFilter}
+              onChange={setTopicFilter} />
+        </div>
+      </form>
+
+      <div role="status" className="color-fg-muted">
+        {guides.length === 0
+          ? t('guides_found.none')
+          : guides.length === 1
+          ? t('guides_found.one')
+          : t('guides_found.multiple').replace('{n}', guides.length)}
+      </div>
+
+      <div className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
+        {guides.slice(0, numVisible).map((card) => {
+          return <ArticleCard key={card.href} card={card} typeLabel={guideTypes[card.type]} />
+        })}
+      </div>
+
+      {guides.length > numVisible && (
+        <button
+          className="col-12 mt-5 text-center text-bold color-fg-accent btn-link"
+          onClick={() => setNumVisible(numVisible + PAGE_SIZE)}
+        >
+          {t('load_more')}
+        </button>
+      )}
+    </div>
+  )
+}

components/sublanding/SubLandingHero.tsx → components/guides/GuidesHero.tsx

@@ -1,15 +1,15 @@
 import cx from 'classnames'
-import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { useProductGuidesContext } from 'components/context/ProductGuidesContext'
 import { ArrowRightIcon, StarFillIcon } from '@primer/octicons-react'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { Link } from 'components/Link'
 import { TruncateLines } from 'components/ui/TruncateLines'
 import { Lead } from 'components/ui/Lead'
-import styles from './SubLandingHero.module.scss'
+import styles from './GuidesHero.module.scss'
 
-export const SubLandingHero = () => {
-  const { title, intro, featuredTrack } = useProductSubLandingContext()
-  const { t } = useTranslation('product_sublanding')
+export const GuidesHero = () => {
+  const { title, intro, featuredTrack } = useProductGuidesContext()
+  const { t } = useTranslation('product_guides')
   const cardWidth = 280
 
   const guideItems = featuredTrack?.guides?.map((guide) => (

components/sublanding/LearningTrack.tsx → components/guides/LearningTrack.tsx

@@ -2,7 +2,7 @@ import cx from 'classnames'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { ArrowRightIcon } from '@primer/octicons-react'
 import { useState } from 'react'
-import { FeaturedTrack } from 'components/context/ProductSubLandingContext'
+import { FeaturedTrack } from 'components/context/ProductGuidesContext'
 import { TruncateLines } from 'components/ui/TruncateLines'
 import slugger from 'github-slugger'
 import styles from './LearningTrack.module.scss'
@@ -17,7 +17,7 @@ export const LearningTrack = ({ track }: Props) => {
   const showAll = () => {
     setNumVisible(track?.guides?.length || 0)
   }
-  const { t } = useTranslation('product_sublanding')
+  const { t } = useTranslation('product_guides')
   const slug = track?.title ? slugger.slug(track?.title) : ''
 
   return (

components/sublanding/LearningTracks.tsx → components/guides/LearningTracks.tsx

@@ -1,8 +1,8 @@
-import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
-import { LearningTrack } from 'components/sublanding/LearningTrack'
+import { useProductGuidesContext } from 'components/context/ProductGuidesContext'
+import { LearningTrack } from 'components/guides/LearningTrack'
 
 export const LearningTracks = () => {
-  const { learningTracks } = useProductSubLandingContext()
+  const { learningTracks } = useProductGuidesContext()
 
   return (
     <div className="d-flex flex-wrap flex-items-start my-5 gutter">

components/sublanding/ProductSubLanding.tsx → components/guides/ProductGuides.tsx

@@ -1,19 +1,19 @@
 import { DefaultLayout } from 'components/DefaultLayout'
-import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { useProductGuidesContext } from 'components/context/ProductGuidesContext'
 import React from 'react'
 import { LandingSection } from 'components/landing/LandingSection'
-import { SubLandingHero } from 'components/sublanding/SubLandingHero'
-import { LearningTracks } from 'components/sublanding/LearningTracks'
-import { ArticleCards } from 'components/sublanding/ArticleCards'
+import { GuidesHero } from 'components/guides/GuidesHero'
+import { LearningTracks } from 'components/guides/LearningTracks'
+import { ArticleCards } from 'components/guides/ArticleCards'
 import { useTranslation } from 'components/hooks/useTranslation'
 
-export const ProductSubLanding = () => {
-  const { title, learningTracks, includeGuides } = useProductSubLandingContext()
+export const ProductGuides = () => {
+  const { title, learningTracks, includeGuides } = useProductGuidesContext()
   const { t } = useTranslation('sub_landing')
   return (
     <DefaultLayout>
       <LandingSection className="pt-3">
-        <SubLandingHero />
+        <GuidesHero />
       </LandingSection>
 
       {learningTracks && learningTracks.length > 0 && (

content/README.md

@@ -39,7 +39,7 @@ See the [contributing docs](/CONTRIBUTING.md) for general information about work
 - [Links and image paths](#links-and-image-paths)
   - [Preventing transformations](#preventing-transformations)
   - [Index pages](#index-pages)
-  - [Creating new sublanding pages](#creating-new-sublanding-pages)
+  - [Creating new product guides pages](#creating-new-product-guides-pages)
 
 ## Frontmatter
 
@@ -243,7 +243,7 @@ defaultTool: cli
 **Note: the featured track is set by a specific property in the learning tracks YAML. See that [README](../data/learning-tracks/README.md) for details.*
 
 ### `includeGuides`
-- Purpose: Render a list of articles, filterable by `type` and `topics`. Only applicable when used with `layout: product-sublanding`.
+- Purpose: Render a list of articles, filterable by `type` and `topics`. Only applicable when used with `layout: product-guides`.
 - Type: `Array`
 - Optional.
 
@@ -376,11 +376,11 @@ The homepage is the main Table of Contents file for the docs site. The homepage
 
 `childGroups` is an array of mappings containing a `name` for the group, an optional `icon` for the group, and an array of `children`.  The `children` in the array must be present in the `children` frontmatter property.
 
-### Creating new sublanding pages
+### Creating new product guides pages
 
-To create a sublanding page (e.g. [Actions' Guide page](https://docs.github.com/en/actions/guides)), create or modify an existing markdown file with these specific frontmatter values:
+To create a product guides page (e.g. [Actions' Guide page](https://docs.github.com/en/actions/guides)), create or modify an existing markdown file with these specific frontmatter values:
 
-1. Use the sublanding page template by referencing it `layout: product-sublanding`
+1. Use the product guides page template by referencing it `layout: product-guides`
 2. (optional) Include the learning tracks in [`learningTracks`](#learningTracks)
 3. (optional) Define which articles to include with [`includeGuides`](#includeGuides).
 

content/actions/guides.md

@@ -2,7 +2,7 @@
 title: Guides for GitHub Actions
 intro: 'These guides for {% data variables.product.prodname_actions %} include specific use cases and examples to help you configure workflows.'
 allowTitleToDifferFromFilename: true
-layout: product-sublanding
+layout: product-guides
 versions:
   fpt: '*'
   ghes: '*'

content/admin/guides.md

@@ -3,7 +3,7 @@ title: GitHub Enterprise guides
 shortTitle: Guides
 intro: 'Learn how to increase developer productivity and code quality with {% data variables.product.product_name %}.'
 allowTitleToDifferFromFilename: true
-layout: product-sublanding
+layout: product-guides
 versions:
   ghec: '*'
   ghes: '*'