@salesforcedevs/dx-components 1.3.246-canary.2 → 1.3.247

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.246-canary.2",
+    "version": "1.3.247",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,6 @@
     },
     "volta": {
         "node": "16.19.1"
-    }
+    },
+    "gitHead": "fdadc22dcca148e26f1589d4de64b8445899f39d"
 }

package/src/modules/dx/audio/audio.css

@@ -30,8 +30,10 @@
     top: 1px;
 }
 
-/* The "inner" container/main part of the player, inside the outer, colored border */
-/* Current design goal of this element and all other "inner" elements is to closely match native controls as they appear in Chrome */
+/*
+   The "inner" container/main part of the player, inside the outer, colored border.
+   Current design goal of this element and all other "inner" elements is to closely match native controls as they appear in Chrome
+*/
 .player {
     --dx-c-popover-border-radius: 0;
     --dx-c-popover-padding: 0;
@@ -72,7 +74,6 @@
     border-radius: 16px;
     cursor: pointer;
     height: 4px;
-    outline: none;
     width: 100%;
 }
 
@@ -123,24 +124,29 @@
 .player-volume-container {
     align-items: center;
     border-radius: var(--dx-g-spacing-xs);
+    height: 24px;
     display: flex;
-    padding-left: 2px;
+    padding-left: 6px;
+    position: relative;
     transition: 0.2s ease-out;
     width: 24px;
 }
 
 .player-volume-container .player-volume-slider {
-    margin: 0;
-    visibility: hidden;
-}
-
-.player-volume-container:hover {
-    background: var(--sds-g-gray-4);
-    width: 100px;
+    /* HTML5 boilerplate .visuallyhidden equivalent, for hiding an element but leaving it focusable */
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
 }
 
-.player-volume-container:hover .player-volume-slider {
-    visibility: visible;
+.player-volume-container .player-volume-button {
+    position: absolute;
+    right: 0;
 }
 
 /* Three dot menu, for download and playback speed settings */
@@ -158,8 +164,8 @@
 }
 
 /* Speed selection items have a large left padding in Chrome, which we are mimicking */
