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

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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,238 @@
+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

@@ -0,0 +1,160 @@
+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

@@ -0,0 +1,128 @@
+@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;
+    }
+}