From d67923dafcd73faae64b011990c6903147c46e79 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Thu, 14 Mar 2024 12:26:12 -0400
Subject: [PATCH] Added the "set up your profile" page and added a select
 component

---
 .../components/components/select/README.md    | 13 ++++
 .../components/select/macro-options.json      | 58 ++++++++++++++
 .../components/components/select/macro.njk    |  3 +
 .../components/components/select/template.njk | 12 +++
 app/templates/views/set-up-your-profile.html  | 78 +++++++++++++++++++
 5 files changed, 164 insertions(+)
 create mode 100644 app/templates/components/components/select/README.md
 create mode 100644 app/templates/components/components/select/macro-options.json
 create mode 100644 app/templates/components/components/select/macro.njk
 create mode 100644 app/templates/components/components/select/template.njk
 create mode 100644 app/templates/views/set-up-your-profile.html

diff --git a/app/templates/components/components/select/README.md b/app/templates/components/components/select/README.md
new file mode 100644
index 000000000..c656980d6
--- /dev/null
+++ b/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.
diff --git a/app/templates/components/components/select/macro-options.json b/app/templates/components/components/select/macro-options.json
new file mode 100644
index 000000000..c786613f7
--- /dev/null
+++ b/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."
+    }
+]
diff --git a/app/templates/components/components/select/macro.njk b/app/templates/components/components/select/macro.njk
new file mode 100644
index 000000000..9c1333ca8
--- /dev/null
+++ b/app/templates/components/components/select/macro.njk
@@ -0,0 +1,3 @@
+{% macro usaSelect(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/app/templates/components/components/select/template.njk b/app/templates/components/components/select/template.njk
new file mode 100644
index 000000000..ece5fc774
--- /dev/null
+++ b/app/templates/components/components/select/template.njk
@@ -0,0 +1,12 @@
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+<div class="usa-form-group">
+  <label class="usa-label" for="{{ params.name }}">{{params.label}}</label>
+  <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>
diff --git a/app/templates/views/set-up-your-profile.html b/app/templates/views/set-up-your-profile.html
new file mode 100644
index 000000000..8a5b96e39
--- /dev/null
+++ b/app/templates/views/set-up-your-profile.html
@@ -0,0 +1,78 @@
+{% 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",
+      "errorMessage": "Oh no!",
+      "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 %}