@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

package/src/modules/helpers/slds/slds.css

@@ -1,191 +0,0 @@
-:host(.slds-form-element_stacked) .slds-form-element__label,
-:host(.slds-form-element_stacked) .slds-form-element__control {
-    border-bottom: 0;
-    padding-left: 0;
-}
-
-:host(.slds-form-element_stacked) .slds-form-element__control {
-    width: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    clear: left;
-}
-
-@media (min-width: 48em) {
-    :host(.slds-form-element_horizontal) .slds-form-element__control {
-        padding-left: 33%;
-        clear: none;
-    }
-}
-
-:host(.slds-has-error) .slds-select {
-    border-color: #ea001e;
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
-    box-shadow: #ea001e 0 0 0 1px inset;
-    background-clip: padding-box;
-}
-
-:host(.slds-has-error) .slds-select:focus,
-:host(.slds-has-error) .slds-select:active {
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
-    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
-}
-
-:host(.slds-has-error) .slds-form-element__help {
-    color: #ea001e;
-}
-
-abbr[title] {
-    border-bottom: 1px dotted;
-}
-
-abbr[title] {
-    text-decoration: none;
-}
-
-abbr[title],
-fieldset,
-hr {
-    border: 0;
-}
-
-abbr[title] {
-    cursor: help;
-}
-
-abbr[title]:after {
-    content: " (" attr(title) ")";
-}
-
-button,
-select {
-    text-transform: none;
-}
-
-.slds-form-element__label {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
-    hyphens: auto;
-    display: inline-block;
-    color: #3e3e3c;
-    font-size: 0.75rem;
-    padding-right: 0.5rem;
-    padding-top: 0.25rem;
-    margin-bottom: 0.125rem;
-}
-
-.slds-form-element__label:empty {
-    margin: 0;
-}
-
-.slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
-}
-
-.slds-required {
-    color: #ea001e;
-    margin: 0 0.125rem;
-}
-
-.slds-form-element__control {
-    clear: left;
-    position: relative;
-}
-
-.slds-select {
-    height: calc(1.875rem + (1px * 2));
-    width: 100%;
-    border: 1px solid var(--sds-c-select-color-border, #dddbda);
-    border-radius: var(--sds-c-select-radius-border, 0.25rem);
-    background-color: var(--sds-c-select-color-background, white);
-    color: var(--sds-c-select-text-color);
-    -webkit-box-shadow: var(--sds-c-select-shadow);
-    box-shadow: var(--sds-c-select-shadow);
-    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
-    transition: border 0.1s linear, background-color 0.1s linear;
-}
-
-.slds-select:required {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.slds-select:focus,
-.slds-select:active {
-    outline: 0;
-    border-color: var(--sds-c-select-color-border-focus, #1b96ff);
-    background-color: var(--sds-c-select-color-background-focus, white);
-    color: var(--sds-c-select-text-color-focus);
-    -webkit-box-shadow: var(--sds-c-select-shadow-focus, 0 0 3px #0176d3);
-    box-shadow: var(--sds-c-select-shadow-focus, 0 0 3px #0176d3);
-}
-
-.slds-select[disabled],
-.slds-select.slds-is-disabled {
-    background-color: #ecebea;
-    border-color: #c9c7c5;
-    color: #3e3e3c;
-    cursor: not-allowed;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    opacity: 1;
-}
-
-.slds-select[disabled]:focus,
-.slds-select[disabled]:active,
-.slds-select.slds-is-disabled:focus,
-.slds-select.slds-is-disabled:active {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.slds-select[size],
-.slds-select[multiple] {
-    min-height: calc(1.875rem + (1px * 2));
-    height: inherit;
-}
-
-.slds-select[size] option,
-.slds-select[multiple] option {
-    padding: 0.5rem;
-}
-
-.slds-select_container {
-    position: relative;
-    color: var(--sds-c-select-text-color);
-}
-
-.slds-select_container .slds-select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    padding-left: 0.5rem;
-    padding-right: 1.5rem;
-}
-.slds-select_container .slds-select::-ms-expand {
-    display: none;
-}
-
-.slds-select[size] option,
-.slds-select[multiple] option {
-    padding: 0.5rem;
-}
-
-.slds-form-element__help,
-.slds-form-element__helper {
-    font-size: 0.75rem;
-    margin-top: 0.125rem;
-    display: block;
-}

package/src/modules/helpers/table/table.css

@@ -1,110 +0,0 @@
-table {
-    --table-border-radius: 4px;
-    --table-cell-text-base: var(--dx-g-text-sm);
-    --table-cell-line-height: var(--dx-g-text-lg);
-
-    display: block;
-    overflow-x: scroll;
-    border-collapse: separate;
-    border-spacing: 0;
-    margin-top: var(--dx-g-spacing-lg);
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-table tr {
-    height: 50px;
-}
-
-th,
-td {
-    padding: var(--dx-g-spacing-md);
-    font-size: var(--table-cell-text-base);
-    line-height: var(--table-cell-line-height);
-}
-
-th {
-    background-color: var(--dx-g-indigo-vibrant-95);
-    font-weight: var(--dx-g-font-bold);
-    border-bottom: 3px solid var(--dx-g-indigo-vibrant-30);
-}
-
-td {
-    vertical-align: top;
-}
-
-tr th,
-tr td {
-    text-align: left;
-}
-
-table tbody tr td {
-    vertical-align: middle;
-    border-bottom: 1px solid var(--dx-g-gray-90);
-}
-
-tr th:first-of-type,
-td:first-of-type {
-    min-width: 110px;
-}
-
-tr td:first-of-type {
-    border-left: 1px solid var(--dx-g-gray-90);
-}
-
-tr td:last-of-type {
-    border-right: 1px solid var(--dx-g-gray-90);
-}
-
-tr:first-of-type th:first-of-type {
-    border-top-left-radius: var(--table-border-radius);
-}
-
-tr:first-of-type th:last-of-type {
-    border-top-right-radius: var(--table-border-radius);
-}
-
-table :not(thead + tbody) tr:first-of-type td {
-    border-top: 1px solid var(--dx-g-gray-90);
-}
-
-tr:last-of-type td:first-of-type {
-    border-bottom-left-radius: var(--table-border-radius);
-    border-bottom: 1px solid var(--dx-g-gray-90);
-    border-left: 1px solid var(--dx-g-gray-90);
-}
-
-tr:last-of-type td:last-of-type {
-    border-bottom-right-radius: var(--table-border-radius);
-    border-bottom: 1px solid var(--dx-g-gray-90);
-    border-right: 1px solid var(--dx-g-gray-90);
-}
-
-tr td[colspan]:not([colspan="1"]) {
-    text-align: center;
-}
-
-/**
- * Inside of a <td>, we want font size not to increase as it otherwise would
- * for standard inline/"prose-level" elements (e.g., <p>, <li>). But we *do*
- * want to leave font size increases in place for *other* elements inside <td>,
- * like callouts, headings (<h1>, <h2>, etc.), and so on. In order not to
- * "stomp" on too much -- and because we don't control the markup, so can't
- * easily add new CSS classes, etc. -- we try to pick out the specific
- * structures only here. (See https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view)
- */
-td :is(.li, p, .p, dd) {
-    font-size: var(--table-cell-text-base);
-}
-
-td doc-content-callout :is(.li, p, .p, dd) {
-    /* Override/reset for callouts -- see https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view */
-    font-size: var(--dx-g-text-base);
-}
-
-table :not(thead + tbody) tr:first-of-type td:first-of-type {
-    border-top-left-radius: var(--table-border-radius);
-}
-
-table :not(thead + tbody) tr:first-of-type td:last-of-type {
-    border-top-right-radius: var(--table-border-radius);
-}

package/src/modules/helpers/text/text.css

@@ -1,163 +0,0 @@
-.dx-text-heading-1 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: 64px; /* not registered */
-    letter-spacing: -0.6px;
-    line-height: 64px;
-}
-
-.dx-text-heading-2 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-5xl);
-    letter-spacing: -0.6px;
-    line-height: 60px;
-}
-
-.dx-text-heading-3 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-3xl);
-    letter-spacing: -0.4px;
-    line-height: 40px;
-}
-
-.dx-text-heading-4 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xl);
-    letter-spacing: -0.1px;
-    line-height: 28px;
-}
-
-.dx-text-heading-5 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: 18px; /* not registered */
-    letter-spacing: -0.1px;
-    line-height: 24px;
-}
-
-.dx-text-heading-6 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-base);
-    letter-spacing: 0;
-    line-height: 20px;
-}
-
-.dx-text-heading-7 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    letter-spacing: 0;
-    line-height: 18px;
-}
-
-.dx-text-heading-alt-1 {
-    color: var(--dx-g-text-label-color);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--slds-text-lg);
-    line-height: 25px;
-}
-
-.dx-text-body-1 {
-    color: var(--dx-g-text-body-color);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-lg);
-    letter-spacing: 0;
-    line-height: 32px;
-}
-
-.dx-text-body-2 {
-    color: var(--dx-g-text-body-color);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-base);
-    letter-spacing: 0;
-    line-height: 24px;
-}
-
-.dx-text-body-3 {
-    color: var(--dx-g-text-body-color);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-sm);
-    letter-spacing: 0;
-    line-height: 20px;
-}
-
-.dx-text-body-4 {
-    color: var(--dx-g-text-body-color);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-xs);
-    letter-spacing: 0;
-    line-height: 18px;
-}
-
-.dx-text-button-brand {
-    color: var(--dx-g-text-button-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    letter-spacing: 0;
-    line-height: 20px;
-}
-
-.dx-text-button-light {
-    color: var(--dx-g-text-button-light-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    letter-spacing: 0;
-    line-height: 20px;
-}
-
-.dx-text-label-1 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    letter-spacing: 0.7px;
-    line-height: 16px;
-    text-align: center;
-    text-transform: uppercase;
-}
-
-.dx-text-label-1-dark {
-    color: var(--dx-g-text-label-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    letter-spacing: 0.7px;
-    line-height: 16px;
-    text-align: center;
-    text-transform: uppercase;
-}
-
-.dx-text-label-2 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xs);
-    letter-spacing: 0.7px;
-    line-height: 16px;
-    text-transform: uppercase;
-}
-
-.dx-text-label-3 {
-    color: var(--dx-g-text-label-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xs);
-    font-weight: var(--dx-g-font-demi);
-    letter-spacing: 0.7px;
-    line-height: 16px;
-    text-transform: uppercase;
-}
-
-.dx-text-form-error-message {
-    font-family: var(--dx-g-font-sans);
-    color: var(--dx-g-red-vibrant-50);
-    font-size: var(--dx-g-text-xs);
-    line-height: 14px;
-}
-
-.dx-text-truncate {
-    display: -webkit-box;
-    -webkit-line-clamp: var(--dx-c-max-lines, 6);
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}

