Remove data template info

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
         id="va-breadcrumbs-list"
         class="row hydrated"

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/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/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

@@ -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/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/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/expandableText/index.tsx

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

src/templates/components/healthServices/index.tsx

@@ -20,7 +20,6 @@ function HealthServices({ services, typeOfCare }: HealthServicesProps) {
   return (
     <>
       <h2
-        data-next-component="templates/components/healthServices"
         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"

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

@@ -19,7 +19,6 @@ export function LovellSwitcher({
 
   return (
     <va-alert
-      data-next-component="templates/components/lovellSwitcher"
       status="warning"
       class="vads-u-margin-bottom--2"
       id="va-info-alert"

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}

src/templates/components/pressReleaseTeaser/index.tsx

@@ -18,10 +18,7 @@ export function PressReleaseTeaser({
 
   return (
     <>
-      <section
-        className="vads-u-margin-bottom--4"
-        data-next-component="templates/components/pressReleaseTeaser"
-      >
+      <section className="vads-u-margin-bottom--4">
         <TitleTag className="vads-u-margin-bottom--1p5 vads-u-font-size--md medium-screen:vads-u-font-size--lg">
           <va-link href={link} text={title}>
             {title}

src/templates/components/processList/index.tsx

@@ -3,11 +3,7 @@ import { numToWord } from '@/lib/utils/helpers'
 export function ProcessList({ steps, entityId }: FormattedProcessList) {
   if (!steps) return
   return (
-    <div
-      data-next-component="templates/components/processList"
-      data-entity-id={entityId}
-      className="process schemaform-process"
-    >
+    <div data-entity-id={entityId} className="process schemaform-process">
       <ol>
         {steps &&
           steps.map((step, index) => (

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

@@ -25,7 +25,7 @@ describe('QaCollapsiblePanel with valid data', () => {
     render(<QaCollapsiblePanel questions={questionsData} />)
 
     const panelDiv = document.querySelector(
-      'div[data-next-component="templates/components/qaCollapsiblePanel"]'
+      'div[data-testid="qa-collapsible-panel"]'
     )
     expect(panelDiv).toBeInTheDocument()
   })

src/templates/components/qaCollapsiblePanel/index.tsx

@@ -1,6 +1,6 @@
 export const QaCollapsiblePanel = ({ questions }) => {
   return (
-    <div data-next-component="templates/components/qaCollapsiblePanel">
+    <div data-testid="qa-collapsible-panel">
       <va-accordion>
         {questions.map((questionObject) => (
           <va-accordion-item

src/templates/components/qaParagraph/index.tsx

@@ -8,7 +8,7 @@ export function QaParagraph({
 }: FormattedQaParagraph) {
   const DynamicHeader = setHeaderh3 ? 'h3' : 'h2'
   return (
-    <div data-next-component="templates/components/qaParagraph">
+    <div>
       <div>
         <div className="vads-u-display--flex">
           <DynamicHeader>{question}</DynamicHeader>

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

@@ -60,7 +60,7 @@ describe('QaSection with with valid data', () => {
   test('renders QaSection component with accordion', () => {
     render(<QaSection {...QaSectionAccordionProps} />)
     const accordionDiv = document.querySelector(
-      'div[data-next-component="templates/components/qaCollapsiblePanel"]'
+      'div[data-testid="qa-collapsible-panel"]'
     )
     expect(accordionDiv).toBeInTheDocument()
     expect(screen.queryByText(/Accordion test header/)).toBeInTheDocument()
@@ -69,7 +69,7 @@ describe('QaSection with with valid data', () => {
   test('renders QaSection component without accordion', () => {
     render(<QaSection {...QaSectionOtherProps} />)
     const accordionDiv = document.querySelector(
-      'div[data-next-component="templates/components/qaCollapsiblePanel"]'
+      'div[data-testid="qa-collapsible-panel"]'
     )
     expect(accordionDiv).not.toBeInTheDocument()
     expect(screen.queryByText(/Other test header/)).toBeInTheDocument()

src/templates/components/qaSection/index.tsx

@@ -12,7 +12,7 @@ export function QaSection({
 }: FormattedQaSection | FormattedQaGroup) {
   const setHeaderh3 = header ? true : false
   return (
-    <div data-next-component="templates/components/qaSection">
+    <div>
       {header && <h2>{header}</h2>}
       {intro && <p>{intro}</p>}
       {displayAccordion ? (

src/templates/components/reactWidget/index.tsx

@@ -4,7 +4,6 @@ import { ParagraphComponent } from '@/types/formatted/paragraph'
 const CtaWidget = ({ entityId, widgetType }) => {
   return (
     <div
-      data-next-component="templates/components/reactWidget"
       data-entity-id={entityId}
       className="cta-widget"
       data-widget-type="cta"

src/templates/components/servicesList/index.tsx

@@ -9,10 +9,7 @@ interface ServicesListProps {
 function ServicesList({ services }: ServicesListProps) {
   if (!services) return null
   return (
-    <div
-      className="vads-u-margin-bottom--3"
-      data-next-component="templates/components/servicesList"
-    >
+    <div className="vads-u-margin-bottom--3">
       <va-accordion bordered>
         {services.map((service, index) => (
           <va-accordion-item

src/templates/components/storyListingLink/index.tsx

@@ -5,7 +5,6 @@ export const StoryListingLink = ({ path }: FormattedStoryListingLink) => {
   return (
     // @todo can <Link /> be used here?
     <a
-      data-next-component="templates/components/storyListingLink"
       onClick={() =>
         recordEvent({
           event: 'nav-secondary-button-click',