Add support for text input placeholder

Author: colinrotherham

packages/nhsuk-frontend/src/nhsuk/components/header/_index.scss

@@ -323,11 +323,6 @@ $nhsuk-header-reverse-item-active-colour: $nhsuk-reverse-text-colour;
       border: $nhsuk-border-width-form-element solid $nhsuk-focus-text-colour;
     }
 
-    &::placeholder {
-      opacity: 1; // Fixes low contrast of placeholder text in firefox
-      color: nhsuk-colour("grey-1");
-    }
-
     // Hide search input clear button (IE)
     &::-ms-clear {
       display: none;

packages/nhsuk-frontend/src/nhsuk/components/input/_index.scss

@@ -42,6 +42,11 @@
       background-color: transparent;
       cursor: not-allowed;
     }
+
+    &::placeholder {
+      opacity: 1; // Fixes low contrast of placeholder text in firefox
+      color: nhsuk-colour("grey-1");
+    }
   }
 
   .nhsuk-input::-webkit-outer-spin-button,

packages/nhsuk-frontend/src/nhsuk/components/input/macro-options.mjs

@@ -200,6 +200,11 @@ export const params = {
     description:
       'Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.'
   },
+  placeholder: {
+    type: 'string',
+    required: false,
+    description: 'Attribute to provide placeholder text for the input.'
+  },
   spellcheck: {
     type: 'boolean',
     required: false,

packages/nhsuk-frontend/src/nhsuk/components/input/template.njk

@@ -72,6 +72,10 @@
         value: params.pattern,
         optional: true
       },
+      placeholder: {
+        value: params.placeholder,
+        optional: true
+      },
       inputmode: {
         value: params.inputmode,
         optional: true