merge main

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