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(footers): Adding EC logo to all the footers - FRONT-3224 #2222

Merged
merged 9 commits into from
Oct 11, 2021
Merged

feat(footers): Adding EC logo to all the footers - FRONT-3224 #2222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6434b6c
feat(footers): Adding EC logo to all the footer - front-3224
planctus Oct 4, 2021
51fef68
Merge branch 'v3-dev' of github.com:ec-europa/europa-component-librar…
planctus Oct 6, 2021
0f10fe2
feat(footers): Adding 24 svg, EC demoed in all the footers - front-3224
planctus Oct 7, 2021
9a1716b
feat(footers): Fixing selector in footer-core - front-3224
planctus Oct 7, 2021
f824041
feat(footers): Logo sizes for harmonised - front-3224
planctus Oct 7, 2021
95e44bf
Merge branch 'v3-dev' into front-3224-ec-logo-footer
planctus Oct 7, 2021
6d45762
feat(footers): Logo, adding control - front-3224
planctus Oct 11, 2021
63f42af
Merge branch 'front-3224-ec-logo-footer' of github.com:ec-europa/euro…
planctus Oct 11, 2021
8e672f1
Merge branch 'v3-dev' into front-3224-ec-logo-footer
planctus Oct 11, 2021
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
108 changes: 54 additions & 54 deletions src/implementations/twig/components/footer-core/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ npm install --save @ecl/twig-component-footer-core

- **"rows"** (array of objects) (default: [])
- "section_class_name" (optional) (string) (default: '')
- "logo" (EU only)
- "logo"
- "alt" (string) alt attribute for the logo link
- "path" (string) logo link path
- "language" (string) Language code
Expand All @@ -35,59 +35,59 @@ npm install --save @ecl/twig-component-footer-core

