@salesforcedevs/dx-components 0.54.1 → 0.54.6-alpha-1

package/lwc.config.json

@@ -1,8 +1,6 @@
 {
     "modules": [{ "dir": "src/modules" }],
     "expose": [
-        "base-elements/headerBase",
-        "base-elements/matchMediaElement",
         "dx/banner",
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
@@ -69,22 +67,24 @@
         "dx/typeBadge",
         "dx/typeBadgeGroup",
         "dx/vimeoPlayer",
-        "helpers/animations",
-        "helpers/button",
-        "helpers/card",
-        "helpers/code",
-        "helpers/commonHeader",
-        "helpers/reset",
-        "helpers/table",
-        "helpers/text",
-        "utils/analytics",
-        "utils/constants",
-        "utils/coveo",
-        "utils/dates",
-        "utils/highlight",
-        "utils/normalizers",
-        "utils/queryCoordinator",
-        "utils/recentSearches",
-        "utils/wordpress"
+        "dxBaseElements/headerBase",
+        "dxBaseElements/matchMediaElement",
+        "dxHelpers/animations",
+        "dxHelpers/button",
+        "dxHelpers/card",
+        "dxHelpers/code",
+        "dxHelpers/commonHeader",
+        "dxHelpers/reset",
+        "dxHelpers/table",
+        "dxHelpers/text",
+        "dxUtils/analytics",
+        "dxUtils/constants",
+        "dxUtils/coveo",
+        "dxUtils/dates",
+        "dxUtils/highlight",
+        "dxUtils/normalizers",
+        "dxUtils/queryCoordinator",
+        "dxUtils/recentSearches",
+        "dxUtils/wordpress"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.54.1",
+    "version": "0.54.6-alpha-1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -16,15 +16,16 @@
         "@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"
-    },
-    "gitHead": "2261fe819c0a82d687f1fe0bb9fe2f7dd6e73161"
+    }
 }

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,145 @@
+<template>
+    <div if:false={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <img
+                slot="control"
+                src="https://placekitten.com/300/300"
+                class="avatar avatar-small"
+            />
+            <div slot="content">
+                <div class="login-container logged-in">
+                    <img src={userInfo.avatarImgSrc} class="header-img" />
+                    <img
+                        src="https://placekitten.com/300/300"
+                        class="avatar avatar-medium"
+                    />
+                    <span class="heading">Jasmine Young</span>
+                    <span class="sub-heading">jyoung58</span>
+                    <div class="heading-links">
+                        <a href="#" class="inline-link">Switch account</a>
+                        &nbsp;&nbsp;|&nbsp;&nbsp;
+                        <a href="#" 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="#" 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="#" 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!
+                                    <a href="#" class="inline-link">
+                                        Learn more
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+    <div if:true={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <dx-button
+                class="login-control"
+                slot="control"
+                icon-symbol="user"
+                icon-position="left"
+                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="#" 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,78 @@
+import { api, LightningElement, track } from "lwc";
+import Cookie from "js-cookie";
+// import oauth2 from "salesforce-oauth2";
+
+// TODO: move to env vars
+// const TBID_CLIENT_ID = '3MVG982oBBDdwyHh3OFdQJTLxbk1dWC8NhBSiKvAsu3gn9m6WhiDKT8iLn34y4w6xsLeIHTbMbhuPPnGfYoW.';
+// const TBID_CLIENT_SECRET = 'FC1B4F3E83746CD6ED3A6356B2FCF671A0470C6ADB88BE1A9F288B2D58400BEA';
+// const TBID_COMMUNITY_URL = 'https://dev1-trailblazer-identity.cs192.force.com';
+const TBID_AUTH_URL = "https://tbid-auth-app-dev.herokuapp.com/tbid/dologin";
+const TBID_USERINFO_URL =
+    "https://dev1-trailblazer-identity.cs192.force.com/services/oauth2/userinfo";
+
+export interface UserInfo {
+    avatarImgSrc?: string;
+    firstName?: string;
+    lastName?: string;
+    username?: string;
+}
+
+export default class AvatarButton extends LightningElement {
+    @api size: "small" | "medium" | "large" = "medium";
+
+    @track
+    private userInfo: UserInfo = {};
+    private _isLoading = false;
+    private _tbidAccessToken: string | undefined;
+
+    private get isLoggedIn() {
+        return Boolean(this._tbidAccessToken);
+    }
+
+    connectedCallback() {
+        this._tbidAccessToken = Cookie.get("TBID");
+
+        if (this._tbidAccessToken) {
+            this.requestUserInfo(this._tbidAccessToken);
+        }
+    }
+
+    onLoginClick() {
+        if (!this.isLoggedIn) {
+            window.location.assign(TBID_AUTH_URL);
+        }
+    }
+
+    private updateAvatarWithUserInfo(userInfo: any) {
+        this.userInfo.avatarImgSrc = userInfo?.photos?.thumbnail;
+        // 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=" + accessToken
+            );
+
+            if (userInfoRes.ok) {
+                const userInfo = await userInfoRes.json();
+                this.updateAvatarWithUserInfo(userInfo);
+            } else {
+                if (userInfoRes.status === 403) {
+                    // Bad access token; try to refresh the token
+                }
+            }
+        } catch (ex) {
+            // TODO: Something not directly related to auth went wrong. Unsure what to do here.
+        }
+
+        this._isLoading = false;
+    }
+
+    private handleAuthFailure() {}
+}

package/src/modules/dx/banner/banner.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 .container {
     --primary-color: var(--dx-g-cloud-blue-vibrant-50);
@@ -42,5 +42,5 @@
 
 .container dx-icon {
     margin-right: var(--dx-g-spacing-sm);
-    margin-top:var(  --dx-g-spacing-2xs)
+    margin-top: var(--dx-g-spacing-2xs);
 }

package/src/modules/dx/breadcrumbs/breadcrumbs.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Breadcrumb, Option } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { Breadcrumb, OptionWithNested } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 
 type LabelMap = { [href: string]: string };
 type NormalizedBreadcrumb = Breadcrumb & { last: boolean; asLink: boolean };
@@ -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) : {};
     }
 
@@ -82,16 +85,14 @@ export default class Breadcrumbs extends LightningElement {
         breadcrumbs: Breadcrumb[]
     ): NormalizedBreadcrumb[] {
         const { length } = breadcrumbs;
-        return breadcrumbs.map(
-            (breadcrumb, i): NormalizedBreadcrumb => {
-                const last = i === length - 1;
-                return {
-                    ...breadcrumb,
-                    asLink: this.hideCurrentLocation || !last,
-                    last
-                };
-            }
-        );
+        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
+            const last = i === length - 1;
+            return {
+                ...breadcrumb,
+                asLink: this.hideCurrentLocation || !last,
+                last
+            };
+        });
     }
 
     private get breadcrumbDropdownOptions() {

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

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     width: min-content;
@@ -108,6 +108,15 @@
     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 {

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

@@ -17,7 +17,7 @@ export default class Button extends LightningElement {
     @api iconSymbol?: IconSymbol;
     @api iconPosition?: "right" | "left" = "right";
     @api loading: boolean = false;
-    @api size: "large" | "small" = "small";
+    @api size: "large" | "hero" | "small" = "small";
     @api variant: ButtonVariant = "primary";
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";

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

@@ -1,4 +1,4 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 dx-card-content {
     --dx-c-body-max-lines: 3;

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

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-callout {
     position: relative;

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
-import { track } from "utils/analytics";
+import { toDxColor } from "dxUtils/css";
+import { track } from "dxUtils/analytics";
 
 export default class CardCallout extends LightningElement {
     @api backgroundColor: string = "indigo-vibrant-40";

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

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     /* because this is used within other cards */

package/src/modules/dx/cardContent/cardContent.ts

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toDxColor } from "utils/css";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toDxColor } from "dxUtils/css";
 
 export default class CardContent extends LightningElement {
     @api authorHref?: string | null = null;

package/src/modules/dx/cardDemo/cardDemo.css

@@ -1 +1 @@
-@import "helpers/card";
+@import "dxHelpers/card";

package/src/modules/dx/cardDocs/cardDocs.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     --dx-c-heading-max-lines: 4;

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { stopPropagationOnSlotted } from "utils/slot";
+import { stopPropagationOnSlotted } from "dxUtils/slot";
 
 export default class CardDocs extends LightningElement {
     @api body!: string;

package/src/modules/dx/cardEvent/cardEvent.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-event {
     display: flex;

package/src/modules/dx/cardExpanded/cardExpanded.css

@@ -1,4 +1,4 @@
-@import "helpers/text";
+@import "dxHelpers/text";
 
 :host {
     display: block;