@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -1,96 +1,132 @@
 <template>
-    <div class={classname} part="container">
-        <div
-            if:true={label}
-            role={labelRole}
-            aria-level={labelAriaLevel}
-            class="label dx-text-heading-4"
-        >
-            {label}
-        </div>
-        <div class="main-content">
-            <div
-                role="heading"
-                aria-level={titleAriaLevel}
-                class="title dx-text-heading-2"
-            >
-                <a
-                    class="title-link"
-                    if:true={href}
-                    href={href}
-                    target={target}
-                    onmouseenter={setLinkHovered}
-                    onmouseleave={setLinkInactive}
-                >
-                    {title}
-                </a>
-                <template if:false={href}>{title}</template>
+    <div class={classname} part="container" style={style}>
+        <div class="title-bar" lwc:if={label}>
+            <div class="left-div">
+                <template lwc:if={labelAsPrimaryHeading}>
+                    <h1 class="label dx-text-display-6">
+                        <dx-formatted-rich-text
+                            value={label}
+                        ></dx-formatted-rich-text>
+                    </h1>
+                </template>
+                <template lwc:else>
+                    <p class="label dx-text-display-6">
+                        <dx-formatted-rich-text
+                            value={label}
+                        ></dx-formatted-rich-text>
+                    </p>
+                </template>
+            </div>
+            <div class="right-div">
+                <div>
+                    <slot name="language-selector"></slot>
+                </div>
+                <template lwc:if={isDarkModeEnabled}>
+                    <button
+                        aria-label="Toggle dark mode"
+                        class="dark-mode-button"
+                        onclick={onDarkModeButtonClick}
+                    >
+                        <div class="dark-mode-icon"></div>
+                    </button>
+                </template>
             </div>
-            <div class="authors" if:true={authors}>
-                <template for:each={authors} for:item="author">
-                    <dx-image-and-label
-                        key={author.key}
-                        img-src={author.imgSrc}
-                        img-size={author.imgSize}
-                        label={author.name}
-                        href={author.href}
-                    ></dx-image-and-label>
+        </div>
+        <div class="container-layout">
+            <div class="featured-content-main-content">
+                <template lwc:if={labelAsPrimaryHeading}>
+                    <h2 class="title dx-text-display-2">
+                        <a
+                            class="title-link"
+                            lwc:if={href}
+                            href={href}
+                            target={target}
+                            onmouseenter={setLinkHovered}
+                            onmouseleave={setLinkInactive}
+                        >
+                            {header}
+                        </a>
+                        <template lwc:else>{header}</template>
+                    </h2>
+                </template>
+                <template lwc:else>
+                    <h1 class="title dx-text-display-2">
+                        <a
+                            class="title-link"
+                            lwc:if={href}
+                            href={href}
+                            target={target}
+                            onmouseenter={setLinkHovered}
+                            onmouseleave={setLinkInactive}
+                        >
+                            {header}
+                        </a>
+                        <template lwc:else>{header}</template>
+                    </h1>
                 </template>
+                <div class="authors" lwc:if={authors}>
+                    <template for:each={authors} for:item="author">
+                        <dx-image-and-label
+                            key={author.key}
+                            img-src={author.imgSrc}
+                            img-size={author.imgSize}
+                            label={author.name}
+                            href={author.href}
+                        ></dx-image-and-label>
+                    </template>
+                </div>
+                <span class="body dx-text-body-1">{body}</span>
+                <div class="buttons" lwc:if={hasButtons}>
+                    <dx-button
+                        lwc:if={ctaPrimaryLabel}
+                        href={ctaPrimaryHref}
+                        icon-symbol={ctaPrimarySymbol}
+                        target={ctaPrimaryTarget}
+                        size="large"
+                    >
+                        {ctaPrimaryLabel}
+                    </dx-button>
+                    <dx-button
+                        lwc:if={ctaSecondaryLabel}
+                        href={ctaSecondaryHref}
+                        variant="quaternary"
+                        icon-symbol={ctaSecondarySymbol}
+                        target={ctaSecondaryTarget}
+                        size="large"
+                    >
+                        {ctaSecondaryLabel}
+                    </dx-button>
+                </div>
+                <div class="slot-container">
+                    <slot onslotchange={onSlotChange}></slot>
+                </div>
+                <div
+                    class={backgroundImageClass}
+                    lwc:if={hasBackgroundImage}
+                    lwc:dom="manual"
+                ></div>
             </div>
-            <span class="body dx-text-body-1">{body}</span>
-            <div class="slot-container">
-                <slot onslotchange={onSlotChange}></slot>
+            <div lwc:if={hasPlainImage} class="image-container">
+                <img src={imgSrc} alt={imgAlt} />
             </div>
-            <div
-                class={backgroundImageClass}
-                if:true={hasBackgroundImage}
-                lwc:dom="manual"
-            ></div>
+            <a
+                lwc:if={hasLinkedImage}
+                href={href}
+                target={target}
+                class="image-container"
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
+            >
+                <img src={imgSrc} alt={imgAlt} />
+            </a>
         </div>
-        <div if:true={hasPlainImage} class="image-container">
-            <img src={imgSrc} alt={imgAlt} />
+        <div class="blue-circle" lwc:if={hasIcon}>
+            <dx-icon
+                class="icon"
+                size="2xlarge"
+                symbol={icon}
+                sprite="salesforcebrand"
+            ></dx-icon>
         </div>
