@salesforcedevs/mrkt-components 0.0.0-alpha.0

package/src/modules/mrkt/sectionHeader/sectionHeader.css

@@ -0,0 +1,165 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --image-aspect-ratio: 1.43554006969;
+    --image-width: 350px;
+    --image-height: calc(var(--image-width) / var(--image-aspect-ratio));
+    --image-overlap: 44px;
+    --image-bottom: calc(var(--image-height) - var(--image-overlap));
+    --image-inset: calc(-1 * var(--dx-g-spacing-md));
+    --overlap-padding-top: calc(
+        var(--image-height) - var(--image-overlap) + var(--image-inset)
+    );
+    --icon-padding: var(--dx-g-spacing-lg);
+    --mrkt-c-section-header-padding-top: 76px;
+    --mrkt-c-section-header-padding-bottom: var(--dx-g-spacing-5xl);
+}
+
+.section-header {
+    position: relative;
+    background: white;
+    padding: var(--mrkt-c-section-header-padding-top) 0
+        var(--mrkt-c-section-header-padding-bottom) 0;
+}
+
+.section-header.has-images {
+    --mrkt-c-section-header-padding-top: var(--dx-g-spacing-lg);
+}
+
+.section-header.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
+.section-header.light-gradient {
+    background: linear-gradient(
+        180deg,
+        rgba(234, 245, 254) 42.08%,
+        rgba(234, 245, 254, 0) 100%
+    );
+}
+
+.header-img-container {
+    width: 100%;
+    margin-bottom: calc(-1 * var(--dx-g-spacing-xl));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: hidden;
+}
+
+.header-img {
+    width: 100%;
+    min-width: var(--dx-g-breakpoint-sm);
+}
+
+.page-margin-img-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.section-header:not(.overlap-images) .page-margin-img-container {
+    margin-bottom: var(--image-inset);
+}
+
+.page-margin-img-container img {
+    aspect-ratio: var(--image-aspect-ratio);
+    width: 350px;
+    max-width: 50%;
+}
+
+.text-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    z-index: 1;
+    text-align: center;
+}
+
+.section-header .title,
+.section-header .subtitle {
+    max-width: 768px;
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-icon-size: var(--dx-g-icon-size-lg-b);
+    --dx-c-icon-badge-color: white;
+    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-20);
+
+    margin-bottom: var(--icon-padding);
+}
+
+.section-header.has-subtitle .title {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.section-header.dark .title,
+.section-header.dark .subtitle {
+    color: white;
+}
+
+.section-header.dark dx-icon-badge {
+    --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-icon-badge-background-color: white;
+}
+
+@media (min-width: 1500px) {
+    .header-img {
+        padding: 0 var(--dx-g-page-padding-horizontal);
+    }
+}
+
+@media (min-width: 1024px) {
+    .section-header.overlap-images .page-margin-img-container {
+        position: absolute;
+        bottom: calc(100% - var(--image-bottom));
+        left: 0;
+        z-index: 0;
+    }
+
+    .section-header.section-header.overlap-images {
+        padding-top: var(--overlap-padding-top);
+    }
+}
+
+@media (max-width: 768px) {
+    :host {
+        --image-width: 50vw;
+    }
+
+    .header-img-container {
+        margin-bottom: 0;
+    }
+
+    .section-header .title {
+        font-size: var(--dx-g-text-2xl);
+        letter-spacing: -0.4px;
+        line-height: 40px;
+    }
+
+    .section-header.has-subtitle .title {
+        margin-bottom: var(--dx-g-spacing-mlg);
+    }
+
+    .section-header .subtitle {
+        font-size: var(--dx-g-text-lg);
+        letter-spacing: -0.1px;
+        line-height: 28px;
+    }
+}
+
+@media (max-width: 640px) {
+    .header-img {
+        width: var(--dx-g-breakpoint-sm);
+    }
+}
+
+@media (max-width: 360px) {
+    :host {
+        --overlap-padding-top: var(--mrkt-c-section-header-padding-top);
+    }
+}

package/src/modules/mrkt/sectionHeader/sectionHeader.html

@@ -0,0 +1,24 @@
+<template>
+    <div class={className}>
+        <div class="header-img-container" if:true={imgSrc}>
+            <img class="header-img" src={imgSrc} alt="" />
+        </div>
+        <div class="page-margin-img-container" if:true={hasPageMarginGraphics}>
+            <img src={imgSrcLeft} alt="" />
+            <img src={imgSrcRight} alt="" />
+        </div>
+        <div class="text-container">
+            <dx-icon-badge
+                if:true={hasIcon}
+                color={iconColor}
+                symbol={iconSymbol}
+                sprite={iconSprite}
+                background-size="large"
+            ></dx-icon-badge>
+            <h2 if:true={title} class="title dx-text-heading-2b">{title}</h2>
+            <span if:true={subtitle} class="subtitle dx-text-body-1">
+                {subtitle}
+            </span>
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/sectionHeader/sectionHeader.ts

@@ -0,0 +1,35 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+
+export default class SectionHeader extends LightningElement {
+    @api dark?: boolean;
+    @api iconColor?: string;
+    @api iconSymbol?: string;
+    @api iconSprite?: string = "utility";
+    @api imgSrc?: string;
+    @api imgSrcLeft?: string;
+    @api imgSrcRight?: string;
+    @api overlapImages?: boolean = false;
+    @api lightGradient?: boolean;
+    @api subtitle?: string;
+    @api title?: string;
+
+    private get hasPageMarginGraphics(): boolean {
+        return !!this.imgSrcLeft && !!this.imgSrcRight;
+    }
+
+    private get hasIcon(): boolean {
+        return !!this.title && !!this.iconSymbol;
+    }
+
+    private get className(): string {
+        return cx(
+            "section-header",
+            this.dark && "dark",
+            this.lightGradient && "light-gradient",
+            this.subtitle && "has-subtitle",
+            this.overlapImages && "overlap-images",
+            this.hasPageMarginGraphics && "has-images"
+        );
+    }
+}

package/src/modules/mrkt/socials/socials.css

@@ -0,0 +1,65 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.socials {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+    padding: var(--dx-g-spacing-3xl) var(--dx-g-page-padding-horizontal);
+}
+
+dx-hr {
+    /* --dx-c-hr-padding-horizontal: 0; */
+    width: 100%;
+    max-width: 1012px;
+    margin-bottom: var(--dx-g-spacing-3xl);
+}
+
+.socials-container {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, min-content));
+    grid-gap: 100px;
+    justify-content: center;
+}
+
+a {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+a > dx-icon-badge {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-xl);
+    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-md);
+    --dx-c-icon-badge-background-color: var(--dx-g-text-heading-color);
+    --dx-c-icon-badge-transition: var(--dx-g-transition-hue-1x);
+}
+
+a > span {
+    padding-top: var(--dx-g-spacing-xs);
+    color: var(--dx-g-text-heading-color) !important;
+    white-space: nowrap;
+}
+
+a:hover > dx-icon-badge {
+    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
+}
+
+@media (max-width: 1024px) {
+    .socials-container {
+        grid-gap: var(--dx-g-spacing-3xl);
+    }
+}
+
+@media (max-width: 768px) {
+    .socials-container {
+        grid-template-columns: auto;
+        grid-gap: var(--dx-g-spacing-2xl);
+    }
+}

