@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
95 lines (85 loc) • 6.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.A11yTogglerUI = exports.GroupLabelUI = exports.DividerUI = exports.SelectedBadge = exports.EmptyListUI = exports.ListItemTextUI = exports.ListItemUI = exports.InputSearchHolderUI = exports.MenuListUI = exports.DropListWrapperUI = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _color = require("../../styles/utilities/color");
var _Icon = _interopRequireDefault(require("../Icon"));
var _jsxRuntime = require("react/jsx-runtime");
var DropListWrapperUI = (0, _styledComponents.default)('div').withConfig({
displayName: "DropListcss__DropListWrapperUI",
componentId: "sc-8igwyj-0"
})(["box-sizing:border-box;width:", ";padding:0;background-color:white;border:1px solid ", ";border-radius:4px;box-shadow:0px 1px 7px rgba(0,0,0,0.08);font-family:var(--HSDSGlobalFontFamily);font-size:13px;color:", ";*{box-sizing:border-box;}", ";"], function (_ref) {
var menuWidth = _ref.menuWidth;
return menuWidth;
}, (0, _color.getColor)('grey.600'), (0, _color.getColor)('grey.600'), function (props) {
return props.menuCSS ? props.menuCSS : '';
});
exports.DropListWrapperUI = DropListWrapperUI;
var MenuListUI = (0, _styledComponents.default)('ul').withConfig({
displayName: "DropListcss__MenuListUI",
componentId: "sc-8igwyj-1"
})(["width:100%;max-height:200px;overflow-y:auto;margin:0;padding:5px 0 5px 0;list-style:none;&.MenuList-Combobox{padding:0 0 5px 0;}&:focus{outline:0;}"]);
exports.MenuListUI = MenuListUI;
var InputSearchHolderUI = (0, _styledComponents.default)('div').withConfig({
displayName: "DropListcss__InputSearchHolderUI",
componentId: "sc-8igwyj-2"
})(["width:calc(100% - 8px);margin:4px 4px 5px 4px;display:", ";input{width:100%;height:38px;padding:0 15px;font-family:var(--HSDSGlobalFontFamily);font-size:13px;color:", ";box-shadow:inset 0 0 0 1px ", ";border:0;border-radius:3px;outline:0;box-shadow:0 0 0 2px ", ";}"], function (_ref2) {
var hide = _ref2.hide;
return hide ? 'none' : 'block';
}, (0, _color.getColor)('charcoal.600'), (0, _color.getColor)('grey.600'), (0, _color.getColor)('blue.500'));
exports.InputSearchHolderUI = InputSearchHolderUI;
var ListItemUI = (0, _styledComponents.default)('li').withConfig({
displayName: "DropListcss__ListItemUI",
componentId: "sc-8igwyj-3"
})(["display:flex;justify-content:space-between;align-items:center;height:36px;margin:0 5px 2px;padding:0 10px 0 15px;border-radius:3px;line-height:36px;color:", ";background-color:transparent;font-weight:", ";-moz-osx-font-smoothing:", ";-webkit-font-smoothing:", ";transition:color ease-in-out 0.1s;cursor:pointer;&:last-child{margin-bottom:0;}&.is-selected,&.is-highlighted.is-selected{color:white;background-color:", ";}&.is-highlighted{color:", ";background-color:", ";}&.with-multiple-selection{&.is-highlighted.is-selected{color:", ";background-color:", ";}&.is-selected{color:", ";background-color:white;}&.is-disabled.is-selected,&.is-highlighted.is-disabled.is-selected{color:", ";background-color:white;}&.is-highlighted{color:", ";background-color:", ";}}&.is-disabled,&.is-highlighted.is-disabled,&.with-multiple-selection.is-highlighted.is-disabled,&.with-multiple-selection.is-disabled{color:", ";background-color:transparent;cursor:default;}&.is-type-inert,&.is-highlighted.is-type-inert,&.with-multiple-selection.is-highlighted.is-type-inert{background-color:transparent;cursor:default;}"], (0, _color.getColor)('charcoal.600'), function (props) {
return props.selected && props.withMultipleSelection ? '500' : '400';
}, function (_ref3) {
var selected = _ref3.selected;
return selected ? 'auto' : 'grayscale';
}, function (_ref4) {
var selected = _ref4.selected;
return selected ? 'auto' : 'antialiased';
}, (0, _color.getColor)('blue.600'), (0, _color.getColor)('charcoal.800'), (0, _color.getColor)('blue.100'), (0, _color.getColor)('blue.600'), (0, _color.getColor)('blue.100'), (0, _color.getColor)('blue.600'), (0, _color.getColor)('charcoal.400'), (0, _color.getColor)('charcoal.800'), (0, _color.getColor)('blue.100'), (0, _color.getColor)('charcoal.200'));
exports.ListItemUI = ListItemUI;
var ListItemTextUI = (0, _styledComponents.default)('span').withConfig({
displayName: "DropListcss__ListItemTextUI",
componentId: "sc-8igwyj-4"
})(["display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;.with-multiple-selection &{max-width:calc(100% - 30px);}"]);
exports.ListItemTextUI = ListItemTextUI;
var EmptyListUI = (0, _styledComponents.default)('div').withConfig({
displayName: "DropListcss__EmptyListUI",
componentId: "sc-8igwyj-5"
})(["height:36px;margin:0 5px;padding:9px 15px 0;font-style:italic;"]);
exports.EmptyListUI = EmptyListUI;
var SelectedBadgeUI = (0, _styledComponents.default)('div').withConfig({
displayName: "DropListcss__SelectedBadgeUI",
componentId: "sc-8igwyj-6"
})(["width:24px;height:24px;padding:3px;border-radius:50%;color:", ";background-color:transparent;opacity:0;transition:opacity ease-in-out 0.2s,color ease-in-out 0.2s,background-color ease-in-out 0.2s;.is-selected &,.DropListItem.is-selected:hover &{opacity:1;color:white;background-color:", ";}.is-disabled &,.DropListItem.is-disabled:hover &{opacity:1;color:white;background-color:", ";}.DropListItem:hover &{opacity:1;background-color:white;}"], (0, _color.getColor)('blue.500'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('grey.600'));
var SelectedBadge = function SelectedBadge(_ref5) {
var isSelected = _ref5.isSelected;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedBadgeUI, {
className: "SelectedBadge",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: "checkmark",
size: "18"
})
});
};
exports.SelectedBadge = SelectedBadge;
var DividerUI = (0, _styledComponents.default)('div').withConfig({
displayName: "DropListcss__DividerUI",
componentId: "sc-8igwyj-7"
})(["width:calc(100% - 10px);height:1px;margin:9px 5px;background-color:", ";"], (0, _color.getColor)('grey.500'));
exports.DividerUI = DividerUI;
var GroupLabelUI = (0, _styledComponents.default)('div').withConfig({
displayName: "DropListcss__GroupLabelUI",
componentId: "sc-8igwyj-8"
})(["height:36px;margin:0 5px;padding:0 15px;line-height:36px;font-size:11px;text-transform:uppercase;letter-spacing:0.7px;color:", ";&:first-child{margin-top:5px;}"], (0, _color.getColor)('charcoal.200'));
exports.GroupLabelUI = GroupLabelUI;
var A11yTogglerUI = (0, _styledComponents.default)('button').withConfig({
displayName: "DropListcss__A11yTogglerUI",
componentId: "sc-8igwyj-9"
})(["display:none;"]);
exports.A11yTogglerUI = A11yTogglerUI;