From c3974a3148cf408d45b6b4983db7146488aee6fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Jove=CC=81?= Date: Tue, 3 Dec 2024 17:52:34 +0100 Subject: [PATCH 01/15] Text and image block --- blocks/text-image/text-image.css | 38 ++++++++++++++++++++++++++++++++ blocks/text-image/text-image.js | 5 +++++ 2 files changed, 43 insertions(+) create mode 100644 blocks/text-image/text-image.css create mode 100644 blocks/text-image/text-image.js diff --git a/blocks/text-image/text-image.css b/blocks/text-image/text-image.css new file mode 100644 index 0000000..1163992 --- /dev/null +++ b/blocks/text-image/text-image.css @@ -0,0 +1,38 @@ +.text-image__container { + --image-width: 50%; + + display: flex; + flex-direction: column; + gap: 24px; + + @media (min-width: 768px) { + flex-direction: row; + } + + > div:not(.text-image__imageContainer) { + order: 1; + flex-grow: 1; + + @media (min-width: 768px) { + order: initial; + width: calc(100% - var(--image-width)); + } + } +} + +.text-image__imageContainer { + order: 0; + + @media (min-width: 768px) { + order: initial; + width: var(--image-width); + + .bigimage & { + --image-width: 70%; + } + + .smallimage & { + --image-width: 30%; + } + } +} diff --git a/blocks/text-image/text-image.js b/blocks/text-image/text-image.js new file mode 100644 index 0000000..827c3d5 --- /dev/null +++ b/blocks/text-image/text-image.js @@ -0,0 +1,5 @@ +export default function decorate(block) { + block.firstElementChild.classList.add('text-image__container'); + const pictureParent = block.querySelector('picture').parentElement; + pictureParent?.classList.add('text-image__imageContainer'); +} From 943b9d800c24da6d8db719f2a24beb76e85853ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Jove=CC=81?= Date: Tue, 3 Dec 2024 18:12:35 +0100 Subject: [PATCH 02/15] Allow BEM style classnames --- .stylelintrc.json | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 0a08a15..74e5d26 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,3 +1,11 @@ { - "extends": ["stylelint-config-standard"] + "extends": ["stylelint-config-standard"], + "rules": { + "selector-class-pattern": [ + "^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-|_]?[a-z0-9]+)*)?$", + { + "message": "Expected class \"%s\" to be in kebab-case or BEM-style naming." + } + ] + } } From 83a9bb495ea0b97b09d7ae4ae45c5d64aa8d5d02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Jove=CC=81?= Date: Tue, 3 Dec 2024 18:13:45 +0100 Subject: [PATCH 03/15] fix linter issues --- blocks/text-image/text-image.css | 10 +++++----- blocks/text-image/text-image.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/blocks/text-image/text-image.css b/blocks/text-image/text-image.css index 1163992..a318936 100644 --- a/blocks/text-image/text-image.css +++ b/blocks/text-image/text-image.css @@ -5,25 +5,25 @@ flex-direction: column; gap: 24px; - @media (min-width: 768px) { + @media (width >= 768px) { flex-direction: row; } - > div:not(.text-image__imageContainer) { + > div:not(.text-image__image-container) { order: 1; flex-grow: 1; - @media (min-width: 768px) { + @media (width >= 768px) { order: initial; width: calc(100% - var(--image-width)); } } } -.text-image__imageContainer { +.text-image__image-container { order: 0; - @media (min-width: 768px) { + @media (width >= 768px) { order: initial; width: var(--image-width); diff --git a/blocks/text-image/text-image.js b/blocks/text-image/text-image.js index 827c3d5..aedc341 100644 --- a/blocks/text-image/text-image.js +++ b/blocks/text-image/text-image.js @@ -1,5 +1,5 @@ export default function decorate(block) { block.firstElementChild.classList.add('text-image__container'); const pictureParent = block.querySelector('picture').parentElement; - pictureParent?.classList.add('text-image__imageContainer'); + pictureParent?.classList.add('text-image__image-container'); } From ae7556d8d0100bd50c90bca1df056b4224c0300d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Jove=CC=81?= Date: Tue, 3 Dec 2024 20:03:57 +0100 Subject: [PATCH 04/15] Include new icons and use SVG as icons instead of image --- icons/arrow-right.svg | 4 ++++ icons/calendar.svg | 1 + icons/chevron-right.svg | 1 + icons/download.svg | 1 + scripts/aem.js | 25 ++++++++++++++++--------- 5 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 icons/arrow-right.svg create mode 100644 icons/calendar.svg create mode 100644 icons/chevron-right.svg create mode 100644 icons/download.svg diff --git a/icons/arrow-right.svg b/icons/arrow-right.svg new file mode 100644 index 0000000..96f7e2d --- /dev/null +++ b/icons/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/calendar.svg b/icons/calendar.svg new file mode 100644 index 0000000..5f88313 --- /dev/null +++ b/icons/calendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/chevron-right.svg b/icons/chevron-right.svg new file mode 100644 index 0000000..0c2bf7a --- /dev/null +++ b/icons/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/download.svg b/icons/download.svg new file mode 100644 index 0000000..db03e46 --- /dev/null +++ b/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/aem.js b/scripts/aem.js index 40662e6..0ba253a 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -403,7 +403,7 @@ function decorateButtons(element) { && twoup.childNodes.length === 1 && twoup.tagName === 'P' ) { - a.className = 'button primary'; + a.className = 'button button--secondary'; twoup.classList.add('button-container'); } if ( @@ -412,7 +412,7 @@ function decorateButtons(element) { && twoup.childNodes.length === 1 && twoup.tagName === 'P' ) { - a.className = 'button secondary'; + a.className = 'button button--tertiary'; twoup.classList.add('button-container'); } } @@ -426,16 +426,23 @@ function decorateButtons(element) { * @param {string} [prefix] prefix to be added to icon src * @param {string} [alt] alt text to be added to icon */ -function decorateIcon(span, prefix = '', alt = '') { +async function decorateIcon(span, prefix = '', alt = '') { const iconName = Array.from(span.classList) .find((c) => c.startsWith('icon-')) .substring(5); - const img = document.createElement('img'); - img.dataset.iconName = iconName; - img.src = `${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`; - img.alt = alt; - img.loading = 'lazy'; - span.append(img); + + const resp = await fetch(`${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`); + if (resp.ok) { + const iconHTML = await resp.text(); + if (iconHTML.match(/