merge main and fixed conflicts

app/templates/components/components/select/README.md

@@ -0,0 +1,13 @@
+# Select
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the select component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/select/).
+
+## Component options
+
+Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.

app/templates/components/components/select/macro-options.json

@@ -0,0 +1,58 @@
+[
+    {
+        "name": "id",
+        "type": "string",
+        "required": true,
+        "description": "ID for each select box."
+    },
+    {
+        "name": "name",
+        "type": "string",
+        "required": true,
+        "description": "Name property for the select."
+    },
+    {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "The items within the select component."
+    },
+    {
+        "name": "value",
+        "type": "string",
+        "required": false,
+        "description": "Value for the option which should be selected. Use this as an alternative to setting the selected option on each individual item."
+    },
+     {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": "If true, select box will be disabled. Use the disabled option on each individual item to only disable certain options."
+    },
+    {
+        "name": "describedBy",
+        "type": "string",
+        "required": false,
+        "description": "One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users."
+    },
+    {
+        "name": "label",
+        "type": "object",
+        "required": true,
+        "description": "The label used by the select component.",
+        "isComponent": true
+    },
+    {
+        "name": "hint",
+        "type": "object",
+        "required": false,
+        "description": "Can be used to add a hint to the select component.",
+        "isComponent": true
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the select."
+    }
+]

app/templates/components/components/select/macro.njk

@@ -0,0 +1,3 @@
+{% macro usaSelect(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/templates/components/components/select/template.njk

@@ -0,0 +1,15 @@
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+<div class="usa-form-group">
+  <label class="usa-label" for="{{ params.name }}">{{params.label}}</label>
+  {% if params.hint %}
+    <div class="usa-hint" id="{{ params.describedBy }}">{{ params.hint }}</div>
+  {% endif %}
+  <select class="usa-select {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}"
+  {%- if params.value %} value="{{ params.value}}"{% endif %}
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {% for item in params.items %}
+    <option value="{{ item.value }}" {%- if item.disabled == true %} selected disabled {% endif %}>{{ item.text }}</option>
+  {% endfor %}
+  </select>
+</div>

app/templates/components/table.html

@@ -171,8 +171,8 @@
       {% endif %}
       <p class="status-hint margin-0 width-card ">
         {{ notification.status|format_notification_status_as_time(
-          notification.created_at|format_datetime_short_america,
-          (notification.sent_at or notification.created_at)|format_datetime_short_america
+          notification.created_at|format_datetime_table,
+          (notification.sent_at or notification.created_at)|format_datetime_table
         ) }}
         </p>
       {% if displayed_on_single_line %}</span>{% endif %}

app/templates/error/401.html

@@ -4,6 +4,7 @@
   <div class="grid-row">
     <div class="grid-col-8">
     <h1>You’re not authorized to see this page</h1>
-      <p class="usa-body"><a class="usa-link" href="{{ url_for('main.sign_in' )}}">Sign in</a> to Notify.gov and try again.</p>
+      <p class="usa-body">If you have been invited to join Notify.gov, <a class="usa-link" href="{{ url_for('main.sign_in' )}}">sign in</a> to Notify.gov using your Login.gov account and try again.</p>
   </div>
 {% endblock %}
+e

app/templates/new/base.html

@@ -6,49 +6,7 @@
 
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en') }}" class="{{ htmlClasses }}">
-  <head>
-    <meta charset="utf-8" />
-    <title>
-      {% block pageTitle %}
-        {% block per_page_title %} {% endblock %}Notify.gov
-        <!-- on templates that were using content_template.html, we might need to use the {{ content_page_title }} variable for the per_page_title -->
-      {% endblock %}
-    </title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="f0f0f0" />
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="1b1b1b" />
-    {% if config['NR_MONITOR_ON'] %}
-      {% include "partials/newrelic.html" -%}
-    {% endif %}
-    {# Ensure that older IE versions always render with the correct rendering engine #}
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    {% block headIcons %}
-      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
-      <link rel="mask-icon" href="{{ asset_url('images/usa-mask-icon.svg') }}" color="{{ themeColor | default('#F0F0F0') }}">
-      <link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/apple-touch-icon.png') }}">
-      <link rel="apple-touch-icon" href="{{ asset_url('images/apple-touch-icon.png') }}">
-    {% endblock %}
-
-    {% block head %}
-      <link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
-      {% block extra_stylesheets %}
-      {% endblock %}
-      {% if g.hide_from_search_engines %}
-        <meta name="robots" content="noindex" />
-      {% endif %}
-      <meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" />
-      {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
-      {% block meta_format_detection %}
-        <meta name="format-detection" content="telephone=no">
-      {% endblock %}
-      {% block meta %}
-        <meta property="og:site_name" content="Notify.gov">
-        <meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
-      {% endblock %}
-      <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
-    {% endblock %}
-  </head>
-
+  {% include "new/components/head/head.html" %}
   <body class="usa-template__body {{ bodyClasses }}">
     <script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
     {% block bodyStart %}

app/templates/new/components/head/head.html

@@ -0,0 +1,46 @@
+<head>
+    <meta charset="utf-8" />
+    <title>{% block pageTitle %}Notify.gov{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Reach people where they are with a text message platform built just for government">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="f0f0f0" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="1b1b1b" />
+    {% if config['NR_MONITOR_ON'] %}
+        {% include "partials/newrelic.html" -%}
+    {% endif %}
+
+    {# Ensure that older IE versions always render with the correct rendering engine #}
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    {% block headIcons %}
+    <link rel="shortcut icon" href="{{ assetPath | default('/assets') }}/images/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ assetPath | default('/assets') }}/images/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ assetPath | default('/assets') }}/images/favicon-16x16.png" />
+    <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <link href="{{ assetPath | default('/assets') }}/images/notify-dark-favicon.png" rel="icon" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#ffffff">
+    {% endblock %}
+
+    <link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
+    {% block extra_stylesheets %}{% endblock %}
+
+    {% block meta_format_detection %}
+    <meta name="format-detection" content="telephone=no">
+    {% endblock %}
+    {% block og_image %}
+    <meta property="og:title" content="Notify.gov">
+    <meta property="og:description" content="Reach people where they are with a text message platform built just for government">
+    <meta property="og:image" content="/static/images/notify-og-image.png">
+    {% endblock %}
+    {# google #}
+    <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
+    <meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" />
+    {% if g.hide_from_search_engines %}
+    <meta name="robots" content="noindex" />
+    {% endif %}
+
+    {% block head %}{% endblock %}
+</head>

app/templates/new/templates_glossary.md

@@ -11,6 +11,7 @@ This document serves as a glossary for the templates directory structure of the
     - `withnav_template.html`: A variation of the base layout that includes a sidebar.
     - `org_template.html`: A variaton of the withnav_template
   - **/components**: Houses reusable UI components that can be included in multiple templates and can be tailored with different content or links depending on the context.(more frequently revised or customized)
+    - `head.html`: Template for the site's <head>, included in `base.html`.
     - `header.html`: Template for the site's header, included in `base.html`.
     - `footer.html`: Template for the site's footer, included in `base.html`.
   - **/views** (or **/pages**): Individual page templates that use the base layouts, components, and partials to present content.

app/templates/partials/jobs/status.html

@@ -27,7 +27,7 @@
           <div class="usa-alert__body">
             <h4 class="usa-alert__heading">Your text has been scheduled</h4>
             <p class="usa-alert__text">
-              {{ job.template_name }} - {{ current_service.name }} was scheduled on {{ job.scheduled_for|format_datetime_text }} by {{ job.created_by.name }}
+              {{ job.template_name }} - {{ current_service.name }} was scheduled on {{ job.scheduled_for|format_datetime_normal }} by {{ job.created_by.name }}
             </p>
           </div>
         </div>
@@ -37,7 +37,7 @@
           <div class="usa-alert__body">
             <h4 class="usa-alert__heading">Your text has been sent</h4>
             <p class="usa-alert__text">
-              {{ job.template_name }} - {{ current_service.name }} was sent on {{ job.created_at|format_datetime_text }} by {{ job.created_by.name }}
+              {{ job.template_name }} - {{ current_service.name }} was sent on {{ job.created_at|format_datetime_normal }} by {{ job.created_by.name }}
             </p>
           </div>
         </div>

app/templates/views/api/keys.html

@@ -44,7 +44,7 @@
       {% endcall %}
       {% if item.expiry_date %}
         {% call field(align='right') %}
-          <span class='hint'>Revoked {{ item.expiry_date|format_datetime_short }}</span>
+          <span class='hint'>Revoked {{ item.expiry_date|format_datetime_table }}</span>
         {% endcall %}
       {% else %}
         {% call field(align='right', status='error') %}

app/templates/views/dashboard/dashboard.html

@@ -68,7 +68,7 @@
                     {{ notification.template.name }}
                   </td>
                   <td class="table-field time-sent">
-                    {{ job.created_at | format_datetime_short_america }}
+                    {{ job.created_at | format_datetime_table }}
                   </td>
                   <td class="table-field sender">
                     {{ notification.created_by.name }}

app/templates/views/platform-admin/complaints.html

@@ -29,7 +29,7 @@
 
       {{ text_field(item.complaint_type) }}
 
-      {{ text_field(item.complaint_date|format_datetime_short if item.complaint_date else None) }}
+      {{ text_field(item.complaint_date|format_datetime_table if item.complaint_date else None) }}
 
   {% endcall %}
 

app/templates/views/set-up-your-profile.html

@@ -0,0 +1,77 @@
+{% extends "withoutnav_template.html" %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
+{% from "components/components/select/macro.njk" import usaSelect -%}
+
+{% block per_page_title %}
+Set up your profile
+{% endblock %}
+
+{% block maincolumn_content %}
+
+<div class="grid-row">
+  <div class="grid-col-8">
+    <h1 class="font-body-2xl margin-bottom-3">Set up your profile</h1>
+    {% call form_wrapper(autocomplete=True) %}
+    {{ form.name(param_extensions={}) }}
+    <div class="extra-tracking">
+      {{ form.mobile_number(param_extensions={
+      "hint": {"text": "We'll send you a security code by text message"},
+      }) }}
+    </div>
+    <!--{{ usaSelect({
+      "id": "time-zone",
+      "name": "time-zone",
+      "label": "Time zone",
+      "items": [
+        {
+          "value": "",
+          "disabled": true,
+          "text": "- Select -"
+        },
+        {
+          "value": "America/Puerto_Rico",
+          "text": "America/Puerto_Rico"
+        },
+        {
+          "value": "US/Eastern",
+          "text": "US/Eastern"
+        },
+        {
+          "value": "US/Central",
+          "text": "US/Central"
+        },
+        {
+          "value": "US/Mountain",
+          "text": "US/Mountain"
+        },
+        {
+          "value": "US/Pacific",
+          "text": "US/Pacific"
+        },
+        {
+          "value": "US/Alaska",
+          "text": "US/Alaska"
+        },
+        {
+          "value": "US/Hawaii",
+          "text": "US/Hawaii"
+        },
+        {
+          "value": "US/Aleutian",
+          "text": "US/Aleutian"
+        },
+        {
+          "value": "US/Samoa",
+          "text": "US/Samoa"
+        },
+      ]
+      })
+      }}-->
+      {{form.auth_type}}
+      {{ page_footer("Save") }}
+    {% endcall %}
+  </div>
+</div>
+
+{% endblock %}

app/templates/views/signedout.html

@@ -21,7 +21,7 @@ Notify.gov
               <h1 class="font-serif-2xl usa-hero__heading">Reach people where they are with government-powered text messages</h1>
               <p class="font-sans-lg">Notify.gov is a text message service that helps federal, state, local, tribal and territorial governments more effectively communicate with the people they serve.</p>
               <div class="usa-button-group margin-bottom-5">
-                <a class="usa-button usa-button--big margin-right-2" href="{{ url_for('main.sign_in' )}}">Sign in</a>
+                <a class="usa-button usa-button--big margin-right-2" href="{{ url_for('main.sign_in' ) }}">Sign in</a>
                 if you are an existing pilot partner
               </div>
               <p class="font-sans-md">Currently we are only working with select pilot partners. If you are interested in using Notify.gov in the future, please contact <br><a href="mailto:tts-benefits-studio@gsa.gov">tts-benefits-studio@gsa.gov</a> to learn more.</p>