-        <a
-            if:true={hasLinkedImage}
-            href={href}
-            target={target}
-            class="image-container"
-            onmouseenter={setLinkHovered}
-            onmouseleave={setLinkInactive}
-        >
-            <img src={imgSrc} alt={imgAlt} />
-        </a>
-        <svg
-            class="swoop-silhouette"
-            width="1920px"
-            height="331px"
-            viewBox="0 0 1920 331"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            preserveAspectRatio="none"
-        >
-            <defs>
-                <path
-                    d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
-                    id="path-1"
-                ></path>
-            </defs>
-            <g
-                id="Documentation-landing-page"
-                stroke="none"
-                stroke-width="1"
-                fill="none"
-                fill-rule="evenodd"
-            >
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use
-                    id="Combined-Shape"
-                    fill="#FFFFFF"
-                    xlink:href="#path-1"
-                ></use>
-            </g>
-        </svg>
     </div>
 </template>

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -1,35 +1,65 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toJson } from "utils/normalizers";
-import { ImageAndLabel } from "../imageAndLabel";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 import svgs from "./svgs";
+import ImageAndLabel from "dx/imageAndLabel";
+import {
+    dispatchDarkModeToggleEvent,
+    isDarkModeEnabled
+} from "dx/darkModeManager";
 
 export default class FeaturedContentHeader extends LightningElement {
     @api label?: string | null = null;
     @api labelAsPrimaryHeading: boolean = false;
     @api body!: string;
+    @api ctaPrimaryLabel?: string;
+    @api ctaPrimaryHref?: string;
+    @api ctaPrimarySymbol?: string;
+    @api ctaPrimaryTarget?: string;
+    @api ctaSecondaryLabel?: string;
+    @api ctaSecondaryHref?: string;
+    @api ctaSecondarySymbol?: string;
+    @api ctaSecondaryTarget?: string;
     @api imgSrc?: string;
     @api imgAlt?: string = "Featured content image";
     @api imgPlacement?: "inline" | "below" = "inline";
-    @api dark: boolean = false;
     @api href?: string;
     @api target?: string | null = null;
-    @api title!: string;
-    @api backgroundImg?: "trees" | "codey" | "blog" | "moon" | null = null;
+    @api header!: string;
+    @api backgroundImg?: string;
+    @api backgroundImgId:
+        | "trees"
+        | "codey"
+        | "blog"
+        | "moon"
+        | "trial"
+        | "big-moon"
+        | null = null;
+    @api noSwoop: boolean = false;
+    @api dark: boolean = false;
+    @api icon: string = "";
+    @api swoopUnderColor: string = "var(--dx-g-fch-swoop-under-color)";
+    @api enableDarkModeToggle: boolean = false;
 
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;
     private isLinkHovered: boolean = false;
-
+    private progressPodcastPlayed = {
+        percent25: false,
+        percent50: false,
+        percent75: false,
+        percent100: false
+    };
     // ! Move this map away from the component and probably the filter too.
     @api
     get authors() {
         if (this._authors && this._authors.length) {
             return this._authors!.map((author, index) => ({
                 ...author,
-                imgSrc: author.avatar_urls?.["24"] || author.imgSrc,
+                // @ts-ignore we're doing some hacky stuff to get at LWC internals here
+                imgSrc: author.image_src,
                 key: index
             }));
         }
@@ -46,13 +76,28 @@ export default class FeaturedContentHeader extends LightningElement {
         return cx(
             "container",
             this.imgSrc && `img-placement_${this.imgPlacement}`,
-            this.dark && "variant_dark",
+            this.dark && "variant_intense",
             this.isLinkHovered && "link-hovered",
             !this.isSlotEmpty && "has-slotted",
-            this.backgroundImg && `custom-bg-${this.backgroundImg}`
+            this.backgroundImgId && `custom-bg-${this.backgroundImgId}`
+        );
+    }
+
+    private get hasButtons() {
+        return this.ctaPrimaryLabel && this.ctaSecondaryLabel;
+    }
+
+    private get style() {
+        return cx(
+            this.backgroundImg &&
+                `--background-image: url(${this.backgroundImg});`
         );
     }
 
+    private get isDarkModeEnabled() {
+        return this.enableDarkModeToggle && isDarkModeEnabled();
+    }
+
     private get hasPlainImage() {
         return this.imgSrc && !this.href;
     }
@@ -62,28 +107,20 @@ export default class FeaturedContentHeader extends LightningElement {
     }
 
     private get hasBackgroundImage() {
-        return this.backgroundImg !== null;
+        return this.backgroundImgId !== null;
+    }
+
+    private get hasIcon(): boolean {
+        return this.icon !== "" && this.backgroundImgId === "big-moon";
     }
 
     private get backgroundImageClass() {
         return cx(
             "bg-image-container",
-            this.backgroundImg && `bg-${this.backgroundImg}`
+            this.backgroundImgId && `bg-${this.backgroundImgId}`
         );
     }
 
-    private get labelRole(): string | null {
-        return this.labelAsPrimaryHeading ? "heading" : null;
-    }
-
-    private get labelAriaLevel(): string | null {
-        return this.labelAsPrimaryHeading ? "1" : null;
-    }
-
-    private get titleAriaLevel(): string {
-        return this.labelAsPrimaryHeading ? "2" : "1";
-    }
-
     private setLinkHovered() {
         this.isLinkHovered = true;
     }
@@ -92,22 +129,134 @@ export default class FeaturedContentHeader extends LightningElement {
         this.isLinkHovered = false;
     }
 
-    private onSlotChange(e: LightningSlotElement): void {
+    private onDarkModeButtonClick() {
+        dispatchDarkModeToggleEvent();
+    }
+
+    private onSlotChange(e: any): void {
         this.isSlotEmpty = isSlotEmpty(e);
+        const slot = e.target;
+        const slotElements = slot.assignedElements();
+
+        if (slotElements.length) {
+            const slotContentElement = slotElements[0];
+            const playerElement = slotContentElement?.shadowRoot?.querySelector(
+                "audio"
+            ) as HTMLAudioElement;
+            if (playerElement) {
+                playerElement.addEventListener("play", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    this.trackAnalytics(
+                        event,
+                        "play",
+                        playerState.timePlayed,
+                        playerState.percentagePlayed
+                    );
+                });
+
+                playerElement.addEventListener("pause", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    this.trackAnalytics(
+                        event,
+                        "pause",
+                        playerState.timePlayed,
+                        playerState.percentagePlayed
+                    );
+                });
+
+                playerElement.addEventListener("timeupdate", (event: Event) => {
+                    const playerState = this.handlePlayerState(playerElement);
+                    if (
+                        (playerState.percentagePlayed === 25 &&
+                            !this.progressPodcastPlayed.percent25) ||
+                        (playerState.percentagePlayed === 50 &&
+                            !this.progressPodcastPlayed.percent50) ||
+                        (playerState.percentagePlayed === 75 &&
+                            !this.progressPodcastPlayed.percent75) ||
+                        (playerState.percentagePlayed === 100 &&
+                            !this.progressPodcastPlayed.percent100)
+                    ) {
+                        this.trackAnalytics(
+                            event,
+                            "progress",
+                            playerState.timePlayed,
+                            playerState.percentagePlayed
+                        );
+                    }
+                });
+            }
+        }
     }
 
     renderedCallback(): void {
         // Setting the svgs with innerHTML prevents their IDs from being rewritten
         // which is necessary to preserve the svg masking and other effects
-        if (this.backgroundImg && svgs[this.backgroundImg]) {
-            const bgSvg = this.template.querySelector(".bg-image-container");
+        if (this.backgroundImgId && this.backgroundImgId in svgs) {
+            const bgSvg = this.template?.querySelector(".bg-image-container");
             if (bgSvg) {
                 // eslint-disable-next-line @lwc/lwc/no-inner-html
                 bgSvg.innerHTML = `
-                    ${svgs[this.backgroundImg].desktop}
-                    ${svgs[this.backgroundImg].mobile}
+                    ${svgs[this.backgroundImgId as keyof typeof svgs].desktop}
+                    ${svgs[this.backgroundImgId as keyof typeof svgs].mobile}
                 `;
             }
         }
     }
+
+    private trackAnalytics(
+        event: Event,
+        action: "play" | "pause" | "progress",
+        timePlayed: number,
+        percentagePlayed: number
+    ) {
+        let trackEvent = null;
+        switch (action) {
+            case "play":
+                trackEvent = "custEv_podcastPlay";
+                break;
+            case "pause":
+                trackEvent = "custEv_podcastPause";
+                break;
+            case "progress":
+                trackEvent = "custEv_podcastProgress";
+                break;
+            default:
+                trackEvent = null;
+        }
+
+        if (!trackEvent) {
+            return;
+        }
+
+        track(event.target!, trackEvent, {
+            media_name: this.header,
+            media_action: action,
+            media_episode: this.header.split(":")[0],
+            media_percentage_played: percentagePlayed,
+            media_seconds_played: timePlayed,
+            media_type: "podcast"
+        });
+
+        if (Math.trunc(percentagePlayed) === 25) {
+            this.progressPodcastPlayed.percent25 = true;
+        } else if (Math.trunc(percentagePlayed) === 50) {
+            this.progressPodcastPlayed.percent50 = true;
+        } else if (Math.trunc(percentagePlayed) === 75) {
+            this.progressPodcastPlayed.percent75 = true;
+        } else if (Math.trunc(percentagePlayed) === 100) {
+            this.progressPodcastPlayed.percent100 = true;
+        }
+    }
+
+    private handlePlayerState(player: HTMLAudioElement) {
+        let timePlayed = 0;
+        let percentagePlayed = 0;
+        if (player) {
+            timePlayed = player.currentTime / 1000;
+            percentagePlayed = Math.trunc(
+                (player.currentTime * 100) / player.duration
+            );
+        }
+        return { timePlayed, percentagePlayed };
+    }
 }

package/src/modules/dx/featuredContentHeader/svgs.ts

@@ -4,11 +4,12 @@ const treesDesktop =
 const treesMobile =
     '<svg class="trees-mobile" width="127" height="81" viewBox="0 0 127 81" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="#3A49DA" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linejoin="round"><path d="M112.608 79.254c7.091 0 12.84-5.76 12.84-12.866 0-7.107-5.749-12.867-12.84-12.867H64.566" stroke-linecap="round"/><path d="M48.603 2.012L0 2"/><path stroke-linecap="round" d="M33.65 27.729h14.132M48.442 2c7.09 0 12.84 5.76 12.84 12.866s-5.75 12.866-12.84 12.866M33.067 27.794c-7.09 0-12.84 5.761-12.84 12.866 0 7.107 5.75 12.867 12.84 12.867h12.714M86.379 26.977s-7.5-1.071-7.5-6.161M71.377 26.977s7.5-1.071 7.5-6.161M87.88 34.665s-8.948-1.285-8.948-7.394M69.916 34.665s9.002-1.285 9.002-7.394M87.88 43.025s-8.948-1.286-8.948-7.394M69.916 43.025s9.002-1.286 9.002-7.394M78.916 21.536v31.055M97.987 9.796s7.5-1.072 7.5-6.162M112.989 9.796s-7.5-1.072-7.5-6.162M96.486 17.485s8.948-1.286 8.948-7.394M114.45 17.485s-9.002-1.286-9.002-7.394M96.486 25.843s8.948-1.285 8.948-7.394M114.45 25.843s-9.002-1.285-9.002-7.394M97.845 33.551s7.589-1.09 7.589-6.27M113.083 33.551s-7.634-1.09-7.634-6.27M97.845 42.25s7.589-1.092 7.589-6.272M113.083 42.25s-7.634-1.092-7.634-6.272M105.449 4.356v48.465"/></g></svg>';
 
-const codeyMobile =
-    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg"><g stroke="#1A96FF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M89.878 290h10.135a8.67 8.67 0 0 1 7.732 4.734c.6 1.176.938 2.507.938 3.917 0 4.777-3.883 8.65-8.67 8.65h-.821c-7.74 0-14.056 6.189-14.183 13.909l-.009.423c-.122 7.9 6.268 14.367 14.185 14.367h191.963c7.098 0 12.852-5.741 12.852-12.822 0-7.083-5.754-12.824-12.852-12.824h-9.137c-5.633 0-10.2-4.557-10.2-10.177 0-5.62 4.567-10.177 10.2-10.177h8.929M174 133c-16.427-5.062-18-27-18-27M205 133c16.427-5.062 18-27 18-27M192 78.658h-6.524c-5.16 0-10.1 2.06-13.683 5.708L158.4 98l-8.326-10.166a9.105 9.105 0 0 1 .816-12.438c3.74-3.524 9.76-3.107 12.959.895l7.162 8.85"/><path d="M189 78.658h6.524c5.16 0 10.1 2.06 13.683 5.708l1.027 1.045L222.6 98l8.326-10.166a9.105 9.105 0 0 0-.816-12.438c-3.74-3.524-9.76-3.107-12.959.895l-8.482 9.195M199.364 108.824l4.492 22.427c.616 3.078-.773 5.296-3.576 7.652l-.07.036c-8.431 6.74-11.29 6.74-20.685.046l-.099-.046c-.016-.009-.037-.014-.051-.027-2.279-1.968-3.775-4.062-3.28-6.823l4.177-23.265c.982-4.569 4.954-7.824 9.546-7.824s8.565 3.255 9.546 7.824"/><path d="m176 135 4.879 15H193"/><path d="m205 133-5.66 17H187M157.728 98 146 146.747l24.135 17.435c2.328 1.681 5.638.657 6.578-2.035L181 149.869"/><path d="M222.584 97 234 146.617l-24.136 17.56c-2.327 1.693-5.637.66-6.577-2.051L199 149.762M147.033 146l-14.499 41.89a9.695 9.695 0 0 0 4.518 11.68L175.778 221l.222-56.335M124 216l8-23M111 283l3.896-55.198c.747-8.864 10.144-14.32 18.323-10.637l8.3 3.737c15.768 7.1 22.127 25.962 13.827 41.014M158 256l17-34M131.055 298.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61Z"/><path d="m137.055 291.148-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM143.055 284.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM191 234h-5.91c-9.516 0-18.226 5.314-22.528 13.747L158 257M234.568 147l14.85 41.4c1.62 4.523-.237 9.578-4.37 11.889L207.325 222 207 165.196M249 193l8 23M224.645 261.632c-8.28-15.286-1.936-34.442 13.795-41.654l8.279-3.795c8.16-3.74 17.535 1.8 18.278 10.804L269 285M222 256l-15-34"/><path d="m250.945 298.148 1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM243.945 291.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM236.945 284.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM189 234h5.91c9.517 0 18.226 5.314 22.529 13.747L222 257M112 272h0c-10.88 0-19.543 7.901-22 18M148 324l-26-27M268 271h0c10.858 0 19.512 7.893 22 18M232 326l28-28M128 205l44 23M252 205l-42 23"/><path d="m230.945 278.148 1.873 1.89a3.244 3.244 0 0 0 4.597.014l11.626-11.59a3.266 3.266 0 0 0 .014-4.61l-1.873-1.89a3.245 3.245 0 0 0-4.597-.015L230.96 273.54a3.265 3.265 0 0 0-.014 4.61ZM266 238l-34 33M115 238l25 26M150.055 278.148l-1.873 1.89a3.243 3.243 0 0 1-4.596.014l-11.627-11.59a3.267 3.267 0 0 1-.014-4.61l1.873-1.89a3.244 3.244 0 0 1 4.596-.015l11.627 11.592a3.266 3.266 0 0 1 .014 4.61Z"/><path d="M231 278v48h-82v-46.843M149 270.917V262h82v11M209 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM181 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM189.415 122.552l-4.963-4.943c-.966-.963-.28-2.609 1.085-2.609h9.926c1.366 0 2.051 1.646 1.085 2.609l-4.963 4.943a1.538 1.538 0 0 1-2.17 0ZM170 85c8.981.844 16 8.133 16 17M210 85c-8.987.878-16 8.154-16 17M70 272.427C70 262.25 61.717 254 51.5 254c-10.218 0-18.5 8.25-18.5 18.427 0 6.552 3.434 12.306 8.607 15.573"/><path d="M38.27 260c-7.027 7.107-7.027 18.63 0 25.736a14.28 14.28 0 0 0 20.357 0c4.497-4.548 4.497-11.923 0-16.471a9.14 9.14 0 0 0-13.029 0c-2.877 2.91-2.877 7.63 0 10.542M20.63 282.419A13.295 13.295 0 0 0 14.64 281C7.107 281 1 287.268 1 295s6.107 14 13.64 14c4.74 0 8.915-2.481 11.36-6.247"/><path d="M32 272.38a8.15 8.15 0 0 0-2.462-.38c-4.715 0-8.538 4.03-8.538 9M5 304.82a13.734 13.734 0 0 0 19.731 0c4.359-4.458 4.359-11.687 0-16.145a8.79 8.79 0 0 0-12.628 0c-2.79 2.854-2.79 7.48 0 10.333"/><path d="M27 302c3.434 7.1 10.73 12 19.174 12 7.464 0 14.03-3.828 17.826-9.62M64 305.139c2.642 4.7 7.568 7.861 13.21 7.861 6.085 0 11.339-3.678 13.79-9"/><path d="M66 307.275c6.16 6.3 16.145 6.3 22.305 0 4.927-5.04 4.926-13.211 0-18.251a9.937 9.937 0 0 0-14.276 0c-3.154 3.225-3.154 8.455 0 11.68a6.359 6.359 0 0 0 9.136 0M95 280c-2.94-5.345-8.88-9-15.73-9-3.399 0-6.574.9-9.27 2.461M312 272.427C312 262.25 320.283 254 330.5 254c10.218 0 18.5 8.25 18.5 18.427 0 6.552-3.434 12.306-8.607 15.573"/><path d="M343.73 260c7.027 7.107 7.027 18.63 0 25.736a14.28 14.28 0 0 1-20.357 0c-4.497-4.548-4.497-11.923 0-16.471a9.14 9.14 0 0 1 13.029 0c2.877 2.91 2.877 7.63 0 10.542M360.37 282.419a13.295 13.295 0 0 1 5.99-1.419c7.533 0 13.64 6.268 13.64 14s-6.107 14-13.64 14c-4.74 0-8.915-2.481-11.36-6.247"/><path d="M350 272.38a8.15 8.15 0 0 1 2.462-.38c4.715 0 8.538 4.03 8.538 9M376 304.82a13.734 13.734 0 0 1-19.731 0c-4.359-4.458-4.359-11.687 0-16.145a8.79 8.79 0 0 1 12.628 0c2.79 2.854 2.79 7.48 0 10.333"/><path d="M354 302c-3.434 7.1-10.73 12-19.174 12A21.273 21.273 0 0 1 317 304.38M317 305.139c-2.642 4.7-7.568 7.861-13.21 7.861-6.085 0-11.34-3.678-13.79-9"/><path d="M316 307.275a15.524 15.524 0 0 1-22.305 0c-4.927-5.04-4.926-13.211 0-18.251a9.937 9.937 0 0 1 14.276 0c3.154 3.225 3.153 8.455 0 11.68a6.359 6.359 0 0 1-9.136 0M287 280c2.94-5.345 8.88-9 15.73-9 3.399 0 6.574.9 9.27 2.461M188.316 283.508c1.033-1.103 2.47-1.789 4.059-1.789 2.112 0 3.955 1.21 4.936 3.006a6.663 6.663 0 0 1 2.79-.61c3.81 0 6.899 3.2 6.899 7.147 0 3.946-3.089 7.146-6.899 7.146-.464 0-.92-.048-1.359-.14-.864 1.584-2.51 2.653-4.4 2.653a4.91 4.91 0 0 1-2.208-.521c-.876 2.116-2.917 3.6-5.296 3.6-2.477 0-4.589-1.61-5.399-3.867a5.145 5.145 0 0 1-1.098.117c-2.95 0-5.341-2.48-5.341-5.542 0-2.05 1.074-3.842 2.67-4.8a6.492 6.492 0 0 1-.511-2.535c0-3.52 2.783-6.373 6.215-6.373 2.016 0 3.807.983 4.942 2.508ZM235.25 151.665c18.293 13.738 30.124 35.598 30.124 60.217 0 3.724-.27 7.383-.793 10.963M115.568 223.911a75.81 75.81 0 0 1-.957-12.029c0-24.69 11.898-46.603 30.28-60.335"/><path d="M229.425 128.689c31.155 14.758 52.7 46.463 52.7 83.193 0 17.726-5.016 34.28-13.71 48.324M112.825 262.178c-9.464-14.457-14.965-31.735-14.965-50.296 0-37.016 21.881-68.929 53.43-83.535"/><path d="M224.991 108.866c42.967 14.559 73.885 55.181 73.885 103.017 0 23.134-7.231 44.58-19.56 62.208M100.962 274.51c-12.507-17.706-19.854-39.31-19.854-62.628 0-48.428 31.69-89.464 75.49-103.545"/><path d="M228.48 92.392c50.56 16.234 87.148 63.594 87.148 119.49 0 20.852-5.092 40.516-14.101 57.819M79.276 271.245c-9.518-17.673-14.92-37.888-14.92-59.362 0-56.295 37.112-103.93 88.231-119.833"/><path d="M54.29 255.075c-4.342-13.622-6.684-28.134-6.684-43.193 0-78.545 63.748-142.22 142.386-142.22s142.387 63.675 142.387 142.22c0 14.807-2.266 29.086-6.47 42.509M237.817 335h-95.633c-1.758 0-3.184-1.46-3.184-3.26v-2.48c0-1.8 1.426-3.26 3.184-3.26h95.633c1.757 0 3.183 1.46 3.183 3.26v2.48c0 1.8-1.426 3.26-3.183 3.26Z"/><path d="M37.955 257.436C33.433 242.698 31 227.05 31 210.831c0-6.427.382-12.765 1.125-18.993a157.799 157.799 0 0 1 6.725-30.437 157.805 157.805 0 0 1 8.881-21.568 158.657 158.657 0 0 1 7.757-13.73 159.458 159.458 0 0 1 16.358-21.558C100.948 72.282 143.103 52 190 52c87.813 0 159 71.111 159 158.831 0 15.76-2.298 30.984-6.577 45.356l-.664 1.813M48.368 75.44l-.954 2.577a.668.668 0 0 1-.396.398l-2.579.954a.673.673 0 0 0 0 1.262l2.579.954a.67.67 0 0 1 .396.398l.954 2.578a.674.674 0 0 0 1.264 0l.953-2.578a.673.673 0 0 1 .398-.398l2.577-.954a.673.673 0 0 0 0-1.262l-2.577-.954a.67.67 0 0 1-.398-.398l-.953-2.578a.674.674 0 0 0-1.264 0ZM195 24a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM101 4a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM24 255a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></g></svg>';
-
+// These codey-* ones are a bit of a hack for now: we were only given a PNG and limited time, so we're wrapping the PNG in an SVG.
 const codeyDesktop =
-    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg"><g stroke="#1A96FF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M89.878 290h10.135a8.67 8.67 0 0 1 7.732 4.734c.6 1.176.938 2.507.938 3.917 0 4.777-3.883 8.65-8.67 8.65h-.821c-7.74 0-14.056 6.189-14.183 13.909l-.009.423c-.122 7.9 6.268 14.367 14.185 14.367h191.963c7.098 0 12.852-5.741 12.852-12.822 0-7.083-5.754-12.824-12.852-12.824h-9.137c-5.633 0-10.2-4.557-10.2-10.177 0-5.62 4.567-10.177 10.2-10.177h8.929M174 133c-16.427-5.062-18-27-18-27M205 133c16.427-5.062 18-27 18-27M192 78.658h-6.524c-5.16 0-10.1 2.06-13.683 5.708L158.4 98l-8.326-10.166a9.105 9.105 0 0 1 .816-12.438c3.74-3.524 9.76-3.107 12.959.895l7.162 8.85"/><path d="M189 78.658h6.524c5.16 0 10.1 2.06 13.683 5.708l1.027 1.045L222.6 98l8.326-10.166a9.105 9.105 0 0 0-.816-12.438c-3.74-3.524-9.76-3.107-12.959.895l-8.482 9.195M199.364 108.824l4.492 22.427c.616 3.078-.773 5.296-3.576 7.652l-.07.036c-8.431 6.74-11.29 6.74-20.685.046l-.099-.046c-.016-.009-.037-.014-.051-.027-2.279-1.968-3.775-4.062-3.28-6.823l4.177-23.265c.982-4.569 4.954-7.824 9.546-7.824s8.565 3.255 9.546 7.824"/><path d="m176 135 4.879 15H193"/><path d="m205 133-5.66 17H187M157.728 98 146 146.747l24.135 17.435c2.328 1.681 5.638.657 6.578-2.035L181 149.869"/><path d="M222.584 97 234 146.617l-24.136 17.56c-2.327 1.693-5.637.66-6.577-2.051L199 149.762M147.033 146l-14.499 41.89a9.695 9.695 0 0 0 4.518 11.68L175.778 221l.222-56.335M124 216l8-23M111 283l3.896-55.198c.747-8.864 10.144-14.32 18.323-10.637l8.3 3.737c15.768 7.1 22.127 25.962 13.827 41.014M158 256l17-34M131.055 298.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61Z"/><path d="m137.055 291.148-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM143.055 284.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM191 234h-5.91c-9.516 0-18.226 5.314-22.528 13.747L158 257M234.568 147l14.85 41.4c1.62 4.523-.237 9.578-4.37 11.889L207.325 222 207 165.196M249 193l8 23M224.645 261.632c-8.28-15.286-1.936-34.442 13.795-41.654l8.279-3.795c8.16-3.74 17.535 1.8 18.278 10.804L269 285M222 256l-15-34"/><path d="m250.945 298.148 1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM243.945 291.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM236.945 284.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM189 234h5.91c9.517 0 18.226 5.314 22.529 13.747L222 257M112 272h0c-10.88 0-19.543 7.901-22 18M148 324l-26-27M268 271h0c10.858 0 19.512 7.893 22 18M232 326l28-28M128 205l44 23M252 205l-42 23"/><path d="m230.945 278.148 1.873 1.89a3.244 3.244 0 0 0 4.597.014l11.626-11.59a3.266 3.266 0 0 0 .014-4.61l-1.873-1.89a3.245 3.245 0 0 0-4.597-.015L230.96 273.54a3.265 3.265 0 0 0-.014 4.61ZM266 238l-34 33M115 238l25 26M150.055 278.148l-1.873 1.89a3.243 3.243 0 0 1-4.596.014l-11.627-11.59a3.267 3.267 0 0 1-.014-4.61l1.873-1.89a3.244 3.244 0 0 1 4.596-.015l11.627 11.592a3.266 3.266 0 0 1 .014 4.61Z"/><path d="M231 278v48h-82v-46.843M149 270.917V262h82v11M209 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM181 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM189.415 122.552l-4.963-4.943c-.966-.963-.28-2.609 1.085-2.609h9.926c1.366 0 2.051 1.646 1.085 2.609l-4.963 4.943a1.538 1.538 0 0 1-2.17 0ZM170 85c8.981.844 16 8.133 16 17M210 85c-8.987.878-16 8.154-16 17M70 272.427C70 262.25 61.717 254 51.5 254c-10.218 0-18.5 8.25-18.5 18.427 0 6.552 3.434 12.306 8.607 15.573"/><path d="M38.27 260c-7.027 7.107-7.027 18.63 0 25.736a14.28 14.28 0 0 0 20.357 0c4.497-4.548 4.497-11.923 0-16.471a9.14 9.14 0 0 0-13.029 0c-2.877 2.91-2.877 7.63 0 10.542M20.63 282.419A13.295 13.295 0 0 0 14.64 281C7.107 281 1 287.268 1 295s6.107 14 13.64 14c4.74 0 8.915-2.481 11.36-6.247"/><path d="M32 272.38a8.15 8.15 0 0 0-2.462-.38c-4.715 0-8.538 4.03-8.538 9M5 304.82a13.734 13.734 0 0 0 19.731 0c4.359-4.458 4.359-11.687 0-16.145a8.79 8.79 0 0 0-12.628 0c-2.79 2.854-2.79 7.48 0 10.333"/><path d="M27 302c3.434 7.1 10.73 12 19.174 12 7.464 0 14.03-3.828 17.826-9.62M64 305.139c2.642 4.7 7.568 7.861 13.21 7.861 6.085 0 11.339-3.678 13.79-9"/><path d="M66 307.275c6.16 6.3 16.145 6.3 22.305 0 4.927-5.04 4.926-13.211 0-18.251a9.937 9.937 0 0 0-14.276 0c-3.154 3.225-3.154 8.455 0 11.68a6.359 6.359 0 0 0 9.136 0M95 280c-2.94-5.345-8.88-9-15.73-9-3.399 0-6.574.9-9.27 2.461M312 272.427C312 262.25 320.283 254 330.5 254c10.218 0 18.5 8.25 18.5 18.427 0 6.552-3.434 12.306-8.607 15.573"/><path d="M343.73 260c7.027 7.107 7.027 18.63 0 25.736a14.28 14.28 0 0 1-20.357 0c-4.497-4.548-4.497-11.923 0-16.471a9.14 9.14 0 0 1 13.029 0c2.877 2.91 2.877 7.63 0 10.542M360.37 282.419a13.295 13.295 0 0 1 5.99-1.419c7.533 0 13.64 6.268 13.64 14s-6.107 14-13.64 14c-4.74 0-8.915-2.481-11.36-6.247"/><path d="M350 272.38a8.15 8.15 0 0 1 2.462-.38c4.715 0 8.538 4.03 8.538 9M376 304.82a13.734 13.734 0 0 1-19.731 0c-4.359-4.458-4.359-11.687 0-16.145a8.79 8.79 0 0 1 12.628 0c2.79 2.854 2.79 7.48 0 10.333"/><path d="M354 302c-3.434 7.1-10.73 12-19.174 12A21.273 21.273 0 0 1 317 304.38M317 305.139c-2.642 4.7-7.568 7.861-13.21 7.861-6.085 0-11.34-3.678-13.79-9"/><path d="M316 307.275a15.524 15.524 0 0 1-22.305 0c-4.927-5.04-4.926-13.211 0-18.251a9.937 9.937 0 0 1 14.276 0c3.154 3.225 3.153 8.455 0 11.68a6.359 6.359 0 0 1-9.136 0M287 280c2.94-5.345 8.88-9 15.73-9 3.399 0 6.574.9 9.27 2.461M188.316 283.508c1.033-1.103 2.47-1.789 4.059-1.789 2.112 0 3.955 1.21 4.936 3.006a6.663 6.663 0 0 1 2.79-.61c3.81 0 6.899 3.2 6.899 7.147 0 3.946-3.089 7.146-6.899 7.146-.464 0-.92-.048-1.359-.14-.864 1.584-2.51 2.653-4.4 2.653a4.91 4.91 0 0 1-2.208-.521c-.876 2.116-2.917 3.6-5.296 3.6-2.477 0-4.589-1.61-5.399-3.867a5.145 5.145 0 0 1-1.098.117c-2.95 0-5.341-2.48-5.341-5.542 0-2.05 1.074-3.842 2.67-4.8a6.492 6.492 0 0 1-.511-2.535c0-3.52 2.783-6.373 6.215-6.373 2.016 0 3.807.983 4.942 2.508ZM235.25 151.665c18.293 13.738 30.124 35.598 30.124 60.217 0 3.724-.27 7.383-.793 10.963M115.568 223.911a75.81 75.81 0 0 1-.957-12.029c0-24.69 11.898-46.603 30.28-60.335"/><path d="M229.425 128.689c31.155 14.758 52.7 46.463 52.7 83.193 0 17.726-5.016 34.28-13.71 48.324M112.825 262.178c-9.464-14.457-14.965-31.735-14.965-50.296 0-37.016 21.881-68.929 53.43-83.535"/><path d="M224.991 108.866c42.967 14.559 73.885 55.181 73.885 103.017 0 23.134-7.231 44.58-19.56 62.208M100.962 274.51c-12.507-17.706-19.854-39.31-19.854-62.628 0-48.428 31.69-89.464 75.49-103.545"/><path d="M228.48 92.392c50.56 16.234 87.148 63.594 87.148 119.49 0 20.852-5.092 40.516-14.101 57.819M79.276 271.245c-9.518-17.673-14.92-37.888-14.92-59.362 0-56.295 37.112-103.93 88.231-119.833"/><path d="M54.29 255.075c-4.342-13.622-6.684-28.134-6.684-43.193 0-78.545 63.748-142.22 142.386-142.22s142.387 63.675 142.387 142.22c0 14.807-2.266 29.086-6.47 42.509M237.817 335h-95.633c-1.758 0-3.184-1.46-3.184-3.26v-2.48c0-1.8 1.426-3.26 3.184-3.26h95.633c1.757 0 3.183 1.46 3.183 3.26v2.48c0 1.8-1.426 3.26-3.183 3.26Z"/><path d="M37.955 257.436C33.433 242.698 31 227.05 31 210.831c0-6.427.382-12.765 1.125-18.993a157.799 157.799 0 0 1 6.725-30.437 157.805 157.805 0 0 1 8.881-21.568 158.657 158.657 0 0 1 7.757-13.73 159.458 159.458 0 0 1 16.358-21.558C100.948 72.282 143.103 52 190 52c87.813 0 159 71.111 159 158.831 0 15.76-2.298 30.984-6.577 45.356l-.664 1.813M48.368 75.44l-.954 2.577a.668.668 0 0 1-.396.398l-2.579.954a.673.673 0 0 0 0 1.262l2.579.954a.67.67 0 0 1 .396.398l.954 2.578a.674.674 0 0 0 1.264 0l.953-2.578a.673.673 0 0 1 .398-.398l2.577-.954a.673.673 0 0 0 0-1.262l-2.577-.954a.67.67 0 0 1-.398-.398l-.953-2.578a.674.674 0 0 0-1.264 0ZM195 24a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM101 4a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM24 255a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></g></svg>';
+    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/images/podcast-bear.png" />';
+
+const codeyMobile =
+    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/images/podcast-bear.png" />';
 
 const moonDesktop =
     '<svg width="1221" height="507" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482"/><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482Z" stroke="#90D0FE" stroke-width="2"/><path d="M476.154 420.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM99.154 150.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM1210.142 97.587l-1.518 4.1a1.063 1.063 0 0 1-.631.633l-4.102 1.518c-.933.346-.933 1.664 0 2.009l4.102 1.517c.293.109.523.34.63.633l1.519 4.102c.346.93 1.664.93 2.009 0l1.517-4.102c.109-.293.34-.524.633-.633l4.102-1.517c.932-.345.932-1.663 0-2.01l-4.102-1.517a1.068 1.068 0 0 1-.633-.632l-1.517-4.101c-.345-.933-1.663-.933-2.01 0ZM8.142 490.372l-1.518 4.1a1.067 1.067 0 0 1-.632.633l-4.1 1.518c-.934.345-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.1c.345.933 1.664.933 2.01 0l1.516-4.1c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.664 0-2.01l-4.1-1.517a1.071 1.071 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM127.142 115.587l-1.518 4.1a1.064 1.064 0 0 1-.632.633l-4.1 1.518c-.934.346-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.102c.345.93 1.664.93 2.01 0l1.516-4.102c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.663 0-2.01l-4.1-1.517a1.068 1.068 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM909.009 306.108c-5.999-11.612-9.387-24.793-9.387-38.765 0-11.403 2.257-22.279 6.348-32.206M1067.92 255.215c.568 3.96.862 8.01.862 12.129 0 46.713-37.867 84.58-84.58 84.58-28.474 0-53.664-14.071-68.99-35.64M911.555 224.004c14.768-24.701 41.776-41.24 72.647-41.24 38.302 0 70.658 25.459 81.068 60.378M1055.511 147.787l-3.452 9.329a2.439 2.439 0 0 1-1.44 1.44l-9.329 3.452c-2.121.784-2.121 3.784 0 4.569l9.329 3.452a2.436 2.436 0 0 1 1.44 1.44l3.452 9.329c.785 2.12 3.785 2.12 4.569 0l3.452-9.33a2.441 2.441 0 0 1 1.44-1.44l9.329-3.451c2.121-.785 2.121-3.785 0-4.57l-9.329-3.451a2.444 2.444 0 0 1-1.44-1.44l-3.452-9.33c-.784-2.12-3.784-2.12-4.569 0ZM919.251 376.385c0 5.69-4.614 10.304-10.306 10.304-5.69 0-10.305-4.613-10.305-10.305 0-5.692 4.614-10.306 10.305-10.306 5.692 0 10.306 4.615 10.306 10.307Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M984.116 224.502a5.027 5.027 0 1 1-10.054 0 5.027 5.027 0 0 1 10.054 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1046.716 254.771h29.772M1087.929 254.771h7.089M902.279 225.33h23.242M870.108 225.33h10.053"/><path d="M893.055 225.33a2.01 2.01 0 1 1-4.021 0 2.01 2.01 0 0 1 4.02 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M893.425 315.627h31.409"/><path d="M936.898 315.627a2.011 2.011 0 1 1-4.023 0 2.011 2.011 0 0 1 4.023 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1013.52 292.398v-16.036M1021.537 284.382l-16.051.002"/></g></svg>';

package/src/modules/dx/featuresList/featuresList.css

@@ -1,11 +1,11 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
-.dx-text-heading-5 {
+.dx-text-display-8 {
     display: inline-flex;
 }
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     padding-bottom: var(--dx-g-spacing-xl);
 }
 
@@ -20,5 +20,5 @@
 .icon {
     color: #3ba755;
     padding-right: var(--dx-g-spacing-md);
-    padding-top: var(--dx-g-spacing-2xs);
+    padding-top: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/featuresList/featuresList.html

@@ -1,10 +1,10 @@
 <template>
     <div class="container">
-        <h2 if:true={title} class="dx-text-heading-3">{title}</h2>
+        <h2 if:true={header} class="dx-text-display-4">{header}</h2>
         <ul>
             <template for:each={options} for:item="option">
                 <li key={option.id} class="option">
-                    <div class="dx-text-heading-5">
+                    <div class="dx-text-display-8">
                         <dx-icon
                             class="icon"
                             size="small"

package/src/modules/dx/featuresList/featuresList.ts

@@ -1,18 +1,17 @@
 import { LightningElement, api } from "lwc";
 import { FeatureItem } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 /**
  * @element dx-features-list
  */
 
 export default class FeaturesList extends LightningElement {
-    @api title!: string;
+    @api header!: string;
 
     @api get options(): Array<FeatureItem> {
         return this._options;
     }
-
     set options(value: Array<FeatureItem>) {
         this._options = toJson(value);
     }