@braineet/ui
Version:
Braineet design system
76 lines (75 loc) • 3.18 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.StyledText = exports.StyledImg = exports.StyledIcon = exports.StyledCircle = exports.StyledAvatarBadge = exports.StyledAvatar = exports.ColorBadge = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _styledSystem = require("styled-system");
var _utils = require("../../utils");
var _box = _interopRequireDefault(require("../box"));
var _icon = _interopRequireDefault(require("../icon"));
var _text = _interopRequireDefault(require("../text"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var getSize = function getSize(props) {
var sizeItem = {
xxs: (0, _utils.fluid)(16),
xs: (0, _utils.fluid)(24),
sm: (0, _utils.fluid)(32),
md: (0, _utils.fluid)(40),
lg: (0, _utils.fluid)(80)
};
var size = sizeItem[props.sizeItem];
return {
width: size,
height: size,
minWidth: size
};
};
var getSizeAvatarBadge = function getSizeAvatarBadge() {
var size = (0, _utils.fluid)(14);
return {
width: size,
height: size,
minWidth: size
};
};
var StyledAvatar = exports.StyledAvatar = (0, _styledComponents.default)(_box.default).withConfig({
displayName: "styles__StyledAvatar",
componentId: "sc-1d8topx-0"
})(["position:relative;display:inline-block;background-color:white;box-shadow:", ";", " ", ""], function (props) {
return (0, _utils.border)(["0px 0px 0px 1px " + props.theme.utils.lighten('black', 0.1) + " inset"]);
}, getSize, (0, _styledSystem.variant)({
prop: 'variant',
variants: {
circle: {
borderRadius: '50%'
},
square: {
borderRadius: '8px'
}
}
}));
var StyledText = exports.StyledText = (0, _styledComponents.default)(_text.default).withConfig({
displayName: "styles__StyledText",
componentId: "sc-1d8topx-1"
})(["display:flex;align-items:center;justify-content:center;border-radius:inherit;", ""], getSize);
var StyledImg = exports.StyledImg = _styledComponents.default.img.withConfig({
displayName: "styles__StyledImg",
componentId: "sc-1d8topx-2"
})(["object-fit:cover;width:100%;height:100%;display:block;"]);
var StyledAvatarBadge = exports.StyledAvatarBadge = (0, _styledComponents.default)(_box.default).withConfig({
displayName: "styles__StyledAvatarBadge",
componentId: "sc-1d8topx-3"
})(["position:absolute;border-radius:50%;bottom:0;right:0;", ""], getSizeAvatarBadge);
var StyledCircle = exports.StyledCircle = (0, _styledComponents.default)(_box.default).withConfig({
displayName: "styles__StyledCircle",
componentId: "sc-1d8topx-4"
})(["display:flex;align-items:center;justify-content:center;background-color:", ";", " border-radius:50%;"], function (props) {
return props.backgroundColor;
}, getSizeAvatarBadge);
var StyledIcon = exports.StyledIcon = (0, _styledComponents.default)(_icon.default).withConfig({
displayName: "styles__StyledIcon",
componentId: "sc-1d8topx-5"
})([""]);
var ColorBadge = exports.ColorBadge = (0, _styledComponents.default)(_box.default).withConfig({
displayName: "styles__ColorBadge",
componentId: "sc-1d8topx-6"
})(["display:block;border-radius:50%;width:8px;height:8px;"]);