CCM-11496: use summary list

Author: harrim91

frontend/src/__tests__/app/message-plans/get-ready-to-move/__snapshots__/page.test.tsx.snap

@@ -23,28 +23,24 @@ exports[`matches snapshot 1`] = `
         >
           Get ready to move message plan to production
         </h1>
-        <table
-          class="nhsuk-u-margin-bottom-6 table"
+        <dl
+          class="nhsuk-summary-list"
         >
-          <tbody
-            class="nhsuk-table__body"
+          <div
+            class="nhsuk-summary-list__row"
           >
-            <tr
-              class="nhsuk-table__row"
+            <dt
+              class="nhsuk-summary-list__key"
             >
-              <th
-                class="nhsuk-table__cell"
-              >
-                Name
-              </th>
-              <td
-                class="nhsuk-table__cell"
-              >
-                My Routing Config
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              Name
+            </dt>
+            <dd
+              class="nhsuk-summary-list__value"
+            >
+              My Routing Config
+            </dd>
+          </div>
+        </dl>
         <p>
           Moving message plans from draft to production means they are ready to send.
         </p>

frontend/src/app/message-plans/get-ready-to-move/[routingConfigId]/page.module.scss

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import type { Metadata } from 'next';
 import { redirect, RedirectType } from 'next/navigation';
 import type { MessagePlanPageProps } from 'nhs-notify-web-template-management-utils';
@@ -7,7 +6,6 @@ import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
 import content from '@content/content';
 import { ContentRenderer } from '@molecules/ContentRenderer/ContentRenderer';
 import { getRoutingConfig } from '@utils/message-plans';
-import styles from './page.module.scss';
 
 const pageContent = content.pages.messagePlanGetReadyToMoveToProduction();
 
@@ -32,17 +30,18 @@ export default async function MessagePlanGetReadyToMoveToProductionPage({
         <div className='nhsuk-grid-column-two-thirds'>
           <span className='nhsuk-caption-xl'>{pageContent.stepCounter}</span>
           <h1 className='nhsuk-heading-xl'>{pageContent.heading}</h1>
-          <table
-            className={classNames('nhsuk-u-margin-bottom-6', styles.table)}
-          >
-            <tbody className='nhsuk-table__body'>
-              <tr className='nhsuk-table__row'>
-                <th className='nhsuk-table__cell'>Name</th>
-                <td className='nhsuk-table__cell'>{routingConfig.name}</td>
-              </tr>
-            </tbody>
-          </table>
+
+          <dl className='nhsuk-summary-list'>
+            <div className='nhsuk-summary-list__row'>
+              <dt className='nhsuk-summary-list__key'>Name</dt>
+              <dd className='nhsuk-summary-list__value'>
+                {routingConfig.name}
+              </dd>
+            </div>
+          </dl>
+
           <ContentRenderer content={pageContent.content} />
+
           <div className='nhsuk-warning-callout'>
             <h3 className='nhsuk-warning-callout__label'>
               {pageContent.callout.label}