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.

Sign up for GitHub

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

Jump to bottom

feat(banner): Description as a link, some fixes - FRONT-4353 #3522

Merged
merged 5 commits into from
Jul 30, 2024
Merged

feat(banner): Description as a link, some fixes - FRONT-4353 #3522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
be1edbc
feat(banner): Description as a link, some fixes - FRONT-4353
planctus Jul 25, 2024
c6686de
feat(banner): removing unused arg - FRONT-4353
planctus Jul 25, 2024
5fe2b89
Merge branch 'v4-dev' into FRONT-4353-Banner-description-link
planctus Jul 25, 2024
ccfc58b
feat(banner): Aligning markup with the demo in the website pages - FR…
planctus Jul 25, 2024
e324a6a
Merge branch 'FRONT-4353-Banner-description-link' of github.com:ec-eu…
planctus Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/implementations/twig/components/banner/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ npm install --save @ecl/twig-component-banner
- **"sr_play"** (string) (default: '') screen reader label for the play button
- **"sr_pause"** (string) (default: '') screen reader label for the pause button
- **"credit"** (string) (default: '') Credit for the image
- **"description"** (string) (default: '') Description of banner
- **"description"** (string or Link) (default: '') Description of the banner
- **"horizontal"** (string) (default: 'left') Horizontal box alignment (can be 'left', 'center', 'right')
- **"vertical"** (string) (default: 'center') Vertical box alignment (can be 'top', 'center', 'bottom')
- **"full_width"** (bools) (default: false) Extends the banner to whole viewport when used inside the grid
Expand Down
260 changes: 252 additions & 8 deletions src/implementations/twig/components/banner/__snapshots__/banner.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ exports[`Banner Image renders correctly 1`] = `
class="ecl-banner__title-text"
>
<a
class="ecl-link ecl-banner__title-link"
class="ecl-link ecl-banner__title-link"
href="/example"
>
Lorem ipsum dolor sit amet consectetuer adipiscin
Expand All @@ -58,7 +58,12 @@ exports[`Banner Image renders correctly 1`] = `
<span
class="ecl-banner__description-text"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
<a
class="ecl-link ecl-banner__description-link"
href="/example"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</a>
</span>
</p>
<div
Expand Down Expand Up @@ -138,7 +143,7 @@ exports[`Banner Image renders correctly with extra attributes 1`] = `
class="ecl-banner__title-text"
>
<a
class="ecl-link ecl-banner__title-link"
class="ecl-link ecl-banner__title-link"
href="/example"
>
Lorem ipsum dolor sit amet consectetuer adipiscin
Expand All @@ -151,7 +156,12 @@ exports[`Banner Image renders correctly with extra attributes 1`] = `
<span
class="ecl-banner__description-text"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
<a
class="ecl-link ecl-banner__description-link"
href="/example"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</a>
</span>
</p>
<div
Expand Down Expand Up @@ -229,7 +239,103 @@ exports[`Banner Image renders correctly with extra class names 1`] = `
class="ecl-banner__title-text"
>
<a
class="ecl-link ecl-banner__title-link"
class="ecl-link ecl-banner__title-link"
href="/example"
>
Lorem ipsum dolor sit amet consectetuer adipiscin
</a>
</span>
</div>
<p
class="ecl-banner__description"
>
<span
class="ecl-banner__description-text"
>
<a
class="ecl-link ecl-banner__description-link"
href="/example"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</a>
</span>
</p>
<div
class="ecl-banner__cta"
>
<a
class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"
href="/example"
>
<span
class="ecl-link__label"
>
CTA link
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
</jest>
`;

exports[`Banner Image renders correctly with extra classes for the description link 1`] = `
<jest>
<section
class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-light ecl-banner--color-dark ecl-banner--h-left ecl-banner--v-center"
data-ecl-auto-init="Banner"
data-ecl-banner=""
>
<figure
class="ecl-banner__picture-container"
>
<picture
class="ecl-picture ecl-banner__picture"
data-ecl-banner-image=""
>
<img
alt="alternative text"
class="ecl-banner__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
/>
</picture>
<footer
class="ecl-banner__credit"
>
<small>
© Copyright
</small>
</footer>
</figure>
<div
class="ecl-container"
>
<div
class="ecl-banner__container"
data-ecl-banner-container=""
>
<div
class="ecl-banner__content"
>
<div
class="ecl-banner__title"
>
<span
class="ecl-banner__title-text"
>
<a
class="ecl-link ecl-banner__title-link"
href="/example"
>
Lorem ipsum dolor sit amet consectetuer adipiscin
Expand All @@ -242,7 +348,12 @@ exports[`Banner Image renders correctly with extra class names 1`] = `
<span
class="ecl-banner__description-text"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
<a
class="ecl-link custom-description-link-class ecl-banner__description-link"
href="/example"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</a>
</span>
</p>
<div
Expand Down Expand Up @@ -275,6 +386,134 @@ exports[`Banner Image renders correctly with extra class names 1`] = `
</jest>
`;

