@salesforcedevs/dx-components 0.0.0-alpha.0

package/src/modules/dx/typeBadge/typeBadge.css

@@ -0,0 +1,74 @@
+@import "dxHelpers/reset";
+
+.typebadge {
+    align-items: center;
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--dx-c-type-badge-border-radius, var(--border-radius));
+    color: var(--dx-c-type-badge-color, var(--color));
+    display: flex;
+    justify-content: center;
+    height: var(--dx-c-type-badge-height, var(--height));
+    text-align: center;
+    white-space: nowrap;
+    width: min-content;
+}
+
+.typebadge.typebadge_metadata {
+    --background: var(--dx-g-cloud-blue-natural-90);
+    --border-radius: var(--dx-g-spacing-xs);
+    --color: var(--dx-g-blue-vibrant-20);
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
+    font-family: var(--dx-g-font-display);
+    font-size: 10px;
+    letter-spacing: 0.6px;
+    text-transform: var(--dx-c-type-badge-text-transform, uppercase);
+    padding: 0 var(--horizontal-spacing);
+}
+
+.typebadge.typebadge_content-type {
+    --background: var(--sds-g-gray-3);
+    --border-radius: var(--dx-g-spacing-smd);
+    --color: var(--sds-g-gray-10);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-smd);
+    --vertical-spacing: var(--dx-g-spacing-xs);
+
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--vertical-spacing) var(--horizontal-spacing);
+}
+
+.typebadge.typebadge_content-type.size-small {
+    --height: var(--dx-g-spacing-mlg);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
+    font-size: 10px;
+}
+
+.typebadge.typebadge_metadata.size-small {
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-xs);
+
+    font-size: 8px;
+    letter-spacing: 0.5px;
+}
+
+.typebadge.typebadge_metadata span {
+    transform: translateY(2px);
+    width: var(--dx-c-type-badge-text-width, unset);
+}
+
+.typebadge.typebadge_metadata.size-small span {
+    transform: translateY(1px);
+}
+
+@media screen and (max-width: 768px) {
+    .typebadge.typebadge_metadata:not(.size-small) {
+        height: var(--dx-g-spacing-lg);
+        padding: 0 var(--dx-g-spacing-sm);
+        font-size: var(--dx-g-text-2xs);
+    }
+}

package/src/modules/dx/typeBadge/typeBadge.html

@@ -0,0 +1,5 @@
+<template>
+    <div class={className} style={style}>
+        <span>{value}</span>
+    </div>
+</template>

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -0,0 +1,65 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import {
+    TypeBadgeColor,
+    Color,
+    TypeBadgeSize,
+    BadgeType,
+    Brand
+} from "typings/custom";
+import { colorToDxColors } from "dxUtils/css";
+
+const DEFAULT_TYPE = "typebadge_metadata";
+const VALID_BRANDS: Array<Brand> = [
+    "employees",
+    "marketing",
+    "partners",
+    "commerce",
+    "sales",
+    "success",
+    "integration",
+    "platform",
+    "industries",
+    "learning",
+    "service",
+    "analytics"
+];
+
+export default class TypeBadge extends LightningElement {
+    @api size: TypeBadgeSize = "default";
+    @api value: string = "";
+    @api color?: TypeBadgeColor = "default";
+    @api type?: BadgeType = "metadata";
+
+    private get className(): string {
+        return cx(
+            "typebadge",
+            `size-${this.size}`,
+            (this.type && `typebadge_${this.type}`) || DEFAULT_TYPE
+        );
+    }
+
+    private get style(): string {
+        if (VALID_BRANDS.includes(this.color as Brand)) {
+            return this.buildStyleString({
+                background: `--dx-g-brand-${this.color}-color-background`,
+                color: `--dx-g-brand-${this.color}-color`
+            });
+        }
+        const variables = colorToDxColors(this.color as Color);
+        if (variables) {
+            return this.buildStyleString(variables);
+        }
+        return "";
+    }
+
+    private buildStyleString({
+        background,
+        color
+    }: {
+        background: string;
+        color: string;
+    }): string {
+        return `--color: var(${color}); --background: var(${background})`;
+    }
+}

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.css