package/src/modules/mrkt/socials/socials.html

@@ -0,0 +1,16 @@
+<template>
+    <div class="socials">
+        <dx-hr text={title} spacing="none"></dx-hr>
+        <div class="socials-container">
+            <template for:each={items} for:item="item">
+                <a key={item.id} href={item.link.href}>
+                    <dx-icon-badge
+                        sprite="brand"
+                        symbol={item.iconSymbol}
+                    ></dx-icon-badge>
+                    <span class="dx-text-body-2">{item.label}</span>
+                </a>
+            </template>
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/socials/socials.ts

@@ -0,0 +1,17 @@
+import { api, LightningElement } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
+
+export default class Socials extends LightningElement {
+    @api title: string = "Our Socials";
+
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = toJson(value);
+    }
+
+    private _items: OptionWithLink[] = [];
+}

package/src/modules/mrkt/subNavBar/subNavBar.css

@@ -0,0 +1,141 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --subnav-height: 60px;
+    --subnav-height-neg: calc(-1 * var(--subnav-height));
+}
+
+.subnav {
+    position: sticky;
+    top: -1px; /* necessary for intersection observer ux */
+    left: 0;
+    width: 100%;
+    height: var(--subnav-height);
+    background: white;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    z-index: var(--dx-g-z-index-100);
+    transition: var(--dx-g-transition-box-shadow-1x);
+}
+
+.subnav::after {
+    content: "";
+    z-index: 1;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    background: var(--dx-g-gray-95);
+}
+
+nav {
+    height: 100%;
+    overflow-y: auto;
+    margin: 0 var(--dx-g-spacing-smd);
+    z-index: 2;
+}
+
+ul {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+li {
+    height: 100%;
+    text-decoration: none;
+}
+
+ul > li:not(:last-of-type) {
+    margin-right: var(--dx-g-text-3xl);
+}
+
+a {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+}
+
+a::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0;
+    background: var(--dx-g-blue-vibrant-50);
+    transition: height 0.15s ease-in, var(--dx-g-transition-hue-1x);
+}
+
+a.active::after {
+    height: 4px;
+}
+
+a > dx-icon-badge {
+    --dx-c-icon-badge-size: 30px;
+    --dx-c-icon-badge-icon-size: 17px;
+    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-icon-badge-transition: var(--dx-g-transition-hue-1x);
+
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+a.active > dx-icon-badge {
+    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-50);
+}
+
+a.active > dx-icon-badge::part(badge),
+a:not(.active):hover > dx-icon-badge::part(badge) {
+    --dx-c-icon-badge-color: white;
+}
+
+a:not(.active):hover > dx-icon-badge::part(badge) {
+    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
+}
+
+/* accounts for font gap */
+a > span {
+    transform: translateY(2px);
+}
+
+dx-button {
+    flex-shrink: 0;
+}
+
+.subnav.is-sticky {
+    box-shadow: 0 0 2px rgba(24, 24, 24, 0.08),
+        0 2px 4px 1px rgba(24, 24, 24, 0.16);
+}
+
+.subnav.is-sticky dx-button {
+    visibility: visible;
+}
+
+@media (min-width: 640px) {
+    dx-button {
+        visibility: hidden;
+    }
+}
+
+@media (max-width: 1024px) {
+    ul > li:not(:last-of-type) {
+        margin-right: var(--dx-g-spacing-md);
+    }
+
+    a.active {
+        color: var(--dx-g-blue-vibrant-50) !important;
+    }
+
+    a:not(.active):hover {
+        color: var(--dx-g-blue-vibrant-40);
+    }
+}

