Skip to content

Commit

Permalink
feat(notification): Adding links, updating styles - FRONT-4630 (#3645)
Browse files Browse the repository at this point in the history 
* feat(notification): Updating EC - FRONT-4630

* feat(notification): Updating EU - FRONT-4630

* feat(notification): Updating the site header demo - FRONT-4630

* feat(notification): Print style for added links - FRONT-4630

* feat(notification): text color in EU - FRONT-4630

* feat(notification): Adding toggle for close button visibility in the site-header - FRONT-4630
  • Loading branch information
@planctus
planctus committed Sep 27, 2024
1 parent f6efedf commit 5ef50de
Show file tree
Hide file tree
Showing 18 changed files with 653 additions and 67 deletions.
2 changes: 2 additions & 0 deletions src/implementations/twig/components/notification/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ npm install --save @ecl/twig-component-notification
- **"icon"** (object of type "icon") (default: {})
- **"sr_icon"** (string) (default: ''): additional label for the icon; for screen readers
- **"title"** (string) (default: '')
- **"description"** (string) (default: '')
- **"links"** (array) (default: [])
- **"close"** (object of type "button") (default: {}): close button (optional)
- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
- **"extra_attributes"** (optional) (array) (default: []) Extra attributes
Expand Down
200 changes: 200 additions & 0 deletions src/implementations/twig/components/notification/__snapshots__/notification.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,26 @@ exports[`EC Notification Info renders correctly 1`] = `
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -192,6 +212,26 @@ exports[`EC Notification Info renders correctly with extra attributes 1`] = `
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -257,6 +297,26 @@ exports[`EC Notification Info renders correctly with extra class names 1`] = `
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -317,6 +377,26 @@ exports[`EC Notification Info renders correctly without description 1`] = `
>
Information notification
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -377,6 +457,26 @@ exports[`EC Notification Info renders correctly without title 1`] = `
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -640,6 +740,26 @@ exports[`EU Notification Info renders correctly 1`] = `
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -707,6 +827,26 @@ exports[`EU Notification Info renders correctly with extra attributes 1`] = `
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -772,6 +912,26 @@ exports[`EU Notification Info renders correctly with extra class names 1`] = `
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -832,6 +992,26 @@ exports[`EU Notification Info renders correctly without description 1`] = `
>
Information notification
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down Expand Up @@ -892,6 +1072,26 @@ exports[`EU Notification Info renders correctly without title 1`] = `
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Lorem ipsum
</a>
</div>
<div
class="ecl-notification__link"
>
<a
class="ecl-link"
href="/example"
>
Nullam accumsan semper lorem
</a>
</div>
</div>
</div>
</jest>
Expand Down
43 changes: 26 additions & 17 deletions src/implementations/twig/components/notification/notification.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
- "icon" (object of type "icon") (default: {})
- "sr_icon" (string) (default: ''): additional label for the icon; for screen readers
- "title" (string) (default: '')
- "description" (string) (default: '')
- "links" (array): An array of ECL links objects
- "close" (object of type "button") (default: {}): close button (optional)
- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the select
- "extra_attributes" (optional) (array) (default: []) Extra attributes for select
Expand All @@ -23,6 +25,7 @@
{% set _sr_icon = sr_icon|default('') %}
{% set _title = title|default('') %}
{% set _close = close|default({}) %}
{% set _links = links|default([]) %}
{% set _description = description|default('') %}
{% set _css_class = 'ecl-notification' %}
{% set _extra_attributes = 'data-ecl-auto-init="Notification"' %}
Expand Down Expand Up @@ -67,23 +70,29 @@
extra_classes: 'ecl-notification__icon',
} only %}
<div class="ecl-notification__content">
{% if _close is not empty %}
{% include '@ecl/button/button.html.twig' with _close|merge({
type: 'button',
variant: 'tertiary',
extra_classes: 'ecl-notification__close',
extra_attributes: [{
name: 'data-ecl-notification-close',
}],
}) only %}
{% endif %}

{% if _title is not empty %}
<div class="ecl-notification__title">{{ _title }}</div>
{% endif %}
{% if _description is not empty %}
<div class="ecl-notification__description">{{ _description }}</div>
{% endif %}
{% if _close is not empty %}
{% include '@ecl/button/button.html.twig' with _close|merge({
type: 'button',
variant: 'tertiary',
extra_classes: 'ecl-notification__close',
extra_attributes: [{
name: 'data-ecl-notification-close',
}],
}) only %}
{% endif %}
{% if _title is not empty %}
<div class="ecl-notification__title">{{ _title }}</div>
{% endif %}
{% if _description is not empty %}
<div class="ecl-notification__description">{{ _description }}</div>
{% endif %}
{% if _links is not empty and _links is iterable %}
{% for _link in _links %}
<div class="ecl-notification__link">
{% include '@ecl/link/link.html.twig' with _link only %}
</div>
{% endfor %}
{% endif %}
</div>
</div>

Expand Down
16 changes: 16 additions & 0 deletions src/implementations/twig/components/notification/notification.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@ const dataInfo = system === 'eu' ? dataInfoEu : dataInfoEc;
const dataSuccess = system === 'eu' ? dataSuccessEu : dataSuccessEc;
const dataError = system === 'eu' ? dataErrorEu : dataErrorEc;
const dataWarning = system === 'eu' ? dataWarningEu : dataWarningEc;
const dataLinks = [...dataInfo.links];

const getArgs = (data) => ({
show_close: true,
show_title: true,
title: data.title,
show_links: true,
description: data.description,
});

Expand All @@ -46,6 +48,14 @@ const getArgTypes = () => ({
category: 'Optional',
},
},
show_links: {
name: 'links',
type: { name: 'boolean' },
description: 'Show the notification links',
table: {
category: 'Optional',
},
},
title: {
name: 'title',
type: { name: 'string' },
Expand Down Expand Up @@ -80,6 +90,12 @@ const prepareData = (data, args) => {
delete clone.close;
}

if (args.show_links) {
clone.links = dataLinks;
} else {
clone.links = [];
}

// Other controls
if (clone.title) {
clone.title = args.title;
Expand Down
Loading

1 comment on commit 5ef50de

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.