Merge pull request #145 from communitiesuk/feature/masthead-text-colour-prop/|ID2-101

Add text color prop and force color change with css variable

Author: mileshinch

src/lib/components/ui/Masthead.svelte

@@ -11,6 +11,7 @@
     imageSrc = homepageIllustration,
     imageAlt = "",
     backgroundColor = "#1d70b8", // GOV.UK blue by default
+    textColor = "#FFFFFF",
   } = $props<{
     title?: string;
     description?: string;
@@ -20,12 +21,13 @@
     imageSrc?: string;
     imageAlt?: string;
     backgroundColor?: string;
+    textColor?: string;
   }>();
 </script>
 
 <div
   class="app-masthead"
-  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor};"
+  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor}; --masthead-text-color: {textColor};"
 >
   <div class="govuk-width-container">
     <div class="govuk-grid-row">
@@ -250,7 +252,10 @@
 
   /* GOV.UK Typography - Scoped to our component with high specificity */
   .app-masthead .govuk-heading-xl.govuk-heading-xl {
-    color: #ffffff; /* Override to white for masthead */
+    color: var(
+      --masthead-text-color,
+      #ffffff
+    ); /* Override to textColor prop if specified otherwise fall back to white */
     font-family: "GDS Transport", arial, sans-serif;
     font-weight: 700;
     font-size: 2rem;
@@ -267,4 +272,8 @@
       margin-bottom: 3.125rem;
     }
   }
+
+  .app-masthead__description {
+    color: var(--masthead-text-color);
+  }
 </style>

src/wrappers/components/ui/MastheadWrapper.svelte

@@ -209,6 +209,15 @@
         },
         rows: 4,
       },
+      {
+        name: "textColor",
+        category: "Visual",
+        value: "#FFFFFF",
+        description: {
+          markdown: true,
+          arr: ["The text color of the title and description."],
+        },
+      },
       {
         name: "includeButton",
         category: "Call to Action",