@salesforcedevs/dx-components 0.10.1-alpha.23 → 0.10.1-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.10.1-alpha.23",
+    "version": "0.10.1-alpha.27",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -16,7 +16,7 @@ const styles = `
   }
 </style>`;
 
-export const DarkTheme = (args: any) => `${styles}
+export const Base = (args: any) => `${styles}
 
 <span class="dx-text-heading-7 dx-code-block-heading">XML Example - Dark Theme</span>
 <dx-code-block
@@ -98,74 +98,7 @@ export const DarkTheme = (args: any) => `${styles}
       language="php"
       default-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
-></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"
-  ></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"
-  ></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"
-  ></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"
-  ></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"
-  ></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"
-  ></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}"
-  ></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"
-  ></dx-code-block>`;
-
-LightTheme.args = mockProps;
+Base.args = mockProps;
 
 export const PreTag = (args: any) => `${styles}
     <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>

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

@@ -19,7 +19,6 @@
 }
 
 .dx-theme-dark .token.operator {
-    background-color: var(--dx-g-blue-vibrant-20);
     color: var(--dx-g-pink-vibrant-65);
 }
 

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

@@ -16,7 +16,6 @@
 
 .dx-theme-light .token.operator {
     color: var(--dx-g-green-vibrant-50);
-    background-color: #fff;
 }
 
 .dx-theme-light .token.property {

package/src/modules/dx/input/input.ts

@@ -79,11 +79,6 @@ export default class Input extends LightningElement {
         return true;
     }
 
-    @api
-    public setValue = (value: string):void => {
-        this._value = value;
-    }
-
     private _errorMessage: string = "";
     private focused: boolean = false;
     private input: HTMLInputElement | null = null;

package/src/modules/dx/sidebar/__tests__/mockDocContent.ts

@@ -0,0 +1,29 @@
+export const content = `<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>`;

package/src/modules/dx/sidebar/__tests__/mockPageReference.ts

@@ -0,0 +1,8 @@
+export default {
+    domain: "http://localhost:3000",
+    page: "docs",
+    docId: "atlas.en-us.apexcode.meta",
+    deliverable: "apexcode",
+    contentDocumentId: "apex_dev_guide.htm",
+    hash: ""
+};

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

@@ -1,5 +1,7 @@
 import { html } from "lit-html";
 import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
+import mockPageReference from "./__tests__/mockPageReference";
+import { content } from "./__tests__/mockDocContent";
 
 export const coveoConfig = {
     coveoOrganizationId: "coveosalesforcetestakshatha",
@@ -188,3 +190,36 @@ export const UseSlot = ({ header, trees, value }: any) => html`
         <span slot="header">I'm in the sidebar</span>
     </dx-sidebar>
 `;
+
+export const HighlightedTerm = ({ header, trees, value }: any) => html`
+    ${styles(`
+        --dx-c-sidebar-min-height: 100vh;
+    `)}
+
+    <style>
+        .container {
+            display: flex;
+        }
+    </style>
+
+    <div class="container">
+        <dx-sidebar
+            is-storybook="true"
+            header="${header}"
+            trees="${JSON.stringify(trees)}"
+            value="${value}"
+            coveo-organization-id="${coveoConfig.coveoOrganizationId}"
+            coveo-public-access-token="${coveoConfig.coveoPublicAccessToken}"
+            coveo-search-hub="${coveoConfig.coveoSearchHub}"
+            coveo-object-type="${coveoConfig.coveoObjectType}"
+            coveo-language="${coveoConfig.coveoLanguage}"
+            coveo-release="${coveoConfig.coveoRelease}"
+            coveo-deliverable="${coveoConfig.coveoDeliverable}"
+        ></dx-sidebar>
+        <doc-content
+            is-storybook="true"
+            page-reference="${JSON.stringify(mockPageReference)}"
+            docs-data="${content}"
+        ></doc-content>
+    </div>
+`;

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -48,8 +48,19 @@ export default class SidebarSearch extends LightningElement {
         return !this.value || this.value === "";
     }
 
-    connectedCallback() {
+    constructor() {
+        super();
+
         this.recentSearches = UserRecentSearches.get();
+
+        // initialize from url parameters
+        const initialValue = new URLSearchParams(window.location.search).get(
+            "q"
+        );
+        if (initialValue && initialValue !== "") {
+            this.value = initialValue;
+            this.dispatchOnLoading(true);
+        }
     }
 
     renderedCallback() {
@@ -119,13 +130,9 @@ export default class SidebarSearch extends LightningElement {
             this.dispatchOnLoading(isLoading);
         });
 
-        // initialize from url parameters
-        const initialValue = new URLSearchParams(window.location.search).get(
-            "q"
-        );
-        if (initialValue && initialValue !== "") {
-            this.value = initialValue;
+        if (!this.isValueEmpty) {
             this.submitSearch();
+            this.dispatchHighlightedTermChange();
         }
     }
 
@@ -173,7 +180,6 @@ export default class SidebarSearch extends LightningElement {
     });
 
     private dispatchOnChangeEvent(results: Result[]) {
-        console.log({ results });
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
@@ -192,9 +198,17 @@ export default class SidebarSearch extends LightningElement {
         );
     }
 
-    private updateHistory(): void {
-        console.log(window.location);
+    private dispatchHighlightedTermChange() {
+        this.dispatchEvent(
+            new CustomEvent("highlightedtermchange", {
+                detail: this.value,
+                composed: true,
+                bubbles: true
+            })
+        );
+    }
 
+    private updateHistory(): void {
         if (this.isValueEmpty) {
             window.history.replaceState({}, "", window.location.pathname);
             return;
@@ -241,6 +255,7 @@ export default class SidebarSearch extends LightningElement {
             this.dispatchOnChangeEvent([]);
         }
 
+        this.dispatchHighlightedTermChange();
         this.updateHistory();
     }
 

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -52,8 +52,6 @@ export default class SidebarSearchResult extends LightningElement {
     private get isSelected() {
         const resultPathname = this.href.split("?")[0];
 
-        console.log(resultPathname, window.location.pathname);
-
         return resultPathname === window.location.pathname;
     }