@pearson-ux/alert
Version:
Alert web component
109 lines (96 loc) • 8.46 kB
JavaScript
import { getCustomTokens } from './customTokens.js';
import { loadAndApplyTokens } from './tokenHelper.js';
class PearsonAlert extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
this.render();
this.style.visibility = 'hidden'; // Hide the component initially to prevent FOUC
}
static get observedAttributes() {
return ['theme', 'variant'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'theme') {
this.loadTokens(newValue);
}
if(name === 'variant'){
// Update the icon based on the variant
this.updateIcon(newValue);
}
}
connectedCallback() {
this.loadTokens(this.getAttribute('theme'));
this.shadowRoot.querySelector('.alert-close-button').addEventListener('click', this.closeAlert.bind(this));
}
disconnectedCallback() {
this.shadowRoot.querySelector('.alert-close-button').removeEventListener('click', this.closeAlert.bind(this));
}
loadTokens(theme) {
loadAndApplyTokens(theme, this.shadowRoot, this.darkModeMediaQuery, getCustomTokens, () => {
// Show the component once styles are applied
this.style.visibility = 'visible';
// Apply tokens on dark mode change
this.darkModeMediaQuery.addEventListener('change', () => {
loadAndApplyTokens(theme, this.shadowRoot, this.darkModeMediaQuery, getCustomTokens);
});
});
}
updateIcon(variant) {
let iconSvg;
switch (variant) {
case 'error':
iconSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 22" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6559 1.44613L23.7385 18.633C24.272 19.5425 23.9631 20.7098 23.0485 21.2403C22.7553 21.4104 22.4219 21.5 22.0825 21.5H1.91723C0.858371 21.5 0 20.6465 0 19.5936C0 19.2561 0.0901257 18.9246 0.261167 18.633L10.3438 1.44613C10.8773 0.536679 12.0513 0.229489 12.9659 0.760002C13.2516 0.925704 13.4893 1.16207 13.6559 1.44613ZM11.25 8C10.8358 8 10.5 8.33579 10.5 8.75V13.25C10.5 13.6642 10.8358 14 11.25 14H12.75C13.1642 14 13.5 13.6642 13.5 13.25V8.75C13.5 8.33579 13.1642 8 12.75 8H11.25ZM11.25 15.5C10.8358 15.5 10.5 15.8358 10.5 16.25V17.75C10.5 18.1642 10.8358 18.5 11.25 18.5H12.75C13.1642 18.5 13.5 18.1642 13.5 17.75V16.25C13.5 15.8358 13.1642 15.5 12.75 15.5H11.25Z" fill="#D30018"/>
</svg>`;
break;
case 'warning':
iconSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.55544 1.34824C4.87103 0.469192 6.41775 0 8 0C9.05058 0 10.0909 0.206926 11.0615 0.608964C12.0321 1.011 12.914 1.60028 13.6569 2.34315C14.3997 3.08601 14.989 3.96793 15.391 4.93853C15.7931 5.90914 16 6.94942 16 8C16 9.58225 15.5308 11.129 14.6518 12.4446C13.7727 13.7602 12.5233 14.7855 11.0615 15.391C9.59966 15.9965 7.99113 16.155 6.43928 15.8463C4.88743 15.5376 3.46197 14.7757 2.34315 13.6569C1.22433 12.538 0.462403 11.1126 0.153721 9.56072C-0.15496 8.00887 0.00346629 6.40034 0.608967 4.93853C1.21447 3.47672 2.23985 2.22729 3.55544 1.34824ZM9.10937 9.05467L9.24999 4.20312C9.24999 4.14062 9.22395 4.09375 9.17187 4.0625C9.11978 4.02083 9.05729 4 8.98437 4H7.26562C7.19271 4 7.13021 4.02083 7.07812 4.0625C7.02604 4.09375 7 4.14062 7 4.20312L7.13281 9.05467C7.13281 9.10675 7.15885 9.15233 7.21094 9.19139C7.26302 9.23045 7.32552 9.24998 7.39844 9.24998H8.84374C8.91666 9.24998 8.97786 9.23045 9.02734 9.19139C9.07682 9.15233 9.10416 9.10675 9.10937 9.05467ZM9.12499 11.7422V10.2578C9.12499 10.1849 9.10156 10.1237 9.05468 10.0742C9.00781 10.0247 8.95052 10 8.88281 10H7.38281C7.3151 10 7.25521 10.026 7.20312 10.0781C7.15104 10.1302 7.125 10.1901 7.125 10.2578V11.7422C7.125 11.8099 7.15104 11.8698 7.20312 11.9219C7.25521 11.974 7.3151 12 7.38281 12H8.88281C8.95052 12 9.00781 11.9753 9.05468 11.9258C9.10156 11.8763 9.12499 11.8151 9.12499 11.7422Z" fill="#FC630F"/>
</svg>`;
break;
case 'success':
iconSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16ZM7.52793 11.5685L11.8509 5.39287C12.1113 5.02086 12.0208 4.50818 11.6488 4.24777C11.2768 3.98736 10.7641 4.07783 10.5037 4.44985L6.75046 9.81158L5.25001 8.21735C4.93879 7.88667 4.41842 7.8709 4.08775 8.18213C3.75707 8.49335 3.7413 9.01372 4.05253 9.34439L6.2457 11.6746C6.53367 11.9806 7.00071 12.017 7.33085 11.7741C7.38777 11.7391 7.44437 11.6837 7.50289 11.6038C7.51158 11.5922 7.51993 11.5804 7.52793 11.5685Z" fill="#12B2A6"/>
</svg>`;
break;
case 'information':
iconSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8ZM8.44466 3.55566C8.69012 3.55566 8.88911 3.75465 8.88911 4.00011V4.889C8.88911 5.13446 8.69012 5.33344 8.44466 5.33344H7.55577C7.31031 5.33344 7.11133 5.13446 7.11133 4.889V4.00011C7.11133 3.75465 7.31031 3.55566 7.55577 3.55566H8.44466ZM8.44466 6.22217C8.69012 6.22217 8.88911 6.42115 8.88911 6.66661V11.9999C8.88911 12.2454 8.69012 12.4444 8.44466 12.4444H7.55577C7.31031 12.4444 7.11133 12.2454 7.11133 11.9999V6.66661C7.11133 6.42115 7.31031 6.22217 7.55577 6.22217H8.44466Z" fill="#151515"/>
</svg>`;
break;
default:
iconSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8ZM8.44466 3.55566C8.69012 3.55566 8.88911 3.75465 8.88911 4.00011V4.889C8.88911 5.13446 8.69012 5.33344 8.44466 5.33344H7.55577C7.31031 5.33344 7.11133 5.13446 7.11133 4.889V4.00011C7.11133 3.75465 7.31031 3.55566 7.55577 3.55566H8.44466ZM8.44466 6.22217C8.69012 6.22217 8.88911 6.42115 8.88911 6.66661V11.9999C8.88911 12.2454 8.69012 12.4444 8.44466 12.4444H7.55577C7.31031 12.4444 7.11133 12.2454 7.11133 11.9999V6.66661C7.11133 6.42115 7.31031 6.22217 7.55577 6.22217H8.44466Z" fill="#151515"/>
</svg>`;
break;
}
this.shadowRoot.querySelector('.alert-icon').innerHTML = iconSvg;
}
closeAlert() {
this.style.display = 'none';
}
render() {
this.shadowRoot.innerHTML = `
<div class="alert-box" role="alert">
<span class="alert-icon"></span>
<div class="alert-message">
<slot></slot>
</div>
<button class="alert-close-button" aria-label="Close alert" onclick=${this.closeAlert}>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683418 14.0976 1.31658 13.7071 1.70711L8.41421 7L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L7 8.41421L1.70711 13.7071C1.31658 14.0976 0.683418 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579Z" fill="black"/>
</svg>
</button>
</div>
`;
this.style.visibility = 'visible';
}
}
customElements.define('pearson-alert', PearsonAlert);