@braineet/ui
Version:
Braineet design system
129 lines (128 loc) • 5.83 kB
JavaScript
;
exports.__esModule = true;
exports.appareances = exports.Wrapper = exports.Wrap = exports.Title = exports.StyledIcon = exports.Description = exports.Cross = exports.ActionWrapper = exports.ActionButton = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _styledSystem = require("styled-system");
var _box = _interopRequireDefault(require("../box"));
var _button = _interopRequireDefault(require("../button"));
var _heading = _interopRequireDefault(require("../heading"));
var _icon = _interopRequireDefault(require("../icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var appareances = function appareances(color, theme) {
var v = {
default: theme.colors.black50,
action: theme.colors.action,
error: theme.colors.error,
success: theme.colors.success,
warning: theme.colors.warning
};
if (!v[color]) return color;
return v[color];
};
exports.appareances = appareances;
var Wrapper = (0, _styledComponents.default)(_box.default).withConfig({
displayName: "styles__Wrapper",
componentId: "sc-yqr45k-0"
})(["display:flex;justify-content:space-between;width:100%;width:320px;min-height:50px;height:100%;align-items:stretch;background:#ffffff;box-shadow:0px 8px 16px -8px rgba(42,45,74,0.32);border-radius:4px;", " ", ";"], (0, _styledSystem.variant)({
variants: {
default: {
padding: '0.5rem',
cursor: 'pointer'
},
actions: {
cursor: 'default',
padding: 0
}
}
}), function (p) {
return p.appareance !== 'default' && (0, _styledComponents.css)(["&:before{content:'';position:absolute;left:0;top:0;bottom:0;height:100%;width:4px;background:", ";border-radius:4px 0 0 4px;}"], appareances(p.appareance, p.theme));
});
exports.Wrapper = Wrapper;
var Wrap = _styledComponents.default.div.withConfig({
displayName: "styles__Wrap",
componentId: "sc-yqr45k-1"
})(["display:flex;flex-direction:column;line-height:1em;padding:4px;"]);
exports.Wrap = Wrap;
var Title = (0, _styledComponents.default)(_heading.default).attrs(function () {
return {
size: 'xs'
};
}).withConfig({
displayName: "styles__Title",
componentId: "sc-yqr45k-2"
})(["color:", ";", ""], function (p) {
return p.theme.colors.black50;
}, (0, _styledSystem.variant)({
variants: {
default: {},
actions: {
display: '-webkit-box',
'-webkit-line-clamp': '1',
'-webkit-box-orient': 'vertical',
overflow: 'hidden',
maxHeight: '40px'
}
}
}));
exports.Title = Title;
var Description = _styledComponents.default.div.withConfig({
displayName: "styles__Description",
componentId: "sc-yqr45k-3"
})(["color:", ";font-size:12px;", ""], function (p) {
return p.theme.colors.black50;
}, (0, _styledSystem.variant)({
variants: {
default: {},
actions: {
display: '-webkit-box',
'-webkit-line-clamp': '1',
'-webkit-box-orient': 'vertical',
overflow: 'hidden',
maxHeight: '1rem'
}
}
}));
exports.Description = Description;
var StyledIcon = (0, _styledComponents.default)(_icon.default).withConfig({
displayName: "styles__StyledIcon",
componentId: "sc-yqr45k-4"
})(["color:", ";margin:8px 12px 8px 4px;flex-shrink:0;", " ", ""], function (p) {
return appareances(p.appareance, p.theme);
}, _styledSystem.position, (0, _styledSystem.variant)({
variants: {
default: {},
actions: {
marginLeft: '0.5rem'
}
}
}));
exports.StyledIcon = StyledIcon;
var ActionWrapper = _styledComponents.default.div.withConfig({
displayName: "styles__ActionWrapper",
componentId: "sc-yqr45k-5"
})(["display:flex;flex-direction:", ";border-left:1px solid rgba(71,82,133,0.1);align-items:stretch;"], function (p) {
return p.nbActions === 1 ? 'row' : 'column';
});
exports.ActionWrapper = ActionWrapper;
var ActionButton = (0, _styledComponents.default)(_button.default).withConfig({
displayName: "styles__ActionButton",
componentId: "sc-yqr45k-6"
})(["font-size:12px;background:", ";border-radius:0 0 4px 0;box-shadow:none;", ""], function (p) {
return p.styleType === 'ghost' && 'transparent';
}, function (p) {
return p.isAlone ? (0, _styledComponents.css)(["border-radius:0 4px 4px 0;"]) : (0, _styledComponents.css)(["&:first-child{border-radius:0 4px 0 0;border-bottom:1px solid rgba(71,82,133,0.1);}"]);
});
exports.ActionButton = ActionButton;
var Cross = (0, _styledComponents.default)(_button.default).attrs(function () {
return {
styleType: 'ghost',
icon: 'cross',
color: 'black'
};
}).withConfig({
displayName: "styles__Cross",
componentId: "sc-yqr45k-7"
})(["align-self:center;"]);
exports.Cross = Cross;