@salesforcedevs/dx-components 0.0.0

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -0,0 +1,67 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import {
+    OptionWithNested,
+    AnalyticsPayload,
+    DropdownVariant
+} from "typings/custom";
+import { track } from "dxUtils/analytics";
+
+export default class DropdownOption extends LightningElement {
+    @api option!: OptionWithNested;
+    @api suppressGtmNavHeadings: boolean = false;
+    @api keyValue!: string;
+    @api active: boolean = false;
+    @api navItemLabel: String | null = null;
+    @api analyticsEvent: string | null = null;
+    @api analyticsBasePayload!: AnalyticsPayload;
+    @api indexPosition: number = 0;
+    @api variant: DropdownVariant = "base";
+
+    @api focus() {
+        const option = this.template.querySelector(".option");
+        if (!option) {
+            return;
+        }
+        option.focus();
+    }
+
+    private get className(): string {
+        return cx(
+            "option",
+            this.active && "option-active",
+            this.variant && `option-${this.variant}`
+        );
+    }
+
+    private get renderIndentedShape() {
+        return this.variant === "indented" && this.indexPosition >= 1;
+    }
+
+    private onClick(e: PointerEvent) {
+        this.dispatchEvent(
+            new CustomEvent("select", { detail: this.keyValue })
+        );
+
+        const payload: any = {
+            ...this.analyticsBasePayload,
+            clickText: this.keyValue || undefined,
+            itemTitle: this.option.label || undefined,
+            clickUrl: this.option.link?.href || undefined
+        };
+
+        const navHeading = this.navItemLabel || this.option.label || undefined;
+        const navSubHeading =
+            (this.navItemLabel ? this.option.label : undefined) || undefined;
+
+        if (!this.suppressGtmNavHeadings) {
+            payload.navHeading = navHeading;
+            payload.navSubHeading = navSubHeading;
+            payload.pageLocation = window.location.pathname;
+        }
+
+        if (this.analyticsEvent && e.currentTarget) {
+            track(e.currentTarget, this.analyticsEvent, payload);
+        }
+    }
+}

package/src/modules/dx/emptyState/emptyState.css

@@ -0,0 +1,64 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-empty-state-background: var(--dx-g-gray-95);
+    --dx-c-empty-state-image-width: 600px;
+
+    width: 100%;
+}
+
+.container {
+    position: relative;
+    background: var(--dx-c-empty-state-background);
+    border-radius: var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-2xl) 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+img {
+    width: var(--dx-c-empty-state-image-width);
+    min-width: var(--dx-c-empty-state-image-width);
+}
+
+.size-small img {
+    max-width: 250px;
+    min-width: unset;
+    width: calc(100% - 40px);
+}
+
+.text {
+    position: absolute;
+    top: 35%;
+    min-height: 15%;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    padding: 0 var(--dx-g-spacing-xl);
+}
+
+.size-small .text {
+    top: 40%;
+}
+
+.title {
+    font-size: var(--dx-g-text-2xl);
+}
+
+.size-small .title {
+    font-size: var(--dx-g-text-base);
+    white-space: nowrap;
+}
+
+.subtitle {
+    padding-top: var(--dx-g-spacing-sm);
+    color: var(--dx-g-text-heading-color);
+    font-weight: bold;
+}

package/src/modules/dx/emptyState/emptyState.html

@@ -0,0 +1,9 @@
+<template>
+    <div class={containerClassName} part="container">
+        <img src={imageAssetPath} alt="Mountains" />
+        <div class="text">
+            <h3 class="title dx-text-heading-3">{title}</h3>
+            <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
+        </div>
+    </div>
+</template>

package/src/modules/dx/emptyState/emptyState.ts

@@ -0,0 +1,20 @@
+import { LightningElement, api } from "lwc";
+import { EmptyStateSize } from "typings/custom";
+
+export default class EmptyState extends LightningElement {
+    @api title: string = "";
+    @api subtitle?: string | null = null;
+    @api size?: EmptyStateSize = "large";
+
+    get containerClassName() {
+        return `container ${
+            !this.size || this.size === "large" ? "size-large" : "size-small"
+        }`;
+    }
+
+    get imageAssetPath() {
+        return `/assets/svg/docs-empty-state${
+            this.size === "small" ? "-small" : ""
+        }.svg`;
+    }
+}

package/src/modules/dx/feature/feature.css

