Fix README typos, remove next-specific data attributes for components

READMEs/pagination.md

@@ -20,7 +20,7 @@ It's important to note here that the language around these pages can become a bi
 
 - We collectively refer to certain content types as "Listing Pages" (e.g. Story Listing Pages, Event Listing Pages).
 - Individual listing "pages" are often, themselves, comprised of multiple "pages" of content.
-- We'll often refer to "paged pages" to distinguish the individual pages from the higher level of organziation.
+- We'll often refer to "paged pages" to distinguish the individual pages from the higher level of organization.
 
 ### All-Static Listing Pages
 

READMEs/queries.md

@@ -6,7 +6,7 @@ Queries are how data makes it to the front end templates of next-build. They con
 - **data**: where the fetch to the endpoint is actually performed
 - **formatter**: shaping the response from the data function to an agnostic format for the front end (i.e. front end templates should not be using drupal field names)
 
-These three work together to create consistent requests and responses for all configured query types. They are independent functions so they can be called in isolation when needed. For example, you may need to consistenly format some portion of data returned by multiple query types or have to include similar query parameters to multiple resource requests.
+These three work together to create consistent requests and responses for all configured query types. They are independent functions so they can be called in isolation when needed. For example, you may need to consistently format some portion of data returned by multiple query types or have to include similar query parameters to multiple resource requests.
 
 **Not every query file has all three parts!** Some may contain just a `formatter`, as they will never be queried individually (e.g. many Paragraphs are included in larger requests for Drupal Nodes).
 

READMEs/typescript.md

@@ -18,7 +18,7 @@ The salient pieces of that application architecture can be summarized via the fo
 
 As we follow the data flow through the steps outlined above, the first important piece of the flow is fetching data from our CMS, in this case Drupal. In order to reap the benefits of strongly typed programming, we need to be able to define types for all of the possible data structures that Drupal might give us (e.g. News Story, Event, etc.)
 