package/src/modules/test-components/buttonTest/buttonTest.html

@@ -1,3 +0,0 @@
-<template>
-    <dx-button>test</dx-button>
-</template>

package/src/modules/test-components/buttonTest/buttonTest.ts

@@ -1,3 +0,0 @@
-import { LightningElement } from "lwc";
-
-export default class ButtonTest extends LightningElement {}

package/src/modules/test-components/codeBlockTest/codeBlockTest.js

@@ -1,4 +0,0 @@
-import { LightningElement } from "lwc";
-// Wrapper component required to test dx/featureGrid.
-// This component is not exposed in the build.
-export default class CodeBlockTest extends LightningElement {}

package/src/modules/test-components/featureGridTest/featureGridTest.html

@@ -1,7 +0,0 @@
-<template>
-    <dx-feature-grid>
-        <dx-feature button-label="Feature 1" title="Feature 1"></dx-feature>
-        <dx-feature button-label="Feature 2" title="Feature 2"></dx-feature>
-        <dx-feature button-label="Feature 3" title="Feature 3"></dx-feature>
-    </dx-feature-grid>
-</template>

package/src/modules/test-components/featureGridTest/featureGridTest.ts

@@ -1,5 +0,0 @@
-import { LightningElement } from "lwc";
-
-// Wrapper component required to test dx/featureGrid.
-// This component is not exposed in the build.
-export default class FeatureGridTest extends LightningElement {}

