Remove next component data attributes

additional.d.ts

@@ -6,7 +6,6 @@ declare module '@testing-library/react'
 declare module '@department-of-veterans-affairs/component-library'
 declare module '@department-of-veterans-affairs/component-library/Table'
 declare module '@department-of-veterans-affairs/component-library/LoadingIndicator'
-
 declare module '@department-of-veterans-affairs/component-library/AlertBox'
 declare module '@department-of-veterans-affairs/component-library/DropDownPanel'
 declare module '@department-of-veterans-affairs/component-library/Breadcrumbs'

src/templates/common/banners/banner/index.tsx

@@ -10,7 +10,6 @@ export const Banner = ({
 }: FormattedBanner): JSX.Element => {
   return (
     <VaBanner
-      data-next-component="templates/common/banners/banner"
       id={id}
       role="region"
       showClose={dismiss ? 'perm' : false}

src/templates/common/banners/facilityBanner/index.tsx

@@ -101,7 +101,6 @@ export const FacilityBanner = ({
     <>
       {outputStatus && (
         <VaBanner
-          data-next-component="templates/common/banners/facilityBanner"
           id={id}
           role="region"
           showClose={dismiss}

src/templates/common/banners/maintenanceBanner/index.tsx

@@ -3,6 +3,5 @@ export const MaintenanceBanner = () => (
     aria-label="Maintenance banner"
     data-widget-type="maintenance-banner"
     role="region"
-    data-next-component="templates/common/banners/maintenanceBanner"
   ></div>
 )

src/templates/common/banners/promoBanner/index.tsx

@@ -8,13 +8,7 @@ export const PromoBanner = ({
   alertType,
 }: FormattedPromoBanner): JSX.Element => {
   return (
-    <VaPromoBanner
-      data-next-component="templates/common/banners/promoBanner"
-      id={id}
-      role="region"
-      href={href}
-      type={alertType}
-    >
+    <VaPromoBanner id={id} role="region" href={href} type={alertType}>
       {title}
     </VaPromoBanner>
   )

src/templates/common/breadcrumbs/index.tsx

@@ -67,10 +67,7 @@ const Breadcrumbs = ({
   const fcString = JSON.stringify(filteredCrumbs)
 
   return (
-    <div
-      className="vads-u-padding-x--1p5"
-      data-next-component="templates/common/breadcrumbs"
-    >
+    <div className="vads-u-padding-x--1p5">
       <va-breadcrumbs class="row" wrapping breadcrumb-list={fcString} />
     </div>
   )

src/templates/common/button/index.tsx

@@ -10,7 +10,7 @@ export function Button({
   return (
     label &&
     url && (
-      <div key={id} data-next-component="templates/common/button">
+      <div key={id}>
         <Link href={url} passHref className="vads-c-action-link--blue">
           {label}
         </Link>

src/templates/common/commonAndPopular/index.tsx

@@ -2,10 +2,7 @@ import Link from 'next/link'
 
 export function CommonAndPopular() {
   return (
-    <div
-      className="row vads-u-padding-bottom--9"
-      data-next-component="templates/common/commonAndPopular"
-    >
+    <div className="row vads-u-padding-bottom--9">
       <div className="small-12 usa-width-one-half medium-6 columns">
         <h3 className="va-h-ruled vads-u-margin-bottom--2 vads-u-padding-bottom--1 vads-u-font-size--xl">
           Common Questions

src/templates/common/contentFooter/index.tsx

@@ -60,7 +60,6 @@ export function ContentFooter({
   return (
     <div
       className={`last-updated usa-content vads-u-padding-x--1 desktop-lg:vads-u-padding-x--0${wrapperClasses}`}
-      data-next-component="templates/common/contentFooter"
     >
       <div className="mobile-lg:vads-u-display--flex above-footer-elements-container">
         {displayDate && machineDate && (

src/templates/common/featuredContent/index.tsx

@@ -7,10 +7,7 @@ export function FeaturedContent({
   link,
 }: ParagraphComponent<FormattedFeaturedContent>) {
   return (
-    <div
-      className="feature featured-content-list-item vads-u-flex--fill vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--0 medium-screen:vads-u-margin-bottom--2"
-      data-next-component="templates/common/featuredContent"
-    >
+    <div className="feature featured-content-list-item vads-u-flex--fill vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--0 medium-screen:vads-u-margin-bottom--2">
       {title && (
         <>
           <h3 className="force-small-header vads-u-margin-bottom--2">

src/templates/common/footer/index.tsx

@@ -4,7 +4,7 @@ export const Footer = () => {
   const content = `VA's mission: To fulfill President Lincoln's promise to care for those who have served in our nation's military and for their families, caregivers, and survivors.`
   return (
     <>
-      <footer className="footer" data-next-component="templates/common/footer">
+      <footer className="footer">
         <div
           id="footerNav"
           data-testid="footer"

src/templates/common/googleMapsDirections/index.tsx

@@ -5,7 +5,6 @@ export const GoogleMapsDirections = ({ title, address }) => {
 
   return (
     <va-link
-      data-next-component="templates/common/googleMapsDirections"
       class="vads-u-display--block vads-u-margin-top--0"
       href={googleMapsUrl}
       name="maps-directions"

src/templates/common/header/index.tsx

@@ -3,11 +3,7 @@ import { TopNav } from './TopNav'
 
 export const Header = () => {
   return (
-    <header
-      className="header"
-      role="banner"
-      data-next-component="templates/common/header"
-    >
+    <header className="header" role="banner">
       {/*  Mobile Layout */}
       <div
         data-widget-type="header"

src/templates/common/heading/index.tsx

@@ -8,7 +8,6 @@ export const HeadingElement = ({
   const HeadingElement = headingLevel
   return (
     <HeadingElement
-      data-next-component="templates/common/heading"
       slot={slot}
       dangerouslySetInnerHTML={{ __html: children }}
     ></HeadingElement>

src/templates/common/mediaImage/index.tsx

@@ -59,7 +59,6 @@ export const MediaImage = (
 
   return (
     <Image
-      data-next-component="templates/common/mediaImage"
       id={props.id}
       alt={props.alt}
       src={props.links?.[props.imageStyle]?.href}

src/templates/common/preview/index.tsx

@@ -37,10 +37,7 @@ export const UnpublishedBanner = ({ resource }) => {
   }
 
   return (
-    <div
-      className="vads-u-background-color--primary-alt-lightest vads-u-padding--1"
-      data-next-component="templates/common/preview"
-    >
+    <div className="vads-u-background-color--primary-alt-lightest vads-u-padding--1">
       <div className="vads-l-grid-container medium-screen:vads-u-padding-x--0">
         You are viewing {modState} revision of {resource?.entityPath}.
         <a

src/templates/common/relatedLinks/index.tsx

@@ -28,10 +28,7 @@ export const RelatedLinks = ({
   }
 
   return (
-    <section
-      className="vads-u-margin-bottom--3 vads-u-display--flex vads-u-flex-direction--column"
-      data-next-component="templates/common/RelatedLinks"
-    >
+    <section className="vads-u-margin-bottom--3 vads-u-display--flex vads-u-flex-direction--column">
       {sectionTitle && (
         <h2 className="vads-u-margin-y--0 vads-u-font-size--h3">
           {sectionTitle}

src/templates/common/secondaryButtonGroup/index.tsx

@@ -9,10 +9,7 @@ export const SecondaryButtonGroup = ({
 }): JSX.Element => {
   if (buttons.length > 1) {
     return (
-      <ul
-        className="vads-u-margin-y--3 usa-unstyled-list"
-        data-next-component="templates/common/secondaryButtonGroup"
-      >
+      <ul className="vads-u-margin-y--3 usa-unstyled-list">
         {buttons?.map((button, index) => (
           <li key={index} className="vads-u-margin-bottom--2">
             <va-link-action
@@ -30,12 +27,7 @@ export const SecondaryButtonGroup = ({
 
   if (button) {
     return (
-      <va-link-action
-        data-next-component="templates/common/secondaryButtonGroup"
-        href={button.url}
-        text={button.label}
-        type="secondary"
-      />
+      <va-link-action href={button.url} text={button.label} type="secondary" />
     )
   }
 

src/templates/common/socialLinks/index.tsx

@@ -87,11 +87,7 @@ export const SocialLinks = ({
   ].filter(Boolean)
 
   return (
-    <div
-      data-next-component="templates/common/socialLinks"
-      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/accordion/index.tsx

@@ -25,7 +25,7 @@ export function AccordionItem({
 export function Accordion({ id, bordered, items }: FormattedAccordion) {
   if (!items) return null
   return (
-    <div data-next-component="templates/components/accordion">
+    <div>
       <va-accordion bordered={bordered} id={id}>
         {items.map((item) => (
           <AccordionItem key={item.id} {...item} />

src/templates/components/alert/index.tsx

@@ -18,7 +18,6 @@ export function Alert(alert: ParagraphComponent<FormattedAlert>) {
   return (
     <va-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/alertBlock/index.tsx

@@ -15,7 +15,6 @@ export function AlertBlock(alertBlock: FormattedAlertBlock) {
   return (
     <>
       <VaAlert
-        data-next-component="templates/components/alertBlock"
         id={id}
         status={alertType}
         class="vads-u-margin-top--3"

src/templates/components/audienceTopics/index.tsx

@@ -20,10 +20,7 @@ export function AudienceTopics({
   ))
 
   return (
-    <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"
-      data-next-component="templates/components/audienceTopics"
-    >
+    <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">
       <p className="vads-u-margin-y--0 vads-u-font-weight--bold">Tags</p>
       <div className="vads-u-display--flex vads-u-flex-wrap--wrap">
         {tagsList}

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)}
       >
@@ -63,7 +62,6 @@ export const CollapsiblePanel = ({
     <div
       id={id}
       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

@@ -98,10 +98,7 @@ export function ContactInfo({
     contactType === 'DC' && defaultContact && !additionalContact
 
   return (
-    <div
-      data-next-component="templates/components/contactInfo"
-      className="vads-u-background-color--gray-light-alt"
-    >
+    <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 desktop-lg:vads-u-padding-x--0">

src/templates/components/expandableText/index.tsx

@@ -11,11 +11,7 @@ export function ExpandableText({
   if (isEmpty(header)) return
 
   return (
-    <VaAlertExpandable
-      id={id}
-      trigger={header}
-      data-next-component="templates/components/expandableText"
-    >
+    <VaAlertExpandable id={id} trigger={header}>
       {text && (
         <div
           dangerouslySetInnerHTML={{

src/templates/components/healthServices/index.tsx

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

src/templates/components/hours/index.tsx

@@ -63,10 +63,7 @@ export const Hours = ({ allHours, headerType }: HoursProps) => {
   }
 
   return (
-    <div
-      className="vads-u-margin-bottom--0"
-      data-next-component="templates/components/hours"
-    >
+    <div className="vads-u-margin-bottom--0">
       <div className="clinicalhours">
         {renderHeader()}
         <div className="vads-u-display--flex vads-u-flex-direction--column mobile-lg:vads-u-flex-direction--row vads-u-margin-bottom--0">

src/templates/components/imageAndStaticMap/index.tsx

@@ -13,10 +13,7 @@ export const ImageAndStaticMap: React.FC<ImageAndStaticMapProps> = ({
   facilityId,
 }) => {
   return (
-    <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"
-      data-next-component="templates/components/imageAndStaticMap"
-    >
+    <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/linkTeaser/index.tsx

@@ -63,11 +63,7 @@ export const LinkTeaser = ({
   }
 
   return (
-    <li
-      key={id}
-      onClick={() => recordEvent(analytic)}
-      data-next-component="templates/components/linkTeaser"
-    >
+    <li key={id} onClick={() => recordEvent(analytic)}>
       {title !== '' && (
         <h3 className="va-nav-linkslist-title vads-u-font-size--h4">
           <a

src/templates/components/lovellSwitcher/index.tsx

@@ -22,7 +22,6 @@ export function LovellSwitcher({
       status="warning"
       class="vads-u-margin-bottom--2"
       id="va-info-alert"
-      data-next-component="templates/components/lovellSwitcher"
     >
       <h2 slot="headline">
         You are viewing this page as a {currentVariant.toUpperCase()}{' '}

src/templates/components/newsStoryTeaser/index.tsx

@@ -17,10 +17,7 @@ export const NewsStoryTeaser = ({
 
   return (
     <>
-      <div
-        className="usa-grid usa-grid-full vads-u-margin-bottom--3 medium-screen:vads-u-margin-bottom--4 vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-flex-direction--row"
-        data-next-component="templates/components/newsStoryTeaser"
-      >
+      <div className="usa-grid usa-grid-full vads-u-margin-bottom--3 medium-screen:vads-u-margin-bottom--4 vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-flex-direction--row">
         <div className="usa-width-two-thirds">
           <TitleTag className="vads-u-font-size--md medium-screen:vads-u-font-size--lg medium-screen:vads-u-margin-bottom--0p5">
             <va-link href={link} text={title}>

src/templates/components/numberCallout/index.tsx

@@ -6,11 +6,7 @@ export function NumberCallout({
   description,
 }: FormattedNumberCallout) {
   return (
-    <div
-      data-next-component="templates/components/numberCallout"
-      data-entity-id={entityId}
-      className="card information"
-    >
+    <div data-entity-id={entityId} className="card information">
       <span className="number">{numberPhrase}</span>
       <span className="description">{description}</span>
     </div>

src/templates/components/personProfile/index.tsx

@@ -23,11 +23,7 @@ export const PersonProfile = ({
   office,
 }: FormattedPersonProfile): JSX.Element => {
   return (
-    <div
-      id="content"
-      className="interior"
-      data-next-component="templates/components/personProfile/(PersonProfile)"
-    >
+    <div id="content" className="interior">
       <main className="va-l-detail-page va-facility-page">
         <div className="usa-grid usa-grid-full">
           <div className="usa-width-three-fourths">
@@ -140,10 +136,7 @@ export const StaffNewsProfile = ({
   description,
 }: PersonProfileTeaserProps): JSX.Element => {
   return (
-    <div
-      className="vads-u-font-size--sm vads-u-margin-bottom--2p5"
-      data-next-component="templates/components/personProfile/(StaffNewsProfile)"
-    >
+    <div className="vads-u-font-size--sm vads-u-margin-bottom--2p5">
       <div className="vads-u-margin-bottom--0p5 vads-u-font-weight--bold">
         By {title}
         {description ? `, ${description}` : null}