93 lines
2.0 KiB
JavaScript
93 lines
2.0 KiB
JavaScript
/**
|
|
* Push Box Component
|
|
* A promotional container with logo, title, and CTA
|
|
* Uses slots for all content to allow easy customization in HTML
|
|
*/
|
|
class PushBox extends HTMLElement {
|
|
static get observedAttributes() {
|
|
return ["background-color", "text-color"];
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
get backgroundColor() {
|
|
return (
|
|
this.getAttribute("background-color") ||
|
|
"var(--color-push-box-bg, #EBEEF4)"
|
|
);
|
|
}
|
|
|
|
get textColor() {
|
|
return this.getAttribute("text-color") || "#951D51";
|
|
}
|
|
|
|
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 ::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: #000000;
|
|
margin: 0;
|
|
}
|
|
|
|
.cta-wrapper {
|
|
color: #951D51;
|
|
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
</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);
|