braid-design-system
Version:
Themeable design system for the SEEK Group
69 lines (68 loc) • 2.97 kB
JavaScript
;
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const lib_playroom_playroomState_cjs = require("./playroomState.cjs");
const lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
const lib_components_BraidProvider_BraidProvider_cjs = require("../components/BraidProvider/BraidProvider.cjs");
const lib_components_useToast_ToastContext_cjs = require("../components/useToast/ToastContext.cjs");
const lib_components_useResponsiveValue_useResponsiveValue_cjs = require("../components/useResponsiveValue/useResponsiveValue.cjs");
const PlayroomLink = lib_components_BraidProvider_BraidProvider_cjs.makeLinkComponent(
({ href, onClick, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
"a",
{
ref,
href: href ?? "#",
onClick: (e) => {
if (!href) {
e.preventDefault();
}
if (onClick) {
onClick(e);
}
},
...restProps
}
)
);
const ResponsiveReady = ({ children }) => {
const responsiveReady = lib_components_useResponsiveValue_useResponsiveValue_cjs.useResponsiveValue()({ mobile: true }) ?? false;
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: responsiveReady ? children : null });
};
const FrameComponent = ({ theme, children }) => {
react.useEffect(() => {
let code = "";
const darkTrigger = "braiddark";
const lightTrigger = "braidlight";
const longestTrigger = Math.max(lightTrigger.length, darkTrigger.length);
const colorModeToggle = (ev) => {
code += ev.key;
if (code.substr(code.length - darkTrigger.length) === darkTrigger) {
document.documentElement.classList.add(lib_css_atoms_sprinkles_css_cjs.darkMode);
code = "";
}
if (code.substr(code.length - lightTrigger.length) === lightTrigger) {
document.documentElement.classList.remove(lib_css_atoms_sprinkles_css_cjs.darkMode);
code = "";
}
if (code.length > longestTrigger) {
code = code.substr(code.length - longestTrigger);
}
};
window.addEventListener("keydown", colorModeToggle);
return () => {
window.removeEventListener("keydown", colorModeToggle);
};
}, []);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
"div",
{
dangerouslySetInnerHTML: {
__html: theme.webFonts.map((font) => font.linkTag).join("")
}
}
),
/* @__PURE__ */ jsxRuntime.jsx(lib_playroom_playroomState_cjs.PlayroomStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidProvider_BraidProvider_cjs.BraidProvider, { theme, linkComponent: PlayroomLink, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_useToast_ToastContext_cjs.ToastProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ResponsiveReady, { children }) }) }) })
] });
};
exports.FrameComponent = FrameComponent;