@salesforcedevs/docs-components 0.17.1 → 0.17.12-search-alpha

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

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

@@ -1,312 +0,0 @@
-import CodeBlock from "dx/codeBlock";
-import { createRenderComponent } from "utils/tests";
-import Content from "../content";
-import * as mockContent from "./mockDocContent";
-import mockPageReference from "./mockPageReference";
-
-const TAG = "doc-content";
-const render = createRenderComponent(TAG, Content);
-
-describe("doc-content", () => {
-    it("renders the content", () => {
-        const component = render({
-            docsData: mockContent.content,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-    });
-
-    it("renders both with and wothout pagination buttons", () => {
-        const c_buttons = render({
-            docsData: mockContent.withButtons,
-            pageReference: mockPageReference,
-            showPaginationButtons: true,
-            _isStorybook: false
-        });
-        const dx_buttons = c_buttons.shadowRoot.querySelectorAll("dx-button");
-        expect(dx_buttons.length).toEqual(2);
-
-        const c_no_buttons = render({
-            docsData: mockContent.withButtons,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const empty_dx_buttons =
-            c_no_buttons.shadowRoot.querySelectorAll("dx-button");
-        expect(empty_dx_buttons.length).toEqual(0);
-    });
-
-    it("swaps out images", () => {
-        const component = render({
-            docsData: mockContent.withImages,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const images = component.shadowRoot.querySelectorAll("img");
-        expect(images.length).toEqual(3);
-        const contentMediaEls =
-            component.shadowRoot.querySelectorAll("doc-content-media");
-        expect(contentMediaEls.length).toEqual(0);
-    });
-
-    it("swaps out iframes", () => {
-        const component = render({
-            docsData: mockContent.withVideos,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const images = component.shadowRoot.querySelectorAll("iframe");
-        expect(images.length).toEqual(0);
-        const contentMediaEls =
-            component.shadowRoot.querySelectorAll("doc-content-media");
-        expect(contentMediaEls.length).toEqual(2);
-        contentMediaEls.forEach((contentMedia) => {
-            expect(contentMedia.contentType).toEqual("iframe");
-            expect(contentMedia.mediaTitle).not.toBeUndefined();
-            expect(contentMedia.contentSrc).toMatch(
-                "https://play.vidyard.com/"
-            );
-        });
-    });
-
-    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();
-    });
-
-    it("highlights text that matches search criteria", () => {
-        const component = render({
-            docsData: mockContent.content,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        expect(contentEl.querySelectorAll("mark")).toHaveLength(0);
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: "apex",
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        expect(contentEl.querySelectorAll("mark")).toHaveLength(14);
-    });
-
-    it("doesn't highlight elements that contains dx/docs components", () => {
-        const searchTerm = "customreport";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        expect(contentEl.querySelectorAll("mark")).toHaveLength(0);
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: searchTerm,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const marks: Array<HTMLElement> = contentEl.querySelectorAll("mark");
-
-        expect(marks).toHaveLength(0);
-
-        const code: CodeBlock = contentEl.querySelector("dx-code-block");
-        expect(code).not.toBeNull();
-        expect(code.codeBlock).toBeTruthy();
-        expect(contentEl.querySelector("doc-content-callout")).not.toBeNull();
-    });
-
-    it("doesn't highlight terms separated by html tags", () => {
-        const searchTerm = "loadData within";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: searchTerm,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const marks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(marks).toHaveLength(0);
-    });
-
-    it("escapes regex especial characters", () => {
-        const searchTerm = "used.+";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: searchTerm,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const marks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(marks).toHaveLength(0);
-    });
-
-    it("cleans previous search result before searching for a new term", () => {
-        const firstSearch = "verify";
-        const secondSearch = "sObject";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: firstSearch,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const firstMarks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(firstMarks).toHaveLength(2);
-        firstMarks.forEach(({ textContent }) =>
-            expect(textContent).toBe(firstSearch)
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: secondSearch,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const secondMarks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(secondMarks).toHaveLength(1);
-        secondMarks.forEach(({ textContent }) =>
-            expect(textContent).toBe(secondSearch)
-        );
-    });
-
-    it("cleans all marks if the search term is empty string", () => {
-        const firstSearch = "verify";
-        const secondSearch = "";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: firstSearch,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const firstMarks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(firstMarks).toHaveLength(2);
-        firstMarks.forEach(({ textContent }) =>
-            expect(textContent).toBe(firstSearch)
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: secondSearch,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        expect(component.shadowRoot.querySelectorAll("mark")).toHaveLength(0);
-    });
-});

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

@@ -1,348 +0,0 @@
-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>`;
-
-export const withButtons = `<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>
-<div style='display: flex; justify-content: space-between; width: 220px; margin-top: 15px;'>
-<a href='atlas.en-us.apexcode.meta/apexcode/glossary_apex.htm'>← Previous</a>
-<a href='atlas.en-us.apexcode.meta/apexcode/glossary_apex.htm'>Next →</a>
-</div>
-</ul>
-</div><!--DRC 228.7--></div>`;
-
-export const withImages = `<div>
-  <div class='section'>
-      <h2 class='helpHead2'>Sketch</h2>
-
-      <p class='p'>
-          The following diagram illustrates how Streaming API can be
-          implemented to stream notifications to the Salesforce user
-          interface. These notifications are triggered by record changes
-          in Salesforce.
-      </p>
-
-      <div class='p'>
-          <div class='fig fignone'>
-              <span class='figcap'>
-                  UI Update in Salesforce Triggered by a Data Change
-              </span>
-
-              <img
-                  class='image'
-                  src='https://developer.salesforce.com/docs/resources/img/en-us/232.0?doc_id=dev_guides%2Fintegration_patterns%2Fimages%2Fui_updates_data_changes.png&amp;folder=integration_patterns_and_practices'
-                  alt='UI Update Based on Data Changes Pattern'
-              />
-          </div>
-      </div>
-  </div>
-
-  <div class='section'>
-      <h2 class='helpHead2'>Sketch</h2>
-
-      <p class='p'>
-          The following diagram illustrates how Streaming API can be
-          implemented to stream notifications to the Salesforce user
-          interface. These notifications are triggered by record changes
-          in Salesforce.
-      </p>
-
-      <div class='p'>
-          <div class='fig fignone'>
-              <span class='figcap'>
-                  UI Update in Salesforce Triggered by a Data Change
-              </span>
-
-              <img
-                  class='image'
-                  src='https://developer.salesforce.com/docs/resources/img/en-us/232.0?doc_id=dev_guides%2Fintegration_patterns%2Fimages%2Fui_updates_data_changes.png&amp;folder=integration_patterns_and_practices'
-                  alt='UI Update Based on Data Changes Pattern'
-              />
-          </div>
-      </div>
-  </div>
-
-  <div class='section'>
-      <h2 class='helpHead2'>Sketch</h2>
-
-      <p class='p'>
-          The following diagram illustrates how Streaming API can be
-          implemented to stream notifications to the Salesforce user
-          interface. These notifications are triggered by record changes
-          in Salesforce.
-      </p>
-
-      <div class='p'>
-          <div class='fig fignone'>
-              <span class='figcap'>
-                  UI Update in Salesforce Triggered by a Data Change
-              </span>
-
-              <img
-                  class='image'
-                  src='https://developer.salesforce.com/docs/resources/img/en-us/232.0?doc_id=dev_guides%2Fintegration_patterns%2Fimages%2Fui_updates_data_changes.png&amp;folder=integration_patterns_and_practices'
-                  alt='UI Update Based on Data Changes Pattern'
-              />
-          </div>
-      </div>
-  </div>
-</div>`;
-
-export const withTable = `<table>
-    <thead>
-      <tr>
-        <th><strong>Parameter</strong></th>
-        <th><strong>Required</strong></th>
-        <th><strong>Description</strong></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>grant_type</code></td>
-        <td>X</td>
-        <td>The value must be password</td>
-      </tr>
-      <tr>
-        <td><code>client_id</code></td>
-        <td>X</td>
-        <td>The consumer key</td>
-      </tr>
-      <tr>
-        <td><code>client_secret</code></td>
-        <td>X</td>
-        <td>The consumer secret</td>
-      </tr>
-      <tr>
-        <td><code>username</code></td>
-        <td>X</td>
-        <td>The email address of the SSO user account</td>
-      </tr>
-      <tr>
-        <td><code>password</code></td>
-        <td>X</td>
-        <td>The password of the SSO user account</td>
-      </tr>
-      <tr>
-        <td><code>list</code></td>
-        <td>X</td>
-        <td class="with-list">
-            The items in this list should not have larger text than normal:
-            <ul>
-                <li class="li">Item one</li>
-                <li class="li">Item two</li>
-            </ul>
-        </td>
-      </tr>
-      <tr>
-        <td><a href="#">link</a></td>
-        <td>X</td>
-        <td class="with-link-and-p">
-          The link text should not be larger than normal.
-          <p>Paragraph text should not be larger either.</p>
-        </td>
-      </tr>
-      <tr>
-        <td><code>callout</code></td>
-        <td></td>
-        <td class="with-callout">
-          This callout should still have larger text:
-          <doc-content-callout title="Callout test" variant="note">
-            <p>The text here should *not* be the same size as other table text.</p>
-          </doc-content-callout>
-        </td>
-      </tr>
-    </tbody>
-  </table>`;
-
-export const withVideos = `<div>
-    <iframe src='https://play.vidyard.com/yThw736PBYf18ts1f8SKXa?disable_popouts=1&v=4.2.30&type=inline' title='Video title'></iframe>
-    <iframe src='https://play.vidyard.com/yThw736PBYf18ts1f8SKXa?disable_popouts=1&v=4.2.30&type=inline' label='This is from a label'></iframe>
-</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 sampleCodeBlockAndNote = `
-    <h1 class='helpHead1'>Using the instanceof Keyword</h1>
-    <p class="p">If you need to verify at run time whether an object is actually an instance of a particular class, use the 
-        <samp class="codeph apex_code"><span class="statement">instanceof</span></samp> keyword.
-        The <samp class="codeph apex_code"><span class="statement">instanceof</span></samp> keyword can only be used to
-        verify if the target type in the expression on the right of the keyword is a viable
-        alternative for the declared type of the expression on the left. 
-    </p>
-    <div class="p">You could add the following check to the <samp class="codeph apex_code">Report</samp>class in the <a class="xref" href="atlas.en-us.apexcode.meta/apexcode/apex_classes_casting.htm" title="In general, all type information is available at run time. This means that Apex enables casting, that is, a data type of one class can be assigned to a data type of another class, but only if one class is a subclass of the other class. Use casting when you want to convert an object from one data type to another.">classes and casting example</a> before you cast the item back into a <samp class="codeph apex_code">CustomReport</samp> object.
-        <div class="codeSection apex_code">
-            <pre class="codeblock brush:apex">If (Reports.get(0) <span class="statement">instanceof</span> CustomReport) {\n    <span class="onelineComment">// Can safely cast it back to a custom report object</span>\n    CustomReport c = (CustomReport) Reports.get(0);\n} Else {\n    <span class="onelineComment">// Do something with the non-custom-report.</span>\n}</pre>
-        </div>
-    </div>
-    ${noteWithOrderedList}
-    <div class="p">
-        Follow these steps:
-        <ol class="ol enumList">
-            <li class="li">Add the data in a .csv file.</li>
-            <li class="li">Create a static resource for this file.</li>
-            <li class="li">
-                Call <samp class="codeph apex_code">Test.loadData</samp> within your test
-                method and passing it the sObject type token and the static resource name.
-            </li>
-        </ol>
-    </div>
-`;
-
-export const withNotes = `<div>
-    ${noteWithTable}
-    ${noteWithUnorderedList}
-    ${noteWithOrderedList}
-    ${noteWithCodeBlock}
-</div>`;