@cimpress/react-components
Version:
React components to support the MCP styleguide
271 lines (265 loc) • 10.4 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("./theme/cvar"));
const colors = __importStar(require("./colors"));
const secondaryColorStyles = {
primary: (0, css_1.css) `
--crc-button-bg: ${(0, cvar_1.default)('color-button-default')};
--crc-button-fg: ${(0, cvar_1.default)('color-button-primary')};
--crc-button-border: ${(0, cvar_1.default)('color-button-primary')};
--crc-button-bg-hover: ${(0, cvar_1.default)('color-button-secondary-hover')};
--crc-button-bg-active: ${(0, cvar_1.default)('color-button-secondary-active')};
`,
danger: (0, css_1.css) `
--crc-button-bg: ${colors.white};
--crc-button-fg: ${colors.danger.base};
--crc-button-border: ${colors.danger.base};
--crc-button-fg-hover: ${colors.white};
--crc-button-bg-hover: ${colors.danger.darker};
--crc-button-border-hover: ${colors.danger.darker};
--crc-button-fg-active: ${colors.white};
--crc-button-bg-active: ${colors.danger.darkest};
--crc-button-border-active: ${colors.danger.darkest};
`,
};
const colorStyles = {
default: secondaryColorStyles,
primary: {
primary: (0, css_1.css) `
--crc-button-bg: ${(0, cvar_1.default)('color-interactive')};
--crc-button-fg: ${(0, cvar_1.default)('color-text-inverse')};
--crc-button-border: ${(0, cvar_1.default)('color-interactive')};
--crc-button-bg-hover: ${(0, cvar_1.default)('color-button-primary-hover')};
--crc-button-border-hover: ${(0, cvar_1.default)('color-button-primary-hover')};
--crc-button-bg-active: ${(0, cvar_1.default)('color-button-primary-active')};
--crc-button-border-active: ${(0, cvar_1.default)('color-button-primary-active')};
`,
danger: (0, css_1.css) `
--crc-button-bg: ${colors.danger.base};
--crc-button-fg: ${colors.white};
--crc-button-border: ${colors.danger.base};
--crc-button-bg-hover: ${colors.danger.darker};
--crc-button-border-hover: ${colors.danger.darker};
--crc-button-bg-active: ${colors.danger.darkest};
--crc-button-border-active: ${colors.danger.darkest};
`,
},
secondary: secondaryColorStyles,
link: {
primary: (0, css_1.css) `
--crc-button-bg: transparent;
--crc-button-fg: ${colors.ocean.base};
--crc-button-bg-hover: ${(0, cvar_1.default)('color-button-secondary-hover')};
--crc-button-bg-active: ${(0, cvar_1.default)('color-button-secondary-active')};
`,
danger: (0, css_1.css) `
--crc-button-bg: transparent;
--crc-button-fg: ${colors.danger.base};
--crc-button-fg-hover: ${colors.white};
--crc-button-bg-hover: ${colors.danger.darker};
--crc-button-border-hover: ${colors.danger.darker};
--crc-button-fg-active: ${colors.white};
--crc-button-bg-active: ${colors.danger.darkest};
--crc-button-border-active: ${colors.danger.darkest};
`,
},
anchor: {
primary: (0, css_1.css) `
--crc-button-bg: transparent;
--crc-button-fg: ${colors.ocean.base};
`,
danger: (0, css_1.css) `
--crc-button-bg: transparent;
--crc-button-fg: ${colors.danger.base};
`,
},
};
const baseButtonStyles = (0, css_1.css) `
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
border: 1px solid var(--crc-button-border, transparent);
color: var(--crc-button-fg);
background: var(--crc-button-bg);
&:hover {
color: var(--crc-button-fg-hover, var(--crc-button-fg));
background: var(--crc-button-bg-hover, var(--crc-button-bg));
border-color: var(--crc-button-border-hover, var(--crc-button-border));
color: var(--crc-button-fg-hover, var(--crc-button-fg));
}
&:active {
color: var(--crc-button-fg-active, var(--crc-button-fg));
background: var(--crc-button-bg-active, var(--crc-button-bg));
border-color: var(--crc-button-border-active, var(--crc-button-border));
color: var(--crc-button-fg-active, var(--crc-button-fg));
}
`;
const linkButtonStyle = (0, css_1.css) `
border-color: transparent;
background: transparent;
text-decoration: none;
text-shadow: none;
&:hover,
&:active {
border-color: transparent;
text-decoration: none;
}
`;
const anchorStyle = (0, css_1.css) `
border-color: transparent;
background: transparent;
font-weight: 400;
&:hover,
&:active {
background: transparent;
border-color: transparent;
text-decoration: underline;
}
`;
const disabledAnchorStyle = (0, css_1.css) `
color: ${(0, cvar_1.default)('color-text-disabled-dark')};
cursor: not-allowed;
&:hover,
&:active {
color: ${(0, cvar_1.default)('color-text-disabled-dark')};
}
`;
const disabledButtonStyle = (0, css_1.css) `
background: ${(0, cvar_1.default)('color-button-disabled')};
opacity: 0.65;
color: ${(0, cvar_1.default)('color-text-disabled-dark')};
border-color: transparent;
cursor: not-allowed;
&:hover {
background: ${(0, cvar_1.default)('color-button-disabled')};
opacity: 0.65;
color: ${(0, cvar_1.default)('color-text-disabled-dark')};
border-color: transparent;
cursor: not-allowed;
}
`;
const blockLevelButtonStyle = (0, css_1.css) `
width: 100%;
display: block;
`;
const btnIconSizeCss = (size) => {
if (size === 'lg')
return (0, css_1.css) `
padding: ${(0, cvar_1.default)('spacing-16')};
`;
if (size === 'sm')
return (0, css_1.css) `
padding: ${(0, cvar_1.default)('spacing-8')};
`;
return (0, css_1.css) `
padding: ${(0, cvar_1.default)('spacing-12')};
`;
};
const btnSizeCss = (size) => {
if (size === 'lg')
return (0, css_1.css) `
padding: ${(0, cvar_1.default)('spacing-12')} ${(0, cvar_1.default)('spacing-32')};
`;
if (size === 'sm')
return (0, css_1.css) `
padding: ${(0, cvar_1.default)('spacing-4')} ${(0, cvar_1.default)('spacing-12')};
`;
return (0, css_1.css) `
padding: ${(0, cvar_1.default)('spacing-8')} ${(0, cvar_1.default)('spacing-24')};
`;
};
const btnFontCss = (size) => {
if (size === 'lg')
return (0, css_1.css) `
font: ${(0, cvar_1.default)('text-button-large')};
`;
if (size === 'sm')
return (0, css_1.css) `
font: ${(0, cvar_1.default)('text-button-small')};
`;
return (0, css_1.css) `
font: ${(0, cvar_1.default)('text-button-medium')};
`;
};
const buttonClassTypes = (variant) => {
switch (variant) {
case 'link':
return linkButtonStyle;
case 'anchor':
return anchorStyle;
default:
return baseButtonStyles;
}
};
const disabledButtonClassTypes = (variant) => {
switch (variant) {
case 'anchor':
return `${anchorStyle} ${disabledAnchorStyle}`;
default:
return disabledButtonStyle;
}
};
const aTag = (_a) => {
var { children, icon, className } = _a, rest = __rest(_a, ["children", "icon", "className"]);
return (react_1.default.createElement("a", Object.assign({}, rest, { className: (0, css_1.cx)('crc-button crc-button-anchor crc-anchor', className) }), icon || children));
};
const buttonTag = (_a) => {
var { children, icon, className, type } = _a, rest = __rest(_a, ["children", "icon", "className", "type"]);
return (react_1.default.createElement("button", Object.assign({}, rest, { className: (0, css_1.cx)('crc-button', className), type: type }), icon || children));
};
const Button = (_a) => {
var _b;
var { blockLevel = false, className, disabled = false, icon: originalIcon, onClick, size = 'default', variant = 'default', color = 'primary' } = _a, rest = __rest(_a, ["blockLevel", "className", "disabled", "icon", "onClick", "size", "variant", "color"]);
const icon = originalIcon &&
react_1.default.cloneElement(originalIcon, {
style: { display: 'block' },
});
const variantCss = (0, css_1.cx)((_b = colorStyles[variant]) === null || _b === void 0 ? void 0 : _b[color], btnFontCss(size), baseButtonStyles, disabled ? disabledButtonClassTypes(variant) : buttonClassTypes(variant), variant === 'anchor' ? '' : icon ? btnIconSizeCss(size) : btnSizeCss(size), { [blockLevelButtonStyle]: blockLevel }, className);
return 'href' in rest && rest.href != null
? aTag(Object.assign({ icon, disabled, size, onClick, className: variantCss }, rest))
: buttonTag(Object.assign({ disabled, icon, size, onClick, className: variantCss }, rest));
};
exports.Button = Button;
//# sourceMappingURL=Button.js.map