Early access header notification (#16482)

* add early access reusable text

* add early access header notification

* we can use a boolean in this oneoff block

Author: sarahs

data/ui.yml

@@ -18,6 +18,8 @@ header:
       still in translation. For the most up-to-date and accurate information,
       please visit our
       <a id="to-english-doc" href="/en">English documentation</a>.
+    early_access:
+      👋 This page contains content about an early access feature. Please do not share this URL publicly.
 search:
   need_help: Need help?
   placeholder: Search topics, products...

includes/header-notification.html

@@ -29,14 +29,27 @@
 {% endif %}
 <!-- END RELEASE NOTICES -->
 
+<!-- ONEOFF EARLY ACCESS NOTICE -->
+{% if page.hidden %}
+{% assign early_access_notification_type = true %}
+{% assign early_access_notification = site.data.ui.header.notices.early_access %}
+{% endif %}
+<!-- END ONEOFF EARLY ACCESS NOTICE -->
+
 {% if translation_notification_type %}
   <div class="header-notifications text-center f5 bg-blue-1 text-gray-dark py-4 px-6 translation_notice{% if release_notification_type %} border-bottom border-black-fade{% endif %}">
     {{ translation_notification }}
   </div>
 {% endif %}
 
 {% if release_notification_type %}
-  <div class="header-notifications text-center f5 bg-blue-1 text-gray-dark py-4 px-6 release_notice">
+  <div class="header-notifications text-center f5 bg-blue-1 text-gray-dark py-4 px-6 release_notice{% if early_access_notification_type %} border-bottom border-black-fade{% endif %}">
     {{ release_notification }}
   </div>
 {% endif %}
+
+{% if early_access_notification_type %}
+  <div class="header-notifications text-center f5 bg-blue-1 text-gray-dark py-4 px-6 early_access">
+    {{ early_access_notification }}
+  </div>
+{% endif %}