@salesforcedevs/dx-components 0.0.0-alpha.0

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -0,0 +1,97 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toJson } from "dxUtils/normalizers";
+
+export default class CardTrial extends LightningElement {
+    @api badgeBackgroundColor?: string = "indigo-vibrant-90";
+    @api badgeSprite?: string = "salesforcebrand";
+    @api badgeSymbol!: string;
+    @api body!: string;
+    @api buttonOneCta?: string;
+    @api buttonOneHref?: string;
+    @api buttonOneIcon?: string;
+    @api buttonOneIconSize?: string;
+    @api buttonTwoCta?: string;
+    @api buttonTwoHref?: string;
+    @api buttonTwoIcon?: string;
+    @api buttonTwoIconSize?: string;
+    @api href!: string;
+    @api imgSrc?: string;
+    @api label!: string;
+    @api recommended?: boolean = false;
+    @api target?: string;
+    @api terms!: string;
+    @api title!: string;
+    @api topText?: string;
+    @api twoColTitle?: string;
+    @api twoColTarget?: string;
+    @api twoColHref!: string;
+    @api typeBadgeValue?: string;
+    @api typeBadgeColor?: string;
+    @api typeBadgeSize?: string;
+    @api typeBadgeType?: string;
+    @api
+    get details() {
+        return this._details;
+    }
+    set details(value) {
+        this._details = toJson(value);
+    }
+
+    @api
+    get twoColDetails() {
+        return this._twoColDetails;
+    }
+    set twoColDetails(value) {
+        this._twoColDetails = toJson(value);
+    }
+
+    get hasDetails() {
+        return this.details?.length > 0;
+    }
+
+    get hasOneButton() {
+        return this.buttonOneCta && !this.buttonTwoCta;
+    }
+
+    get hasTwoButtons() {
+        return this.buttonOneCta && this.buttonTwoCta;
+    }
+
+    get hasButtons() {
+        return this.hasOneButton || this.hasTwoButtons;
+    }
+
+    get ariaRole() {
+        return this.hasButtons ? "menu" : "link";
+    }
+
+    private _details!: string[];
+    private _twoColDetails!: [{ title: string; subtitle: string }];
+
+    private get className() {
+        return cx(
+            "card-trial",
+            !this.twoColTitle && "dx-card-base",
+            !this.twoColTitle && "dx-card-base_section-vertical",
+            this.twoColTitle && "col-one",
+            this.imgSrc && "has-image",
+            this.recommended && "recommended-border",
+            !this.hasButtons && "clickable"
+        );
+    }
+
+    private get twoColClassName() {
+        return cx(
+            this.twoColTitle && "two-col-container",
+            this.twoColTitle && "dx-card-base"
+        );
+    }
+
+    private handleClick() {
+        // card is clickable only if it doesn't contain buttons (for accessibility reasons)
+        if (!this.hasButtons) {
+            window.location = this.href;
+        }
+    }
+}

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

@@ -0,0 +1,14 @@
+@import "dxHelpers/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: 768px) {
+    dx-card-content::part(datetime) {
+        display: block;
+    }
+}

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

@@ -0,0 +1,27 @@
+<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
+            if:true={datetime}
+            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,172 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/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-label::first-letter {
+    text-transform: uppercase;
+}
+
+.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,56 @@
+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 "dxHelpers/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>

package/src/modules/dx/checkboxGroup/checkboxGroup.ts

@@ -0,0 +1,77 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+type Option = {
+    value: string;
+    label: string;
+    disabled: boolean;
+};
+
+// API structure modeled after:
+// https://ant.design/components/checkbox/
+// https://github.com/ant-design/ant-design/blob/master/components/checkbox/Group.tsx
+
+export default class CheckboxGroup extends LightningElement {
+    @api disabled: boolean = false;
+    @api legend!: string;
+
+    @api
+    get options(): Option[] {
+        const statefulOptions = this._options.map((option) => ({
+            ...option,
+            checked: this._value.includes(option.value),
+            disabled: this.disabled || option.disabled
+        }));
+        return statefulOptions;
+    }
+    set options(value) {
+        this._options = toJson(value);
+    }
+
+    @api get defaultValue(): string[] | null {
+        return this._defaultValue;
+    }
+    set defaultValue(value) {
+        this._value = toJson(value) || [];
+    }
+
+    @api get value(): string[] {
+        return this._value;
+    }
+    set value(value) {
+        if (this.defaultValue) {
+            console.error(
+                "Do not supply both value and default-value to form groups."
+            );
+        }
+
+        this._value = toJson(value) || [];
+    }
+
+    private _defaultValue: string[] | null = null;
+    private _options: Option[] = [];
+    private _value: string[] = [];
+
+    private updateValue(checkedValue: string) {
+        this._value = this._value.includes(checkedValue)
+            ? this._value.filter((val) => val !== checkedValue)
+            : [...this._value, checkedValue];
+    }
+
+    private onChange(e: CustomEvent) {
+        const { checked, value: checkedValue, originalEvent } = e.detail;
+
+        this.updateValue(checkedValue);
+
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: {
+                    checked,
+                    checkedValue,
+                    originalEvent,
+                    value: this._value
+                }
+            })
+        );
+    }
+}

package/src/modules/dx/checkboxNative/checkboxNative.css

@@ -0,0 +1,21 @@
+:host {
+    --dx-c-filter-menu-font-weight: normal;
+}
+
+input,
+span {
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari 3.1+ */
+    -moz-user-select: none; /* Firefox 2+ */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none;
+}
+
+span {
+    color: var(--sds-g-gray-11);
+    font-size: 13px;
+    font-weight: var(--dx-c-filter-menu-font-weight);
+    font-family: var(--dx-g-font-sans);
+    margin-left: 8px;
+}

package/src/modules/dx/checkboxNative/checkboxNative.html

@@ -0,0 +1,14 @@
+<template>
+    <label>
+        <input
+            name={name}
+            type="checkbox"
+            checked={checked}
+            onchange={onChange}
+        />
+        <span>
+            {label}
+            <slot></slot>
+        </span>
+    </label>
+</template>

package/src/modules/dx/checkboxNative/checkboxNative.ts

@@ -0,0 +1,39 @@
+import { LightningElement, api } from "lwc";
+
+export default class CheckboxNative extends LightningElement {
+    @api value!: string;
+    @api label?: string;
+
+    private _checked: boolean = false;
+    private _indeterminate: boolean = false;
+
+    @api
+    get checked(): boolean {
+        return this._checked;
+    }
+    set checked(value: boolean) {
+        this._checked = value;
+    }
+
+    @api
+    get indeterminate(): boolean {
+        return this._indeterminate;
+    }
+    set indeterminate(value: boolean) {
+        this.template.querySelector("input").indeterminate = value;
+        this._indeterminate = value;
+    }
+
+    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
+                }
+            })
+        );
+    }
+}