@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
115 lines (97 loc) • 8.53 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.MessageArticleCardUI = exports.UrlAttachmentImageUI = exports.ImageContainerUI = exports.ImageUI = exports.ActionButtonUI = exports.ActionUI = exports.BodyUI = exports.ContentUI = exports.SubtitleUI = exports.TitleUI = exports.MessageCardWrapperUI = exports.MessageCardUI = exports.MAX_IMAGE_SIZE = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _font = require("../../styles/utilities/font");
var _color = require("../../styles/utilities/color");
var _constants = require("../../styles/configs/constants");
var _depth = require("../../styles/mixins/depth.css");
var _Card = _interopRequireDefault(require("../Card"));
var _Button = _interopRequireDefault(require("../Button"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Image = _interopRequireDefault(require("../Image"));
var _ArticleCard = _interopRequireDefault(require("../ArticleCard"));
var _MessageCard = require("./utils/MessageCard.utils");
var MAX_IMAGE_SIZE = 258;
exports.MAX_IMAGE_SIZE = MAX_IMAGE_SIZE;
var fontFamily = (0, _font.makeFontFamily)('Barlow');
var MessageCardUI = (0, _styledComponents.default)(_Card.default).withConfig({
displayName: "MessageCardcss__MessageCardUI",
componentId: "sc-1fiefnl-0"
})(["border-color:transparent !important;background-color:white;box-shadow:0 0 0 1px rgba(0,0,0,0.1);border-radius:8px;padding:20px 0;width:300px;word-break:break-word;display:flex;flex-direction:column;overflow:auto;margin-right:2px;&.is-align-right{border-bottom-right-radius:4px;}&.is-align-left{border-bottom-left-radius:4px;}&.is-with-box-shadow{", "}&.is-mobile{width:100%;.is-h4{font-size:20px !important;line-height:24px !important;}.is-h5{font-size:14px !important;margin-top:10px;}.c-Text{font-size:14px !important;line-height:22px;margin-top:20px;}.c-Button{margin-top:30px;font-size:16px !important;height:65px !important;}}"], _depth.d600Effect);
exports.MessageCardUI = MessageCardUI;
var MessageCardWrapperUI = (0, _styledComponents.default)('div').withConfig({
displayName: "MessageCardcss__MessageCardWrapperUI",
componentId: "sc-1fiefnl-1"
})(["opacity:", ";transform:translateY(", ");transition:", ";"], function (_ref) {
var visible = _ref.visible;
return visible ? '1' : '0';
}, function (_ref2) {
var visible = _ref2.visible;
return visible ? '0' : '12px';
}, function (_ref3) {
var withAnimation = _ref3.withAnimation;
return withAnimation ? "all 300ms ease-in-out" : 'none';
});
exports.MessageCardWrapperUI = MessageCardWrapperUI;
var TitleUI = (0, _styledComponents.default)(_Heading.default).withConfig({
displayName: "MessageCardcss__TitleUI",
componentId: "sc-1fiefnl-2"
})(["", ";line-height:22px !important;padding:0 20px;flex:0 0 auto;"], fontFamily);
exports.TitleUI = TitleUI;
var SubtitleUI = (0, _styledComponents.default)(_Heading.default).withConfig({
displayName: "MessageCardcss__SubtitleUI",
componentId: "sc-1fiefnl-3"
})(["", ";line-height:18px !important;margin-top:6px;padding:0 20px;flex:0 0 auto;"], (0, _font.setFontSize)(12));
exports.SubtitleUI = SubtitleUI;
var editorHtmlFontSize = 14;
var ContentUI = _styledComponents.default.div.withConfig({
displayName: "MessageCardcss__ContentUI",
componentId: "sc-1fiefnl-4"
})(["margin-top:", ";padding:0 20px;display:flex;flex-direction:column;& > * + *{margin-top:20px;}"], function (_ref4) {
var withMargin = _ref4.withMargin;
return withMargin ? '20px' : '0';
});
exports.ContentUI = ContentUI;
var BodyUI = _styledComponents.default.div.withConfig({
displayName: "MessageCardcss__BodyUI",
componentId: "sc-1fiefnl-5"
})(["color:", ";font-size:", "px;line-height:22px;flex:1 1 100%;p{font-size:", "px;margin:15px 0;padding:0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}ul,ol{padding:0;margin:15px 0 0;ul.&{list-style-type:disc;}ol.&{list-style-type:decimal;}& > ul{list-style-type:circle;margin-left:15px;margin-top:0;& > ul{list-style-type:square;& > ul{list-style-type:disc;}}}& > ol{list-style-type:lower-latin;margin-left:15px;margin-top:0;& > ol{list-style-type:lower-roman;& > ol{list-style-type:decimal;}}}&:first-child{margin-top:0;}}ul li{font-size:", "px;margin-left:30px;padding-left:7px;@-moz-document url-prefix(){&{margin-left:26px;padding-left:12px;}}}ol li{font-size:", "px;margin-left:27px;padding-left:10px;}blockquote{margin:15px 0 0 15px;padding:0 25px 0 20px;border-left:2px solid ", ";color:", ";&:first-child{margin-top:0;}p{font-size:", "px;}}code.inline-code{display:inline-block;color:", ";caret-color:", ";padding:0 7px;font-size:12px;position:relative;margin:0 1px;background:", ";border-radius:4px;font-family:var(--HSDSGlobalFontFamilyMono);min-height:24px;line-height:24px;b,strong{color:", ";}}pre{font-family:var(--HSDSGlobalFontFamilyMono);margin:15px 0;padding:15px 25px;border:1px solid ", ";border-radius:2px;background-color:", ";color:", ";word-wrap:break-word;white-space:pre-wrap;font-size:12px;&:first-child{margin-top:8px;}p{font-size:12px;margin:0;}}a{color:", ";cursor:pointer;text-decoration:none;&:hover,&:focus{color:", ";outline-width:0;text-decoration:underline;}&:active{color:", ";text-decoration:underline;outline-width:0;}}b,strong{font-weight:bold;color:", ";}i,em{font-style:italic;}u{text-decoration:none;border-bottom:1px solid currentColor;}s{text-decoration:line-through;}.", "{display:inline-flex;max-width:50%;padding:3px 8px;margin-right:4px;height:20px;line-height:17px;align-items:center;color:", ";background-color:", ";border-radius:100px;&__text{max-width:100%;font-style:normal;font-weight:normal;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}"], (0, _color.getColor)('charcoal.700'), editorHtmlFontSize, editorHtmlFontSize, editorHtmlFontSize, editorHtmlFontSize, (0, _color.getColor)('grey.500'), (0, _color.getColor)('charcoal.400'), editorHtmlFontSize, (0, _color.getColor)('red.500'), (0, _color.getColor)('red.500'), (0, _color.getColor)('grey.300'), (0, _color.getColor)('red.500'), (0, _color.getColor)('grey.500'), (0, _color.getColor)('grey.200'), (0, _color.getColor)('charcoal.800'), (0, _color.getColor)('link.base'), (0, _color.getColor)('link.hover'), (0, _color.getColor)('link.active'), (0, _color.getColor)('charcoal.800'), _MessageCard.messageVariableClassName, (0, _color.getColor)('purple.800'), (0, _color.getColor)('purple.200'));
exports.BodyUI = BodyUI;
var ActionUI = (0, _styledComponents.default)('div').withConfig({
displayName: "MessageCardcss__ActionUI",
componentId: "sc-1fiefnl-6"
})(["&:not(:only-child){margin-top:20px;}padding:0 20px;flex:0 0 auto;"]);
exports.ActionUI = ActionUI;
var ActionButtonUI = (0, _styledComponents.default)(_Button.default).withConfig({
displayName: "MessageCardcss__ActionButtonUI",
componentId: "sc-1fiefnl-7"
})(["", ";font-family:", ";line-height:normal !important;width:100%;"], (0, _font.setFontSize)(14), _constants.FONT_FAMILY);
exports.ActionButtonUI = ActionButtonUI;
var ImageUI = (0, _styledComponents.default)(_Image.default).withConfig({
displayName: "MessageCardcss__ImageUI",
componentId: "sc-1fiefnl-8"
})(["border-radius:3px;height:", ";width:", ";max-height:", "px;"], function (_ref5) {
var height = _ref5.height;
return height;
}, function (_ref6) {
var width = _ref6.width;
return width;
}, MAX_IMAGE_SIZE);
exports.ImageUI = ImageUI;
var ImageContainerUI = (0, _styledComponents.default)('div').withConfig({
displayName: "MessageCardcss__ImageContainerUI",
componentId: "sc-1fiefnl-9"
})(["display:flex;justify-content:center;width:100%;max-height:", "px;"], MAX_IMAGE_SIZE);
exports.ImageContainerUI = ImageContainerUI;
var UrlAttachmentImageUI = (0, _styledComponents.default)('div').withConfig({
displayName: "MessageCardcss__UrlAttachmentImageUI",
componentId: "sc-1fiefnl-10"
})(["height:80px;margin:16px 0 -22px 0;overflow:hidden;img{border-radius:4px;width:100%;}"]);
exports.UrlAttachmentImageUI = UrlAttachmentImageUI;
var MessageArticleCardUI = (0, _styledComponents.default)(_ArticleCard.default).withConfig({
displayName: "MessageCardcss__MessageArticleCardUI",
componentId: "sc-1fiefnl-11"
})(["border:none;border-radius:8px 4px 4px 8px !important;box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 4px 6px rgba(0,0,0,0.15) !important;margin-top:6px;&:hover:after{box-shadow:0 4px 12px 0 rgba(0,0,0,0.1);}"]);
exports.MessageArticleCardUI = MessageArticleCardUI;