@salesforcedevs/dx-components 0.0.0-alpha.0

package/src/modules/dx/modal/modal.html

@@ -0,0 +1,21 @@
+<template>
+    <div class={containerClass}>
+        <div class="modal-wrapper">
+            <div class="button-container">
+                <dx-button
+                    variant="secondary"
+                    icon-symbol="close"
+                    onclick={handleCloseModal}
+                >
+                    Close
+                </dx-button>
+            </div>
+            <slot></slot>
+        </div>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleCloseModal}
+    ></div>
+</template>

package/src/modules/dx/modal/modal.ts

@@ -0,0 +1,46 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class Modal extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    handleCloseModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("clickclose"));
+    }
+
+    private handleScroll = () => {
+        const buttonContainer =
+            this.template.querySelector(".button-container")!;
+
+        if (window.scrollY >= buttonContainer.clientHeight / 2) {
+            buttonContainer.classList.add("sticky");
+        } else {
+            buttonContainer.classList.remove("sticky");
+        }
+    };
+
+    renderedCallback() {
+        window.addEventListener("scroll", this.handleScroll);
+    }
+
+    disconnectedCallback(): void {
+        window.removeEventListener("scroll", this.handleScroll);
+    }
+}

package/src/modules/dx/modalDrawer/modalDrawer.css

@@ -0,0 +1,41 @@
+:host {
+    --dx-c-modal-drawer-z-index: 5000;
+    --dx-c-modal-padding-around: var(--dx-g-spacing-smd);
+    --dx-c-modal-height: calc(100vh - var(--dx-c-modal-padding-around) * 2);
+}
+
+dx-button {
+    display: block;
+    margin-left: auto;
+}
+
+.modal-drawer_container {
+    background-color: white;
+    height: var(--dx-c-modal-height);
+    left: 0;
+    padding: var(--dx-c-modal-padding-around);
+    position: fixed;
+    transform: translateX(-100%);
+    transition: transform 0.4s ease;
+    top: 0;
+    width: inherit;
+    z-index: var(--dx-c-modal-drawer-z-index);
+    overflow-y: auto;
+}
+
+.modal-drawer_container.modal-drawer_active {
+    transform: translateX(0);
+}
+
+.modal-drawer_overlay {
+    background-color: #195594;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    opacity: 0.62;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
+}

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -0,0 +1,11 @@
+<template>
+    <div class={containerClass}>
+        <slot></slot>
+        <dx-button onclick={handleCloseModal}>Done</dx-button>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleCloseModal}
+    ></div>
+</template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -0,0 +1,27 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class ModalDrawer extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    handleCloseModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("clickclose"));
+    }
+}

package/src/modules/dx/pagination/pagination.css

