@salesforcedevs/dx-components 0.3.11 → 0.3.14-banner-alpha1

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

@@ -1,14 +0,0 @@
-export const options = [
-    { value: "analytics", label: "Analytics" },
-    { value: "collaboration", label: "Collaboration" },
-    { value: "commerce", label: "Commerce", disabled: true },
-    { value: "marketing", label: "Marketing", disabled: true },
-    { value: "heroku", label: "Heroku" },
-    { value: "sales", label: "Sales" }
-];
-
-export default {
-    defaultValue: ["sales", "heroku", "marketing"],
-    legend: "products",
-    options
-};

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

@@ -1,96 +0,0 @@
-import CodeBlock from "../codeBlock";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-//import Prism from "utils/prismjs";
-
-const TAG = "dx-code-block";
-const render = createRenderComponent(TAG, CodeBlock);
-/*
-const mockPrismHighlight = jest.fn();
-jest.mock("utils/prismjs", () =>
-    jest.fn().mockImplementation(() => {
-        return {
-            highlightAllUnder: mockPrismHighlight
-        };
-    })
-);
-*/
-
-describe(TAG, () => {
-    it("renders the codeblock in dark mode", async () => {
-        const element = render({
-            codeBlock: mockProps.apex,
-            title: "Apex Example",
-            theme: "dark",
-            language: "apex"
-        });
-
-        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",
-            theme: "light",
-            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",
-            theme: "light",
-            language: "java"
-        });
-
-        //expect light
-        const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
-        expect(divTheme).not.toBeNull();
-
-        //update light -> dark
-        element.shadowRoot.querySelector("dx-button.update-theme-btn").click();
-
-        return Promise.resolve()
-            .then(() => {
-                //expect -> dark
-                expect(divTheme.classList).toContain("dx-theme-dark");
-                element.shadowRoot
-                    .querySelector("dx-button.update-theme-btn")
-                    .click();
-            })
-            .then(() => {
-                //expect -> light
-                expect(divTheme.classList).toContain("dx-theme-light");
-            });
-    });
-
-    it("renders source button", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            theme: "light",
-            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();
-    });
-});

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

@@ -1,157 +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));
-`
-};

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

@@ -1,216 +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 DarkTheme = (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"
-    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"
-    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"
-      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"
-      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"
-      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"
-      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"
-      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"
-      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"
-      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"
-      theme="dark"
-  ></dx-code-block>`;
-DarkTheme.args = mockProps;
-
-export const LightTheme = (args: any) => `${styles}
-
-<span class="dx-text-heading-7 dx-code-block-heading">XML Example - Light Theme</span>
-<dx-code-block
-    title="XML example"
-    code-block="${args.xml}"
-    language="xml"
-    theme="light"
-></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Visualforce Example - Light Theme</span>
-  <dx-code-block
-      title="Visualforce example"
-      code-block="${args.visualforce}"
-      language="visualforce"
-      theme="light"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Java Example - Light Theme</span>
-  <dx-code-block
-      title="Java example"
-      code-block="${args.java}"
-      language="java"
-      theme="light"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Light Theme</span>
-  <dx-code-block
-      title="HTML Example"
-      code-block="${args.html}"
-      source-link="http://www.salesforce.com"
-      language="html"
-      theme="light"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">TypeScript Example - Light Theme</span>
-  <dx-code-block
-      title="TypeScript example"
-      code-block="${args.TypeScript}"
-      language="TypeScript"
-      theme="light"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Light Theme</span>
-  <dx-code-block
-      title="CSS example"
-      code-block="${args.css}"
-      language="css"
-      theme="light"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Apex Example - Light Theme</span>
-  <dx-code-block
-      title="Apex example"
-      code-block="${args.apex}"
-      language="apex"
-      theme="light"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">No Language Example - Light Theme</span>
-  <dx-code-block
-      title="No Language"
-      code-block="${args.apex}"
-      theme="light"
-  ></dx-code-block>
-  
-  <span class="dx-text-heading-7 dx-code-block-heading">Light Theme</span>
-  <dx-code-block
-      title="PHP Example"
-      code-block="${args.php}"
-      language="php"
-      theme="light"
-  ></dx-code-block>`;
-
-LightTheme.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"
-        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"
-        theme="light"
-    ></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"
-        theme="light"
-    ></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"
-        theme="light"
-    ></dx-code-block>`;
-
-LangParameterAsText.args = mockProps;