Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(banner): fix issue with classes not working if banner type provided #887

Merged
28 changes: 26 additions & 2 deletions src/moj/components/banner/template.njk
Original file line number Diff line number Diff line change
@@ -1,4 +1,28 @@
<div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} role="region" aria-label="{{ params.iconFallbackText | default(params.type) | default("banner") }}">
{#- Set classes for this component #}
{%- set classNames = ["moj-banner"] -%}

{%- if params.type == 'success' %}
{%- set classNames = classNames.concat("moj-banner--success") %}
{%- elif params.type == 'warning' %}
{%- set classNames = classNames.concat("moj-banner--warning") %}
{%- elif params.type == 'information' %}
{%- set classNames = classNames.concat("moj-banner--information") %}
{%- endif %}

{%- if params.classes %}
{%- set classNames = classNames.concat(params.classes) %}
{%- endif %}

{%- set classNames = classNames | join(' ') -%}

<div
class="{{ classNames }}"
{%- for attribute, value in params.attributes %}
{{ attribute }}="{{ value }}"
{% endfor %}
role="region"
aria-label="{{ params.iconFallbackText | default(params.type) | default("banner") }}"
>

{% if params.type == 'success' %}
<svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>
Expand All @@ -13,4 +37,4 @@
{{- params.html | safe if params.html else params.text -}}
</div>

</div>
</div>
AlexBramhill marked this conversation as resolved.
Show resolved Hide resolved