From 584fdbb8000d8ea3081d158e69472d6442ac26ab Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Tue, 2 Dec 2025 13:31:51 -0800 Subject: [PATCH 01/14] refactor: remove unused --- hlx_statics/blocks/inlinealert/inlinealert.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index a5d4f26d2..90e5dfc8a 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -1,6 +1,5 @@ import { createTag, - getBlockSectionContainer } from '../../scripts/lib-adobeio.js'; import { getMetadata } from '../../scripts/scripts.js'; @@ -44,7 +43,6 @@ export function getVariant(classList) { * @param {Element} block The columns block element */ export default async function decorate(block) { - const container = getBlockSectionContainer(block); block.classList.add('spectrum-InLineAlert'); // figure out variant based on parent element or on the block itself From 02ca8bd2134d907bfdf6178049c3e9b5fff49320 Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 13:37:31 -0800 Subject: [PATCH 02/14] refactor: remove always-true condition --- hlx_statics/blocks/inlinealert/inlinealert.js | 11 +++++------ .../blocks/site-wide-banner/site-wide-banner.js | 7 +++---- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index 90e5dfc8a..e6aef57aa 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -54,12 +54,11 @@ export default async function decorate(block) { }else{ classVariant = getVariant(block.parentElement.parentElement.classList); } - if(classVariant) { - const inlineClass = classVariant.class ? classVariant.class : 'spectrum-InLineAlert--info'; - const inlineIcon = classVariant.icon ? classVariant.icon : infoIcon; - block.classList.add(inlineClass); - block.insertAdjacentHTML("afterbegin", inlineIcon); - } + + const inlineClass = classVariant.class ? classVariant.class : 'spectrum-InLineAlert--info'; + const inlineIcon = classVariant.icon ? classVariant.icon : infoIcon; + block.classList.add(inlineClass); + block.insertAdjacentHTML("afterbegin", inlineIcon); // need to wrap content into p block.querySelectorAll('div').forEach((divContent) =>{ diff --git a/hlx_statics/blocks/site-wide-banner/site-wide-banner.js b/hlx_statics/blocks/site-wide-banner/site-wide-banner.js index 2677b0b49..9f46d5ad3 100644 --- a/hlx_statics/blocks/site-wide-banner/site-wide-banner.js +++ b/hlx_statics/blocks/site-wide-banner/site-wide-banner.js @@ -64,10 +64,9 @@ export default async function decorate(block) { if (icon) { const iconEl = createTag("div", { class: `site-wide-banner-icon ${icon}` }); const variant = getVariant(iconEl.classList); - if (variant) { - iconEl.classList.add(variant.class || "spectrum-InLineAlert--info"); - iconEl.insertAdjacentHTML("afterbegin", variant.icon || ""); - } + iconEl.classList.add(variant.class || "spectrum-InLineAlert--info"); + iconEl.insertAdjacentHTML("afterbegin", variant.icon || ""); + textWrap.appendChild(iconEl); } From b765577fff5679ef80087b13168ab8d0c8dcbc53 Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 13:50:16 -0800 Subject: [PATCH 03/14] refactor: optimize with else-if chain --- hlx_statics/blocks/inlinealert/inlinealert.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index e6aef57aa..f3f8637a3 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -15,23 +15,23 @@ export function getVariant(classList) { if(classList.contains('neutral')){ classVariant.class = 'spectrum-InLineAlert--neutral'; } - if(classList.contains('info')){ + else if(classList.contains('info')){ classVariant.class = 'spectrum-InLineAlert--info'; classVariant.icon = infoIcon; } - if(classList.contains('help')){ + else if(classList.contains('help')){ classVariant.class = 'spectrum-InLineAlert--help'; classVariant.icon = ``; } - if(classList.contains('success')){ + else if(classList.contains('success')){ classVariant.class = 'spectrum-InLineAlert--success'; classVariant.icon = ``; } - if(classList.contains('warning')){ + else if(classList.contains('warning')){ classVariant.class = 'spectrum-InLineAlert--warning'; classVariant.icon = ``; } - if(classList.contains('error')){ + else if(classList.contains('error')){ classVariant.class = 'spectrum-InLineAlert--error'; classVariant.icon =``; } From 824efa005978f3f83c901b9ca0561ca73556d4dd Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 14:03:20 -0800 Subject: [PATCH 04/14] fix: neutral variant should have no icon, and info variant should have info icon --- hlx_statics/blocks/inlinealert/inlinealert.js | 16 ++++++---------- .../blocks/site-wide-banner/site-wide-banner.js | 4 ++-- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index f3f8637a3..5b30500ad 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -3,8 +3,6 @@ import { } from '../../scripts/lib-adobeio.js'; import { getMetadata } from '../../scripts/scripts.js'; -const infoIcon = `` - export function getVariant(classList) { // variants: neutral, info, help, success, warning, error let classVariant = { @@ -15,10 +13,6 @@ export function getVariant(classList) { if(classList.contains('neutral')){ classVariant.class = 'spectrum-InLineAlert--neutral'; } - else if(classList.contains('info')){ - classVariant.class = 'spectrum-InLineAlert--info'; - classVariant.icon = infoIcon; - } else if(classList.contains('help')){ classVariant.class = 'spectrum-InLineAlert--help'; classVariant.icon = ``; @@ -35,6 +29,10 @@ export function getVariant(classList) { classVariant.class = 'spectrum-InLineAlert--error'; classVariant.icon =``; } + else{ + classVariant.class = 'spectrum-InLineAlert--info'; + classVariant.icon = ``; + } return classVariant; } @@ -55,10 +53,8 @@ export default async function decorate(block) { classVariant = getVariant(block.parentElement.parentElement.classList); } - const inlineClass = classVariant.class ? classVariant.class : 'spectrum-InLineAlert--info'; - const inlineIcon = classVariant.icon ? classVariant.icon : infoIcon; - block.classList.add(inlineClass); - block.insertAdjacentHTML("afterbegin", inlineIcon); + block.classList.add(classVariant.class); + block.insertAdjacentHTML("afterbegin", classVariant.icon); // need to wrap content into p block.querySelectorAll('div').forEach((divContent) =>{ diff --git a/hlx_statics/blocks/site-wide-banner/site-wide-banner.js b/hlx_statics/blocks/site-wide-banner/site-wide-banner.js index 9f46d5ad3..7e1d58af6 100644 --- a/hlx_statics/blocks/site-wide-banner/site-wide-banner.js +++ b/hlx_statics/blocks/site-wide-banner/site-wide-banner.js @@ -64,8 +64,8 @@ export default async function decorate(block) { if (icon) { const iconEl = createTag("div", { class: `site-wide-banner-icon ${icon}` }); const variant = getVariant(iconEl.classList); - iconEl.classList.add(variant.class || "spectrum-InLineAlert--info"); - iconEl.insertAdjacentHTML("afterbegin", variant.icon || ""); + iconEl.classList.add(variant.class); + iconEl.insertAdjacentHTML("afterbegin", variant.icon); textWrap.appendChild(iconEl); } From 9a7f2c636366643a625df54025d1efc4de0728ca Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 14:08:38 -0800 Subject: [PATCH 05/14] fix: get inline alert variant --- hlx_statics/blocks/inlinealert/inlinealert.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index 5b30500ad..8f1659b97 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -43,16 +43,9 @@ export function getVariant(classList) { export default async function decorate(block) { block.classList.add('spectrum-InLineAlert'); - // figure out variant based on parent element or on the block itself - // TODO: may need to refactor this logic - let classVariant; const slots = block?.getAttribute('data-slots')?.split(','); - if(getMetadata('template') === 'documentation'){ - classVariant = getVariant(block.classList); - }else{ - classVariant = getVariant(block.parentElement.parentElement.classList); - } - + const classVariant = getVariant(block.classList); + block.classList.add(classVariant.class); block.insertAdjacentHTML("afterbegin", classVariant.icon); From 45802dfc3c60d0b39e67d6f7338702226aeb536e Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 14:10:34 -0800 Subject: [PATCH 06/14] fix: dont delete title --- hlx_statics/blocks/inlinealert/inlinealert.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index 8f1659b97..6f1350cde 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -56,11 +56,4 @@ export default async function decorate(block) { block.appendChild(inlineP); divContent.replaceWith(inlineP); }); - if (slots?.includes('title')) { - const paragraphTag = block.querySelector('p'); - const firstDiv = paragraphTag.querySelector('div'); - if (firstDiv) { - firstDiv.remove(); - } - } } From ef9e808441ae977d8d9d11edbfb853f4105c5478 Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 14:11:09 -0800 Subject: [PATCH 07/14] refactor: remove redundant styles --- hlx_statics/blocks/inlinealert/inlinealert.css | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.css b/hlx_statics/blocks/inlinealert/inlinealert.css index 4aa834439..373015609 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.css +++ b/hlx_statics/blocks/inlinealert/inlinealert.css @@ -126,11 +126,11 @@ main div.inlinealert-wrapper .spectrum-InLineAlert--success .spectrum-InLineAler color: rgb(0, 101, 62); } -main div.inlinealert-wrapper .spectrum-InLineAlert--negative { +main div.inlinealert-wrapper .spectrum-InLineAlert--warning { border-color: rgb(246, 133, 17); } -main div.inlinealert-wrapper .spectrum-InLineAlert--negative .spectrum-InLineAlert-icon { +main div.inlinealert-wrapper .spectrum-InLineAlert--warning .spectrum-InLineAlert-icon { color: rgb(203, 93, 0); } main div.inlinealert-wrapper .inlinealert{ @@ -162,11 +162,6 @@ main div.inlinealert-wrapper .inlinealert img { height: 100%; } -main div.inlinealert-wrapper .inlinealert.warning{ - border-color: rgb(246,133,17); - color: rgb(203, 93, 0); -} - main div.inlinealert-wrapper div.inlinealert > p.spectrum-InLineAlert-content{ display: inline-flex; flex-direction: column; From d96a022bad4c52f9689dec5fec6f8fc2e3846a61 Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 14:12:51 -0800 Subject: [PATCH 08/14] refactor: select just the slots (and not the container) --- hlx_statics/blocks/inlinealert/inlinealert.css | 2 +- hlx_statics/blocks/inlinealert/inlinealert.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.css b/hlx_statics/blocks/inlinealert/inlinealert.css index 373015609..d2e2999c3 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.css +++ b/hlx_statics/blocks/inlinealert/inlinealert.css @@ -162,7 +162,7 @@ main div.inlinealert-wrapper .inlinealert img { height: 100%; } -main div.inlinealert-wrapper div.inlinealert > p.spectrum-InLineAlert-content{ +main div.inlinealert-wrapper div.inlinealert > div { display: inline-flex; flex-direction: column; gap: 8px; diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index 6f1350cde..3787bd159 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -50,7 +50,7 @@ export default async function decorate(block) { block.insertAdjacentHTML("afterbegin", classVariant.icon); // need to wrap content into p - block.querySelectorAll('div').forEach((divContent) =>{ + block.querySelectorAll(':scope > div > div').forEach((divContent) =>{ const inlineP = createTag('p', { class: 'spectrum-InLineAlert-content' }); inlineP.innerHTML = divContent.innerHTML; block.appendChild(inlineP); From b0c946e0463982028493dc833649b1732c0db430 Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 14:13:48 -0800 Subject: [PATCH 09/14] fix: style heading --- hlx_statics/blocks/inlinealert/inlinealert.css | 4 ++-- hlx_statics/blocks/inlinealert/inlinealert.js | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.css b/hlx_statics/blocks/inlinealert/inlinealert.css index d2e2999c3..bf0de37a4 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.css +++ b/hlx_statics/blocks/inlinealert/inlinealert.css @@ -43,10 +43,10 @@ main div.inlinealert-wrapper .spectrum-InLineAlert-header { min-height: 0; margin: 0; padding: 0; - font-size: 14px; + font-size: 16px; font-weight: 700; font-style: normal; - line-height: 14px; + line-height: 24px; text-transform: none; color: rgb(44, 44, 44); } diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index 3787bd159..22c03cb25 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -50,10 +50,11 @@ export default async function decorate(block) { block.insertAdjacentHTML("afterbegin", classVariant.icon); // need to wrap content into p - block.querySelectorAll(':scope > div > div').forEach((divContent) =>{ - const inlineP = createTag('p', { class: 'spectrum-InLineAlert-content' }); - inlineP.innerHTML = divContent.innerHTML; + block.querySelectorAll(':scope > div > div').forEach((div, i) =>{ + const className = slots?.[i] === 'heading' ? 'spectrum-InLineAlert-header' : 'spectrum-InLineAlert-content'; + const inlineP = createTag('p', { class: className }); + inlineP.innerHTML = div.innerHTML; block.appendChild(inlineP); - divContent.replaceWith(inlineP); + div.replaceWith(inlineP); }); } From af968204e5d904cd22814de130ac333a86bef18a Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Thu, 4 Dec 2025 15:02:12 -0800 Subject: [PATCH 10/14] refactor: remove unused --- hlx_statics/blocks/inlinealert/inlinealert.js | 1 - 1 file changed, 1 deletion(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index 22c03cb25..23149c595 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -1,7 +1,6 @@ import { createTag, } from '../../scripts/lib-adobeio.js'; -import { getMetadata } from '../../scripts/scripts.js'; export function getVariant(classList) { // variants: neutral, info, help, success, warning, error From a1e8456676ab42bdd7bd975101da40cc816208f5 Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Fri, 5 Dec 2025 13:53:15 -0800 Subject: [PATCH 11/14] refactor: remove unused --- hlx_statics/blocks/inlinealert/inlinealert.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.css b/hlx_statics/blocks/inlinealert/inlinealert.css index bf0de37a4..40b6ab94a 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.css +++ b/hlx_statics/blocks/inlinealert/inlinealert.css @@ -156,12 +156,6 @@ main div.inlinealert-wrapper .inlinealert a:hover { text-decoration: underline; } -main div.inlinealert-wrapper .inlinealert img { - margin-top: 10px; - width: 100%; - height: 100%; -} - main div.inlinealert-wrapper div.inlinealert > div { display: inline-flex; flex-direction: column; From 097082399948f43262b503e16c0e8374a6dcccec Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Fri, 5 Dec 2025 13:55:08 -0800 Subject: [PATCH 12/14] refactor: position icon using flex box --- .../blocks/inlinealert/inlinealert.css | 35 +++++-------------- hlx_statics/blocks/inlinealert/inlinealert.js | 15 ++++++-- 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.css b/hlx_statics/blocks/inlinealert/inlinealert.css index 40b6ab94a..7e248b278 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.css +++ b/hlx_statics/blocks/inlinealert/inlinealert.css @@ -1,7 +1,3 @@ -main div.inlinealert-wrapper .spectrum-InLineAlert-content { - padding-right: 30px !important; -} - main div.inlinealert-wrapper .spectrum-InLineAlert { position: relative; display: inline-block; @@ -15,28 +11,6 @@ main div.inlinealert-wrapper .spectrum-InLineAlert { background-color: rgb(255, 255, 255); } -[dir="ltr"] main div.inlinealert-wrapper .spectrum-InLineAlert-icon { - right: 20px; -} - -[dir="rtl"] main div.inlinealert-wrapper .spectrum-InLineAlert-icon { - left: 20px; -} - -main div.inlinealert-wrapper .spectrum-InLineAlert-icon { - position: absolute; - display: block; - top: 20px; -} - -[dir="ltr"] main div.inlinealert-wrapper .spectrum-InLineAlert-header { - padding-right: 30px; -} - -[dir="rtl"] main div.inlinealert-wrapper .spectrum-InLineAlert-header { - padding-left: 30px; -} - main div.inlinealert-wrapper .spectrum-InLineAlert-header { display: inline-block; height: auto; @@ -156,10 +130,17 @@ main div.inlinealert-wrapper .inlinealert a:hover { text-decoration: underline; } -main div.inlinealert-wrapper div.inlinealert > div { +main div.inlinealert-wrapper div.inlinealert > div.row { + display: flex; + flex-direction: row; + gap: 30px; +} + +main div.inlinealert-wrapper div.inlinealert div.message-wrapper { display: inline-flex; flex-direction: column; gap: 8px; + flex: 1; } diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index 23149c595..a024a0648 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -44,12 +44,21 @@ export default async function decorate(block) { block.classList.add('spectrum-InLineAlert'); const slots = block?.getAttribute('data-slots')?.split(','); const classVariant = getVariant(block.classList); - block.classList.add(classVariant.class); - block.insertAdjacentHTML("afterbegin", classVariant.icon); + const row = createTag('div', { class: 'row' }); + + const messageWrapper = block.querySelector(':scope > div') + messageWrapper?.classList.add('message-wrapper'); + messageWrapper?.replaceWith(row); + row.appendChild(messageWrapper); + + const iconWrapper = createTag('div', { class: 'icon-wrapper' }); + iconWrapper.insertAdjacentHTML("afterbegin", classVariant.icon); + row.appendChild(iconWrapper); + // need to wrap content into p - block.querySelectorAll(':scope > div > div').forEach((div, i) =>{ + block.querySelectorAll(':scope div.message-wrapper > div').forEach((div, i) =>{ const className = slots?.[i] === 'heading' ? 'spectrum-InLineAlert-header' : 'spectrum-InLineAlert-content'; const inlineP = createTag('p', { class: className }); inlineP.innerHTML = div.innerHTML; From b2131bee76fc4a86e1d5e678a5ea011d08f4ef0b Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Fri, 5 Dec 2025 14:15:24 -0800 Subject: [PATCH 13/14] fix: expand message area when no icon present --- hlx_statics/blocks/inlinealert/inlinealert.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index a024a0648..e97859e53 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -53,10 +53,12 @@ export default async function decorate(block) { messageWrapper?.replaceWith(row); row.appendChild(messageWrapper); - const iconWrapper = createTag('div', { class: 'icon-wrapper' }); - iconWrapper.insertAdjacentHTML("afterbegin", classVariant.icon); - row.appendChild(iconWrapper); - + if (classVariant.icon) { + const iconWrapper = createTag('div', { class: 'icon-wrapper' }); + iconWrapper.insertAdjacentHTML("afterbegin", classVariant.icon); + row.appendChild(iconWrapper); + } + // need to wrap content into p block.querySelectorAll(':scope div.message-wrapper > div').forEach((div, i) =>{ const className = slots?.[i] === 'heading' ? 'spectrum-InLineAlert-header' : 'spectrum-InLineAlert-content'; From c33e5b25cb76ccbaa37e842b027b40c59e032ea6 Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Fri, 5 Dec 2025 14:24:25 -0800 Subject: [PATCH 14/14] feat: inline alert icon position --- hlx_statics/blocks/inlinealert/inlinealert.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/hlx_statics/blocks/inlinealert/inlinealert.js b/hlx_statics/blocks/inlinealert/inlinealert.js index e97859e53..e603662a4 100644 --- a/hlx_statics/blocks/inlinealert/inlinealert.js +++ b/hlx_statics/blocks/inlinealert/inlinealert.js @@ -47,6 +47,8 @@ export default async function decorate(block) { block.classList.add(classVariant.class); const row = createTag('div', { class: 'row' }); + const iconPosition = block.getAttribute('data-iconposition') || 'right'; + row.style.flexDirection = iconPosition === 'right' ? 'row' : 'row-reverse'; const messageWrapper = block.querySelector(':scope > div') messageWrapper?.classList.add('message-wrapper');