-.player-threedot-menu li.player-speed-item {
-    padding-left: calc(var(--dx-c-threedot-menu-item-padding) * 2);
+.player-threedot-menu .player-speed-item {
+    padding-left: calc(var(--dx-c-threedot-menu-item-padding) * 3);
 }
 
 .player-threedot-menu a {
@@ -189,8 +195,10 @@
     transform: translateY(-50%);
 }
 
-/* All clickable elements inside of the three dot menu are buttons, except for the download link */
-/* dx-button is not used here because these things barely look like buttons */
+/*
+   All clickable elements inside of the three dot menu are buttons, except for the download link
+   dx-button is not used here because these things barely look like buttons
+*/
 .player-threedot-menu button {
     background: transparent;
     border: 0;
@@ -223,16 +231,27 @@
         opacity: 1;
     }
 
+    .player-volume-container.focused-by-keyboard,
     .player-volume-container:hover {
         background: var(--sds-g-gray-4);
-        width: 100px;
+        width: max(12%, 150px);
     }
 
+    .player-volume-container.focused-by-keyboard .player-volume-slider,
     .player-volume-container:hover .player-volume-slider {
-        visibility: visible;
+        /* Undo .visuallyhidden */
+        clip: unset;
+        height: 4px;
+        margin-right: 24px; /* leave room for the button */
+        overflow: visible;
+        position: relative;
+        width: 100%;
     }
 
-    .player-threedot-menu li:hover {
+    .player-threedot-menu a:focus,
+    .player-threedot-menu a:hover,
+    .player-threedot-menu button:focus,
+    .player-threedot-menu button:hover {
         background: var(--sds-g-gray-4);
     }
 }

package/src/modules/dx/audio/audio.html

@@ -1,5 +1,11 @@
 <template>
-    <div class="custom-audio-player">
+    <div
+        aria-label={playerAriaLabel}
+        class="custom-audio-player"
+        lwc:ref="container"
+        onkeyup={handleContainerKeyUp}
+        tabindex="0"
+    >
         <dx-icon
             class="listen-icon"
             size="xsmall"
@@ -8,24 +14,13 @@
         ></dx-icon>
         <span class="listen-text">Listen to this article</span>
         <div class="player">
-            <template lwc:if={isPlaying}>
-                <dx-button
-                    aria-label="Pause"
-                    class="player-pause-button"
-                    icon-symbol="pause"
-                    variant="custom"
-                    onclick={handleAudioPause}
-                ></dx-button>
-            </template>
-            <template lwc:else>
-                <dx-button
-                    aria-label="Play"
-                    class="player-play-button"
-                    icon-symbol="play"
-                    variant="custom"
-                    onclick={handleAudioPlay}
-                ></dx-button>
-            </template>
+            <dx-button
+                aria-label={mainControlAriaLabel}
+                class="player-play-pause-button"
+                icon-symbol={mainControlIconSymbol}
+                variant="custom"
+                onclick={handleMainControlClick}
+            ></dx-button>
             <div class="player-time">
                 <span class="player-current-time">{formattedCurrentTime}</span>
                 &nbsp;/&nbsp;
@@ -41,13 +36,14 @@
                 onchange={handleSeekChange}
                 oninput={handleSeekInput}
             />
-            <div class="player-volume-container">
+            <div class="player-volume-container" lwc:ref="playerVolumeContainer" onfocusin={handleVolumeFocusIn} onfocusout={handleVolumeFocusOut}>
                 <input
                     aria-label="Volume Level"
                     class="player-volume-slider"
                     type="range"
                     max="100"
                     lwc:ref="playerVolumeSlider"
+                    tabindex="0"
                     value={volume}
                     oninput={handleVolumeInput}
                 />
@@ -70,7 +66,7 @@
                     slot="control"
                     variant="custom"
                 ></dx-button>
-                <div class="player-threedot-menu" slot="content">
+                <div class="player-threedot-menu" lwc:ref="playbackSpeedMenu" slot="content" tabindex="0">
                     <template lwc:if={isSettingPlaybackSpeed}>
                         <div>
                             <ul>
@@ -91,9 +87,11 @@
                                 >
                                     <li
                                         key={playbackSpeedDatum.value}
-                                        class="player-speed-item"
                                     >
-                                        <button onclick={handleSetPlaybackSpeed}>
+                                        <button
+                                            class="player-speed-item"
+                                            onclick={handleSetPlaybackSpeed}
+                                        >
                                             {playbackSpeedDatum.value}
                                         </button>
                                         <dx-icon
@@ -113,6 +111,7 @@
                                 <a
                                     href={audioSrc}
                                     download
+                                    tabindex="0"
                                     target="_blank"
                                     rel="noopener"
                                 >

package/src/modules/dx/audio/audio.ts

@@ -9,6 +9,7 @@ type TrackColors = {
     buffer?: string;
     after: string;
 };
+// eslint-disable-next-line no-use-before-define
 type PlaybackSpeed = (typeof formattedPlaybackSpeeds)[number];
 
 /*
@@ -46,12 +47,15 @@ const formattedPlaybackSpeeds = [
 
 export default class Audio extends LightningElementWithTypedRefs<{
     audioElement: HTMLAudioElement;
+    container: HTMLDivElement;
+    playbackSpeedMenu: HTMLDivElement;
     playbackSpeedPopover: Popover;
     playerSeekSlider: HTMLInputElement;
     playerVolumeSlider: HTMLInputElement;
+    playerVolumeContainer: HTMLDivElement;
 }> {
     @api audioSrc!: string;
-    @api postName!: string;
+    @api audioTitle!: string;
 
     private _bufferedTimeRanges?: TimeRanges;
     private _currentTimeSeconds = 0;
@@ -60,6 +64,7 @@ export default class Audio extends LightningElementWithTypedRefs<{
     private animationFrameId: number | null = null; // controls movement of the timeline when audio is playing
     private currentPlaybackSpeed: PlaybackSpeed = "Normal";
     private didRender = false;
+    private isAnimating = false;
     private isPlaying = false;
     private isSettingPlaybackSpeed = false; // popover menu has two panes; this manages that state
     // `playbackSpeedData` tracks which value is selected, in a way useable by LWC for:each without requiring a separate sub-component
@@ -78,6 +83,18 @@ export default class Audio extends LightningElementWithTypedRefs<{
         return this.getFormatted(this.durationSeconds);
     }
 
+    private get mainControlAriaLabel() {
+        return this.isPlaying ? "Pause" : "Play";
+    }
+
+    private get mainControlIconSymbol() {
+        return this.isPlaying ? "pause" : "play";
+    }
+
+    private get playerAriaLabel() {
+        return `Audio: ${this.audioTitle}`;
+    }
+
     // NOTE that values with getters and setters here have side effects that update the UI elements.
     // This essentially makes these items the source of truth for the UI.
     private get bufferedTimeRanges() {
@@ -176,6 +193,14 @@ export default class Audio extends LightningElementWithTypedRefs<{
         this.bufferedTimeRanges = this.typedRefs.audioElement.buffered;
     };
 
+    handleMainControlClick = (event: Event) => {
+        if (this.isPlaying) {
+            this.handleAudioPause(event);
+        } else {
+            this.handleAudioPlay(event);
+        }
+    };
+
     handleAudioPlay = (event: Event) => {
         this.typedRefs.audioElement.play();
         this.syncTimeWithAudio();
@@ -253,9 +278,34 @@ export default class Audio extends LightningElementWithTypedRefs<{
         }
     };
 
+    handleVolumeFocusIn = () => {
+        this.typedRefs.playerVolumeContainer.classList.add(
+            "focused-by-keyboard"
+        );
+    };
+
+    handleVolumeFocusOut = (event: FocusEvent) => {
+        const { playerVolumeContainer } = this.typedRefs;
+        const isFocusingChildOfVolumeContainer = Array.from(
+            playerVolumeContainer.children
+        ).some((childElement) => event.relatedTarget === childElement);
+
+        if (!isFocusingChildOfVolumeContainer) {
+            this.typedRefs.playerVolumeContainer.classList.remove(
+                "focused-by-keyboard"
+            );
+        }
+    };
+
     // Set "pane" state for playback popover menu
     handlePlaybackSpeedClick = () => {
         this.isSettingPlaybackSpeed = true;
+        this.refocusPlaybackSpeedMenu();
+    };
+
+    // Sets "pane" state for popover back to the default
+    resetIsSettingPlaybackSpeed = () => {
+        this.isSettingPlaybackSpeed = false;
     };
 
     // Handle selection of a playback speed in the "three dot" menu
@@ -281,13 +331,23 @@ export default class Audio extends LightningElementWithTypedRefs<{
                 : parseFloat(selectedPlaybackSpeed);
     };
 
-    // Sets "pane" state for popover back to the default
-    resetIsSettingPlaybackSpeed = () => {
-        this.isSettingPlaybackSpeed = false;
+    handleContainerKeyUp = (event: KeyboardEvent) => {
+        if (event.key === " " && event.target === this.typedRefs.container) {
+            if (this.isPlaying) {
+                this.handleAudioPause(event);
+            } else {
+                this.handleAudioPlay(event);
+            }
+        }
     };
 
     /* END event handlers, BEGIN private utility methods */
 
+    // Called when menu's inner pane changes, ensuring focus is on the newly-displayed menu
+    private refocusPlaybackSpeedMenu = () => {
+        Promise.resolve().then(() => this.typedRefs.playbackSpeedMenu.focus());
+    };
+
     // Animates the seek slider (timeline) each frame so that it is N*Sync with current play
     // time. We do this using requestAnimationFrame so that we can temporarily cancel the
     // animating whenever the user is interacting with the slider.
@@ -378,7 +438,7 @@ export default class Audio extends LightningElementWithTypedRefs<{
         const payload = {
             event: eventType,
             media_action: action,
-            media_name: this.postName,
+            media_name: this.audioTitle,
             media_percentage_played:
                 this.durationSeconds === 0
                     ? this.durationSeconds

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

@@ -14,6 +14,7 @@ export default class CardBlogPost extends LightningElement {
     @api title!: string;
     @api authors?: Array<any> | null = null;
     @api origin?: string = "wordpress";
+    @api clickEvent?: () => void;
 
     // LWC is being compiled so that datetime is being interpreted as date-time
     // ONLY from from the implementation in dx-card-blog-post-provider
@@ -22,6 +23,10 @@ export default class CardBlogPost extends LightningElement {
     }
 
     private onLinkClick(event: Event) {
+        if (this.clickEvent) {
+            this.clickEvent();
+        }
+
         const payload = {
             click_text: this.title,
             click_url: `${window.location.origin}${this.href}`,

package/src/modules/dx/coveoRecommendations/coveoRecommendations.html

@@ -23,6 +23,7 @@
                     key={recommendation.id}
                     title={recommendation.yoast_head_json.title}
                     origin="coveo"
+                    click-event={recommendation.clickEvent}
                 ></dx-card-blog-post>
             </template>
         </dx-grid>

package/src/modules/dx/coveoRecommendations/coveoRecommendations.ts

@@ -1,11 +1,25 @@
 import { LightningElement, api } from "lwc";
 
 const SEARCH_HUB = "developerWebsiteBlogs";
+
+interface Recommendation {
+    originalCoveoData: {
+        uri: string;
+        title: string;
+        searchUid: string;
+        raw: {
+            permanentId: string;
+        };
+        "@source": string;
+    };
+    clickEvent: () => void;
+}
+
 export default class CoveoRecommendations extends LightningElement {
     @api coveoAuthToken!: string;
     @api coveoOrganizationId!: string;
 
-    _recommendations = [] as any[];
+    _recommendations = [] as Recommendation[];
 
     private get recommendations(): any[] {
         return this._recommendations || [];
@@ -46,10 +60,17 @@ export default class CoveoRecommendations extends LightningElement {
 
                     const blogDataLoadTasks = results
                         .slice(0, 3)
-                        .map(async (rec: any) => {
+                        .map(async (rec: any, index: number) => {
                             const slug = rec.uri.split("/").pop();
                             const blogDataUrl = `https://developer.salesforce.com/blogs/wp-json/wp/v2/posts?slug=${slug}&state=publish&_embed=wp:featuredmedia`;
-                            return (await (await fetch(blogDataUrl)).json())[0];
+                            const wordPressData = (
+                                await (await fetch(blogDataUrl)).json()
+                            )[0];
+                            wordPressData.originalCoveoData = rec;
+                            wordPressData.originalCoveoData.searchUid =
+                                json.searchUid;
+                            wordPressData.clickEvent =
+                                this.buildClickAnalyticsLogger(index);
                         });
                     this._recommendations = await Promise.all(
                         blogDataLoadTasks
@@ -92,4 +113,38 @@ export default class CoveoRecommendations extends LightningElement {
             }
         );
     };
+
+    buildClickAnalyticsLogger = (index: number) => () => {
+        const payload = {
+            anonymous: true,
+            documentPosition: index,
+            documentTitle: this._recommendations[index].originalCoveoData.title,
+            documentUrl: this._recommendations[index].originalCoveoData.uri,
+            language: "en",
+            originLevel1: SEARCH_HUB,
+            originLevel2: SEARCH_HUB,
+            actionCause: "recommendationOpen",
+            queryText: "", // This has to be included, but is empty, because recommendations use the 'search' endpoint with an empty query string
+            searchQueryUid: this._recommendations[index].originalCoveoData.uri,
+            sourceName:
+                this._recommendations[index].originalCoveoData["@source"],
+            customData: {
+                contentIDKey: "permanentId",
+                contentIDValue:
+                    this._recommendations[index].originalCoveoData.raw
+                        .permanentId
+            }
+        };
+        fetch(
+            `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua/v15/analytics/click`,
+            {
+                headers: {
+                    Authorization: `Bearer ${this.coveoAuthToken}`,
+                    "Content-Type": "application/json"
+                },
+                method: "POST",
+                body: JSON.stringify(payload)
+            }
+        );
+    };
 }

package/src/modules/dx/popover/popover.ts

@@ -6,6 +6,7 @@ import {
 } from "typings/custom";
 
 import {
+    autoUpdate,
     computePosition,
     flip,
     size,
@@ -31,6 +32,8 @@ const isEventOutsideElements = (
         );
 
 export default class Popover extends LightningElement {
+    private autoUpdateCleanup?: () => void;
+
     @api offset?: "small" | "medium";
     @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
     @api placement?: PopperPlacement = "bottom-start";
@@ -76,6 +79,10 @@ export default class Popover extends LightningElement {
             this._open = true;
             this.control.setAttribute("aria-expanded", "true");
 
+            if (this.popover) {
+                this.autoUpdateCleanup = autoUpdate(this.control, this.popover, this.setPosition);
+            }
+
             this.dispatchEvent(new CustomEvent("open"));
 
             setTimeout(() => {
@@ -88,6 +95,7 @@ export default class Popover extends LightningElement {
     @api
     closePopover(focusControl: boolean = false) {
         this._open = false;
+        this.autoUpdateCleanup?.();
         if (focusControl && this.control && this.control.focus) {
             this.control.focus();
         }