@@ -0,0 +1,51 @@
+@import "dxHelpers/reset";
+
+.dx-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0;
+    width: min-content;
+}
+
+.dx-pagination dx-button {
+    --dx-c-button-primary-color: transparent;
+}
+
+.dx-pagination.has-prev dx-button:first-of-type {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+}
+
+.dx-pagination.has-next dx-button:last-of-type {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+}
+
+.dx-pagination-pages {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+}
+
+.dx-pagination-pages button {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-lg);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-blue-vibrant-20);
+    transition: var(--dx-g-transition-hue-1x);
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.dx-pagination-pages button:last-child {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.dx-pagination-pages button:hover {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.dx-pagination-pages button.current-page {
+    background-color: var(--dx-g-blue-vibrant-50);
+    color: white;
+}

package/src/modules/dx/pagination/pagination.html

@@ -0,0 +1,45 @@
+<template>
+    <div class={rootClass}>
+        <dx-button
+            data-part-id="previous"
+            aria-label="Previous Page"
+            variant="tertiary"
+            size="large"
+            icon-symbol="back"
+            icon-position="left"
+            onclick={onPageChange}
+            disabled={previousIsDisabled}
+        ></dx-button>
+        <div class="dx-pagination-pages">
+            <template for:each={pages} for:item="item" for:index="i">
+                <button
+                    if:true={item.isCurrentPage}
+                    class="current-page"
+                    onclick={onPageChange}
+                    data-page-id={item.index}
+                    key={item.index}
+                >
+                    {item.label}
+                </button>
+                <button
+                    if:false={item.isCurrentPage}
+                    onclick={onPageChange}
+                    data-page-id={item.index}
+                    key={item.index}
+                >
+                    {item.label}
+                </button>
+            </template>
+        </div>
+        <dx-button
+            data-part-id="next"
+            aria-label="Next Page"
+            variant="tertiary"
+            size="large"
+            icon-symbol="forward"
+            icon-position="right"
+            onclick={onPageChange}
+            disabled={nextIsDisabled}
+        ></dx-button>
+    </div>
+</template>

package/src/modules/dx/pagination/pagination.ts

@@ -0,0 +1,135 @@
+import classNames from "classnames";
+import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
+
+const ANALYTICS_INFO = {
+    clickUrl: window.location.href,
+    ctaClick: false,
+    elementType: "button",
+    destinationType: "internal"
+};
+
+enum PaginationClickType {
+    Number,
+    Next,
+    Previous
+}
+
+export default class Pagination extends LightningElement {
+    @api currentPage: string = "1";
+    @api totalPages: string = "1";
+    @api pagesToShow: string = "5";
+
+    private get _currentPage() {
+        return parseInt(this.currentPage, 10);
+    }
+
+    private get _totalPages() {
+        return parseInt(this.totalPages, 10);
+    }
+
+    private get _pagesToShow() {
+        return parseInt(this.pagesToShow, 10);
+    }
+
+    private get hasPrev(): boolean {
+        return this._currentPage > 1;
+    }
+
+    private get hasNext(): boolean {
+        return this._currentPage < this._totalPages;
+    }
+
+    private get previousIsDisabled(): boolean {
+        return !this.hasPrev;
+    }
+
+    private get nextIsDisabled(): boolean {
+        return !this.hasNext;
+    }
+
+    private get rootClass(): string {
+        return classNames(
+            "dx-pagination",
+            this.hasNext && "has-next",
+            this.hasPrev && "has-prev"
+        );
+    }
+
+    private get pages(): {
+        label: string;
+        index: number;
+        isCurrentPage: boolean;
+    }[] {
+        const offset =
+            this._pagesToShow === 2 ? 2 : Math.ceil(this._pagesToShow / 2);
+        let start = this._currentPage - offset + 1;
+        let end = this._currentPage + offset - 1;
+
+        if (this._totalPages < this._pagesToShow) {
+            start = 1;
+            end = this._totalPages;
+        } else if (this._currentPage < offset) {
+            start = 1;
+            end = this._pagesToShow;
+        } else if (this._currentPage + offset > this._totalPages) {
+            start = this._totalPages - this._pagesToShow + 1;
+            end = this._totalPages;
+        }
+
+        return [
+            ...Array.from(Array(end - start + 1).keys()).map((index) => {
+                const page = index + start;
+                return {
+                    label: `${page}`,
+                    index: page,
+                    isCurrentPage: page === this._currentPage
+                };
+            })
+        ];
+    }
+
+    private onPageChange(e: Event) {
+        const page = this.calculatePage(e);
+        const clickType = this.getPaginationClickType(e);
+
+        const clickText =
+            clickType === PaginationClickType.Number
+                ? page
+                : (e.target as HTMLElement).dataset.partId;
+
+        track(e.currentTarget!, "custEv_pagination", {
+            ...ANALYTICS_INFO,
+            clickText,
+            itemTitle: clickText
+        });
+
+        this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));
+    }
+
+    private getPaginationClickType(e: Event): PaginationClickType {
+        const button = (e.target as HTMLElement).dataset.partId;
+        if (button === "previous") {
+            return PaginationClickType.Previous;
+        } else if (button === "next") {
+            return PaginationClickType.Next;
+        }
+
+        return PaginationClickType.Number;
+    }
+
+    private calculatePage(e: Event) {
+        const clickType = this.getPaginationClickType(e);
+
+        let page = 0;
+        if (clickType === PaginationClickType.Previous) {
+            page = this._currentPage - 1;
+        } else if (clickType === PaginationClickType.Next) {
+            page = this._currentPage + 1;
+        } else {
+            page = +(e.target as HTMLElement).dataset.pageId!;
+        }
+
+        return page;
+    }
+}

package/src/modules/dx/podcastHost/podcastHost.css