package/src/modules/test-components/instrumentationTest/instrumentationTest.html

@@ -1,4 +0,0 @@
-<template>
-    <button onclick={handleButtonClick}>Click me!</button>
-    <dx-instrumentation use-google-tag-manager></dx-instrumentation>
-</template>

package/src/modules/test-components/instrumentationTest/instrumentationTest.ts

@@ -1,8 +0,0 @@
-import { LightningElement } from "lwc";
-import { track } from "dx/instrumentation";
-
-export default class InstrumentationTest extends LightningElement {
-    handleButtonClick(e: MouseEvent) {
-        track(e.currentTarget, "buttonClick", { buttonName: "default" });
-    }
-}

package/src/modules/test-components/popoverTest/popoverTest.html

@@ -1,6 +0,0 @@
-<template>
-    <dx-popover open-on-hover={openOnHover}>
-        <dx-button slot="control">test control</dx-button>
-        <div slot="content">test content</div>
-    </dx-popover>
-</template>

package/src/modules/test-components/popoverTest/popoverTest.ts

@@ -1,5 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class PopoverTest extends LightningElement {
-    @api openOnHover: boolean = false;
-}

package/src/modules/utils/highlight/__tests__/highlight.test.ts

@@ -1,108 +0,0 @@
-import { createElement } from "lwc";
-import CodeBlock from "dx/codeBlock";
-import { highlightTerms } from "utils/highlight";
-import { mockContent, allowedTags } from "./mockProps";
-
-const container = document.createElement("div");
-
-describe("highlight utility", () => {
-    afterEach(() => (container.innerHTML = ""));
-
-    it("highlights text that matches search criteria", () => {
-        container.innerHTML = mockContent;
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "apex"
-        );
-        expect(container.querySelectorAll("mark")).toHaveLength(14);
-    });
-
-    it("doesn't highlight elements that contains dx/docs components", () => {
-        const searchTerm = "customreport";
-        const codeBlock = createElement("dx-code-block", { is: CodeBlock });
-        Object.assign(codeBlock, {
-            codeBlock: searchTerm,
-            language: "text"
-        });
-        container.appendChild(document.createElement("p"));
-        container.firstElementChild?.appendChild(codeBlock);
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            searchTerm
-        );
-        expect(container.querySelectorAll("mark")).toHaveLength(0);
-        expect(codeBlock.shadowRoot.innerHTML).toMatch(searchTerm); // sanity check
-    });
-
-    it("doesn't highlight terms separated by html tags", () => {
-        container.innerHTML = "<p>loadData<span>within</span></p>";
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "loadDatawithin"
-        );
-        expect(container.querySelectorAll("mark")).toHaveLength(0);
-    });
-
-    it("escapes regex especial characters", () => {
-        container.innerHTML = mockContent;
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "apex.+"
-        );
-        expect(container.querySelectorAll("mark")).toHaveLength(0);
-    });
-
-    it("cleans previous search result before searching for a new term", () => {
-        const firstSearch = "apex";
-        const secondSearch = "salesforce";
-
-        container.innerHTML = mockContent;
-
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            firstSearch
-        );
-        const firstMarks = container.querySelectorAll("mark");
-        expect(firstMarks).toHaveLength(14);
-        firstMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(firstSearch)
-        );
-
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            secondSearch
-        );
-        const secondMarks = container.querySelectorAll("mark");
-        expect(secondMarks).toHaveLength(4);
-        secondMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(secondSearch)
-        );
-    });
-
-    it("cleans all marks if the search term is empty string", () => {
-        const firstSearch = "apex";
-        const secondSearch = "";
-
-        container.innerHTML = mockContent;
-
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            firstSearch
-        );
-        const firstMarks = container.querySelectorAll("mark");
-        expect(firstMarks).toHaveLength(14);
-        firstMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(firstSearch)
-        );
-
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            secondSearch
-        );
-        const secondMarks = container.querySelectorAll("mark");
-        expect(secondMarks).toHaveLength(0);
-        secondMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(secondSearch)
-        );
-    });
-});

