New feat banner

app/assets/javascripts/attachments/AttachmentsWidget.js

@@ -252,7 +252,7 @@ export const AttachmentsWidget = ({
         <button
           ref={attachMoreButtonRef}
           type="button"
-          className="button button-secondary"
+          className="button button-secondary [anchor-name:--new-feature-attachments]"
           data-testid="attachments-open-modal"
           aria-labelledby={`${buttonLabelId} ${statusId}`}
           onClick={() => setAttachModalOpen(true)}

app/assets/javascripts/main.js

@@ -158,6 +158,32 @@ $(() => GOVUK.modules.start());
     return null;
   };
 }).call(this);
+
+document.querySelectorAll("[data-new-feature]").forEach(function (banner) {
+  var featureId = banner.dataset.newFeature;
+  if (featureId && GOVUK.cookie("new-feature-" + featureId)) {
+    banner.remove();
+  } else {
+    banner.classList.remove("hidden");
+  }
+});
+
+document.addEventListener("click", function (event) {
+  var hideButton = event.target.closest("[data-dismiss-notice]");
+  if (!hideButton) {
+    return;
+  }
+
+  var banner = hideButton.closest("[data-new-feature]");
+  var featureId = banner && banner.dataset.newFeature;
+  if (!featureId) {
+    return;
+  }
+
+  GOVUK.cookie("new-feature-" + featureId, "hidden", { days: 365 });
+  banner.remove();
+});
+
 (function () {
   "use strict";
   var root = this || window;

app/assets/stylesheets/tailwind/components/buttons.css

@@ -106,5 +106,11 @@
     @apply bg-yellow text-blue outline-none border-white no-underline;
   }
 
+  .bg-brand-100 .button,
+  .bg-brand-100 a.button {
+    box-shadow: 0 2px 0 theme("colors.brand.300");
+    @apply bg-white text-black;
+  }
+
   /*! purgecss end ignore */
 }

app/assets/stylesheets/tailwind/components/layout.css

@@ -92,5 +92,17 @@
     @apply mx-0 pb-0;
   }
 
+  .new-feature-banner {
+    anchor-name: --new-feature-container;
+  }
+  .new-feature-banner::after {
+    content: "";
+    position: fixed;
+    position-anchor: var(--anchored-to);
+    left: anchor(var(--anchored-to) center);
+    top: anchor(--new-feature-container top);
+    @apply w-10 h-10 -translate-x-1/2 -translate-y-1/2 rotate-45 bg-brand-100;
+  }
+
   /*! purgecss end ignore */
 }

app/templates/components/new-feature.html

@@ -0,0 +1,9 @@
+{% macro new_feature(title, cta="", cta_link="", anchored_to="") %}
+<div style="--anchored-to:--{{ anchored_to }};" class="new-feature-banner hidden bg-brand-100 flex flex-col gap-4 p-gutterHalf" data-new-feature="{{ anchored_to }}">
+    {{ title }}
+    <div class="flex gap-4">
+        <a class="button" href="{{ cta_link }}">{{ cta }}</a>
+        <button type="button" class="button-link" data-dismiss-notice>{{ _('Dismiss') }}</button>
+    </div>
+</div>
+{% endmacro %}

app/templates/views/storybook/indicator.html

@@ -2,18 +2,19 @@
 {% from "components/badge.html" import badge %}
 {% from "components/task-shortcut.html" import task_shortcut %}
 {% from 'components/remaining-messages.html' import remaining_messages with context %}
+{% from 'components/new-feature.html' import new_feature %}
 
 
 {% block maincolumn_content %}
-    <div class="heading-large">Indicator component examples</div>
+    <div class="heading-large">Indicator and new feature banner</div>
     <hr />
     <p>The indicator component wraps any element and displays a badge in the corner.</p>
 
     <h2 class="heading-medium mt-8">Button with "New" Badge</h2>
-    <div class="bg-gray-100 px-8 py-16 rounded-md">
+    <div class="bg-gray-100 px-8 py-16">
         {{ indicator('<button type="button" class="button">Inbox</button>', badge('New', variant='blue')) }}
         <h3 class="heading-small mb-2">Code</h3>
