@kalamazoo/profilecard
Version:
A React component to display a card with user information.
50 lines • 9.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
var theme_1 = require("@kalamazoo/theme");
var constants_1 = require("../styled/constants");
var getFullNameMargin = function (props) {
return props.noMeta
? theme_1.gridSize() * 4.5 + "px 0 " + theme_1.gridSize() * 1.5 + "px 0"
: theme_1.gridSize() * 1.5 + "px 0 0 0";
};
exports.CardContainerEmpty = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
exports.CardTriggerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n display: inherit;\n"], ["\n display: inherit;\n"])));
exports.CardElevationWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n background-color: ", ";\n border-radius: ", "px;\n ", ";\n width: ", "px;\n"], ["\n background-color: ", ";\n border-radius: ", "px;\n ",
";\n width: ", "px;\n"])), constants_1.bgColor, theme_1.borderRadius, function (props) {
if (props.customElevation === 'none') {
return '';
}
if (typeof props.customElevation === 'string') {
return theme_1.elevation[props.customElevation];
}
// If customElevation is undefined it will default to this.
return theme_1.elevation.e200;
}, theme_1.math.multiply(theme_1.gridSize, 45));
exports.ProfileImage = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n position: absolute;\n top: ", "px;\n left: ", "px;\n"], ["\n position: absolute;\n top: ", "px;\n left: ", "px;\n"])), theme_1.math.multiply(theme_1.gridSize, 3), theme_1.math.multiply(theme_1.gridSize, 3));
exports.ActionsFlexSpacer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n flex: 1 0 auto;\n"], ["\n flex: 1 0 auto;\n"])));
exports.ActionButtonGroup = styled_components_1.default.div(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n user-select: none;\n margin: ", "px 0 0 0;\n text-align: right;\n\n button {\n margin-left: ", "px;\n\n &:first-child {\n margin-left: 0;\n }\n }\n"], ["\n user-select: none;\n margin: ", "px 0 0 0;\n text-align: right;\n\n button {\n margin-left: ", "px;\n\n &:first-child {\n margin-left: 0;\n }\n }\n"])), theme_1.math.multiply(theme_1.gridSize, 2), theme_1.gridSize);
exports.CardContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n min-height: ", "px;\n"])), theme_1.math.multiply(theme_1.gridSize, 17));
exports.DetailsGroup = styled_components_1.default.div(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-left: ", "px;\n width: ", "px;\n"], ["\n display: flex;\n flex-direction: column;\n margin-left: ", "px;\n width: ", "px;\n"])), theme_1.math.multiply(theme_1.gridSize, 14.5), theme_1.math.multiply(theme_1.gridSize, 24.5));
exports.DisabledInfo = styled_components_1.default.div(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n font-size: ", "px;\n color: ", ";\n margin: ", "px 0 0 0;\n line-height: ", "px;\n"], ["\n font-size: ", "px;\n color: ", ";\n margin: ", "px 0 0 0;\n line-height: ", "px;\n"])), theme_1.fontSizeSmall, constants_1.labelTextColor, theme_1.math.multiply(theme_1.gridSize, 1.5), theme_1.math.multiply(theme_1.gridSize, 2));
exports.FullNameLabel = styled_components_1.default.span(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n font-size: 18px;\n color: ", ";\n margin: ", ";\n line-height: ", "em;\n"], ["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n font-size: 18px;\n color: ",
";\n margin: ", ";\n line-height: ", "em;\n"])), function (props) {
return props.isDisabledAccount ? constants_1.headerTextColorInactive : constants_1.headerTextColor;
}, function (props) { return getFullNameMargin(props); }, theme_1.math.divide(function () { return 24; }, 18));
exports.LozengeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject(["\n margin-top: ", "px;\n text-transform: uppercase;\n display: block;\n"], ["\n margin-top: ", "px;\n text-transform: uppercase;\n display: block;\n"])), theme_1.math.multiply(theme_1.gridSize, 2));
exports.JobTitleLabel = styled_components_1.default.span(templateObject_12 || (templateObject_12 = tslib_1.__makeTemplateObject(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n font-size: 14px;\n color: ", ";\n margin: 0 0 ", "px 0;\n line-height: ", "em;\n"], ["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n font-size: 14px;\n color: ", ";\n margin: 0 0 ", "px 0;\n line-height: ", "em;\n"])), constants_1.headerTextColor, theme_1.math.multiply(theme_1.gridSize, 1.5), theme_1.math.divide(function () { return 24; }, 14));
exports.AppTitleLabel = styled_components_1.default.span(templateObject_13 || (templateObject_13 = tslib_1.__makeTemplateObject(["\n background: ", ";\n color: ", ";\n border-radius: ", ";\n padding: 0 6px;\n width: fit-content;\n font-weight: bold;\n text-transform: uppercase;\n\n font-size: 12px;\n margin: 4px 0 ", "px 0;\n line-height: ", "em;\n"], ["\n background: ", ";\n color: ", ";\n border-radius: ", ";\n padding: 0 6px;\n width: fit-content;\n font-weight: bold;\n text-transform: uppercase;\n\n font-size: 12px;\n margin: 4px 0 ", "px 0;\n line-height: ", "em;\n"])), constants_1.appLabelBgColor, constants_1.appLabelTextColor, theme_1.borderRadius(), theme_1.math.multiply(theme_1.gridSize, 1.5), theme_1.math.divide(function () { return 24; }, 14));
exports.SpinnerContainer = styled_components_1.default.div(templateObject_14 || (templateObject_14 = tslib_1.__makeTemplateObject(["\n align-items: center;\n display: flex;\n height: ", "px;\n justify-content: center;\n position: relative;\n"], ["\n align-items: center;\n display: flex;\n height: ", "px;\n justify-content: center;\n position: relative;\n"])), theme_1.math.multiply(theme_1.gridSize, 12));
exports.CardContainer = styled_components_1.default.div(templateObject_15 || (templateObject_15 = tslib_1.__makeTemplateObject(["\n position: relative;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n background-image: linear-gradient(\n to bottom,\n ", "\n 0%,\n ", "\n 100%\n );\n background-repeat: no-repeat;\n background-size: 100% ", "px;\n box-sizing: content-box;\n padding: ", "px;\n"], ["\n position: relative;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n background-image: linear-gradient(\n to bottom,\n ",
"\n 0%,\n ",
"\n 100%\n );\n background-repeat: no-repeat;\n background-size: 100% ", "px;\n box-sizing: content-box;\n padding: ", "px;\n"])), function (props) {
return props.isDisabledUser ? constants_1.headerBgColorDisabledUser : constants_1.headerBgColor;
}, function (props) {
return props.isDisabledUser ? constants_1.headerBgColorDisabledUser : constants_1.headerBgColor;
}, theme_1.math.multiply(theme_1.gridSize, 12), theme_1.math.multiply(theme_1.gridSize, 3));
exports.DetailsLabel = styled_components_1.default.div(templateObject_16 || (templateObject_16 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n line-height: ", "px;\n font-size: ", "px;\n margin: ", "px 0 0 0;\n white-space: nowrap;\n\n & + & {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n line-height: ", "px;\n font-size: ", "px;\n margin: ", "px 0 0 0;\n white-space: nowrap;\n\n & + & {\n margin-top: ", "px;\n }\n"])), theme_1.math.multiply(theme_1.gridSize, 3), theme_1.math.multiply(theme_1.gridSize, 1.5), theme_1.math.multiply(theme_1.gridSize, 2), theme_1.math.multiply(theme_1.gridSize, 0.25));
exports.DetailsLabelIcon = styled_components_1.default.div(templateObject_17 || (templateObject_17 = tslib_1.__makeTemplateObject(["\n display: flex;\n flex-shrink: 0;\n color: ", ";\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n vertical-align: top;\n\n svg {\n width: 100%;\n height: 100%;\n }\n"], ["\n display: flex;\n flex-shrink: 0;\n color: ", ";\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n vertical-align: top;\n\n svg {\n width: 100%;\n height: 100%;\n }\n"])), constants_1.labelIconColor, theme_1.math.multiply(theme_1.gridSize, 2), theme_1.math.multiply(theme_1.gridSize, 2), theme_1.math.multiply(theme_1.gridSize, 0.5));
exports.DetailsLabelText = styled_components_1.default.span(templateObject_18 || (templateObject_18 = tslib_1.__makeTemplateObject(["\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n padding-left: ", "px;\n"], ["\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n padding-left: ", "px;\n"])), constants_1.labelTextColor, theme_1.math.multiply(theme_1.gridSize, 0.5));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
//# sourceMappingURL=Card.js.map