@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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.stories.ts

@@ -0,0 +1,59 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-select",
+    component: "dx-select",
+    argTypes: {
+        value: {
+            defaultValue: "b",
+            control: {
+                type: "text"
+            }
+        }
+    }
+};
+
+const OPTIONS = [
+    { value: "a", label: "First option" },
+    { value: "b", label: "Second option" },
+    { value: "c", label: "Third option" }
+];
+
+const styles = () => html`
+    <style>
+        dx-select {
+            width: clamp(200px, 50%, 600px);
+        }
+    </style>
+`;
+
+export const Base = ({ value }: any) => html`
+    ${styles()}
+    <dx-select
+        json-options="${JSON.stringify(OPTIONS)}"
+        label="Hello"
+        value="${value}"
+    ></dx-select>
+`;
+
+export const Required = () => html`
+    ${styles()}
+    <dx-select
+        json-options="${JSON.stringify(OPTIONS)}"
+        label="Hello Required"
+        message-when-value-missing="This field is empty"
+        required="true"
+        placeholder="Select a Value"
+        value=""
+    ></dx-select>
+`;
+
+export const Disabled = ({ value }: any) => html`
+    ${styles()}
+    <dx-select
+        disabled="true"
+        label="Hello Disabled"
+        json-options="${JSON.stringify(OPTIONS)}"
+        value="${value}"
+    ></dx-select>
+`;

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/__tests__/mockProps.ts

@@ -0,0 +1,181 @@
+import { TreeNode } from "typings/custom";
+
+export const SAMPLE_TREES: TreeNode[] = [
+    {
+        label: "Getting started",
+        name: "started",
+        isExpanded: true,
+        children: [
+            {
+                label: "Introduction",
+                name: "introduction"
+            },
+            {
+                label: "Getting started",
+                name: "started-child"
+            },
+            {
+                label: "Authentication",
+                name: "authentication"
+            },
+            {
+                label: "Token",
+                name: "token"
+            },
+            {
+                label: "Error",
+                name: "error"
+            },
+            {
+                label: "Limits",
+                name: "limit"
+            },
+            {
+                label: "Release note",
+                name: "release-note"
+            }
+        ]
+    },
+    {
+        label: "Einstein Vision",
+        name: "einstein-vision",
+        children: [
+            {
+                label: "Introduction",
+                name: "einstein-introduction"
+            },
+            {
+                label: "Terminology",
+                name: "terminology"
+            },
+            {
+                label: "Object detection quickstart for beginner",
+                name: "object-quickstart",
+                isExpanded: true,
+                children: [
+                    {
+                        label:
+                            "Scenario: this block is intended to show how a large text looks like in the sidebar",
+                        name: "scenario",
+                        isExpanded: true,
+                        children: [
+                            {
+                                label:
+                                    "Scenario A: this block is intended to show how a large text looks like in the sidebar",
+                                name: "scenario-a"
+                            },
+                            {
+                                label: "Scenario B",
+                                name: "scenario-b"
+                            }
+                        ]
+                    },
+                    {
+                        label: "Prerequisites",
+                        name: "prerequisites"
+                    }
+                ]
+            },
+            {
+                label: "Best Practices",
+                name: "best-practices"
+            }
+        ]
+    }
+];
+
+export const SAMPLE_TREES_WITH_METHODS: TreeNode[] = [
+    {
+        label: "Getting started",
+        name: "started",
+        isExpanded: true,
+        children: [
+            {
+                label: "Introduction",
+                name: "introduction",
+                method: "post"
+            },
+            {
+                label: "Getting started",
+                name: "started-child",
+                method: "get"
+            },
+            {
+                label: "Authentication",
+                name: "authentication",
+                method: "delete"
+            },
+            {
+                label: "Token",
+                name: "token",
+                method: "patch"
+            },
+            {
+                label: "Error",
+                name: "error",
+                method: "put"
+            },
+            {
+                label: "Limits",
+                name: "limit",
+                method: "get"
+            },
+            {
+                label: "Release note",
+                name: "release-note",
+                method: "post"
+            }
+        ]
+    },
+    {
+        label: "Einstein Vision",
+        name: "einstein-vision",
+        children: [
+            {
+                label: "Introduction",
+                name: "einstein-introduction",
+                method: "get"
+            },
+            {
+                label: "Terminology",
+                name: "terminology",
+                method: "get"
+            },
+            {
+                label: "Object detection quickstart for beginner",
+                name: "object-quickstart",
+                isExpanded: true,
+                children: [
+                    {
+                        label: "Scenario",
+                        name: "scenario",
+                        isExpanded: true,
+                        children: [
+                            {
+                                label:
+                                    "Scenario A: this block is intended to show how a large text looks like in the sidebar",
+                                name: "scenario-a",
+                                method: "post"
+                            },
+                            {
+                                label: "Scenario B",
+                                name: "scenario-b",
+                                method: "put"
+                            }
+                        ]
+                    },
+                    {
+                        label: "Prerequisites",
+                        name: "prerequisites",
+                        method: "delete"
+                    }
+                ]
+            },
+            {
+                label: "Best Practices",
+                name: "best-practices",
+                method: "patch"
+            }
+        ]
+    }
+];

package/src/modules/dx/sidebar/__tests__/mockSearchChangeEmptyEvent.ts

@@ -0,0 +1,6 @@
+export default {
+    detail: {
+        value: "pwa",
+        results: []
+    }
+};