@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.ts

@@ -0,0 +1,29 @@
+import { LightningElement, api, track } from "lwc";
+import { fetchWordpressPosts } from "utils/wordpress";
+import { normalizeEpisode } from "utils/normalizers";
+
+type PodcastEpisode = {
+    body: string;
+    datetime: string;
+    href: string;
+    id: string;
+    length: string;
+    title: string;
+};
+export default class CardPodcastEpisodeProvider extends LightningElement {
+    @api count?: string;
+
+    @track episodes: PodcastEpisode[] = [];
+
+    private fetchEpisodes = async () => {
+        this.episodes = await fetchWordpressPosts(
+            "/podcast/api",
+            normalizeEpisode,
+            this.count
+        );
+    };
+
+    connectedCallback() {
+        this.fetchEpisodes();
+    }
+}

package/src/modules/dx/cardSmall/cardSmall.css

@@ -0,0 +1,32 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+:host {
+    --heading-offset: var(--dx-g-spacing-sm);
+}
+
+.has-icon .dx-card-base_section-horizontal:last-of-type > *:first-child {
+    margin-top: var(--heading-offset);
+}
+
+.card-small {
+    display: flex;
+    flex-direction: row;
+}
+
+.dx-text-body-2 {
+    flex: 1;
+}
+
+/* mobile responsiveness */
+@media screen and (max-width: 1024px) {
+    :host {
+        --heading-offset: var(--dx-g-spacing-xs);
+    }
+
+    dx-icon-badge {
+        --dx-c-icon-badge-size: var(--dx-g-spacing-lg);
+        --dx-c-icon-badge-icon-size: var(--dx-g-icon-size-xs);
+    }
+}

package/src/modules/dx/cardSmall/cardSmall.html

@@ -0,0 +1,42 @@
+<template>
+    <div if:true={borderless} class={className}>
+        <div if:true={badgeSymbol} class="dx-card-base_section-horizontal">
+            <dx-icon-badge
+                color={badgeColor}
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                shape={badgeShape}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+        </div>
+        <div class="dx-card-base_section-horizontal dx-card-base_column">
+            <dx-card-title
+                href={href}
+                target={target}
+                title={title}
+            ></dx-card-title>
+            <span class="dx-text-body-2">{body}</span>
+            <div if:false={isSlotEmpty} class="dx-card-base_ctas">
+                <slot onslotchange={onSlotChange}></slot>
+            </div>
+        </div>
+    </div>
+    <a if:false={borderless} class={className} href={href} target={target}>
+        <div if:true={badgeSymbol} class="dx-card-base_section-horizontal">
+            <dx-icon-badge
+                color={badgeColor}
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                shape={badgeShape}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+        </div>
+        <div class="dx-card-base_section-horizontal dx-card-base_column">
+            <dx-card-title target={target} title={title}></dx-card-title>
+            <span class="dx-text-body-2">{body}</span>
+            <div if:false={isSlotEmpty} class="dx-card-base_ctas">
+                <slot onslotchange={onSlotChange}></slot>
+            </div>
+        </div>
+    </a>
+</template>

package/src/modules/dx/cardSmall/cardSmall.ts

@@ -0,0 +1,38 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import {
+    LightningSlotElement,
+    IconSprite,
+    IconSymbol,
+    IconBadgeShape
+} from "typings/custom";
+import { isSlotEmpty, stopPropagationOnSlotted } from "utils/slot";
+
+export default class CardSmall extends LightningElement {
+    @api badgeBackgroundColor?: string = "indigo-vibrant-50";
+    @api badgeColor: string = "white";
+    @api badgeShape?: IconBadgeShape = "circle";
+    @api badgeSprite?: IconSprite = "utility";
+    @api badgeSymbol?: IconSymbol;
+    @api body?: string = "";
+    @api borderless?: boolean = false;
+    @api href!: string;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    private isSlotEmpty: boolean = false;
+
+    private get className(): string {
+        return cx(
+            "card-small",
+            "dx-card-base",
+            this.badgeSymbol && "has-icon",
+            this.borderless && "dx-card-base_borderless"
+        );
+    }
+
+    private onSlotChange(e: LightningSlotElement): void {
+        this.isSlotEmpty = isSlotEmpty(e);
+        stopPropagationOnSlotted(e);
+    }
+}

