Add warnings to promoted components

app/views/components/banner/index.html

@@ -17,8 +17,21 @@ <h1 class="govuk-heading-xl govuk-!-margin-bottom-4"><span class="govuk-caption-
     text: 'experimental'
   }) }}
 
+  {% set html %}
+    <h3 class="govuk-notification-banner__heading">
+      The GOV.UK Design System has a similar component
+    </h3>
+    <p class="govuk-body">The <a href="https://design-system.service.gov.uk/components/notification-banner/">Notification banner component</a> in the GOV.UK Design System has a similar function and visual design to this component.</p>
+    <p class="govuk-body">You should consider using the GOV.UK version if it fits your needs.</p>
+  {% endset %}
+
+
+  {{ govukNotificationBanner({
+    html: html
+  }) }}
+
   <div class="app-prose-scope">
     {% markdown %}{% include "./README.md" %}{% endmarkdown %}
   </div>
 
-{% endblock %}
+{% endblock %}

app/views/components/currency-input/index.html

@@ -17,8 +17,21 @@ <h1 class="govuk-heading-xl govuk-!-margin-bottom-4"><span class="govuk-caption-
     text: 'experimental'
   }) }}
 
+  {% set html %}
+    <h3 class="govuk-notification-banner__heading">
+      The GOV.UK Design System has a similar component
+    </h3>
+    <p class="govuk-body">The <a href="https://design-system.service.gov.uk/components/text-input/">Text input component</a> in the GOV.UK Design System supports <a href="https://design-system.service.gov.uk/components/text-input/#prefixes-and-suffixes">prefixes and suffixes</a>, including currency symbols.</p>
+    <p class="govuk-body">You should use the GOV.UK version if you can.</p>
+  {% endset %}
+
+
+  {{ govukNotificationBanner({
+    html: html
+  }) }}
+
   <div class="app-prose-scope">
     {% markdown %}{% include "./README.md" %}{% endmarkdown %}
   </div>
 
-{% endblock %}
+{% endblock %}

app/views/layouts/base.html

@@ -1,3 +1,4 @@
+{%- from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner -%}
 {%- from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner -%}
 {%- from "govuk/components/tag/macro.njk" import govukTag -%}
 {%- from "govuk/components/table/macro.njk" import govukTable -%}

package.json

@@ -35,7 +35,7 @@
     "dotenv": "^6.0.0",
     "express": "^4.16.3",
     "express-session": "^1.16.2",
-    "govuk-frontend": "^3.0.0",
+    "govuk-frontend": "^3.11.0",
     "gray-matter": "^4.0.1",
     "gulp": "^4.0.0",
     "gulp-nodemon": "^2.4.2",