@esri/calcite-components 1.0.0-next.598 → 1.0.0-next.599

package/dist/collection/components/action/action.stories.js

@@ -1,181 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-import { iconNames, storyFilters } from "../../../.storybook/helpers";
-import { ATTRIBUTES } from "../../../.storybook/resources";
-const { alignment, scale } = ATTRIBUTES;
-export default {
-    title: "Components/Buttons/Action",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    return filterComponentAttributes([
-        {
-            name: "active",
-            commit() {
-                this.value = boolean("active", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "alignment",
-            commit() {
-                this.value = select("alignment", alignment.values, alignment.defaultValue);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "appearance",
-            commit() {
-                this.value = select("appearance", ["solid", "clear"], "solid");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "compact",
-            commit() {
-                this.value = boolean("compact", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "disabled",
-            commit() {
-                this.value = boolean("disabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "icon",
-            commit() {
-                this.value = select("icon", ["", ...iconNames], "banana");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "indicator",
-            commit() {
-                this.value = boolean("indicator", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "label",
-            commit() {
-                this.value = text("label", "Label");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "loading",
-            commit() {
-                this.value = boolean("loading", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "scale",
-            commit() {
-                this.value = select("scale", scale.values, scale.defaultValue);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "text",
-            commit() {
-                this.value = text("text", "Text");
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "text-enabled",
-            commit() {
-                this.value = boolean("textEnabled", true);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "style",
-            commit() {
-                this.value = boolean("textEnabled", true);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-export const simple = () => html `<div>
-    ${create("calcite-action", createAttributes({ exceptions: ["icon", "text"] }).concat([
-    {
-        name: "icon",
-        value: "banana"
-    },
-    {
-        name: "text",
-        value: ""
-    }
-]))}
-  </div>`;
-export const disabledAndCompactAndTextOnly_TestOnly = () => html `<div>
-    ${create("calcite-action", createAttributes({ exceptions: ["compact", "disabled"] }).concat([
-    { name: "compact", value: true },
-    { name: "disabled", value: true }
-]))}
-  </div>`;
-export const activeAndAppearanceClear_TestOnly = () => html `<div>
-    ${create("calcite-action", createAttributes({ exceptions: ["icon", "appearance", "active"] }).concat([
-    { name: "active", value: true },
-    { name: "icon", value: "banana" },
-    { name: "appearance", value: "clear" }
-]))}
-  </div>`;
-export const alignmentEndAndSmallScaleAndIndicator_TestOnly = () => html `<div style="width: 300px">
-    ${create("calcite-action", createAttributes({ exceptions: ["icon", "indicator", "alignment", "scale"] }).concat([
-    { name: "icon", value: "banana" },
-    { name: "alignment", value: "end" },
-    { name: "indicator", value: true },
-    { name: "scale", value: "s" }
-]))}
-  </div>`;
-export const alignmentStartAndLargeScaleAndTextOverflow_TestOnly = () => html `<div style="width: 150px">
-    ${create("calcite-action", createAttributes({ exceptions: ["icon", "text", "alignment", "scale"] }).concat([
-    { name: "icon", value: "banana" },
-    { name: "text", value: "Blah blah blah blah blah blah blah blah blah blah" },
-    { name: "alignment", value: "start" },
-    { name: "scale", value: "l" }
-]))}
-  </div>`;
-export const arabicLocale_TestOnly = () => html `
-  <calcite-action
-    dir="rtl"
-    icon="banana"
-    lang="ar"
-    lang="ar-EG"
-    text="لكن لا بد أن أوضح لك أن كل"
-    text-enabled
-  ></calcite-action>
-`;
-export const darkThemeRTL_TestOnly = () => html `<div>
-    ${create("calcite-action", createAttributes({ exceptions: ["icon", "class", "dir"] }).concat([
-    { name: "icon", value: "banana" },
-    { name: "class", value: "calcite-theme-dark" },
-    { name: "dir", value: "rtl" }
-]))}
-  </div>`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/action-bar/action-bar.stories.js

@@ -1,141 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { ATTRIBUTES } from "../../../.storybook/resources";
-import { html } from "../../../support/formatting";
-import { TEXT } from "./resources";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Action Bar",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    const { position } = ATTRIBUTES;
-    return filterComponentAttributes([
-        {
-            name: "expand-disabled",
-            commit() {
-                this.value = boolean("expandDisabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "expanded",
-            commit() {
-                this.value = boolean("expanded", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-expand",
-            commit() {
-                this.value = text("intlExpand", TEXT.expand);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-collapse",
-            commit() {
-                this.value = text("intlCollapse", TEXT.collapse);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "position",
-            commit() {
-                this.value = select("position", position.values, position.defaultValue);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-export const simple = () => create("calcite-action-bar", createAttributes(), html `
-      <calcite-action-group>
-        <calcite-action text="Add" label="Add Item" icon="plus"></calcite-action>
-        <calcite-action text="Save" label="Save Item" icon="save"></calcite-action>
-      </calcite-action-group>
-      <calcite-action-group>
-        <calcite-action text="Layers" label="View Layers" icon="layers"></calcite-action>
-      </calcite-action-group>
-    `);
-export const horizontal = () => html `
-  <div style="width: 500px;">
-    <calcite-action-bar layout="horizontal" style="width:100%">
-      <calcite-action-group layout="horizontal">
-        <calcite-action text="Add" icon="plus"> </calcite-action>
-        <calcite-action text="Save" icon="save"> </calcite-action>
-        <calcite-action text="Layers" icon="layers"> </calcite-action>
-      </calcite-action-group>
-      <calcite-action-group layout="horizontal">
-        <calcite-action text="Add" icon="plus"> </calcite-action>
-        <calcite-action text="Save" active icon="save"> </calcite-action>
-        <calcite-action text="Layers" icon="layers"> </calcite-action>
-      </calcite-action-group>
-      <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
-    </calcite-action-bar>
-  </div>
-`;
-export const horizontalSmall = () => html `
-  <div style="width: 250px;">
-    <calcite-action-bar layout="horizontal" style="width:100%">
-      <calcite-action-group layout="horizontal">
-        <calcite-action text="Add" icon="plus"> </calcite-action>
-        <calcite-action text="Save" icon="save"> </calcite-action>
-        <calcite-action text="Layers" icon="layers"> </calcite-action>
-      </calcite-action-group>
-      <calcite-action-group layout="horizontal">
-        <calcite-action text="Add" icon="plus"> </calcite-action>
-        <calcite-action text="Save" active icon="save"> </calcite-action>
-        <calcite-action text="Layers" icon="layers"> </calcite-action>
-      </calcite-action-group>
-      <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
-    </calcite-action-bar>
-  </div>
-`;
-export const withDefinedWidths = () => html `
-    <style>
-      calcite-action-bar {
-        --calcite-action-bar-expanded-max-width: 150px;
-      }
-    </style>
-    <calcite-action-bar expanded>
-      <calcite-action-group>
-        <calcite-action text="Add to my custom action bar application" icon="plus"></calcite-action>
-        <calcite-action text="Save to my custom action bar application" icon="save"></calcite-action>
-      </calcite-action-group>
-      <calcite-action-group>
-        <calcite-action text="Layers in my custom action bar application" icon="layers"></calcite-action>
-      </calcite-action-group>
-    </calcite-action-bar>
-  `;
-export const darkThemeRTL_TestOnly = () => create("calcite-action-bar", createAttributes({ exceptions: ["dir", "class"] }).concat([
-    {
-        name: "dir",
-        value: "rtl"
-    },
-    {
-        name: "class",
-        value: "calcite-theme-dark"
-    }
-]), html `
-      <calcite-action-group>
-        <calcite-action text="Add" label="Add Item" icon="plus"></calcite-action>
-        <calcite-action text="Save" label="Save Item" icon="save"></calcite-action>
-      </calcite-action-group>
-      <calcite-action-group>
-        <calcite-action text="Layers" label="View Layers" icon="layers"></calcite-action>
-      </calcite-action-group>
-    `);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const withTooltip_NoTest = () => create("calcite-action-bar", createAttributes(), html `
-      <calcite-tooltip placement="bottom" slot="expand-tooltip">Expand</calcite-tooltip>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    `);

package/dist/collection/components/action-group/action-group.stories.js

@@ -1,41 +0,0 @@
-import { select, text } from "@storybook/addon-knobs";
-import { iconNames, storyFilters } from "../../../.storybook/helpers";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Action Group",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const gridCenteringOfActionsInAGroup = () => html `
-  <div style="width:400px">
-    <calcite-action-group layout="${select("layout", ["horizontal", "vertical", "grid"], "grid")}">
-      <calcite-action
-        alignment="${select("alignment", ["start", "center", "end"], "center")}"
-        scale="${select("scale", ["s", "m", "l"], "m")}"
-        appearance="${select("appearance", ["solid", "clear", "outline"], "solid")}"
-        icon="${select("icon", iconNames, "polygon")}"
-        ${text("text", "polygon")}
-      >
-      </calcite-action>
-      <calcite-action
-        alignment="${select("alignment", ["start", "center", "end"], "center")}"
-        scale="${select("scale", ["s", "m", "l"], "m")}"
-        appearance="${select("appearance", ["solid", "clear", "outline"], "solid")}"
-        icon="${select("icon", iconNames, "rectangle")}"
-        ${text("text", "rectangle")}
-      >
-      </calcite-action>
-      <calcite-action
-        alignment="${select("alignment", ["start", "center", "end"], "center")}"
-        scale="${select("scale", ["s", "m", "l"], "m")}"
-        appearance="${select("appearance", ["solid", "clear", "outline"], "solid")}"
-        icon="${select("icon", iconNames, "trash")}"
-        ${text("text", "trash")}
-      >
-      </calcite-action>
-    </calcite-action-group>
-  </div>
-`;

package/dist/collection/components/action-menu/action-menu.stories.js

@@ -1,26 +0,0 @@
-import { html } from "../../../support/formatting";
-import readme from "./readme.md";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Action Menu",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const simple = () => html `
-    <calcite-action-menu>
-      <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
-      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
-      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
-      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
-    </calcite-action-menu>
-  `;
-export const open = () => html `
-    <calcite-action-menu open>
-      <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
-      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
-      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
-      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
-    </calcite-action-menu>
-  `;

package/dist/collection/components/action-pad/action-pad.stories.js

@@ -1,107 +0,0 @@
-import { boolean, select, text } from "@storybook/addon-knobs";
-import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { ATTRIBUTES } from "../../../.storybook/resources";
-import { html } from "../../../support/formatting";
-import { TEXT } from "./resources";
-import { storyFilters } from "../../../.storybook/helpers";
-export default {
-    title: "Components/Action Pad",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-const createAttributes = ({ exceptions } = { exceptions: [] }) => {
-    const { position } = ATTRIBUTES;
-    return filterComponentAttributes([
-        {
-            name: "expand-disabled",
-            commit() {
-                this.value = boolean("expandDisabled", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "expanded",
-            commit() {
-                this.value = boolean("expanded", false);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "position",
-            commit() {
-                this.value = select("position", position.values, position.defaultValue);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-expand",
-            commit() {
-                this.value = text("intlExpand", TEXT.expand);
-                delete this.build;
-                return this;
-            }
-        },
-        {
-            name: "intl-collapse",
-            commit() {
-                this.value = text("intlCollapse", TEXT.collapse);
-                delete this.build;
-                return this;
-            }
-        }
-    ], exceptions);
-};
-export const simple = () => create("calcite-action-pad", createAttributes(), html `
-      <calcite-action-group>
-        <calcite-action text="Undo" label="Undo Action" icon="undo"></calcite-action>
-        <calcite-action text="Redo" label="Redo Action" icon="redo"></calcite-action>
-      </calcite-action-group>
-      <calcite-action-group>
-        <calcite-action text="Delete" label="Delete Item" icon="trash"></calcite-action>
-      </calcite-action-group>
-    `);
-export const withDefinedWidths = () => html `
-    <style>
-      calcite-action-pad {
-        --calcite-action-pad-expanded-max-width: 150px;
-      }
-    </style>
-    <calcite-action-pad expanded>
-      <calcite-action-group>
-        <calcite-action text="Add to my custom action pad application" icon="plus"></calcite-action>
-        <calcite-action text="Save to my custom action pad application" icon="save"></calcite-action>
-      </calcite-action-group>
-      <calcite-action-group>
-        <calcite-action text="Layers in my custom action pad application" icon="layers"></calcite-action>
-      </calcite-action-group>
-    </calcite-action-pad>
-  `;
-export const darkThemeRTL_TestOnly = () => create("calcite-action-pad", createAttributes({ exceptions: ["dir", "class"] }).concat([
-    {
-        name: "dir",
-        value: "rtl"
-    },
-    {
-        name: "class",
-        value: "calcite-theme-dark"
-    }
-]), html `
-      <calcite-action-group>
-        <calcite-action text="Add" label="Add Item" icon="plus"></calcite-action>
-        <calcite-action text="Save" label="Save Item" icon="save"></calcite-action>
-      </calcite-action-group>
-      <calcite-action-group>
-        <calcite-action text="Layers" label="View Layers" icon="layers"></calcite-action>
-      </calcite-action-group>
-    `);
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
-export const withTooltip_NoTest = () => create("calcite-action-pad", createAttributes(), html `
-      <calcite-tooltip placement="bottom" slot="expand-tooltip">Expand</calcite-tooltip>
-      <calcite-action text="Add" icon="plus"></calcite-action>
-    `);

package/dist/collection/components/alert/alert.stories.js

@@ -1,140 +0,0 @@
-import { select } from "@storybook/addon-knobs";
-import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { themesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
-export default {
-    title: "Components/Alert",
-    parameters: {
-        notes: readme
-    },
-    ...storyFilters()
-};
-export const titleMessageLink = () => html `
-<calcite-alert
-${boolean("icon", true)}
-${boolean("auto-dismiss", false)}
-auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
-placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
-${boolean("open", true)}
-scale="${select("scale", ["s", "m", "l"], "m")}"
-color="${select("color", ["green", "red", "yellow", "blue"], "blue")}">
-<div slot="title">Here's a general bit of information</div></div>
-<div slot="message">
-  Some kind of contextually relevant content
-</div>
-<calcite-link slot="link" title="my action">Take action</calcite-link>
-</calcite-alert>
-`;
-titleMessageLink.storyName = "Title, message, link";
-export const titleMessage = () => html `
-  <calcite-alert
-    ${boolean("icon", true)}
-    ${boolean("auto-dismiss", false)}
-    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
-    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
-    ${boolean("open", true)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
-  >
-    <div slot="title">Something failed</div>
-    <div slot="message">That thing you wanted to do didn't work as expected</div>
-  </calcite-alert>
-`;
-titleMessage.storyName = "Title, message";
-export const messageLink = () => html `
-  <calcite-alert
-    ${boolean("icon", true)}
-    ${boolean("auto-dismiss", false)}
-    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
-    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
-    ${boolean("open", true)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
-  >
-    <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
-    <calcite-link slot="link" title="my action">View layer</calcite-link>
-  </calcite-alert>
-`;
-messageLink.storyName = "Message, link";
-export const message = () => html `
-  <calcite-alert
-    ${boolean("icon", true)}
-    ${boolean("auto-dismiss", false)}
-    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
-    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
-    ${boolean("active", true)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "yellow")}"
-  >
-    <div slot="message">Network connection interruption detected</div>
-  </calcite-alert>
-`;
-export const customIcon = () => html `
-  <calcite-alert
-    icon="${select("icon", iconNames, iconNames[0])}"
-    ${boolean("auto-dismiss", false)}
-    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
-    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
-    ${boolean("active", true)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
-  >
-    <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
-    <calcite-link slot="link" title="my action">View layer</calcite-link>
-  </calcite-alert>
-`;
-export const queue_NoTest = () => html `
-  <div>
-    <h5>Open or add to queue</h5>
-    <calcite-button onclick='document.querySelector("#one").setAttribute("open", "")'>Open Alert 1</calcite-button>
-    <calcite-button onclick='document.querySelector("#two").setAttribute("open", "")'>Open Alert 2</calcite-button>
-    <calcite-button onclick='document.querySelector("[data-custom-id=my-id]").setAttribute("open", "")'
-      >Open Alert 3</calcite-button
-    >
-    <br />
-    <br />
-    <h5>Close or remove from queue</h5>
-    <calcite-button color="red" onclick='document.querySelector("#one").removeAttribute("open")'
-      >Close Alert 1</calcite-button
-    >
-    <calcite-button color="red" onclick='document.querySelector("#two").removeAttribute("open")'
-      >Close Alert 2</calcite-button
-    >
-    <calcite-button color="red" onclick='document.querySelector("[data-custom-id=my-id]").removeAttribute("open")'
-      >Close Alert 3</calcite-button
-    >
-    <calcite-alert id="one" icon color="${select("color", ["green", "red", "yellow", "blue"], "green")}">
-      <div slot="title">Your great thing happened</div>
-      <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
-      <calcite-link slot="link" title="my action">View layer</calcite-link>
-    </calcite-alert>
-    <calcite-alert id="two" icon color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}">
-      <div slot="title">Your great thing happened</div>
-      <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
-      <calcite-link slot="link" title="my action">View layer</calcite-link>
-    </calcite-alert>
-    <calcite-alert data-custom-id="my-id" icon color="${select("color-3", ["green", "red", "yellow", "blue"], "red")}">
-      <div slot="title">That didn't work out</div>
-      <div slot="message">That thing you wanted to do didn't work</div>
-      <calcite-link slot="link" title="my action">View layer</calcite-link>
-    </calcite-alert>
-  </div>
-`;
-export const darkThemeRTL_TestOnly = () => html `
-  <calcite-alert
-    class="calcite-theme-dark"
-    ${boolean("icon", true)}
-    ${boolean("auto-dismiss", false)}
-    auto-dismiss-duration="${select("auto-dismiss-duration", ["fast", "medium", "slow"], "medium")}"
-    placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
-    ${boolean("open", true)}
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
-  >
-    <div slot="title">Something failed</div>
-    <div slot="message">That thing you wanted to do didn't work as expected</div>
-    <calcite-link slot="link" title="my action">My action</calcite-link>
-  </calcite-alert>
-`;
-darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };