Merge branch 'main' of https://github.com/GSA/notifications-admin into 810-hide-personalization-after-sending

This commit is contained in:
Jonathan Bobel
2024-03-26 11:23:52 -04:00
15 changed files with 287 additions and 45 deletions

View File

@@ -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.

View File

@@ -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."
}
]

View File

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

View File

@@ -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>

View File

@@ -4,6 +4,7 @@
<div class="grid-row">
<div class="grid-col-8">
<h1>Youre 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

View File

@@ -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 %}

View File

@@ -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>