diff --git a/src/implementations/twig/components/footer-core/README.md b/src/implementations/twig/components/footer-core/README.md index d85e837da3c..decb8c23d7e 100644 --- a/src/implementations/twig/components/footer-core/README.md +++ b/src/implementations/twig/components/footer-core/README.md @@ -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 @@ -35,59 +35,59 @@ npm install --save @ecl/twig-component-footer-core ```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', + }, + }, + ... + ], + }, + ], } %} ``` diff --git a/src/implementations/twig/components/footer-core/__snapshots__/footer-core.test.js.snap b/src/implementations/twig/components/footer-core/__snapshots__/footer-core.test.js.snap index 8e3064ff9c1..a794e2d8afa 100644 --- a/src/implementations/twig/components/footer-core/__snapshots__/footer-core.test.js.snap +++ b/src/implementations/twig/components/footer-core/__snapshots__/footer-core.test.js.snap @@ -17,6 +17,18 @@ exports[`Footer Core EC default renders correctly 1`] = `
+ + European Commission logo +

@@ -351,6 +363,18 @@ exports[`Footer Core EC default renders correctly with extra attributes 1`] = `
+ + European Commission logo +

@@ -683,6 +707,18 @@ exports[`Footer Core EC default renders correctly with extra class names 1`] = `
+ + European Commission logo +

@@ -1023,13 +1059,13 @@ exports[`Footer Core EU default renders correctly 1`] = ` European Union logo European Union logo @@ -1478,13 +1514,13 @@ exports[`Footer Core EU default renders correctly with extra attributes 1`] = ` European Union logo European Union logo @@ -1931,13 +1967,13 @@ exports[`Footer Core EU default renders correctly with extra class names 1`] = ` European Union logo European Union logo diff --git a/src/implementations/twig/components/footer-core/footer-core.html.twig b/src/implementations/twig/components/footer-core/footer-core.html.twig index 9bef2fe9aa2..79dc70a0cc1 100644 --- a/src/implementations/twig/components/footer-core/footer-core.html.twig +++ b/src/implementations/twig/components/footer-core/footer-core.html.twig @@ -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) @@ -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 %} {{ _sections.logo.alt }} + {% endif %} {{ _sections.logo.alt }} { 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; @@ -27,7 +29,12 @@ const prepareData = (data) => { export default { title: 'Components/Footers/Core', decorators: [withCode, withNotes], - parameters: { layout: 'fullscreen' }, + parameters: { + layout: 'fullscreen', + controls: { + disable: true, + }, + }, }; export const Default = () => footer(prepareData(demoData)); diff --git a/src/implementations/twig/components/footer-harmonised/README.md b/src/implementations/twig/components/footer-harmonised/README.md index 9a1fac8d56f..91c32eea0e7 100644 --- a/src/implementations/twig/components/footer-harmonised/README.md +++ b/src/implementations/twig/components/footer-harmonised/README.md @@ -24,7 +24,7 @@ npm install --save @ecl/twig-component-footer-harmonised "title": (string) (default: '') Title attribute "alt": (string) (default: '') Alternative text "src": (string) (default: '') Url of the image - - "logo" (EU only) + - "logo" - "alt" (string) alt attribute for the logo link - "path" (string) logo link path - "language" (string) Language code @@ -39,71 +39,71 @@ npm install --save @ecl/twig-component-footer-harmonised ```twig -{% include '@ecl/footer-harmonised/footer-harmonised.html.twig' with { - group: 'group1', - sections: [ - { - type: 'site_name', +{% include '@ecl/footer-harmonised/footer-harmonised.html.twig' with { + group: 'group1', + sections: [ + { + type: 'site_name', section_id: 1, - title: { - link: { - label: "Site name", - path: "/example" - } - }, - description: - 'This site is managed by the Directorate-General for "DG identification"', - }, - { - section_id: 2, - title: 'Contact us', - title_class_name: 'ecl-footer-harmonised__title--separator', - links: [ - { - link: { - label: 'Contact information of the DG', - path: '/example', - }, - }, - ], - }, - { - section_id: 2, - title: 'Follow us on', - title_class_name: 'ecl-footer-harmonised__title--separator', - links: [ - { - link: { - label: 'Facebook', - path: '/example', - icon_position: 'before', - icon: { - path: '/path-to-the-icon-file', - name: 'facebook', - size: 'xs', - }, - }, - ... - }, - ], - list_class_name: 'ecl-footer-harmonised__list--inline', - }, - { + title: { + link: { + label: "Site name", + path: "/example" + } + }, + description: + 'This site is managed by the Directorate-General for "DG identification"', + }, + { + section_id: 2, + title: 'Contact us', + title_class_name: 'ecl-footer-harmonised__title--separator', + links: [ + { + link: { + label: 'Contact information of the DG', + path: '/example', + }, + }, + ], + }, + { + section_id: 2, + title: 'Follow us on', + title_class_name: 'ecl-footer-harmonised__title--separator', + links: [ + { + link: { + label: 'Facebook', + path: '/example', + icon_position: 'before', + icon: { + path: '/path-to-the-icon-file', + name: 'facebook', + size: 'xs', + }, + }, + ... + }, + ], + list_class_name: 'ecl-footer-harmonised__list--inline', + }, + { section_id: 3, - content_before: 'More information on:', - links: [ - { - link: { - label: 'Related link 1', - path: '/example', - }, - ... - }, - ], - list_class_name: 'ecl-footer-harmonised__list--condensed', - }, - ... - ] - } + content_before: 'More information on:', + links: [ + { + link: { + label: 'Related link 1', + path: '/example', + }, + ... + }, + ], + list_class_name: 'ecl-footer-harmonised__list--condensed', + }, + ... + ] + } %} ``` diff --git a/src/implementations/twig/components/footer-harmonised/__snapshots__/footer-harmonised.test.js.snap b/src/implementations/twig/components/footer-harmonised/__snapshots__/footer-harmonised.test.js.snap index 6f986353e86..156d2f90449 100644 --- a/src/implementations/twig/components/footer-harmonised/__snapshots__/footer-harmonised.test.js.snap +++ b/src/implementations/twig/components/footer-harmonised/__snapshots__/footer-harmonised.test.js.snap @@ -300,6 +300,18 @@ exports[`Footer Harmonised Group 1 renders correctly 1`] = `
+ + European Commission logo +

@@ -720,6 +732,18 @@ exports[`Footer Harmonised Group 1 renders correctly with extra attributes 1`] =
+ + European Commission logo +

@@ -1138,6 +1162,18 @@ exports[`Footer Harmonised Group 1 renders correctly with extra class names 1`]
+ + European Commission logo +

@@ -1273,6 +1309,18 @@ exports[`Footer Harmonised Group 2 renders correctly 1`] = `
+ + European Commission logo +

@@ -1411,6 +1459,18 @@ exports[`Footer Harmonised Group 2 renders correctly with extra attributes 1`] =
+ + European Commission logo +

@@ -1547,6 +1607,18 @@ exports[`Footer Harmonised Group 2 renders correctly with extra class names 1`]
+ + European Commission logo +

diff --git a/src/implementations/twig/components/footer-harmonised/ec-footer-harmonised.story.js b/src/implementations/twig/components/footer-harmonised/ec-footer-harmonised.story.js index 81d3b648a30..0524e75e9d2 100644 --- a/src/implementations/twig/components/footer-harmonised/ec-footer-harmonised.story.js +++ b/src/implementations/twig/components/footer-harmonised/ec-footer-harmonised.story.js @@ -2,7 +2,8 @@ import { withNotes } from '@ecl/storybook-addon-notes'; import withCode from '@ecl/storybook-addon-code'; import { correctSvgPath } from '@ecl/story-utils'; -import logoEC from '@ecl/resources-ec-logo/logo-ec--en.svg'; +import logoEcG1 from '@ecl/resources-ec-logo/negative/logo-ec--en.svg'; +import logoEc from '@ecl/resources-ec-logo/logo-ec--en.svg'; import dataGroup1 from '@ecl/specs-component-footer-harmonised/demo/data--group1'; import dataGroup2 from '@ecl/specs-component-footer-harmonised/demo/data--group2'; import dataGroup3 from '@ecl/specs-component-footer-harmonised/demo/data--group3'; @@ -10,52 +11,68 @@ import dataGroup3 from '@ecl/specs-component-footer-harmonised/demo/data--group3 import footer from './footer-harmonised.html.twig'; import notes from './README.md'; -const getArgs = () => { - return { - hide_contact: true, - hide_relate_site: true, - hide_about: true, - hide_follow: true, - }; -}; - -const getArgTypes = () => { - const argTypes = {}; - argTypes.hide_contact = { - name: 'contact us', - type: { name: 'boolean' }, - description: 'Show "Contact us" section', - table: { - category: 'Optional sections', - }, - }; - - argTypes.hide_about = { - name: 'about us', - type: { name: 'boolean' }, - description: 'Show "About us" section', - table: { - category: 'Optional sections', - }, +const getArgs = (group) => { + const args = { + hide_logo: true, }; + if (group === 'g1') { + args.hide_contact = true; + args.hide_relate_site = true; + args.hide_about = true; + args.hide_follow = true; + } - argTypes.hide_follow = { - name: 'follow us', - type: { name: 'boolean' }, - description: 'Show "Follow us" section', - table: { - category: 'Optional sections', - }, - }; + return args; +}; - argTypes.hide_relate_site = { - name: 'related sites', - type: { name: 'boolean' }, - description: 'Show "Related sites" section', - table: { - category: 'Optional sections', +const getArgTypes = (group) => { + const argTypes = { + hide_logo: { + name: 'logo', + type: { name: 'boolean' }, + description: 'Show logo', + table: { + category: 'Optional sections', + }, }, }; + if (group === 'g1') { + argTypes.hide_contact = { + name: 'contact us', + type: { name: 'boolean' }, + description: 'Show "Contact us" section', + table: { + category: 'Optional sections', + }, + }; + + argTypes.hide_about = { + name: 'about us', + type: { name: 'boolean' }, + description: 'Show "About us" section', + table: { + category: 'Optional sections', + }, + }; + + argTypes.hide_follow = { + name: 'follow us', + type: { name: 'boolean' }, + description: 'Show "Follow us" section', + table: { + category: 'Optional sections', + }, + }; + + argTypes.hide_relate_site = { + name: 'related sites', + type: { name: 'boolean' }, + description: 'Show "Related sites" section', + table: { + category: 'Optional sections', + }, + }; + } return argTypes; }; @@ -64,6 +81,11 @@ const prepareDataG1 = (data, args) => { correctSvgPath(data); const res = JSON.parse(JSON.stringify(data)); + if (args.hide_logo) { + res.rows[2][0][0].logo.src_desktop = logoEcG1; + } else { + delete res.rows[2][0][0].logo; + } if (!args.hide_contact) { res.rows[0][1].splice(0, 1); } @@ -88,17 +110,39 @@ const prepareDataG1 = (data, args) => { return res; }; -const prepareDataG3 = (data) => { - data.rows[0][0][1].logos[2].logo.src = logoEC; +const prepareDataG3 = (data, args) => { + const res = JSON.parse(JSON.stringify(data)); + if (args.hide_logo) { + res.rows[0][0][1].logos[2].logo.src = logoEc; + } else { + delete res.rows[0][0][1].logos[2].logo; + } + + return res; +}; + +const prepareDataG2 = (data, args) => { + const res = JSON.parse(JSON.stringify(data)); + if (args.hide_logo) { + res.rows[0][0][0].logo.src_desktop = logoEc; + } else { + delete res.rows[0][0][0].logo; + } - return data; + return res; +}; + +export default { + title: 'Components/Footers/Harmonised', + decorators: [withCode, withNotes], + parameters: { layout: 'fullscreen' }, }; export const Group1 = (args) => footer(prepareDataG1(dataGroup1, args)); Group1.storyName = 'group 1'; -Group1.argTypes = getArgTypes(); -Group1.args = getArgs(); +Group1.argTypes = getArgTypes('g1'); +Group1.args = getArgs('g1'); Group1.parameters = { notes: { markdown: notes, @@ -106,30 +150,26 @@ Group1.parameters = { }, }; -export const Group2 = () => footer(dataGroup2); +export const Group2 = (args) => footer(prepareDataG2(dataGroup2, args)); Group2.storyName = 'group 2'; +Group2.argTypes = getArgTypes('g2'); +Group2.args = getArgs('g2'); Group2.parameters = { notes: { markdown: notes, json: { dataGroup2 }, }, - controls: { disable: true }, }; -export const Group3 = () => footer(prepareDataG3(dataGroup3)); +export const Group3 = (args) => footer(prepareDataG3(dataGroup3, args)); Group3.storyName = 'group 3'; +Group3.argTypes = getArgTypes('g3'); +Group3.args = getArgs('g3'); Group3.parameters = { notes: { markdown: notes, json: { dataGroup3 }, }, - controls: { disable: true }, -}; - -export default { - title: 'Components/Footers/Harmonised', - decorators: [withCode, withNotes], - parameters: { layout: 'fullscreen' }, }; diff --git a/src/implementations/twig/components/footer-harmonised/eu-footer-harmonised.story.js b/src/implementations/twig/components/footer-harmonised/eu-footer-harmonised.story.js index d0d4d95214d..bb934a9d687 100644 --- a/src/implementations/twig/components/footer-harmonised/eu-footer-harmonised.story.js +++ b/src/implementations/twig/components/footer-harmonised/eu-footer-harmonised.story.js @@ -14,11 +14,20 @@ const getArgs = () => { hide_contact: true, hide_follow: true, hide_relate_site: true, + hide_logo: true, }; }; const getArgTypes = () => { return { + hide_logo: { + name: 'logo', + type: { name: 'boolean' }, + description: 'Show logo', + table: { + category: 'Optional sections', + }, + }, hide_contact: { name: 'contact site name', type: { name: 'boolean' }, @@ -49,12 +58,13 @@ const getArgTypes = () => { const prepareDataG1 = (data, args) => { correctSvgPath(data); - if (data.rows[1][0][0].logo) { - data.rows[1][0][0].logo.src_mobile = logoEuMobile; - data.rows[1][0][0].logo.src_desktop = logoEuDesktop; - } - const res = JSON.parse(JSON.stringify(data)); + if (args.hide_logo) { + res.rows[1][0][0].logo.src_mobile = logoEuMobile; + res.rows[1][0][0].logo.src_desktop = logoEuDesktop; + } else { + delete res.rows[1][0][0].logo; + } if (!args.hide_contact) { res.rows[0][1].splice(0, 1); } diff --git a/src/implementations/twig/components/footer-harmonised/footer-harmonised.html.twig b/src/implementations/twig/components/footer-harmonised/footer-harmonised.html.twig index 45dca10c2a3..45425a9b299 100644 --- a/src/implementations/twig/components/footer-harmonised/footer-harmonised.html.twig +++ b/src/implementations/twig/components/footer-harmonised/footer-harmonised.html.twig @@ -1,11 +1,11 @@ {% spaceless %} -{# +{# Parameters: - "group" (string) (default: 'group1'): 'group1', 'group2' or 'group3' - "rows" (array of objects) (default: []) - "section_class_name" (string) (default: '') - - "logo" (EU only) + - "logo" - "alt" (string) alt attribute for the logo link - "path" (string) logo link path - "language" (string) Language code @@ -72,9 +72,10 @@ {% set _section_class_name = _section_class_name ~ ' ' ~ _sections.section_class_name %} {% endif %}
- {# logo (EU) #} + {# logo #} {% 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 %} {{ _sections.logo.alt }} + {% endif %} {{ _sections.logo.alt }} ```twig -{% include '@ecl/footer-standardised/footer-standardised.html.twig' with { - rows: [ - [ - [ - { - title: { - link: { - label: 'Site name', - path: '/example', - }, - }, - description: - 'This site is managed by the Directorate-General for "DG identification"', - }, - ], - [ - { - title: 'Contact us', - links: [ - { - link: { - label: 'Contact information of the DG', - path: '/example', - aria_label: 'Link to Contact information of the DG', - }, - }, - ], - title_class_name: 'ecl-footer-standardised__title--separator', - }, - { - title: 'Follow us on', - links: [ - { - link: { - label: 'Facebook', - path: '/example', - aria_label: 'Link to Facebook', - icon_position: 'before', - }, - icon: { - path: '/icons.svg', - name: 'facebook', - size: 'xs', - }, - }, - ... - ], - list_class_name: 'ecl-footer-standardised__list--inline', - title_class_name: 'ecl-footer-standardised__title--separator', - }, - ], - [ - { - title: 'About us', - links: [ - { - link: { - label: 'Information about the DG', - path: '/example', - aria_label: 'Link to Information about the DG', - }, - }, - ], - title_class_name: 'ecl-footer-standardised__title--separator', - }, +{% include '@ecl/footer-standardised/footer-standardised.html.twig' with { + rows: [ + [ + [ + { + title: { + link: { + label: 'Site name', + path: '/example', + }, + }, + description: + 'This site is managed by the Directorate-General for "DG identification"', + }, + ], + [ + { + title: 'Contact us', + links: [ + { + link: { + label: 'Contact information of the DG', + path: '/example', + aria_label: 'Link to Contact information of the DG', + }, + }, + ], + title_class_name: 'ecl-footer-standardised__title--separator', + }, + { + title: 'Follow us on', + links: [ + { + link: { + label: 'Facebook', + path: '/example', + aria_label: 'Link to Facebook', + icon_position: 'before', + }, + icon: { + path: '/icons.svg', + name: 'facebook', + size: 'xs', + }, + }, + ... + ], + list_class_name: 'ecl-footer-standardised__list--inline', + title_class_name: 'ecl-footer-standardised__title--separator', + }, + ], + [ + { + title: 'About us', + links: [ + { + link: { + label: 'Information about the DG', + path: '/example', + aria_label: 'Link to Information about the DG', + }, + }, + ], + title_class_name: 'ecl-footer-standardised__title--separator', + }, ... ], ], - ... + ... ] %} ``` diff --git a/src/implementations/twig/components/footer-standardised/__snapshots__/footer-standardised.test.js.snap b/src/implementations/twig/components/footer-standardised/__snapshots__/footer-standardised.test.js.snap index 26bd65d9cb5..2a474e6f6f8 100644 --- a/src/implementations/twig/components/footer-standardised/__snapshots__/footer-standardised.test.js.snap +++ b/src/implementations/twig/components/footer-standardised/__snapshots__/footer-standardised.test.js.snap @@ -300,6 +300,18 @@ exports[`Footer Standardised EC default renders correctly 1`] = `
+ + European Commission logo +

@@ -720,6 +732,18 @@ exports[`Footer Standardised EC default renders correctly with extra attributes
+ + European Commission logo +

@@ -1138,6 +1162,18 @@ exports[`Footer Standardised EC default renders correctly with extra class names
+ + European Commission logo +

@@ -1454,13 +1490,13 @@ exports[`Footer Standardised EU default renders correctly 1`] = ` European Union logo European Union logo @@ -2081,13 +2117,13 @@ exports[`Footer Standardised EU default renders correctly with extra attributes European Union logo European Union logo @@ -2706,13 +2742,13 @@ exports[`Footer Standardised EU default renders correctly with extra class names European Union logo European Union logo diff --git a/src/implementations/twig/components/footer-standardised/footer-standardised.html.twig b/src/implementations/twig/components/footer-standardised/footer-standardised.html.twig index f54a62c506a..644f2868302 100644 --- a/src/implementations/twig/components/footer-standardised/footer-standardised.html.twig +++ b/src/implementations/twig/components/footer-standardised/footer-standardised.html.twig @@ -61,9 +61,10 @@ {% set _section_class_name = _section_class_name ~ ' ' ~ _sections.section_class_name %} {% endif %}
- {# logo (EU) #} + {# logo #} {% 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 %} {{ _sections.logo.alt }} + {% endif %} {{ _sections.logo.alt }} { hide_contact: true, hide_follow: true, hide_relate_site: true, + hide_logo: true, }; if (system !== 'eu') { args.hide_about = true; @@ -40,6 +42,15 @@ const getArgTypes = () => { }, }; + argTypes.hide_logo = { + name: 'logo', + type: { name: 'boolean' }, + description: 'Show logo', + table: { + category: 'Optional sections', + }, + }; + argTypes.hide_follow = { name: 'follow us', type: { name: 'boolean' }, @@ -78,12 +89,19 @@ const getArgTypes = () => { const prepareData = (data, args) => { correctSvgPath(data); - if (data.rows[1][0][0].logo) { - data.rows[1][0][0].logo.src_mobile = logoEuMobile; - data.rows[1][0][0].logo.src_desktop = logoEuDesktop; - } - const res = JSON.parse(JSON.stringify(data)); + if (system === 'eu') { + res.rows[1][0][0].logo.src_mobile = logoEuMobile; + res.rows[1][0][0].logo.src_desktop = logoEuDesktop; + } else { + res.rows[2][0][0].logo.src_desktop = logoEc; + } + if (!args.hide_logo && res.rows[1][0][0].logo) { + delete res.rows[1][0][0].logo; + } + if (!args.hide_logo && res.rows[2]) { + delete res.rows[2][0][0].logo; + } if (!args.hide_contact) { res.rows[0][1].splice(0, 1); } diff --git a/src/implementations/vanilla/components/footer-core/footer-core-ec.scss b/src/implementations/vanilla/components/footer-core/footer-core-ec.scss index bf36108f195..11a1c0d6805 100644 --- a/src/implementations/vanilla/components/footer-core/footer-core-ec.scss +++ b/src/implementations/vanilla/components/footer-core/footer-core-ec.scss @@ -99,6 +99,11 @@ $_column-gap: map.get(theme.$grid-gutter-width, 'm'); .ecl-footer-core__link:visited { color: $_text-color; } +/* stylelint-disable-next-line plugin/selector-bem-pattern */ +.ecl-footer-core__logo-link { + display: inline-block; + margin-bottom: map.get(theme.$spacing, 'm'); +} /* stylelint-disable-next-line order/order */ @include breakpoints.up('l') { @@ -163,4 +168,14 @@ $_column-gap: map.get(theme.$grid-gutter-width, 'm'); .ecl-footer-core__link { font: map.get(theme.$font-prolonged, 's'); } + + .ecl-footer-core__logo-link { + margin-bottom: map.get(theme.$spacing, 'xl'); + } +} + +@include breakpoints.up('xl') { + .ecl-footer-core__logo-link { + margin-bottom: map.get(theme.$spacing, 'l'); + } } diff --git a/src/implementations/vanilla/components/footer-harmonised/footer-harmonised-ec.scss b/src/implementations/vanilla/components/footer-harmonised/footer-harmonised-ec.scss index 3c35b10b4f5..e9060d31265 100644 --- a/src/implementations/vanilla/components/footer-harmonised/footer-harmonised-ec.scss +++ b/src/implementations/vanilla/components/footer-harmonised/footer-harmonised-ec.scss @@ -100,6 +100,11 @@ $_column-gap: map.get(theme.$grid-gutter-width, 'm'); font: map.get(theme.$font, 's'); } +.ecl-footer-harmonised__logo-link { + display: inline-block; + margin-bottom: map.get(theme.$spacing, 'm'); +} + /* stylelint-disable-next-line order/order */ @include breakpoints.up('l') { .ecl-footer-harmonised { @@ -241,6 +246,7 @@ $_separator-color: map.get(theme.$color, 'blue'); $_text-color: map.get(theme.$color, 'blue'); $_description-color: map.get(theme.$color, 'blue'); $_column-gap: map.get(theme.$grid-gutter-width, 'm'); +$_logo-height: 3.5rem; /* * Global rules @@ -286,6 +292,10 @@ $_column-gap: map.get(theme.$grid-gutter-width, 'm'); color: $_text-color; } + .ecl-footer-harmonised__logo-image-desktop { + height: $_logo-height; + } + /* stylelint-disable-next-line order/order */ @include breakpoints.up('l') { padding-top: 0; @@ -306,8 +316,8 @@ $_column-gap: map.get(theme.$grid-gutter-width, 'm'); /* Group 3 */ $_bg-color: map.get(theme.$color, 'grey-5'); $_text-color: map.get(theme.$color, 'grey-75'); -$_logo-height-xs: 2rem; -$_logo-height-lg: 2.5rem; +$_logo-g3-height-xs: 2rem; +$_logo-g3-height-lg: 2.5rem; /* * Global rules @@ -357,7 +367,7 @@ $_logo-height-lg: 2.5rem; } .ecl-footer-harmonised__logo { - height: $_logo-height-xs; + height: $_logo-g3-height-xs; vertical-align: bottom; } @@ -400,7 +410,7 @@ $_logo-height-lg: 2.5rem; } .ecl-footer-harmonised__logo { - height: $_logo-height-lg; + height: $_logo-g3-height-lg; } } } diff --git a/src/implementations/vanilla/components/footer-standardised/footer-standardised-ec.scss b/src/implementations/vanilla/components/footer-standardised/footer-standardised-ec.scss index 177653fa216..24a88f8c6b4 100644 --- a/src/implementations/vanilla/components/footer-standardised/footer-standardised-ec.scss +++ b/src/implementations/vanilla/components/footer-standardised/footer-standardised-ec.scss @@ -131,6 +131,11 @@ $_column-gap: map.get(theme.$grid-gutter-width, 'm'); color: $_text-color; } +.ecl-footer-standardised__logo-link { + display: inline-block; + margin-bottom: map.get(theme.$spacing, 'm'); +} + /* stylelint-disable-next-line order/order */ @include breakpoints.up('l') { .ecl-footer-standardised { diff --git a/src/playground/eu/.storybook/main.js b/src/playground/eu/.storybook/main.js index fe0e8429bf7..f3bf8fdf83a 100644 --- a/src/playground/eu/.storybook/main.js +++ b/src/playground/eu/.storybook/main.js @@ -2,7 +2,7 @@ const path = require('path'); const webpack = require('webpack'); const publicUrl = process.env.PUBLIC_URL || ''; -const stories = ['../../../implementations/twig/**/!(eu*).story.js']; +const stories = ['../../../implementations/twig/**/!(ec*).story.js']; const addons = [ '@storybook/addon-docs', diff --git a/src/resources/logo-ec/negative/logo-ec--bg.svg b/src/resources/logo-ec/negative/logo-ec--bg.svg new file mode 100644 index 00000000000..8dab234cb01 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--bg.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--cs.svg b/src/resources/logo-ec/negative/logo-ec--cs.svg new file mode 100644 index 00000000000..0a910bd1dd8 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--cs.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--da.svg b/src/resources/logo-ec/negative/logo-ec--da.svg new file mode 100644 index 00000000000..a2ff6a5bc1c --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--da.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--de.svg b/src/resources/logo-ec/negative/logo-ec--de.svg new file mode 100644 index 00000000000..a16a4f45b06 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--de.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--el.svg b/src/resources/logo-ec/negative/logo-ec--el.svg new file mode 100644 index 00000000000..5116634f476 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--el.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--en.svg b/src/resources/logo-ec/negative/logo-ec--en.svg new file mode 100644 index 00000000000..2422c1dd965 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--en.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--es.svg b/src/resources/logo-ec/negative/logo-ec--es.svg new file mode 100644 index 00000000000..6f6e01fa89a --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--es.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--et.svg b/src/resources/logo-ec/negative/logo-ec--et.svg new file mode 100644 index 00000000000..171369faf94 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--et.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--fi.svg b/src/resources/logo-ec/negative/logo-ec--fi.svg new file mode 100644 index 00000000000..5c2f7e4cc04 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--fi.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--fr.svg b/src/resources/logo-ec/negative/logo-ec--fr.svg new file mode 100644 index 00000000000..8eafbd8dc67 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--fr.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--ga.svg b/src/resources/logo-ec/negative/logo-ec--ga.svg new file mode 100644 index 00000000000..8167738338d --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--ga.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--hr.svg b/src/resources/logo-ec/negative/logo-ec--hr.svg new file mode 100644 index 00000000000..04c4c58df8e --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--hr.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--hu.svg b/src/resources/logo-ec/negative/logo-ec--hu.svg new file mode 100644 index 00000000000..411cadf0bc9 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--hu.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--it.svg b/src/resources/logo-ec/negative/logo-ec--it.svg new file mode 100644 index 00000000000..87e40eefe6e --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--it.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--lt.svg b/src/resources/logo-ec/negative/logo-ec--lt.svg new file mode 100644 index 00000000000..118d47dcc9d --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--lt.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--lv.svg b/src/resources/logo-ec/negative/logo-ec--lv.svg new file mode 100644 index 00000000000..2be4fd312ce --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--lv.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--mt.svg b/src/resources/logo-ec/negative/logo-ec--mt.svg new file mode 100644 index 00000000000..857d6446650 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--mt.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--nl.svg b/src/resources/logo-ec/negative/logo-ec--nl.svg new file mode 100644 index 00000000000..a9c5fcf2294 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--nl.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--pl.svg b/src/resources/logo-ec/negative/logo-ec--pl.svg new file mode 100644 index 00000000000..a7e2688f6b5 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--pl.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--pt.svg b/src/resources/logo-ec/negative/logo-ec--pt.svg new file mode 100644 index 00000000000..60c166d1446 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--pt.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--ro.svg b/src/resources/logo-ec/negative/logo-ec--ro.svg new file mode 100644 index 00000000000..0839722b82c --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--ro.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--sk.svg b/src/resources/logo-ec/negative/logo-ec--sk.svg new file mode 100644 index 00000000000..22f78b77d8a --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--sk.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--sl.svg b/src/resources/logo-ec/negative/logo-ec--sl.svg new file mode 100644 index 00000000000..53b67fc865f --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--sl.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/resources/logo-ec/negative/logo-ec--sv.svg b/src/resources/logo-ec/negative/logo-ec--sv.svg new file mode 100644 index 00000000000..90952a4fd57 --- /dev/null +++ b/src/resources/logo-ec/negative/logo-ec--sv.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/specs/components/footer-core/demo/data--ec.js b/src/specs/components/footer-core/demo/data--ec.js index 0f86cfd9128..9db15fb383f 100644 --- a/src/specs/components/footer-core/demo/data--ec.js +++ b/src/specs/components/footer-core/demo/data--ec.js @@ -6,6 +6,13 @@ module.exports = { [ [ { + logo: { + title: 'European Commission', + alt: 'European Commission logo', + language: 'en', + path: exampleLink, + src_desktop: '/logo-ec.svg', + }, title: { link: { label: 'European Commission website', diff --git a/src/specs/components/footer-core/demo/data--eu.js b/src/specs/components/footer-core/demo/data--eu.js index 7b90a77b1e9..e0f53f6c9a0 100644 --- a/src/specs/components/footer-core/demo/data--eu.js +++ b/src/specs/components/footer-core/demo/data--eu.js @@ -11,6 +11,8 @@ module.exports = { alt: 'European Union logo', language: 'en', path: exampleLink, + src_desktop: '/logo-eu.svg', + src_mobile: '/logo-mobile-eu.svg', }, description: 'This site is managed by the European Commission, Directorate-General for Communication (DG COMM)', diff --git a/src/specs/components/footer-harmonised/demo/data--eu.js b/src/specs/components/footer-harmonised/demo/data--eu.js index 9c9c3bcccea..a03e3391e0f 100644 --- a/src/specs/components/footer-harmonised/demo/data--eu.js +++ b/src/specs/components/footer-harmonised/demo/data--eu.js @@ -106,6 +106,8 @@ module.exports = { alt: 'European Union logo', language: 'en', path: exampleLink, + src_desktop: '/logo-eu.svg', + src_mobile: '/logo-mobile-eu.svg', }, }, ], diff --git a/src/specs/components/footer-harmonised/demo/data--group1.js b/src/specs/components/footer-harmonised/demo/data--group1.js index 8fb676889a1..d8879d52c0b 100644 --- a/src/specs/components/footer-harmonised/demo/data--group1.js +++ b/src/specs/components/footer-harmonised/demo/data--group1.js @@ -167,6 +167,13 @@ module.exports = { path: 'https://ec.europa.eu/info/index_en', }, }, + logo: { + title: 'European Commission', + alt: 'European Commission logo', + language: 'en', + path: exampleLink, + src_desktop: '/logo-ec.svg', + }, }, ], [ diff --git a/src/specs/components/footer-harmonised/demo/data--group2.js b/src/specs/components/footer-harmonised/demo/data--group2.js index 21d194ee380..7f645d5968c 100644 --- a/src/specs/components/footer-harmonised/demo/data--group2.js +++ b/src/specs/components/footer-harmonised/demo/data--group2.js @@ -6,6 +6,13 @@ module.exports = { [ [ { + logo: { + title: 'European Commission', + alt: 'European Commission logo', + language: 'en', + path: exampleLink, + src_desktop: '/logo-ec.svg', + }, title: { link: { label: 'European Commission', diff --git a/src/specs/components/footer-standardised/demo/data--ec.js b/src/specs/components/footer-standardised/demo/data--ec.js index 92c99387849..fbeb5f6feb2 100644 --- a/src/specs/components/footer-standardised/demo/data--ec.js +++ b/src/specs/components/footer-standardised/demo/data--ec.js @@ -167,6 +167,13 @@ module.exports = { path: 'https://ec.europa.eu/info/index_en', }, }, + logo: { + title: 'European Commission', + alt: 'European Commission logo', + language: 'en', + path: exampleLink, + src_desktop: '/logo-ec.svg', + }, }, ], [ diff --git a/src/specs/components/footer-standardised/demo/data--eu.js b/src/specs/components/footer-standardised/demo/data--eu.js index 9c9c3bcccea..a03e3391e0f 100644 --- a/src/specs/components/footer-standardised/demo/data--eu.js +++ b/src/specs/components/footer-standardised/demo/data--eu.js @@ -106,6 +106,8 @@ module.exports = { alt: 'European Union logo', language: 'en', path: exampleLink, + src_desktop: '/logo-eu.svg', + src_mobile: '/logo-mobile-eu.svg', }, }, ],