VACMS-19386 Add Checklist template

README.md

@@ -34,7 +34,9 @@ You should set these up before attempting to install the repo.
 
 7. In the `next-build` directory, run `yarn setup` to pull initial built assets from the `vets-website` repo. This will grab a bunch of files from a vets-website S3 bucket and place them into the appropriate `public/` folders.
 
-8. Run `yarn dev`.
+8. In your `envs/.env.local` file, uncomment `FEATURE_NEXT_BUILD_CONTENT_ALL=true`.
+
+9. Run `yarn dev`.
 
 You will now have a Next.js development server running at http://localhost:3999, which will refresh with changes to your local environment. (Note: your local port may differ if you changed the value for `PORT` in .env.local).
 

READMEs/tugboat.md

@@ -17,7 +17,7 @@ See the [va.gov-cms tugboat docs](https://github.com/department-of-veterans-affa
 At VA, our lower environments are each built from a Tugboat Base Preview, in some fashion. Our Tugboat configuration is relevant to the discussion:
 
 1. **Project**: [next-build](https://tugboat.vfs.va.gov/64d5537c2d3036648da7c7ff)
-   1. **Repository**: [next-build Pull Request Environments](https://tugboat.vfs.va.gov/64d5537c2d3036648da7c7ff5fd3b8ee7b4657022b5722d6) — Is used for managing PR Previews, automatically triggered by Pull Requests in next-build repo.
+   1. **Repository**: [next-build Pull Request Environments](https://tugboat.vfs.va.gov/64d5537c2d3036648da7c7ff) — Is used for managing PR Previews, automatically triggered by Pull Requests in next-build repo.
       1. **Base Preview**: Built nightly at 11am UTC (6am EST, 5am EDT). It is built one hour later than the CMS Mirror Base Preview's nightly refresh because it is the default target endpoint for data. This data will then be used for all next-build PR Preview envs until the next time this Base Preview is refreshed.
 
 ## CLI Setup

additional.d.ts

@@ -16,20 +16,25 @@ declare module '@department-of-veterans-affairs/component-library/Modal'
 declare module '@department-of-veterans-affairs/component-library/Pagination'
 declare module '@department-of-veterans-affairs/component-library/ProgressButton'
 declare module '@department-of-veterans-affairs/component-library/PromoBanner'
+declare module '@department-of-veterans-affairs/component-library/VaRadio'
+declare module '@department-of-veterans-affairs/component-library/VaRadioOption'
 declare module '@department-of-veterans-affairs/component-library/dist/react-bindings'
 declare module 'mq-polyfill'
 declare module 'debug'
 
 declare namespace JSX {
   interface IntrinsicElements {
-    'va-alert'
-    'va-link'
-    'va-icon'
-    'va-button'
-    'va-breadcrumbs'
     'va-accordion'
     'va-accordion-item'
-    'va-on-this-page'
+    'va-alert'
     'va-back-to-top'
+    'va-breadcrumbs'
+    'va-button'
+    'va-checkbox'
+    'va-icon'
+    'va-link'
+    'va-link-action'
+    'va-on-this-page'
+    'va-telephone'
   }
 }

generator-templates/component/test.hbs

@@ -1,3 +1,4 @@
+import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { {{pascalCase name}} } from './index'
 

generator-templates/query/test.hbs

@@ -1,25 +1,28 @@
+/**
+* @jest-environment node
+*/
+
 import { {{pascalCase name}} } from '@/types/drupal/node'
 import { queries } from '@/data/queries'
 import mockData from '@/mocks/{{camelCase name}}.mock.json'
 
 const {{pascalCase name}}Mock: {{pascalCase name}} = mockData
 
-describe('{{pascalCase name}} formatData', () => {
-  let windowSpy
-
-  beforeEach(() => {
-    windowSpy = jest.spyOn(window, 'window', 'get')
-  })
-
-  afterEach(() => {
-    windowSpy.mockRestore()
+// remove if this component does not have a data fetch
+describe('DrupalJsonApiParams configuration', () => {
+  test('params function sets the correct include fields', () => {
+    // TODO
   })
+})
 
+describe('{{pascalCase name}} formatData', () => {
   test('outputs formatted data', () => {
-    windowSpy.mockImplementation(() => undefined)
-
     expect(
       queries.formatData('node--{{snakeCase name}}', {{pascalCase name}}Mock)
     ).toMatchSnapshot()
   })
+
+  test('handles no answers correctly', () => {
+    // TODO
+  })
 })

package.json

@@ -44,9 +44,9 @@
   "dependencies": {
     "@actions/core": "^1.10.1",
     "@actions/github": "^6.0.0",
-    "@department-of-veterans-affairs/component-library": "^45.0.0",
-    "@department-of-veterans-affairs/formation": "^11.0.12",
-    "@department-of-veterans-affairs/web-components": "^11.2.9",
+    "@department-of-veterans-affairs/component-library": "^48.0.1",
+    "@department-of-veterans-affairs/formation": "^12.0.0",
+    "@department-of-veterans-affairs/web-components": "^16.0.1",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@octokit/rest": "^21.0.1",
     "@storybook/react": "^8.0.5",

playwright/tests/checklist.spec.js

@@ -0,0 +1,25 @@
+import { test, expect } from '../utils/next-test'
+
+test.describe('Checklist', () => {
+  test('Checklist page renders', async ({ page }) => {
+    await page.goto(
+      '/resources/what-to-bring-to-create-your-online-sign-in-account'
+    )
+    await expect(page).toHaveURL(
+      '/resources/what-to-bring-to-create-your-online-sign-in-account'
+    )
+  })
+
+  test('Should render without a11y errors', async ({
+    page,
+    makeAxeBuilder,
+  }) => {
+    await page.goto(
+      '/resources/what-to-bring-to-create-your-online-sign-in-account'
+    )
+
+    const accessibilityScanResults = await makeAxeBuilder().analyze()
+
+    expect(accessibilityScanResults.violations).toEqual([])
+  })
+})

src/data/queries/audienceTopics.ts

@@ -1,4 +1,3 @@
-// Define the query params for fetching node--news_story.
 import { ParagraphAudienceTopics } from '@/types/drupal/paragraph'
 import { QueryFormatter, QueryParams } from 'next-drupal-query'
 import { AudienceTopic, AudienceTopics } from '@/types/formatted/audienceTopics'
@@ -12,6 +11,18 @@ export const params: QueryParams<null> = () => {
   ])
 }
 
+const formatBeneficiariesData = (beneficiaries) => {
+  if (!beneficiaries || beneficiaries.length === 0) {
+    return []
+  }
+
+  if (!Array.isArray(beneficiaries)) {
+    return [beneficiaries]
+  }
+
+  return beneficiaries
+}
+
 export const getTagsList = (
   entity: ParagraphAudienceTopics
 ): AudienceTopic[] | null => {
@@ -23,17 +34,19 @@ export const getTagsList = (
     field_non_beneficiares: fieldNonBeneficiares,
   } = entity
 
+  const audienceBeneficiaries = formatBeneficiariesData(
+    fieldAudienceBeneficiares
+  )
+  const nonBeneficiaries = formatBeneficiariesData(fieldNonBeneficiares)
+
   const topics = fieldTopics.map((topic) => ({
     id: topic.id,
     href: topic.path?.alias,
     name: topic.name,
     categoryLabel: 'Topics',
   }))
 
-  const audiences = [
-    ...(fieldAudienceBeneficiares || []),
-    ...(fieldNonBeneficiares || []),
-  ]
+  const audiences = [...audienceBeneficiaries, ...nonBeneficiaries]
     .filter((tag) => !!tag)
     .map((audience) => ({
       id: audience.id,
@@ -44,7 +57,7 @@ export const getTagsList = (
 
   const tagList = [...topics, ...audiences]
 
-  return tagList.sort((a, b) => a.categoryLabel.localeCompare(b.categoryLabel))
+  return tagList.sort((a, b) => a.name.localeCompare(b.name))
 }
 
 /**

src/data/queries/benefitsHubLinks.ts

@@ -1,24 +1,21 @@
 import { QueryFormatter, QueryParams } from 'next-drupal-query'
 import { NodeLandingPage } from '@/types/drupal/node'
-import { BenefitsHubLink } from '@/types/formatted/benefitsHub'
+import { RelatedLink } from '@/types/formatted/relatedLinks'
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 
 // Define the query params for fetching node--landing_page.
 export const params: QueryParams<null> = () => {
   return new DrupalJsonApiParams().addInclude(['field_support_services'])
 }
 
-// Format NodeLandingPage (Benefits Hub) into link teasers.
-export const formatter: QueryFormatter<NodeLandingPage[], BenefitsHubLink[]> = (
+export const formatter: QueryFormatter<NodeLandingPage[], RelatedLink[]> = (
   entities: NodeLandingPage[]
 ) => {
   return entities.map((entity) => {
     return {
-      id: entity.id,
-      path: entity.path?.alias,
-      title: entity.title,
-      label: entity.field_home_page_hub_label,
-      teaserText: entity.field_teaser_text,
+      uri: entity.path?.alias,
+      title: entity.field_home_page_hub_label,
+      summary: entity.field_teaser_text,
     }
   })
 }

src/data/queries/checklist.ts

@@ -0,0 +1,92 @@
+import { QueryData, QueryFormatter, QueryParams } from 'next-drupal-query'
+import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
+import { queries } from '.'
+import { formatParagraph } from '@/lib/drupal/paragraphs'
+import {
+  PARAGRAPH_RESOURCE_TYPES,
+  RESOURCE_TYPES,
+} from '@/lib/constants/resourceTypes'
+import { ExpandedStaticPropsContext } from '@/lib/drupal/staticProps'
+import {
+  entityBaseFields,
+  fetchSingleEntityOrPreview,
+} from '@/lib/drupal/query'
+import { getNestedIncludes } from '@/lib/utils/queries'
+
+// Types
+import { AlertSingle } from '@/types/formatted/alert'
+import { AudienceTopics } from '@/types/formatted/audienceTopics'
+import { Button } from '@/types/formatted/button'
+import { Checklist, ChecklistItem } from '@/types/formatted/checklist'
+import { ContactInfo } from '@/types/formatted/contactInfo'
+import { NodeChecklist } from '@/types/drupal/node'
+import { RelatedLink } from '@/types/formatted/relatedLinks'
+
+export const params: QueryParams<null> = () => {
+  return new DrupalJsonApiParams().addInclude([
+    ...getNestedIncludes(
+      'field_alert_single',
+      PARAGRAPH_RESOURCE_TYPES.ALERT_SINGLE
+    ),
+    'field_buttons',
+    'field_checklist.field_checklist_sections',
+    ...getNestedIncludes(
+      'field_contact_information',
+      PARAGRAPH_RESOURCE_TYPES.CONTACT_INFORMATION
+    ),
+    'field_related_benefit_hubs',
+    'field_related_information',
+    ...getNestedIncludes(
+      'field_tags',
+      PARAGRAPH_RESOURCE_TYPES.AUDIENCE_TOPICS
+    ),
+  ])
+}
+
+export type ChecklistDataOpts = {
+  id: string
+  context?: ExpandedStaticPropsContext
+}
+
+export const data: QueryData<ChecklistDataOpts, NodeChecklist> = async (
+  opts
+): Promise<NodeChecklist> => {
+  const entity = (await fetchSingleEntityOrPreview(
+    opts,
+    RESOURCE_TYPES.CHECKLIST,
+    params
+  )) as NodeChecklist
+
+  return entity
+}
+
+export const formatter: QueryFormatter<NodeChecklist, Checklist> = (
+  entity: NodeChecklist
+) => {
+  const formatRelatedLinks = (links): RelatedLink[] =>
+    links?.map((link) => ({
+      uri: link?.field_link?.uri,
+      title: link?.field_link?.title,
+      summary: link.field_link_summary,
+    }))
+
+  return {
+    ...entityBaseFields(entity),
+    alert: formatParagraph(entity.field_alert_single) as AlertSingle,
+    benefitsHubLinks: queries.formatData(
+      RESOURCE_TYPES.BENEFITS_HUB,
+      entity.field_related_benefit_hubs
+    ),
+    buttons: entity.field_buttons.map?.(formatParagraph) as Button[],
+    checklist: entity.field_checklist.field_checklist_sections?.map((section) =>
+      queries.formatData(PARAGRAPH_RESOURCE_TYPES.CHECKLIST, section)
+    ) as ChecklistItem[],
+    contactInformation: formatParagraph(
+      entity.field_contact_information
+    ) as ContactInfo,
+    intro: entity.field_intro_text_limited_html.processed,
+    relatedInformation: formatRelatedLinks(entity.field_related_information),
+    repeatButtons: entity.field_buttons_repeat,
+    tags: formatParagraph(entity.field_tags) as AudienceTopics,
+  }
+}

src/data/queries/checklistItem.ts

@@ -0,0 +1,16 @@
+import { QueryFormatter } from 'next-drupal-query'
+import { ParagraphChecklistItem } from '@/types/drupal/paragraph'
+import { ChecklistItem } from '@/types/formatted/checklist'
+
+export const formatter: QueryFormatter<
+  ParagraphChecklistItem,
+  ChecklistItem
+> = (entity: ParagraphChecklistItem) => {
+  return {
+    type: entity.type as ChecklistItem['type'],
+    id: entity.id,
+    items: entity.field_checklist_items,
+    header: entity.field_section_header,
+    intro: entity.field_section_intro,
+  }
+}