From d2e6d54f4e5d57d90b80aa3525ba219b378e571a Mon Sep 17 00:00:00 2001 From: emeryro Date: Tue, 28 Feb 2023 09:04:50 +0100 Subject: [PATCH 01/11] add breakpoint --- .../twig/components/blockquote/README.md | 34 ++++++++-- .../blockquote/blockquote.html.twig | 67 +++++++++++++++---- .../blockquote/_blockquote-print.scss | 26 ++++++- .../components/blockquote/_blockquote.scss | 2 + src/specs/components/blockquote/demo/data.js | 30 ++++++++- 5 files changed, 134 insertions(+), 25 deletions(-) diff --git a/src/implementations/twig/components/blockquote/README.md b/src/implementations/twig/components/blockquote/README.md index c0154ac0589..2dad001bef1 100644 --- a/src/implementations/twig/components/blockquote/README.md +++ b/src/implementations/twig/components/blockquote/README.md @@ -11,13 +11,28 @@ npm install --save @ecl/twig-component-blockquote - **"citation"** (string) (default: '') - **"author"** (string) (default: '') - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) -- **"image"** (optional) (object) (default: {}) Blockquote image - - "path" (string) Image src, eg. 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg' - - "alt" (string) Image alt, eg: 'blockquote-image' +- **"picture"** (associative array) (default: {}): + - "img" (associative array) (default: {}): + - "src" (string) (default: ''): Path to the image + - "alt" (string) (default: ''): Alt text of the image + - "sources" (array) (default: []): format: [ + { + "src" (string) (default: ''): Path to the source image + "media" (string) (default: ''): Media condition to use this source + "type" (string) (default: ''): Type of this source + }, + ... + ] - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' - "value" (string) Attribute value, eg: 'data-test-1' +Deprecated + +- **"image"** (optional) (object) (default: {}) Blockquote image + - "path" (string) Image src, eg. 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg' + - "alt" (string) Image alt, eg: 'blockquote-image' + ## Example: @@ -25,8 +40,17 @@ npm install --save @ecl/twig-component-blockquote {% include '@ecl/blockquote/blockquote.html.twig' with { citation: 'Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do.', author: 'Mark Twain', - image: { - path: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg", + picture: { + img: { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', + alt: 'Image alternative text', + }, + sources: [ + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg', + media: '(min-width: 600px)', + }, + ], }, } %} ``` diff --git a/src/implementations/twig/components/blockquote/blockquote.html.twig b/src/implementations/twig/components/blockquote/blockquote.html.twig index c9e041279ca..8e1415f970b 100644 --- a/src/implementations/twig/components/blockquote/blockquote.html.twig +++ b/src/implementations/twig/components/blockquote/blockquote.html.twig @@ -5,16 +5,30 @@ - "citation" (string) (default: '') - "author" (string) (default: '') - "extra_classes" (string) (default: '') - - "image" (object) (default: {}): format: { - "path" (string) (default: '') - "alt" (string) (default: '') - } + - "picture" (associative array) (default: {}): + - "img" (associative array) (default: {}): + - "src" (string) (default: ''): Path to the image + - "alt" (string) (default: ''): Alt text of the image + - "sources" (array) (default: []): format: [ + { + "src" (string) (default: ''): Path to the source image + "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string. + "type" (string) (default: ''): Type of this source + }, + ... + ] - "extra_attributes" (array) (default: []): format: [ { "name" (string) (default: ''), "value" (optional) (string) ... ] + + Deprecated: + - "image" (object) (default: {}): format: { + "path" (string) (default: '') + "alt" (string) (default: '') + } #} {# Internal properties #} @@ -23,10 +37,36 @@ {% set _extra_attributes = '' %} {% set _citation = citation|default('') %} {% set _author = author|default('') %} -{% set _image = image|default({}) %} +{% set _image = image|default({}) %} {# DEPRECATED #} +{% set _picture = picture|default({}) %} + +{# Backward compatibility #} + +{% if _picture is empty and _image is not empty %} + {% set _picture = { + 'img': { + 'src': _image.path|default(''), + 'alt': _image.alt|default('') + } + } %} +{% endif %} {# Internal logic - Process properties #} +{% if _picture is not empty and _picture.sources is not empty and _picture.sources is iterable %} + {% for _source in _picture.sources %} + {% if _source.media == 's' %} + {% set _source = _source|merge({'media': '(min-width: 480px)'}) %} + {% elseif _source.media == 'm' %} + {% set _source = _source|merge({'media': '(min-width: 768px)'}) %} + {% elseif _source.media == 'l' %} + {% set _source = _source|merge({'media': '(min-width: 996px)'}) %} + {% elseif _source.media == 'xl' %} + {% set _source = _source|merge({'media': '(min-width: 1140px)'}) %} + {% endif %} + {% endfor %} +{% endif %} + {% if extra_classes is defined and extra_classes is not empty %} {% set _css_class = _css_class ~ ' ' ~ extra_classes %} {% endif %} @@ -48,16 +88,15 @@

{{ _citation }}

- {% if image is defined and image is not empty %} - {{ image.alt }} + {% if _picture.sources is not empty and _picture.sources is iterable %} + {% for _source in _picture.sources %} + + {% endfor %} {% endif %} - class="ecl-blockquote__image" - /> + {{ _picture.img.alt|default('') }} + {% endif %} diff --git a/src/implementations/vanilla/components/blockquote/_blockquote-print.scss b/src/implementations/vanilla/components/blockquote/_blockquote-print.scss index 34868c17cd4..0929c493c0f 100644 --- a/src/implementations/vanilla/components/blockquote/_blockquote-print.scss +++ b/src/implementations/vanilla/components/blockquote/_blockquote-print.scss @@ -17,11 +17,22 @@ $_author-color: null !default; .ecl-blockquote, %ecl-blockquote { - border-left: $_border-width solid $_border-color; - border-radius: $_border-radius; + display: flex; + flex-direction: row-reverse; + justify-content: start; margin: 0; padding-bottom: map.get(theme.$spacing-print, 'm'); - padding-left: map.get(theme.$spacing-print, 'l'); + padding-inline-start: map.get(theme.$spacing-print, 'l'); + padding-top: map.get(theme.$spacing-print, 'm'); +} + +.ecl-blockquote__body, +%ecl-blockquote { + border-inline-start: $_border-width solid $_border-color; + border-radius: $_border-radius; + display: inline-block; + padding-bottom: map.get(theme.$spacing-print, 'm'); + padding-inline-start: map.get(theme.$spacing-print, 'l'); padding-top: map.get(theme.$spacing-print, 'm'); } @@ -58,3 +69,12 @@ $_author-color: null !default; font: map.get(theme.$font-prolonged-print, 'l'); font-weight: $_author-font-weight; } + +.ecl-blockquote__image, +%ecl-blockquote__image { + aspect-ratio: 1/1; + height: 120px; + margin-inline-end: map.get(theme.$spacing-print, 'l'); + object-fit: cover; + width: 120px; +} diff --git a/src/implementations/vanilla/components/blockquote/_blockquote.scss b/src/implementations/vanilla/components/blockquote/_blockquote.scss index 751302f274c..1c804c0a386 100644 --- a/src/implementations/vanilla/components/blockquote/_blockquote.scss +++ b/src/implementations/vanilla/components/blockquote/_blockquote.scss @@ -72,8 +72,10 @@ $_text-max-width: 65ch; // Approximately 80 characters with the current font .ecl-blockquote__image, %ecl-blockquote__image { + aspect-ratio: 1/1; height: 120px; margin-top: map.get(theme.$spacing, 's'); + object-fit: cover; width: 120px; } diff --git a/src/specs/components/blockquote/demo/data.js b/src/specs/components/blockquote/demo/data.js index 922d4922792..94b73fdd714 100644 --- a/src/specs/components/blockquote/demo/data.js +++ b/src/specs/components/blockquote/demo/data.js @@ -3,8 +3,32 @@ module.exports = { citation: 'An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU.', author: 'President Juncker', - image: { - path: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg', - alt: 'Image alternative text', + picture: { + img: { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', + alt: 'Image alternative text', + }, + sources: [ + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg', + media: 's', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg', + media: 'm', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg', + media: 'l', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg', + media: 'xl', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg', + media: '(min-width: 600px)', + }, + ], }, }; From 01c0345ed7892fbfa00b4ed0a1c96973e36a96b7 Mon Sep 17 00:00:00 2001 From: emeryro Date: Wed, 1 Mar 2023 09:41:59 +0100 Subject: [PATCH 02/11] single loop --- .../blockquote/blockquote.html.twig | 36 +++++++++++-------- src/specs/components/blockquote/demo/data.js | 16 ++++----- 2 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/implementations/twig/components/blockquote/blockquote.html.twig b/src/implementations/twig/components/blockquote/blockquote.html.twig index 8e1415f970b..71530141f0d 100644 --- a/src/implementations/twig/components/blockquote/blockquote.html.twig +++ b/src/implementations/twig/components/blockquote/blockquote.html.twig @@ -53,20 +53,6 @@ {# Internal logic - Process properties #} -{% if _picture is not empty and _picture.sources is not empty and _picture.sources is iterable %} - {% for _source in _picture.sources %} - {% if _source.media == 's' %} - {% set _source = _source|merge({'media': '(min-width: 480px)'}) %} - {% elseif _source.media == 'm' %} - {% set _source = _source|merge({'media': '(min-width: 768px)'}) %} - {% elseif _source.media == 'l' %} - {% set _source = _source|merge({'media': '(min-width: 996px)'}) %} - {% elseif _source.media == 'xl' %} - {% set _source = _source|merge({'media': '(min-width: 1140px)'}) %} - {% endif %} - {% endfor %} -{% endif %} - {% if extra_classes is defined and extra_classes is not empty %} {% set _css_class = _css_class ~ ' ' ~ extra_classes %} {% endif %} @@ -91,12 +77,32 @@ {% if _picture is not empty and _picture.img is not empty %} {% if _picture.sources is not empty and _picture.sources is iterable %} + {% set _breakpoints = [ + { name: "s", value: "(min-width: 480px)" }, + { name: "m", value: "(min-width: 768px)" }, + { name: "l", value: "(min-width: 996px)" }, + { name: "xl", value: "(min-width: 1140px)" }, + ] %} {% for _source in _picture.sources %} +{# + {% if _source.media in _breakpoints|keys %} + Do someting..... + {% endif %} +#} + {% if _source.media == 's' %} + {% set _source = _source|merge({'media': '(min-width: 480px)'}) %} + {% elseif _source.media == 'm' %} + {% set _source = _source|merge({'media': '(min-width: 768px)'}) %} + {% elseif _source.media == 'l' %} + {% set _source = _source|merge({'media': '(min-width: 996px)'}) %} + {% elseif _source.media == 'xl' %} + {% set _source = _source|merge({'media': '(min-width: 1140px)'}) %} + {% endif %} {% endfor %} {% endif %} {{ _picture.img.alt|default('') }} - + {% endif %} diff --git a/src/specs/components/blockquote/demo/data.js b/src/specs/components/blockquote/demo/data.js index 94b73fdd714..9c5bb091875 100644 --- a/src/specs/components/blockquote/demo/data.js +++ b/src/specs/components/blockquote/demo/data.js @@ -10,24 +10,20 @@ module.exports = { }, sources: [ { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg', - media: 's', - }, - { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg', - media: 'm', + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg', + media: 'xl', }, { src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg', media: 'l', }, { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg', - media: 'xl', + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg', + media: 'm', }, { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg', - media: '(min-width: 600px)', + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg', + media: 's', }, ], }, From fe049f08e99ca776b3c8fdf25fd9095538a5bb16 Mon Sep 17 00:00:00 2001 From: emeryro Date: Wed, 1 Mar 2023 09:43:31 +0100 Subject: [PATCH 03/11] cleanup --- .../twig/components/blockquote/blockquote.html.twig | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/implementations/twig/components/blockquote/blockquote.html.twig b/src/implementations/twig/components/blockquote/blockquote.html.twig index 71530141f0d..b5338519bac 100644 --- a/src/implementations/twig/components/blockquote/blockquote.html.twig +++ b/src/implementations/twig/components/blockquote/blockquote.html.twig @@ -77,18 +77,7 @@ {% if _picture is not empty and _picture.img is not empty %} {% if _picture.sources is not empty and _picture.sources is iterable %} - {% set _breakpoints = [ - { name: "s", value: "(min-width: 480px)" }, - { name: "m", value: "(min-width: 768px)" }, - { name: "l", value: "(min-width: 996px)" }, - { name: "xl", value: "(min-width: 1140px)" }, - ] %} {% for _source in _picture.sources %} -{# - {% if _source.media in _breakpoints|keys %} - Do someting..... - {% endif %} -#} {% if _source.media == 's' %} {% set _source = _source|merge({'media': '(min-width: 480px)'}) %} {% elseif _source.media == 'm' %} From 54639a938cad74edbc7172b4a94049801aaa3315 Mon Sep 17 00:00:00 2001 From: emeryro Date: Wed, 1 Mar 2023 09:53:41 +0100 Subject: [PATCH 04/11] cleanup --- .../twig/components/blockquote/README.md | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/implementations/twig/components/blockquote/README.md b/src/implementations/twig/components/blockquote/README.md index 2dad001bef1..176e07226f8 100644 --- a/src/implementations/twig/components/blockquote/README.md +++ b/src/implementations/twig/components/blockquote/README.md @@ -18,7 +18,7 @@ npm install --save @ecl/twig-component-blockquote - "sources" (array) (default: []): format: [ { "src" (string) (default: ''): Path to the source image - "media" (string) (default: ''): Media condition to use this source + "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string. "type" (string) (default: ''): Type of this source }, ... @@ -30,8 +30,8 @@ npm install --save @ecl/twig-component-blockquote Deprecated - **"image"** (optional) (object) (default: {}) Blockquote image - - "path" (string) Image src, eg. 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg' - - "alt" (string) Image alt, eg: 'blockquote-image' + - "path" (string) Image src + - "alt" (string) Image alt ## Example: @@ -47,8 +47,20 @@ Deprecated }, sources: [ { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg', - media: '(min-width: 600px)', + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg', + media: 'xl', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg', + media: 'l', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg', + media: 'm', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg', + media: 's', }, ], }, From 09f92ff370ad27df8b85475db54de9f129aea08d Mon Sep 17 00:00:00 2001 From: emeryro Date: Wed, 1 Mar 2023 12:48:28 +0100 Subject: [PATCH 05/11] use template --- .../twig/components/blockquote/README.md | 1 + .../blockquote/blockquote.html.twig | 23 +++------ .../components/blockquote/picture.html.twig | 48 +++++++++++++++++++ 3 files changed, 55 insertions(+), 17 deletions(-) create mode 100644 src/implementations/twig/components/blockquote/picture.html.twig diff --git a/src/implementations/twig/components/blockquote/README.md b/src/implementations/twig/components/blockquote/README.md index 176e07226f8..e41509c1603 100644 --- a/src/implementations/twig/components/blockquote/README.md +++ b/src/implementations/twig/components/blockquote/README.md @@ -23,6 +23,7 @@ npm install --save @ecl/twig-component-blockquote }, ... ] +- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' - "value" (string) Attribute value, eg: 'data-test-1' diff --git a/src/implementations/twig/components/blockquote/blockquote.html.twig b/src/implementations/twig/components/blockquote/blockquote.html.twig index b5338519bac..0ee15ed71e5 100644 --- a/src/implementations/twig/components/blockquote/blockquote.html.twig +++ b/src/implementations/twig/components/blockquote/blockquote.html.twig @@ -17,6 +17,7 @@ }, ... ] + - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) - "extra_attributes" (array) (default: []): format: [ { "name" (string) (default: ''), @@ -75,23 +76,11 @@
{{ _author }}
{% if _picture is not empty and _picture.img is not empty %} - - {% if _picture.sources is not empty and _picture.sources is iterable %} - {% for _source in _picture.sources %} - {% if _source.media == 's' %} - {% set _source = _source|merge({'media': '(min-width: 480px)'}) %} - {% elseif _source.media == 'm' %} - {% set _source = _source|merge({'media': '(min-width: 768px)'}) %} - {% elseif _source.media == 'l' %} - {% set _source = _source|merge({'media': '(min-width: 996px)'}) %} - {% elseif _source.media == 'xl' %} - {% set _source = _source|merge({'media': '(min-width: 1140px)'}) %} - {% endif %} - - {% endfor %} - {% endif %} - {{ _picture.img.alt|default('') }} - + {% include '@ecl/blockquote/picture.html.twig' with { + picture: _picture, + picture_class: "ecl-blockquote__picture", + image_class: "ecl-blockquote__image" + } only %} {% endif %} diff --git a/src/implementations/twig/components/blockquote/picture.html.twig b/src/implementations/twig/components/blockquote/picture.html.twig new file mode 100644 index 00000000000..c80869d6800 --- /dev/null +++ b/src/implementations/twig/components/blockquote/picture.html.twig @@ -0,0 +1,48 @@ +{% apply spaceless %} + +{# + Parameters: + - "picture" (associative array) (default: {}): + - "img" (associative array) (default: {}): + - "src" (string) (default: ''): Path to the image + - "alt" (string) (default: ''): Alt text of the image + - "sources" (array) (default: []): format: [ + { + "src" (string) (default: ''): Path to the source image + "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string. + "type" (string) (default: ''): Type of this source + }, + ... + ] + - "picture_class" (optional) (string) (default: '') + - "image_class" (optional) (string) (default: '') +#} + +{# Internal properties #} + +{% set _picture_class = picture_class|default('') %} +{% set _image_class = image_class|default('') %} +{% set _extra_attributes = '' %} +{% set _picture = picture|default({}) %} + +{# Print the result #} + + + {% if _picture.sources is not empty and _picture.sources is iterable %} + {% for _source in _picture.sources %} + {% if _source.media == 's' %} + {% set _source = _source|merge({'media': '(min-width: 480px)'}) %} + {% elseif _source.media == 'm' %} + {% set _source = _source|merge({'media': '(min-width: 768px)'}) %} + {% elseif _source.media == 'l' %} + {% set _source = _source|merge({'media': '(min-width: 996px)'}) %} + {% elseif _source.media == 'xl' %} + {% set _source = _source|merge({'media': '(min-width: 1140px)'}) %} + {% endif %} + + {% endfor %} + {% endif %} + {{ _picture.img.alt|default('') }} + + +{% endapply %} From f770f703bbb1e722d311a93bf076db6b655db64b Mon Sep 17 00:00:00 2001 From: emeryro Date: Wed, 1 Mar 2023 12:52:11 +0100 Subject: [PATCH 06/11] cleanup --- .../twig/components/blockquote/picture.html.twig | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/implementations/twig/components/blockquote/picture.html.twig b/src/implementations/twig/components/blockquote/picture.html.twig index c80869d6800..46936314202 100644 --- a/src/implementations/twig/components/blockquote/picture.html.twig +++ b/src/implementations/twig/components/blockquote/picture.html.twig @@ -20,10 +20,9 @@ {# Internal properties #} +{% set _picture = picture|default({}) %} {% set _picture_class = picture_class|default('') %} {% set _image_class = image_class|default('') %} -{% set _extra_attributes = '' %} -{% set _picture = picture|default({}) %} {# Print the result #} From a6e14f9c78c68389b0de78dc4c0a833d90fa0045 Mon Sep 17 00:00:00 2001 From: emeryro Date: Thu, 2 Mar 2023 08:53:59 +0100 Subject: [PATCH 07/11] create package --- .../blockquote/blockquote.html.twig | 2 +- .../twig/components/blockquote/package.json | 3 + .../twig/components/picture/.npmignore | 2 + .../twig/components/picture/README.md | 69 +++++++++++++++++++ .../twig/components/picture/package.json | 27 ++++++++ .../twig/components/picture/picture.html.twig | 47 +++++++++++++ .../twig/components/picture/picture.test.js | 40 +++++++++++ src/specs/components/blockquote/demo/data.js | 18 ----- src/specs/components/picture/demo/data.js | 27 ++++++++ src/specs/components/picture/package.json | 23 +++++++ 10 files changed, 239 insertions(+), 19 deletions(-) create mode 100644 src/implementations/twig/components/picture/.npmignore create mode 100644 src/implementations/twig/components/picture/README.md create mode 100644 src/implementations/twig/components/picture/package.json create mode 100644 src/implementations/twig/components/picture/picture.html.twig create mode 100644 src/implementations/twig/components/picture/picture.test.js create mode 100644 src/specs/components/picture/demo/data.js create mode 100644 src/specs/components/picture/package.json diff --git a/src/implementations/twig/components/blockquote/blockquote.html.twig b/src/implementations/twig/components/blockquote/blockquote.html.twig index 0ee15ed71e5..8460e43d7eb 100644 --- a/src/implementations/twig/components/blockquote/blockquote.html.twig +++ b/src/implementations/twig/components/blockquote/blockquote.html.twig @@ -76,7 +76,7 @@
{{ _author }}
{% if _picture is not empty and _picture.img is not empty %} - {% include '@ecl/blockquote/picture.html.twig' with { + {% include '@ecl/picture/picture.html.twig' with { picture: _picture, picture_class: "ecl-blockquote__picture", image_class: "ecl-blockquote__image" diff --git a/src/implementations/twig/components/blockquote/package.json b/src/implementations/twig/components/blockquote/package.json index d843ab75bb3..97ec1804c57 100644 --- a/src/implementations/twig/components/blockquote/package.json +++ b/src/implementations/twig/components/blockquote/package.json @@ -7,6 +7,9 @@ "publishConfig": { "access": "public" }, + "dependencies": { + "@ecl/twig-component-picture": "3.7.1" + }, "devDependencies": { "@ecl/specs-component-blockquote": "3.7.1", "@ecl/vanilla-component-blockquote": "3.7.1" diff --git a/src/implementations/twig/components/picture/.npmignore b/src/implementations/twig/components/picture/.npmignore new file mode 100644 index 00000000000..38460544773 --- /dev/null +++ b/src/implementations/twig/components/picture/.npmignore @@ -0,0 +1,2 @@ +__snapshots__ +*.js diff --git a/src/implementations/twig/components/picture/README.md b/src/implementations/twig/components/picture/README.md new file mode 100644 index 00000000000..e41509c1603 --- /dev/null +++ b/src/implementations/twig/components/picture/README.md @@ -0,0 +1,69 @@ +# ECL Blockquote component + +npm package: `@ecl/twig-component-blockquote` + +```shell +npm install --save @ecl/twig-component-blockquote +``` + +## Parameters + +- **"citation"** (string) (default: '') +- **"author"** (string) (default: '') +- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) +- **"picture"** (associative array) (default: {}): + - "img" (associative array) (default: {}): + - "src" (string) (default: ''): Path to the image + - "alt" (string) (default: ''): Alt text of the image + - "sources" (array) (default: []): format: [ + { + "src" (string) (default: ''): Path to the source image + "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string. + "type" (string) (default: ''): Type of this source + }, + ... + ] +- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) +- **"extra_attributes"** (optional) (array) (default: []) Extra attributes + - "name" (string) Attribute name, eg. 'data-test' + - "value" (string) Attribute value, eg: 'data-test-1' + +Deprecated + +- **"image"** (optional) (object) (default: {}) Blockquote image + - "path" (string) Image src + - "alt" (string) Image alt + +## Example: + + +```twig +{% include '@ecl/blockquote/blockquote.html.twig' with { + citation: 'Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do.', + author: 'Mark Twain', + picture: { + img: { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', + alt: 'Image alternative text', + }, + sources: [ + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg', + media: 'xl', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg', + media: 'l', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg', + media: 'm', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg', + media: 's', + }, + ], + }, +} %} +``` diff --git a/src/implementations/twig/components/picture/package.json b/src/implementations/twig/components/picture/package.json new file mode 100644 index 00000000000..62fa5adc09f --- /dev/null +++ b/src/implementations/twig/components/picture/package.json @@ -0,0 +1,27 @@ +{ + "name": "@ecl/twig-component-picture", + "author": "European Commission", + "license": "EUPL-1.2", + "version": "3.7.1", + "description": "ECL Picture", + "publishConfig": { + "access": "public" + }, + "devDependencies": { + "@ecl/specs-component-picture": "3.7.1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ec-europa/europa-component-library.git" + }, + "bugs": { + "url": "https://github.com/ec-europa/europa-component-library/issues" + }, + "homepage": "https://github.com/ec-europa/europa-component-library", + "keywords": [ + "ecl", + "europa-component-library", + "design-system", + "twig" + ] +} diff --git a/src/implementations/twig/components/picture/picture.html.twig b/src/implementations/twig/components/picture/picture.html.twig new file mode 100644 index 00000000000..46936314202 --- /dev/null +++ b/src/implementations/twig/components/picture/picture.html.twig @@ -0,0 +1,47 @@ +{% apply spaceless %} + +{# + Parameters: + - "picture" (associative array) (default: {}): + - "img" (associative array) (default: {}): + - "src" (string) (default: ''): Path to the image + - "alt" (string) (default: ''): Alt text of the image + - "sources" (array) (default: []): format: [ + { + "src" (string) (default: ''): Path to the source image + "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string. + "type" (string) (default: ''): Type of this source + }, + ... + ] + - "picture_class" (optional) (string) (default: '') + - "image_class" (optional) (string) (default: '') +#} + +{# Internal properties #} + +{% set _picture = picture|default({}) %} +{% set _picture_class = picture_class|default('') %} +{% set _image_class = image_class|default('') %} + +{# Print the result #} + + + {% if _picture.sources is not empty and _picture.sources is iterable %} + {% for _source in _picture.sources %} + {% if _source.media == 's' %} + {% set _source = _source|merge({'media': '(min-width: 480px)'}) %} + {% elseif _source.media == 'm' %} + {% set _source = _source|merge({'media': '(min-width: 768px)'}) %} + {% elseif _source.media == 'l' %} + {% set _source = _source|merge({'media': '(min-width: 996px)'}) %} + {% elseif _source.media == 'xl' %} + {% set _source = _source|merge({'media': '(min-width: 1140px)'}) %} + {% endif %} + + {% endfor %} + {% endif %} + {{ _picture.img.alt|default('') }} + + +{% endapply %} diff --git a/src/implementations/twig/components/picture/picture.test.js b/src/implementations/twig/components/picture/picture.test.js new file mode 100644 index 00000000000..36947c18ae3 --- /dev/null +++ b/src/implementations/twig/components/picture/picture.test.js @@ -0,0 +1,40 @@ +import { + merge, + renderTwigFileAsNode, + renderTwigFileAsHtml, +} from '@ecl/test-utils'; +import { axe, toHaveNoViolations } from 'jest-axe'; + +import data from '@ecl/specs-component-picture/demo/data'; + +expect.extend(toHaveNoViolations); + +describe('Picture', () => { + const template = '@ecl/picture/picture.html.twig'; + const render = (params) => renderTwigFileAsNode(template, params); + + describe('Default', () => { + test('renders correctly', () => { + expect.assertions(1); + + return expect(render(data)).resolves.toMatchSnapshot(); + }); + + test('renders correctly with extra class names', () => { + expect.assertions(1); + + const optionsWithExtraClasses = merge(data, { + picture_class: 'custom-class custom-class--picture', + image_class: 'custom-class custom-class--image', + }); + + return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot(); + }); + + test(`passes the accessibility tests`, async () => { + expect( + await axe(renderTwigFileAsHtml(template, data, true)) + ).toHaveNoViolations(); + }); + }); +}); diff --git a/src/specs/components/blockquote/demo/data.js b/src/specs/components/blockquote/demo/data.js index 9c5bb091875..5eda4219d5d 100644 --- a/src/specs/components/blockquote/demo/data.js +++ b/src/specs/components/blockquote/demo/data.js @@ -8,23 +8,5 @@ module.exports = { src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', alt: 'Image alternative text', }, - sources: [ - { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg', - media: 'xl', - }, - { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg', - media: 'l', - }, - { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg', - media: 'm', - }, - { - src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg', - media: 's', - }, - ], }, }; diff --git a/src/specs/components/picture/demo/data.js b/src/specs/components/picture/demo/data.js new file mode 100644 index 00000000000..cedab6e1d2f --- /dev/null +++ b/src/specs/components/picture/demo/data.js @@ -0,0 +1,27 @@ +// Simple content for demo +module.exports = { + picture: { + img: { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg', + alt: 'Image alternative text', + }, + sources: [ + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg', + media: 'xl', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg', + media: 'l', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg', + media: 'm', + }, + { + src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg', + media: 's', + }, + ], + }, +}; diff --git a/src/specs/components/picture/package.json b/src/specs/components/picture/package.json new file mode 100644 index 00000000000..6b2c71477f9 --- /dev/null +++ b/src/specs/components/picture/package.json @@ -0,0 +1,23 @@ +{ + "name": "@ecl/specs-component-picture", + "author": "European Commission", + "license": "EUPL-1.2", + "version": "3.7.1", + "description": "ECL Picture Specs", + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ec-europa/europa-component-library.git" + }, + "bugs": { + "url": "https://github.com/ec-europa/europa-component-library/issues" + }, + "homepage": "https://github.com/ec-europa/europa-component-library", + "keywords": [ + "ecl", + "europa-component-library", + "design-system" + ] +} From d592aa3d8ecccc749142ab48fe7ae2ee6fd8dc7b Mon Sep 17 00:00:00 2001 From: emeryro Date: Thu, 2 Mar 2023 09:01:50 +0100 Subject: [PATCH 08/11] update test --- .../__snapshots__/picture.test.js.snap | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/implementations/twig/components/picture/__snapshots__/picture.test.js.snap diff --git a/src/implementations/twig/components/picture/__snapshots__/picture.test.js.snap b/src/implementations/twig/components/picture/__snapshots__/picture.test.js.snap new file mode 100644 index 00000000000..1195b7929d9 --- /dev/null +++ b/src/implementations/twig/components/picture/__snapshots__/picture.test.js.snap @@ -0,0 +1,69 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Picture Default renders correctly 1`] = ` + + + + + + + Image alternative text + + +`; + +exports[`Picture Default renders correctly with extra class names 1`] = ` + + + + + + + Image alternative text + + +`; From 6a328961b665f77cf781abd60e9cdcf7657c62af Mon Sep 17 00:00:00 2001 From: emeryro Date: Thu, 2 Mar 2023 09:11:18 +0100 Subject: [PATCH 09/11] update test --- .../__snapshots__/blockquote.test.js.snap | 42 ++++++++++++------- 1 file changed, 27 insertions(+), 15 deletions(-) diff --git a/src/implementations/twig/components/blockquote/__snapshots__/blockquote.test.js.snap b/src/implementations/twig/components/blockquote/__snapshots__/blockquote.test.js.snap index 4d4d616716c..36325651b4e 100644 --- a/src/implementations/twig/components/blockquote/__snapshots__/blockquote.test.js.snap +++ b/src/implementations/twig/components/blockquote/__snapshots__/blockquote.test.js.snap @@ -27,11 +27,15 @@ exports[`Blockquote Default renders correctly 1`] = ` - Image alternative text + + Image alternative text + `; @@ -65,11 +69,15 @@ exports[`Blockquote Default renders correctly with extra attributes 1`] = ` - Image alternative text + + Image alternative text + `; @@ -101,11 +109,15 @@ exports[`Blockquote Default renders correctly with extra class names 1`] = ` - Image alternative text + + Image alternative text + `; From 62292b58705029777ef2a8e32c692aaf48281657 Mon Sep 17 00:00:00 2001 From: emeryro Date: Mon, 6 Mar 2023 13:51:29 +0100 Subject: [PATCH 10/11] use picture component --- .../twig/components/blockquote/README.md | 13 +---- .../__snapshots__/blockquote.test.js.snap | 46 ++++++++++++++++-- .../blockquote/blockquote.html.twig | 17 ++----- .../components/blockquote/blockquote.test.js | 16 +++++++ .../components/blockquote/picture.html.twig | 47 ------------------- 5 files changed, 63 insertions(+), 76 deletions(-) delete mode 100644 src/implementations/twig/components/blockquote/picture.html.twig diff --git a/src/implementations/twig/components/blockquote/README.md b/src/implementations/twig/components/blockquote/README.md index e41509c1603..1c17b80bfd8 100644 --- a/src/implementations/twig/components/blockquote/README.md +++ b/src/implementations/twig/components/blockquote/README.md @@ -11,18 +11,7 @@ npm install --save @ecl/twig-component-blockquote - **"citation"** (string) (default: '') - **"author"** (string) (default: '') - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) -- **"picture"** (associative array) (default: {}): - - "img" (associative array) (default: {}): - - "src" (string) (default: ''): Path to the image - - "alt" (string) (default: ''): Alt text of the image - - "sources" (array) (default: []): format: [ - { - "src" (string) (default: ''): Path to the source image - "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string. - "type" (string) (default: ''): Type of this source - }, - ... - ] +- **"picture"** (associative array) (default: {}): Image for the blockquote, following ECL Picture structure - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) - **"extra_attributes"** (optional) (array) (default: []) Extra attributes - "name" (string) Attribute name, eg. 'data-test' diff --git a/src/implementations/twig/components/blockquote/__snapshots__/blockquote.test.js.snap b/src/implementations/twig/components/blockquote/__snapshots__/blockquote.test.js.snap index 36325651b4e..8abc6fa9ade 100644 --- a/src/implementations/twig/components/blockquote/__snapshots__/blockquote.test.js.snap +++ b/src/implementations/twig/components/blockquote/__snapshots__/blockquote.test.js.snap @@ -1,5 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Blockquote Default backward compatibility 1`] = ` + +
+
+
+

+ An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU. +

+
+
+ + President Juncker + +
+
+ + Image alternative text + +
+ +`; + exports[`Blockquote Default renders correctly 1`] = `
Image alternative text Image alternative text Image alternative text diff --git a/src/implementations/twig/components/blockquote/blockquote.test.js b/src/implementations/twig/components/blockquote/blockquote.test.js index 7c3e6345dd7..896eb60ebc9 100644 --- a/src/implementations/twig/components/blockquote/blockquote.test.js +++ b/src/implementations/twig/components/blockquote/blockquote.test.js @@ -7,6 +7,16 @@ import { axe, toHaveNoViolations } from 'jest-axe'; import data from '@ecl/specs-component-blockquote/demo/data'; +const dataPrevious = { + citation: + 'An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU.', + author: 'President Juncker', + image: { + path: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg', + alt: 'Image alternative text', + }, +}; + expect.extend(toHaveNoViolations); describe('Blockquote', () => { @@ -20,6 +30,12 @@ describe('Blockquote', () => { return expect(render(data)).resolves.toMatchSnapshot(); }); + test('backward compatibility', () => { + expect.assertions(1); + + return expect(render(dataPrevious)).resolves.toMatchSnapshot(); + }); + test('renders correctly with extra class names', () => { expect.assertions(1); diff --git a/src/implementations/twig/components/blockquote/picture.html.twig b/src/implementations/twig/components/blockquote/picture.html.twig deleted file mode 100644 index 46936314202..00000000000 --- a/src/implementations/twig/components/blockquote/picture.html.twig +++ /dev/null @@ -1,47 +0,0 @@ -{% apply spaceless %} - -{# - Parameters: - - "picture" (associative array) (default: {}): - - "img" (associative array) (default: {}): - - "src" (string) (default: ''): Path to the image - - "alt" (string) (default: ''): Alt text of the image - - "sources" (array) (default: []): format: [ - { - "src" (string) (default: ''): Path to the source image - "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string. - "type" (string) (default: ''): Type of this source - }, - ... - ] - - "picture_class" (optional) (string) (default: '') - - "image_class" (optional) (string) (default: '') -#} - -{# Internal properties #} - -{% set _picture = picture|default({}) %} -{% set _picture_class = picture_class|default('') %} -{% set _image_class = image_class|default('') %} - -{# Print the result #} - - - {% if _picture.sources is not empty and _picture.sources is iterable %} - {% for _source in _picture.sources %} - {% if _source.media == 's' %} - {% set _source = _source|merge({'media': '(min-width: 480px)'}) %} - {% elseif _source.media == 'm' %} - {% set _source = _source|merge({'media': '(min-width: 768px)'}) %} - {% elseif _source.media == 'l' %} - {% set _source = _source|merge({'media': '(min-width: 996px)'}) %} - {% elseif _source.media == 'xl' %} - {% set _source = _source|merge({'media': '(min-width: 1140px)'}) %} - {% endif %} - - {% endfor %} - {% endif %} - {{ _picture.img.alt|default('') }} - - -{% endapply %} From 9f313e550e5add8dec2aa2dd87445e64cf3468a0 Mon Sep 17 00:00:00 2001 From: emeryro Date: Wed, 8 Mar 2023 10:36:44 +0100 Subject: [PATCH 11/11] fix story --- .../twig/components/blockquote/blockquote.story.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/implementations/twig/components/blockquote/blockquote.story.js b/src/implementations/twig/components/blockquote/blockquote.story.js index 0a557772e8f..8538521e686 100644 --- a/src/implementations/twig/components/blockquote/blockquote.story.js +++ b/src/implementations/twig/components/blockquote/blockquote.story.js @@ -5,8 +5,6 @@ import defaultData from '@ecl/specs-component-blockquote/demo/data'; import blockquote from './blockquote.html.twig'; import notes from './README.md'; -const demoImage = { ...defaultData.image }; - const getArgs = (data) => ({ show_image: false, citation: data.citation, @@ -49,8 +47,13 @@ const getArgTypes = () => ({ }); const prepareData = (data, args) => { - data.image = args.show_image ? demoImage : null; - return Object.assign(data, args); + const clone = JSON.parse(JSON.stringify(data)); + + if (!args.show_image) { + delete clone.picture; + } + + return Object.assign(clone, args); }; export default {