@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 0.3.8 to 0.3.10

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.3.8",
+    "version": "0.3.10",
     "description": "Docs Lightning web components for DSC",
@@ -17,3 +17,3 @@ "license": "MIT",
     },
-    "gitHead": "0af02e5a3dcb4efd06ddcdc086bab9a7a4272af8"
+    "gitHead": "96c44943f0daf8a6273b974da52e2d5a71376c07"
 }

src/modules/doc/content/__tests__/content.test.ts

@@ -1,2 +0,2 @@
-import { createElement } from "lwc";
+import { createRenderComponent } from "utils/tests";
 import Content from "../content";
@@ -6,21 +6,12 @@ import * as mockContent from "./mockDocContent";
 
-const create = (props?: object) => {
-    const component = createElement("doc-content", {
-        is: Content
-    });
+const TAG = "doc-content";
+const render = createRenderComponent(TAG, Content);
 
-    Object.assign(component, {
-        docsData: mockContent.content,
-        pageReference: mockPageReference,
-        _isStorybook: false,
-        ...(props || {})
-    });
-
-    return component;
-};
-
 describe("doc-content", () => {
     it("renders the content", () => {
-        const component = create();
-        document.body.appendChild(component);
+        const component = render({
+            docsData: mockContent.content,
+            pageReference: mockPageReference,
+            _isStorybook: false
+        });
         const contentEl = component.shadowRoot.querySelector(
@@ -33,6 +24,7 @@ '[data-name="content"]'
     it("swaps out images", () => {
-        const component = create({
-            docsData: mockContent.withImages
+        const component = render({
+            docsData: mockContent.withImages,
+            pageReference: mockPageReference,
+            _isStorybook: false
         });
-        document.body.appendChild(component);
         const contentEl = component.shadowRoot.querySelector(
@@ -51,6 +43,7 @@ '[data-name="content"]'
     it("swaps out iframes", () => {
-        const component = create({
-            docsData: mockContent.withVideos
+        const component = render({
+            docsData: mockContent.withVideos,
+            pageReference: mockPageReference,
+            _isStorybook: false
         });
-        document.body.appendChild(component);
         const contentEl = component.shadowRoot.querySelector(
@@ -74,2 +67,37 @@ '[data-name="content"]'
     });
+
+    it("swaps out notes", () => {
+        const component = render({
+            docsData: mockContent.withNotes,
+            pageReference: mockPageReference,
+            _isStorybook: false
+        });
+        const contentEl = component.shadowRoot.querySelector(
+            '[data-name="content"]'
+        );
+        expect(contentEl).not.toBeNull();
+        const notes = component.shadowRoot.querySelectorAll(".message");
+        expect(notes).toHaveLength(4);
+        notes.forEach((note) => {
+            const noteHeader = note.querySelector("doc-content-callout");
+            expect(noteHeader).not.toBeNull();
+        });
+    });
+
+    it("includes tables, lists, and code blocks in notes", () => {
+        const component = render({
+            docsData: mockContent.withNotes,
+            pageReference: mockPageReference,
+            _isStorybook: false
+        });
+        const contentEl = component.shadowRoot.querySelector(
+            '[data-name="content"]'
+        );
+        expect(contentEl).not.toBeNull();
+        const notes = component.shadowRoot.querySelectorAll(".message");
+        expect(notes[0].querySelector("table")).not.toBeNull();
+        expect(notes[1].querySelector("ul")).not.toBeNull();
+        expect(notes[2].querySelector("ol")).not.toBeNull();
+        expect(notes[3].querySelector("dx-code-block")).not.toBeNull();
+    });
 });

src/modules/doc/content/__tests__/mockDocContent.ts

@@ -112,1 +112,111 @@ 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
 </div>`;
+
+const noteWithTable = `<div class='box message info'>
+    <h4>Note with a table</h4>
+    <div class='data colSort'>
+        <table class='featureTable sort_table' summary=''>
+            <thead class='thead sorted' align='left'>
+                <tr>
+                    <th class='featureTableHeader vertical-align-top ' id='d8672e193'>Organization Type</th>
+                    <th class='featureTableHeader vertical-align-top ' id='d8672e196'>Secure URL</th>
+                </tr>
+            </thead>
+            <tbody class='tbody'>
+                <tr>
+                    <td class='entry' headers='d8672e193' data-title='Organization Type'>Developer Edition</td>
+                    <td class='entry' headers='d8672e196' data-title='Secure URL'><span class='ph filepath'><var
+                                class='keyword varname'>MyDomainName</var>-dev-ed.my.salesforce-sites.com</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class='entry' headers='d8672e193' data-title='Organization Type'>Sandbox</td>
+                    <td class='entry' headers='d8672e196' data-title='Secure URL'><span class='ph filepath'><var
+                                class='keyword varname'>MyDomainName</var>--<var
+                                class='keyword varname'>SandboxName</var>.sandbox.my.salesforce-sites.com</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class='entry' headers='d8672e193' data-title='Organization Type'>Production</td>
+                    <td class='entry' headers='d8672e196' data-title='Secure URL'><span class='ph filepath'><var
+                                class='keyword varname'>MyDomainName</var>.my.salesforce-sites.com</span></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>`;
+
+const noteWithOrderedList = `<div class='box message info'>
+    <h4 class='mbs'>Note with ordered list</h4>
+    <ol class='ol enumList'>
+        <li class='li'>From Setup, enter <kbd class='ph userinput'>Apex Classes</kbd> in the <span
+                class='keyword parmname'>Quick
+                Find</span> box, then select <strong class='ph uicontrol'>Apex Classes</strong>.</li>
+
+        <li class='li'>Click <strong class='ph uicontrol'>Edit</strong> next to SiteRegisterController.</li>
+
+        <li class='li'>Find the <samp class='codeph apex_code'><span class='keyword'>private</span> <span
+                    class='keyword'>static</span> Id PORTAL_ACCOUNT_ID =
+                <span class='string'>'&lt;Account_ID&gt;'</span>;</samp> line and insert the ID for the account that
+            you want
+            to
+            associate with new users. The line should look similar to
+            this:
+        </li>
+
+        <li class='li'>Click <strong class='ph uicontrol'>Save</strong>.</li>
+    </ol>
+</div>`;
+
+const noteWithUnorderedList = `<div class='box message info'>
+    <h4 class='mbs'>Note with unordered list</h4>
+    <ul class='ul bulletList' id='static_resource_service_unavailable_page'>
+        <li class='li'>Must be a public .zip file 1 MB or smaller.</li>
+
+        <li class='li'>Must contain a page named <span class='ph filepath'>maintenance.html</span> at the root level
+            of
+            the .zip file. Other resources in the .zip file, such as images or CSS files, can follow
+            any directory structure.</li>
+        <li class='li'>Must contain only files that have file extensions.</li>
+    </ul>
+</div>`;
+
+const noteWithCodeBlock = `<div class='box message info'>
+    <div class='inner'>
+        <div class='bd'>
+            <div class='media'>
+                <img class='img mtm'
+                    src='/docs/resources/img/en-us/232.0?doc_id=images%2Ficon_note.png&amp;folder=apexcode'
+                    alt='Note'>
+                <div class='mediaBd'>
+                    <h4 class='mbs'>Note with code block</h4>
+                    <p><span class='ph' id='instanceof_change_part1'><a name='instanceof_change_part1'>
+                                <!-- --></a>In Apex saved with API version 32.0 and later,
+                            <samp class='codeph apex_code'><span class='statement'>instanceof</span></samp> returns
+                            <samp class='codeph apex_code'><span class='keyword'>false</span></samp> if the left
+                            operand is a null
+                            object. For
+                            example, the following sample returns <samp class='codeph apex_code'><span
+                                    class='keyword'>false</span></samp>.
+                        </span></p>
+                    <div class='codeSection apex_code'>
+                        <pre class='codeblock brush:apex' id='instanceof_change_part2'><a name='instanceof_change_part2'><!-- --></a><span class='keyword'>Object</span> o = <span class='keyword'>null</span>;
+    <span class='keyword'>Boolean</span> result = o <span class='statement'>instanceof</span> Account;
+    System.assertEquals(<span class='keyword'>false</span>, result);</pre>
+                    </div>
+                    <span class='ph' id='instanceof_change_part3'><a name='instanceof_change_part3'>
+                            <!-- --></a>In API version 31.0 and earlier, <samp class='codeph apex_code'><span
+                                class='statement'>instanceof</span></samp> returns <samp
+                            class='codeph apex_code'><span class='keyword'>true</span></samp> in this case.</span>
+                    <p></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export const withNotes = `<div>
+    ${noteWithTable}
+    ${noteWithUnorderedList}
+    ${noteWithOrderedList}
+    ${noteWithCodeBlock}
+</div>`;

src/modules/doc/content/content.stories.ts

@@ -55,1 +55,15 @@ import * as mockDocContent from "./__tests__/mockDocContent";
 };
+
+export const Notes = (args: any) => {
+    return `
+<doc-content
+  is-storybook="${args.isStorybook}"
+  page-reference="${JSON.stringify(args.pageReference)}"
+  docs-data="${args.docsData}"
+></doc-content>`;
+};
+
+Notes.args = {
+    ...defaultArgs,
+    docsData: mockDocContent.withNotes
+};

src/modules/doc/content/content.ts

@@ -96,3 +96,5 @@ /* eslint-disable @lwc/lwc/no-inner-html */
             });
-            const detailEls = calloutEl.querySelectorAll("p");
+            const detailEls = calloutEl.querySelectorAll(
+                "p, div.data, ol, ul, .codeSection, .mediaBd > span.ph"
+            );
             detailEls.forEach((detailEl) => {
@@ -99,0 +101,0 @@ calloutCompEl.appendChild(detailEl);

No alert changes

Improved metrics

Total package byte prevSize

413349

increased by1.91%

Lines of code

8029

increased by1.97%

No dependency changes