From 2eef82e3b4d5568ff439a873c83eec7385bcfb18 Mon Sep 17 00:00:00 2001
From: Mavis Ou <mmmavis@users.noreply.github.com>
Date: Wed, 28 Aug 2024 13:47:07 -0700
Subject: [PATCH] Replaced emoji for special page nav link with text (#12728)

* Replaced emoji for special page nav link with text
* Created a template fragment to render notes for menu link to special page
---
 .../templates/tags/horizontal_nav.html         |  2 +-
 .../tags/multipage_menu_link_note.html         | 18 ++++++++++++++++++
 .../wagtailpages/tags/mini_site_sidebar.html   |  2 +-
 source/sass/components/multipage-nav.scss      | 16 ----------------
 4 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 network-api/networkapi/templates/tags/multipage_menu_link_note.html

diff --git a/network-api/networkapi/templates/tags/horizontal_nav.html b/network-api/networkapi/templates/tags/horizontal_nav.html
index 2633eaf3abe..7f5c3c97e2c 100644
--- a/network-api/networkapi/templates/tags/horizontal_nav.html
+++ b/network-api/networkapi/templates/tags/horizontal_nav.html
@@ -5,7 +5,7 @@
     {% for entry in menu_pages %}
         {% pageurl entry.page as entry_page_url %}
         {% if entry.depth < 2 %}
-            <a class="multipage-link {% if current_page_url == entry_page_url %}active{% endif %} {% if entry.restriction != None %}multipage-{{ entry.restriction }}-restricted{% endif %} {% if not entry.page.live %}multipage-draft{% endif %}" href="{% pageurl entry.page %}">{{ entry.menu_title }}</a>
+            <a class="multipage-link {% if current_page_url == entry_page_url %}active{% endif %}" href="{% pageurl entry.page %}">{{ entry.menu_title }} {% include "tags/multipage_menu_link_note.html" with menu_entry=entry %}</a>
         {% endif %}
     {% endfor %}
 </div>
diff --git a/network-api/networkapi/templates/tags/multipage_menu_link_note.html b/network-api/networkapi/templates/tags/multipage_menu_link_note.html
new file mode 100644
index 00000000000..e20fd33fbc7
--- /dev/null
+++ b/network-api/networkapi/templates/tags/multipage_menu_link_note.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+
+{% with class="tw-text-red-80 tw-text-sm tw-ml-1" %}
+    {% comment %}These notes are internal facing only. Only logged in users can see them.{% endcomment %}
+
+    {% if menu_entry.restriction == "login" %}
+        <span class="{{ class }}">(logged in users only)</span>
+    {% elif menu_entry.restriction == "groups" %}
+        <span class="{{ class }}">(restricted to specific groups)</span>
+    {% elif menu_entry.restriction == "password" %}
+        <span class="{{ class }}">(password protected)</span>
+    {% endif %}
+
+    {% if not menu_entry.page.live %}
+        <span class="{{ class }}">(draft)</span>
+    {% endif %}
+
+{% endwith %}
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/mini_site_sidebar.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/mini_site_sidebar.html
index 3059ea832b7..3467fb6da30 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/mini_site_sidebar.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/mini_site_sidebar.html
@@ -7,7 +7,7 @@
             {% for entry in menu_pages %}
                 {% pageurl entry.page as entry_page_url %}
                 <div class="multipage-link-wrapper">
-                    <a class="multipage-link {% if current_page_url == entry_page_url %}active{% endif %} {% if entry.restriction != None %}multipage-{{ entry.restriction }}-restricted{% endif %} {% if not entry.page.live %}multipage-draft{% endif %}" href="{% pageurl entry.page %}">{% if entry.depth == 2 %}→ {% endif %}{{ entry.menu_title }}
+                    <a class="multipage-link {% if current_page_url == entry_page_url %}active{% endif %} {% if entry.restriction != None %}multipage-{{ entry.restriction }}-restricted{% endif %} {% if not entry.page.live %}multipage-draft{% endif %}" href="{% pageurl entry.page %}">{% if entry.depth == 2 %}→ {% endif %}{{ entry.menu_title }} {% include "tags/multipage_menu_link_note.html" with menu_entry=entry %}
                     </a>
                 </div>
             {% endfor %}
diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss
index c63fdb4efaa..97193066a96 100644
--- a/source/sass/components/multipage-nav.scss
+++ b/source/sass/components/multipage-nav.scss
@@ -36,20 +36,4 @@
       @apply tw-mb-12;
     }
   }
-
-  .multipage-login-restricted::after {
-    content: "🙈";
-  }
-
-  .multipage-groups-restricted::after {
-    content: "👥";
-  }
-
-  .multipage-password-restricted::after {
-    content: "🔒";
-  }
-
-  .multipage-draft::after {
-    content: "🐣";
-  }
 }