package/src/modules/dx/cardTitle/cardTitle.css

@@ -0,0 +1,41 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-card-title-color: var(--dx-g-text-heading-color);
+    --dx-c-card-title-font-size: var(--dx-g-text-xl);
+    --dx-c-card-title-line-height: 28px;
+    --dx-c-card-title-letter-spacing: -0.1px;
+    --dx-c-card-title-icon-size: 22px;
+}
+
+.dx-text-heading-4 {
+    color: var(--dx-c-card-title-color);
+    transition: var(--dx-g-transition-hue-1x);
+    font-size: var(--dx-c-card-title-font-size);
+    line-height: var(--dx-c-card-title-line-height);
+    letter-spacing: var(--dx-c-card-title-letter-spacing);
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+dx-icon {
+    --dx-c-icon-size: var(--dx-c-card-title-icon-size);
+
+    display: inline-flex;
+    vertical-align: middle;
+    transform: translateY(-2px);
+}
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-4 {
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    dx-icon {
+        --dx-c-card-title-icon-size: 20px;
+    }
+}

package/src/modules/dx/cardTitle/cardTitle.html

@@ -0,0 +1,20 @@
+<template>
+    <h3 class="dx-text-heading-4">
+        <a if:true={href} href={href} target={target}>
+            {titleToWrap}
+            <template if:true={needsSpace}>&#32;</template>
+            <span class="nowrap" if:true={isExternal}>
+                {titleNoWrap}&nbsp;
+                <dx-icon symbol="new_window" size="override"></dx-icon>
+            </span>
+        </a>
+        <template if:false={href}>
+            {titleToWrap}
+            <template if:true={needsSpace}>&#32;</template>
+            <span class="nowrap" if:true={isExternal}>
+                {titleNoWrap}&nbsp;
+                <dx-icon symbol="new_window" size="override"></dx-icon>
+            </span>
+        </template>
+    </h3>
+</template>

package/src/modules/dx/cardTitle/cardTitle.ts

@@ -0,0 +1,27 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardTitle extends LightningElement {
+    @api href!: string;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    private get isExternal() {
+        return this.target === "_blank";
+    }
+
+    private get titleToWrap() {
+        return this.isExternal
+            ? this.title.substring(0, this.title.lastIndexOf(" "))
+            : this.title;
+    }
+
+    private get needsSpace() {
+        return this.titleToWrap.length > 0 && this.isExternal;
+    }
+
+    private get titleNoWrap() {
+        return this.isExternal
+            ? this.title.substring(this.title.lastIndexOf(" ") + 1)
+            : null;
+    }
+}

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.css

@@ -0,0 +1,24 @@
+@import "helpers/card";
+
+.badge {
+    --badge-size: var(--dx-g-spacing-5xl);
+    --badge-position: calc(50% - (var(--badge-size) / 2));
+
+    position: absolute;
+    top: var(--badge-position);
+    left: var(--badge-position);
+    height: var(--badge-size);
+    width: var(--badge-size);
+    z-index: 1;
+}
+
+@media screen and (max-width: 1024px) {
+    .badge {
+        --badge-size: 56px;
+    }
+
+    dx-card-content::part(body) {
+        display: none;
+        margin: 0 !important;
+    }
+}

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.html

@@ -0,0 +1,20 @@
+<template>
+    <dx-card-content
+        background-color={backgroundColor}
+        body={body}
+        featured={featured}
+        href={href}
+        label="Trailhead"
+        subtitle={subtitle}
+        target={target}
+        title={title}
+    >
+        <img
+            class="badge"
+            src={badgeImgSrc}
+            alt={badgeImgAlt}
+            slot="image-badge"
+        />
+        <span slot="datetime">{length}</span>
+    </dx-card-content>
+</template>

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.ts

@@ -0,0 +1,18 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardTrailheadModule extends LightningElement {
+    @api backgroundColor?: string = "indigo-vibrant-90";
+    @api badgeImgAlt!: string;
+    @api badgeImgSrc!: string;
+    @api body!: string;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @api length!: string;
+    @api points!: string | number;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    get subtitle() {
+        return `${this.points} Points`;
+    }
+}

package/src/modules/dx/cardVideoPreview/cardVideoPreview.css

@@ -0,0 +1,14 @@
+@import "helpers/card";
+
+.dx-play-button {
+    position: absolute;
+    bottom: var(--dx-g-spacing-md);
+    left: var(--dx-g-spacing-md);
+    z-index: 1;
+}
+
+@media screen and (max-width: 1024px) {
+    dx-card-content::part(datetime) {
+        display: block;
+    }
+}

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -0,0 +1,26 @@
+<template>
+    <dx-card-content
+        body={body}
+        featured={featured}
+        href={href}
+        img-alt={imgAlt}
+        img-src={imgSrc}
+        layout={layout}
+        target={target}
+        title={title}
+    >
+        <dx-icon-badge
+            class="dx-play-button"
+            symbol="play"
+            background-color="white"
+            slot="image-badge"
+        ></dx-icon-badge>
+        <dx-formatted-date-time
+            slot="datetime"
+            day="2-digit"
+            month="long"
+            year="numeric"
+            value={datetime}
+        ></dx-formatted-date-time>
+    </dx-card-content>
+</template>

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardVideoPreview extends LightningElement {
+    @api body?: string | null = null;
+    @api datetime!: string;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @api imgAlt?: string;
+    @api imgSrc?: string | null;
+    @api target?: string | null = null;
+    @api layout: "vertical" | "horizontal" = "vertical";
+    @api title!: string;
+}

package/src/modules/dx/checkbox/checkbox.css

@@ -0,0 +1,168 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    display: block;
+}
+
+.container {
+    --error-color: var(--dx-g-red-vibrant-50);
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.checkbox-label,
+input {
+    cursor: pointer;
+}
+
+label {
+    display: var(--dx-c-checkbox-display, flex);
+    align-items: var(--dx-c-checkbox-align-label, flex-start);
+}
+
+input {
+    flex-shrink: 0;
+    margin: 0;
+}
+
+.checkbox-label {
+    line-height: var(--dx-c-checkbox-text-line-height, 20px);
+    font-size: var(--dx-c-checkbox-font-size, --dx-g-text-base);
+    transform: translateY(-2px);
+    padding-left: 12px;
+}
+
+.checkbox-error {
+    opacity: 0;
+    margin-top: var(--dx-g-spacing-xs);
+    user-select: none;
+}
+
+input:disabled {
+    cursor: not-allowed;
+    opacity: 0.9;
+}
+
+input:disabled + .checkbox-label {
+    cursor: not-allowed;
+    color: var(--sds-g-gray-9);
+}
+
+.container.show-error .checkbox-error {
+    opacity: 1;
+    user-select: auto;
+}
+
+/* adapted from https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ */
+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
+    input {
+        --active-color: var(--dx-g-blue-vibrant-50);
+        --active-inner-color: #fff;
+        --focus-shadow: 1px var(--dx-g-blue-vibrant-80);
+        --border-color: var(--sds-g-gray-5);
+        --border-color-hover: var(--sds-g-gray-6);
+        --background: #fff;
+        --disabled-color: var(--sds-g-gray-4);
+        --disabled-inner-color: var(--dx-g-gray-60);
+        --size: var(--dx-g-spacing-md);
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        height: var(--size);
+        width: var(--size);
+        outline: none;
+        display: inline-block;
+        vertical-align: top;
+        position: relative;
+        cursor: pointer;
+        border: 1px solid var(--border-color-override, var(--border-color));
+        background: var(--background-override, var(--background));
+        transition: var(--dx-g-transition-box-shadow-1x),
+            var(--dx-g-transition-hue-1x);
+    }
+
+    input::after {
+        content: "";
+        display: block;
+        left: 0;
+        top: 0;
+        position: absolute;
+        opacity: var(--opacity, 0);
+        transition: transform var(--transition-duration-transform, 0.3s)
+                var(--transition-easing-transorm, ease),
+            opacity var(--transition-duration-opacity, 0.2s);
+    }
+
+    input[type="checkbox"] {
+        border-radius: 2px;
+    }
+
+    input[type="radio"] {
+        border-radius: 50%;
+    }
+
+    input:disabled {
+        --background-override: var(--disabled-color);
+    }
+
+    input:focus {
+        box-shadow: 0 0 0 var(--focus-shadow);
+    }
+
+    input:checked {
+        --opacity: 1;
+        --transition-duration-opacity: 0.3s;
+        --transition-duration-transform: 0.6s;
+        --transition-easing-transorm: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+    }
+
+    input:disabled:checked {
+        --border-color-override: var(--border-color);
+    }
+
+    input:hover:not(:disabled) {
+        --border-color-override: var(--border-color-hover);
+    }
+
+    input[type="checkbox"]::after {
+        --checkbox-width: 4px;
+        --checkbox-height: 8px;
+
+        width: var(--checkbox-width);
+        height: var(--checkbox-height);
+        border: 2px solid var(--active-color);
+        border-top: 0;
+        border-left: 0;
+        left: calc(50% - var(--checkbox-width) / 2);
+        top: calc(50% - var(--checkbox-height) / 2);
+        transform: rotate(var(--checkbox-rotation, 20deg));
+    }
+
+    input[type="checkbox"]:checked {
+        --checkbox-rotation: 43deg;
+    }
+
+    input[type="radio"]::after {
+        --opacity: 0;
+
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--active-color);
+        margin: 3px;
+        transition: var(--dx-g-transition-hue-1x);
+    }
+
+    input:checked[type="radio"]::after {
+        --opacity: 1;
+    }
+
+    .container.show-error input {
+        --border-color-override: var(--error-color) !important;
+
+        box-shadow: 0 0 0 1px var(--error-color) !important;
+    }
+}

