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