Merge pull request #2117 from GSA/2102-aboutwhy-text-messaging

About/why text messaging content

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -898,7 +898,7 @@ li.linked-card:hover svg,
    display: block;
 }
 
-.about-icon-list {
+.icon-list {
    display: flex;
    width: 24px;
    height: 24px;
@@ -908,10 +908,6 @@ li.linked-card:hover svg,
    margin-right: 4px;
 }
 
-.usa-icon-list__content{
-   padding-left: 0;
-}
-
 .indented-paragraph {
    margin-left: calc(24px + 4px);
    margin-top: 4px;

app/main/views/index.py

@@ -294,6 +294,7 @@ def benchmark_performance():
     )
 
 
+@main.route("/using-notify/guidance")
 @main.route("/guides/using-notify/guidance")
 @user_is_logged_in
 def guidance_index():
@@ -314,6 +315,14 @@ def about_notify():
     )
 
 
+@main.route("/about/why-text-messaging")
+def why_text_messaging():
+    return render_template(
+        "views/about/why-text-messaging.html",
+        navigation_links=about_notify_nav(),
+    )
+
+
 @main.route("/using-notify/guidance/create-and-send-messages")
 @user_is_logged_in
 def create_and_send_messages():

app/main/views/sub_navigation_dictionaries.py

@@ -110,7 +110,27 @@ def best_practices_nav():
 def about_notify_nav():
     return [
         {
-            "name": "About notify",
+            "name": "About Notify",
             "link": "main.about_notify",
+            "sub_navigation_items": [
+                {
+                    "name": "Why text messaging",
+                    "link": "main.why_text_messaging",
+                    "sub_sub_navigation_items": [
+                        {
+                            "name": "Reach people using a common method",
+                            "link": "main.why_text_messaging#reach-people-using-a-common-method",
+                        },
+                        {
+                            "name": "Improve customer experience",
+                            "link": "main.why_text_messaging#improve-customer-experience",
+                        },
+                        {
+                            "name": "What texting is best for",
+                            "link": "main.why_text_messaging#what-texting-is-best-for",
+                        },
+                    ],
+                },
+            ],
         },
     ]

app/templates/base.html

@@ -66,7 +66,20 @@
                               <ul class="usa-sidenav__sublist" role="menu">
                                 {% for sub_item in item.sub_navigation_items %}
                                   <li role="menuitem">
-                                    <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}">{{ sub_item.name }}</a>
+                                    <a href="{{ url_for(sub_item.link.split('#')[0]) }}#{{ sub_item.link.split('#')[1] }}">
+                                      {{ sub_item.name }}
+                                    </a>
+                                    {% if sub_item.sub_sub_navigation_items %}
+                                      <ul class="usa-sidenav__sublist usa-sidenav__sub-sublist" role="menu">
+                                        {% for sub_sub_item in sub_item.sub_sub_navigation_items %}
+                                          <li role="menuitem">
+                                            <a href="{{ url_for(sub_sub_item.link.split('#')[0]) }}#{{ sub_sub_item.link.split('#')[1] }}">
+                                              {{ sub_sub_item.name }}
+                                            </a>
+                                          </li>
+                                        {% endfor %}
+                                      </ul>
+                                    {% endif %}
                                   </li>
                                 {% endfor %}
                               </ul>

app/templates/views/about/about.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% set page_title = "About notify" %}
+{% set page_title = "About Notify" %}
 
 {% block per_page_title %}
 {{page_title}}
@@ -17,8 +17,9 @@ <h1>{{page_title}}</h1>
     <li>Meet people where they are</li>
     <li>More effectively deliver program outcomes</li>
     <li>Save administrative costs</li>
-    <li>Implement <a href="https://digital.gov/resources/delivering-digital-first-public-experience/"
-        target="_blank">21st Century IDEA</a> and other directives</li>
+    <li>Implement <a class="use-link usa-link--external"
+        href="https://digital.gov/resources/delivering-digital-first-public-experience/" target="_blank">21st Century
+        IDEA</a> and other directives</li>
   </ul>
   <p>Notify.gov is an easy-to-use, web-based platform. It requires no technical expertise or system integration — users
     can create an account and get started within minutes. We take the security and privacy of messaging data seriously
@@ -56,9 +57,9 @@ <h2 class="padding-bottom-3">Product Highlights</h2>
   <ul class="usa-icon-list">
     {% for item in product_highlights %}
     <li class="usa-icon-list__item">
-      <div class="usa-icon-list__content">
+      <div class="usa-icon-list__content padding-left-0">
         <div class="usa-icon-list__icon display-flex flex-align-start">
-          <svg aria-hidden="true" focusable="false" role="img" class="about-icon-list">
+          <svg aria-hidden="true" focusable="false" role="img" class="icon-list">
             <use xlink:href="{{ asset_url('img/sprite.svg') }}{{ item.svg_src }}"></use>
           </svg>
           <b>{{item.card_heading}}</b>
@@ -68,10 +69,8 @@ <h2 class="padding-bottom-3">Product Highlights</h2>
     </li>
     {% endfor %}
   </ul>
-  <p><a href="/join-notify">See if Notify is right for you</a></p>
-  <p>Notify.gov is a product of the <a href="#" target="_blank">Public Benefits Studio</a>, a product accelerator inside
+  <p><a href="#">See if Notify is right for you</a></p>
+  <p>Notify.gov is a product of the <a href="#">Public Benefits Studio</a>, a product accelerator inside
     the federal government. </p>
-
-
 </section>
 {% endblock %}