@salesforcedevs/dx-components 0.26.1-alpha0.5 → 0.26.3

package/src/modules/dx/section/section.css

@@ -0,0 +1,130 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-section-padding-vertical: var(--dx-g-spacing-5xl);
+    --dx-c-section-padding-horizontal: var(--dx-g-page-padding-horizontal);
+    --dx-c-section-padding-left: var(--dx-c-section-padding-horizontal);
+    --dx-c-section-padding-right: var(--dx-c-section-padding-horizontal);
+    --dx-c-section-padding-top: var(--dx-c-section-padding-vertical);
+    --dx-c-section-padding-bottom: var(--dx-c-section-padding-vertical);
+}
+
+.section {
+    /* internal var */
+    --graphic-height: 5.563vw;
+    --graphic-vertical-padding: 0.14vw;
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background: var(--dx-c-section-background-color);
+    padding: var(--dx-c-section-padding-top) var(--dx-c-section-padding-right)
+        var(--dx-c-section-padding-bottom) var(--dx-c-section-padding-left);
+}
+
+.section-dark {
+    --dx-g-text-heading-color: white;
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-90);
+    --dx-g-text-label-color: var(--dx-g-blue-vibrant-90);
+}
+
+.section.graphic-top:not(.graphic-overlap) {
+    margin-top: var(--graphic-height);
+}
+
+.section.graphic-bottom:not(.graphic-overlap) {
+    margin-bottom: var(--graphic-height);
+}
+
+.background-graphic {
+    color: var(--dx-c-section-background-color);
+    width: 100%;
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    height: var(--graphic-height);
+}
+
+.background-graphic-top {
+    top: calc(-1 * var(--graphic-height) + var(--graphic-vertical-padding));
+}
+
+.background-graphic-bottom {
+    bottom: calc(-1 * var(--graphic-height) + var(--graphic-vertical-padding));
+}
+
+.heading {
+    max-width: 800px;
+}
+
+.text {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--dx-g-spacing-2xl);
+    z-index: 100;
+}
+
+.text > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.text > .label {
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.content {
+    z-index: 50;
+}
+
+/* sections with a swoop and center alignment should not left align as it encroaches on the graphic */
+.section.align-center.graphic-top .text {
+    text-align: center;
+    align-items: center;
+}
+
+@media screen and (min-width: 1400px) {
+    .background-graphic {
+        --graphic-height: 80px;
+        --graphic-vertical-padding: 2px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .section.align-center .text {
+        text-align: center;
+        align-items: center;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    :host {
+        --dx-c-section-padding-vertical: 80px;
+    }
+
+    .text {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+
+    .text > *:not(:last-child) {
+        margin-bottom: 12px;
+    }
+
+    .label {
+        font-size: 16px;
+        letter-spacing: -0.2px;
+        line-height: 20px;
+    }
+
+    .subtitle {
+        font-size: 16px;
+        letter-spacing: 0;
+        line-height: 24px;
+    }
+
+    .heading {
+        font-size: 32px;
+        letter-spacing: -0.6px;
+        line-height: 40px;
+    }
+}

package/src/modules/dx/section/section.html

@@ -0,0 +1,66 @@
+<template>
+    <div class={className} style={style} part="container">
+        <svg
+            class="background-graphic background-graphic-top"
+            if:true={topGraphic}
+            preserveAspectRatio="none"
+            width="1438px"
+            height="83px"
+            viewBox="0 0 1438 83"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g
+                id="dx-g-section-background-graphic-top"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+            >
+                <path
+                    d="M-7.27595761e-12,83 L1438.00056,83 L1438.00056,79.643465 C1215.60194,28.2089055 973.825925,0 721.017162,0 C469.222527,0 228.372309,27.9830423 6.71112353,79.0256055 L-7.27595761e-12,80.579403 L-7.27595761e-12,83 Z"
+                    id="dx-g-section-background-graphic-top-shape"
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                ></path>
+            </g>
+        </svg>
+
+        <div part="text" class="text" if:true={hasText}>
+            <span class="label dx-text-heading-6" if:true={label}>{label}</span>
+            <h2 class={headingClassName} if:true={title}>{title}</h2>
+            <span class="subtitle dx-text-body-1" if:true={subtitle}>
+                {subtitle}
+            </span>
+        </div>
+        <div part="content" class="content">
+            <slot></slot>
+        </div>
+
+        <svg
+            class="background-graphic background-graphic-bottom"
+            if:true={bottomGraphic}
+            preserveAspectRatio="none"
+            width="1438px"
+            height="83px"
+            viewBox="0 0 1438 83"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g
+                id="dx-g-section-background-graphic-bottom"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+            >
+                <path
+                    d="M-7.27595761e-12,0 L1438.00056,0 L1438.00056,3.356535 C1215.60194,54.7910945 973.825925,83 721.017162,83 C469.222527,83 228.372309,55.0169577 6.71112353,3.97439455 L-7.27595761e-12,2.42059697 L-7.27595761e-12,0 Z"
+                    id="dx-g-section-background-graphic-bottom-shape"
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                ></path>
+            </g>
+        </svg>
+    </div>
+</template>

package/src/modules/dx/section/section.ts

@@ -0,0 +1,41 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "utils/css";
+
+export default class Section extends LightningElement {
+    @api backgroundColor?: string | null = "transparent";
+    @api dark?: boolean = false;
+    @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
+    @api label?: string | null = null;
+    @api subtitle?: string | null = null;
+    @api textAlign?: "center" | "left" = "left";
+    @api title?: string | null = null;
+    @api topGraphic?: boolean = false;
+    @api graphicOverlap?: boolean = false;
+    @api bottomGraphic?: boolean = false;
+
+    private get style(): string {
+        return `--dx-c-section-background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+    }
+
+    private get className() {
+        return cx(
+            "section",
+            this.dark && "section-dark",
+            `align-${this.textAlign}`,
+            this.graphicOverlap && "graphic-overlap",
+            this.bottomGraphic && "graphic-bottom",
+            this.topGraphic && "graphic-top"
+        );
+    }
+
+    private get headingClassName() {
+        return cx("heading", `dx-text-heading-${this.headingLevel}`);
+    }
+
+    private get hasText(): boolean {
+        return !!(this.title || this.label || this.subtitle);
+    }
+}

package/src/modules/dx/sectionSignup/sectionSignup.css

@@ -0,0 +1,43 @@
+:host {
+    --dx-c-section-signup-width: 606px;
+}
+
+.title-container {
+    width: 100%;
+}
+
+.title {
+    font-family: var(--dx-g-font-display);
+    color: var(--dx-g-blue-vibrant-20);
+    text-align: center;
+    line-height: var(--dx-g-text-2xl);
+    letter-spacing: -0.12px;
+    font-weight: var(--dx-g-font-demi);
+    font-size: var(--dx-g-text-lg);
+}
+
+.input-button-container {
+    --dx-c-button-container-width: 83.5%;
+
+    margin: 0 auto;
+    width: var(--dx-c-button-container-width);
+}
+
+.email-box-button {
+    --dx-c-input-width: 100%;
+}
+
+.section-signup {
+    width: var(--dx-c-section-signup-width);
+    padding-bottom: var(--dx-g-spacing-xl);
+}
+
+@media screen and (max-width: 640px) {
+    :host {
+        --dx-c-section-signup-width: 100%;
+    }
+
+    .input-button-container {
+        --dx-c-button-container-width: 88.8%;
+    }
+}

package/src/modules/dx/sectionSignup/sectionSignup.html

@@ -0,0 +1,23 @@
+<template>
+    <div class="section-signup">
+        <template if:true={inputTitle}>
+            <div class="title-container">
+                <h2 class="title">{inputTitle}</h2>
+            </div>
+        </template>
+
+        <slot onslotchange={onSlotChange}></slot>
+
+        <template if:true={isSlotEmpty}>
+            <div class="input-button-container">
+                <dx-input
+                    class="email-box-button"
+                    placeholder={inputPlaceholder}
+                    submit-label={inputSubmitLabel}
+                    onsubmit={onSubmit}
+                    size={size}
+                ></dx-input>
+            </div>
+        </template>
+    </div>
+</template>

package/src/modules/dx/sectionSignup/sectionSignup.ts

@@ -0,0 +1,44 @@
+import { LightningElement, api } from "lwc";
+import { LightningSlotElement } from "typings/custom";
+import debounce from "debounce";
+const MOBILE_SIZE = 640;
+const getInputSize = () =>
+    (window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth) < MOBILE_SIZE
+        ? "small"
+        : "large";
+export default class SectionSignup extends LightningElement {
+    @api inputTitle?: string = "";
+    @api inputPlaceholder?: string = "";
+    @api inputSubmitLabel?: string = "Subscribe";
+
+    private isSlotEmpty: boolean = true;
+    private size: string = getInputSize();
+
+    connectedCallback() {
+        window.addEventListener("resize", this.onResize.bind(this));
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.onResize.bind(this));
+    }
+
+    private onSubmit(e: CustomEvent) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent("subscribe", { detail: e.detail }));
+    }
+
+    private onSlotChange(e: LightningSlotElement) {
+        // @ts-ignore
+        this.isSlotEmpty = e.target.assignedElements().length === 0;
+    }
+
+    private _updateSize = () => {
+        this.size = getInputSize();
+    };
+
+    private onResize = () =>
+        // @ts-ignore something weird happening here with debounce types
+        debounce(this._updateSize.bind(this)(), 600);
+}

package/src/modules/dx/select/select.css

@@ -0,0 +1,44 @@
+@import "helpers/slds";
+
+:host {
+    display: block;
+}
+
+:host(:focus-visible) {
+    outline: none;
+}
+
+.slds-select_container::before {
+    --icon-size: 0.5em;
+
+    border-style: solid;
+    border-width: 2px 2px 0 0;
+    color: var(--sds-g-gray-9);
+    content: "";
+    display: block;
+    height: var(--icon-size);
+    position: absolute;
+    right: 0.7rem;
+    top: calc((1.75rem / 2) - 5px);
+    transform: rotate(135deg);
+    width: var(--icon-size);
+}
+
+.placeholder {
+    color: var(--sds-g-gray-9);
+}
+
+select.slds-select:focus:not([disabled]),
+select.slds-select:active:not([disabled]) {
+    border-width: 2px;
+    border-color: var(--dx-g-blue-vibrant-50);
+    box-shadow: none;
+    -webkit-box-shadow: none;
+}
+
+:host(.slds-has-error) select.slds-select:focus,
+:host(.slds-has-error) select.slds-select:active {
+    border-color: #ea001e;
+    box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+    -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+}

package/src/modules/dx/select/select.html

@@ -0,0 +1,60 @@
+<template>
+    <label class={computedLabelClass} for="select">
+        {label}
+        <template if:true={required}>
+            <abbr>*</abbr>
+        </template>
+    </label>
+
+    <div class="slds-form-element__control">
+        <div class="slds-select_container">
+            <select
+                autocomplete={autocomplete}
+                class={selectClass}
+                disabled={disabled}
+                id="select"
+                multiple={multiple}
+                name={name}
+                onblur={handleBlur}
+                onchange={handleChange}
+                onfocus={handleFocus}
+                required={required}
+                accesskey={accessKey}
+                size={size}
+            >
+                <template if:true={placeholder}>
+                    <option if:false={value} value="" disabled>
+                        {placeholder}
+                    </option>
+                </template>
+                <template for:each={options} for:item="option">
+                    <template if:true={option.disabled}>
+                        <option
+                            disabled
+                            key={option.value}
+                            value={option.value}
+                        >
+                            {option.label}
+                        </option>
+                    </template>
+                    <template if:false={option.disabled}>
+                        <option key={option.value} value={option.value}>
+                            {option.label}
+                        </option>
+                    </template>
+                </template>
+            </select>
+        </div>
+    </div>
+
+    <template if:true={_helpMessage}>
+        <div
+            aria-live="assertive"
+            class="slds-form-element__help"
+            data-help-message
+            id="help-message"
+        >
+            {_helpMessage}
+        </div>
+    </template>
+</template>

package/src/modules/dx/select/select.ts

@@ -0,0 +1,23 @@
+import cx from "classnames";
+import { api } from "lwc";
+import LightningSelect from "lightning/select";
+import { toJson } from "utils/normalizers";
+
+export default class Select extends LightningSelect {
+    @api placeholder?: string;
+
+    @api
+    get jsonOptions() {
+        return this.options;
+    }
+
+    set jsonOptions(value) {
+        this.options = toJson(value);
+    }
+
+    get selectClass() {
+        return cx("slds-select", {
+            placeholder: !this.value
+        });
+    }
+}

package/src/modules/dx/sidebar/sidebar.css

@@ -0,0 +1,192 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-sidebar-width: 275px;
+    --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-button-background: white;
+    --dx-c-sidebar-button-border: white;
+    --dx-c-sidebar-button-color-hover: white;
+    --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
+}
+
+dx-empty-state {
+    --dx-c-empty-state-background: var(--sds-g-gray-2);
+    --dx-c-empty-state-image-width: 400px;
+
+    display: none;
+}
+
+dx-tree:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.header {
+    box-sizing: content-box;
+    display: flex;
+    line-height: var(--dx-g-spacing-xl);
+    margin-bottom: 12px;
+}
+
+.padding-horizontal {
+    padding-left: var(--dx-g-spacing-md);
+    padding-right: var(--dx-g-spacing-md);
+}
+
+.header-title {
+    line-height: inherit;
+}
+
+.header-toggle-button {
+    position: absolute;
+    right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
+
+    --dx-c-button-opacity: 0;
+    --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
+    --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
+    --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
+    --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
+    --dx-c-button-custom-background-hover: var(
+        --dx-c-sidebar-button-background-hover
+    );
+    --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
+}
+
+.header-toggle-icon {
+    margin: auto 0 auto auto;
+    color: var(--dx-g-blue-vibrant-30);
+}
+
+.header-toggle-icon dx-icon {
+    transition: var(--dx-g-transition-transform-2x);
+}
+
+.container {
+    background-color: var(--dx-g-gray-95);
+    display: flex;
+    flex-direction: column;
+    height: var(--dx-c-sidebar-height);
+    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
+}
+
+.container:not(.container-mobile) {
+    --border-color: transparent;
+    --left-spacing: calc(
+        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
+    );
+
+    box-shadow: 2px 0 0 0 var(--border-color);
+    min-height: var(--dx-c-sidebar-min-height);
+    padding: var(--dx-c-sidebar-vertical-padding) 0
+        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
+    position: relative;
+}
+
+.collapsed.container:not(.container-mobile) {
+    background-color: transparent;
+}
+
+.collapsed.container:not(.container-border-active) {
+    --border-color: transparent;
+}
+
+.container.container-border-active {
+    --border-color: var(--dx-c-sidebar-button-color);
+}
+
+.sidebar-content {
+    overflow-y: auto;
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.search {
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.search-box {
+    --dx-c-input-width: 100%;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.loading-skeleton {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.search-empty.container dx-empty-state {
+    display: block;
+}
+
+.user-searching.container .sidebar-content-tree {
+    display: none;
+}
+
+.show-tree.container .sidebar-content-search {
+    display: none;
+}
+
+.container.collapsed {
+    width: var(--dx-g-spacing-xl);
+}
+
+.container.collapsed .header-toggle-button {
+    transform: rotate(180deg);
+}
+
+.container.collapsed .sidebar-header,
+.container.collapsed .sidebar-content {
+    display: none;
+}
+
+.container:hover .header-toggle-button {
+    --dx-c-button-opacity: 1;
+}
+
+.container.container-mobile {
+    width: 100%;
+}
+
+.container.container-mobile .header {
+    cursor: pointer;
+    line-height: var(--dx-g-spacing-2xl);
+}
+
+.container.container-mobile:not(.collapsed) .header {
+    background-color: #dddbda;
+}
+
+.container.container-mobile .header-title {
+    color: var(--dx-g-gray-10);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+}
+
+.container.container-mobile.collapsed {
+    height: unset;
+    padding-bottom: 0;
+}
+
+.container.container-mobile.collapsed .header {
+    margin-bottom: 0;
+}
+
+.container.container-mobile.collapsed .header-toggle-icon dx-icon {
+    transform: rotateZ(-90deg);
+}
+
+@media (max-width: 768px) {
+    :host {
+        width: 100%;
+    }
+
+    .loading-skeleton {
+        width: 100%;
+    }
+}