CCM-11492 Make Remove template link a button

Author: nicki-nhs

frontend/src/__tests__/components/molecules/MessagePlanChannelTemplate.test.tsx

@@ -74,12 +74,12 @@ describe('MessagePlanChannelTemplate', () => {
       );
     });
 
-    it('should display the "Remove template" link with accessible name and href', () => {
-      const link = screen.getByRole('link', {
+    it('should display the "Remove template" button with accessible name and href', () => {
+      const removeTemplateLink = screen.getByRole('button', {
         name: 'Remove Text message (SMS) template',
       });
 
-      expect(link).toHaveAttribute('href', 'todo'); // TODO: CHANGE
+      expect(removeTemplateLink).toBeInTheDocument();
     });
 
     it('should not display the "Choose template" link', () => {

frontend/src/__tests__/components/molecules/__snapshots__/MessagePlanChannelTemplate.test.tsx.snap

@@ -191,10 +191,10 @@ exports[`MessagePlanChannelTemplate should match snapshot for selected template
           </a>
         </li>
         <li>
-          <a
+          <button
             class="channel-template-link--remove nhsuk-link"
             data-testid="remove-template-link-EMAIL"
-            href="todo"
+            type="button"
           >
             Remove
             <span
@@ -204,7 +204,7 @@ exports[`MessagePlanChannelTemplate should match snapshot for selected template
             </span>
              
             template
-          </a>
+          </button>
         </li>
       </ul>
     </div>
@@ -251,10 +251,10 @@ exports[`MessagePlanChannelTemplate should match snapshot for selected template
           </a>
         </li>
         <li>
-          <a
+          <button
             class="channel-template-link--remove nhsuk-link"
             data-testid="remove-template-link-LETTER"
-            href="todo"
+            type="button"
           >
             Remove
             <span
@@ -264,7 +264,7 @@ exports[`MessagePlanChannelTemplate should match snapshot for selected template
             </span>
              
             template
-          </a>
+          </button>
         </li>
       </ul>
     </div>
@@ -311,10 +311,10 @@ exports[`MessagePlanChannelTemplate should match snapshot for selected template
           </a>
         </li>
         <li>
-          <a
+          <button
             class="channel-template-link--remove nhsuk-link"
             data-testid="remove-template-link-NHSAPP"
-            href="todo"
+            type="button"
           >
             Remove
             <span
@@ -324,7 +324,7 @@ exports[`MessagePlanChannelTemplate should match snapshot for selected template
             </span>
              
             template
-          </a>
+          </button>
         </li>
       </ul>
     </div>
@@ -371,10 +371,10 @@ exports[`MessagePlanChannelTemplate should match snapshot for selected template
           </a>
         </li>
         <li>
-          <a
+          <button
             class="channel-template-link--remove nhsuk-link"
             data-testid="remove-template-link-SMS"
-            href="todo"
+            type="button"
           >
             Remove
             <span
@@ -384,7 +384,7 @@ exports[`MessagePlanChannelTemplate should match snapshot for selected template
             </span>
              
             template
-          </a>
+          </button>
         </li>
       </ul>
     </div>

frontend/src/components/molecules/MessagePlanChannelTemplate/MessagePlanChannelTemplate.module.scss

@@ -20,6 +20,20 @@
   &-link {
     &--remove {
       color: var(--nhsuk-error-colour);
+      background: none;
+      border: none;
+      padding: 0;
+      font: inherit;
+      text-decoration: underline;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: none;
+
+        &:visited {
+          color: var(--nhsuk-error-colour);
+        }
+      }
 
       &:visited {
         color: var(--nhsuk-error-colour);

frontend/src/components/molecules/MessagePlanChannelTemplate/MessagePlanChannelTemplate.tsx

@@ -46,7 +46,7 @@ export function MessagePlanChannelTemplate({
                 className='nhsuk-link nhsuk-link--no-visited-state'
                 href={`/message-plans/${messagePlanChooseTemplateUrl(channelToTemplateType(channel))}`}
               >
-                {content.templateLinks.choose.text}
+                {content.templateLinks.choose}
                 <span className='nhsuk-u-visually-hidden'>
                   {channelDisplayText}
                 </span>{' '}
@@ -63,28 +63,28 @@ export function MessagePlanChannelTemplate({
                   className='nhsuk-link nhsuk-link--no-visited-state'
                   href={`/message-plans/${messagePlanChooseTemplateUrl(channelToTemplateType(channel))}`}
                 >
-                  {content.templateLinks.change.text}
+                  {content.templateLinks.change}
                   <span className='nhsuk-u-visually-hidden'>
                     {channelDisplayText}
                   </span>{' '}
                   {content.templateLinks.template}
                 </Link>
               </li>
               <li>
-                <Link
+                <button
                   data-testid={`remove-template-link-${channel}`}
-                  href={content.templateLinks.remove.href}
                   className={classNames(
                     styles['channel-template-link--remove'],
                     'nhsuk-link'
                   )}
+                  type='button'
                 >
-                  {content.templateLinks.remove.text}
+                  {content.templateLinks.remove}
                   <span className='nhsuk-u-visually-hidden'>
                     {channelDisplayText}
                   </span>{' '}
                   {content.templateLinks.template}
-                </Link>
+                </button>
               </li>
             </>
           )}

frontend/src/content/content.ts

@@ -1047,9 +1047,9 @@ export type FallbackConditionBlock = {
 
 const messagePlanChannelTemplate = {
   templateLinks: {
-    choose: { text: 'Choose' },
-    change: { text: 'Change' },
-    remove: { text: 'Remove', href: 'todo' }, // TODO: Update href
+    choose: 'Choose',
+    change: 'Change',
+    remove: 'Remove',
     template: 'template',
   },
   optional: '(optional)',

frontend/src/styles/app.scss

@@ -68,3 +68,13 @@ pre {
 .inline-block {
   display: inline-block;
 }
+
+a.nhsuk-link--no-visited-state {
+  &:hover {
+    color: nhsuk.$nhsuk-link-colour;
+
+    &:visited {
+      color: nhsuk.$nhsuk-link-colour;
+    }
+  }
+}