@@ -0,0 +1,62 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-host-img-width: 48px;
+    --dx-c-host-img-margin-right: 16px;
+}
+
+.container {
+    background: white;
+    box-shadow: var(--dx-g-box-shadow-sm);
+    border-radius: 16px;
+    padding: 36px;
+    overflow: hidden;
+}
+
+.host-presentation,
+.host-img {
+    display: flex;
+}
+
+.host-img {
+    margin-right: var(--dx-c-host-img-margin-right);
+    align-items: center;
+}
+
+.host-img > img {
+    border-radius: 99999px;
+    width: var(--dx-c-host-img-width);
+}
+
+.host-bio > p {
+    margin: 16px 0;
+}
+
+.dx-text-label-2 {
+    color: var(--dx-g-gray-30);
+}
+
+@media (min-width: 640px) {
+    .host {
+        position: relative;
+    }
+
+    .host dx-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .host-bio {
+        margin-left: calc(
+            var(--dx-c-host-img-width) + var(--dx-c-host-img-margin-right)
+        );
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+}

package/src/modules/dx/podcastHost/podcastHost.html

@@ -0,0 +1,28 @@
+<template>
+    <div class="container">
+        <div class="host">
+            <div class="host-presentation">
+                <div class="host-img">
+                    <img src={imgSrc} alt={fullName} />
+                </div>
+                <h2>
+                    <span class="dx-text-label-2">Hosted by</span>
+                    <br />
+                    <span class="dx-text-heading-4">{fullName}</span>
+                </h2>
+            </div>
+            <div class="host-bio">
+                <p>{bio}</p>
+            </div>
+            <dx-button
+                href={twitterHref}
+                target="_blank"
+                variant="inline"
+                icon-symbol="twitter"
+                icon-sprite="brand"
+            >
+                Follow {firstName} on Twitter
+            </dx-button>
+        </div>
+    </div>
+</template>

package/src/modules/dx/podcastHost/podcastHost.ts

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+
+export default class PodcastHost extends LightningElement {
+    @api firstName: string = "";
+    @api lastName: string = "";
+    @api imgSrc: string = "";
+    @api twitterHref: string = "";
+    @api bio: string = "";
+
+    get fullName() {
+        return `${this.firstName} ${this.lastName}`;
+    }
+}

package/src/modules/dx/podcastPlayer/podcastPlayer.css

@@ -0,0 +1,10 @@
+audio {
+    display: block;
+    width: 100%;
+    max-height: 40px;
+    border-radius: 3px;
+}
+
+audio:focus {
+    outline: none;
+}

package/src/modules/dx/podcastPlayer/podcastPlayer.html

@@ -0,0 +1,3 @@
+<template>
+    <audio controls src={src}></audio>
+</template>

package/src/modules/dx/podcastPlayer/podcastPlayer.ts

@@ -0,0 +1,5 @@
+import { LightningElement, api } from "lwc";
+
+export default class PodcastPlayer extends LightningElement {
+    @api src: string = "";
+}

package/src/modules/dx/popover/popover.css

@@ -0,0 +1,66 @@
+@import "dxHelpers/reset";
+
+:host {
+    --popover-border-radius: var(
+        --dx-c-popover-border-radius,
+        var(--dx-g-spacing-sm)
+    );
+    --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
+    --popover-padding: var(--dx-g-spacing-sm);
+}
+
+.popover-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.popover {
+    background: white;
+    border: var(--popover-border);
+    box-shadow: var(--dx-g-box-shadow-lg);
+    border-radius: var(--popover-border-radius);
+    width: 168px;
+    max-width: calc(100vw - var(--dx-g-spacing-lg));
+    max-height: 65vh;
+    padding: var(--popover-padding);
+    overflow-y: auto;
+    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition-delay: 0.02s;
+    transform: translateY(var(--dx-g-spacing-xs));
+    opacity: 0;
+}
+
+.popover-container_open {
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.popover-container_open .popover {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.popover-overridewidth {
+    max-width: unset;
+}
+
+.popover-fullwidth {
+    width: unset;
+    max-width: unset;
+}
+
+.popover-offset-small {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.popover-offset-medium {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.popover-small {
+    width: 136px;
+}

package/src/modules/dx/popover/popover.html

@@ -0,0 +1,16 @@
+<template>
+    <slot name="control" onslotchange={onSlotChange}></slot>
+    <div class={containerClassName}>
+        <div
+            class={className}
+            style={style}
+            aria-label={ariaLabel}
+            part="content"
+            onkeydown={onKeyDown}
+        >
+            <div class="popover-content" if:true={_rendered}>
+                <slot name="content"></slot>
+            </div>
+        </div>
+    </div>
+</template>