@salesforcedevs/docs-components 0.26.0 → 0.26.3-alpha.1

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>`;

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

@@ -1,8 +0,0 @@
-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/doc/content/__tests__/mockSidebar.ts

@@ -1,81 +0,0 @@
-export default [
-    {
-        label: "Getting started",
-        name: "started",
-        isExpanded: true,
-        children: [
-            {
-                label: "Introduction",
-                name: "introduction"
-            },
-            {
-                label: "Getting started",
-                name: "started-child"
-            },
-            {
-                label: "Authentication",
-                name: "authentication"
-            },
-            {
-                label: "Token",
-                name: "token"
-            },
-            {
-                label: "Error",
-                name: "error"
-            },
-            {
-                label: "Limits",
-                name: "limit"
-            },
-            {
-                label: "Release note",
-                name: "release-note"
-            }
-        ]
-    },
-    {
-        label: "Einstein Vision",
-        name: "einstein-vision",
-        children: [
-            {
-                label: "Introduction",
-                name: "einstein-introduction"
-            },
-            {
-                label: "Terminology",
-                name: "terminology"
-            },
-            {
-                label: "Object detection quickstart for beginner",
-                name: "object-quickstart",
-                isExpanded: true,
-                children: [
-                    {
-                        label: "Scenario: this block is intended to show how a large text looks like in the sidebar",
-                        name: "scenario",
-                        isExpanded: true,
-                        children: [
-                            {
-                                label: "Scenario A: this block is intended to show how a large text looks like in the sidebar",
-                                name: "scenario-a"
-                            },
-                            {
-                                label: "Scenario B",
-                                name: "scenario-b"
-                            }
-                        ]
-                    },
-                    {
-                        label: "Prerequisites",
-                        name: "prerequisites"
-                    }
-                ]
-            },
-            {
-                label: "Best Practices",
-                name: "best-practices"
-            }
-        ]
-    }
-];

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

@@ -1,148 +0,0 @@
-import * as mockDocContent from "./__tests__/mockDocContent";
-import mockPageReference from "./__tests__/mockPageReference";
-import mockSidebar from "./__tests__/mockSidebar";
-import { html } from "lit-html";
-
-export default {
-    title: "docs/doc-content",
-    component: "doc-content",
-
-    argTypes: {
-        showPaginationButtons: {
-            defaultValue: false,
-            control: {
-                type: "boolean"
-            }
-        }
-    }
-};
-
-const defaultArgs = {
-    pageReference: mockPageReference,
-    isStorybook: true
-};
-
-export const Base = (args: any) => {
-    return `
-  <doc-content
-      is-storybook="${args.isStorybook}"
-      page-reference="${JSON.stringify(args.pageReference)}"
-      docs-data="${args.docsData}"
-  ></doc-content>`;
-};
-
-Base.args = {
-    ...defaultArgs,
-    docsData: mockDocContent.content
-};
-
-export const Images = (args: any) => {
-    return `
-<doc-content
-    is-storybook="${args.isStorybook}"
-    page-reference="${JSON.stringify(args.pageReference)}"
-    docs-data="${args.docsData}"
-></doc-content>`;
-};
-
-Images.args = {
-    ...defaultArgs,
-    docsData: mockDocContent.withImages
-};
-
-export const Table = (args: any) => html`
-    <doc-content
-        is-storybook="${args.isStorybook}"
-        page-reference="${JSON.stringify(args.pageReference)}"
-        docs-data="${args.docsData}"
-    >
-    </doc-content>
-`;
-
-Table.args = {
-    ...defaultArgs,
-    docsData: mockDocContent.withTable
-};
-
-export const Videos = (args: any) => {
-    return `
-<doc-content
-  is-storybook="${args.isStorybook}"
-  page-reference="${JSON.stringify(args.pageReference)}"
-  docs-data="${args.docsData}"
-></doc-content>`;
-};
-
-Videos.args = {
-    ...defaultArgs,
-    docsData: mockDocContent.withVideos
-};
-
-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
-};
-
-export const PaginationButtons = (args: any) => {
-    return `
-    <doc-content
-        is-storybook="${args.isStorybook}"
-        page-reference="${JSON.stringify(args.pageReference)}"
-        docs-data="${args.docsData}"
-        ${args.showPaginationButtons ? `show-pagination-buttons=true` : ``}
-    ></doc-content>`;
-};
-
-PaginationButtons.args = {
-    ...defaultArgs,
-    showPaginationButtons: false,
-    docsData: mockDocContent.withButtons
-};
-
-export const HighlightedTerm = ({ docsData, trees }: any) => html`
-    <style>
-        .sb-show-main.sb-main-padded {
-            padding: 0;
-        }
-
-        .container {
-            display: flex;
-        }
-
-        dx-sidebar {
-            --dx-c-sidebar-min-height: 100vh;
-            margin-right: 16px;
-        }
-
-        doc-content {
-            margin: 16px 16px;
-        }
-    </style>
-
-    <div class="container">
-        <dx-sidebar
-            header="Guides"
-            trees="${JSON.stringify(trees)}"
-        ></dx-sidebar>
-        <doc-content
-            is-storybook="true"
-            page-reference="${JSON.stringify(mockPageReference)}"
-            docs-data="${docsData}"
-        ></doc-content>
-    </div>
-`;
-
-HighlightedTerm.args = {
-    ...defaultArgs,
-    docsData: mockDocContent.sampleCodeBlockAndNote,
-    trees: mockSidebar
-};

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

@@ -1,80 +0,0 @@
-import ContentCallout from "../contentCallout";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-content-callout";
-const render = createRenderComponent(TAG, ContentCallout);
-
-describe(TAG, () => {
-    it("renders the icon, title & body with the tip variant", async () => {
-        const element = render({
-            title: mockProps.title,
-            variant: "tip"
-        });
-
-        const els = [
-            ".dx-callout-icon",
-            ".dx-callout-title",
-            ".dx-callout-body",
-            ".dx-callout-tip"
-        ].map((query) => element.shadowRoot.querySelector(query));
-
-        expect(els).not.toContain(null);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("renders the icon, title & body with the warning variant", async () => {
-        const element = render({
-            title: mockProps.title,
-            variant: "warning"
-        });
-
-        const els = [
-            ".dx-callout-icon",
-            ".dx-callout-title",
-            ".dx-callout-body",
-            ".dx-callout-warning"
-        ].map((query) => element.shadowRoot.querySelector(query));
-
-        expect(els).not.toContain(null);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("renders the icon, title & body with the note variant", async () => {
-        const element = render({
-            title: mockProps.title,
-            variant: "note"
-        });
-
-        const els = [
-            ".dx-callout-icon",
-            ".dx-callout-title",
-            ".dx-callout-body",
-            ".dx-callout-note"
-        ].map((query) => element.shadowRoot.querySelector(query));
-
-        expect(els).not.toContain(null);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("renders the icon, title & body with the caution variant", async () => {
-        const element = render({
-            title: mockProps.title,
-            variant: "caution"
-        });
-
-        const els = [
-            ".dx-callout-icon",
-            ".dx-callout-title",
-            ".dx-callout-body",
-            ".dx-callout-caution"
-        ].map((query) => element.shadowRoot.querySelector(query));
-
-        expect(els).not.toContain(null);
-
-        await expect(element).toBeAccessible();
-    });
-});