@cimpress/react-components
Version:
React components to support the MCP styleguide
241 lines (235 loc) • 8.29 kB
JavaScript
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;
};
import React from 'react';
import { cx, css } from '@emotion/css';
import cvar from './theme/cvar';
import * as colors from './colors';
const secondaryColorStyles = {
primary: css `
--crc-button-bg: ${cvar('color-button-default')};
--crc-button-fg: ${cvar('color-button-primary')};
--crc-button-border: ${cvar('color-button-primary')};
--crc-button-bg-hover: ${cvar('color-button-secondary-hover')};
--crc-button-bg-active: ${cvar('color-button-secondary-active')};
`,
danger: 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: css `
--crc-button-bg: ${cvar('color-interactive')};
--crc-button-fg: ${cvar('color-text-inverse')};
--crc-button-border: ${cvar('color-interactive')};
--crc-button-bg-hover: ${cvar('color-button-primary-hover')};
--crc-button-border-hover: ${cvar('color-button-primary-hover')};
--crc-button-bg-active: ${cvar('color-button-primary-active')};
--crc-button-border-active: ${cvar('color-button-primary-active')};
`,
danger: 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: css `
--crc-button-bg: transparent;
--crc-button-fg: ${colors.ocean.base};
--crc-button-bg-hover: ${cvar('color-button-secondary-hover')};
--crc-button-bg-active: ${cvar('color-button-secondary-active')};
`,
danger: 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: css `
--crc-button-bg: transparent;
--crc-button-fg: ${colors.ocean.base};
`,
danger: css `
--crc-button-bg: transparent;
--crc-button-fg: ${colors.danger.base};
`,
},
};
const baseButtonStyles = 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 = css `
border-color: transparent;
background: transparent;
text-decoration: none;
text-shadow: none;
&:hover,
&:active {
border-color: transparent;
text-decoration: none;
}
`;
const anchorStyle = css `
border-color: transparent;
background: transparent;
font-weight: 400;
&:hover,
&:active {
background: transparent;
border-color: transparent;
text-decoration: underline;
}
`;
const disabledAnchorStyle = css `
color: ${cvar('color-text-disabled-dark')};
cursor: not-allowed;
&:hover,
&:active {
color: ${cvar('color-text-disabled-dark')};
}
`;
const disabledButtonStyle = css `
background: ${cvar('color-button-disabled')};
opacity: 0.65;
color: ${cvar('color-text-disabled-dark')};
border-color: transparent;
cursor: not-allowed;
&:hover {
background: ${cvar('color-button-disabled')};
opacity: 0.65;
color: ${cvar('color-text-disabled-dark')};
border-color: transparent;
cursor: not-allowed;
}
`;
const blockLevelButtonStyle = css `
width: 100%;
display: block;
`;
const btnIconSizeCss = (size) => {
if (size === 'lg')
return css `
padding: ${cvar('spacing-16')};
`;
if (size === 'sm')
return css `
padding: ${cvar('spacing-8')};
`;
return css `
padding: ${cvar('spacing-12')};
`;
};
const btnSizeCss = (size) => {
if (size === 'lg')
return css `
padding: ${cvar('spacing-12')} ${cvar('spacing-32')};
`;
if (size === 'sm')
return css `
padding: ${cvar('spacing-4')} ${cvar('spacing-12')};
`;
return css `
padding: ${cvar('spacing-8')} ${cvar('spacing-24')};
`;
};
const btnFontCss = (size) => {
if (size === 'lg')
return css `
font: ${cvar('text-button-large')};
`;
if (size === 'sm')
return css `
font: ${cvar('text-button-small')};
`;
return css `
font: ${cvar('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.createElement("a", Object.assign({}, rest, { className: 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.createElement("button", Object.assign({}, rest, { className: cx('crc-button', className), type: type }), icon || children));
};
export 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.cloneElement(originalIcon, {
style: { display: 'block' },
});
const variantCss = 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));
};
//# sourceMappingURL=Button.js.map