@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
120 lines (108 loc) • 7.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.makeFieldStyles = makeFieldStyles;
exports.InlinePrefixSuffixUI = exports.CharValidatorText = exports.CharValidatorUI = exports.SuffixUI = exports.PrefixUI = exports.FieldTextAreaUI = exports.FieldUI = exports.ItemUI = exports.InputUI = exports.InputWrapperUI = exports.config = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _constants = require("../../styles/configs/constants");
var _color = require("../../styles/utilities/color");
var _forEach = _interopRequireDefault(require("../../styles/utilities/forEach"));
var config = {
borderWidth: '2px',
offset: '1px',
paddingSide: '16px',
size: {
xs: {
height: '24px'
},
xssm: {
height: '28px'
},
sm: {
height: '32px'
},
md: {
height: '42px'
},
lg: {
height: '48px'
}
},
state: ['error', 'success', 'warning']
};
exports.config = config;
var InputWrapperUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Inputcss__InputWrapperUI",
componentId: "sc-7axhvo-0"
})(["width:100%;"]);
exports.InputWrapperUI = InputWrapperUI;
var InputUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Inputcss__InputUI",
componentId: "sc-7axhvo-1"
})(["align-items:center;background-color:transparent;border:none;display:flex;padding-bottom:1px;padding-top:1px;padding-left:", ";padding-right:", ";position:relative;&.is-multiline{height:auto;will-change:height;}&.is-seamless{padding-left:0;padding-right:0;}&.is-focused{z-index:2;}"], config.paddingSide, config.paddingSide);
exports.InputUI = InputUI;
var ItemUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Inputcss__ItemUI",
componentId: "sc-7axhvo-2"
})(["position:relative;z-index:1;"]);
exports.ItemUI = ItemUI;
var FieldUI = (0, _styledComponents.default)('input').withConfig({
displayName: "Inputcss__FieldUI",
componentId: "sc-7axhvo-3"
})(["&.c-InputField{", ";}"], makeFieldStyles);
exports.FieldUI = FieldUI;
var FieldTextAreaUI = (0, _styledComponents.default)('textarea').withConfig({
displayName: "Inputcss__FieldTextAreaUI",
componentId: "sc-7axhvo-4"
})(["&.c-InputField{", ";}"], makeFieldStyles);
exports.FieldTextAreaUI = FieldTextAreaUI;
var PrefixUI = (0, _styledComponents.default)(ItemUI).withConfig({
displayName: "Inputcss__PrefixUI",
componentId: "sc-7axhvo-5"
})(["margin-bottom:-1px;margin-left:calc(", " * -1);margin-top:-1px;margin-right:", ";&.is-seamless{margin-left:0;}"], config.paddingSide, config.paddingSide);
exports.PrefixUI = PrefixUI;
var SuffixUI = (0, _styledComponents.default)(ItemUI).withConfig({
displayName: "Inputcss__SuffixUI",
componentId: "sc-7axhvo-6"
})(["margin-bottom:-1px;margin-left:", ";margin-right:calc(", " * -1);margin-top:-1px;&.is-seamless{margin-right:0;}&.is-action{margin-right:-11px;}"], config.paddingSide, config.paddingSide);
exports.SuffixUI = SuffixUI;
var CharValidatorUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Inputcss__CharValidatorUI",
componentId: "sc-7axhvo-7"
})(["right:15px;bottom:-7px;min-height:18px;position:absolute;text-align:right;z-index:3;-webkit-transform:translateY(0);"]);
exports.CharValidatorUI = CharValidatorUI;
var CharValidatorText = (0, _styledComponents.default)('div').withConfig({
displayName: "Inputcss__CharValidatorText",
componentId: "sc-7axhvo-8"
})(["min-width:", ";"], function (props) {
return Math.max(props.chars * 9, 18) + 'px';
});
exports.CharValidatorText = CharValidatorText;
var InlinePrefixSuffixUI = (0, _styledComponents.default)('div').withConfig({
displayName: "Inputcss__InlinePrefixSuffixUI",
componentId: "sc-7axhvo-9"
})(["opacity:0.3;padding-left:4px;padding-right:4px;position:relative;top:0;white-space:nowrap;z-index:1;&.is-icon{opacity:1;&.is-multiline{align-self:flex-start;padding-top:9px;}}", ";&.is-prefix{&.is-icon{margin-left:-8px;}&.is-error.is-seamless{margin-left:0;}}&.is-suffix{&.is-icon{margin-right:-8px;}&.is-error.is-seamless{margin-right:0;}}"], makeStateStyles);
exports.InlinePrefixSuffixUI = InlinePrefixSuffixUI;
function getHeight(height) {
return "calc(" + height + " - " + config.borderWidth + " * 2 - " + config.offset + " * 2)";
}
function makeSizeStyles() {
return (0, _forEach.default)(config.size, function (size, props) {
var height = props.height;
return "\n &.is-" + size + " {\n height: " + getHeight(height) + ";\n }\n ";
});
}
function makeMinSizeStyles() {
return (0, _forEach.default)(config.size, function (size, props) {
var height = props.height;
return "\n &.is-" + size + " {\n min-height: calc(" + height + " - 2px);\n }\n ";
});
}
function makeStateStyles() {
return (0, _forEach.default)(_constants.STATES, function (state) {
return "\n &.is-" + state + " {\n color: " + (0, _color.getColor)('state', state, 'color') + ";\n }\n ";
});
}
function makeFieldStyles() {
return "\n font-size: var(--HSDSGlobalFontSize);\n font-family: var(--HSDSGlobalFontFamily);\n appearance: none;\n background-color: transparent;\n border: none;\n box-shadow: none;\n color: currentColor;\n display: block;\n height: " + getHeight(config.size.md.height) + ";\n margin-bottom: " + config.offset + ";\n margin-top: " + config.offset + ";\n padding: 0;\n position: relative;\n top: 0;\n width: 100%;\n z-index: 1;\n\n &.is-error {\n width: calc(100% - 24px);\n }\n\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: " + (0, _color.getColor)('grey.700') + ";\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus &:-webkit-autofill {\n -webkit-box-shadow: 0 0 0px 1000px white inset;\n background-clip: content-box;\n transition: background-color 5000s ease-in-out 0s;\n }\n\n " + makeSizeStyles() + ";\n " + makeStateStyles() + ";\n\n &.is-resizable {\n resize: vertical !important;\n }\n\n &.is-multiline {\n line-height: normal;\n overflow: hidden;\n height: auto;\n margin-bottom: 1px;\n margin-top: 1px;\n margin-left: -" + config.paddingSide + ";\n margin-right: -" + config.paddingSide + ";\n padding: 12px " + config.paddingSide + ";\n resize: none;\n top: 1px;\n width: calc(100% + (" + config.paddingSide + " * 2));\n\n " + makeMinSizeStyles() + "\n\n &.has-maxHeight {\n margin-bottom: 2px;\n margin-left: calc((" + config.paddingSide + " - 2px) * -1);\n margin-right: calc((" + config.paddingSide + " - 2px) * -1);\n margin-top: 0;\n overflow-y: auto;\n\n &.is-error {\n margin-right: calc((" + config.paddingSide + " * 2 + 2px) * -1)\n }\n }\n\n &.is-seamless {\n margin: 0;\n padding-left: 0;\n padding-right: 0;\n }\n }\n ";
}