@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

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

@@ -1,242 +0,0 @@
-import CodeBlock from "../codeBlock";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-import { track as gtmTrack } from "dx/instrumentation";
-//import Prism from "utils/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/prismjs", () =>
-    jest.fn().mockImplementation(() => {
-        return {
-            highlightAllUnder: mockPrismHighlight
-        };
-    })
-);
-*/
-
-describe(TAG, () => {
-    const oldNavigator = window.navigator;
-    const oldError = console.error;
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    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.stories.ts

@@ -1,143 +0,0 @@
-import mockProps from "./__tests__/mockProps";
-import "../../helpers/code/code.css";
-import "../../helpers/text/text.css";
-import "../../helpers/reset/reset.css";
-
-export default {
-    title: "dx/dx-code-block",
-    component: "dx-code-block"
-};
-
-const styles = `
-<style>
-  dx-code-block {
-    display:block;
-    margin-bottom:12px;
-  }
-</style>`;
-
-export const Base = (args: any) => `${styles}
-
-<span class="dx-text-heading-7 dx-code-block-heading">XML Example - Dark Theme</span>
-<dx-code-block
-    title="XML example"
-    code-block="${args.xml}"
-    language="xml"
-    default-theme="dark"
-></dx-code-block>
-
-<span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
-<dx-code-block
-    title="Apex Example"
-    code-block="${args.apex}"
-    language="apex"
-    default-theme="dark"
-></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Visualforce Example - Dark Theme</span>
-  <dx-code-block
-      title="Visualforce example"
-      code-block="${args.visualforce}"
-      language="visualforce"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Javascript Example - Dark Theme</span>
-  <dx-code-block
-      title="Javascript example"
-      code-block="${args.javascript}"
-      language="javascript"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme - Source Button</span>
-  <dx-code-block
-      title="Java Example"
-      code-block="${args.java}"
-      language="java"
-      source-link="http://www.salesforce.com"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme - No Language</span>
-  <dx-code-block
-      title="No Language Example"
-      code-block="${args.java}"
-      source-link="http://www.salesforce.com"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">HTML Example - Dark Theme</span>
-  <dx-code-block
-      title="HTML Example"
-      code-block="${args.html}"
-      language="html"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
-  <dx-code-block
-      title="TypeScript Example"
-      code-block="${args.TypeScript}"
-      language="TypeScript"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">CSS Example - Dark Theme</span>
-  <dx-code-block
-      title="CSS Example"
-      code-block="${args.css}"
-      language="css"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">PHP Example - Dark Theme</span>
-  <dx-code-block
-      title="PHP Example"
-      code-block="${args.php}"
-      language="php"
-      default-theme="dark"
-  ></dx-code-block>`;
-Base.args = mockProps;
-
-export const PreTag = (args: any) => `${styles}
-    <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
-    <dx-code-block
-        title="Pre Tag Apex Example"
-        code-block="${args.preTagApex}"
-        language="apex"
-        default-theme="dark"
-    ></dx-code-block>
-`;
-PreTag.args = mockProps;
-
-export const LangParameterAsText = (args: any) => `${styles}
-    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - XML example</span>
-    <dx-code-block
-        title="XML example"
-        code-block="${args.xml}"
-        language="text"
-    ></dx-code-block>
-
-    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - Javascript example</span>
-    <dx-code-block
-        title="XML example"
-        code-block="${args.javascript}"
-        language="text"
-    ></dx-code-block>
-
-    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - Apex example</span>
-    <dx-code-block
-        title="XML example"
-        code-block="${args.apex}"
-        language="text"
-    ></dx-code-block>
-
-    <span class="dx-text-heading-7 dx-code-block-heading"> Passed lang parameter as 'text' - Text example</span>
-    <dx-code-block
-        title="Text example with markup"
-        code-block="${args.text}"
-        language="text"
-    ></dx-code-block>`;
-
-LangParameterAsText.args = mockProps;

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

@@ -1,88 +0,0 @@
-.dx-theme-dark .token.punctuation {
-    color: var(--dx-g-blue-vibrant-90);
-}
-
-.dx-theme-dark .token.property {
-    color: var(--dx-g-cloud-blue-vibrant-70);
-}
-
-.dx-theme-dark .token.keyword {
-    color: var(--dx-g-purple-vibrant-70);
-}
-
-.dx-theme-dark .token.comment {
-    color: var(--dx-g-blue-vibrant-80);
-}
-
-.dx-theme-dark .token.selector {
-    color: var(--dx-g-teal-vibrant-70);
-}
-
-.dx-theme-dark .token.operator {
-    color: var(--dx-g-pink-vibrant-65);
-}
-
-.dx-theme-dark .token.function {
-    color: var(--dx-g-yellow-vibrant-80);
-}
-
-.dx-theme-dark .token.variable {
-    color: var(--dx-g-orange-vibrant-70);
-}
-
-.dx-theme-dark .token.prolog {
-    color: #93a1a1;
-}
-
-.dx-theme-dark .token.doctype {
-    color: var(--dx-g-blue-vibrant-80);
-}
-
-.dx-theme-dark .token.cdata {
-    color: #93a1a1;
-}
-
-.dx-theme-dark .token.tag {
-    color: var(--dx-g-cloud-blue-vibrant-70);
-}
-
-.dx-theme-dark .token.attr-name {
-    color: var(--dx-g-teal-vibrant-70);
-}
-
-.dx-theme-dark .token.attr-value {
-    color: var(--dx-g-purple-vibrant-70);
-}
-
-.dx-theme-dark .token.entity {
-    color: #fff;
-    background: var(--dx-g-blue-vibrant-10);
-}
-
-.dx-theme-dark .token.url {
-    color: #fff;
-    background: var(--dx-g-blue-vibrant-10);
-}
-
-.dx-theme-dark .token.regex,
-.dx-theme-dark .token.deleted,
-.dx-theme-dark .token.constant,
-.dx-theme-dark .token.number,
-.dx-theme-dark .token.builtin,
-.dx-theme-dark .token.important .dx-theme-dark .token.boolean,
-.dx-theme-dark .token.symbol,
-.dx-theme-dark .token.inserted,
-.dx-theme-dark .token.char,
-.dx-theme-dark .token.string {
-    color: #fff;
-}
-
-.dx-theme-dark .language-css .token.string {
-    color: #fff;
-    background: var(--dx-g-blue-vibrant-10);
-}
-
-.dx-theme-dark .style .token.string {
-    color: #fff;
-    background: var(--dx-g-blue-vibrant-10);
-}

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

@@ -1,72 +0,0 @@
-.dx-theme-light .token.comment {
-    color: #706e6b;
-}
-
-.dx-theme-light .token.punctuation {
-    color: var(--dx-g-blue-vibrant-10);
-}
-
-.dx-theme-light .token.keyword {
-    color: var(--dx-g-pink-vibrant-40);
-}
-
-.dx-theme-light .token.variable {
-    color: var(--dx-g-hot-orange-vibrant-40);
-}
-
-.dx-theme-light .token.operator {
-    color: var(--dx-g-green-vibrant-50);
-}
-
-.dx-theme-light .token.property {
-    color: var(--dx-g-indigo-vibrant-40);
-}
-
-.dx-theme-light .token.selector {
-    color: var(--dx-g-blue-vibrant-40);
-}
-
-.dx-theme-light .token.function {
-    color: var(--dx-g-teal-vibrant-40);
-}
-
-.dx-theme-light .token.tag {
-    color: rgb(75, 36, 219);
-}
-
-.dx-theme-light .token.attr-name {
-    color: rgb(0, 107, 102);
-}
-
-.dx-theme-light .token.attr-value {
-    color: rgb(204, 0, 96);
-}
-
-.dx-theme-light .token.doctype {
-    color: rgb(0, 114, 215);
-}
-
-.dx-theme-light .token.prolog,
-.dx-theme-light .token.cdata,
-.dx-theme-light .token.boolean,
-.dx-theme-light .token.number,
-.dx-theme-light .token.constant,
-.dx-theme-light .token.symbol,
-.dx-theme-light .token.deleted,
-.dx-theme-light .token.string,
-.dx-theme-light .token.char,
-.dx-theme-light .token.builtin,
-.dx-theme-light .token.inserted,
-.dx-theme-light .token.atrule,
-.dx-theme-light .token.regex,
-.dx-theme-light .token.important {
-    color: var(--dx-g-gray-10);
-}
-
-.dx-theme-light .token.entity,
-.dx-theme-light .token.url,
-.dx-theme-light .language-css .token.string,
-.dx-theme-light .style .token.string {
-    color: var(--dx-g-gray-10);
-    background: var(--dx-g-gray-95);
-}