@octopusdeploy/design-system-components
Version:
The design systems component library.
79 lines (78 loc) • 2.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BeaconBase = BeaconBase;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
function BeaconBase({ size = "medium", ripple = 0.75, onClick, accessibleName }) {
const outerRingKeyframes = createOuterRingKeyframes(ripple);
const onBeaconClicked = () => {
onClick?.();
};
return ((0, jsx_runtime_1.jsxs)("button", { onClick: onBeaconClicked, "aria-label": accessibleName, className: (0, css_1.cx)(beaconStyles.container, sizeStyles.container[size]), children: [(0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(beaconStyles.beaconInner, sizeStyles.beaconInner[size]) }), (0, jsx_runtime_1.jsx)("span", { className: beaconStyles.beaconOuter, style: {
animation: `${outerRingKeyframes} 1.2s ease-in-out infinite`,
} })] }));
}
const createOuterRingKeyframes = (ripple) => (0, css_1.keyframes)({
"0%": {
transform: "scale(1)",
},
"45%": {
transform: `scale(${ripple})`,
},
"100%": {
transform: "scale(1)",
},
});
const beaconStyles = {
container: (0, css_1.css)({
position: "relative",
cursor: "pointer",
background: "none",
border: "none",
}),
beaconInner: (0, css_1.css)({
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
display: "block",
borderRadius: design_system_tokens_1.borderRadius.circle,
backgroundColor: design_system_tokens_1.themeTokens.color.icon.info,
}),
beaconOuter: (0, css_1.css)({
position: "absolute",
width: "100%",
height: "100%",
left: "0",
top: "0",
display: "block",
borderRadius: design_system_tokens_1.borderRadius.circle,
border: `2px solid ${design_system_tokens_1.themeTokens.color.icon.info}`,
backgroundColor: design_system_tokens_1.themeTokens.color.button.background.tertiary.pressed,
transformOrigin: "center center",
boxSizing: "border-box",
}),
};
const sizeStyles = {
container: {
small: (0, css_1.css)({
width: 20,
height: 20,
}),
medium: (0, css_1.css)({
width: 32,
height: 32,
}),
},
beaconInner: {
small: (0, css_1.css)({
width: 10,
height: 10,
}),
medium: (0, css_1.css)({
width: 14,
height: 14,
}),
},
};