package/src/modules/mrkt/subNavBar/subNavBar.html

@@ -0,0 +1,37 @@
+<template>
+    <div class="subnav">
+        <template if:false={isMobile}>
+            <dx-button
+                variant="tertiary"
+                icon-symbol="arrowup"
+                onclick={scrollToTop}
+            >
+                Back to Top
+            </dx-button>
+        </template>
+        <template if:true={isMobile}>
+            <dx-button
+                variant="tertiary"
+                icon-symbol="arrowup"
+                onclick={scrollToTop}
+            ></dx-button>
+        </template>
+        <nav role="navigation" aria-label="Secondary Navigation">
+            <ul>
+                <template for:each={navItems} for:item="navItem">
+                    <li key={navItem.id}>
+                        <a class={navItem.className} href={navItem.link.href}>
+                            <dx-icon-badge
+                                symbol={navItem.iconSymbol}
+                                color={navItem.iconColor}
+                                if:true={isDesktop}
+                            ></dx-icon-badge>
+                            <span>{navItem.label}</span>
+                        </a>
+                    </li>
+                </template>
+            </ul>
+        </nav>
+        <dx-button href={subscribeHref}>Subscribe</dx-button>
+    </div>
+</template>

package/src/modules/mrkt/subNavBar/subNavBar.ts