<!-- prettier-ignore -->
```twig
{% include '@ecl/footer-core/footer-core.html.twig' with {
sections: [
{
title: {
link: {
label: 'European Commission website',
path: '#',
},
},
description:
'This site is managed by the Directorate-General for Communication',
},
{
section_class_name: 'ecl-footer-core__section--separator',
links: [
{
link: {
label: 'Standalone link',
path: 'http://google.com',
},
},
...
],
list_class_name: 'ecl-footer-core__list--columns',
},
{% include '@ecl/footer-core/footer-core.html.twig' with {
sections: [
{
title: {
link: {
label: 'European Commission website',
path: '#',
},
},
description:
'This site is managed by the Directorate-General for Communication',
},
{
section_class_name: 'ecl-footer-core__section--separator',
links: [
{
link: {
label: 'Standalone link',
path: 'http://google.com',
},
},
...
],
list_class_name: 'ecl-footer-core__list--columns',
},
{
links: [
{
link: {
label: 'Follow the European Commission on social media',
path: '/example',
icon_position: 'after',
},
icon: {
path: '/path-to-the-icon-file',
name: 'external',
},
},
},
...
],
},
{
links: [
{
link: {
label: 'Language policy',
path: '/example',
},
},
...
],
},
],
links: [
{
link: {
label: 'Follow the European Commission on social media',
path: '/example',
icon_position: 'after',
},
icon: {
path: '/path-to-the-icon-file',
name: 'external',
},
},
},
...
],
},
{
links: [
{
link: {
label: 'Language policy',
path: '/example',
},
},
...
],
},
],
} %}
```
48 changes: 42 additions & 6 deletions src/implementations/twig/components/footer-core/__snapshots__/footer-core.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,18 @@ exports[`Footer Core EC default renders correctly 1`] = `
<div
class="ecl-footer-core__section"
>
<a
Copy link
Contributor

@papegaill papegaill Oct 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Strange focus state actually on the logo:

Screenshot 2021-10-08 at 14 33 40

already better by having display:block to the href

Screenshot 2021-10-08 at 14 34 03

I think it would be better to set the bottom margin on the parent href instead of the logo imgso the focus will be better around the logo only. as made on standardised?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

You're right, the element was inline and that's why the margin was applied to the image, now this behaves as the others.

aria-label="European Commission"
class="ecl-link ecl-link--standalone ecl-footer-core__logo-link"
href="/example"
>
<img
alt="European Commission logo"
class="ecl-footer-core__logo-image-desktop"
src="/logo-ec.svg"
title="European Commission"
/>
</a>
<h2
class="ecl-footer-core__title"
>
Expand Down Expand Up @@ -351,6 +363,18 @@ exports[`Footer Core EC default renders correctly with extra attributes 1`] = `
<div
class="ecl-footer-core__section"
>
<a
aria-label="European Commission"
class="ecl-link ecl-link--standalone ecl-footer-core__logo-link"
href="/example"
>
<img
alt="European Commission logo"
class="ecl-footer-core__logo-image-desktop"
src="/logo-ec.svg"
title="European Commission"
/>
</a>
<h2
class="ecl-footer-core__title"
>
Expand Down Expand Up @@ -683,6 +707,18 @@ exports[`Footer Core EC default renders correctly with extra class names 1`] = `
<div
class="ecl-footer-core__section"
>
<a
aria-label="European Commission"
class="ecl-link ecl-link--standalone ecl-footer-core__logo-link"
href="/example"
>
<img
alt="European Commission logo"
class="ecl-footer-core__logo-image-desktop"
src="/logo-ec.svg"
title="European Commission"
/>
</a>
<h2
class="ecl-footer-core__title"
>
Expand Down Expand Up @@ -1023,13 +1059,13 @@ exports[`Footer Core EU default renders correctly 1`] = `
<img
alt="European Union logo"
class="ecl-footer-core__logo-image-mobile"
src=""
src="/logo-mobile-eu.svg"
title="European Union"
/>
<img
alt="European Union logo"
class="ecl-footer-core__logo-image-desktop"
src=""
src="/logo-eu.svg"
title="European Union"
/>
</a>
Expand Down Expand Up @@ -1478,13 +1514,13 @@ exports[`Footer Core EU default renders correctly with extra attributes 1`] = `
<img
alt="European Union logo"
class="ecl-footer-core__logo-image-mobile"
src=""
src="/logo-mobile-eu.svg"
title="European Union"
/>
<img
alt="European Union logo"
class="ecl-footer-core__logo-image-desktop"
src=""
src="/logo-eu.svg"
title="European Union"
/>
</a>
Expand Down Expand Up @@ -1931,13 +1967,13 @@ exports[`Footer Core EU default renders correctly with extra class names 1`] = `
<img
alt="European Union logo"
class="ecl-footer-core__logo-image-mobile"
src=""
src="/logo-mobile-eu.svg"
title="European Union"
/>
<img
alt="European Union logo"
class="ecl-footer-core__logo-image-desktop"
src=""
src="/logo-eu.svg"
title="European Union"
/>
</a>
Expand Down
6 changes: 4 additions & 2 deletions src/implementations/twig/components/footer-core/footer-core.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
{#
Parameters:
- "rows" (array of objects) (default: [])
- "logo" (EU only)
- "logo"
- "alt" (string) alt attribute for the logo link
- "path" (string) logo link path
- "language" (string) Language code
- "src_mobile" (string) Path the mobile logo
- "src_mobile" (string) Path the mobile logo (only for EU)
- "src_desktop" (string) Path to the desktop logo
- "title" (optional) (string) OR (object with Link component in property)
- "title_with_separator" (optional) (bolean) (default: false)
Expand Down Expand Up @@ -67,6 +67,7 @@
{# logo (EU) #}
{% if _sections.logo is defined and _sections.logo is not empty %}
{% set _label %}
{% if _sections.logo.src_mobile is defined and _sections.logo.src_mobile is not empty %}
<img
{% if _sections.logo.alt is defined and _sections.logo.alt is not empty %}
alt="{{ _sections.logo.alt }}"
Expand All @@ -75,6 +76,7 @@
class="ecl-footer-core__logo-image-mobile"
src="{{ _sections.logo.src_mobile }}"
/>
{% endif %}
<img
{% if _sections.logo.alt is defined and _sections.logo.alt is not empty %}
alt="{{ _sections.logo.alt }}"
Expand Down
13 changes: 10 additions & 3 deletions src/implementations/twig/components/footer-core/footer-core.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import getSystem from '@ecl/builder/utils/getSystem';

import specsEc from '@ecl/specs-component-footer-core/demo/data--ec';
import specsEu from '@ecl/specs-component-footer-core/demo/data--eu';
import logoEc from '@ecl/resources-ec-logo/negative/logo-ec--en.svg';
import logoEuMobile from '@ecl/resources-eu-logo/condensed-version/positive/logo-eu--en.svg';
import logoEuDesktop from '@ecl/resources-eu-logo/standard-version/positive/logo-eu--en.svg';
import footer from './footer-core.html.twig';
Expand All @@ -15,10 +16,11 @@ const demoData = system === 'eu' ? specsEu : specsEc;

const prepareData = (data) => {
correctSvgPath(data);

if (data.rows[0][0][0].logo) {
if (system === 'eu') {
data.rows[0][0][0].logo.src_mobile = logoEuMobile;
data.rows[0][0][0].logo.src_desktop = logoEuDesktop;
} else {
data.rows[0][0][0].logo.src_desktop = logoEc;
}

return data;
Expand All @@ -27,7 +29,12 @@ const prepareData = (data) => {
export default {
papegaill marked this conversation as resolved.
Show resolved Hide resolved
title: 'Components/Footers/Core',
decorators: [withCode, withNotes],
parameters: { layout: 'fullscreen' },
parameters: {
layout: 'fullscreen',
controls: {
disable: true,
},
},
};

export const Default = () => footer(prepareData(demoData));
Expand Down
Loading