@salesforcedevs/dx-components 0.0.0

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,123 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Breadcrumb, OptionWithNested } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+
+type LabelMap = { [href: string]: string };
+type NormalizedBreadcrumb = Breadcrumb & { last: boolean; asLink: boolean };
+
+const toLabel = (val: string) => {
+    const noFileExt = val.replace(/\..+$/, "");
+    const spaces = noFileExt.replace(/-/g, " ");
+    const titlecase = spaces.replace(
+        /\w\S*/g,
+        (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
+    );
+    return titlecase;
+};
+
+export default class Breadcrumbs extends LightningElement {
+    @api ariaLabel: string = "Navigation Breadcrumbs";
+    @api baseHref: string = "/";
+    @api navItems: OptionWithNested[] = [];
+    @api pathname: string = window.location.pathname;
+    @api title: string = "Salesforce";
+    @api logo: boolean = false;
+    @api truncate = false;
+    @api hideCurrentLocation = false;
+
+    @api
+    get breadcrumbs(): NormalizedBreadcrumb[] {
+        const breadcrumbs = this._breadcrumbs || this.autoBreadcrumbs;
+        return this.normalizeBreadcrumbs(
+            this.hideCurrentLocation && breadcrumbs.length > 1
+                ? breadcrumbs.slice(0, breadcrumbs.length - 1)
+                : breadcrumbs
+        );
+    }
+    set breadcrumbs(value) {
+        this._breadcrumbs = toJson(value);
+    }
+
+    private _breadcrumbs!: Breadcrumb[];
+
+    private get labelMap(): LabelMap {
+        const deepReducer = (options: OptionWithNested[]) =>
+            options.reduce(
+                (acc: LabelMap, item: OptionWithNested): LabelMap => {
+                    if (item.options) {
+                        return { ...acc, ...deepReducer(item.options) };
+                    }
+                    if (!item.link) {
+                        return acc;
+                    }
+                    return {
+                        ...acc,
+                        [item.link.href]: item.label
+                    };
+                },
+                {}
+            );
+        return this.navItems ? deepReducer(this.navItems) : {};
+    }
+
+    private get autoBreadcrumbs() {
+        if (!this.pathname || this.pathname === "/") {
+            return [];
+        }
+        // assumes url starts with "/", which it always should
+        const pieces = this.pathname.slice(1).split("/");
+        // @ts-ignore
+        return pieces.reduce((acc, val, i) => {
+            const href = `/${pieces.slice(0, i + 1).join("/")}`;
+            const label = this.labelMap[href] || toLabel(val);
+            return [
+                ...acc,
+                {
+                    href,
+                    label
+                }
+            ];
+        }, []) as { href: string; label: string }[];
+    }
+
+    private normalizeBreadcrumbs(
+        breadcrumbs: Breadcrumb[]
+    ): NormalizedBreadcrumb[] {
+        const { length } = breadcrumbs;
+        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
+            const last = i === length - 1;
+            return {
+                ...breadcrumb,
+                asLink: this.hideCurrentLocation || !last,
+                last
+            };
+        });
+    }
+
+    private get breadcrumbDropdownOptions() {
+        if (this.breadcrumbs.length < 2) {
+            return null;
+        }
+        return this.breadcrumbs
+            .slice(0, this.breadcrumbs.length - 1)
+            .map((link) => ({
+                id: link.href,
+                label: link.label,
+                link: {
+                    href: link.href
+                }
+            }));
+    }
+
+    private get breadcrumbsEmpty(): boolean {
+        return this.breadcrumbs.length === 0;
+    }
+
+    private get className(): string {
+        return cx(
+            this.truncate && this.breadcrumbs.length > 3 && "state-long",
+            this.hideCurrentLocation && "hide-current-location"
+        );
+    }
+}

package/src/modules/dx/button/button.css

