@unstoppabledomains/ui-kit
Version:
A set of common Unstoppable Domains components
189 lines (188 loc) • 8.56 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _styles = require("../../styles");
var _excluded = ["padding", "iconFontSize", "headingFontSize", "borderRadius"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getStylesBySeverityAndVariant = function getStylesBySeverityAndVariant(theme) {
return {
warning: {
standard: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.warningShades[200],
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.warningShades[300],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.warningShades[600]
},
filled: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.warningShades[600],
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.warningShades[600],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.white
},
outlined: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.white,
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.warningShades[600],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.warningShades[600]
}
},
error: {
standard: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.dangerShades[50],
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.dangerShades[75],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.dangerShades[600]
},
filled: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.dangerShades[600],
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.dangerShades[600],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.white
},
outlined: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.white,
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.dangerShades[600],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.dangerShades[600]
}
},
success: {
standard: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.successShades[300],
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.successShades[400],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.successShades[600]
},
filled: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.successShades[600],
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.successShades[600],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.white
},
outlined: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.white,
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.successShades[600],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.successShades[600]
}
},
info: {
standard: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralShades[75],
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralShades[150],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralShades[600]
},
filled: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.primary.main,
borderColor: '#0A5FEA',
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.white
},
outlined: {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.palette.white,
borderColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralShades[600],
iconColor: theme === null || theme === void 0 ? void 0 : theme.palette.neutralShades[600]
}
}
};
};
var getStylesBySize = function getStylesBySize(theme) {
return {
small: {
padding: theme.spacing(1.125, 2),
iconFontSize: '1rem',
headingFontSize: '0.875rem',
borderRadius: theme.shape.borderRadius
},
medium: {
padding: theme.spacing(1.75, 3),
iconFontSize: '1.25rem',
headingFontSize: '1rem',
borderRadius: theme.shape.borderRadius
},
large: {
padding: theme.spacing(1.5, 0),
iconFontSize: '1.25rem',
headingFontSize: '1rem',
borderRadius: 0,
borderLeft: 'none',
borderRight: 'none'
}
};
};
var useStyles = exports.useStyles = (0, _styles.makeStyles)()(function (theme, _ref) {
var severity = _ref.severity,
variant = _ref.variant,
size = _ref.size,
hasAction = _ref.hasAction;
var _getStylesBySeverityA = getStylesBySeverityAndVariant(theme)[severity][variant],
backgroundColor = _getStylesBySeverityA.backgroundColor,
borderColor = _getStylesBySeverityA.borderColor,
iconColor = _getStylesBySeverityA.iconColor;
var _getStylesBySize$size = getStylesBySize(theme)[size],
padding = _getStylesBySize$size.padding,
iconFontSize = _getStylesBySize$size.iconFontSize,
headingFontSize = _getStylesBySize$size.headingFontSize,
borderRadius = _getStylesBySize$size.borderRadius,
rest = (0, _objectWithoutProperties2["default"])(_getStylesBySize$size, _excluded);
return {
root: _objectSpread(_objectSpread(_objectSpread({
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}, size === 'large' && {
justifyContent: 'center'
}), {}, {
width: '100%',
padding: padding,
borderRadius: borderRadius,
borderWidth: 1,
borderStyle: 'solid',
boxSizing: 'border-box',
borderColor: borderColor,
backgroundColor: backgroundColor
}, rest), {}, {
'& .MuiAlert-icon': {
color: iconColor
}
}),
message: {
padding: 0,
marginLeft: theme.spacing(2.25)
},
heading: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
lineHeight: theme.spacing(size === 'small' ? 2.5 : 3),
fontWeight: theme.typography.fontWeightMedium,
color: variant === 'filled' ? theme.palette.white : theme.palette.greyShades[900],
marginTop: 0,
marginRight: theme.spacing(hasAction ? 2.25 : 0),
fontSize: headingFontSize
}),
// Ensuring the type compatibility "typography.body2" from @mui with "CSSObject"
body: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
lineHeight: '1.25rem',
color: theme.palette.greyShades[variant === 'filled' ? 50 : 600],
marginRight: theme.spacing(hasAction ? 2.25 : 0)
}),
// Ensuring the type compatibility "typography.body2" from @mui with "CSSObject"
icon: {
padding: 0,
opacity: 1,
fontSize: 16,
marginRight: 0,
'.MuiSvgIcon-root': {
fontSize: iconFontSize
}
},
action: {
padding: 0,
marginRight: theme.spacing(0),
marginLeft: size === 'large' ? 0 : 'auto',
'.MuiSvgIcon-root': {
fontSize: iconFontSize,
color: iconColor
}
},
closeAction: {
marginRight: theme.spacing(-1),
marginTop: theme.spacing(-0.5),
marginBottom: theme.spacing(-0.5)
}
};
});