@@ -0,0 +1,130 @@
+import { api } from "lwc";
+import cx from "classnames";
+import { MatchMediaElement } from "dxBaseElements/matchMediaElement";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+
+const SECTION_OBSERVER_OPTIONS = {
+    root: document,
+    threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
+};
+
+export default class SubNavBar extends MatchMediaElement {
+    @api subscribeHref!: string;
+    @api containerQuery: string = "body";
+
+    @api
+    get navItems() {
+        return this._navItems.map(this.normalizeItem);
+    }
+    set navItems(value) {
+        this._navItems = toJson(value);
+    }
+
+    private _navItems!: OptionWithLink[];
+    private sectionIntersectionEntryMap:
+        | {
+              [id: string]: IntersectionObserverEntry;
+          }
+        | {} = {};
+    private sectionsObserver!: IntersectionObserver;
+    private stickyNavObserver!: IntersectionObserver;
+
+    private get containerElement(): HTMLElement {
+        return document.querySelector(this.containerQuery) as HTMLElement;
+    }
+
+    private get hashIds(): string[] {
+        return this.navItems.map((item: OptionWithLink) =>
+            item.link.href.replace("#", "")
+        );
+    }
+
+    private get activeHash(): string | null {
+        const activeEntry = Object.values(
+            this.sectionIntersectionEntryMap
+        ).reduce(
+            (
+                acc: IntersectionObserverEntry | null,
+                val: IntersectionObserverEntry
+            ) => {
+                if (
+                    val.intersectionRatio > 0 &&
+                    (!acc || val.intersectionRatio > acc.intersectionRatio)
+                ) {
+                    return val;
+                }
+                return acc;
+            },
+            null
+        );
+        return activeEntry ? `#${activeEntry?.target?.id}` : null;
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.observeSectionIntersections();
+    }
+
+    renderedCallback(): void {
+        this.observeStickyNav();
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.sectionsObserver?.disconnect();
+        this.stickyNavObserver?.disconnect();
+    }
+
+    normalizeItem = (item: OptionWithLink): object => ({
+        ...item,
+        className: cx(
+            "nav-item",
+            "dx-text-heading-6",
+            this.activeHash === item?.link?.href && "active"
+        )
+    });
+
+    private observeStickyNav() {
+        const el = this.template.querySelector(".subnav");
+        if (el && !this.stickyNavObserver) {
+            this.stickyNavObserver = new IntersectionObserver(
+                ([e]) => {
+                    e.target.classList.toggle(
+                        "is-sticky",
+                        e.intersectionRatio < 1
+                    );
+                },
+                { threshold: [1] }
+            );
+            this.stickyNavObserver.observe(el);
+        }
+    }
+
+    private observeSectionIntersections() {
+        this.sectionsObserver = new IntersectionObserver(
+            (entries) =>
+                entries.forEach((entry) => {
+                    this.sectionIntersectionEntryMap = {
+                        ...this.sectionIntersectionEntryMap,
+                        [entry.target.id]: entry
+                    };
+                }),
+            SECTION_OBSERVER_OPTIONS
+        );
+        this.hashIds.forEach((id) => {
+            const el = document.getElementById(id);
+            if (el) {
+                this.sectionsObserver.observe(el);
+            }
+        });
+    }
+
+    private scrollToTop() {
+        this.containerElement.scroll({
+            top: 0,
+            left: 0,
+            behavior: "smooth"
+        });
+    }
+}