@@ -0,0 +1,198 @@
+@import "dxHelpers/reset";
+
+:host {
+    width: min-content;
+    font-size: inherit;
+
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
+    --dx-c-button-justify-content: center;
+    --dx-c-button-opacity: 1;
+    --dx-c-button-font-size: var(--dx-g-text-sm);
+}
+
+.button {
+    opacity: var(--dx-c-button-opacity);
+    width: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: var(--dx-c-button-justify-content);
+    user-select: none;
+    white-space: nowrap;
+    font-size: var(--dx-c-button-font-size);
+    transition: var(--dx-g-transition-hue-1x);
+    padding: 0 var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.button:focus {
+    opacity: 1;
+}
+
+.button:focus:not(:focus-visible) {
+    outline: none;
+}
+
+.button.variant_inline-inherit {
+    font-size: inherit;
+    text-transform: inherit;
+    user-select: inherit;
+    white-space: normal;
+}
+
+.button dx-icon {
+    display: inline;
+}
+
+.button.variant_inline dx-icon,
+.button.variant_inline-inherit dx-icon {
+    display: inline-block;
+    transform: translate(0, -2px);
+}
+
+.button > span {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.button:not(.variant_inline-inherit).font-display {
+    font-family: var(--dx-g-font-display);
+}
+
+.button.font-display:not(.variant_inline):not(.variant_inline-inherit) > span {
+    /* offset accounts for display font's ghost padding */
+    margin-top: 5px;
+}
+
+.button.font-sans {
+    font-family: var(--dx-g-font-sans);
+}
+
+.button.icon-right:not(.slot-empty) > *:nth-child(2) {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.button.icon-left:not(.slot-empty) > *:nth-child(2) {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.button.style-icon.slot-empty {
+    padding: 0;
+}
+
+.icon-right {
+    flex-direction: row;
+}
+
+.icon-left {
+    flex-direction: row-reverse;
+}
+
+/* sizes */
+
+.button.size-large {
+    height: var(--dx-g-spacing-3xl);
+}
+
+.button.size-large.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-3xl));
+}
+
+.button.size-small {
+    height: var(--dx-g-spacing-xl);
+}
+
+.button.size-small.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
+}
+
+.button.size-hero {
+    font-size: var(--dx-g-text-lg);
+    height: 52px;
+}
+
+.button.size-hero.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, 52px);
+}
+
+/* primary */
+
+.button.variant_primary {
+    color: white;
+    background: var(--dx-c-button-primary-color);
+    border: 1px solid var(--dx-c-button-primary-color);
+}
+
+.button.variant_primary:hover,
+:host([aria-expanded="true"]) .button.variant_primary {
+    background: var(--dx-c-button-primary-color-hover);
+    border-color: var(--dx-c-button-primary-color-hover);
+}
+
+/* secondary */
+
+.button.variant_secondary {
+    color: var(--dx-c-button-primary-color);
+    background: transparent;
+    border: 1px solid var(--dx-c-button-primary-color);
+}
+
+.button.variant_secondary:hover,
+:host([aria-expanded="true"]) .button.variant_secondary {
+    background: var(--dx-c-button-secondary-color-hover);
+}
+
+/* text primary */
+
+.button.variant_tertiary,
+.button.variant_inline,
+.button.variant_inline-inherit {
+    color: var(--dx-c-button-primary-color);
+    border: 1px solid transparent;
+}
+
+.button.variant_inline.light-text {
+    color: white;
+}
+
+.button.variant_tertiary:hover,
+:host([aria-expanded="true"]) .button.variant_tertiary {
+    background: var(--dx-c-button-secondary-color-hover);
+    border-color: var(--dx-c-button-secondary-color-hover);
+}
+
+/* inline */
+.button.variant_inline,
+.button.variant_inline-inherit {
+    display: inline;
+    padding: 0;
+    height: unset; /* please leave this here, actually is having an effect */
+    width: unset; /* please leave this here, actually is having an effect */
+}
+
+.button.variant_inline:hover,
+.button.variant_inline-inherit:hover,
+:host([aria-expanded="true"])
+    :is(.button.variant_inline, .button.variant_inline-inherit) {
+    color: var(--dx-c-button-inline-color-hover);
+}
+
+.button.state-disabled {
+    pointer-events: none;
+}
+
+/* custom */
+.button.variant_custom {
+    color: var(--dx-c-button-custom-color);
+    background: var(--dx-c-button-custom-background);
+    border: 1px solid var(--dx-c-button-custom-border);
+}
+
+.button.variant_custom:hover,
+:host([aria-expanded="true"]) .button.variant_custom {
+    color: var(--dx-c-button-custom-color-hover);
+    background: var(--dx-c-button-custom-background-hover);
+    border-color: var(--dx-c-button-custom-border-hover);
+}

package/src/modules/dx/button/button.html

