diff --git a/hlx_statics/blocks/inlinealert/inlinealert.css b/hlx_statics/blocks/inlinealert/inlinealert.css
index 4aa834439..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,38 +11,16 @@ 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;
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);
}
@@ -126,11 +100,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{
@@ -156,21 +130,17 @@ 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 .inlinealert.warning{
- border-color: rgb(246,133,17);
- color: rgb(203, 93, 0);
+main div.inlinealert-wrapper div.inlinealert > div.row {
+ display: flex;
+ flex-direction: row;
+ gap: 30px;
}
-main div.inlinealert-wrapper div.inlinealert > p.spectrum-InLineAlert-content{
+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 a5d4f26d2..e603662a4 100644
--- a/hlx_statics/blocks/inlinealert/inlinealert.js
+++ b/hlx_statics/blocks/inlinealert/inlinealert.js
@@ -1,10 +1,6 @@
import {
createTag,
- getBlockSectionContainer
} from '../../scripts/lib-adobeio.js';
-import { getMetadata } from '../../scripts/scripts.js';
-
-const infoIcon = ``
export function getVariant(classList) {
// variants: neutral, info, help, success, warning, error
@@ -16,26 +12,26 @@ export function getVariant(classList) {
if(classList.contains('neutral')){
classVariant.class = 'spectrum-InLineAlert--neutral';
}
- 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 =``;
}
+ else{
+ classVariant.class = 'spectrum-InLineAlert--info';
+ classVariant.icon = ``;
+ }
return classVariant;
}
@@ -44,37 +40,33 @@ 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
- // 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);
- }
- 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 classVariant = getVariant(block.classList);
+ 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');
+ messageWrapper?.replaceWith(row);
+ row.appendChild(messageWrapper);
+
+ 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('div').forEach((divContent) =>{
- const inlineP = createTag('p', { class: 'spectrum-InLineAlert-content' });
- inlineP.innerHTML = divContent.innerHTML;
+ 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;
block.appendChild(inlineP);
- divContent.replaceWith(inlineP);
+ div.replaceWith(inlineP);
});
- if (slots?.includes('title')) {
- const paragraphTag = block.querySelector('p');
- const firstDiv = paragraphTag.querySelector('div');
- if (firstDiv) {
- firstDiv.remove();
- }
- }
}
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..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,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);
+ iconEl.insertAdjacentHTML("afterbegin", variant.icon);
+
textWrap.appendChild(iconEl);
}