-Fortunately, we have some additional building blocks at our disposal for defining each of these types. `next-build` is built on top of [Next.js for Drupal](https://next-drupal.org/) (`next-drupal`) - which is also written in Typescript - and `next-drupal`[provides a number of types](https://github.com/chapter-three/next-drupal/blob/main/packages/next-drupal/src/types.ts) for standard Drupal data structures. For example, `next-drupal` defines a type `DrupalNode` which provides a defined structure that is shared by any node data. Our defined types for our Drupal nodes extend this basic type, adding information about the specific fields the node makes use of. The News Story node provides a good example:
+Fortunately, we have some additional building blocks at our disposal for defining each of these types. `next-build` is built on top of [Next.js for Drupal](https://next-drupal.org/) (`next-drupal`) - which is also written in Typescript - and `next-drupal`[provides a number of types](https://github.com/chapter-three/next-drupal/blob/main/packages/next-drupal/src/types/drupal.ts) for standard Drupal data structures. For example, `next-drupal` defines a type `DrupalNode` which provides a defined structure that is shared by any node data. Our defined types for our Drupal nodes extend this basic type, adding information about the specific fields the node makes use of. The News Story node provides a good example:
 
 ```
 export interface NodeNewsStory extends DrupalNode {
@@ -54,7 +54,7 @@ One thing that stands out when looking at the type definitions above is some ver
 1. The names are a mouthful and require a lot of excess key strokes.
 2. We don't want our business logic tightly coupled with the specific CMS instance. One good rule of thumb for achieving loose coupling with the CMS is to structure things so that the CMS could be swapped out.
 
-So, acknowledging those two considerations, the next key step in our process is converting these data structures into a standardized format. We shorten the names and make them CMS agnostic. Throughout this applicaion, we refer to these types as our "formatted" types. The best way to demonstrate this is to look at the corresponding examples to what we saw above:
+So, acknowledging those two considerations, the next key step in our process is converting these data structures into a standardized format. We shorten the names and make them CMS agnostic. Throughout this application, we refer to these types as our "formatted" types. The best way to demonstrate this is to look at the corresponding examples to what we saw above:
 
 ```
 export type NewsStory = PublishedEntity & {

src/templates/common/benefitsHubLinks/index.tsx

@@ -7,7 +7,7 @@ export function BenefitsHubLinks({
   links,
 }: FormattedBenefitsHubLinks) {
   return (
-    <section className="vads-u-padding-y--3 vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--1 large-screen:vads-u-padding-x--0">
+    <section className="vads-u-padding-y--3 vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--1 desktop-lg:vads-u-padding-x--0">
       <h2 className="vads-u-margin-y--0 vads-u-font-size--h3">{title}</h2>
       {introText && <p>{introText}</p>}
 

src/templates/common/contentFooter/index.tsx

@@ -88,9 +88,9 @@ export function ContentFooter({ lastUpdated }: ContentFooterProps) {
 
   return (
     <>
-      <div className="last-updated vads-u-padding-x--1 large-screen:vads-u-padding-x--0">
+      <div className="last-updated vads-u-padding-x--1 desktop-lg:vads-u-padding-x--0">
         {displayDate && (
-          <div className="small-screen:vads-u-display--flex above-footer-elements-container">
+          <div className="mobile-lg:vads-u-display--flex above-footer-elements-container">
             <div className="vads-u-flex--auto">
               <span className="vads-u-text-align--justify">
                 <p>

src/templates/common/socialLinks/index.tsx

@@ -87,11 +87,7 @@ export const SocialLinks = ({
   ].filter(Boolean)
 
   return (
-    <div
-      data-template="includes/social-share"
-      className={divClass}
-      id="va-c-social-share"
-    >
+    <div className={divClass} id="va-c-social-share">
       <ul className={ulClass} role="list">
         {isEvent && (
           <li className="vads-u-margin-bottom--2p5 ">

src/templates/components/alert/index.tsx

@@ -19,7 +19,6 @@ export function Alert(alert: ParagraphComponent<FormattedAlert>) {
     <va-alert
       data-template="paragraphs/alert"
       data-paragraph-type="paragraph--alert"
-      data-next-component="templates/components/alert"
       data-entity-id={entityId}
       status={alertType}
       class="vads-u-margin-top--3"

src/templates/components/audienceTopics/index.tsx

@@ -22,7 +22,7 @@ export function AudienceTopics({
   ))
 
   return (
-    <div className="vads-u-padding-x--1 large-screen:vads-u-padding-x--0">
+    <div className="vads-u-padding-x--1 desktop-lg:vads-u-padding-x--0">
       <div className="vads-u-padding-top--3 vads-u-padding-bottom--1p5 vads-u-border-top--1px vads-u-border-bottom--1px vads-u-border-color--gray-light vads-u-display--flex vads-u-align-items--flex-start vads-u-flex-direction--row">
         <strong className="vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0">
           Tags

src/templates/components/collapsiblePanel/index.test.tsx

@@ -45,7 +45,6 @@ describe('<CollapsiblePanel> with valid data', () => {
 
   test('renders <CollapsiblePanel /> with first panel initially expanded', () => {
     render(<CollapsiblePanel {...data} startExpanded={true} />)
-    const vaAccordion = document.querySelector('va-accordion')
     const vaAccordionItems = document.querySelectorAll(
       'va-accordion va-accordion-item'
     )

src/templates/components/collapsiblePanel/index.tsx

@@ -34,7 +34,6 @@ export const CollapsiblePanelItem = ({
         id={id}
         data-template="paragraphs/collapsible_panel__panel"
         data-paragraph-type="paragraph--collapsible_panel_item"
-        data-next-component="templates/components/collapsiblePanel/(CollapsiblePanelItem)"
         data-entity-id={entityId}
         data-analytics-faq-text={escape(title)}
       >
@@ -64,7 +63,6 @@ export const CollapsiblePanel = ({
       id={id}
       data-template="paragraphs/collapsible_panel"
       data-paragraph-type="paragraph--collapsible_panel"
-      data-next-component="templates/components/collapsiblePanel/(CollapsiblePanel)"
       data-entity-id={entityId}
       data-multiselectable={multiSelect}
     >

src/templates/components/contactInfo/index.tsx

@@ -104,7 +104,7 @@ export function ContactInfo({
     <div className="vads-u-background-color--gray-light-alt">
       <div className="usa-grid usa-grid-full">
         <div className="usa-width-three-fourths">
-          <div className="usa-content vads-u-padding-x--1 large-screen:vads-u-padding-x--0">
+          <div className="usa-content vads-u-padding-x--1 desktop-lg:vads-u-padding-x--0">
             <section
               className="vads-u-display--flex vads-u-flex-direction--column vads-u-padding-y--2"
               data-template="paragraphs/contact_information"

src/templates/components/healthServices/index.tsx

@@ -22,7 +22,7 @@ function HealthServices({ services, typeOfCare }: HealthServicesProps) {
       <h2
         id={typeOfCare}
         className="vads-u-margin-top--0 vads-u-font-size--lg
-          small-screen:vads-u-font-size--xl vads-u-margin-bottom--2"
+          mobile-lg:vads-u-font-size--xl vads-u-margin-bottom--2"
       >
         {heading}
       </h2>

src/templates/components/hours/index.tsx

@@ -66,8 +66,8 @@ export const Hours = ({ allHours, headerType }: HoursProps) => {
     <div className="vads-u-margin-bottom--0" data-template="hours">
       <div className="clinicalhours">
         {renderHeader()}
-        <div className="vads-u-display--flex vads-u-flex-direction--column small-screen:vads-u-flex-direction--row vads-u-margin-bottom--0">
-          <ul className="vads-u-flex--1 va-c-facility-hours-list vads-u-margin-top--0 vads-u-margin-bottom--1 small-screen:vads-u-margin-bottom--0 vads-u-margin-right--3">
+        <div className="vads-u-display--flex vads-u-flex-direction--column mobile-lg:vads-u-flex-direction--row vads-u-margin-bottom--0">
+          <ul className="vads-u-flex--1 va-c-facility-hours-list vads-u-margin-top--0 vads-u-margin-bottom--1 mobile-lg:vads-u-margin-bottom--0 vads-u-margin-right--3">
             {sortedHours.map((hoursItem, index) => {
               const dayIndex = hoursItem.day === 0 ? 6 : hoursItem.day - 1
               const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

src/templates/components/imageAndStaticMap/index.tsx

@@ -13,7 +13,7 @@ export const ImageAndStaticMap: React.FC<ImageAndStaticMapProps> = ({
   facilityId,
 }) => {
   return (
-    <div className="usa-width-one-third inline-table-helper vads-u-order--first small-screen:vads-u-order--initial vads-u-margin-bottom--2 vads-u-margin-left--auto facility">
+    <div className="usa-width-one-third inline-table-helper vads-u-order--first mobile-lg:vads-u-order--initial vads-u-margin-bottom--2 vads-u-margin-left--auto facility">
       <div
         onClick={() =>
           recordEvent({ event: 'image-click', 'facility-name': facilityId })

src/templates/components/rateYourExperience/index.tsx

@@ -113,7 +113,7 @@ export const RateYourExperience = () => {
 
   return (
     <form
-      className="vads-u-padding-top--3 vads-u-padding-bottom--1 vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--1 large-screen:vads-u-padding-x--0"
+      className="vads-u-padding-top--3 vads-u-padding-bottom--1 vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--1 desktop-lg:vads-u-padding-x--0"
       data-template="includes/how-do-you-rate"
       id="how-do-you-rate-form"
     >

src/templates/components/wysiwyg/index.tsx

@@ -35,7 +35,6 @@ export function Wysiwyg({
       data-entity-id={entityId}
       data-template="paragraphs/wysiwyg"
       data-paragraph-type="paragraph--wysiwyg"
-      data-next-component="templates/components/wysiwyg"
     >
       <WysiwygField html={html} />
     </div>

src/templates/layouts/event/index.tsx

@@ -78,7 +78,7 @@ export const Event = ({
   return (
     <div className="va-l-detail-page va-facility-page">
       <div className="usa-grid usa-grid-full">
-        <div className="vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--1p5 large-screen:vads-u-padding-x--0 vads-u-padding-bottom--2">
+        <div className="vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--1p5 desktop-lg:vads-u-padding-x--0 vads-u-padding-bottom--2">
           {/* Title */}
           <h1>{title}</h1>
 

src/templates/layouts/questionAnswer/index.tsx

@@ -47,7 +47,7 @@ export const QuestionAnswer = ({
         <div className="usa-grid usa-grid-full">
           <div className="usa-width-three-fourths">
             <div className="usa-content">
-              <article className="vads-u-padding-x--1 large-screen:vads-u-padding-x--0">
+              <article className="vads-u-padding-x--1 desktop-lg:vads-u-padding-x--0">
                 <h1>{title}</h1>
                 {answers && (
                   <div dangerouslySetInnerHTML={createAnswersMarkup()} />

src/templates/layouts/resourcesSupport/index.tsx

@@ -49,7 +49,6 @@ export const ResourcesSupport = ({
       className="interior"
       data-template="node-support_resources_detail_page"
       data-resource-type="node--support_resources_detail_page"
-      data-next-component="templates/layouts/resourcesSupport"
     >
       <main className="va-l-detail-page">
         <div className="usa-grid usa-grid-full">
@@ -62,7 +61,7 @@ export const ResourcesSupport = ({
                 {/* TODO: SearchBar */}
               </div>
 
-              <article className="usa-content vads-u-padding-x--1 large-screen:vads-u-padding-x--0">
+              <article className="usa-content vads-u-padding-x--1 desktop-lg:vads-u-padding-x--0">
                 <h1>{title}</h1>
 
                 {/* Intro */}

src/templates/layouts/vetCenter/index.tsx

@@ -139,7 +139,7 @@ export function VetCenter({
       <>
         <h2
           id="prepare-for-your-visit"
-          className="vads-u-margin-top--0 vads-u-font-size--lg small-screen:vads-u-font-size--xl vads-u-margin-bottom--2"
+          className="vads-u-margin-top--0 vads-u-font-size--lg mobile-lg:vads-u-font-size--xl vads-u-margin-bottom--2"
         >
           Prepare for your visit
         </h2>
@@ -180,7 +180,7 @@ export function VetCenter({
           </h2>
           <div
             className="region-list usa-grid usa-grid-full vads-u-display--flex vads-u-flex-direction--column
-          small-screen:vads-u-flex-direction--row facility"
+          mobile-lg:vads-u-flex-direction--row facility"
           >
             <div className="usa-width-two-thirds vads-u-display--block vads-u-width--full">
               <div>
@@ -278,7 +278,7 @@ export function VetCenter({
           <h2
             id="in-the-spot-light"
             className="vads-u-margin-top--0 vads-u-font-size--lg
-          small-screen:vads-u-font-size--xl vads-u-margin-bottom--2"
+          mobile-lg:vads-u-font-size--xl vads-u-margin-bottom--2"
           >
             In the spotlight at {title}
           </h2>