oolib 2.151.0 → 2.152.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/icons/custom/index.d.ts +1 -0
- package/dist/icons/custom/index.js +11 -2
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/stories/Oolib/components/Icons.stories.js +5 -24
- package/dist/stories/v2/components/TextInputs.stories.d.ts +20 -7
- package/dist/stories/v2/components/TextInputs.stories.js +21 -8
- package/dist/v2/components/Buttons/derivedComps/ActionButton.d.ts +7 -0
- package/dist/v2/components/Buttons/derivedComps/ActionButton.js +43 -0
- package/dist/v2/components/Buttons/derivedComps/ClearButton.d.ts +6 -0
- package/dist/v2/components/Buttons/derivedComps/ClearButton.js +36 -0
- package/dist/v2/components/OKELink/comps/AvatarDisplay/index.d.ts +27 -0
- package/dist/v2/components/OKELink/comps/AvatarDisplay/index.js +29 -0
- package/dist/v2/components/OKELink/comps/AvatarDisplay/styled.d.ts +8 -0
- package/dist/v2/components/OKELink/comps/AvatarDisplay/styled.js +64 -0
- package/dist/v2/components/OKELink/index.d.ts +42 -0
- package/dist/v2/components/OKELink/index.js +128 -0
- package/dist/v2/components/OKELink/styled.d.ts +15 -0
- package/dist/v2/components/OKELink/styled.js +62 -0
- package/dist/v2/components/OKELink/utils/index.d.ts +11 -0
- package/dist/v2/components/OKELink/utils/index.js +20 -0
- package/dist/v2/components/TextInputs/derivedComps/EmailInput.d.ts +5 -0
- package/dist/v2/components/TextInputs/derivedComps/EmailInput.js +45 -0
- package/dist/v2/components/TextInputs/derivedComps/NumberInput.d.ts +5 -0
- package/dist/v2/components/TextInputs/derivedComps/NumberInput.js +70 -0
- package/dist/v2/components/TextInputs/derivedComps/PasswordInput.d.ts +4 -0
- package/dist/v2/components/TextInputs/derivedComps/PasswordInput.js +63 -0
- package/dist/v2/components/TextInputs/derivedComps/PhoneInput.d.ts +5 -0
- package/dist/v2/components/TextInputs/derivedComps/PhoneInput.js +53 -0
- package/dist/v2/components/TextInputs/derivedComps/URLInput.d.ts +8 -0
- package/dist/v2/components/TextInputs/derivedComps/URLInput.js +129 -0
- package/dist/v2/components/TextInputs/index.d.ts +8 -23
- package/dist/v2/components/TextInputs/index.js +42 -187
- package/dist/v2/components/TextInputs/index.styled.js +5 -2
- package/dist/v2/components/Typo2/index.d.ts +1 -0
- package/dist/v2/components/Typo2/index.js +3 -1
- package/dist/v2/components/Typo2/index.styled.d.ts +1 -0
- package/dist/v2/components/Typo2/index.styled.js +18 -17
- package/dist/v2/themes/globalStyles.d.ts +0 -1
- package/dist/v2/themes/globalStyles.js +1 -2
- package/dist/v2/themes/typo.d.ts +1 -0
- package/dist/v2/themes/typo.js +17 -15
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export function TextInput({ id, invert, disabled, icon, type, placeholder, value, onChange, onFocus, onBlur, readOnly, iconOnClick, iconAfter, handleValidation, validateOnMount, actionBtn, clearBtn, className, maxLength, maxNumLimiter: DEPRECATED_maxNumLimiter, forceFocus, validateOnlyOnBlur, validationStatus: _validationStatus, displayValidationMsg, content, passValidationErrorToFormValidation, plugin, }: {
|
|
1
|
+
export function TextInput({ S, id, invert, disabled, icon, type, placeholder, value, onChange, onFocus, onBlur, readOnly, iconOnClick, iconAfter, handleValidation, validateOnMount, actionBtn, clearBtn, className, maxLength, maxNumLimiter: DEPRECATED_maxNumLimiter, forceFocus, validateOnlyOnBlur, validationStatus: _validationStatus, displayValidationMsg, content, passValidationErrorToFormValidation, plugin, }: {
|
|
2
|
+
S: any;
|
|
2
3
|
id: any;
|
|
3
4
|
invert: any;
|
|
4
5
|
disabled: any;
|
|
@@ -27,26 +28,10 @@ export function TextInput({ id, invert, disabled, icon, type, placeholder, value
|
|
|
27
28
|
passValidationErrorToFormValidation: any;
|
|
28
29
|
plugin: any;
|
|
29
30
|
}, ...args: any[]): React.JSX.Element;
|
|
30
|
-
export function PasswordInput({ ...props }: {
|
|
31
|
-
[x: string]: any;
|
|
32
|
-
}): React.JSX.Element;
|
|
33
|
-
export function EmailInput({ passValidationErrorToFormValidation, ...props }: {
|
|
34
|
-
[x: string]: any;
|
|
35
|
-
passValidationErrorToFormValidation: any;
|
|
36
|
-
}): React.JSX.Element;
|
|
37
|
-
export function PhoneInput({ passValidationErrorToFormValidation, ...props }: {
|
|
38
|
-
[x: string]: any;
|
|
39
|
-
passValidationErrorToFormValidation: any;
|
|
40
|
-
}): React.JSX.Element;
|
|
41
|
-
export function URLInput({ routesAreValidInputs, validationPlugin, passValidationErrorToFormValidation, content, ...props }: {
|
|
42
|
-
[x: string]: any;
|
|
43
|
-
routesAreValidInputs?: boolean;
|
|
44
|
-
validationPlugin: any;
|
|
45
|
-
passValidationErrorToFormValidation: any;
|
|
46
|
-
content: any;
|
|
47
|
-
}): React.JSX.Element;
|
|
48
|
-
export function NumberInput({ passValidationErrorToFormValidation, ...props }: {
|
|
49
|
-
[x: string]: any;
|
|
50
|
-
passValidationErrorToFormValidation: any;
|
|
51
|
-
}): React.JSX.Element;
|
|
52
31
|
import React from "react";
|
|
32
|
+
import { EmailInput } from "./derivedComps/EmailInput";
|
|
33
|
+
import { NumberInput } from "./derivedComps/NumberInput";
|
|
34
|
+
import { PhoneInput } from "./derivedComps/PhoneInput";
|
|
35
|
+
import { PasswordInput } from "./derivedComps/PasswordInput";
|
|
36
|
+
import { URLInput } from "./derivedComps/URLInput";
|
|
37
|
+
export { EmailInput, NumberInput, PhoneInput, PasswordInput, URLInput };
|
|
@@ -69,34 +69,36 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
69
69
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
73
|
-
var t = {};
|
|
74
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
75
|
-
t[p] = s[p];
|
|
76
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
77
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
78
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
79
|
-
t[p[i]] = s[p[i]];
|
|
80
|
-
}
|
|
81
|
-
return t;
|
|
82
|
-
};
|
|
83
72
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
84
|
-
exports.
|
|
73
|
+
exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = void 0;
|
|
85
74
|
var react_1 = __importStar(require("react"));
|
|
86
75
|
var styled_components_1 = require("styled-components");
|
|
87
76
|
var BlockLabel_1 = require("../BlockLabel");
|
|
88
77
|
var LoadersAndProgress_1 = require("../../../components/LoadersAndProgress");
|
|
89
|
-
var OKELink_1 = require("
|
|
78
|
+
var OKELink_1 = require("../OKELink");
|
|
90
79
|
var _EXPORTS_1 = require("../../../utils/_EXPORTS");
|
|
91
80
|
var utilsOolib_1 = require("../../../utilsOolib");
|
|
92
81
|
var themes_1 = require("../../themes");
|
|
93
|
-
var Buttons_1 = require("../Buttons");
|
|
94
82
|
var Typo2_1 = require("../Typo2");
|
|
95
83
|
var index_styled_1 = require("./index.styled");
|
|
96
84
|
var DisplayIcon_1 = require("../../../utils/comps/DisplayIcon");
|
|
85
|
+
var EmailInput_1 = require("./derivedComps/EmailInput");
|
|
86
|
+
Object.defineProperty(exports, "EmailInput", { enumerable: true, get: function () { return EmailInput_1.EmailInput; } });
|
|
87
|
+
var PasswordInput_1 = require("./derivedComps/PasswordInput");
|
|
88
|
+
Object.defineProperty(exports, "PasswordInput", { enumerable: true, get: function () { return PasswordInput_1.PasswordInput; } });
|
|
89
|
+
var URLInput_1 = require("./derivedComps/URLInput");
|
|
90
|
+
Object.defineProperty(exports, "URLInput", { enumerable: true, get: function () { return URLInput_1.URLInput; } });
|
|
91
|
+
var NumberInput_1 = require("./derivedComps/NumberInput");
|
|
92
|
+
Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return NumberInput_1.NumberInput; } });
|
|
93
|
+
var PhoneInput_1 = require("./derivedComps/PhoneInput");
|
|
94
|
+
Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return PhoneInput_1.PhoneInput; } });
|
|
95
|
+
var ClearButton_1 = require("../Buttons/derivedComps/ClearButton");
|
|
96
|
+
var ActionButton_1 = require("../Buttons/derivedComps/ActionButton");
|
|
97
|
+
var icons_1 = require("../../../icons");
|
|
98
|
+
var BadgeVetted = icons_1.icons.BadgeVetted;
|
|
97
99
|
function TextInput(_a) {
|
|
98
100
|
var _this = this;
|
|
99
|
-
var id = _a.id, invert = _a.invert, disabled = _a.disabled, icon = _a.icon, type = _a.type, _b = _a.placeholder, placeholder = _b === void 0 ? "Enter Text..." : _b, _c = _a.value, value = _c === void 0 ? "" : _c, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, iconOnClick = _a.iconOnClick, iconAfter = _a.iconAfter, handleValidation = _a.handleValidation, _d = _a.validateOnMount, validateOnMount = _d === void 0 ? true : _d, // i think it makes sense to always run validation the minute the comp mounts, but we will see if this has sideeffects
|
|
101
|
+
var S = _a.S, id = _a.id, invert = _a.invert, disabled = _a.disabled, icon = _a.icon, type = _a.type, _b = _a.placeholder, placeholder = _b === void 0 ? "Enter Text..." : _b, _c = _a.value, value = _c === void 0 ? "" : _c, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, iconOnClick = _a.iconOnClick, iconAfter = _a.iconAfter, handleValidation = _a.handleValidation, _d = _a.validateOnMount, validateOnMount = _d === void 0 ? true : _d, // i think it makes sense to always run validation the minute the comp mounts, but we will see if this has sideeffects
|
|
100
102
|
actionBtn = _a.actionBtn, clearBtn = _a.clearBtn, className = _a.className, maxLength = _a.maxLength, DEPRECATED_maxNumLimiter = _a.maxNumLimiter, forceFocus = _a.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
|
|
101
103
|
_e = _a.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
|
|
102
104
|
validateOnlyOnBlur = _e === void 0 ? false : _e, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
|
|
@@ -109,6 +111,7 @@ function TextInput(_a) {
|
|
|
109
111
|
}, [_validationStatus]);
|
|
110
112
|
var actionBtnEnabaled = !!value && (type !== "url" ? true : (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success");
|
|
111
113
|
var clearBtnEnabled = !!value && (type !== "url" ? true : (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success");
|
|
114
|
+
var size = S ? "S" : "M";
|
|
112
115
|
var handleValidate = function (e, onBlur) { return __awaiter(_this, void 0, void 0, function () {
|
|
113
116
|
var value, res, validationPlugin, pluginResponse;
|
|
114
117
|
return __generator(this, function (_a) {
|
|
@@ -176,178 +179,30 @@ function TextInput(_a) {
|
|
|
176
179
|
forceFocus && inputRef.current && inputRef.current.focus();
|
|
177
180
|
}, [forceFocus]);
|
|
178
181
|
var localize = (0, utilsOolib_1.useLocale)();
|
|
179
|
-
return (react_1.default.createElement(
|
|
180
|
-
react_1.default.createElement(
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
react_1.default.createElement(
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
react_1.default.createElement(
|
|
195
|
-
validationStatus.msg,
|
|
196
|
-
validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: "
|
|
182
|
+
return (react_1.default.createElement("div", { className: className },
|
|
183
|
+
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
|
|
184
|
+
readOnly ? (react_1.default.createElement(Typo2_1.UI_BODY_SM, null, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
185
|
+
react_1.default.createElement(index_styled_1.InputContainerStyled, { type: type, disabled: disabled, iconAfter: iconAfter, onClick: function () { return inputRef.current.focus(); } },
|
|
186
|
+
icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: S ? 12 : 16, onClick: !disabled ? iconOnClick || null : undefined })),
|
|
187
|
+
react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size === "S" ? "UI_BODY" : "UI_BODY_SM", id: id, type: type, name: type, disabled: disabled, placeholder: localize(placeholder), value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur ? function (e) { return handleValidate(e, onBlur); } : onBlur, size: size, onFocus: onFocus, autoComplete: "off" }),
|
|
188
|
+
validationStatus === "loading" && (react_1.default.createElement("div", null,
|
|
189
|
+
react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
|
|
190
|
+
(validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
|
|
191
|
+
react_1.default.createElement(BadgeVetted, { size: 26 }))),
|
|
192
|
+
clearBtn && clearBtnEnabled && (react_1.default.createElement(ClearButton_1.ClearButton, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled })),
|
|
193
|
+
actionBtn && (react_1.default.createElement(ActionButton_1.ActionButton, { value: actionBtn.text || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled }))),
|
|
194
|
+
displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
|
|
195
|
+
(validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.error })),
|
|
196
|
+
react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,
|
|
197
|
+
react_1.default.createElement("div", { style: { display: 'flex' } },
|
|
198
|
+
!((validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success") && validationStatus.msg,
|
|
199
|
+
validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { to: validationStatus.link.to, style: { marginLeft: "0.5rem" } }, validationStatus.link.text))))))))));
|
|
197
200
|
}
|
|
198
201
|
exports.TextInput = TextInput;
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
if (props.disabled)
|
|
206
|
-
return;
|
|
207
|
-
e.preventDefault();
|
|
208
|
-
setShowPassword(function (prev) { return !prev; });
|
|
209
|
-
};
|
|
210
|
-
return (react_1.default.createElement(TextInput, __assign({ placeholder: "Enter password...", type: showPassword ? "text" : "password", iconOnClick: toggleShowPassword, iconAfter: true, icon: icon }, props)));
|
|
211
|
-
};
|
|
212
|
-
exports.PasswordInput = PasswordInput;
|
|
213
|
-
var EmailInput = function (_a) {
|
|
214
|
-
var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
|
|
215
|
-
var handleValidation = function (value) {
|
|
216
|
-
var regEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
217
|
-
var errorObj = regEx.test(value)
|
|
218
|
-
? ""
|
|
219
|
-
: { type: "error", msg: "Enter a valid email address" };
|
|
220
|
-
if (passValidationErrorToFormValidation) {
|
|
221
|
-
passValidationErrorToFormValidation((errorObj === null || errorObj === void 0 ? void 0 : errorObj.type) || "success");
|
|
222
|
-
}
|
|
223
|
-
return errorObj;
|
|
224
|
-
};
|
|
225
|
-
return (react_1.default.createElement(TextInput, __assign({ type: "email", placeholder: "Enter email...", handleValidation: handleValidation }, props)));
|
|
226
|
-
};
|
|
227
|
-
exports.EmailInput = EmailInput;
|
|
228
|
-
var PhoneInput = function (_a) {
|
|
229
|
-
var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
|
|
230
|
-
var handleValidation = function (value) {
|
|
231
|
-
var errorObj;
|
|
232
|
-
if (isNaN(value)) {
|
|
233
|
-
errorObj = { type: "error", msg: "Enter a valid phone number" };
|
|
234
|
-
if (passValidationErrorToFormValidation)
|
|
235
|
-
passValidationErrorToFormValidation(errorObj.type);
|
|
236
|
-
return errorObj;
|
|
237
|
-
}
|
|
238
|
-
if (value.length < 9) {
|
|
239
|
-
errorObj = { type: "error", msg: "Enter a valid phone number" };
|
|
240
|
-
if (passValidationErrorToFormValidation)
|
|
241
|
-
passValidationErrorToFormValidation(errorObj.type);
|
|
242
|
-
return errorObj;
|
|
243
|
-
}
|
|
244
|
-
//else
|
|
245
|
-
if (passValidationErrorToFormValidation)
|
|
246
|
-
passValidationErrorToFormValidation("success");
|
|
247
|
-
};
|
|
248
|
-
return (react_1.default.createElement(TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: 11 }, props)));
|
|
249
|
-
};
|
|
250
|
-
exports.PhoneInput = PhoneInput;
|
|
251
|
-
var URLInput = function (_a) {
|
|
252
|
-
var _b = _a.routesAreValidInputs, routesAreValidInputs = _b === void 0 ? false : _b, //if we want react route declarations to be considered as 'valid' then set this to true
|
|
253
|
-
validationPlugin = _a.validationPlugin, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, content = _a.content, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "passValidationErrorToFormValidation", "content"]);
|
|
254
|
-
var handleValidation = function (value) { return __awaiter(void 0, void 0, void 0, function () {
|
|
255
|
-
var pluginResponse, successObj, response, successObj, err_1, successObj, errorObj;
|
|
256
|
-
return __generator(this, function (_a) {
|
|
257
|
-
switch (_a.label) {
|
|
258
|
-
case 0:
|
|
259
|
-
if (!validationPlugin) return [3 /*break*/, 2];
|
|
260
|
-
return [4 /*yield*/, validationPlugin({
|
|
261
|
-
value: value,
|
|
262
|
-
content: content,
|
|
263
|
-
passValidationErrorToFormValidation: passValidationErrorToFormValidation,
|
|
264
|
-
})];
|
|
265
|
-
case 1:
|
|
266
|
-
pluginResponse = _a.sent();
|
|
267
|
-
if (pluginResponse)
|
|
268
|
-
return [2 /*return*/, pluginResponse];
|
|
269
|
-
_a.label = 2;
|
|
270
|
-
case 2:
|
|
271
|
-
//else
|
|
272
|
-
//if routesAreValidInputs, then first validate for a route
|
|
273
|
-
if (routesAreValidInputs && value.substring(0, 1) === "/") {
|
|
274
|
-
successObj = { type: "success", msg: "valid route" };
|
|
275
|
-
if (passValidationErrorToFormValidation)
|
|
276
|
-
passValidationErrorToFormValidation(successObj.type);
|
|
277
|
-
return [2 /*return*/, successObj];
|
|
278
|
-
}
|
|
279
|
-
//else validate for a url
|
|
280
|
-
if (!/^https?:\/\//i.test(value)) {
|
|
281
|
-
value = "https://" + value;
|
|
282
|
-
}
|
|
283
|
-
_a.label = 3;
|
|
284
|
-
case 3:
|
|
285
|
-
_a.trys.push([3, 5, , 6]);
|
|
286
|
-
return [4 /*yield*/, fetch(value)];
|
|
287
|
-
case 4:
|
|
288
|
-
response = _a.sent();
|
|
289
|
-
if (response.status !== 200)
|
|
290
|
-
throw new Error("");
|
|
291
|
-
successObj = { type: "success", msg: "valid url" };
|
|
292
|
-
if (passValidationErrorToFormValidation)
|
|
293
|
-
passValidationErrorToFormValidation(successObj.type);
|
|
294
|
-
return [2 /*return*/, successObj];
|
|
295
|
-
case 5:
|
|
296
|
-
err_1 = _a.sent();
|
|
297
|
-
if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(value)) {
|
|
298
|
-
successObj = { type: "success", msg: "valid url" };
|
|
299
|
-
if (passValidationErrorToFormValidation)
|
|
300
|
-
passValidationErrorToFormValidation(successObj.type);
|
|
301
|
-
return [2 /*return*/, successObj];
|
|
302
|
-
}
|
|
303
|
-
errorObj = { type: "error", msg: "Enter a valid url..." };
|
|
304
|
-
if (passValidationErrorToFormValidation)
|
|
305
|
-
passValidationErrorToFormValidation(errorObj.type);
|
|
306
|
-
return [2 /*return*/, errorObj];
|
|
307
|
-
case 6: return [2 /*return*/];
|
|
308
|
-
}
|
|
309
|
-
});
|
|
310
|
-
}); };
|
|
311
|
-
return (react_1.default.createElement(TextInput, __assign({ type: "url", handleValidation: handleValidation, placeholder: "Enter a valid url..." }, props)));
|
|
312
|
-
};
|
|
313
|
-
exports.URLInput = URLInput;
|
|
314
|
-
var NumberInput = function (_a) {
|
|
315
|
-
var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
|
|
316
|
-
var min = props.min, max = props.max;
|
|
317
|
-
var handleValidation = function (value) {
|
|
318
|
-
var errorObj;
|
|
319
|
-
if (isNaN(value)) {
|
|
320
|
-
errorObj = { type: "error", msg: "Enter a number" };
|
|
321
|
-
if (passValidationErrorToFormValidation)
|
|
322
|
-
passValidationErrorToFormValidation(errorObj.type);
|
|
323
|
-
return errorObj;
|
|
324
|
-
}
|
|
325
|
-
if (min && value < min) {
|
|
326
|
-
errorObj = {
|
|
327
|
-
type: "error",
|
|
328
|
-
msg: "Enter value greater than or equal to ".concat(min),
|
|
329
|
-
};
|
|
330
|
-
if (passValidationErrorToFormValidation)
|
|
331
|
-
passValidationErrorToFormValidation(errorObj.type);
|
|
332
|
-
return errorObj;
|
|
333
|
-
}
|
|
334
|
-
if (max && value > max) {
|
|
335
|
-
errorObj = {
|
|
336
|
-
type: "error",
|
|
337
|
-
msg: "Enter value less than or equal to ".concat(max),
|
|
338
|
-
};
|
|
339
|
-
if (passValidationErrorToFormValidation)
|
|
340
|
-
passValidationErrorToFormValidation(errorObj.type);
|
|
341
|
-
return errorObj;
|
|
342
|
-
}
|
|
343
|
-
//else
|
|
344
|
-
if (passValidationErrorToFormValidation)
|
|
345
|
-
passValidationErrorToFormValidation("success");
|
|
346
|
-
};
|
|
347
|
-
return (react_1.default.createElement(TextInput
|
|
348
|
-
// type="number"
|
|
349
|
-
, __assign({
|
|
350
|
-
// type="number"
|
|
351
|
-
handleValidation: handleValidation, placeholder: "Enter Number..." }, props)));
|
|
202
|
+
var Inputs = {
|
|
203
|
+
EmailInput: EmailInput_1.EmailInput,
|
|
204
|
+
NumberInput: NumberInput_1.NumberInput,
|
|
205
|
+
PhoneInput: PhoneInput_1.PhoneInput,
|
|
206
|
+
PasswordInput: PasswordInput_1.PasswordInput,
|
|
207
|
+
URLInput: URLInput_1.URLInput,
|
|
352
208
|
};
|
|
353
|
-
exports.NumberInput = NumberInput;
|
|
@@ -33,7 +33,7 @@ var mixins_1 = require("../../../themes/mixins");
|
|
|
33
33
|
var themes_1 = require("../../themes");
|
|
34
34
|
var globalStyles_1 = require("../../themes/globalStyles");
|
|
35
35
|
var getColorValue = function (status) {
|
|
36
|
-
return status === "error" ? themes_1.colors.
|
|
36
|
+
return status === "error" ? themes_1.colors.error : status === "success" && themes_1.colors.green;
|
|
37
37
|
};
|
|
38
38
|
exports.MsgContainerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 2px;\n display: flex;\n align-items: center;\n gap: 2px;\n ", "\n"], ["\n margin-top: 2px;\n display: flex;\n align-items: center;\n gap: 2px;\n ", "\n"])), function (_a) {
|
|
39
39
|
var status = _a.status;
|
|
@@ -55,7 +55,10 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_6
|
|
|
55
55
|
var readOnly = _a.readOnly;
|
|
56
56
|
return readOnly && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
57
57
|
});
|
|
58
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: ", ";\n border: none;\n outline: none;\n flex-grow: 1;\n background: transparent;\n color: inherit;\n\n &:-webkit-autofill {\n transition-delay: 9999s;\n }\n\n ::placeholder {\n color: ", ";\n opacity: 1;\n }\n"], ["\n height: ", ";\n border: none;\n outline: none;\n flex-grow: 1;\n background: transparent;\n color: inherit;\n\n &:-webkit-autofill {\n transition-delay: 9999s;\n }\n\n ::placeholder {\n color: ", ";\n opacity: 1;\n }\n"])),
|
|
58
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n height: ", ";\n border: none;\n outline: none;\n flex-grow: 1;\n background: transparent;\n color: inherit;\n\n &:-webkit-autofill {\n transition-delay: 9999s;\n }\n\n ::placeholder {\n color: ", ";\n opacity: 1;\n }\n"], ["\n height: ", ";\n border: none;\n outline: none;\n flex-grow: 1;\n background: transparent;\n color: inherit;\n\n &:-webkit-autofill {\n transition-delay: 9999s;\n }\n\n ::placeholder {\n color: ", ";\n opacity: 1;\n }\n"])), function (_a) {
|
|
59
|
+
var size = _a.size;
|
|
60
|
+
return size === "S" ? "32px" : "36px";
|
|
61
|
+
}, function (_a) {
|
|
59
62
|
var disabled = _a.disabled;
|
|
60
63
|
return (disabled ? themes_1.colors.grey40 : themes_1.colors.grey60);
|
|
61
64
|
});
|
|
@@ -38,6 +38,7 @@ export declare const UI_BODY_BOLD_SM: React.FunctionComponent<TypoCompProps>;
|
|
|
38
38
|
export declare const UI_PARAGRAPH: React.FunctionComponent<TypoCompProps>;
|
|
39
39
|
export declare const UI_PARAGRAPH_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
40
40
|
export declare const UI_CAPTION: React.FunctionComponent<TypoCompProps>;
|
|
41
|
+
export declare const UI_CAPTION_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
41
42
|
export declare const UI_TAG: React.FunctionComponent<TypoCompProps>;
|
|
42
43
|
export declare const UI_HELPTEXT: React.FunctionComponent<TypoCompProps>;
|
|
43
44
|
export declare const UI_STAT_LG: React.FunctionComponent<TypoCompProps>;
|
|
@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SEMIBOLD_SM = exports.UI_BODY_SEMIBOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
|
|
28
|
+
exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION_BOLD = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SEMIBOLD_SM = exports.UI_BODY_SEMIBOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var index_styled_1 = require("./index.styled");
|
|
31
31
|
var utilsOolib_1 = require("../../../utilsOolib");
|
|
@@ -97,6 +97,8 @@ var UI_PARAGRAPH_BOLD = function (props) { return react_1.default.createElement(
|
|
|
97
97
|
exports.UI_PARAGRAPH_BOLD = UI_PARAGRAPH_BOLD;
|
|
98
98
|
var UI_CAPTION = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_STYLED }); };
|
|
99
99
|
exports.UI_CAPTION = UI_CAPTION;
|
|
100
|
+
var UI_CAPTION_BOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_BOLD_STYLED }); };
|
|
101
|
+
exports.UI_CAPTION_BOLD = UI_CAPTION_BOLD;
|
|
100
102
|
var UI_TAG = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_TAG_STYLED }); };
|
|
101
103
|
exports.UI_TAG = UI_TAG;
|
|
102
104
|
var UI_HELPTEXT = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_HELPTEXT_STYLED }); };
|
|
@@ -12,6 +12,7 @@ export declare const UI_BODY_BOLD_SM_STYLED: import("styled-components").StyledC
|
|
|
12
12
|
export declare const UI_PARAGRAPH_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
13
13
|
export declare const UI_PARAGRAPH_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
14
14
|
export declare const UI_CAPTION_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
15
|
+
export declare const UI_CAPTION_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
15
16
|
export declare const UI_TAG_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
16
17
|
export declare const UI_HELPTEXT_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
17
18
|
export declare const UI_STAT_LG_STYLED: import("styled-components").StyledComponent<"h2", any, {}, never>;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SEMIBOLD_SM_STYLED = exports.UI_BODY_SEMIBOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
|
|
10
|
+
exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_BOLD_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SEMIBOLD_SM_STYLED = exports.UI_BODY_SEMIBOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var typo_1 = require("../../themes/typo");
|
|
13
13
|
// UI Fonts
|
|
@@ -25,22 +25,23 @@ exports.UI_BODY_BOLD_SM_STYLED = styled_components_1.default.p(templateObject_11
|
|
|
25
25
|
exports.UI_PARAGRAPH_STYLED = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH);
|
|
26
26
|
exports.UI_PARAGRAPH_BOLD_STYLED = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH_BOLD);
|
|
27
27
|
exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION);
|
|
28
|
-
exports.
|
|
29
|
-
exports.
|
|
30
|
-
exports.
|
|
31
|
-
exports.
|
|
28
|
+
exports.UI_CAPTION_BOLD_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_BOLD);
|
|
29
|
+
exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TAG);
|
|
30
|
+
exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HELPTEXT);
|
|
31
|
+
exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_STAT_LG);
|
|
32
|
+
exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
32
33
|
// Content Fonts
|
|
33
34
|
])), typo_1.typo.UI_STAT_SM);
|
|
34
35
|
// Content Fonts
|
|
35
|
-
exports.CONTENT_H1_STYLED = styled_components_1.default.h1(
|
|
36
|
-
exports.CONTENT_H2_STYLED = styled_components_1.default.h2(
|
|
37
|
-
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(
|
|
38
|
-
exports.CONTENT_BODY_STYLED = styled_components_1.default.p(
|
|
39
|
-
exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(
|
|
40
|
-
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(
|
|
41
|
-
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(
|
|
42
|
-
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(
|
|
43
|
-
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(
|
|
44
|
-
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(
|
|
45
|
-
exports.TYPO_V2_CLASSES = styled_components_1.default.div(
|
|
46
|
-
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, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
|
|
36
|
+
exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", " \n "], ["\n ", " \n "])), typo_1.typo.CONTENT_H1);
|
|
37
|
+
exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H2);
|
|
38
|
+
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H3);
|
|
39
|
+
exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY);
|
|
40
|
+
exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
|
|
41
|
+
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
|
|
42
|
+
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
|
|
43
|
+
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_QUOTE);
|
|
44
|
+
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
|
|
45
|
+
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
|
|
46
|
+
exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n\n .UI_BODY_BOLD {\n ", "\n }\n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n \n .UI_TAG {\n ", "\n }\n \n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"], ["\n .UI_DISPLAY {\n ", "\n }\n\n .UI_HEADLINE {\n ", "\n }\n\n .UI_HEADLINE_SM {\n ", "\n }\n\n .UI_TITLE {\n ", "\n }\n\n\n .UI_TITLE_SM {\n ", "\n }\n\n .UI_BODY {\n ", "\n }\n\n .UI_BODY_SM {\n ", "\n }\n\n .UI_BODY_SEMIBOLD {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM {\n ", "\n } \n\n\n .UI_BODY_BOLD {\n ", "\n }\n\n .UI_BODY_BOLD_SM {\n ", "\n }\n\n .UI_PARAGRAPH {\n ", "\n }\n\n .UI_PARAGRAPH_BOLD {\n ", "\n }\n\n .UI_CAPTION {\n ", "\n }\n\n \n .UI_TAG {\n ", "\n }\n \n .UI_HELPTEXT {\n ", "\n }\n\n .UI_STAT_LG {\n ", "\n }\n\n .UI_STAT_SM {\n ", "\n }\n\n\n .CONTENT_H1 {\n ", "\n }\n .CONTENT_H2 {\n ", "\n }\n .CONTENT_H3 {\n ", "\n }\n .CONTENT_BODY {\n ", "\n }\n\n .CONTENT_BODY_BOLD {\n ", "\n }\n .CONTENT_BODY_ITALIC {\n ", "\n }\n .CONTENT_BODY_BOLD_ITALIC {\n ", "\n }\n .CONTENT_QUOTE {\n ", "\n }\n\n .CONTENT_TITLE_POSTIT {\n ", "\n }\n .CONTENT_BODY_POSTIT {\n ", "\n }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_TAG, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
|
|
47
|
+
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, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export declare const globalInputHeight = "36px";
|
|
2
1
|
export declare const globalInputElemPadding_v2: import("styled-components").FlattenSimpleInterpolation;
|
|
3
2
|
export declare const globalInputElemHover_v2: import("styled-components").FlattenSimpleInterpolation;
|
|
4
3
|
export declare const globalInputElemFocused_v2: import("styled-components").FlattenSimpleInterpolation;
|
|
@@ -4,10 +4,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.globalInputElemFocused_v2 = exports.globalInputElemHover_v2 = exports.globalInputElemPadding_v2 =
|
|
7
|
+
exports.globalInputElemFocused_v2 = exports.globalInputElemHover_v2 = exports.globalInputElemPadding_v2 = void 0;
|
|
8
8
|
var styled_components_1 = require("styled-components");
|
|
9
9
|
var colors_1 = require("./colors");
|
|
10
|
-
exports.globalInputHeight = '36px';
|
|
11
10
|
exports.globalInputElemPadding_v2 = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 10px;\n"], ["\n padding: 0 10px;\n"])));
|
|
12
11
|
exports.globalInputElemHover_v2 = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:hover {\n &::before{\n border: 1.5px solid ", ";\n /* box-shadow: 0 4px 10px #00000012; */\n }\n }\n"], ["\n &:hover {\n &::before{\n border: 1.5px solid ", ";\n /* box-shadow: 0 4px 10px #00000012; */\n }\n }\n"])), colors_1.colors.grey30);
|
|
13
12
|
exports.globalInputElemFocused_v2 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n&:focus-within {\n &::before{\n border: 1.5px solid ", ";\n box-shadow: 0 4px 10px #00000012;\n }\n }\n"], ["\n&:focus-within {\n &::before{\n border: 1.5px solid ", ";\n box-shadow: 0 4px 10px #00000012;\n }\n }\n"])), colors_1.colors.grey80);
|
package/dist/v2/themes/typo.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export declare const typo: {
|
|
|
13
13
|
UI_PARAGRAPH: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
14
14
|
UI_PARAGRAPH_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
15
15
|
UI_CAPTION: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
16
|
+
UI_CAPTION_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
16
17
|
UI_TAG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
17
18
|
UI_HELPTEXT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
18
19
|
UI_STAT_LG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
package/dist/v2/themes/typo.js
CHANGED
|
@@ -34,23 +34,24 @@ var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_14 || (templat
|
|
|
34
34
|
var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 130%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 130%;\n font-weight: 400;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
35
35
|
var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 130%;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 130%;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
36
36
|
var UI_CAPTION = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
var
|
|
45
|
-
var
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var
|
|
37
|
+
var UI_CAPTION_BOLD = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
38
|
+
var UI_TAG = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 13px;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"], ["\n font-size: 10px;\n line-height: 13px;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
39
|
+
var UI_HELPTEXT = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400; \n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 16px;\n font-weight: 400; \n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
40
|
+
var UI_STAT_LG = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n font-size: 24px;\n line-height: 24px;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 24px;\n line-height: 24px;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
41
|
+
var UI_STAT_SM = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 18px;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 18px;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
42
|
+
var CONTENT_H1 = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n font-size: 36px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "], ["\n font-size: 36px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "])), contentFont, fontCss);
|
|
43
|
+
var CONTENT_H2 = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n font-size: 25px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "], ["\n font-size: 25px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n "])), contentFont, fontCss);
|
|
44
|
+
var CONTENT_H3 = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 18px;\n line-height: 140%;\n font-weight: 700;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
45
|
+
var CONTENT_BODY = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n font-size: 15px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 15px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
46
|
+
var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
47
|
+
var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n font-style: italic;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n font-style: italic;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
48
|
+
var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n font-style: italic;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 600;\n font-style: italic;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
49
|
+
var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n padding: 0 16px;\n font-size: 24px;\n line-height: 35.04px;\n font-weight: 400;\n font-style: italic;\n position: relative;\n ::before {\n /* Quote line (left) */\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: inherit; \n width: 6px; \n background-color: ", "; // temp colors need to replace with material colors */\n }\n ", ";\n ", ";\n"], ["\n padding: 0 16px;\n font-size: 24px;\n line-height: 35.04px;\n font-weight: 400;\n font-style: italic;\n position: relative;\n ::before {\n /* Quote line (left) */\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: inherit; \n width: 6px; \n background-color: ", "; // temp colors need to replace with material colors */\n }\n ", ";\n ", ";\n"])), function (_a) {
|
|
49
50
|
var invert = _a.invert, colors = _a.theme.colors;
|
|
50
51
|
return invert ? colors.greyColor40 : (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
51
52
|
}, contentFont, fontCss);
|
|
52
|
-
var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(
|
|
53
|
-
var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(
|
|
53
|
+
var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n line-height: 130%;\n ", ";\n ", ";\n"], ["\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n line-height: 130%;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
54
|
+
var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 130%;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 130%;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
54
55
|
exports.typo = {
|
|
55
56
|
UI_DISPLAY: UI_DISPLAY,
|
|
56
57
|
UI_HEADLINE: UI_HEADLINE,
|
|
@@ -66,6 +67,7 @@ exports.typo = {
|
|
|
66
67
|
UI_PARAGRAPH: UI_PARAGRAPH,
|
|
67
68
|
UI_PARAGRAPH_BOLD: UI_PARAGRAPH_BOLD,
|
|
68
69
|
UI_CAPTION: UI_CAPTION,
|
|
70
|
+
UI_CAPTION_BOLD: UI_CAPTION_BOLD,
|
|
69
71
|
UI_TAG: UI_TAG,
|
|
70
72
|
UI_HELPTEXT: UI_HELPTEXT,
|
|
71
73
|
UI_STAT_LG: UI_STAT_LG,
|
|
@@ -81,4 +83,4 @@ exports.typo = {
|
|
|
81
83
|
CONTENT_TITLE_POSTIT: CONTENT_TITLE_POSTIT,
|
|
82
84
|
CONTENT_BODY_POSTIT: CONTENT_BODY_POSTIT
|
|
83
85
|
};
|
|
84
|
-
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, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
|
|
86
|
+
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, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
|