Fix namespacing for transparent tag class

Author: paulrobertlloyd

app/assets/stylesheets/components/_tag.scss

@@ -1,13 +1,5 @@
 @use "../vendor/nhsuk-frontend" as *;
 
-.nhsuk-tag {
-  &--transparent {
-    border-color: $nhsuk-text-colour;
-    color: $nhsuk-text-colour;
-    background-color: transparent;
-  }
-}
-
 .nhsuk-tag + .nhsuk-u-secondary-text-colour {
   margin-left: nhsuk-spacing(2);
 
@@ -17,3 +9,9 @@
 .app-tag--attached {
   margin-right: -1px;
 }
+
+.app-tag--transparent {
+  border-color: $nhsuk-text-colour;
+  color: $nhsuk-text-colour;
+  background-color: transparent;
+}

app/utils/string.js

@@ -169,10 +169,19 @@ export function formatWithSecondaryText(text, secondary, breakLine = true) {
  */
 export function formatTag({ text, html, colour, classes }) {
   text = html || text
-  classes = ['nhsuk-tag', classes].join(' ')
+
+  const classAttr = classes ? classes.split(' ') : []
+
+  if (colour && colour === 'transparent') {
+    classAttr.push('app-tag--transparent')
+  } else if (colour) {
+    classAttr.push(`nhsuk-tag--${colour}`)
+  }
+
+  classAttr.unshift('nhsuk-tag')
 
   if (colour) {
-    return `<strong class="${classes} nhsuk-tag--${colour}">${text}</strong>`
+    return `<strong class="${classAttr.join(' ')}">${text}</strong>`
   }
 
   return `<strong class="${classes}">${text}</strong>`
@@ -182,7 +191,7 @@ export function formatProgrammeStatus(programme, status, note) {
   let html = formatTag({
     classes: 'app-tag--attached',
     text: programme.name,
-    colour: 'white'
+    colour: 'transparent'
   })
 
   if (status) {