@salesforcedevs/dx-components 0.55.0 → 0.55.3-alpha-2

package/lwc.config.json

@@ -12,6 +12,7 @@
         "dx/cardDocs",
         "dx/cardEvent",
         "dx/cardExpanded",
+        "dx/cardGridDocs",
         "dx/cardMinimal",
         "dx/cardNews",
         "dx/cardPodcastEpisode",
@@ -26,6 +27,7 @@
         "dx/dropdown",
         "dx/emptyState",
         "dx/feature",
+        "dx/featureGrid",
         "dx/featuredContentHeader",
         "dx/featuresList",
         "dx/filterMenu",
@@ -75,6 +77,7 @@
         "dxHelpers/code",
         "dxHelpers/commonHeader",
         "dxHelpers/reset",
+        "dxHelpers/scrollbar",
         "dxHelpers/table",
         "dxHelpers/text",
         "dxUtils/analytics",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.55.0",
+    "version": "0.55.3-alpha-2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -16,13 +16,15 @@
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
         "debounce": "^1.2.0",
-        "lightning-base-components": "1.12.3-alpha",
+        "js-cookie": "^3.0.1",
         "lodash.get": "^4.4.2",
-        "microtip": "0.2.2"
+        "microtip": "0.2.2",
+        "salesforce-oauth2": "^0.2.0"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
+        "@types/js-cookie": "^3.0.2",
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
     }

package/src/modules/dx/avatarButton/avatarButton.css