package/src/modules/utils/highlight/__tests__/mockProps.ts

@@ -1,45 +0,0 @@
-export const mockContent = `<div><a name='apex_dev_guide'><!-- --></a><h1 class='helpHead1'>Apex Developer Guide</h1><div class='shortdesc'>Salesforce has changed the way organizations do business by moving enterprise
-applications that were traditionally client-server-based into the Lightning Platform, an
-on-demand, multitenant Web environment. This environment enables you to run and customize
-applications, such as Salesforce Automation and Service &amp; Support, and build new custom
-applications based on particular business needs. </div><div id='sfdc:seealso' class='related-links'>
-<ul class='ullinks'>
-<li class='link ulchildlink'>
-<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_intro_get_started.htm'>Getting Started with Apex</a></strong><br>
-Apex is a strongly typed, object-oriented programming language that allows developers         to execute flow and transaction control statements on the Lightning Platform server, in         conjunction with calls to the API.</li>
-<li class='link ulchildlink'>
-<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_writing.htm'>Writing Apex</a></strong><br>
-Apex is like Java for Salesforce. It enables you to add and interact with data in the         Lightning Platform persistence layer. It uses classes, data types, variables, and if-else         statements. You can make it execute based on a condition, or have a block of code execute         repeatedly.</li>
-<li class='link ulchildlink'>
-<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_running.htm'>Running Apex</a></strong><br>
-You can access many features of the Salesforce user interface programmatically in         Apex, and you can integrate with external SOAP and REST Web services. You can run Apex code         using a variety of mechanisms. Apex code runs in atomic transactions. </li>
-<li class='link ulchildlink'>
-<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_debug_test_deploy.htm'>Debugging, Testing, and Deploying Apex</a></strong><br>
-Develop your Apex code in a sandbox and debug it with the Developer Console and debug         logs. Unit-test your code, then distribute it to customers using packages.</li>
-<li class='link ulchildlink'>
-<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_reference.htm'>Apex Language Reference</a></strong><br>
-This Apex reference goes into detail about DML statements and the built-in Apex         classes and interfaces.</li>
-<li class='link ulchildlink'>
-<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_appendices.htm'>Appendices</a></strong><br>
-</li>
-<li class='link ulchildlink'>
-<strong><a href='atlas.en-us.apexcode.meta/apexcode/glossary_apex.htm'>Glossary</a></strong><br>
-</li>
-</ul>
-</div><!--DRC 228.7--></div>`;
-
-export const allowedTags = [
-    "p",
-    ".p",
-    ".shortdesc",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "li",
-    "dl",
-    "th",
-    "td"
-];