feat: inline alert icon position

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;
 }
 
 

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 = `<svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-InLineAlert-icon" focusable="false" aria-hidden="true" style="width: 22px; height: 22px;"><use href="/hlx_statics/icons/info.svg#icon-info"></use></svg>`
 
 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 = `<svg class="spectrum-Icon spectrum-UIIcon-HelpMedium spectrum-InLineAlert-icon" style="width: 22px; height: 22px;"><use href="/hlx_statics/icons/help-icon.svg#icon-help"></use></svg>`;
     }
-    if(classList.contains('success')){
+    else if(classList.contains('success')){
         classVariant.class = 'spectrum-InLineAlert--success';
         classVariant.icon =  `<svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-InLineAlert-icon" style="width: 22px; height: 22px;"><use href="/hlx_statics/icons/success-icon.svg#icon-success"></use></svg>`;
     }
-    if(classList.contains('warning')){
+    else if(classList.contains('warning')){
         classVariant.class = 'spectrum-InLineAlert--warning';
         classVariant.icon = `<svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-InLineAlert-icon" style="width: 22px; height: 22px;"><use href="/hlx_statics/icons/warning-icon.svg#icon-alert"></use></svg>`;
     }
-    if(classList.contains('error')){
+    else if(classList.contains('error')){
         classVariant.class = 'spectrum-InLineAlert--error';
         classVariant.icon =`<svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-InLineAlert-icon" style="width: 22px; height: 22px;"><use href="/hlx_statics/icons/warning-icon.svg#icon-alert"></use></svg>`;
     }
+    else{
+        classVariant.class = 'spectrum-InLineAlert--info';
+        classVariant.icon = `<svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-InLineAlert-icon" focusable="false" aria-hidden="true" style="width: 22px; height: 22px;"><use href="/hlx_statics/icons/info.svg#icon-info"></use></svg>`;
+    }
     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();
-            }
-        }
 }

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);
     }