-        <div class="bg-gray-200 px-8 pb-8 rounded-md border-1 border-gray-300">
+        <div class="bg-gray-200 px-8 pb-8 border-1 border-gray-300">
             <pre><code>{% raw %}
 {{ indicator(
     '&lt;button type="button" class="button"&gt;Inbox&lt;/button&gt;',
@@ -24,7 +25,7 @@ <h3 class="heading-small mb-2">Code</h3>
     </div>
 
     <h2 class="heading-medium mt-8">Task Shortcut with Badge</h2>
-    <div class="bg-gray-100 px-8 py-16 rounded-md">
+    <div class="bg-gray-100 px-8 py-16">
         {{ indicator(
             task_shortcut(
                 description=_("Start here to write a new message."),
@@ -35,7 +36,7 @@ <h2 class="heading-medium mt-8">Task Shortcut with Badge</h2>
             badge('New', variant='blue')
         ) }}
         <h3 class="heading-small mb-2">Code</h3>
-        <div class="bg-gray-200 px-8 pb-8 rounded-md border-1 border-gray-300">
+        <div class="bg-gray-200 px-8 pb-8 border-1 border-gray-300">
             <pre><code>{% raw %}
 {{ indicator(
     task_shortcut(
@@ -49,4 +50,31 @@ <h3 class="heading-small mb-2">Code</h3>
 {% endraw %}</code></pre>
     </div>
 </div>
+
+<h2 class="heading-medium mt-8">New Feature Banner</h2>
+<p>The feature banner sits within the page flow. This keeps content visible and accessible.</p> 
+<p>You can optionally anchor the banner to an element using CSS. A caret points to the anchor, creating a visual connection..</p> 
+<div class="bg-gray-100 px-8 py-16">
+    <div class="flex flex-col gap-gutter items-start">
+    <button type="button" class="button [anchor-name:--new-feature-example]" id="new-feature-example">Anchoring element</button>
+    {{ new_feature(
+        title="You can do something with this new thing",
+        cta="About this new thing",
+        cta_link="/new-features",
+        anchored_to="new-feature-example"
+    ) }}
+    </div>
+    <h3 class="heading-small mb-2">Code</h3>
+    <div class="bg-gray-200 px-8 pb-8 border-1 border-gray-300 overflow-scroll">
+        <pre><code>{% raw %}
+&lt;button type="button" class="button [anchor-name:--new-feature-example]" id="new-feature-example"&gt;Anchoring element&lt;/button&gt;
+{{ new_feature(
+    title=_("You can do something with this new thing"),
+    cta=_("About this new thing"),
+    cta_link="/new-features",
+    anchored_to="new-feature-example"
+) }}
+{% endraw %}</code></pre>
+    </div>
+</div>
 {% endblock %}

app/templates/views/storybook/storybook-menu.html

@@ -47,7 +47,7 @@
             'path': 'focus_management/full-form'
         },
         {
-            'name': 'Indicator',
+            'name': 'Indicator and new feature banner',
             'path': 'indicator'
         },
         {

app/templates/views/templates/template.html

@@ -7,6 +7,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/api-key.html" import api_key %}
 {% from "components/page-header.html" import page_header %}
+{% from "components/new-feature.html" import new_feature %}
 
 {% block service_page_title %}
   {{ page_title_folder_path(current_service.get_template_path(template._template)) }}
@@ -90,7 +91,7 @@
       {% endif %}
     </div>
   </div>  
-    <div class="mb-16">
+    <div class="mb-16 relative">
       {% if file_attachments_enabled_for_service %} 
         {% if template.template_type == 'email' and current_service.has_permission("upload_document") and current_user.has_permissions('manage_templates') %}
           {{ attachments_widget(
@@ -102,6 +103,12 @@
             url_for('main.template_attachment_status', service_id=current_service.id, template_id=template.id),
             url_for('main.download_template_attachment', service_id=current_service.id, template_id=template.id)
           ) }}
+          {{ new_feature(
+              title=_("Upload attachments without the API"),
+              cta=_("About file attachments"),
+              cta_link="/new-features",
+              anchored_to="new-feature-attachments"
+          ) }}
         {% else %}
           <h2 class="heading-medium" data-testid="attached-files-heading">{{ _('Attached files') }}</h2>
           {% if current_user.has_permissions('manage_service') %}

app/translations/csv/en_base.csv

@@ -10,4 +10,5 @@
 "many {selection} of {total} folders","{selection} of {total} folders"
 "many {selection} of {total} team members","{selection} of {total} team members"
 "many left today","left today"
-"text-message-parts","text message parts"
+"text-message-parts","text message parts"
+"Dismiss","Hide"

app/translations/csv/fr.csv

@@ -2506,3 +2506,6 @@
 "Attachment","Pièce jointe"
 "files attached","fichiers joints"
 "Files attached to this template","Fichiers joints à ce gabarit"
+"Upload attachments without the API","Téléverser des pièces jointes sans l’API"
+"About file attachments","À propos des pièces jointes"
+"Dismiss","Ignorer"