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

package/src/modules/dx/agenda/agenda.css

@@ -0,0 +1,97 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+ul {
+    list-style: none;
+}
+
+.container {
+    max-width: var(--dx-c-agenda-max-width, 840px);
+    margin: 0 auto;
+}
+
+.detail-list-title {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.detail-list-content-container {
+    position: relative;
+}
+
+.detail-list-content {
+    background-color: white;
+    border-color: var(--dx-g-gray-90);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 16px;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-2xl);
+}
+
+.detail-list-item {
+    align-items: center;
+    display: flex;
+    gap: var(--dx-g-spacing-xl);
+    padding: var(--dx-g-spacing-xl) 0;
+}
+
+.detail-list-item:not(:last-child) {
+    border-bottom: 1px solid var(--dx-g-gray-95);
+}
+
+.detail-list-item-title {
+    flex: 1;
+}
+
+.detail-list-item .detail-list-item-detail {
+    color: var(--dx-g-blue-vibrant-20);
+    display: inline-block;
+    font-weight: 700;
+    width: 25%;
+}
+
+.detail-list-item-detail-right {
+    text-align: right;
+}
+
+.flourish-container {
+    position: absolute;
+    bottom: 10px;
+    right: 0;
+    width: var(--dx-c-flourish-width, unset);
+}
+
+@media (max-width: 915px) {
+    .flourish-container {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    .detail-list-content {
+        padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-mlg);
+    }
+
+    .detail-list-item {
+        gap: var(--dx-g-spacing-md);
+    }
+
+    .detail-list-item-detail {
+        width: 30%;
+    }
+
+    .detail-list-item-title {
+        font-size: var(--dx-g-text-base);
+        line-height: 20px;
+    }
+}
+
+@media (max-width: 430px) {
+    .detail-list-item-detail {
+        font-size: var(--dx-g-text-xs);
+    }
+
+    .detail-list-item-title {
+        font-size: var(--dx-g-text-sm);
+    }
+}

package/src/modules/dx/agenda/agenda.html

@@ -0,0 +1,32 @@
+<template>
+    <div class="container">
+        <h2 class="detail-list-title dx-text-display-4">{header}</h2>
+        <div class="detail-list-content-container">
+            <ul class="detail-list-content" part="content">
+                <template for:each={items} for:item="item">
+                    <li class="detail-list-item" key={item.title}>
+                        <span
+                            lwc:if={item.leftDetail}
+                            class="detail-list-item-detail detail-list-item-detail-left dx-text-body-3"
+                        >
+                            {item.leftDetail}
+                        </span>
+                        <span class="detail-list-item-title dx-text-display-7">
+                            {item.title}
+                        </span>
+                        <span
+                            lwc:if={item.rightDetail}
+                            class="detail-list-item-detail detail-list-item-detail-right dx-text-body-3"
+                        >
+                            {item.rightDetail}
+                        </span>
+                    </li>
+                </template>
+            </ul>
+            <div lwc:if={flourish} class="flourish-container">
+                <img src={flourish} alt={flourishAlt} />
+            </div>
+        </div>
+        <slot name="cta"></slot>
+    </div>
+</template>

package/src/modules/dx/agenda/agenda.ts

@@ -0,0 +1,26 @@
+import { toJson } from "dxUtils/normalizers";
+import { api, LightningElement } from "lwc";
+
+export interface AgendaItem {
+    body?: string;
+    isInitiallyOpen?: boolean;
+    leftDetail?: string;
+    rightDetail?: string;
+    title: string;
+}
+
+export default class Agenda extends LightningElement {
+    @api header: string = "Agenda";
+    @api flourish?: string;
+    @api flourishAlt?: string;
+
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value: any) {
+        this._items = toJson(value);
+    }
+
+    private _items: AgendaItem[] = [];
+}

package/src/modules/dx/alert/alert.css

