xmlui 0.10.12 → 0.10.14

package/dist/scripts/src/components/Theme/NotificationToast.js

@@ -36,7 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationToast = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = require("react-dom");
 const react_hot_toast_1 = __importStar(require("react-hot-toast"));
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const TOASTER_CONTAINER_STYLE = {
     top: 40,
     right: 40,
@@ -48,6 +50,7 @@ const TOASTER_CONTAINER_STYLE = {
 let toasterMounted = false;
 const NotificationToast = ({ toastDuration }) => {
     const [shouldRender, setShouldRender] = (0, react_1.useState)(false);
+    const { root } = (0, ThemeContext_1.useTheme)();
     (0, react_1.useEffect)(() => {
         if (!toasterMounted) {
             toasterMounted = true;
@@ -56,6 +59,6 @@ const NotificationToast = ({ toastDuration }) => {
     }, []);
     if (!shouldRender)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }));
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: "top-right", containerStyle: TOASTER_CONTAINER_STYLE, toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration }, children: (t) => ((0, jsx_runtime_1.jsx)("div", { onClick: () => react_hot_toast_1.default.dismiss(t.id), children: (0, jsx_runtime_1.jsx)(react_hot_toast_1.ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon, message }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, message] })) }) })) }), root);
 };
 exports.NotificationToast = NotificationToast;

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

@@ -0,0 +1,124 @@
+"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 PAGE_WIDTH = 1200;
+const PAGE_HEIGHT = 500;
+fixtures_1.test.use({ viewport: { width: PAGE_WIDTH, height: PAGE_HEIGHT } });
+(0, fixtures_1.test)("Themed NavPanel", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const EXPECTED_COLOR = "rgb(23, 35, 43)";
+    yield initTestBed(`
+    <App layout="vertical">
+      <Theme tone="dark">
+        <NavPanel testId="nav-panel">
+          <NavLink to="/something">Something</NavLink>
+        </NavPanel>
+      </Theme>
+    </App>
+  `, {
+        themes: [
+            {
+                id: "test",
+                extends: "light",
+                tones: {
+                    dark: {
+                        themeVars: {
+                            "background-color": EXPECTED_COLOR,
+                        },
+                    },
+                },
+            },
+        ],
+        defaultTheme: "test",
+    });
+    const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("nav-panel"), "background-color");
+    const boundingRect = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("nav-panel"));
+    (0, fixtures_1.expect)(boundingRect.top).toBe(0);
+    (0, fixtures_1.expect)(boundingRect.height).toBe(PAGE_HEIGHT);
+    (0, fixtures_1.expect)(boundingRect.bottom).toBe(PAGE_HEIGHT);
+    (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
+}));
+(0, fixtures_1.test)("Themed AppHeader", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const EXPECTED_COLOR = "rgb(28, 43, 53)";
+    yield initTestBed(`
+    <App layout="vertical" scrollWholePage="false">
+      <Theme tone="dark">
+        <AppHeader testId="app-header"/>
+      </Theme>
+    </App>
+  `, {
+        themes: [
+            {
+                id: "test",
+                extends: "light",
+                tones: {
+                    dark: {
+                        themeVars: {
+                            "background-color": EXPECTED_COLOR,
+                        },
+                    },
+                },
+            },
+        ],
+        defaultTheme: "test",
+    });
+    const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("app-header"), "background-color");
+    const boundingRect = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("app-header"));
+    (0, fixtures_1.expect)(boundingRect.top).toBe(0);
+    (0, fixtures_1.expect)(boundingRect.width).toBe(PAGE_WIDTH);
+    (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
+}));
+(0, fixtures_1.test)("Themed Footer", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    const EXPECTED_COLOR = "rgb(28, 43, 53)";
+    yield initTestBed(`
+    <App scrollWholePage="false">
+      <Theme tone="dark">
+        <Footer testId="app-footer"/>
+      </Theme>
+    </App>
+  `, {
+        themes: [
+            {
+                id: "test",
+                extends: "light",
+                tones: {
+                    dark: {
+                        themeVars: {
+                            "background-color": EXPECTED_COLOR,
+                        },
+                    },
+                },
+            },
+        ],
+        defaultTheme: "test",
+    });
+    const { backgroundColor } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("app-footer"), "background-color");
+    const boundingRect = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("app-footer"));
+    (0, fixtures_1.expect)(boundingRect.left).toBe(0);
+    (0, fixtures_1.expect)(boundingRect.bottom).toEqualWithTolerance(PAGE_HEIGHT, 0.01);
+    (0, fixtures_1.expect)(boundingRect.width).toEqualWithTolerance(PAGE_WIDTH, 0.01);
+    (0, fixtures_1.expect)(backgroundColor).toBe(EXPECTED_COLOR);
+}));
+(0, fixtures_1.test)("Themed H1 regression", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+    yield initTestBed(`
+    <App>
+      <Theme textColor-H1="rgb(255, 0, 0)" textColor-H2="rgb(0, 255, 0)">
+          <H1 testId="red">Should be red</H1>
+          <H2 testId="green">Should be green</H2>
+      </Theme>
+    </App>
+  `);
+    const { color: h1Color } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("red"), "color");
+    const { color: h2Color } = yield (0, component_test_helpers_1.getStyles)(page.getByTestId("green"), "color");
+    (0, fixtures_1.expect)(h1Color).toBe("rgb(255, 0, 0)");
+    (0, fixtures_1.expect)(h2Color).toBe("rgb(0, 255, 0)");
+}));