@octopusdeploy/design-system-components
Version:
The design systems component library.
173 lines (172 loc) • 6.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LegacyCard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const LegacyCard = (props) => {
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(styles.container, {
[styles.disabled]: props.isDisabled,
[styles.cardLeft]: props.leftAlign,
[styles.containerMargin]: props.disableMargin !== true,
}, props.className), onClick: props.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: styles.link, children: props.link }), (0, jsx_runtime_1.jsx)("div", { className: props.leftAlign ? styles.contentLeft : undefined, children: props.logo }), (0, jsx_runtime_1.jsx)("div", { className: !props.logo ? styles.headerNoLogo : (0, css_1.cx)(styles.header, { [styles.headerLeft]: props.leftAlign }), children: props.header }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(styles.content, { [styles.contentLeft]: props.leftAlign }, props.contentClassName), children: props.content }), props.onHoverView && (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(styles.hoverView, hoverViewClassName), children: props.onHoverView })] }));
};
exports.LegacyCard = LegacyCard;
const hoverViewClassName = "hoverView";
const cardWidth = "12.75rem";
const cardPadding = design_system_tokens_1.space[16];
const styles = {
container: (0, css_1.css)({
width: `calc(${cardWidth} - ${cardPadding})`,
padding: `${cardPadding} ${cardPadding} 0 ${cardPadding}`,
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
flex: "0 1 auto",
boxShadow: design_system_tokens_1.themeTokens.shadow.small,
borderRadius: design_system_tokens_1.borderRadius.large,
overflow: "hidden",
color: design_system_tokens_1.themeTokens.color.text.primary,
textDecoration: "none",
backgroundColor: design_system_tokens_1.themeTokens.color.portal.card.background,
transitionProperty: "background-color, box-shadow",
transitionDuration: "0.1s",
transitionTimingFunction: "ease-in",
"&:active, &:visited": {
color: design_system_tokens_1.themeTokens.color.text.primary,
textDecoration: "none",
},
"&:hover, &:focus-within": {
boxShadow: design_system_tokens_1.themeTokens.shadow.large,
color: design_system_tokens_1.themeTokens.color.text.primary,
[`.${hoverViewClassName}`]: {
opacity: 1,
pointerEvents: "auto",
},
},
"&:focus-within": {
border: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.colorScales.white}`,
},
/* Force clean hover state reset - this ensures stuck hover states are cleared */
":not(:hover)": {
/* Reset container hover styles */
boxShadow: design_system_tokens_1.themeTokens.shadow.small,
backgroundColor: design_system_tokens_1.themeTokens.color.portal.card.background,
[`.${hoverViewClassName}`]: {
opacity: 0,
pointerEvents: "none",
},
},
"@media (max-width: 37.4rem)": {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "stretch",
padding: `calc(${cardPadding} - 0.5rem)`,
height: "auto",
width: "100%",
},
}),
containerMargin: (0, css_1.css)({
margin: "0.8rem",
"@media (max-width: 37.4rem)": {
margin: "0.8rem 0",
},
}),
hoverView: (0, css_1.css)({
position: "absolute",
flexDirection: "column",
bottom: 0,
left: 0,
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center",
opacity: 0,
transition: "opacity 0.1s ease-in",
/* Ensure clean hover state transitions */
pointerEvents: "none",
}),
header: (0, css_1.css)({
maxWidth: `calc(${cardWidth} - ${cardPadding} * 0.5)`,
fontSize: "1.0625rem",
marginTop: design_system_tokens_1.space[16],
textAlign: "center",
color: design_system_tokens_1.themeTokens.color.text.primary,
fontWeight: 400,
wordWrap: "break-word",
wordBreak: "break-word",
"@media (max-width: 37.4rem)": {
marginTop: "auto",
marginBottom: "auto",
maxWidth: "none",
flex: "1 1 auto",
textAlign: "left",
},
}),
headerNoLogo: (0, css_1.css)({
marginTop: 0,
}),
link: (0, css_1.css)({
"& > a": {
position: "absolute",
display: "flex",
flexDirection: "column",
bottom: 0,
left: 0,
height: "100%",
width: "100%",
zIndex: 1,
},
}),
disabled: (0, css_1.css)({
"& *": {
color: design_system_tokens_1.themeTokens.color.portal.card.content.disabled,
},
}),
content: (0, css_1.css)({
textAlign: "center",
maxWidth: `calc(${cardWidth} - ${cardPadding} * 0.5)`,
color: design_system_tokens_1.themeTokens.color.portal.card.content.text,
fontSize: "0.8125rem",
fontWeight: 300,
lineHeight: "1rem",
maxHeight: "4.5rem",
marginBottom: design_system_tokens_1.space[16],
height: "100%",
//This will all need to go/change when real markdown content is added
position: "relative",
overflow: "hidden",
textOverflow: "ellipsis",
wordWrap: "break-word",
p: {
margin: `${design_system_tokens_1.space[8]} 0`, // This helps us get descriptions that line up nicely with 4 lines of text.
},
"@media (max-width: 37.4rem)": {
display: "none",
},
}),
cardLeft: (0, css_1.css)({
minWidth: "20rem",
maxWidth: "30rem",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
alignContent: "flex-start",
}),
headerLeft: (0, css_1.css)({
marginTop: "9px",
textAlign: "left",
width: "100%",
alignSelf: "flex-start",
maxWidth: "100%",
}),
contentLeft: (0, css_1.css)({
textAlign: "left",
width: "100%",
alignSelf: "flex-start",
maxWidth: "100%",
marginTop: 0,
}),
};