@salesforcedevs/dx-components 0.26.1-alpha0.5 → 0.26.3

package/src/modules/dx/footer/links.ts

@@ -0,0 +1,140 @@
+export const generalLinksRaw = [
+    {
+        label: "Developer Centers",
+        options: [
+            { href: "https://devcenter.heroku.com/", label: "Heroku" },
+            { href: "https://developer.mulesoft.com/", label: "MuleSoft" },
+            { href: "https://www.tableau.com/developer", label: "Tableau" },
+            {
+                href: "https://developer.commercecloud.com/s/",
+                label: "Commerce Cloud"
+            },
+            {
+                href: "https://www.lightningdesignsystem.com/",
+                label: "Lightning Design System"
+            },
+            {
+                href: "https://metamind.readme.io/",
+                label: "Einstein"
+            },
+            { href: "https://salesforce.quip.com/dev", label: "Quip" }
+        ]
+    },
+    {
+        label: "Popular Resources",
+        options: [
+            { href: "/docs", label: "Documentation" },
+            {
+                href: "/docs/component-library",
+                label: "Component Library"
+            },
+            { href: "/docs/apis", label: "APIs" },
+            { href: "https://trailhead.salesforce.com/", label: "Trailhead" },
+            {
+                href: "/code-samples-and-sdks",
+                label: "Code Samples and SDKs"
+            },
+            { href: "/podcast", label: "Podcasts" },
+            {
+                href: "https://appexchange.salesforce.com/",
+                label: "AppExchange"
+            }
+        ]
+    },
+    {
+        label: "Community",
+        options: [
+            {
+                href: "https://trailhead.salesforce.com/trailblazer-community/feed",
+                label: "Trailblazer Community"
+            },
+            {
+                href: "/forums#!/feedtype=RECENT&criteria=ALLQUESTIONS&",
+                label: "Forums"
+            },
+            { href: "/events", label: "Events and Calendar" },
+            {
+                href: "https://go.appexchange.com/partnerprogram",
+                label: "Partner Community"
+            },
+            { href: "/blogs", label: "Blog" },
+            {
+                href: "https://admin.salesforce.com/",
+                label: "Salesforce Admins"
+            },
+            {
+                href: "https://architect.salesforce.com/",
+                label: "Salesforce Architects"
+            }
+        ]
+    }
+];
+
+export const generalLinks = generalLinksRaw.map((section) => ({
+    ...section,
+    options: section.options.map((option) => {
+        const external = option.href.startsWith("http");
+        return {
+            ...option,
+            iconSymbol: external ? "new_window" : null,
+            target: external ? "_blank" : null
+        };
+    })
+}));
+
+export const privacyHref = "https://www.salesforce.com/company/privacy/";
+
+export const intellectualHref =
+    "https://www.salesforce.com/company/legal/intellectual/";
+
+export const termsLinks = [
+    { href: privacyHref, label: "Privacy Statement" },
+    {
+        href: "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
+        label: "Terms of Use"
+    },
+    {
+        href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
+        label: "Use of Cookies"
+    },
+    { href: "https://trust.salesforce.com/en/", label: "Trust" }
+];
+
+export const socialLinks = [
+    {
+        href: "https://github.com/trailheadapps",
+        iconSymbol: "github",
+        iconSprite: "brand",
+        label: "Github"
+    },
+    {
+        href: "https://www.facebook.com/salesforcedevs",
+        iconSymbol: "facebook-f",
+        iconSprite: "brand",
+        label: "Facebook"
+    },
+    {
+        href: "https://twitter.com/salesforcedevs",
+        iconSymbol: "twitter",
+        iconSprite: "brand",
+        label: "Twitter"
+    },
+    {
+        href: "https://www.linkedin.com/showcase/salesforce-developers",
+        iconSymbol: "linkedin-in",
+        iconSprite: "brand",
+        label: "LinkedIn"
+    },
+    {
+        href: "https://www.youtube.com/user/DeveloperForce",
+        iconSymbol: "youtube",
+        iconSprite: "brand",
+        label: "Youtube"
+    },
+    {
+        href: "https://developer.salesforce.com/blogs/feed",
+        iconSymbol: "rss",
+        iconSprite: "general",
+        label: "RSS"
+    }
+];

package/src/modules/dx/footerOption/footerOption.css

@@ -0,0 +1,4 @@
+dx-button {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-20);
+}

package/src/modules/dx/footerOption/footerOption.html

