- Changing things back to govukFieldset

- Added the usaAlert component
- Edited styles because stripping out UK styles broke the highlighting section
This commit is contained in:
Jonathan Bobel
2023-09-01 16:34:54 -04:00
parent 5e783318b8
commit d8a6004926
11 changed files with 135 additions and 52 deletions

View File

@@ -1,17 +1,18 @@
{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{% if visuallyHiddenText %}<span class="usa-sr-only">{{ visuallyHiddenText }}:</span> {% endif -%}
{{ params.html | safe if params.html else params.text }}
</span>
<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-alert {%- if params.classes %} {{ params.classes }}{% endif %}">
{%- if params.slim %}
<div class="usa-alert usa-alert--slim usa-alert--{{params.type}} {%- if params.classes %} {{ params.classes }}{% endif %}" {%- if params.id %} id="{{ params.id }}"{% endif %}>
<div class="usa-alert__body">
<h4 class="usa-alert__heading">Informative status</h4>
<p class="usa-alert__text">
Lorem ipsum dolor sit amet,
<a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a>
elit, sed do eiusmod.
{{params.text}}
</p>
</div>
</div>
</div>
{% else %}
<div class="usa-alert usa-alert--{{params.type}} {%- if params.classes %} {{ params.classes }}{% endif %}" {%- if params.id %} id="{{ params.id }}"{% endif %}>
<div class="usa-alert__body">
<h{{params.header_level}} class="usa-alert__heading">{{params.heading}}</h{{params.header_level}}>
<p class="usa-alert__text">
{{params.text}}
</p>
</div>
</div>
{% endif %}

View File

@@ -12,7 +12,7 @@
{#- Define common attributes that we can use across all element types #}
{%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
{%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} usa-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
{#- Define common attributes we can use for both button and input types #}
@@ -26,7 +26,7 @@
</a>
{%- elseif element == 'button' %}
<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
<button {%- if params.value %} value="{{ params.value }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }} {% if params.disabled %}disabled{% endif %}>
{{ params.html | safe if params.html else params.text }}
</button>

View File

@@ -1,5 +1,5 @@
{% from "../error-message/macro.njk" import usaErrorMessage -%}
{% from "../fieldset/macro.njk" import usaFieldset %}
{% from "../fieldset/macro.njk" import govukFieldset %}
{% from "../hint/macro.njk" import usaHint %}
{% from "../label/macro.njk" import usaLabel %}
@@ -95,7 +95,7 @@
<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
{% if params.fieldset %}
{% call usaFieldset({
{% call govukFieldset({
describedBy: describedBy,
classes: params.fieldset.classes,
attributes: params.fieldset.attributes,

View File

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

View File

@@ -1,5 +1,5 @@
{% from "../error-message/macro.njk" import usaErrorMessage -%}
{% from "../fieldset/macro.njk" import usaFieldset %}
{% from "../fieldset/macro.njk" import govukFieldset %}
{% from "../hint/macro.njk" import usaHint %}
{% from "../label/macro.njk" import usaLabel %}
@@ -90,7 +90,7 @@
<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
{% if params.fieldset %}
{% call usaFieldset({
{% call govukFieldset({
describedBy: describedBy,
classes: params.fieldset.classes,
attributes: params.fieldset.attributes,

View File

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