@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
130 lines (118 loc) • 7.02 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ItemDividerUI = exports.PulsingTagUI = exports.DividerWrapperUI = exports.AvatarListWrapperUI = exports.TagListWrapperUI = exports.TimestampUI = exports.MetaUI = exports.MessageUI = exports.MessageCountUI = exports.HeadingUI = exports.ViewingFlagUI = exports.TypingUI = exports.BlockUI = exports.ItemUI = exports.config = exports.ContentUI = exports.SpeechBubbleIlloUI = exports.BlankSlateUI = exports.ChatListUI = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _color = require("../../styles/utilities/color");
var _speechBubble = _interopRequireDefault(require("@helpscout/hsds-illos/speech-bubble"));
var _Card = _interopRequireDefault(require("../Card"));
var _Flexy = _interopRequireDefault(require("../Flexy"));
var _Link = _interopRequireDefault(require("../Link"));
var _Tag = _interopRequireDefault(require("../Tag"));
var ChatListUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__ChatListUI",
componentId: "sc-1rfiwar-0"
})(["margin-bottom:10px;min-width:280px;"]);
exports.ChatListUI = ChatListUI;
var BlankSlateUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__BlankSlateUI",
componentId: "sc-1rfiwar-1"
})(["background-color:", ";"], (0, _color.getColor)('grey.200'));
exports.BlankSlateUI = BlankSlateUI;
var SpeechBubbleIlloUI = (0, _styledComponents.default)(_speechBubble.default).withConfig({
displayName: "ChatListcss__SpeechBubbleIlloUI",
componentId: "sc-1rfiwar-2"
})(["display:block;margin:0px auto -13px auto;"]);
exports.SpeechBubbleIlloUI = SpeechBubbleIlloUI;
var ContentUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__ContentUI",
componentId: "sc-1rfiwar-3"
})(["padding:16px 20px 19px;text-align:center;"]);
exports.ContentUI = ContentUI;
var config = {
backgroundColor: (0, _color.getColor)('grey.200'),
backgroundColorHover: '#f4f6f7',
backgroundColorAssigned: 'white',
backgroundColorAssignedHover: '#fcfcfc',
backgroundColorFocused: '#f4fbff',
backgroundColorFocusedHover: '#eef9ff',
borderColorFocused: (0, _color.getColor)('blue.500'),
borderWidth: 3,
flagColor: (0, _color.getColor)('yellow.500'),
flagSize: 12,
transition: 'background-color 0.3s ease, border-left 0.1s ease'
};
exports.config = config;
var ItemUI = (0, _styledComponents.default)(_Link.default).withConfig({
displayName: "ChatListcss__ItemUI",
componentId: "sc-1rfiwar-4"
})(["", ";border-left:", "px solid transparent;position:relative;transition:", ";&:hover{", ";}&:focus{outline:none !important;z-index:2;}&.is-assigned,&.is-loading{", ";&:hover{", ";}}&.is-focused{", ";border-left:", "px solid ", ";&:hover{", ";}}"], makeBackgroundColorStyles(config.backgroundColor), config.borderWidth, config.transition, makeBackgroundColorStyles(config.backgroundColorHover), makeBackgroundColorStyles(config.backgroundColorAssigned), makeBackgroundColorStyles(config.backgroundColorAssignedHover), makeBackgroundColorStyles(config.backgroundColorFocused), config.borderWidth, config.borderColorFocused, makeBackgroundColorStyles(config.backgroundColorFocusedHover));
exports.ItemUI = ItemUI;
var BlockUI = (0, _styledComponents.default)(_Card.default.Block).withConfig({
displayName: "ChatListcss__BlockUI",
componentId: "sc-1rfiwar-5"
})(["padding-left:calc(20px - ", "px);padding-bottom:16px;padding-top:16px;"], config.borderWidth);
exports.BlockUI = BlockUI;
var TypingUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__TypingUI",
componentId: "sc-1rfiwar-6"
})(["padding-bottom:8px;padding-top:8px;"]);
exports.TypingUI = TypingUI;
var ViewingFlagUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__ViewingFlagUI",
componentId: "sc-1rfiwar-7"
})(["border-left:", "px solid ", ";border-bottom:", "px solid transparent;height:0;left:-", "px;position:absolute;top:0;width:0;z-index:1;"], config.flagSize, config.flagColor, config.flagSize, config.borderWidth);
exports.ViewingFlagUI = ViewingFlagUI;
var HeadingUI = (0, _styledComponents.default)(_Flexy.default).withConfig({
displayName: "ChatListcss__HeadingUI",
componentId: "sc-1rfiwar-8"
})(["margin-bottom:5px;min-height:18px;"]);
exports.HeadingUI = HeadingUI;
var MessageCountUI = (0, _styledComponents.default)(_Flexy.default.Item).withConfig({
displayName: "ChatListcss__MessageCountUI",
componentId: "sc-1rfiwar-9"
})(["margin-bottom:-1px;margin-top:-1px;"]);
exports.MessageCountUI = MessageCountUI;
var MessageUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__MessageUI",
componentId: "sc-1rfiwar-10"
})(["min-height:40px;margin-bottom:2px;padding-right:20px;"]);
exports.MessageUI = MessageUI;
var MetaUI = (0, _styledComponents.default)(_Flexy.default).withConfig({
displayName: "ChatListcss__MetaUI",
componentId: "sc-1rfiwar-11"
})(["margin-bottom:-5px;"]);
exports.MetaUI = MetaUI;
var TimestampUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__TimestampUI",
componentId: "sc-1rfiwar-12"
})(["margin-right:12px;"]);
exports.TimestampUI = TimestampUI;
var TagListWrapperUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__TagListWrapperUI",
componentId: "sc-1rfiwar-13"
})(["max-width:140px;"]);
exports.TagListWrapperUI = TagListWrapperUI;
var AvatarListWrapperUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__AvatarListWrapperUI",
componentId: "sc-1rfiwar-14"
})(["margin-top:-9px;"]);
exports.AvatarListWrapperUI = AvatarListWrapperUI;
var DividerWrapperUI = (0, _styledComponents.default)('div').withConfig({
displayName: "ChatListcss__DividerWrapperUI",
componentId: "sc-1rfiwar-15"
})(["margin-left:-3px;"]);
exports.DividerWrapperUI = DividerWrapperUI;
function makeBackgroundColorStyles(color) {
return "\n background-color: " + color + ";\n\n .c-Overflow__fader {\n color: " + color + ";\n }\n ";
}
var PulsingTagUI = (0, _styledComponents.default)(_Tag.default).withConfig({
displayName: "ChatListcss__PulsingTagUI",
componentId: "sc-1rfiwar-16"
})(["animation:4s ease 0s infinite normal both running Tag_Blink;backface-visibility:hidden;filter:blur(0);-webkit-filter:blur(0);&.is-red{color:", ";border-color:", ";}@keyframes Tag_Blink{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}"], (0, _color.getColor)('red.500'), (0, _color.getColor)('red.500'));
exports.PulsingTagUI = PulsingTagUI;
var ItemDividerUI = (0, _styledComponents.default)('hr').withConfig({
displayName: "ChatListcss__ItemDividerUI",
componentId: "sc-1rfiwar-17"
})(["margin:0;border:0;border-top-color:", ";border-top-style:solid;border-top-width:1px;box-sizing:content-box;display:block;height:0;"], (0, _color.getColor)('grey.400'));
exports.ItemDividerUI = ItemDividerUI;