152 lines
3.4 KiB
JavaScript
152 lines
3.4 KiB
JavaScript
/**
|
|
* Push Box Component
|
|
* A promotional container with logo, title, and CTA
|
|
* Uses slots for all content to allow easy customization in HTML
|
|
* Supports variant="purple" for purple background with white content
|
|
*/
|
|
class PushBox extends HTMLElement {
|
|
static get observedAttributes() {
|
|
return ["background-color", "text-color", "variant"];
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
// Use requestAnimationFrame to ensure slots are assigned
|
|
requestAnimationFrame(() => {
|
|
this.updateLogoVisibility();
|
|
});
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
this.render();
|
|
requestAnimationFrame(() => {
|
|
this.updateLogoVisibility();
|
|
});
|
|
}
|
|
|
|
updateLogoVisibility() {
|
|
const logoSlot = this.shadowRoot?.querySelector('slot[name="logo"]');
|
|
const logoWrapper = this.shadowRoot?.querySelector(".logo-wrapper");
|
|
|
|
if (logoSlot && logoWrapper) {
|
|
const assignedNodes = logoSlot.assignedNodes();
|
|
const hasContent =
|
|
assignedNodes.length > 0 &&
|
|
assignedNodes.some((node) => {
|
|
return node.nodeType === Node.ELEMENT_NODE && node.tagName === "IMG";
|
|
});
|
|
|
|
if (!hasContent) {
|
|
logoWrapper.classList.add("hidden");
|
|
} else {
|
|
logoWrapper.classList.remove("hidden");
|
|
}
|
|
}
|
|
}
|
|
|
|
get variant() {
|
|
return this.getAttribute("variant") || "default";
|
|
}
|
|
|
|
get isPurple() {
|
|
return this.variant === "purple";
|
|
}
|
|
|
|
get backgroundColor() {
|
|
if (this.isPurple) {
|
|
return "#951D51";
|
|
}
|
|
return (
|
|
this.getAttribute("background-color") ||
|
|
"var(--color-push-box-bg, #EBEEF4)"
|
|
);
|
|
}
|
|
|
|
get textColor() {
|
|
if (this.isPurple) {
|
|
return "#FFFFFF";
|
|
}
|
|
return this.getAttribute("text-color") || "#951D51";
|
|
}
|
|
|
|
get titleColor() {
|
|
if (this.isPurple) {
|
|
return "#FFFFFF";
|
|
}
|
|
return "#000000";
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.push-box {
|
|
background-color: ${this.backgroundColor};
|
|
padding: 48px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.logo-wrapper {
|
|
display: block;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.logo-wrapper.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.logo-wrapper ::slotted(img) {
|
|
width: 104px;
|
|
height: auto;
|
|
}
|
|
|
|
.title-wrapper ::slotted(*) {
|
|
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 34px;
|
|
color: ${this.titleColor};
|
|
margin: 0;
|
|
}
|
|
|
|
.cta-wrapper {
|
|
color: ${this.textColor};
|
|
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.cta-wrapper ::slotted(.cta-buttons) {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|
|
<div class="push-box">
|
|
<div class="logo-wrapper">
|
|
<slot name="logo"></slot>
|
|
</div>
|
|
<div class="title-wrapper">
|
|
<slot name="title"></slot>
|
|
</div>
|
|
<div class="cta-wrapper">
|
|
<slot name="cta"></slot>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("push-box", PushBox);
|