package/src/modules/dx/checkbox/checkbox.html

@@ -0,0 +1,26 @@
+<template>
+    <div class={className}>
+        <label>
+            <input
+                type={type}
+                disabled={disabled}
+                name={name}
+                value={value}
+                checked={checked}
+                onchange={onChange}
+                required={required}
+            />
+            <span class="dx-text-body-2 checkbox-label">
+                {label}
+                <slot></slot>
+            </span>
+        </label>
+        <span
+            aria-live="assertive"
+            class="dx-text-body-2 checkbox-error dx-text-form-error-message"
+            if:true={required}
+        >
+            {errorMessage}
+        </span>
+    </div>
+</template>

package/src/modules/dx/checkbox/checkbox.ts

@@ -0,0 +1,55 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+export default class Checkbox extends LightningElement {
+    @api disabled: boolean = false;
+    @api errorMessage?: string = "Please check this box if you want to proceed";
+    @api label?: string;
+    @api name: string | null = null;
+    @api required: boolean = false;
+    @api type: "checkbox" | "radio" = "checkbox";
+    @api value!: string;
+
+    private _checked: boolean = false;
+    @api
+    get checked(): boolean {
+        return this._checked;
+    }
+    set checked(value: boolean) {
+        this._checked = value;
+    }
+
+    private showValidity = false;
+
+    private get valid(): boolean {
+        return !!(!this.required || this.checked);
+    }
+
+    private get showError(): boolean {
+        return this.showValidity && !this.valid;
+    }
+
+    private get className() {
+        return cx("container", this.showError && "show-error");
+    }
+
+    @api
+    reportValidity(): boolean {
+        this.showValidity = true;
+        return this.valid;
+    }
+
+    private onChange(e: InputEvent) {
+        this._checked = ((e.currentTarget as HTMLInputElement) || {}).checked;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: {
+                    originalEvent: e,
+                    checked: this._checked,
+                    value: this.value
+                }
+            })
+        );
+        this.showValidity = true;
+    }
+}

package/src/modules/dx/checkboxGroup/checkboxGroup.css

@@ -0,0 +1,12 @@
+@import "helpers/reset";
+
+fieldset {
+    display: grid;
+    grid-template-rows: auto;
+    grid-gap: 20px;
+}
+
+legend {
+    position: absolute;
+    clip: rect(0 0 0 0);
+}

package/src/modules/dx/checkboxGroup/checkboxGroup.html

@@ -0,0 +1,15 @@
+<template>
+    <fieldset>
+        <legend>{legend}</legend>
+        <template for:each={options} for:item="option">
+            <dx-checkbox
+                key={option.value}
+                value={option.value}
+                label={option.label}
+                checked={option.checked}
+                disabled={option.disabled}
+                onchange={onChange}
+            ></dx-checkbox>
+        </template>
+    </fieldset>
+</template>