@@ -0,0 +1,12 @@
+<template>
+    <dx-button
+        href={href}
+        icon-symbol={iconSymbol}
+        target={target}
+        font="sans"
+        variant="inline"
+        onclick={sendGtm}
+    >
+        {label}
+    </dx-button>
+</template>

package/src/modules/dx/footerOption/footerOption.ts

@@ -0,0 +1,19 @@
+import { LightningElement, api } from "lwc";
+import { track } from "dx/instrumentation";
+
+export default class FooterOption extends LightningElement {
+    @api href: string | null = null;
+    @api generalLabel: string | null = null;
+    @api label: string | null = null;
+    @api iconSymbol: string | null = null;
+    @api target: string | null = null;
+
+    sendGtm(e: PointerEvent) {
+        track(e.currentTarget, "custEv_bottomNavLinkClick", {
+            navHeading: this.generalLabel || undefined,
+            navSubHeading: this.label || undefined,
+            clickText: this.href || undefined,
+            pageLocation: window.location.pathname || undefined
+        });
+    }
+}

package/src/modules/dx/formattedDateTime/formattedDateTime.html

@@ -0,0 +1 @@
+<template>{value}</template>

package/src/modules/dx/formattedDateTime/formattedDateTime.ts

@@ -0,0 +1,72 @@
+import { LightningElement, api } from "lwc";
+import {
+    formattedDateDay,
+    formattedDateHour,
+    formattedDateMinute,
+    formattedDateMonth,
+    formattedDateOptions,
+    formattedDateSecond,
+    formattedDateTimeZoneName,
+    formattedDateWeekday,
+    formattedDateYear
+} from "typings/custom";
+
+export default class FormattedDateTime extends LightningElement {
+    @api weekday: formattedDateWeekday;
+    @api year: formattedDateYear;
+    @api month: formattedDateMonth;
+    @api day: formattedDateDay;
+    @api hour: formattedDateHour;
+    @api minute: formattedDateMinute;
+    @api second: formattedDateSecond;
+    @api timeZoneName: formattedDateTimeZoneName;
+    @api
+    set value(value) {
+        if (!value) {
+            console.error("Value provided to FormattedDateTime is invalid");
+            return;
+        }
+
+        this._unformattedDate = new Date(value);
+    }
+    get value() {
+        const options = this.getOptions();
+        this._formattedDate = this.formatDate(this._unformattedDate, options);
+        return this._formattedDate;
+    }
+
+    private _formattedDate!: string;
+    private _unformattedDate!: Date;
+
+    formatDate(unformattedDate: Date, options: formattedDateOptions) {
+        const locale = navigator.language;
+        let formattedDateTime = Intl.DateTimeFormat(locale, options).format(
+            unformattedDate
+        ) as String;
+        formattedDateTime = this.updateDayPeriodFormatting(formattedDateTime);
+        return formattedDateTime;
+    }
+
+    updateDayPeriodFormatting(formattedDateTime: String) {
+        if (formattedDateTime.includes("AM")) {
+            formattedDateTime = formattedDateTime.replace(" AM", "am");
+        } else if (formattedDateTime.includes("PM")) {
+            formattedDateTime = formattedDateTime.replace(" PM", "pm");
+        }
+        return formattedDateTime;
+    }
+
+    getOptions() {
+        const options = {
+            weekday: this.weekday || undefined,
+            year: this.year || undefined,
+            month: this.month || undefined,
+            day: this.day || undefined,
+            hour: this.hour || undefined,
+            minute: this.minute || undefined,
+            second: this.second,
+            timeZoneName: this.timeZoneName || undefined
+        };
+        return options;
+    }
+}

package/src/modules/dx/grid/grid.css

