Use new Panel component (#233)

frankieroberto · web-flow · commit d72796ada9ec · 2025-02-18T19:06:33.000Z
Now that the [Panel component](https://service-manual.nhs.uk/design-system/components/panel) has been added to NHS Frontend (thanks @davidhunter08!) we can switch to using that (and the Nunjucks macro) and remove our own css. The only addition needed was adding a modifier for reversed-out (white) links, as the new Panel component wasn’t designed to contain links...
diff --git a/app/assets/sass/components/_link.scss b/app/assets/sass/components/_link.scss
@@ -0,0 +1,6 @@
+// Reversed link - displays using white text.
+// Used on panel components
+.app-link--reverse:link,
+.app-link--reverse:visited {
+  color: $color_nhsuk-white;
+}
diff --git a/app/assets/sass/components/_panel.scss b/app/assets/sass/components/_panel.scss
diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss
@@ -5,7 +5,6 @@
 @import 'components/list-border';
 @import 'components/related-nav';
 @import 'components/indent-list';
-@import 'components/panel';
 
 // Import GOVUK-frontend
 //
@@ -29,6 +28,7 @@ $govuk-brand-colour: $nhsuk-link-color;
 @import 'components/table';
 @import 'components/button';
 @import 'components/filters';
+@import 'components/link';
 
 
 @import '../../components/pagination/_pagination';
diff --git a/app/views/find-a-record/check.html b/app/views/find-a-record/check.html
@@ -20,12 +20,11 @@
     <div class="nhsuk-grid-column-two-thirds">
 
     {% if data.changedField %}
-      <div class="nhsuk-panel nhsuk-u-margin-bottom-8">
-        <h1 class="nhsuk-panel__title">Changes saved</h1>
-        <div class="nhsuk-panel__body">
-        {{data.changedField}} has been updated.
-        </div>
-      </div>
+      {{ panel({
+        titleText: "Changes saved",
+        text: (data.changedField + " has been updated."),
+        classes: "nhsuk-u-margin-bottom-8"
+      }) }}
     {% endif %}
 
       <h1 class="nhsuk-heading-l">{{ vaccination.patient.name }}’s {{vaccination.vaccine}} vaccination record</h1>
diff --git a/app/views/find-a-record/patient-history.html b/app/views/find-a-record/patient-history.html
@@ -22,12 +22,11 @@
     <div class="nhsuk-grid-column-two-thirds">
 
       {% if recordDeleted %}
-        <div class="nhsuk-panel nhsuk-u-margin-bottom-8">
-          <h1 class="nhsuk-panel__title">Record deleted</h1>
-          <div class="nhsuk-panel__body">
-              Jodie Brown's {{ recordDeleted }} record has been deleted.
-          </div>
-        </div>
+        {{ panel({
+          titleText: "Record deleted",
+          text: (data.patientName + "’s " + recordDeleted + " record has been deleted."),
+          classes: "nhsuk-u-margin-bottom-8"
+        }) }}
       {% endif %}
 
       <h1 class="nhsuk-heading-l">{{ data.patientName }}’s vaccination records</h1>
diff --git a/app/views/vaccinate/done.html b/app/views/vaccinate/done.html
@@ -14,12 +14,14 @@
         }) }}
       {% endif %}
 
-      <div class="nhsuk-panel nhsuk-u-margin-bottom-8">
-        <h1 class="nhsuk-panel__title">Vaccination saved</h1>
-        <div class="nhsuk-panel__body">
-          <a href="#">{{ data.patientName }}’s {{ data.vaccine }} record</a> will be sent to their GP.
-        </div>
-      </div>
+      {% set panelHtml %}
+        <a href="#" class="app-link--reverse">{{ data.patientName }}’s {{ data.vaccine }} record</a> will be sent to their GP.
+      {% endset %}
+
+      {{ panel({
+        titleText: "Vaccination saved",
+        html: panelHtml
+      }) }}
 
       <form action="/vaccinate/what-next" method="post" novalidate>
 
diff --git a/docs/views/template.html b/docs/views/template.html
@@ -28,9 +28,10 @@
 {%- from 'radios/macro.njk' import radios %}
 {%- from 'select/macro.njk' import select %}
 {%- from 'summary-list/macro.njk' import summaryList %}
-{%- from 'tabs/macro.njk' import tabs %} 
+{%- from 'tabs/macro.njk' import tabs %}
 {%- from 'tag/macro.njk' import tag %}
 {%- from 'textarea/macro.njk' import textarea %}
+{%- from 'panel/macro.njk' import panel %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -71,7 +72,7 @@
     {% endblock %}
 
     {% block head %}{% endblock %}
-    
+
   </head>
 
   <body class="{{ bodyClasses }}">