@@ -0,0 +1,12 @@
+.badges-group {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.badges-group > dx-type-badge {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.badges-group > dx-type-badge:not(:last-child) {
+    margin-right: var(--dx-g-spacing-sm);
+}

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.html

@@ -0,0 +1,11 @@
+<template>
+    <div class="badges-group">
+        <template for:each={badges} for:item="badge">
+            <dx-type-badge
+                key={badge}
+                size={size}
+                value={badge}
+            ></dx-type-badge>
+        </template>
+    </div>
+</template>

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.ts

@@ -0,0 +1,18 @@
+import { LightningElement, api } from "lwc";
+import { normalizeToArray } from "dxUtils/normalizers";
+import { TypeBadgeSize } from "typings/custom";
+
+export default class TypeBadgeGroup extends LightningElement {
+    @api size: TypeBadgeSize = "medium";
+
+    @api
+    get badges() {
+        return this._badges;
+    }
+    set badges(value: string[] | string | null) {
+        this._badges = normalizeToArray(value);
+    }
+
+    // can be an array of strings or a comma delimited string
+    private _badges!: string | string[] | null;
+}

package/src/modules/dx/vimeoPlayer/vimeoPlayer.css

@@ -0,0 +1 @@
+@import "dxHelpers/reset";

package/src/modules/dx/vimeoPlayer/vimeoPlayer.html

@@ -0,0 +1,3 @@
+<template>
+    <div class="video-container" lwc:dom="manual"></div>
+</template>

package/src/modules/dx/vimeoPlayer/vimeoPlayer.ts

@@ -0,0 +1,31 @@
+import { LightningElement, api } from "lwc";
+import Player from "@vimeo/player";
+import { Options, Player as PlayerType } from "vimeo__player";
+
+export default class VimeoPlayer extends LightningElement {
+    @api videoId!: number;
+    @api
+    get options() {
+        return this._options;
+    }
+    set options(value: any) {
+        this._options = JSON.parse(value);
+    }
+
+    private player!: PlayerType;
+    private _options: Options = {
+        responsive: true,
+        title: false
+    };
+
+    renderedCallback(): void {
+        const videoContainer = this.template.querySelector(
+            ".video-container"
+        ) as HTMLElement;
+
+        this.player = new Player(videoContainer, {
+            id: this.videoId,
+            ...this.options
+        });
+    }
+}

package/src/modules/dxBaseElements/archiveCard/archiveCard.ts

@@ -0,0 +1,35 @@
+import { LightningElement, api } from "lwc";
+import { LinkTarget, Color } from "typings/custom";
+
+const MOBILE_QUERY = "(max-width: 640px)";
+
+export abstract class ArchiveCard extends LightningElement {
+    @api contentType: "Blog" | "Podcast" = "Blog";
+    @api href!: string;
+    @api title!: string;
+    @api target: LinkTarget = "_self";
+
+    private matchMedia!: MediaQueryList;
+    protected mobile = false;
+
+    protected get badgeColor(): Color {
+        return this.contentType === "Blog" ? "teal" : "blue";
+    }
+
+    connectedCallback(): void {
+        this.matchMedia = window.matchMedia(MOBILE_QUERY);
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback(): void {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.mobile = e.matches);
+
+    protected get badgeSize(): string {
+        return (this.mobile && "small") || "default";
+    }
+}

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -0,0 +1,205 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
+
+const VALID_BRANDS = [
+    "analytics",
+    "commerce",
+    "employees",
+    "industries",
+    "integration",
+    "learning",
+    "marketing",
+    "partners",
+    "platform",
+    "revenue",
+    "sales",
+    "service",
+    "success"
+];
+
+export const ANALYTICS_INFO = {
+    clickText: "Sign Up",
+    itemTitle: "Sign Up Header Button",
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
+
+export abstract class HeaderBase extends LightningElement {
+    @api bailHref?: string | null = null;
+    @api bailLabel?: string | null = null;
+    @api brand: Brand | null = null;
+    @api coveoOrganizationId: string | null = null;
+    @api coveoPublicAccessToken: string | null = null;
+    @api coveoSearchHub: string | null = null;
+    @api coveoSearchPipeline: string | null = null;
+    @api signupLink?: string | null = null;
+    @api href = null;
+    @api subtitle!: string;
+    @api title: string = "Salesforce";
+    @api version?: string | null = null;
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">Share your feedback</a>about our new site.</span>';
+
+    @api
+    get navItems() {
+        return this._navItems;
+    }
+
+    set navItems(value) {
+        this._navItems = toJson(value);
+    }
+
+    @api
+    get versions() {
+        return this._versions;
+    }
+    set versions(value) {
+        this._versions = toJson(value);
+    }
+
+    private _navItems!: OptionWithNested[];
+    private _versions!: OptionWithLink[];
+    private matchMedia!: MediaQueryList;
+    protected mobile: boolean = false;
+    private mobileNavMenuValue: string | null = null;
+    private showMobileNavMenu: boolean = false;
+    private showNavScrollShadow: boolean = false;
+    protected isSearchOpen: boolean = false;
+
+    get url() {
+        return this.href ? new URL(this.href!) : window.location;
+    }
+
+    get hasBailLink(): boolean {
+        return !!(this.bailHref && this.bailLabel);
+    }
+
+    get hasSearch() {
+        return (
+            this.coveoOrganizationId &&
+            this.coveoPublicAccessToken &&
+            this.coveoSearchHub &&
+            this.coveoSearchPipeline
+        );
+    }
+
+    get pathname() {
+        return this.url.pathname;
+    }
+
+    get className() {
+        return cx(
+            this.hasNavItems && "has-nav-items",
+            this.showMobileNavMenu && "state-show-mobile-nav",
+            this.showNavScrollShadow &&
+                !this.showMobileNavMenu &&
+                "has-navscrollshadow",
+            this.additionalClasses()
+        );
+    }
+
+    get versionLabel() {
+        const selectedVersion = (this.versions || []).find(
+            (v) => v.id === this.version
+        );
+        return selectedVersion ? selectedVersion.label : "";
+    }
+
+    get mobileMenuIconSymbol() {
+        return this.showMobileNavMenu ? "close" : "rows";
+    }
+
+    get isValidBrand() {
+        return this.brand && VALID_BRANDS.includes(this.brand);
+    }
+
+    get hasNavItems(): boolean {
+        return this.navItems && this.navItems.length > 0;
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${this.mobileBreakpoint()})`
+        );
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+        this.hashLinkScroll();
+    }
+
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    // Temporary solution to restore native anchor scrolling
+    private hashLinkScroll() {
+        const hash = window.location.hash;
+
+        if (hash !== "") {
+            // Push onto callback queue so it runs after the DOM is updated
+            setTimeout(() => {
+                const id = hash.replace("#", "");
+                const element = document.getElementById(id);
+                if (element && element.scrollIntoView) {
+                    element.scrollIntoView();
+                }
+            }, 0);
+        }
+    }
+
+    private handleStateChange(event: CustomEvent<boolean>) {
+        event.stopPropagation();
+        this.isSearchOpen = event.detail;
+    }
+
+    onVersionChange(e: CustomEvent) {
+        this.dispatchEvent(
+            new CustomEvent("versionchange", {
+                detail: e.detail
+            })
+        );
+    }
+
+    onRequestOpenNavMenu(e: { detail: string }) {
+        this.mobileNavMenuValue = e.detail;
+        this.showMobileNavMenu = true;
+    }
+    private onMobileNavMenuChange(e: { detail: string }) {
+        this.mobileNavMenuValue = e.detail;
+    }
+    private toggleMobileNavMenu() {
+        this.showMobileNavMenu = !this.showMobileNavMenu;
+    }
+    private closeMobileNavMenu() {
+        this.showMobileNavMenu = false;
+    }
+
+    private onNavScroll(e: Event) {
+        this.showNavScrollShadow =
+            (<HTMLElement>e.currentTarget).scrollLeft > 4;
+    }
+    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (!e.matches) {
+            this.mobile = false;
+            this.closeMobileNavMenu();
+        } else {
+            this.mobile = true;
+        }
+    };
+
+    private handleSignUpClick(e: PointerEvent) {
+        track(e.currentTarget!, "custEv_signupStart", {
+            ...ANALYTICS_INFO,
+            clickUrl: this.signupLink
+        });
+    }
+
+    protected additionalClasses(): string {
+        return "";
+    }
+
+    protected abstract mobileBreakpoint(): string;
+}

package/src/modules/dxBaseElements/matchMediaElement/matchMediaElement.ts

@@ -0,0 +1,59 @@
+import { LightningElement } from "lwc";
+import {
+    BREAKPOINT_MOBILE,
+    BREAKPOINT_TABLET,
+    DEVICE_DESKTOP,
+    DEVICE_TABLET,
+    DEVICE_MOBILE
+} from "dxUtils/constants";
+
+const boilerplate = "screen and ";
+const BREAKPOINT_QUERY_MOBILE = `${boilerplate}(max-width: ${BREAKPOINT_MOBILE})`;
+const BREAKPOINT_QUERY_TABLET = `${boilerplate}(min-width: ${BREAKPOINT_MOBILE}) and (max-width: ${BREAKPOINT_TABLET})`;
+const BREAKPOINT_QUERY_DESKTOP = `${boilerplate}(min-width: ${BREAKPOINT_TABLET})`;
+
+const breakpointConfigs = [
+    { name: DEVICE_MOBILE, query: BREAKPOINT_QUERY_MOBILE },
+    { name: DEVICE_TABLET, query: BREAKPOINT_QUERY_TABLET },
+    { name: DEVICE_DESKTOP, query: BREAKPOINT_QUERY_DESKTOP }
+];
+
+export abstract class MatchMediaElement extends LightningElement {
+    private deviceType: DEVICE_MOBILE | DEVICE_TABLET | DEVICE_DESKTOP =
+        DEVICE_DESKTOP;
+    private matches: {
+        match: MediaQueryList;
+        callback: (e: MediaQueryListEvent | MediaQueryList) => void;
+    }[] = [];
+
+    private get isMobile(): boolean {
+        return this.deviceType === DEVICE_MOBILE;
+    }
+    private get isTablet(): boolean {
+        return this.deviceType === DEVICE_TABLET;
+    }
+    private get isDesktop(): boolean {
+        return this.deviceType === DEVICE_DESKTOP;
+    }
+
+    connectedCallback() {
+        this.matches = breakpointConfigs.map(
+            ({ name, query }: { name: string; query: string }) => {
+                const match = window.matchMedia(query);
+                const callback = (e: MediaQueryListEvent | MediaQueryList) => {
+                    if (e.matches) {
+                        this.deviceType = name;
+                    }
+                };
+                match.addEventListener("change", callback);
+                return { match, callback };
+            }
+        );
+    }
+
+    disconnectedCallback() {
+        this.matches.forEach(({ match, callback }) =>
+            match.removeEventListener("change", callback)
+        );
+    }
+}

package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts

@@ -0,0 +1,65 @@
+import { LightningElement } from "lwc";
+
+export const HEIGHT_OF_SIDEBAR_ITEM = 32;
+export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
+
+export class SidebarBase extends LightningElement {
+    _sidebarContent: HTMLElement | null = null;
+
+    selectedElement: HTMLElement | null = null;
+    timerId: ReturnType<typeof setTimeout> | null = null;
+
+    get sidebarContent() {
+        if (!this._sidebarContent) {
+            this._sidebarContent = this.template.querySelector(
+                ".sidebar-content-tree"
+            );
+        }
+        return this._sidebarContent;
+    }
+
+    renderedCallback(): void {
+        /**
+         * Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done
+         */
+
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+        }
+        this.timerId = setTimeout(
+            this.renderedCallbackWithTimeout,
+            WAIT_TIME_BEFORE_SCROLL_IN_MS
+        );
+    }
+
+    disconnectedCallback(): void {
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+        }
+    }
+
+    renderedCallbackWithTimeout = () => {
+        this.scrollToSelectedItem();
+    };
+
+    private onSelectedItemRendered = (event: CustomEvent) => {
+        event.stopPropagation();
+        this.selectedElement = event.detail.element;
+    };
+
+    /*Scroll to selected tree item */
+    private scrollToSelectedItem() {
+        if (this.selectedElement && this.sidebarContent) {
+            const scrollHeight: number =
+                this.selectedElement.getBoundingClientRect().bottom -
+                this.sidebarContent.getBoundingClientRect().bottom + // We need to remove parent bottom
+                HEIGHT_OF_SIDEBAR_ITEM * 3 + // add height of 3 more items so that user can see at least three more items after selected item
+                this.sidebarContent.offsetTop; // We need to add sidebar offsetTop value as scrollTo will consider it
+            this.sidebarContent.scrollTo({
+                top: scrollHeight,
+                behavior: "smooth"
+            });
+            this.selectedElement = null;
+        }
+    }
+}

package/src/modules/dxHelpers/animations/animations.css

@@ -0,0 +1,15 @@
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(var(--dx-g-spacing-sm));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+:host {
+    --dx-g-animation-fadein: fadein 0.2s linear forwards;
+}

package/src/modules/dxHelpers/button/button.css

@@ -0,0 +1,4 @@
+:host {
+    --dx-g-button-heading-color-hover: var(--dx-g-blue-vibrant-40);
+    --dx-g-button-image-filter-hover: brightness(90%);
+}