@@ -0,0 +1,48 @@
+.container {
+    --one-third-width: calc((100% - 2 * var(--dx-g-page-grid-gap)) / 3);
+
+    display: grid;
+    gap: var(--dx-g-page-grid-gap);
+    grid-template-rows: repeat(auto-fill, 1fr);
+    grid-template-columns: 1fr;
+    justify-items: stretch;
+    align-items: stretch;
+    position: relative;
+}
+
+.col-one {
+    /* This class intentionally left blank. */
+}
+
+@media (min-width: 600px) {
+    .col-two,
+    .col-three,
+    .col-four {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (min-width: 768px) {
+    .col-two-slim-left {
+        grid-template-columns: var(--one-third-width) calc(
+                2 * var(--one-third-width) + var(--dx-g-page-grid-gap)
+            );
+    }
+
+    .col-three {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .col-two-slim-right {
+        grid-template-columns:
+            calc(2 * var(--one-third-width) + var(--dx-g-page-grid-gap))
+            var(--one-third-width);
+    }
+}
+
+/* special breakpoint for four col */
+@media (min-width: 1200px) {
+    .col-four {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}

package/src/modules/dx/grid/grid.html

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

package/src/modules/dx/grid/grid.md

@@ -0,0 +1,14 @@
+# Breakpoint Guidelines for Card Grids
+
+_Mobile (599 or less)_ --> One col
+_Small Tablet (600 - 767)_ --> Two col max
+_Tablet & Desktop (768 and up)_ --> 3 col min / 3 & 4 col
+_Widescreen (1920 and up)_ --> 4 col min / 4 & 5 col.
+
+# Dynamic columns
+
+Dynamic column mode will only assign 3 or 4 cols for desktop as anything less makes cards far too large (stretches imagery, etc).
+
+# Naming strategy
+
+Column namings are desktop-oriented, i.e. 4 col refers to layout that is 4 columns on desktop -- but this layout would be actually 2 column on tablet and 1 column on mobile.

package/src/modules/dx/grid/grid.ts

@@ -0,0 +1,72 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { GridVariant, LightningSlotElement } from "typings/custom";
+
+const DEFAULT_COLUMNS = "three";
+
+export default class Grid extends LightningElement {
+    @api
+    get columns() {
+        if (this._columns.includes("dynamic") && this._itemCount) {
+            return this.dynamicColumns;
+        }
+        return this._columns || DEFAULT_COLUMNS;
+    }
+    set columns(value: GridVariant) {
+        this._columns = value;
+    }
+
+    _columns!: GridVariant;
+    _itemCount: number | null = null;
+
+    private get className(): string {
+        return cx("container", `col-${this.columns}`);
+    }
+
+    private isMoreIdyllicColumnNum = (a: number, b: number): boolean => {
+        if (!this._itemCount) {
+            return false;
+        }
+        const remA = this._itemCount % a;
+        const remB = this._itemCount % b;
+        const relRemA = a - remA;
+        const relRemB = b - remB;
+        if (remA === 0 && remB === 0) {
+            return b > a;
+        }
+        if (remA === 0) {
+            return false;
+        }
+        if (remB === 0) {
+            return true;
+        }
+        return relRemB < relRemA;
+    };
+
+    private get dynamicColumns(): GridVariant {
+        if (!this._itemCount) {
+            return DEFAULT_COLUMNS;
+        }
+
+        const possibleColumns = [4, 3];
+
+        let ideal = possibleColumns[0];
+        for (let i = 1; i < possibleColumns.length; i++) {
+            if (this.isMoreIdyllicColumnNum(ideal, possibleColumns[i])) {
+                ideal = possibleColumns[i];
+            }
+        }
+
+        // @ts-ignore (no clue why "two" isn't being seen as a GridVariant type)
+        return (
+            {
+                4: "four",
+                3: "three"
+            }[ideal] || DEFAULT_COLUMNS
+        );
+    }
+
+    onSlotChange(e: Event) {
+        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
+    }
+}

package/src/modules/dx/groupBio/groupBio.css

@@ -0,0 +1,49 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.avatar {
+    border-radius: 9999px;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.name {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.avatar.size-small {
+    width: 50px;
+}
+
+.avatar.size-medium {
+    width: 100px;
+}
+
+.avatar.size-large {
+    width: 200px;
+}
+
+.body {
+    text-align: center;
+}
+
+.position {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.position.condensed {
+    color: inherit;
+}
+
+.descriptors {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.descriptors > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-xs);
+}

package/src/modules/dx/groupBio/groupBio.html

@@ -0,0 +1,29 @@
+<template>
+    <div class="container">
+        <div if:true={imgSrc}>
+            <img class={imgClass} src={imgSrc} alt={imgAlt} />
+        </div>
+        <div class="body">
+            <p if:true={name} class={nameClass}>{name}</p>
+            <p if:true={position} class={positionClass}>{position}</p>
+            <div
+                if:false={isCondensedVariant}
+                class="descriptors dx-text-body-2"
+            >
+                <p if:true={descriptor1}>{descriptor1}</p>
+                <p if:true={descriptor2}>{descriptor2}</p>
+                <p if:true={descriptor3}>{descriptor3}</p>
+                <p if:true={profileHref}>
+                    <dx-button
+                        href={profileHref}
+                        target={profileTarget}
+                        rel={profileRel}
+                        variant="inline-inherit"
+                    >
+                        {profileText}
+                    </dx-button>
+                </p>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/groupBio/groupBio.ts

@@ -0,0 +1,41 @@
+import { LightningElement, api } from "lwc";
+
+export default class GroupBio extends LightningElement {
+    @api imgSrc: string = "";
+    @api imgAlt: string = "";
+    @api imgSize: "small" | "medium" | "large" = "large";
+    @api variant: "condensed" | "default" = "default";
+    @api name: string = "";
+    @api position: string = "";
+    @api descriptor1: string = "";
+    @api descriptor2: string = "";
+    @api descriptor3: string = "";
+    @api profileHref: string = "";
+    @api profileText: string = "";
+    @api profileTarget: string = "_blank";
+    @api profileRel: string = "noopener";
+
+    private get imgClass(): string {
+        return `avatar size-${this.imgSize}`;
+    }
+
+    private get nameClass(): string {
+        return `name ${
+            this.variant === "condensed"
+                ? "condensed dx-text-label-1"
+                : "dx-text-heading-4"
+        }`;
+    }
+
+    private get positionClass(): string {
+        return `position ${
+            this.variant === "condensed"
+                ? "condensed dx-text-body-3"
+                : "dx-text-heading-5"
+        }`;
+    }
+
+    private get isCondensedVariant(): boolean {
+        return this.variant === "condensed";
+    }
+}

package/src/modules/dx/groupText/groupText.css

@@ -0,0 +1,119 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    display: block;
+}
+
+.text-group {
+    display: flex;
+    flex-direction: column;
+
+    --dx-group-text-spacing-vertical-xl: var(--dx-g-spacing-2xl);
+    --dx-group-text-spacing-vertical-lg: var(--dx-g-spacing-lg);
+    --dx-group-text-spacing-vertical-sm: var(--dx-g-spacing-sm);
+}
+
+.hide-slot .slot-container {
+    display: none;
+}
+
+.text-group:not(.hide-slot) .slot-container {
+    margin-top: var(--dx-group-text-spacing-vertical-xl);
+}
+
+.label {
+    margin-bottom: var(--dx-group-text-spacing-vertical-lg);
+}
+
+/* subtitle */
+
+.subtitle {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: var(--dx-group-text-spacing-vertical-lg);
+}
+
+.subtitle > span {
+    position: relative;
+    white-space: nowrap;
+}
+
+.subtitle > *:not(:last-child) {
+    margin-right: var(--dx-g-spacing-lg);
+}
+
+.subtitle > *:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    right: -12px;
+    top: calc(40% - 1px);
+    height: 2px;
+    width: 2px;
+    background: var(--dx-g-blue-vibrant-20);
+}
+
+/* body */
+
+.body {
+    margin-top: var(--dx-group-text-spacing-vertical-lg);
+}
+
+/* button group */
+
+.button-group {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: var(--dx-group-text-spacing-vertical-xl);
+}
+
+.button-group > dx-button:not(:last-of-type) {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+/* breakpoints tablet */
+
+@media screen and (max-width: 1024px) {
+    .title.dx-text-heading-2 {
+        font-size: var(--dx-g-text-3xl);
+        line-height: var(--dx-g-spacing-2xl);
+    }
+
+    .subtitle.dx-text-heading-6 {
+        font-size: var(--dx-g-text-sm);
+    }
+
+    .body.dx-text-body-1 {
+        font-size: var(--dx-g-text-base);
+        line-height: var(--dx-g-spacing-lg);
+    }
+
+    .title.dx-text-heading-3 {
+        font-size: var(--dx-g-text-2xl);
+        line-height: var(--dx-g-spacing-xl);
+    }
+
+    .subtitle.dx-text-heading-7 {
+        font-size: var(--dx-g-text-xs);
+    }
+
+    .body.dx-text-body-2 {
+        font-size: var(--dx-g-text-sm);
+        line-height: var(--dx-g-spacing-lg);
+    }
+}
+
+/* breakpoints mobile */
+
+@media screen and (max-width: 768px) {
+    .button-group > dx-button {
+        width: 100%;
+    }
+
+    .button-group > dx-button:not(:last-of-type) {
+        margin-right: 0;
+        margin-bottom: var(--dx-g-spacing-sm);
+    }
+}