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

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

@@ -1,33 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-checkbox-group",
-    component: "dx-checkbox-group"
-};
-
-export const Base = (args: any) => html`
-    <dx-checkbox-group
-        legend="${args.legend}"
-        options="${args.options}"
-        default-value="${args.defaultValue}"
-    ></dx-checkbox-group>
-`;
-
-export const Controlled = (args: any) => html`
-    <dx-checkbox-group
-        legend="${args.legend}"
-        options="${args.options}"
-        value="${args.defaultValue}"
-    ></dx-checkbox-group>
-`;
-
-const args = {
-    ...mockProps,
-    options: JSON.stringify(mockProps.options),
-    defaultValue: JSON.stringify(mockProps.defaultValue)
-};
-
-Base.args = args;
-
-Controlled.args = args;

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

@@ -1,77 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { toJson } from "utils/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/codeBlock/__tests__/codeBlock.test.ts

@@ -1,238 +0,0 @@
-import CodeBlock from "../codeBlock";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-import { track as gtmTrack } from "dx/instrumentation";
-//import Prism from "utils-internal/prismjs";
-
-const TAG = "dx-code-block";
-const render = createRenderComponent(TAG, CodeBlock);
-
-jest.mock("dx/instrumentation");
-
-const GTM_EVENT_NAME = "custEv_codeBlock";
-/*
-const mockPrismHighlight = jest.fn();
-jest.mock("utils-internal/prismjs", () =>
-    jest.fn().mockImplementation(() => {
-        return {
-            highlightAllUnder: mockPrismHighlight
-        };
-    })
-);
-*/
-
-describe(TAG, () => {
-    const oldNavigator = window.navigator;
-    const oldError = console.error;
-
-    afterAll(() => {
-        Object.assign(window.navigator, oldNavigator);
-        Object.assign(console.error, oldError);
-    });
-
-    it("renders the codeblock in dark mode", async () => {
-        const element = render({
-            codeBlock: mockProps.apex,
-            title: "Apex Example",
-            defaultTheme: "dark",
-            language: "apex"
-        });
-        expect(window.localStorage.getItem("dx-codeblock-theme")).toBe(null);
-        const dxThemeDark = element.shadowRoot.querySelector(".dx-theme-dark");
-        expect(dxThemeDark).not.toContain(null);
-        expect(element.shadowRoot.querySelector(".source-btn")).toBe(null);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("renders the codeblock in light mode", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java"
-        });
-        const dxThemeLight =
-            element.shadowRoot.querySelector(".dx-theme-light");
-        expect(dxThemeLight).not.toContain(null);
-
-        expect(element.shadowRoot.querySelector(".source-btn")).toBe(null);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("changes between themes", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java"
-        });
-
-        //expect light
-        const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
-        expect(divTheme).not.toBeNull();
-
-        const updateThemeBtn = element.shadowRoot.querySelector(
-            "dx-button.update-theme-btn"
-        );
-
-        //update light -> dark
-        updateThemeBtn.click();
-
-        //gtm event
-        expect(gtmTrack).toBeCalled();
-
-        return Promise.resolve()
-            .then(() => {
-                //expect -> dark
-                expect(divTheme.classList).toContain("dx-theme-dark");
-                element.shadowRoot
-                    .querySelector("dx-button.update-theme-btn")
-                    .click();
-
-                //expect gtm event for dark mode
-                expect(gtmTrack).toBeCalledWith(
-                    updateThemeBtn,
-                    GTM_EVENT_NAME,
-                    {
-                        codeBlockAction: "darkmode"
-                    }
-                );
-            })
-            .then(() => {
-                //expect -> light
-                expect(divTheme.classList).toContain("dx-theme-light");
-
-                //expect gtm event for dark mode
-                expect(gtmTrack).toBeCalledWith(
-                    updateThemeBtn,
-                    GTM_EVENT_NAME,
-                    {
-                        codeBlockAction: "lightmode"
-                    }
-                );
-            });
-    });
-
-    it("renders source button", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-
-        const sourceBtn = element.shadowRoot.querySelector(".source-btn");
-        expect(sourceBtn).not.toBe(null);
-        expect(sourceBtn.href).toBe("http://www.salesforce.com");
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("renders custom markup with text code content", async () => {
-        const element = render({
-            codeBlock: mockProps.text,
-            title: "Text Code Content",
-            language: "text"
-        });
-
-        const sourceContent = element.shadowRoot.querySelector(
-            ".code-block-content"
-        );
-        const titleElement = element.shadowRoot.querySelector(
-            ".dx-code-block-heading"
-        );
-
-        expect(sourceContent).not.toBe(null);
-        expect(sourceContent.textContent).toContain(
-            "Connected to Salesforce Functions"
-        );
-        expect(titleElement).not.toBe(null);
-        expect(titleElement.textContent).toBe("Text Code Content");
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("Test copy functionality", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-
-        Object.assign(window.navigator, {
-            clipboard: { writeText: jest.fn() }
-        });
-        Object.assign(console, { error: jest.fn() });
-
-        const sourceBtn = element.shadowRoot.querySelector(".copy-btn");
-        expect(sourceBtn).not.toBe(null);
-        sourceBtn.click();
-
-        //gtm event
-        expect(gtmTrack).toBeCalled();
-
-        expect(gtmTrack).toBeCalledWith(sourceBtn, GTM_EVENT_NAME, {
-            codeBlockAction: "copy"
-        });
-
-        expect(window.navigator.clipboard.writeText).toBeCalledTimes(1);
-        expect(window.navigator.clipboard.writeText).toBeCalledWith(
-            element.shadowRoot.querySelector(".code-block-content").textContent
-        );
-        expect(console.error).toBeCalledTimes(0);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("Test Theme update Wire functionality", async () => {
-        window.localStorage.removeItem("dx-codeblock-theme");
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-        expect(window.localStorage.getItem("dx-codeblock-theme")).toBeNull();
-        const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
-        expect(divTheme).not.toBeNull();
-
-        element.shadowRoot.querySelector("dx-button.update-theme-btn").click();
-
-        return Promise.resolve().then(() => {
-            expect(window.localStorage.getItem("dx-codeblock-theme")).toBe(
-                "dark"
-            );
-            //expect -> dark
-            expect(divTheme.classList).toContain("dx-theme-dark");
-        });
-    });
-
-    it("Test if new code-blocks render with dark theme if the localstorage has dx-codeblock-theme key set", async () => {
-        window.localStorage.setItem("dx-codeblock-theme", "dark");
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-        const dxThemeDark = element.shadowRoot.querySelector(".dx-theme-dark");
-        expect(dxThemeDark).not.toContain(null);
-    });
-
-    it("Test if new code-blocks render with light theme if the localstorage has ivalid theme against dx-codeblock-theme key", async () => {
-        window.localStorage.setItem("dx-codeblock-theme", "not-valid-theme");
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-
-        const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
-        expect(divTheme).not.toBeNull();
-        expect(window.localStorage.getItem("dx-codeblock-theme")).toBe(
-            element.defaultTheme
-        );
-    });
-});

package/src/modules/dx/codeBlock/__tests__/mockProps.ts

@@ -1,160 +0,0 @@
-export default {
-    preTagApex: `<pre class=&quot;codeblock brush:apex&quot;>
-    trigger AccountTrigger on Account (after update) {
-        Map<ID, Account> acctMapToUpdate = new Map<Id, Account>();
-        for(Integer i = 0 ; i < trigger.new.size() ; i++){
-            Account old = trigger.old[i];
-            Account nw = trigger.new[i];
-            if(old.TickerSymbol != nw.TickerSymbol){
-                Account a = new Account(Id = nw.Id, Rating = 'Needs Evaluation');
-                acctMapToUpdate.put(nw.Id, a);
-            }            
-        }
-        if(acctMapToUpdate.size() > 0){
-            update acctMapToUpdate.values();
-        }
-    }
-        </pre>`,
-
-    xml: `
-<rsp stat=&quot;ok&quot; version=&quot;1.0&quot;>
-    <result>
-        <total_results>...</total_results>
-        <form>...</form>
-        <form>...</form>
-        <form>...</form>
-    </result>
- </rsp>`,
-
-    apex: `trigger AccountTrigger on Account (after update) {
-    Map<ID, Account> acctMapToUpdate = new Map<Id, Account>();
-    for(Integer i = 0 ; i < trigger.new.size() ; i++){
-        Account old = trigger.old[i];
-        Account nw = trigger.new[i];
-        if(old.TickerSymbol != nw.TickerSymbol){
-            Account a = new Account(Id = nw.Id, Rating = 'Needs Evaluation');
-            acctMapToUpdate.put(nw.Id, a);
-        }            
-    }
-    if(acctMapToUpdate.size() > 0){
-        update acctMapToUpdate.values();
-    }
-}`,
-
-    java: `
-/* HelloWorld.java */
-public class HelloWorld {
-    char oneChar = 'C';
-    public static void main(String[] args) {
-        System.out.println(&quot;Hello World&quot;);
-    }
-}
-`,
-
-    javascript: `
-function swap(array, i, j) {
-    var temp = array[i];
-    array[i] = array[j];
-    array[j] = temp;
-}
-
-function getRandomInt(min, max) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-console.log(&quot;Sorted array: &quot;);
-console.log(arr);
-`,
-
-    css: `
-p {
-    border-style: solid;
-    border-left: thick double #ff0000;
-}
-
-div {
-    border: 1px solid black;
-    margin: 25px;
-    background-color: lightblue;
-}
-
-.toolbar-item:first-child {
-    flex-basis: 95%;
-}
-
-dx-button {
-    --dx-c-button-primary-color: var(--dx-g-hot-orange-vibrant-95);
-}`,
-
-    visualforce: `
-<apex:column value=&quot{! ct.FirstName }&quot>
-    <apex:facet name=&quot;header&quot;>
-        <apex:commandLink action=&quot;{! sortByFirstName }&quot;
-            reRender=&quot;contacts_list&quot;>First Name
-        </apex:commandLink>
-    </apex:facet>
-</apex:column>
-<apex:column value=&quot;{! ct.LastName }&quot;>
-    <apex:facet name=&quot;header&quot>
-        <apex:commandLink action=&quot;{! sortByLastName }&quot;
-            reRender=&quot;contacts_list&quot;>Last Name
-        </apex:commandLink>
-    </apex:facet>
-</apex:column>
-`,
-
-    html: `
-<!DOCTYPE html>
-<html>
-    <head>
-        <script src=&quot;vendor/prism.js&quot;></script>
-        <style>
-            h1 {color: red}
-        </style>
-    </head>
-    <body>
-        <dx-button>I am a Button</dx-button>
-        <!-- This is
-        a multiline
-        comment -->
-
-        <h2>Unordered List with Circle Bullets</h2>
-        <ul style=&quot;list-style-type : circle;&quot;>
-            <li>Coffee</li>
-
-            <!-- This is a one line comment -->
-            
-            <li>Tea</li>
-            <li>Milk</li>
-        </ul>
-    </body>
-</html>
-`,
-
-    TypeScript: `
-export default class CodeBlock {
-    overrideWidth?: boolean = false;
-    title: string = 'title';
-    variant?: CodeBlockVariant = 'card';
-
-    get isCard(): boolean {
-        return this.variant === 'card';
-    }
-}
-`,
-
-    php: `
-function makeItBIG($a_lot_of_names) {
-    foreach($a_lot_of_names as $the_simpsons) {
-        $BIG[] = strtoupper($the_simpsons);
-    }
-    return $BIG;
-}
-
-$a_lot_of_names = ['Homer', 'Marge', 'Bart', 'Maggy', 'Lisa'];
-var_dump(makeItBIG($a_lot_of_names));
-`,
-    text: `
-  Connected to Salesforce Functions account:\nAccount ID: <ID>\nLogin Org Domain: <org domain>\nLogin Org ID: <org ID>
-  `
-};

package/src/modules/dx/codeBlock/codeBlock.css

@@ -1,128 +0,0 @@
-@import "helpers/code";
-@import "helpers/text";
-@import "./darkTheme.css";
-@import "./lightTheme.css";
-
-:host {
-    position: relative;
-}
-
-pre {
-    margin: 0 !important;
-}
-
-.copyta {
-    height: 0;
-    position: absolute;
-    opacity: 0;
-    width: 0;
-}
-
-.toolbar {
-    border-radius: 0.3em 0.3em 0 0;
-    opacity: 1;
-    display: flex;
-    align-items: center;
-    height: 40px;
-}
-
-.dx-theme-light .toolbar {
-    background-color: var(--dx-g-gray-90);
-}
-
-.dx-theme-dark .toolbar {
-    background-color: var(--dx-g-blue-natural-20);
-}
-
-.divider {
-    border-left-style: solid;
-    border-left-width: 1px;
-    height: var(--dx-g-spacing-md);
-    margin-right: var(--dx-g-spacing-xs);
-    width: 0;
-}
-
-.dx-theme-dark .divider {
-    border-left-color: var(--dx-g-blue-vibrant-40);
-}
-
-.dx-theme-light .divider {
-    border-left-color: #dddbda;
-}
-
-.dx-code-block-heading {
-    padding-left: var(--dx-g-spacing-mlg);
-    transform: translateY(3px);
-}
-
-.dx-theme-light .dx-code-block-heading {
-    color: var(--dx-g-blue-vibrant-20) !important;
-}
-
-.dx-theme-dark .dx-code-block-heading {
-    color: white !important;
-}
-
-.toolbar-item {
-    display: inline-block;
-}
-
-.toolbar-item:first-child {
-    flex-basis: 95%;
-}
-
-.dx-theme-dark .btn {
-    --dx-c-button-primary-color: #fff;
-    --dx-c-button-primary-color-hover: var(--dx-g-blue-natural-10);
-    --dx-c-button-secondary-color-hover: var(--dx-g-blue-vibrant-30);
-    --dx-c-button-custom-color: #fff;
-    --dx-c-button-custom-color-hover: #fff;
-    --dx-c-button-custom-background-hover: var(--dx-g-blue-natural-10);
-}
-
-.dx-theme-light .btn {
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-button-primary-color-hover: var(--dx-g-gray-60);
-    --dx-c-button-secondary-color-hover: #dddbda;
-    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-20);
-    --dx-c-button-custom-background-hover: var(--dx-g-gray-60);
-}
-
-div.code-block-content {
-    border-radius: 0 0 0.3em 0.3em;
-    overflow-y: auto;
-}
-
-.dx-theme-dark div.code-block-content {
-    background: var(--dx-g-blue-vibrant-10);
-}
-
-.dx-theme-light div.code-block-content {
-    background: var(--dx-g-gray-95);
-}
-
-code[class*="language-"] {
-    margin-left: -11px;
-}
-
-.toolbar-item:not(:first-of-type) {
-    margin-right: var(--dx-g-spacing-xs);
-}
-
-pre[class*="language-"] {
-    border-radius: 0 0 0.3em 0.3em;
-    padding-bottom: var(--dx-g-spacing-smd);
-    background-color: unset;
-    padding-top: var(--dx-g-spacing-sm);
-}
-
-pre[class*="language-"].line-numbers {
-    padding-left: 56px;
-}
-
-@media screen and (max-width: 640px) {
-    .dx-code-block-heading {
-        display: none;
-    }
-}