@@ -0,0 +1,43 @@
+<template>
+    <button
+        if:false={href}
+        class={className}
+        disabled={disabled}
+        type={type}
+        aria-label={ariaLabel}
+        part="container"
+    >
+        <span if:false={loading}>
+            <slot onslotchange={onSlotChange}></slot>
+        </span>
+        <dx-icon
+            if:true={showIcon}
+            sprite={iconSprite}
+            size={iconSize}
+            symbol={iconSymbol}
+        ></dx-icon>
+        <span class="temp-loading-message" if:true={loading}>Loading...</span>
+    </button>
+    <a
+        if:true={href}
+        href={href}
+        target={target}
+        rel={rel}
+        class={className}
+        disabled={disabled}
+        download={download}
+        aria-label={ariaLabel}
+        part="container"
+    >
+        <span if:false={loading}>
+            <slot onslotchange={onSlotChange}></slot>
+        </span>
+        <dx-icon
+            if:true={showIcon}
+            sprite={iconSprite}
+            size={iconSize}
+            symbol={iconSymbol}
+        ></dx-icon>
+        <span class="temp-loading-message" if:true={loading}>Loading...</span>
+    </a>
+</template>

package/src/modules/dx/button/button.ts

@@ -0,0 +1,68 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import {
+    ButtonTextColor,
+    ButtonVariant,
+    IconSprite,
+    IconSize,
+    IconSymbol,
+    LightningSlotElement
+} from "typings/custom";
+
+export default class Button extends LightningElement {
+    @api ariaLabel: string = "";
+    @api disabled: boolean | null = null;
+    @api iconSize?: IconSize = "small";
+    @api iconSprite?: IconSprite = "utility";
+    @api iconSymbol?: IconSymbol;
+    @api iconPosition?: "right" | "left" = "right";
+    @api loading: boolean = false;
+    @api size: "large" | "hero" | "small" = "small";
+    @api variant: ButtonVariant = "primary";
+    @api inlineTextColor: ButtonTextColor = "dark";
+    @api font: "display" | "sans" = "display";
+    @api name?: string;
+    @api value?: any;
+
+    // button props
+    @api type: "submit" | "reset" | "button" = "button";
+
+    // link props
+    @api href: string | null = null;
+    @api download: string | null = null;
+    @api target: "_self" | "_blank" | "_parent" | "_top" | null = null;
+    @api rel: string | null = null;
+
+    @api focus() {
+        const button = this.template.querySelector(".button");
+        if (button) {
+            button.focus();
+        }
+    }
+
+    private isSlotEmpty: boolean = true;
+
+    private get showIcon(): boolean {
+        return !!this.iconSymbol && !this.loading;
+    }
+
+    private get className(): string {
+        return cx(
+            "button",
+            this.variant === "inline" && `${this.inlineTextColor}-text`,
+            this.disabled && "state-disabled",
+            `variant_${this.variant}`,
+            this.loading && "state-loading",
+            `size-${this.size}`,
+            !!this.iconSymbol && "style-icon",
+            this.isSlotEmpty && "slot-empty",
+            `font-${this.font}`,
+            this.iconPosition === "right" ? "icon-right" : "icon-left"
+        );
+    }
+
+    private onSlotChange(e: LightningSlotElement) {
+        const slot = e.target;
+        this.isSlotEmpty = slot.assignedElements().length !== 0;
+    }
+}

package/src/modules/dx/cardBlogPost/cardBlogPost.css

@@ -0,0 +1,13 @@
+@import "dxHelpers/card";
+
+dx-card-content {
+    --dx-c-body-max-lines: 3;
+}
+
+@media screen and (max-width: 768px) {
+    dx-card-content::part(body),
+    dx-card-content::part(datetime) {
+        display: none;
+        margin: 0;
+    }
+}

package/src/modules/dx/cardBlogPost/cardBlogPost.html

@@ -0,0 +1,24 @@
+<template>
+    <dx-card-content
+        author-href={authorHref}
+        author-img-src={authorImgSrc}
+        author-label={authorLabel}
+        body={body}
+        featured={featured}
+        href={href}
+        img-alt={imgAlt}
+        img-src={imgSrc}
+        label={label}
+        target={target}
+        title={title}
+    >
+        <dx-formatted-date-time
+            if:true={_datetime}
+            slot="datetime"
+            day="2-digit"
+            month="long"
+            year="numeric"
+            value={_datetime}
+        ></dx-formatted-date-time>
+    </dx-card-content>
+</template>

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -0,0 +1,23 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardBlogPost extends LightningElement {
+    @api authorHref?: string | null = null;
+    @api authorImgSrc!: string | null;
+    @api authorLabel!: string | null;
+    @api body!: string;
+    @api datetime!: string;
+    @api dateTime?: string | null = null;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @api imgAlt?: string;
+    @api imgSrc?: string | null;
+    @api label?: string;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    // LWC is being compiled so that datetime is being interpreted as date-time
+    // ONLY from from the implementation in dx-card-blog-post-provider
+    private get _datetime() {
+        return this.datetime || this.dateTime;
+    }
+}

