xmlui 0.11.4 → 0.11.6

package/dist/scripts/src/components/Button/Button.spec.js

@@ -1,425 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
-const fixtures_1 = require("../../testing/fixtures");
-const abstractions_1 = require("../../components/abstractions");
-const abstractions_2 = require("../abstractions");
-// --- Smoke
-fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button />`);
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toBeAttached();
-    }));
-    // --- label
-    (0, fixtures_1.test)("renders ASCII text in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button label="hello" />`);
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("hello");
-    }));
-    (0, fixtures_1.test)("renders Unicode text in label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button label="😀" />`);
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("😀");
-    }));
-    // --- icon
-    (0, fixtures_1.test)("can render icon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button icon="test" />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).getIcons().first()).toBeVisible();
-    }));
-    // --- enabled
-    (0, fixtures_1.test)("has enabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button enabled="true" />`);
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toBeEnabled();
-    }));
-    (0, fixtures_1.test)("has disabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button enabled="false" />`);
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toBeDisabled();
-    }));
-    // --- click
-    (0, fixtures_1.test)("click event fires", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        const { testStateDriver } = yield initTestBed(`<Button onClick="testState = true" />`);
-        yield (yield createButtonDriver()).click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-    }));
-    // --- variant & themeColor
-    // background color
-    const EXPECTED_BACKGROUND_COLOR = "rgb(255, 0, 0)";
-    abstractions_1.buttonThemeValues.forEach((themeColor) => {
-        (0, fixtures_1.test)(`"solid" background color: "${themeColor}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-            yield initTestBed(`<Button variant="solid" themeColor="${themeColor}" />`, {
-                testThemeVars: {
-                    [`backgroundColor-Button-${themeColor}-solid`]: EXPECTED_BACKGROUND_COLOR,
-                },
-            });
-            yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveCSS("background-color", EXPECTED_BACKGROUND_COLOR);
-        }));
-    });
-    // content/label color
-    const EXPECTED_CONTENT_COLOR = "rgb(255, 255, 255)";
-    abstractions_1.buttonVariantValues.forEach((variant) => {
-        abstractions_1.buttonThemeValues.forEach((themeColor) => {
-            (0, fixtures_1.test)(`"${variant}" content color: "${themeColor}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-                yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
-                    testThemeVars: {
-                        [`textColor-Button-${themeColor}-${variant}`]: EXPECTED_CONTENT_COLOR,
-                    },
-                });
-                yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveCSS("color", EXPECTED_CONTENT_COLOR);
-            }));
-        });
-    });
-    // border
-    const EXPECTED_BORDER_COLOR = "rgb(255, 0, 0)";
-    const EXPECTED_BORDER_WIDTH = "5px";
-    const EXPECTED_BORDER_STYLE = "dotted";
-    const EXPECTED_BORDER_RADIUS = "10px";
-    abstractions_1.buttonVariantValues
-        .filter((v) => v !== "ghost")
-        .forEach((variant) => {
-        abstractions_1.buttonThemeValues.forEach((themeColor) => {
-            (0, fixtures_1.test)(`border: "${themeColor}" "${variant}" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-                yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
-                    testThemeVars: {
-                        [`borderColor-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_COLOR,
-                        [`borderWidth-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_WIDTH,
-                        [`borderRadius-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_RADIUS,
-                        [`borderStyle-Button-${themeColor}-${variant}`]: EXPECTED_BORDER_STYLE,
-                    },
-                });
-                const driver = yield createButtonDriver();
-                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", EXPECTED_BORDER_COLOR);
-                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-width", EXPECTED_BORDER_WIDTH);
-                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", EXPECTED_BORDER_RADIUS);
-                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-style", EXPECTED_BORDER_STYLE);
-            }));
-        });
-    });
-    abstractions_1.buttonThemeValues.forEach((themeColor) => {
-        (0, fixtures_1.test)(`border: "${themeColor}" "ghost" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-            yield initTestBed(`<Button variant="ghost" themeColor="${themeColor}" />`, {
-                testThemeVars: {
-                    [`borderWidth-Button-${themeColor}-ghost`]: EXPECTED_BORDER_WIDTH,
-                    [`borderRadius-Button-${themeColor}-ghost`]: EXPECTED_BORDER_RADIUS,
-                },
-            });
-            const driver = yield createButtonDriver();
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-width", EXPECTED_BORDER_WIDTH);
-            yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", EXPECTED_BORDER_RADIUS);
-        }));
-    });
-    // fonts
-    const EXPECTED_FONT_FAMILY = "Arial, sans-serif";
-    const EXPECTED_FONT_SIZE = "20px";
-    const EXPECTED_FONT_WEIGHT = "200";
-    abstractions_1.buttonVariantValues.forEach((variant) => {
-        abstractions_1.buttonThemeValues.forEach((themeColor) => {
-            (0, fixtures_1.test)(`font: "${themeColor}" "${variant}" variant`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-                yield initTestBed(`<Button variant="${variant}" themeColor="${themeColor}" />`, {
-                    testThemeVars: {
-                        [`fontFamily-Button-${themeColor}-${variant}`]: EXPECTED_FONT_FAMILY,
-                        [`fontSize-Button-${themeColor}-${variant}`]: EXPECTED_FONT_SIZE,
-                        [`fontWeight-Button-${themeColor}-${variant}`]: EXPECTED_FONT_WEIGHT,
-                    },
-                });
-                const driver = yield createButtonDriver();
-                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-family", EXPECTED_FONT_FAMILY);
-                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-size", EXPECTED_FONT_SIZE);
-                yield (0, fixtures_1.expect)(driver.component).toHaveCSS("font-weight", EXPECTED_FONT_WEIGHT);
-            }));
-        });
-    });
-    // --- Accessibility
-    (0, fixtures_1.test)("icon-only button has accessible name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button icon="test" />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("test");
-    }));
-    (0, fixtures_1.test)("icon & label button uses label name only", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button icon="test" label="label" />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("label");
-    }));
-    (0, fixtures_1.test)("icon-only button uses contextualLabel", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button icon="test" contextualLabel="label" />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("label");
-    }));
-    (0, fixtures_1.test)("icon, label, contextualLabel button uses label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-        yield initTestBed(`<Button icon="test" label="label" contextualLabel="contextLabel" />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveText("label");
-    }));
-});
-// --- E2E
-// --- label
-// Label inputs resolved with converting them to a string
-[
-    { label: "null", input: null, toExpect: "null" },
-    { label: "undefined", input: undefined, toExpect: "undefined" },
-    { label: "empty object", input: {}, toExpect: "[object Object]" },
-    { label: "object", input: { a: 1, b: "hi" }, toExpect: "[object Object]" },
-    { label: "empty array", input: [], toExpect: undefined },
-    { label: "array", input: [1, 2, 3], toExpect: "1,2,3" },
-    { label: "arrow function returning string", input: "{() => ''}", toExpect: "[object Object]" },
-    {
-        label: "function returning string",
-        input: "{function () { return ''; }}",
-        toExpect: "[object Object]",
-    },
-    {
-        label: "IIFE returning string",
-        input: "{(function () { return 'hello'; })()}",
-        toExpect: "hello",
-    },
-].forEach((type) => {
-    (0, fixtures_1.test)(`if label is ${type.label} renders label as "${type.toExpect}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-        yield initTestBed(`<Button label="${type.input}" />`);
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveExplicitLabel(type.toExpect);
-    }));
-});
-(0, fixtures_1.test)("text node as children are same as setting label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-    yield initTestBed(`<Button>hello</Button>`);
-    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveExplicitLabel("hello");
-}));
-(0, fixtures_1.test)("ignores label property if children present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    yield initTestBed(`<Button label="hello">world</Button>`);
-    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveExplicitLabel("world");
-}));
-(0, fixtures_1.test)("renders XMLUI Text component as child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createTextDriver, }) {
-    yield initTestBed(`<Button label="hello"><Text testId="text">world</Text></Button>`);
-    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).not.toHaveExplicitLabel("hello");
-    yield (0, fixtures_1.expect)((yield createTextDriver("text")).component).toHaveText("world");
-}));
-(0, fixtures_1.test)("renders XMLUI Complex component as child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createCardDriver, }) {
-    yield initTestBed(`<Button label="hello"><Card testId="card" title="Button">Content</Card></Button>`);
-    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).not.toHaveExplicitLabel("hello");
-    yield (0, fixtures_1.expect)((yield createCardDriver("card")).component).toBeAttached();
-}));
-// --- icon
-(0, fixtures_1.test)("renders icon and label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    yield initTestBed(`<Button icon="test" label="hello" />`, {
-        resources: {
-            "icon.test": "resources/bell.svg",
-        },
-    });
-    const driver = yield createButtonDriver();
-    yield (0, fixtures_1.expect)(driver.component).toHaveText("hello");
-    yield (0, fixtures_1.expect)(driver.getIcons().first()).toBeVisible();
-}));
-(0, fixtures_1.test)("renders icon if children present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    yield initTestBed(`<Button icon="test">Hello World</Button>`, {
-        resources: {
-            "icon.test": "resources/bell.svg",
-        },
-    });
-    yield (0, fixtures_1.expect)((yield createButtonDriver()).getIcons().first()).toBeVisible();
-}));
-[
-    { label: "null", value: null },
-    { label: "undefined", value: undefined },
-    { label: "empty object", value: {} },
-    { label: "object", value: { a: 1, b: "hi" } },
-    { label: "empty array", value: [] },
-    { label: "array", value: [] },
-    { label: "function", value: () => { } },
-].forEach((type) => {
-    (0, fixtures_1.test)(`does not render icon if icon is of type ${type.label}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-        yield initTestBed(`<Button icon="${type.value}" />`);
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).getIcons().first()).not.toBeAttached();
-    }));
-});
-(0, fixtures_1.test)("renders if icon is not found and label is present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-    yield initTestBed(`<Button icon="_" label="hello" />`);
-    const driver = yield createButtonDriver();
-    yield (0, fixtures_1.expect)(driver.getIcons().first()).not.toBeAttached();
-    yield (0, fixtures_1.expect)(driver.component).toHaveText("hello");
-}));
-// --- iconPosition
-const iconPositionCases = [
-    { position: "left", value: "start" },
-    { position: "right", value: "end" },
-];
-// This is a helper function to calculate the icon position
-function iconPositionCalculation(buttonDriver, iconDriver) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const buttonBounds = yield (0, component_test_helpers_1.getBounds)(buttonDriver);
-        const buttonPadding = yield (0, component_test_helpers_1.getPaddings)(buttonDriver);
-        const buttonBorders = yield (0, component_test_helpers_1.getBorders)(buttonDriver);
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(iconDriver);
-        const buttonContentLeft = buttonBounds.left + buttonBorders.left.width.value + buttonPadding.left.value;
-        const buttonContentRight = buttonBounds.right - buttonBorders.right.width.value - buttonPadding.right.value;
-        return { buttonContentLeft, buttonContentRight, iconLeft, iconRight };
-    });
-}
-iconPositionCases.forEach(({ value }) => {
-    (0, fixtures_1.test)(`iconPosition=${value} leaves icon in middle`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createIconDriver, }) {
-        yield initTestBed(`<Button icon="test" iconPosition="${value}" />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        const buttonDriver = yield createButtonDriver();
-        const iconDriver = yield createIconDriver(buttonDriver.getIcons().first());
-        const { buttonContentLeft, buttonContentRight, iconLeft, iconRight } = yield iconPositionCalculation(buttonDriver, iconDriver);
-        (0, fixtures_1.expect)(buttonContentLeft).toBeCloseTo(iconLeft, 5);
-        (0, fixtures_1.expect)(buttonContentRight).toBeCloseTo(iconRight, 5);
-    }));
-});
-// With label
-iconPositionCases.forEach(({ position, value }) => {
-    (0, fixtures_1.test)(`iconPosition=${value} places icon on the ${position} of label`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createIconDriver, }) {
-        yield initTestBed(`<Button icon="test" label="hello" iconPosition="${value}" />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        const buttonDriver = yield createButtonDriver();
-        const iconDriver = yield createIconDriver(buttonDriver.getIcons().first());
-        const { buttonContentLeft, buttonContentRight, iconLeft, iconRight } = yield iconPositionCalculation(buttonDriver, iconDriver);
-        // Depending on orientation, the icon's leftmost and rightmost points fall shorter
-        // compared to the button's leftmost and rightmost points because of the label
-        if (value === "start") {
-            (0, fixtures_1.expect)(buttonContentLeft).toBeCloseTo(iconLeft, 5);
-            (0, fixtures_1.expect)(buttonContentRight).toBeGreaterThan(iconRight + 1);
-        }
-        else {
-            (0, fixtures_1.expect)(buttonContentLeft).toBeLessThan(iconLeft - 1);
-            (0, fixtures_1.expect)(buttonContentRight).toBeCloseTo(iconRight, 5);
-        }
-    }));
-});
-// With children
-iconPositionCases.forEach(({ position, value }) => {
-    (0, fixtures_1.test)(`iconPosition=${value} places icon on ${position} of children`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, createIconDriver, }) {
-        yield initTestBed(`<Button icon="test" iconPosition="${value}">
-          <Card title="Test">This is some content</Card>
-        </Button>`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        const buttonDriver = yield createButtonDriver();
-        const iconDriver = yield createIconDriver(buttonDriver.getIcons().first());
-        const { buttonContentLeft, buttonContentRight, iconLeft, iconRight } = yield iconPositionCalculation(buttonDriver, iconDriver);
-        // Depending on orientation, the icon's leftmost and rightmost points fall shorter
-        // compared to the button's leftmost and rightmost points because of the children
-        if (value === "start") {
-            (0, fixtures_1.expect)(buttonContentLeft).toBeCloseTo(iconLeft, 5);
-            (0, fixtures_1.expect)(buttonContentRight).toBeGreaterThan(iconRight + 1);
-        }
-        else {
-            (0, fixtures_1.expect)(buttonContentLeft).toBeLessThan(iconLeft - 1);
-            (0, fixtures_1.expect)(buttonContentRight).toBeCloseTo(iconRight, 5);
-        }
-    }));
-});
-// --- contentPosition
-abstractions_1.alignmentOptionValues.forEach((pos) => {
-    (0, fixtures_1.test)(`label and icon is positioned to the ${pos}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-        yield initTestBed(`<Button width="100%" icon="test" label="hello" contentPosition="${pos}" />`, {
-            resources: {
-                "icon.test": "resources/bell.svg",
-            },
-        });
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveCSS("justify-content", pos);
-    }));
-});
-// --- type
-abstractions_1.buttonTypeValues.forEach((type) => {
-    (0, fixtures_1.test)(`type="${type}" is reflected in html`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-        yield initTestBed(`<Button type="${type}" />`);
-        yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toHaveAttribute("type", type);
-    }));
-});
-// --- autoFocus
-(0, fixtures_1.test)("focuses component if autoFocus is set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    yield initTestBed(`<Button autoFocus="{true}" />`);
-    yield (0, fixtures_1.expect)((yield createButtonDriver()).component).toBeFocused();
-}));
-// --- size
-// Relative testing is acceptable for now - basis of the test is the default size
-(0, fixtures_1.test)("relative size test", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    const components = abstractions_2.sizeValues
-        .map((size) => {
-        return `<Button testId="${size}" size="${size}" />`;
-    })
-        .join("\n");
-    yield initTestBed(`<Fragment>${components}</Fragment>`);
-    const { width: widthXs, height: heightXs } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("xs"));
-    const { width: widthSm, height: heightSm } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("sm"));
-    const { width: widthMd, height: heightMd } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("md"));
-    const { width: widthLg, height: heightLg } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("lg"));
-    (0, fixtures_1.expect)(widthXs).toBeLessThanOrEqual(widthSm);
-    (0, fixtures_1.expect)(widthSm).toBeLessThanOrEqual(widthMd);
-    (0, fixtures_1.expect)(widthMd).toBeLessThanOrEqual(widthLg);
-    (0, fixtures_1.expect)(heightXs).toBeLessThanOrEqual(heightSm);
-    (0, fixtures_1.expect)(heightSm).toBeLessThanOrEqual(heightMd);
-    (0, fixtures_1.expect)(heightMd).toBeLessThanOrEqual(heightLg);
-}));
-(0, fixtures_1.test)("testState initializes to default value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed }) {
-    const getState = (yield initTestBed(`<Fragment />`)).testStateDriver.testState;
-    yield fixtures_1.expect.poll(getState).toEqual(null);
-}));
-// --- gotFocus
-(0, fixtures_1.test)("is focused & gotFocus event fires", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    const { testStateDriver } = yield initTestBed(`<Button onGotFocus="testState = true" />`);
-    const driver = yield createButtonDriver();
-    yield driver.focus();
-    yield (0, fixtures_1.expect)(driver.component).toBeFocused();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-}));
-(0, fixtures_1.test)("gotFocus event does not fire if disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    const { testStateDriver } = yield initTestBed(`<Button enabled="false" onGotFocus="testState = true" />`);
-    const driver = yield createButtonDriver();
-    yield driver.focus();
-    // testState remains unchanged
-    yield (0, fixtures_1.expect)(driver.component).not.toBeFocused();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-}));
-// --- lostFocus
-(0, fixtures_1.test)("lostFocus event fires & is not focused", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    const { testStateDriver } = yield initTestBed(`<Button onLostFocus="testState = true" />`);
-    const driver = yield createButtonDriver();
-    yield driver.focus();
-    yield driver.blur();
-    yield (0, fixtures_1.expect)(driver.component).not.toBeFocused();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
-}));
-(0, fixtures_1.test)("cannot emit lostFocus event if not focused before", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver, }) {
-    const { testStateDriver } = yield initTestBed(`<Button onLostFocus="testState = true" />`);
-    const driver = yield createButtonDriver();
-    yield driver.blur();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-}));
-(0, fixtures_1.test)("lostFocus event does not fire if disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createButtonDriver }) {
-    const { testStateDriver } = yield initTestBed(`<Button enabled="false" onLostFocus="testState = true" />`);
-    const driver = yield createButtonDriver();
-    yield driver.focus();
-    yield driver.blur();
-    // testState remains unchanged
-    yield (0, fixtures_1.expect)(driver.component).not.toBeFocused();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
-}));

package/dist/scripts/src/components/Button/ButtonNative.js

@@ -1,109 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
-const abstractions_1 = require("../abstractions");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const VisuallyHidden_1 = require("../VisuallyHidden");
-exports.defaultProps = {
-    type: "button",
-    iconPosition: "start",
-    contentPosition: "center",
-    orientation: "horizontal",
-    variant: "solid",
-    themeColor: "primary",
-    size: "sm",
-    autoFocus: false,
-};
-exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
-    var { id, type = exports.defaultProps.type, icon, iconPosition = exports.defaultProps.iconPosition, contentPosition = exports.defaultProps.contentPosition, orientation = exports.defaultProps.orientation, variant = exports.defaultProps.variant, themeColor = exports.defaultProps.themeColor, size = exports.defaultProps.size, disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus = exports.defaultProps.autoFocus, contextualLabel } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus", "contextualLabel"]);
-    const innerRef = (0, react_1.useRef)(null);
-    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, innerRef) : innerRef;
-    (0, react_1.useEffect)(() => {
-        if (autoFocus) {
-            setTimeout(() => {
-                var _a;
-                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
-        }
-    }, [autoFocus]);
-    const iconToLeft = iconPosition === "start";
-    if (!(0, abstractions_1.isSizeType)(size)) {
-        size = exports.defaultProps.size;
-    }
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, ref: composedRef, className: (0, classnames_1.default)(Button_module_scss_1.default.button, {
-            [Button_module_scss_1.default.buttonHorizontal]: orientation === "horizontal",
-            [Button_module_scss_1.default.buttonVertical]: orientation === "vertical",
-            [Button_module_scss_1.default.xs]: size === "xs",
-            [Button_module_scss_1.default.sm]: size === "sm",
-            [Button_module_scss_1.default.md]: size === "md",
-            [Button_module_scss_1.default.lg]: size === "lg",
-            [Button_module_scss_1.default.solidPrimary]: variant === "solid" && themeColor === "primary",
-            [Button_module_scss_1.default.solidSecondary]: variant === "solid" && themeColor === "secondary",
-            [Button_module_scss_1.default.solidAttention]: variant === "solid" && themeColor === "attention",
-            [Button_module_scss_1.default.outlinedPrimary]: variant === "outlined" && themeColor === "primary",
-            [Button_module_scss_1.default.outlinedSecondary]: variant === "outlined" && themeColor === "secondary",
-            [Button_module_scss_1.default.outlinedAttention]: variant === "outlined" && themeColor === "attention",
-            [Button_module_scss_1.default.ghostPrimary]: variant === "ghost" && themeColor === "primary",
-            [Button_module_scss_1.default.ghostSecondary]: variant === "ghost" && themeColor === "secondary",
-            [Button_module_scss_1.default.ghostAttention]: variant === "ghost" && themeColor === "attention",
-            [Button_module_scss_1.default.alignStart]: contentPosition === "start",
-            [Button_module_scss_1.default.alignEnd]: contentPosition === "end",
-        }, className), autoFocus: autoFocus, disabled: disabled, form: formId, style: style, onClick: onClick, onFocus: onFocus, onBlur: onBlur, children: [icon && iconToLeft && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon }), children, icon && !children && (0, jsx_runtime_1.jsx)(IconLabel, { icon: icon, accessibleName: contextualLabel }), icon && !iconToLeft && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon })] })));
-});
-const IconLabel = ({ icon, accessibleName = "" }) => {
-    // NOTE: the icon object provided is a React object with accessible props attribute.
-    // Typing might be off, because TS thinks props is not accessible.
-    const iconProps = icon.props;
-    return ((0, jsx_runtime_1.jsx)(VisuallyHidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("span", { children: accessibleName || (iconProps === null || iconProps === void 0 ? void 0 : iconProps.name) || (iconProps === null || iconProps === void 0 ? void 0 : iconProps.alt) }) }));
-};

package/dist/scripts/src/components/Card/Card.js

@@ -1,89 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cardComponentRenderer = exports.CardMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../metadata-helpers");
-const abstractions_1 = require("../abstractions");
-const CardNative_1 = require("./CardNative");
-const COMP = "Card";
-exports.CardMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Card` is a versatile container that groups related content with a visual " +
-        "boundary, typically featuring background color, padding, borders, and rounded " +
-        "corners. It's ideal for organizing information, creating sections, and " +
-        "establishing visual hierarchy in your interface.",
-    props: {
-        avatarUrl: {
-            description: `The url for an avarar image. If not specified, but [\`showAvatar\`](#showAvatar) is true, ${COMP} will show the ` +
-                `first letters of the [\`title\`](#title).`,
-            type: "string",
-        },
-        showAvatar: {
-            description: `Indicates whether the avatar should be displayed`,
-            valueType: "boolean",
-            defaultValue: CardNative_1.defaultProps.showAvatar,
-        },
-        avatarSize: {
-            description: `This prop sets the size of the avatar. The default value is \`sm\`.`,
-            availableValues: ["xs", "sm", "md", "lg"],
-            valueType: "string",
-        },
-        title: {
-            description: "This prop sets the pre-styled title. If the property is not set, no title " +
-                "is displayed in the Card.",
-            valueType: "string",
-        },
-        subtitle: {
-            description: "This prop sets the pre-styled subtitle. If the property is not set, no subtitle " +
-                "is displayed in the Card.",
-            valueType: "string",
-        },
-        linkTo: {
-            description: "This optional property wraps the title in a \`Link\` component that is clickable to navigate.",
-            valueType: "string",
-        },
-        orientation: {
-            description: `An optional property that governs the ${COMP}'s orientation ` +
-                `(whether the ${COMP} lays out its children in a row or a column). ` +
-                `If the orientation is set to \`horizontal\`, the ${COMP} will display ` +
-                `its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`,
-            availableValues: abstractions_1.orientationOptionMd,
-            valueType: "string",
-            defaultValue: CardNative_1.defaultProps.orientation,
-        },
-    },
-    events: {
-        click: (0, metadata_helpers_1.dClick)(COMP),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Card_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`padding-${COMP}`]: "$space-4",
-        [`border-${COMP}`]: "1px solid $borderColor",
-        [`borderRadius-${COMP}`]: "$borderRadius",
-        [`boxShadow-${COMP}`]: "none",
-        [`backgroundColor-${COMP}`]: "$color-surface-raised",
-        [`gap-${COMP}`]: "var(--stack-gap-default)",
-        [`gap-title-${COMP}`]: "$gap-none",
-        [`gap-avatar-${COMP}`]: "$gap-normal",
-        [`verticalAlignment-title-${COMP}`]: "center",
-    },
-    themeVarDescriptions: {
-        [`gap-${COMP}`]: "The gap between the component's children.",
-        [`gap-title-${COMP}`]: "The gap between the title and the subtitle",
-        [`gap-avatar-${COMP}`]: "The gap between the avatar and the title panel",
-        [`horizontalAlignment-title-${COMP}`]: "The horizontal alignment of panel with the title and subtitle",
-        [`verticalAlignment-title-${COMP}`]: "The vertical alignment of the title and subtitle to the avatar",
-    },
-});
-exports.cardComponentRenderer = (0, renderers_1.createComponentRenderer)("Card", exports.CardMd, ({ node, extractValue, renderChild, className }) => {
-    return ((0, jsx_runtime_1.jsx)(CardNative_1.Card, { className: className, title: extractValue.asOptionalString(node.props.title), linkTo: extractValue.asOptionalString(node.props.linkTo), subtitle: extractValue.asOptionalString(node.props.subtitle), avatarUrl: extractValue.asOptionalString(node.props.avatarUrl), showAvatar: extractValue.asOptionalBoolean(node.props.showAvatar), avatarSize: extractValue.asOptionalString(node.props.avatarSize), orientation: extractValue.asOptionalString(node.props.orientation), children: renderChild(node.children, {
-            type: "Stack",
-            orientation: "vertical",
-        }) }));
-});