braid-design-system
Version:
Themeable design system for the SEEK Group
73 lines (72 loc) • 3.31 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
const lib_components_Box_BackgroundContext_cjs = require("../../Box/BackgroundContext.cjs");
const lib_components_Text_TextContext_cjs = require("../../Text/TextContext.cjs");
const lib_components_private_Placeholder_Placeholder_css_cjs = require("./Placeholder.css.cjs");
const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const lib_themes_wireframe_wireframeTheme_css_cjs = require("../../../themes/wireframe/wireframeTheme.css.cjs");
const lib_components_Text_Text_cjs = require("../../Text/Text.cjs");
const resolveToPxIfUnitless = (value) => typeof value === "string" && /[0-9]$/.test(value) ? `${value}px` : value;
const PlaceholderContent = ({
label,
image
}) => {
if (image) {
return null;
}
if (label) {
return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.PublicBox, { paddingX: "xsmall", paddingY: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { size: "small", weight: "strong", align: "center", baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.PublicBox, { className: lib_components_private_Placeholder_Placeholder_css_cjs.label, children: label }) }) });
}
return /* @__PURE__ */ jsxRuntime.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
className: lib_css_atoms_atoms_cjs.atoms({
reset: "svg",
position: "absolute",
width: "full",
height: "full"
}),
children: [
/* @__PURE__ */ jsxRuntime.jsx("line", { className: lib_components_private_Placeholder_Placeholder_css_cjs.line, x1: 0, y1: 0, x2: "100%", y2: "100%" }),
/* @__PURE__ */ jsxRuntime.jsx("line", { className: lib_components_private_Placeholder_Placeholder_css_cjs.line, x1: "100%", y1: 0, x2: 0, y2: "100%" })
]
}
);
};
const Placeholder = ({
label,
width = "auto",
height = 120,
shape = "rectangle",
image,
imageSize = "cover"
}) => {
const lightness = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
return /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.PublicBox,
{
position: "relative",
overflow: "hidden",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: shape === "round" ? "full" : void 0,
className: [
lib_themes_wireframe_wireframeTheme_css_cjs.wireframe.vanillaTheme,
lib_components_private_Placeholder_Placeholder_css_cjs.lightTheme[lightness.lightMode],
lib_components_private_Placeholder_Placeholder_css_cjs.darkTheme[lightness.darkMode],
!image ? lib_components_private_Placeholder_Placeholder_css_cjs.box : void 0
],
style: {
width: resolveToPxIfUnitless(width),
height: resolveToPxIfUnitless(height),
background: image ? `url(${image}) no-repeat center center` : void 0,
backgroundSize: imageSize
},
children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_TextContext_cjs.TextContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderContent, { label, image }) })
}
);
};
exports.Placeholder = Placeholder;