package/src/modules/dx/cardCallout/cardCallout.css

@@ -0,0 +1,57 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+.card-callout {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* in the callout card's case it needs to be subservient to the other items in the grid */
+.dx-card-base_override-width {
+    height: 100% !important;
+    min-height: unset !important;
+}
+
+/* title */
+
+.dx-text-heading-3 {
+    color: inherit;
+    margin-bottom: var(--dx-g-spacing-3xl);
+    overflow-wrap: hyphenate-word;
+    hyphens: overflow;
+}
+
+/* label */
+
+.dx-text-button-light {
+    color: inherit;
+    margin-top: auto;
+}
+
+/* callout arrow */
+
+dx-icon {
+    display: inline;
+    color: inherit;
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+dx-icon::part(svg) {
+    transition: var(--dx-g-transition-transform-2x);
+}
+
+.card-callout:hover dx-icon::part(svg) {
+    transform: translate(var(--dx-g-spacing-xs));
+}
+
+.card-callout:active dx-icon::part(svg) {
+    transform: translate(var(--dx-g-spacing-2xs));
+}
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-3 {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+}

package/src/modules/dx/cardCallout/cardCallout.html

@@ -0,0 +1,15 @@
+<template>
+    <a
+        class={className}
+        href={href}
+        target={target}
+        style={style}
+        onclick={sendGtm}
+    >
+        <h3 class="dx-text-heading-3">{title}</h3>
+        <span class="dx-text-button-light">
+            {label}
+            <dx-icon symbol="forward"></dx-icon>
+        </span>
+    </a>
+</template>

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -0,0 +1,41 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "dxUtils/css";
+import { track } from "dxUtils/analytics";
+
+export const ANALYTICS_EVENT_NAME = "custEv_ctaLinkClick";
+
+export default class CardCallout extends LightningElement {
+    @api backgroundColor: string = "indigo-vibrant-40";
+    @api color: string = "white";
+    @api href!: string;
+    @api label: string = "";
+    @api target?: string;
+    @api title!: string;
+
+    private get style(): string {
+        const background = `background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+        const color = `color: ${toDxColor(this.color)};`;
+        return [background, color].join(" ");
+    }
+
+    private get className(): string {
+        return cx(
+            "card-callout",
+            "dx-card-base",
+            "dx-card-base_section-vertical"
+        );
+    }
+
+    private sendGtm(e: PointerEvent) {
+        track(e.currentTarget, ANALYTICS_EVENT_NAME, {
+            clickURL: this.href,
+            itemTitle: this.title,
+            clickText: this.label,
+            elementType: "card callout",
+            destinationType: "internal"
+        });
+    }
+}

package/src/modules/dx/cardContent/cardContent.css

@@ -0,0 +1,52 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+:host {
+    /* because this is used within other cards */
+    height: 100%;
+}
+
+.card-content {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.card-content:not(.dx-card-base_layout-horizontal) {
+    flex-direction: column;
+}
+
+.hide-datetime .datetime {
+    display: none;
+}
+
+.hide-datetime .body {
+    margin-bottom: 0 !important;
+}
+
+/* mobile responsiveness */
+
+@media screen and (max-width: 768px) {
+    .card-content:not(.dx-card-base_featured) {
+        flex-direction: row;
+    }
+
+    .card-content:not(.dx-card-base_featured) .image-link {
+        margin-right: var(--dx-g-card-img-spacing);
+        margin-bottom: unset;
+        flex-shrink: 0;
+        height: 80px;
+        width: 80px;
+        padding-top: unset;
+    }
+
+    .card-content.has-image:not(.dx-card-base_featured)
+        dx-image-and-label::part(image) {
+        display: none;
+    }
+
+    .card-content:not(.dx-card-base_featured) .label,
+    .card-content:not(.dx-card-base_featured) .datetime {
+        display: none;
+    }
+}