exports[`Banner Image renders correctly with extra classes for the title link 1`] = `
<jest>
<section
class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-light ecl-banner--color-dark ecl-banner--h-left ecl-banner--v-center"
data-ecl-auto-init="Banner"
data-ecl-banner=""
>
<figure
class="ecl-banner__picture-container"
>
<picture
class="ecl-picture ecl-banner__picture"
data-ecl-banner-image=""
>
<img
alt="alternative text"
class="ecl-banner__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
/>
</picture>
<footer
class="ecl-banner__credit"
>
<small>
© Copyright
</small>
</footer>
</figure>
<div
class="ecl-container"
>
<div
class="ecl-banner__container"
data-ecl-banner-container=""
>
<div
class="ecl-banner__content"
>
<div
class="ecl-banner__title"
>
<span
class="ecl-banner__title-text"
>
<a
class="ecl-link custom-title-link-class ecl-banner__title-link"
href="/example"
>
Lorem ipsum dolor sit amet consectetuer adipiscin
</a>
</span>
</div>
<p
class="ecl-banner__description"
>
<span
class="ecl-banner__description-text"
>
<a
class="ecl-link ecl-banner__description-link"
href="/example"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</a>
</span>
</p>
<div
class="ecl-banner__cta"
>
<a
class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"
href="/example"
>
<span
class="ecl-link__label"
>
CTA link
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
</jest>
`;

exports[`Banner Image renders correctly without title, description and link 1`] = `
<jest>
<section
class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-light ecl-banner--color-dark ecl-banner--h-left ecl-banner--v-center"
data-ecl-auto-init="Banner"
data-ecl-banner=""
>
<figure
class="ecl-banner__picture-container"
>
<picture
class="ecl-picture ecl-banner__picture"
data-ecl-banner-image=""
>
<img
alt="alternative text"
class="ecl-banner__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
/>
</picture>
<footer
class="ecl-banner__credit"
>
<small>
© Copyright
</small>
</footer>
</figure>
</section>
</jest>
`;

exports[`Banner Video renders correctly 1`] = `
<jest>
<section
Expand Down Expand Up @@ -391,7 +630,7 @@ exports[`Banner Video renders correctly 1`] = `
class="ecl-banner__title-text"
>
<a
class="ecl-link ecl-banner__title-link"
class="ecl-link ecl-banner__title-link"
href="/example"
>
Lorem ipsum dolor sit amet consectetuer adipiscin
Expand All @@ -404,7 +643,12 @@ exports[`Banner Video renders correctly 1`] = `
<span
class="ecl-banner__description-text"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
<a
class="ecl-link ecl-banner__description-link"
href="/example"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</a>
</span>
</p>
<div
Expand Down
20 changes: 15 additions & 5 deletions src/implementations/twig/components/banner/banner.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
- "sr_play" (string) (default: '') screen reader label for the play button
- "sr_pause" (string) (default: '') screen reader label for the pause button
- "credit" (string) (default: '') Credit for the image
- "description" (string) (default: '') Description of banner
- "description" (string or Link) (default: '') Description of banner
- "horizontal" (string) (default: 'left') Horizontal box alignment (can be 'left', 'center', 'right')
- "vertical" (string) (default: 'center') Vertical box alignment (can be 'top', 'center', 'bottom')
- "full_width": (bool) (default: false) Full width banner (inside the grid)
Expand Down Expand Up @@ -204,19 +204,20 @@
{% endif %}

{# Content box #}
{% if _title is not empty or _description is not empty or _link is not empty %}
<div class="ecl-container">
<div
class="ecl-banner__container"
data-ecl-banner-container
>
{% if _title is not empty or _description is not empty or _link is not empty %}
<div class="ecl-banner__content">
{% if _title is not empty %}
<div class="ecl-banner__title">
<span class="ecl-banner__title-text">
{%- if _title.link is defined -%}
{% set _title_extra_classes = (_title.extra_classes is not empty ? _title.extra_classes ~ ' ' : '') ~ 'ecl-banner__title-link' %}
{% include '@ecl/link/link.html.twig' with _title|merge({
extra_classes: _title.extra_classes|default('') ~ ' ecl-banner__title-link'
extra_classes: _title_extra_classes,
}) only %}
{%- else -%}
{{- _title -}}
Expand All @@ -226,7 +227,16 @@
{% endif %}
{% if _description is not empty %}
<p class="ecl-banner__description">
<span class="ecl-banner__description-text">{{ _description }}</span>
<span class="ecl-banner__description-text">
{%- if _description.link is defined -%}
{% set _description_extra_classes = (_description.extra_classes is not empty ? _description.extra_classes ~ ' ' : '') ~ 'ecl-banner__description-link' %}
{% include '@ecl/link/link.html.twig' with _description|merge({
extra_classes: _description_extra_classes,
}) only %}
{%- else -%}
{{- _description -}}
{%- endif -%}
</span>
</p>
{% endif %}
{% if _link is not empty %}
Expand All @@ -244,9 +254,9 @@
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</section>

{% endapply %}
Loading
Loading