@@ -0,0 +1,128 @@
+:host {
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background: transparent;
+    --dx-c-button-custom-border: 1px solid transparent;
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
+}
+
+.avatar {
+    border-radius: 100%;
+    border: 2px solid #0d9dda;
+}
+
+.avatar.avatar-small {
+    width: var(--dx-g-spacing-lg);
+}
+
+.avatar.avatar-medium {
+    margin-bottom: 14px;
+    width: var(--dx-g-spacing-2xl);
+}
+
+.login-control {
+    background: var(--dx-g-cloud-blue-vibrant-90);
+    border-color: var(--dx-g-cloud-blue-vibrant-90);
+    border-radius: 50%;
+}
+
+.login-container {
+    padding: 16px;
+}
+
+.login-container.logged-in {
+    padding-top: 68px;
+}
+
+.header-img {
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+}
+
+.heading {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    line-height: 28px;
+}
+
+.sub-heading {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+    font-family: var(--dx-g-font-sans);
+    font-size: 12px;
+    line-height: 18px;
+    padding: 8px 0;
+}
+
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.login-list-item {
+    padding-bottom: 10px;
+}
+
+.login-section ~ .login-section {
+    border-top: 1px solid var(--dx-g-gray-90);
+    margin-top: 12px;
+}
+
+.login-section-title {
+    color: var(--dx-g-gray-30);
+    display: inline-block;
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    padding: 20px 0 12px;
+}
+
+.login-link {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+}
+
+.login-link-label {
+    display: inline-block;
+    font-family: var(--dx-g-font-display);
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.login-link-img {
+    display: inline-block;
+    height: 16px;
+    margin-left: 6px;
+    vertical-align: middle;
+}
+
+.login-link-icon {
+    display: inline-block;
+    margin-left: 6px;
+    vertical-align: baseline;
+}
+
+.login-link-blurb {
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    padding-top: 4px;
+}
+
+.heading-links {
+    color: var(--dx-g-gray-90);
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+a.inline-link {
+    color: var(--dx-g-blue-vibrant-50);
+}

package/src/modules/dx/avatarButton/avatarButton.html

@@ -0,0 +1,148 @@
+<template>
+    <div if:true={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <img
+                slot="control"
+                src={userInfo.avatarImgSrc}
+                class="avatar avatar-small"
+            />
+            <div slot="content">
+                <div class="login-container logged-in">
+                    <img src="/assets/svg/login-widget-bg.png" class="header-img" />
+                    <img
+                        src={userInfo.avatarImgSrc}
+                        class="avatar avatar-medium"
+                    />
+                    <span class="heading">{userInfo.fullName}</span>
+                    <span class="sub-heading">{userInfo.username}</span>
+                    <div class="heading-links">
+                        <!--
+                        <a href="#" class="inline-link">Switch account</a>
+                        &nbsp;&nbsp;|&nbsp;&nbsp;
+                        -->
+                        <a href={logoutUrl} class="inline-link">Logout</a>
+                    </div>
+                    <div class="login-section">
+                        <span class="login-section-title">Trailblazer.me</span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href={settingsUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Settings
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href={profileUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Profile
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Developer Forums
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                                <div class="login-link-blurb">
+                                    Our Developer Forums have a new home!&nbsp;
+                                    <a href="#" class="inline-link">
+                                        Learn more
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+    <div if:false={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <dx-button
+                slot="control"
+                class="login-control"
+                icon-symbol="user"
+                icon-position="left"
+                loading={isLoading}
+                variant="custom"
+            >
+                Login
+            </dx-button>
+            <div slot="content">
+                <div class="login-container">
+                    <span class="heading">Login</span>
+                    <div class="login-section">
+                        <span class="login-section-title">Products</span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Salesforce
+                                    </span>
+                                    <img
+                                        class="login-link-img"
+                                        src="/assets/svg/salesforce-cloud.svg"
+                                        alt="Salesforce logo"
+                                    />
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Marketing Cloud
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="login-section">
+                        <span class="login-section-title">
+                            Community & Resources
+                        </span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href={loginUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Trailblazer.me
+                                    </span>
+                                </a>
+                                <div class="login-link-blurb">
+                                    Login into access a rich community of
+                                    Salesforce Developers, get ideas, and find
+                                    solutions.
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+</template>

package/src/modules/dx/avatarButton/avatarButton.ts

@@ -0,0 +1,99 @@
+import { api, LightningElement } from "lwc";
+import Cookie from "js-cookie";
+
+const TBID_BASE_URL = "https://dev1-trailblazer-identity.cs192.force.com";
+const TBID_LOGIN_URL = "https://development.developer.salesforce.com/tbid/dologin";
+const TBID_LOGOUT_URL = `${TBID_BASE_URL}/services/auth/idp/oidc/logout`;
+const TBID_USERINFO_URL = `${TBID_BASE_URL}/services/oauth2/userinfo`;
+
+export interface UserInfo {
+    avatarImgSrc?: string;
+    firstName?: string;
+    lastName?: string;
+    username?: string;
+    readonly fullName: string;
+}
+
+export default class AvatarButton extends LightningElement {
+    @api size: "small" | "medium" | "large" = "medium";
+
+    private userInfo: UserInfo = {
+        get fullName() {
+            if (this.firstName && this.lastName) {
+                return `${this.firstName} ${this.lastName}`;
+            }
+            return this.firstName || this.lastName || "";
+        }
+    };
+    private isLoading = false;
+    private settingsUrl = `${TBID_BASE_URL}/settings`;
+    private profileUrl = `${TBID_BASE_URL}/id`;
+    private loginUrl = TBID_LOGIN_URL;
+    private logoutUrl = TBID_LOGOUT_URL;
+
+    // A user only counts as logged in for our purposes if they have an access token
+    // and we have successfully used it to get their info.
+    private get isLoggedIn() {
+        return Boolean(this._tbidAccessToken) && this._didReceiveUserInfo;
+    }
+
+    private _didReceiveUserInfo = false;
+    private _tbidAccessToken: string | undefined;
+
+    connectedCallback() {
+        this._tbidAccessToken = Cookie.get("TBID");
+
+        if (this._tbidAccessToken) {
+            this.requestUserInfo(this._tbidAccessToken);
+        }
+    }
+
+    private updateAvatarWithUserInfo(userInfo: any) {
+        if (!userInfo) {
+            return;
+        }
+
+        this.userInfo.avatarImgSrc = userInfo.photos?.thumbnail;
+        this.userInfo.firstName = userInfo.given_name;
+        this.userInfo.lastName = userInfo.family_name;
+        this.userInfo.username = userInfo.preferred_username;
+        // TODO: Consider displaying initials if no photo. Is there always a photo?
+    }
+
+    private async requestUserInfo(accessToken: string) {
+        this.isLoading = true;
+
+        try {
+            // FIXME: The TBID userinfo currently only accepts the access token in the URL
+            // as a query parameter. This is bad, but they're aware of it, and when it is
+            // fixed, we should use a header or something instead.
+            const userInfoRes = await fetch(
+                TBID_USERINFO_URL +
+                    "?access_token=" +
+                    encodeURIComponent(accessToken)
+            );
+
+            if (userInfoRes.ok) {
+                const userInfo = await userInfoRes.json();
+                this.updateAvatarWithUserInfo(userInfo);
+                this._didReceiveUserInfo = true;
+            } else {
+                if (userInfoRes.status === 403) {
+                    const refreshToken = Cookie.get('TBID_REFRESH');
+                    if (refreshToken) {
+                        console.log('Would use refresh token');
+                    }
+                }
+                // TODO: Do we want a "something went wrong" state here?
+            }
+        } catch (ex) {
+            // TODO: Something not directly related to auth went wrong. Unsure what to do here.
+        }
+
+        this.isLoading = false;
+    }
+
+    // private refreshAccessToken(refreshToken);
+
+    // private handleAuthFailure() {}
+}

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

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Breadcrumb, Option } from "typings/custom";
+import { Breadcrumb, OptionWithNested } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 
 type LabelMap = { [href: string]: string };
@@ -19,7 +19,7 @@ const toLabel = (val: string) => {
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Navigation Breadcrumbs";
     @api baseHref: string = "/";
-    @api navItems: Option[] = [];
+    @api navItems: OptionWithNested[] = [];
     @api pathname: string = window.location.pathname;
     @api title: string = "Salesforce";
     @api logo: boolean = false;
@@ -42,19 +42,22 @@ export default class Breadcrumbs extends LightningElement {
     private _breadcrumbs!: Breadcrumb[];
 
     private get labelMap(): LabelMap {
-        const deepReducer = (options: Option[]) =>
-            options.reduce((acc: LabelMap, item: Option): LabelMap => {
-                if (item.options) {
-                    return { ...acc, ...deepReducer(item.options) };
-                }
-                if (!item.link) {
-                    return acc;
-                }
-                return {
-                    ...acc,
-                    [item.link.href]: item.label
-                };
-            }, {});
+        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) : {};
     }
 

package/src/modules/dx/cardGridDocs/cardGridDocs.css

@@ -0,0 +1,74 @@
+.docs-action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
+}
+
+.docs-action-bar > .records-container {
+    margin-right: auto;
+}
+
+.docs-action-bar .filters-container {
+    display: flex;
+}
+
+.docs-action-bar .filters-container > *:not(:first-child),
+dx-input {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+dx-input {
+    --dx-c-input-width: 285px;
+}
+
+.pagination-container {
+    max-width: fit-content;
+    max-width: -moz-fit-content;
+    margin: var(--dx-g-spacing-lg) auto;
+}
+
+@media screen and (max-width: 1024px) {
+    dx-card-docs {
+        --dx-c-body-max-lines: 3;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .docs-action-bar {
+        flex-direction: column-reverse;
+        width: 100%;
+        padding: 0;
+    }
+
+    .records-container {
+        margin-bottom: var(--dx-g-spacing-md);
+    }
+
+    dx-input {
+        --dx-c-input-width: 100%;
+
+        width: 100%;
+        margin-bottom: var(--dx-g-spacing-md);
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .pagination-container {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .pagination-container > * {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+@media screen and (max-width: 460px) {
+    .docs-action-bar .records-container {
+        transform: initial;
+        padding: var(--dx-g-spacing-md) 0;
+    }
+}

package/src/modules/dx/cardGridDocs/cardGridDocs.html

@@ -0,0 +1,67 @@
+<template>
+    <div class="card-grid">
+        <div class="docs-action-bar">
+            <div class="records-container">
+                <span if:true={endingRecord}>
+                    Showing { startingRecord } to { endingRecord } of {
+                    cards.length }
+                </span>
+            </div>
+            <div class="filters-container">
+                <slot name="filters"></slot>
+            </div>
+            <dx-input
+                size="small"
+                placeholder="Search..."
+                icon-symbol="search"
+                shortcut-key="j"
+                class="docs-search-input"
+                onchange={onSearchChange}
+                value={value}
+            ></dx-input>
+        </div>
+        <dx-grid columns="four">
+            <template for:each={currentPageCards} for:item="card">
+                <dx-card-docs
+                    key={card.title}
+                    body={card.body}
+                    href={card.href}
+                    img-alt={card.imgAlt}
+                    img-src={card.imgSrc}
+                    label={card.label}
+                    title={card.title}
+                    target={card.target}
+                    show-mobile-img={card.showMobileImg}
+                >
+                    <template
+                        if:true={card.links}
+                        for:each={card.links}
+                        for:item="link"
+                    >
+                        <dx-button
+                            key={link.title}
+                            href={link.href}
+                            variant="inline"
+                        >
+                            { link.title }
+                        </dx-button>
+                    </template>
+                </dx-card-docs>
+            </template>
+        </dx-grid>
+        <div class="pagination-container" if:false={showEmptyState}>
+            <dx-pagination
+                current-page={page}
+                total-pages={totalPages}
+                pages-to-show="5"
+                onpagechange={goToPage}
+                if:false={hidePagination}
+            ></dx-pagination>
+        </div>
+    </div>
+    <dx-empty-state
+        title="Beep boop. That did not compute."
+        subtitle={emptyStateSubtitle}
+        if:true={showEmptyState}
+    ></dx-empty-state>
+</template>