@@ -0,0 +1,135 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgba(0, 20, 45, 0.4);
+    --dx-c-feature-description-left-img-src: url(/assets/svg/feature-backdrop1.svg);
+    --dx-c-feature-description-max-width: 31.75rem;
+    --dx-c-feature-img-margin-left: auto;
+    --dx-c-feature-img-container-padding: 4rem;
+    --dx-c-feature-image-max-width: 100%;
+    --dx-c-feature-description-font-size: var(--dx-g-text-base);
+}
+
+.label {
+    display: inline-block;
+    padding-bottom: 15px;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    line-height: 20px;
+}
+
+.dx-text-body-2 {
+    font-size: var(--dx-c-feature-description-font-size);
+}
+
+h3 {
+    padding-bottom: var(--dx-g-spacing-lg);
+}
+
+section {
+    display: flex;
+    align-items: center;
+}
+
+.description,
+.image {
+    width: 45%;
+}
+
+.image {
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding: var(--dx-c-feature-img-container-padding);
+}
+
+.image img {
+    box-shadow: var(--dx-c-feature-img-box-shadow);
+    max-width: var(--dx-c-feature-image-max-width);
+}
+
+.body {
+    max-width: var(--dx-c-feature-description-max-width);
+}
+
+.cta-button {
+    display: block;
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.description-left {
+    flex-direction: row;
+}
+
+.description-right {
+    flex-direction: row-reverse;
+}
+
+.description-left .image {
+    margin-left: var(--dx-c-feature-img-margin-left);
+    background-image: var(--dx-c-feature-description-left-img-src);
+}
+
+.description-right .image {
+    margin-right: auto;
+    background-image: url(/assets/svg/feature-backdrop2.svg);
+}
+
+.image-display-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: -40px;
+}
+
+.image-display-container .image-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-display-container .image-container > img {
+    width: 71.75%;
+    margin-top: -7.2%;
+    margin-left: 6%;
+    height: 55%;
+    border-radius: 6px;
+}
+
+.image-display-container .image-display {
+    width: 100%;
+}
+
+/* Mobile responsiveness */
+
+@media screen and (max-width: 768px) {
+    h3 {
+        padding-bottom: var(--dx-g-spacing-md);
+    }
+
+    .body {
+        max-width: unset;
+    }
+
+    .description,
+    .image {
+        width: 100%;
+    }
+
+    .description-right,
+    .description-left {
+        flex-direction: column-reverse;
+    }
+
+    .description-right .image,
+    .description-left .image {
+        margin: auto;
+        background-image: none;
+        padding: 3rem;
+    }
+}

package/src/modules/dx/feature/feature.html

@@ -0,0 +1,33 @@
+<template>
+    <section class={sectionClass}>
+        <div class="description">
+            <h2 if:true={hasLabel} class="dx-text-heading-7 label">{label}</h2>
+            <h3 class="dx-text-heading-3">{title}</h3>
+            <div class="body dx-text-body-2">
+                <slot></slot>
+            </div>
+            <dx-button
+                class="cta-button"
+                size="large"
+                target={target}
+                icon-symbol={iconSymbol}
+                href={buttonHref}
+            >
+                {buttonLabel}
+            </dx-button>
+        </div>
+        <div if:true={isDisplay} class="image-display-container">
+            <img
+                class="image-display"
+                src="/assets/svg/featured-demo-art-blank.svg"
+                alt={title}
+            />
+            <div class="image-container">
+                <img src={imageSrc} alt={title} />
+            </div>
+        </div>
+        <div if:false={isDisplay} class="image">
+            <img src={imageSrc} alt={title} />
+        </div>
+    </section>
+</template>

package/src/modules/dx/feature/feature.ts

@@ -0,0 +1,34 @@
+import { LightningElement, api } from "lwc";
+
+export default class Feature extends LightningElement {
+    @api label!: string;
+    @api title!: string;
+    @api imageSrc!: string;
+    @api buttonHref: string | null = null;
+    @api buttonLabel: string | null = null;
+    @api descriptionPosition?: "right" | "left" = "left";
+    @api isExternalLink: boolean = false;
+    @api variant?: "display";
+
+    private get isDisplay(): boolean {
+        return this.variant === "display";
+    }
+
+    private get sectionClass(): string {
+        return this.descriptionPosition === "left"
+            ? "description-left"
+            : "description-right";
+    }
+
+    get hasLabel(): boolean {
+        return !!this.label;
+    }
+
+    get target(): string {
+        return this.isExternalLink ? "_blank" : "_self";
+    }
+
+    get iconSymbol(): string {
+        return this.isExternalLink ? "new_window" : "";
+    }
+}

package/src/modules/dx/featureGrid/featureGrid.html

@@ -0,0 +1,3 @@
+<template>
+    <slot onslotchange={onSlotChange}></slot>
+</template>

package/src/modules/dx/featureGrid/featureGrid.ts

@@ -0,0 +1,15 @@
+import { LightningElement } from "lwc";
+import { LightningSlotElement } from "typings/custom";
+
+export default class FeatureGrid extends LightningElement {
+    private onSlotChange(e: LightningSlotElement) {
+        // @ts-ignore
+        const slot = e.target;
+        slot.assignedElements().forEach(
+            (featureElement: any, index: number) => {
+                featureElement.descriptionPosition =
+                    index % 2 === 0 ? "left" : "right";
+            }
+        );
+    }
+}