@@ -0,0 +1,103 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-alert-top: 0;
+    --dx-c-alert-container-align-items: flex-start;
+    --dx-c-alert-vertical-padding: var(--dx-g-spacing-md);
+    --dx-c-alert-success-color: var(--dx-g-green-vibrant-95);
+    --dx-c-alert-warning-color: rgb(254 243 217);
+    --dx-c-alert-danger-color: var(--dx-g-red-vibrant-95);
+    --dx-c-alert-success-accent-color: var(--dx-g-green-vibrant-80);
+    --dx-c-alert-warning-accent-color: var(--dx-g-yellow-vibrant-80);
+    --dx-c-alert-danger-accent-color: var(--dx-g-red-vibrant-50);
+}
+
+.alert-icon {
+    margin-right: var(--dx-g-spacing-md);
+}
+
+.alert-base {
+    padding: var(--dx-c-alert-vertical-padding);
+}
+
+.alert-container {
+    display: flex;
+    flex-direction: column;
+    align-items: var(--dx-c-alert-container-align-items);
+    padding-left: var(--dx-g-global-header-padding-horizontal);
+    padding-right: var(--dx-g-global-header-padding-horizontal);
+    width: 100%;
+    border: none;
+}
+
+.alert-container.alert-type-success {
+    background-color: var(--dx-c-alert-success-color);
+    border-color: var(--dx-c-alert-success-accent-color);
+}
+
+.alert-container.alert-type-warning {
+    background-color: var(--dx-c-alert-warning-color);
+    border-color: var(--dx-c-alert-warning-accent-color);
+}
+
+.alert-container.alert-type-danger {
+    background-color: var(--dx-c-alert-danger-color);
+    border-color: var(--dx-c-alert-danger-accent-color);
+}
+
+.alert-container.alert-variant-accented {
+    border-style: solid;
+    border-width: 0;
+    border-left-width: 4px;
+}
+
+.alert-title-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.alert-title {
+    font-weight: var(--dx-g-font-bold);
+}
+
+dx-button {
+    margin-left: auto;
+}
+
+/*
+    NOTE: Here we are assuming that indicator height won't go beyond 1000px.
+
+    It's one of the suggested way to achieve the expand/collapse animation
+    Ref: https://stackoverflow.com/a/41164095
+
+    Otherwise we need to change the height when user clicks on button
+    Ref: https://stackoverflow.com/a/11837673
+*/
+
+.alert-body {
+    display: block;
+    max-height: 1000px;
+    overflow: hidden;
+    padding-top: var(--dx-g-spacing-smd);
+    transition: max-height 0.25s ease, padding 0.25s ease;
+}
+
+.alert-body-hidden {
+    max-height: 0;
+    padding-top: 0;
+    transition: max-height 0.1s ease-out, padding 0.25s ease-out;
+}
+
+.alert-body a {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+/* Small Devices */
+@media screen and (max-width: 480px) {
+    .alert-container {
+        padding: var(--dx-c-alert-vertical-padding);
+    }
+}

package/src/modules/dx/alert/alert.html

@@ -0,0 +1,37 @@
+<template>
+    <div class={className} part="container">
+        <div class="alert-title-container">
+            <dx-icon
+                class="alert-icon"
+                symbol={iconName}
+                sprite={iconSprite}
+                size="large"
+                color={iconColor}
+            ></dx-icon>
+            <p class="alert-title dx-text-body-3">{alertTitle}</p>
+            <dx-button
+                lwc:if={hideable}
+                variant="inline"
+                onclick={onShowHide}
+                aria-label={hideBodyText}
+            >
+                {hideBodyText}
+            </dx-button>
+            <dx-button
+                lwc:if={dismissible}
+                aria-label="Dismiss"
+                icon-color="status-icon-color"
+                icon-size="large"
+                icon-symbol="close"
+                onclick={onDismiss}
+                variant="icon-only"
+            ></dx-button>
+        </div>
+        <!--
+            NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+            option instead of slots because the html markup will come as a
+            property to the component from a configuration
+        -->
+        <span lwc:dom="manual" class={bodyClassName}></span>
+    </div>
+</template>

package/src/modules/dx/alert/alert.ts

@@ -0,0 +1,137 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+import { AlertInfo } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+
+export default class Alert extends LightningElement {
+    _alertInfo: AlertInfo | null = null;
+    _dismissible = false;
+    _iconName = "";
+    _iconSprite = "";
+    _iconColor = "";
+    @api control: "none" | "hideable" | "dismissible" = "none";
+    @api type: "success" | "warning" | "danger" = "warning";
+    @api variant: "base" | "accented" = "base";
+
+    @api
+    get alertInfo(): AlertInfo | null {
+        return this._alertInfo;
+    }
+    set alertInfo(value) {
+        this._alertInfo = toJson(value);
+    }
+
+    @api
+    get iconColor(): string {
+        return this._iconColor || this.variant === "base"
+            ? "gray-10"
+            : this.accentedIconColor;
+    }
+    set iconColor(value) {
+        if (value) {
+            this._iconColor = value;
+        }
+    }
+
+    @api
+    get iconName(): string {
+        return this._iconName || this.type === "success"
+            ? "check-circle"
+            : "warning";
+    }
+    set iconName(value) {
+        if (value) {
+            this._iconName = value;
+        }
+    }
+
+    @api
+    get iconSprite(): string {
+        return this._iconSprite || this.type === "success"
+            ? "general"
+            : "utility";
+    }
+    set iconSprite(value) {
+        if (value) {
+            this._iconSprite = value;
+        }
+    }
+
+    get accentedIconColor() {
+        const baseColor =
+            this.type === "danger"
+                ? "red"
+                : this.type === "warning"
+                ? "yellow"
+                : "green";
+        return `${baseColor}-vibrant-50`;
+    }
+
+    get dismissible(): boolean {
+        return this.control === "dismissible";
+    }
+
+    get hideable(): boolean {
+        return this.control === "hideable";
+    }
+
+    get alertTitle() {
+        return this.alertInfo?.title;
+    }
+
+    get hideBodyText() {
+        return this.isBodyHidden ? "Show" : "Hide";
+    }
+
+    get alertType() {
+        return this.type || "warning";
+    }
+
+    get alertVariant() {
+        return this.variant || "base";
+    }
+
+    get className() {
+        return cx(
+            "alert-base",
+            "alert-container",
+            `alert-variant-${this.alertVariant}`,
+            `alert-type-${this.alertType}`
+        );
+    }
+
+    get bodyClassName() {
+        return cx(
+            "alert-body",
+            "dx-text-body-3",
+            this.isBodyHidden && "alert-body-hidden"
+        );
+    }
+
+    isBodyHidden = false;
+
+    renderedCallback() {
+        const phaseBodyContainer = this.template.querySelector(".alert-body");
+        if (phaseBodyContainer && this.alertInfo) {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            phaseBodyContainer.innerHTML = this.alertInfo.body;
+        }
+    }
+
+    onShowHide() {
+        this.isBodyHidden = !this.isBodyHidden;
+    }
+
+    onDismiss() {
+        this.dispatchEvent(
+            new CustomEvent("dismissphase", {
+                detail: {
+                    alertInfo: this.alertInfo
+                },
+                composed: true,
+                bubbles: true
+            })
+        );
+    }
+}

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

@@ -0,0 +1,276 @@
+:host {
+    --dx-c-track-before-color: var(
+        --dx-g-audio-track-before-color,
+        var(--dx-g-indigo-vibrant-30)
+    );
+    --dx-c-track-custom-dark-gray: rgba(62 62 62 / 100%);
+    --dx-c-track-custom-medium-gray: rgba(195 195 195 / 100%);
+    --dx-c-track-custom-light-gray: rgba(235 235 236 / 100%);
+    --dx-c-track-thumb-size: 10px;
+    --dx-c-track-thumb-color: var(
+        --dx-g-audio-track-thumb-color,
+        var(--dx-g-indigo-vibrant-30)
+    );
+    --dx-c-threedot-menu-item-padding: 14px;
+    --dx-c-audio-player-padding: 6px 13px 13px;
+    --dx-c-audio-background-color: var(--dx-g-audio-background-color, #e0e5f8);
+    --dx-c-audio-inner-div-background-color: var(
+        --dx-g-audio-inner-div-background-color,
+        #fff
+    );
+}
+
+dx-icon {
+    --dx-c-icon-color: var(--dx-g-audio-text-color);
+}
+
+/* Outermost container/border */
+.custom-audio-player {
+    background-color: var(--dx-c-audio-background-color);
+    border-radius: 12px;
+    padding: var(--dx-c-audio-player-padding);
+}
+
+.listen-icon {
+    display: inline-block;
+    padding: 0 6px 0 4px;
+}
+
+.listen-text {
+    display: inline-block;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-2xs, 11px);
+    font-weight: var(--dx-g-font-bold, bold);
+    letter-spacing: 0.6px;
+    position: relative;
+    text-transform: uppercase;
+    top: 1px;
+    color: var(--dx-g-audio-text-color);
+}
+
+/*
+   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;
+
+    align-items: center;
+    background-color: var(--dx-c-audio-inner-div-background-color);
+    border-radius: 5px;
+    display: flex;
+    margin-top: 8px;
+    padding: 3px 4px;
+}
+
+/* Player button controls */
+.player dx-button::part(container) {
+    height: 24px;
+    width: 24px;
+}
+
+.player-time,
+.player-volume-slider,
+.player-seek-slider {
+    position: relative;
+    top: 1px;
+}
+
+.player-time {
+    display: inline-block;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs, 11px);
+    margin-left: 4px;
+    margin-right: 8px;
+    color: var(--dx-g-audio-text-color);
+}
+
+/* Sliders and "thumb" controls */
+.player-volume-slider,
+.player-seek-slider {
+    appearance: none;
+    border-radius: 16px;
+    cursor: pointer;
+    height: 4px;
+    width: 100%;
+}
+
+.player-seek-slider {
+    background: var(--dx-c-track-custom-light-gray);
+}
+
+/* Create a large, solid "shadow" to the left of the "thumb" on the progress bar, simulating filled in space */
+.player-volume-slider::-webkit-slider-thumb,
+.player-seek-slider::-webkit-slider-thumb {
+    appearance: none;
+    background-color: var(--dx-c-track-thumb-color);
+    border: none;
+    border-radius: 50%;
+    height: var(--dx-c-track-thumb-size);
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    width: var(--dx-c-track-thumb-size);
+}
+
+.player-volume-slider::-moz-range-thumb,
+.player-seek-slider::-moz-range-thumb {
+    background-color: var(--dx-c-track-thumb-color);
+    border: none;
+    border-radius: 50%;
+    height: var(--dx-c-track-thumb-size);
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    width: var(--dx-c-track-thumb-size);
+}
+
+/* NOTE: Even though the 'active' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
+.player-volume-slider:active::-webkit-slider-thumb,
+.player-seek-slider:active::-webkit-slider-thumb {
+    opacity: 1;
+}
+
+.player-volume-slider:active::-moz-range-thumb,
+.player-seek-slider:active::-moz-range-thumb {
+    opacity: 1;
+}
+
+/* Container for the volume slider, which transitions in and out on hover */
+.player-volume-container {
+    align-items: center;
+    border-radius: var(--dx-g-spacing-xs);
+    height: 24px;
+    display: flex;
+    padding-left: 6px;
+    position: relative;
+    transition: 0.2s ease-out;
+    width: 24px;
+}
+
+.player-volume-container .player-volume-slider {
+    /* 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 .player-volume-button {
+    position: absolute;
+    right: 0;
+}
+
+.player-threedot-menu {
+    background: var(--dx-g-audio-inner-div-background-color);
+}
+
+/* Three dot menu, for download and playback speed settings */
+.player-threedot-menu ul {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs, 11px);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.player-threedot-menu li {
+    cursor: pointer;
+    position: relative;
+}
+
+/* Speed selection items have a large left padding in Chrome, which we are mimicking */
+.player-threedot-menu .player-speed-item {
+    padding-left: calc(var(--dx-c-threedot-menu-item-padding) * 3);
+}
+
+.player-threedot-menu a {
+    color: var(--dx-g-audio-threedot-menu-text-color);
+    cursor: pointer;
+    display: block;
+    padding: var(--dx-c-threedot-menu-item-padding);
+    text-decoration: none;
+}
+
+.player-threedot-menu dx-icon {
+    display: inline-block;
+}
+
+.player-threedot-menu dx-icon:not(.player-selected-speed) {
+    margin-right: var(--dx-c-threedot-menu-item-padding);
+    position: relative;
+    top: -1px; /* fix icon vertical position */
+}
+
+/* The selected speed has a check mark icon to the right side */
+.player-threedot-menu dx-icon.player-selected-speed {
+    color: var(--dx-g-indigo-vibrant-40);
+    position: absolute;
+    right: 40px;
+    top: 50%;
+    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
+*/
+.player-threedot-menu button {
+    background: transparent;
+    border: 0;
+    color: var(--dx-g-audio-threedot-menu-text-color);
+    cursor: pointer;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs, 11px);
+    padding: var(--dx-c-threedot-menu-item-padding);
+    text-align: left;
+    width: 100%;
+}
+
+.audio-container {
+    display: none;
+}
+
+@media (hover: hover) {
+    .player dx-button::part(container):hover {
+        background: var(--dx-g-audio-button-hover-color);
+    }
+
+    /* NOTE: Even though the 'hover' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
+    .player-volume-slider:hover::-webkit-slider-thumb,
+    .player-seek-slider:hover::-webkit-slider-thumb {
+        opacity: 1;
+    }
+
+    .player-volume-slider:hover::-moz-range-thumb,
+    .player-seek-slider:hover::-moz-range-thumb {
+        opacity: 1;
+    }
+
+    .player-volume-container.focused-by-keyboard,
+    .player-volume-container:hover {
+        background: var(--dx-g-audio-button-hover-color);
+        width: max(12%, 150px);
+    }
+
+    .player-volume-container.focused-by-keyboard .player-volume-slider,
+    .player-volume-container:hover .player-volume-slider {
+        /* Undo .visuallyhidden */
+        clip: unset;
+        height: 4px;
+        margin-right: 24px; /* leave room for the button */
+        overflow: visible;
+        position: relative;
+        width: 100%;
+    }
+
+    .player-threedot-menu a:focus,
+    .player-threedot-menu a:hover,
+    .player-threedot-menu button:focus,
+    .player-threedot-menu button:hover {
+        background: var(--dx-g-audio-button-hover-color);
+    }
+}