Skip to content
Snippets Groups Projects
Commit 25de5b7e authored by Stephen Mustgrave's avatar Stephen Mustgrave
Browse files

Issue #3271534: 508 - Cards: Links around images + text causes SR issues

parent 2abb10e1
No related branches found
No related tags found
1 merge request!52Issue #3271534: 508 - Cards: Links around images + text causes SR issues
Hide whitespace changes
Inline Side-by-side
components/cards/paragraph--uswds-card-group-flag.html.twig
+ 37
− 33
View file @ 25de5b7e
......@@ -39,14 +39,12 @@
{# The template default set classes. #}
{# Sets Paragraph ID as class. #}
{%
set classes = [
{% set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
'paragraph--id--' ~ paragraph.id.value,
]
%}
] %}
{{ attach_library('uswds_paragraph_components/uswds-cards') }}
......@@ -100,41 +98,47 @@
{% set card_attributes = create_attribute() %}
<li{{ card_attributes.addClass(breakpoints).addClass('usa-card').addClass('usa-card--flag').addClass(image_position) }}>
{% if card_link %}
{% set title = item['#paragraph'].field_button.title %}
<a href="{{ item['#paragraph'].field_button.0.url }}" class="text-no-underline card-link" title="{{ title }}">
{% endif %}
<div class="usa-card__container">
{% if item['#paragraph'].field_card_title.value %}
<header class="usa-card__header">
<h2 class="usa-card__heading">{{ item['#paragraph'].field_card_title.value }}</h2>
</header>
<div class="usa-card__container">
<div class="usa-card__media">
{% if item['#paragraph'].field_card_image.entity.field_media_image %}
<div class="usa-card__img">
{{ item['#paragraph'].field_card_image|view }}
</div>
{% endif %}
</div>
<div class="usa-card__media">
{% if item['#paragraph'].field_card_image.entity.field_media_image %}
<div class="usa-card__img">
{{ item['#paragraph'].field_card_image|view }}
</div>
{% endif %}
{% if item['#paragraph'].field_text.value %}
<div class="usa-card__body">
{{ item['#paragraph'].field_text.value|raw }}
</div>
{% endif %}
{% if item['#paragraph'].field_text.value %}
<div class="usa-card__body">
{{ item['#paragraph'].field_text.value|raw }}
</div>
{% endif %}
{% if item['#paragraph'].field_button.uri and not card_link %}
{% set title = item['#paragraph'].field_button.title %}
<div class="usa-card__footer">
<a href="{{ item['#paragraph'].field_button.url }}" title="{{ title }}">
<button class="usa-button">{{ item['#paragraph'].field_button.title }}</button>
</a>
</div>
{% endif %}
{% if item['#paragraph'].field_button.uri and not card_link %}
{% set title = item['#paragraph'].field_button.title %}
<div class="usa-card__footer">
<a href="{{ item['#paragraph'].field_button.url }}" title="{{ title }}">
<button class="usa-button">{{ item['#paragraph'].field_button.title }}</button>
{% if item['#paragraph'].field_card_title.value %}
<header class="usa-card__header">
<h2 class="usa-card__heading">
{% if card_link %}
{% set title = item['#paragraph'].field_button.title %}
<a href="{{ item['#paragraph'].field_button.0.url }}"
class="text-no-underline card-link" title="{{ title }}">
{% endif %}
{{ item['#paragraph'].field_card_title.value }}
{% if card_link %}
</a>
</div>
{% endif %}
</div>
{% if card_link %} </a> {% endif%}
{% endif %}
</h2>
</header>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
......
components/cards/paragraph--uswds-card-group-regular.html.twig
+ 35
− 32
View file @ 25de5b7e
......@@ -87,44 +87,47 @@
{% set card_attributes = create_attribute() %}
<li{{ card_attributes.addClass(breakpoints).addClass(default).addClass('usa-card').addClass(header_first) }}>
{% if card_link %}
{% set title = item['#paragraph'].field_button.title %}
<a href="{{ item['#paragraph'].field_button.0.url }}" class="text-no-underline card-link" title="{{ title }}">
{% endif %}
<div class="usa-card__container">
{% if item['#paragraph'].field_card_title.value %}
<header class="usa-card__header">
<h2 class="usa-card__heading">{{ item['#paragraph'].field_card_title.value }}</h2>
</header>
<div class="usa-card__container">
<div class="usa-card__media">
{% if item['#paragraph'].field_card_image.entity.field_media_image %}
{% set indent_media = item['#paragraph'].field_indent_media.value ? ' usa-card__media--inset' %}
{% set extend_media = item['#paragraph'].field_extend_media.value ? ' usa-card__media--exdent' %}
<div class="usa-card__img{{ indent_media }}{{ extend_media }}">
{{ item['#paragraph'].field_card_image|view }}
</div>
{% endif %}
</div>
<div class="usa-card__media">
{% if item['#paragraph'].field_card_image.entity.field_media_image %}
{% set indent_media = item['#paragraph'].field_indent_media.value ? ' usa-card__media--inset' %}
{% set extend_media = item['#paragraph'].field_extend_media.value ? ' usa-card__media--exdent' %}
<div class="usa-card__img{{ indent_media }}{{ extend_media }}">
{{ item['#paragraph'].field_card_image|view }}
</div>
{% endif %}
{% if item['#paragraph'].field_text.value %}
<div class="usa-card__body">
{{ item['#paragraph'].field_text.value|raw }}
</div>
{% endif %}
{% if item['#paragraph'].field_text.value %}
<div class="usa-card__body">
{{ item['#paragraph'].field_text.value|raw }}
</div>
{% endif %}
{% if item['#paragraph'].field_button.uri and not card_link %}
{% set title = item['#paragraph'].field_button.title %}
<div class="usa-card__footer">
<a href="{{ item['#paragraph'].field_button.url }}" title="{{ title }}">
{% set button_text = item['#paragraph'].field_button.title ?: 'Link Text' %}
<button class="usa-button">{{ button_text }}</button>
</a>
</div>
{% endif %}
{% if item['#paragraph'].field_button.uri and not card_link %}
{% if item['#paragraph'].field_card_title.value %}
<header class="usa-card__header">
{% if card_link %}
{% set title = item['#paragraph'].field_button.title %}
<div class="usa-card__footer">
<a href="{{ item['#paragraph'].field_button.url }}" title="{{ title }}">
{% set button_text = item['#paragraph'].field_button.title ?: 'Link Text' %}
<button class="usa-button">{{ button_text }}</button>
</a>
</div>
{% endif %}
</div>
{% if card_link %} </a> {% endif %}
<a href="{{ item['#paragraph'].field_button.0.url }}" class="text-no-underline card-link"
title="{{ title }}">
{% endif %}
<h2 class="usa-card__heading">{{ item['#paragraph'].field_card_title.value }}</h2>
{% if card_link %}
</a>
{% endif %}
</header>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
......
components/cards/uswds-paragraph-components-cards.css
+ 40
− 0
View file @ 25de5b7e
......@@ -20,3 +20,43 @@
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__img div {
display: inline;
}
.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__img img,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__img img {
aspect-ratio: 1/1;
}
.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__header,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__header {
order: 0;
}
.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__header .card-link,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__header .card-link {
text-decoration: none;
}
.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__header .card-link:focus,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__header .card-link:focus {
outline: none;
}
.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__header .card-link:after,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__header .card-link:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
}
.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__body,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__body {
order: 1;
}
.paragraph--type--uswds-card-group-regular .usa-card__container .usa-card__footer,
.paragraph--type--uswds-card-group-flag .usa-card__container .usa-card__footer {
order: 2;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment