@salesforcedevs/dx-components 0.55.2 → 0.55.3-alpha-3

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.2",
+    "version": "0.55.3-alpha-3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -16,12 +16,15 @@
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
         "debounce": "^1.2.0",
+        "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,133 @@
+: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);
+    --dx-c-slot-empty-width: max-content;
+}
+
+.avatar-small-container {
+    padding: 2px 0;
+}
+
+.avatar {
+    border-radius: 100%;
+    border: 2px solid #0d9dda;
+}
+
+.avatar.avatar-small {
+    display: block;
+    height: var(--dx-g-spacing-lg);
+    width: var(--dx-g-spacing-lg);
+}
+
+.avatar.avatar-medium {
+    margin-bottom: 14px;
+    width: var(--dx-g-spacing-2xl);
+}
+
+.login-control {
+    margin-left: var(--dx-g-spacing-smd);
+}
+
+.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,149 @@
+<template>
+    <div if:true={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <div slot="control" class="avatar-small-container login-control">
+                <img src={userInfo.avatarImgSrc} class="avatar avatar-small" />
+            </div>
+            <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,100 @@
+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/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>

package/src/modules/dx/cardGridDocs/cardGridDocs.ts

@@ -0,0 +1,86 @@
+import { LightningElement, api, track } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+import { DocsCard } from "typings/custom";
+
+const stringsMatch = (val1?: string, val2?: string): boolean => {
+    return (
+        typeof val1 === "string" &&
+        typeof val2 === "string" &&
+        val1.toLowerCase().includes(val2.toLowerCase())
+    );
+};
+
+export default class CardGridDocs extends LightningElement {
+    @api pageSize = 24;
+    @api
+    get cards(): DocsCard[] {
+        return this._cards;
+    }
+    set cards(value) {
+        this._cards = toJson(value);
+    }
+
+    private page: number = 1;
+    private _cards: DocsCard[] = [];
+    @track
+    private value?: string;
+
+    private get filteredCards(): DocsCard[] {
+        return this.value
+            ? this.cards.filter(({ title, body, label }) =>
+                  [title, body, label].some((val) =>
+                      stringsMatch(val, this.value)
+                  )
+              )
+            : this.cards;
+    }
+
+    private get currentPageCards() {
+        return this.filteredCards.slice(
+            this.startingRecord - 1,
+            this.endingRecord
+        );
+    }
+
+    private get startingRecord() {
+        return this.page === 1
+            ? this.page
+            : (this.page - 1) * this.pageSize + 1;
+    }
+
+    private get endingRecord() {
+        const defaultEndingRecord = this.pageSize * this.page;
+        return defaultEndingRecord > this.filteredCards.length
+            ? this.filteredCards.length
+            : defaultEndingRecord;
+    }
+
+    private get totalPages() {
+        return Math.ceil(this.filteredCards.length / this.pageSize);
+    }
+
+    private get hidePagination() {
+        return this.totalPages < 2;
+    }
+
+    private get emptyStateSubtitle() {
+        return "No results" + (this.value !== "" ? ` for "${this.value}"` : "");
+    }
+
+    private get showEmptyState() {
+        return !this.filteredCards.length;
+    }
+
+    private onSearchChange(e: InputEvent): void {
+        const detail = `${e.detail}`;
+        this.value = detail === "" ? undefined : detail;
+
+        if (this.startingRecord > this.cards.length) {
+            this.page = 1;
+        }
+    }
+
+    private goToPage(e: CustomEvent) {
+        this.page = e.detail;
+    }
+}

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";
+            }
+        );
+    }
+}

package/src/modules/dx/filterMenu/filterMenu.css

@@ -1,4 +1,5 @@
 @import "dxHelpers/reset";
+@import "dxHelpers/scrollbar";
 
 :host {
     --dx-c-filter-menu-margin: 0;
@@ -37,8 +38,14 @@
 }
 
 .title-group {
+    display: flex;
+}
+
+.title-group-main {
     position: relative;
+    justify-content: space-between;
     margin: 0 var(--horizontal-padding);
+    width: calc(100% - 2 * var(--horizontal-padding));
 }
 
 .filter-menu-title {
@@ -77,9 +84,6 @@ label {
 }
 
 svg {
-    position: absolute;
-    right: 0;
-    top: 0;
     background: transparent;
     stroke: var(--dx-g-blue-vibrant-50);
 }
@@ -105,6 +109,8 @@ svg,
 
 .checkbox-year {
     --dx-c-filter-menu-font-weight: bold;
+
+    width: 130px;
 }
 
 .view-more-btn {

package/src/modules/dx/filterMenu/filterMenu.html

@@ -1,6 +1,6 @@
 <template>
     <form class="container">
-        <span class="title-group" onclick={dropdownToggle}>
+        <span class="title-group-main title-group" onclick={dropdownToggle}>
             <p class="filter-menu-title">{title}</p>
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -16,7 +16,7 @@
                 <polyline points="6 9 12 15 18 9"></polyline>
             </svg>
         </span>
-        <ul class="nested first-layer">
+        <ul class="nested first-layer always-visible-scrollbar">
             <li>
                 <template if:true={isBaseVariant}>
                     <template for:each={filterMenuOptions} for:item="option">
@@ -37,33 +37,36 @@
                             for:item="option"
                         >
                             <li key={option.id}>
-                                <dx-checkbox-native
-                                    class="checkbox-year"
-                                    value={option}
-                                    onchange={onChange}
-                                >
-                                    {option.name} ({option.totalNumberOfPosts})
-                                </dx-checkbox-native>
-                                <span onclick={dropdownToggle}>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="
-                                            feather feather-chevron-down
-                                            year-svg
-                                        "
+                                <div class="title-group">
+                                    <dx-checkbox-native
+                                        class="checkbox-year"
+                                        value={option}
+                                        onchange={onChange}
                                     >
-                                        <polyline
-                                            points="6 9 12 15 18 9"
-                                        ></polyline>
-                                    </svg>
-                                </span>
+                                        {option.name}
+                                        ({option.totalNumberOfPosts})
+                                    </dx-checkbox-native>
+                                    <span onclick={dropdownToggle}>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            width="24"
+                                            height="24"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke-width="2"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            class="
+                                                feather feather-chevron-down
+                                                year-svg
+                                            "
+                                        >
+                                            <polyline
+                                                points="6 9 12 15 18 9"
+                                            ></polyline>
+                                        </svg>
+                                    </span>
+                                </div>
                                 <ul class="nested second-layer">
                                     <template
                                         for:each={option.months}

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
 
 interface Option {
     id: number;
@@ -8,9 +9,17 @@ interface Option {
 export default class FilterMenu extends LightningElement {
     @api name: string = "";
     @api title: string = "Filter Menu";
-    @api options: Option[] = [];
     @api variant: string = "base";
 
+    @api
+    get options(): Option[] {
+        return this._options;
+    }
+    set options(value: any) {
+        this._options = toJson(value);
+    }
+
+    private _options: Option[] = [];
     private showMore: boolean = false;
 
     get isBaseVariant() {
@@ -99,9 +108,10 @@ export default class FilterMenu extends LightningElement {
     }
 
     private dropdownToggle(e: any) {
-        e.currentTarget.parentElement
-            .querySelector(".nested")
-            .classList.toggle("active");
+        (
+            e.currentTarget.parentElement.querySelector(".nested") ||
+            e.currentTarget.parentElement.parentElement.querySelector(".nested")
+        ).classList.toggle("active");
 
         e.currentTarget.querySelector("svg").classList.toggle("caret-down");
     }

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

@@ -67,6 +67,8 @@ export default class Grid extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
+        this._itemCount = (
+            e.target as LightningSlotElement
+        ).assignedElements().length;
     }
 }

package/src/modules/dx/header/header.html

@@ -26,6 +26,7 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <dx-avatar-button></dx-avatar-button>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
                         aria-label="Sign Up For Salesforce Developer Edition"

package/src/modules/dx/logo/logo.ts

@@ -3,6 +3,6 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
-    @api imgAlt: string = "Salesforce log";
+    @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dxHelpers/scrollbar/scrollbar.css

@@ -0,0 +1,31 @@
+/* a truly always visible scrollbar is only possible on webkit --
+on firefox we are only able to sync the styling
+but cannot force the scrollbar to appear for users */
+
+/* mozilla styles */
+.always-visible-scrollbar {
+    scrollbar-color: #757575 transparent;
+    scrollbar-width: thin;
+}
+
+/* webkit styles */
+.always-visible-scrollbar::-webkit-scrollbar {
+    width: 14px;
+}
+
+.always-visible-scrollbar::-webkit-scrollbar-thumb {
+    background-clip: content-box;
+    border: 5px solid transparent;
+    border-radius: 10px;
+    box-shadow: #757575 inset 0 0 0 10px;
+}
+
+.always-visible-scrollbar::-webkit-scrollbar-corner {
+    background-color: transparent;
+}
+
+.always-visible-scrollbar::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+}