oolib 2.140.0 → 2.141.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/components/Dropdowns/comps/SelectTagsInput/index.js +1 -1
- package/dist/components/ImageInput/comps/Placeholder/index.js +3 -1
- package/dist/components/ImageInput/index.js +3 -1
- package/dist/components/VideoInput/comps/EmbedLinkModal.d.ts +1 -2
- package/dist/components/VideoInput/comps/EmbedLinkModal.js +8 -6
- package/dist/components/VideoInput/index.js +9 -5
- package/dist/components/VideoInput/utils/index.d.ts +4 -0
- package/dist/components/VideoInput/utils/index.js +29 -0
- package/dist/stories/v2/components/BlockLabel.stories copy.d.ts +71 -0
- package/dist/stories/v2/components/BlockLabel.stories copy.js +106 -0
- package/dist/stories/v2/components/BlockLabel.stories.d.ts +71 -0
- package/dist/stories/v2/components/BlockLabel.stories.js +106 -0
- package/dist/stories/v2/themes/Typo.stories.js +1 -0
- package/dist/v2/components/BlockLabel/index.d.ts +2 -0
- package/dist/v2/components/BlockLabel/index.js +67 -0
- package/dist/v2/components/BlockLabel/index.styled.d.ts +2 -0
- package/dist/v2/components/BlockLabel/index.styled.js +14 -0
- 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 +23 -22
- package/dist/v2/themes/typo.d.ts +1 -0
- package/dist/v2/themes/typo.js +32 -30
- package/package.json +1 -1
|
@@ -75,7 +75,7 @@ var SelectTagsInput = function (_a) {
|
|
|
75
75
|
? themes_1.colors.greyColor40
|
|
76
76
|
: invert
|
|
77
77
|
? themes_1.colors.white
|
|
78
|
-
: themes_1.colors.greyColor80 }, "Selected Tags:")));
|
|
78
|
+
: themes_1.colors.greyColor80 }, "".concat(localize('Selected Tags'), ":"))));
|
|
79
79
|
};
|
|
80
80
|
var genSelectComp = function () {
|
|
81
81
|
// const minHeightStyle = minHeight
|
|
@@ -48,6 +48,7 @@ var FileUploadWrapper_1 = require("../../../FileUploadWrapper");
|
|
|
48
48
|
var ModalConfirm_1 = require("../../../Modals/ModalConfirm");
|
|
49
49
|
var genIcon_1 = require("../../../Dropdowns/utils/genIcon");
|
|
50
50
|
var styled_1 = require("./styled");
|
|
51
|
+
var utilsOolib_1 = require("../../../../utilsOolib");
|
|
51
52
|
var ImageSquare = icons_1.icons.ImageSquare;
|
|
52
53
|
var greyColor100 = themes_1.colors.greyColor100;
|
|
53
54
|
var Placeholder = function (_a) {
|
|
@@ -84,6 +85,7 @@ var Placeholder = function (_a) {
|
|
|
84
85
|
handleUpload(__assign({}, uploadArgs));
|
|
85
86
|
setShowModal(false);
|
|
86
87
|
};
|
|
88
|
+
var localize = (0, utilsOolib_1.useLocale)();
|
|
87
89
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
88
90
|
react_1.default.createElement(AspectRatioShell_1.default, { aspectRatio: aspectRatio, containerShape: containerShape, stretchToFullHeight: stretchToFullHeight, onShellPrepared: decideUIStyle },
|
|
89
91
|
react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { styledPlaceholderWrapperRef: styledPlaceholderWrapperRef, uploadProgress: uploadProgress, isLoading: isLoading, containerShape: containerShape, multiple: multiple, smallPlaceholderUI: smallPlaceholderUI, mediaType: "image", handleUpload: handleUpload, onChange: onChange, value: value, id: id, inputRef: inputRef },
|
|
@@ -92,7 +94,7 @@ var Placeholder = function (_a) {
|
|
|
92
94
|
react_1.default.createElement(Typo_1.SANS_0, { semibold: true }, dropzoneLabel),
|
|
93
95
|
showOptionalLabelInDropzone && isRequired === false && (react_1.default.createElement(Typo_1.SANS_0, null, "(optional)")))) : (react_1.default.createElement(react_1.Fragment, null,
|
|
94
96
|
react_1.default.createElement(ImageSquare, { size: 30, color: greyColor100 }),
|
|
95
|
-
react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(dropzoneLabel, " ").concat(showOptionalLabelInDropzone && isRequired === false
|
|
97
|
+
react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, "".concat(localize(dropzoneLabel), " ").concat(showOptionalLabelInDropzone && isRequired === false
|
|
96
98
|
? "(optional)"
|
|
97
99
|
: "")),
|
|
98
100
|
react_1.default.createElement(Typo_1.SANS_2, null, dropzoneSublabel))),
|
|
@@ -22,6 +22,7 @@ var InlineImageInput_1 = require("./comps/InlineImageInput");
|
|
|
22
22
|
var ImageInputContext_1 = require("./ImageInputContext");
|
|
23
23
|
var BlockLabel_1 = require("../BlockLabel");
|
|
24
24
|
var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
25
|
+
var utilsOolib_1 = require("../../utilsOolib");
|
|
25
26
|
/**
|
|
26
27
|
* maybe should pass uploading placeholders for gallery thumbnails from gallery slider (just like its done for slider shell)
|
|
27
28
|
*
|
|
@@ -37,7 +38,8 @@ function ImageInput(_a) {
|
|
|
37
38
|
isInRTE = _a.isInRTE;
|
|
38
39
|
var props = arguments[0];
|
|
39
40
|
var showOptionalLabelInDropzone = !props.label && !props.sublabel;
|
|
40
|
-
|
|
41
|
+
var localize = (0, utilsOolib_1.useLocale)();
|
|
42
|
+
return (react_1.default.createElement(ImageInputContext_1.ImageInputContextProvider, { value: value, onChange: onChange, id: id, allowedFormats: allowedFormats, formatConvertConfig: formatConvertConfig, folderName: folderName, bucketEnv: bucketEnv, multiple: multiple, aspectRatio: aspectRatio, readOnly: readOnly, enableCaptions: enableCaptions, defaultImageSpread: defaultImageSpread, invert: invert, containerShape: containerShape, stretchToFullHeight: stretchToFullHeight, disableImageBorder: disableImageBorder, omitEditorTools: omitEditorTools, dropzoneLabel: dropzoneLabel || (multiple ? "".concat(localize('Add Images'), " ( max 10 )") : "Add Image"),
|
|
41
43
|
dropzoneSublabel: dropzoneSublabel ||
|
|
42
44
|
"Supports: ".concat(allowedFormats.map(function (f) { return f.toUpperCase(); }).join(", ")), showOptionalLabelInDropzone: showOptionalLabelInDropzone, // in cases like cover image scenario, we wanna show the 'optional' label in the dropzone area, rather than label area
|
|
43
45
|
isRequired: isRequired, files: files, isInRTE: isInRTE, showImageUploadCaution: showImageUploadCaution },
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
export function EmbedLinkModal({ id, setShowEmbedLinkModal, value, createVideoPreview,
|
|
1
|
+
export function EmbedLinkModal({ id, setShowEmbedLinkModal, value, createVideoPreview, onChange, invert }: {
|
|
2
2
|
id: any;
|
|
3
3
|
setShowEmbedLinkModal: any;
|
|
4
4
|
value: any;
|
|
5
5
|
createVideoPreview: any;
|
|
6
|
-
canPlay: any;
|
|
7
6
|
onChange: any;
|
|
8
7
|
invert: any;
|
|
9
8
|
}): React.JSX.Element;
|
|
@@ -30,18 +30,20 @@ var TextInputs_1 = require("../../TextInputs");
|
|
|
30
30
|
var Paddings_1 = require("../../Paddings");
|
|
31
31
|
var Buttons_1 = require("../../Buttons");
|
|
32
32
|
var styled_1 = require("../styled");
|
|
33
|
+
var utils_1 = require("../utils");
|
|
33
34
|
var EmbedLinkModal = function (_a) {
|
|
34
|
-
var _b;
|
|
35
|
-
var id = _a.id, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, value = _a.value, createVideoPreview = _a.createVideoPreview,
|
|
36
|
-
var
|
|
37
|
-
var
|
|
35
|
+
var _b, _c, _d;
|
|
36
|
+
var id = _a.id, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, value = _a.value, createVideoPreview = _a.createVideoPreview, onChange = _a.onChange, invert = _a.invert;
|
|
37
|
+
var _e = (0, react_1.useState)(value), localValue = _e[0], setLocalValue = _e[1];
|
|
38
|
+
var _f = (0, react_1.useState)(false), isValidURl = _f[0], setIsValidUrl = _f[1];
|
|
39
|
+
var isPreviewableGoogleDriveUrl = (0, utils_1.verifyAndGetGoogleDrivePreviewableUrl)((_b = localValue === null || localValue === void 0 ? void 0 : localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl).isPreviewableGoogleDriveUrl;
|
|
38
40
|
return (react_1.default.createElement(Modal_1.Modal, { title: "Add URL Embed", subTitle: "Paste the link of the video you want to share. ",
|
|
39
41
|
// invert={invert}
|
|
40
42
|
desktopWidth: "50vw", fitToContentHeight: true, onClose: function () {
|
|
41
43
|
setShowEmbedLinkModal(false);
|
|
42
44
|
} },
|
|
43
45
|
react_1.default.createElement("div", { style: { padding: '2rem' } },
|
|
44
|
-
react_1.default.createElement(TextInputs_1.URLInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((
|
|
46
|
+
react_1.default.createElement(TextInputs_1.URLInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_c = localValue[0]) === null || _c === void 0 ? void 0 : _c.publicUrl), placeholder: "Paste a url here", clearBtn: { text: 'clear' }, displayValidationMsg: false, passValidationErrorToFormValidation: function (status) {
|
|
45
47
|
if (status === "error") {
|
|
46
48
|
setIsValidUrl(false);
|
|
47
49
|
}
|
|
@@ -52,7 +54,7 @@ var EmbedLinkModal = function (_a) {
|
|
|
52
54
|
(localValue && isValidURl) && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
|
|
53
55
|
isValidURl && createVideoPreview({ value: localValue }),
|
|
54
56
|
react_1.default.createElement(styled_1.StyledModalActionButtons, null,
|
|
55
|
-
react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: !canPlay(localValue) || !localValue,
|
|
57
|
+
react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: (!(0, utils_1.canPlay)((_d = localValue === null || localValue === void 0 ? void 0 : localValue[0]) === null || _d === void 0 ? void 0 : _d.publicUrl) && !isPreviewableGoogleDriveUrl) || !localValue,
|
|
56
58
|
// invert={invert}
|
|
57
59
|
onClick: function () {
|
|
58
60
|
onChange(id, localValue);
|
|
@@ -51,6 +51,7 @@ var bannerContext_1 = require("../Banners/bannerContext");
|
|
|
51
51
|
var VideoActionMenu_1 = require("./comps/VideoActionMenu");
|
|
52
52
|
var FileUploadWrapper_1 = require("../FileUploadWrapper");
|
|
53
53
|
var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
|
|
54
|
+
var utils_1 = require("./utils");
|
|
54
55
|
function VideoInput(_a) {
|
|
55
56
|
var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files, // //used by RTEVideoInput
|
|
56
57
|
width = _a.width, height = _a.height;
|
|
@@ -61,7 +62,6 @@ function VideoInput(_a) {
|
|
|
61
62
|
: _value;
|
|
62
63
|
var _c = (0, react_1.useState)(false), showEmbedLinkModal = _c[0], setShowEmbedLinkModal = _c[1];
|
|
63
64
|
var theme = (0, styled_components_1.useTheme)();
|
|
64
|
-
var canPlay = function (value) { var _a; return react_player_1.default.canPlay(value && ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.publicUrl)); };
|
|
65
65
|
var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
|
|
66
66
|
var _d = (0, react_1.useState)(undefined), uploadProgress = _d[0], setUploadProgress = _d[1];
|
|
67
67
|
var inputRef = (0, react_1.useRef)();
|
|
@@ -100,13 +100,17 @@ function VideoInput(_a) {
|
|
|
100
100
|
}
|
|
101
101
|
}, []);
|
|
102
102
|
var createVideoPreview = function (_a) {
|
|
103
|
-
var _b;
|
|
104
|
-
var value = _a.value,
|
|
103
|
+
var _b, _c;
|
|
104
|
+
var value = _a.value, _d = _a.actionMenuButton, actionMenuButton = _d === void 0 ? false : _d;
|
|
105
105
|
var url = value && ((_b = value[0]) === null || _b === void 0 ? void 0 : _b.publicUrl);
|
|
106
|
+
var _e = (0, utils_1.verifyAndGetGoogleDrivePreviewableUrl)(url), isPreviewableGoogleDriveUrl = _e.isPreviewableGoogleDriveUrl, googleDrivePreviewableUrl = _e.googleDrivePreviewableUrl;
|
|
106
107
|
switch (true) {
|
|
107
108
|
case !url:
|
|
108
109
|
return null;
|
|
109
|
-
case
|
|
110
|
+
case isPreviewableGoogleDriveUrl:
|
|
111
|
+
return (react_1.default.createElement("div", { style: { position: 'relative', paddingBottom: '56%' } },
|
|
112
|
+
react_1.default.createElement("iframe", { src: googleDrivePreviewableUrl, width: "100%", height: "100%", style: { position: 'absolute', top: 0, left: 0 }, allow: "autoplay", allowFullScreen: true })));
|
|
113
|
+
case !(0, utils_1.canPlay)((_c = value === null || value === void 0 ? void 0 : value[0]) === null || _c === void 0 ? void 0 : _c.publicUrl):
|
|
110
114
|
return (react_1.default.createElement(Typo_1.SANS_3_4, { color: themes_1.colors.red }, "Error displaying video. Make sure you've added the right link or you have permission to share publicly."));
|
|
111
115
|
default:
|
|
112
116
|
if (url.indexOf("&list=") !== -1) {
|
|
@@ -133,7 +137,7 @@ function VideoInput(_a) {
|
|
|
133
137
|
enableVideoUpload && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
134
138
|
react_1.default.createElement(Typo_1.SANS_2, { semibold: true, color: invert ? themes_1.colors.white_opacity60 : themes_1.colors.greyColor80 }, "OR"),
|
|
135
139
|
react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, value: "Upload A Video", icon: "UploadSimple", invert: invert, id: "videoField" }))))),
|
|
136
|
-
showEmbedLinkModal && (react_1.default.createElement(EmbedLinkModal_1.EmbedLinkModal, { setShowEmbedLinkModal: setShowEmbedLinkModal, value: value, createVideoPreview: createVideoPreview,
|
|
140
|
+
showEmbedLinkModal && (react_1.default.createElement(EmbedLinkModal_1.EmbedLinkModal, { setShowEmbedLinkModal: setShowEmbedLinkModal, value: value, createVideoPreview: createVideoPreview, onChange: onChange, id: id, invert: invert })),
|
|
137
141
|
react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
|
|
138
142
|
, accept: "video/*", ref: inputRef, style: { display: "none" }, id: "videoField", onChange: function (v) {
|
|
139
143
|
handleUpload({ files: v.target.files });
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.verifyAndGetGoogleDrivePreviewableUrl = exports.canPlay = void 0;
|
|
7
|
+
var react_player_1 = __importDefault(require("react-player"));
|
|
8
|
+
var canPlay = function (value) { return react_player_1.default.canPlay(value); };
|
|
9
|
+
exports.canPlay = canPlay;
|
|
10
|
+
var verifyAndGetGoogleDrivePreviewableUrl = function (url) {
|
|
11
|
+
var driveUrlPattern = /^(https:\/\/)?(drive\.google\.com\/)(file\/d\/|open\?id=|uc\?export=download&id=)/;
|
|
12
|
+
var isValidDriveUrl = driveUrlPattern.test(url);
|
|
13
|
+
var urlDetails = {
|
|
14
|
+
isPreviewableGoogleDriveUrl: false,
|
|
15
|
+
};
|
|
16
|
+
if (isValidDriveUrl) {
|
|
17
|
+
// converting the input URL to the format that can be previewed with iframe
|
|
18
|
+
// this regex works even if the user provide the previewable url by default as we are checking 'preview' also here
|
|
19
|
+
var fileIdPattern = /\/file\/d\/(.*?)\/(view|edit|preview)/; // Match the fileId between '/file/d/' and '/view', 'edit' or '/preview'
|
|
20
|
+
var fileIdMatch = url.match(fileIdPattern);
|
|
21
|
+
var fileId = fileIdMatch === null || fileIdMatch === void 0 ? void 0 : fileIdMatch[1];
|
|
22
|
+
if (fileId) {
|
|
23
|
+
urlDetails.googleDrivePreviewableUrl = "https://drive.google.com/file/d/".concat(fileId, "/preview");
|
|
24
|
+
urlDetails.isPreviewableGoogleDriveUrl = true;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return urlDetails;
|
|
28
|
+
};
|
|
29
|
+
exports.verifyAndGetGoogleDrivePreviewableUrl = verifyAndGetGoogleDrivePreviewableUrl;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
let title: string;
|
|
3
|
+
namespace argTypes {
|
|
4
|
+
namespace label {
|
|
5
|
+
let name: string;
|
|
6
|
+
}
|
|
7
|
+
namespace sublabel {
|
|
8
|
+
let name_1: string;
|
|
9
|
+
export { name_1 as name };
|
|
10
|
+
}
|
|
11
|
+
namespace showHints {
|
|
12
|
+
let name_2: string;
|
|
13
|
+
export { name_2 as name };
|
|
14
|
+
}
|
|
15
|
+
namespace hintsTitle {
|
|
16
|
+
let name_3: string;
|
|
17
|
+
export { name_3 as name };
|
|
18
|
+
}
|
|
19
|
+
namespace hintsBtnLabel {
|
|
20
|
+
let name_4: string;
|
|
21
|
+
export { name_4 as name };
|
|
22
|
+
}
|
|
23
|
+
namespace infoTooltip {
|
|
24
|
+
let name_5: string;
|
|
25
|
+
export { name_5 as name };
|
|
26
|
+
}
|
|
27
|
+
namespace errorMessage {
|
|
28
|
+
let name_6: string;
|
|
29
|
+
export { name_6 as name };
|
|
30
|
+
}
|
|
31
|
+
namespace isRequired {
|
|
32
|
+
let name_7: string;
|
|
33
|
+
export { name_7 as name };
|
|
34
|
+
}
|
|
35
|
+
namespace readOnly {
|
|
36
|
+
let name_8: string;
|
|
37
|
+
export { name_8 as name };
|
|
38
|
+
}
|
|
39
|
+
namespace invert {
|
|
40
|
+
let name_9: string;
|
|
41
|
+
export { name_9 as name };
|
|
42
|
+
}
|
|
43
|
+
let inputOnlyLabel: {};
|
|
44
|
+
}
|
|
45
|
+
namespace args {
|
|
46
|
+
let label_1: string;
|
|
47
|
+
export { label_1 as label };
|
|
48
|
+
let sublabel_1: string;
|
|
49
|
+
export { sublabel_1 as sublabel };
|
|
50
|
+
let showHints_1: boolean;
|
|
51
|
+
export { showHints_1 as showHints };
|
|
52
|
+
let hintsTitle_1: string;
|
|
53
|
+
export { hintsTitle_1 as hintsTitle };
|
|
54
|
+
let hintsBtnLabel_1: string;
|
|
55
|
+
export { hintsBtnLabel_1 as hintsBtnLabel };
|
|
56
|
+
let infoTooltip_1: string;
|
|
57
|
+
export { infoTooltip_1 as infoTooltip };
|
|
58
|
+
let errorMessage_1: string;
|
|
59
|
+
export { errorMessage_1 as errorMessage };
|
|
60
|
+
let isRequired_1: boolean;
|
|
61
|
+
export { isRequired_1 as isRequired };
|
|
62
|
+
let invert_1: boolean;
|
|
63
|
+
export { invert_1 as invert };
|
|
64
|
+
let readOnly_1: boolean;
|
|
65
|
+
export { readOnly_1 as readOnly };
|
|
66
|
+
let inputOnlyLabel_1: string;
|
|
67
|
+
export { inputOnlyLabel_1 as inputOnlyLabel };
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
export default _default;
|
|
71
|
+
export function Block_Label(args: any): import("react").JSX.Element;
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.Block_Label = void 0;
|
|
15
|
+
var BlockLabel_1 = require("../../../components/BlockLabel");
|
|
16
|
+
var themes_1 = require("../../../themes");
|
|
17
|
+
exports.default = {
|
|
18
|
+
title: "Oolib V 2.0/Components/BlockLabel",
|
|
19
|
+
argTypes: {
|
|
20
|
+
label: {
|
|
21
|
+
name: "Label",
|
|
22
|
+
},
|
|
23
|
+
sublabel: {
|
|
24
|
+
name: "Sub Label",
|
|
25
|
+
},
|
|
26
|
+
showHints: {
|
|
27
|
+
name: "Hints",
|
|
28
|
+
},
|
|
29
|
+
hintsTitle: {
|
|
30
|
+
name: "Hints Title",
|
|
31
|
+
},
|
|
32
|
+
hintsBtnLabel: {
|
|
33
|
+
name: "Hints button text",
|
|
34
|
+
},
|
|
35
|
+
// hintsSubtitle: {
|
|
36
|
+
// name: "Hints Subtitle",
|
|
37
|
+
// },
|
|
38
|
+
infoTooltip: {
|
|
39
|
+
name: "Info Tooltip",
|
|
40
|
+
},
|
|
41
|
+
errorMessage: {
|
|
42
|
+
name: "Error Message",
|
|
43
|
+
},
|
|
44
|
+
isRequired: {
|
|
45
|
+
name: "Required",
|
|
46
|
+
},
|
|
47
|
+
readOnly: {
|
|
48
|
+
name: "Read Only",
|
|
49
|
+
},
|
|
50
|
+
invert: {
|
|
51
|
+
name: "Invert",
|
|
52
|
+
},
|
|
53
|
+
inputOnlyLabel: {},
|
|
54
|
+
},
|
|
55
|
+
args: {
|
|
56
|
+
label: "default label",
|
|
57
|
+
sublabel: "",
|
|
58
|
+
showHints: true,
|
|
59
|
+
hintsTitle: "Hints",
|
|
60
|
+
hintsBtnLabel: "Hints",
|
|
61
|
+
// hintsSubtitle: "",
|
|
62
|
+
infoTooltip: "",
|
|
63
|
+
errorMessage: "", //gets converted into the appropriate errorMsgs prop below
|
|
64
|
+
isRequired: false,
|
|
65
|
+
invert: false,
|
|
66
|
+
readOnly: false,
|
|
67
|
+
inputOnlyLabel: "Shows only if label is not defined. AND readOnly = true",
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
var dummyData1 = [
|
|
71
|
+
"आप इस व्यक्ति को कैसे जानते हैं?",
|
|
72
|
+
"वे कहाँ रहते हैं?",
|
|
73
|
+
"क्या आप हमें इस व्यक्ति के बारे में कोई एक छोटी सी घटना बता सकते हैं? इस से पाठक को इस व्यक्ति को समझने मे आसानी होगी।",
|
|
74
|
+
"आपकी इस व्यक्ति से पहचान कैसे हुई?",
|
|
75
|
+
];
|
|
76
|
+
var dummyData2 = [
|
|
77
|
+
"What do you want to write about this person?",
|
|
78
|
+
"What did this person do?",
|
|
79
|
+
"Why are you writing this story? What should we learn from it?",
|
|
80
|
+
"What do you want to write about this person?",
|
|
81
|
+
"What did this person do?",
|
|
82
|
+
"Why are you writing this story? What should we learn from it?",
|
|
83
|
+
"What do you want to write about this person?",
|
|
84
|
+
"What did this person do?",
|
|
85
|
+
"Why are you writing this story? What should we learn from it?",
|
|
86
|
+
"What do you want to write about this person?",
|
|
87
|
+
];
|
|
88
|
+
var Block_Label = function (args) {
|
|
89
|
+
// return () => {
|
|
90
|
+
// document.getElementsByTagName("body")[0].removeChild(hintsRootElem);
|
|
91
|
+
// };
|
|
92
|
+
var errorMsgs = args.errorMessage ? args.errorMessage.split(",") : undefined;
|
|
93
|
+
return (React.createElement("div", null,
|
|
94
|
+
React.createElement("div", { style: {
|
|
95
|
+
display: "flex",
|
|
96
|
+
justifyContent: "space-between",
|
|
97
|
+
position: "relative",
|
|
98
|
+
padding: "2rem",
|
|
99
|
+
backgroundColor: args.invert ? themes_1.colors.greyColor100 : "",
|
|
100
|
+
} },
|
|
101
|
+
React.createElement("div", { style: {
|
|
102
|
+
backgroundColor: args.invert ? themes_1.colors.greyColor100 : "",
|
|
103
|
+
padding: "10px",
|
|
104
|
+
} }, (React.createElement(BlockLabel_1.BlockLabel, __assign({ id: "hints_1", hints: args.showHints ? dummyData2 : "" }, args, { errorMsgs: errorMsgs }))) || "no label provided"))));
|
|
105
|
+
};
|
|
106
|
+
exports.Block_Label = Block_Label;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
let title: string;
|
|
3
|
+
namespace argTypes {
|
|
4
|
+
namespace label {
|
|
5
|
+
let name: string;
|
|
6
|
+
}
|
|
7
|
+
namespace sublabel {
|
|
8
|
+
let name_1: string;
|
|
9
|
+
export { name_1 as name };
|
|
10
|
+
}
|
|
11
|
+
namespace showHints {
|
|
12
|
+
let name_2: string;
|
|
13
|
+
export { name_2 as name };
|
|
14
|
+
}
|
|
15
|
+
namespace hintsTitle {
|
|
16
|
+
let name_3: string;
|
|
17
|
+
export { name_3 as name };
|
|
18
|
+
}
|
|
19
|
+
namespace hintsBtnLabel {
|
|
20
|
+
let name_4: string;
|
|
21
|
+
export { name_4 as name };
|
|
22
|
+
}
|
|
23
|
+
namespace infoTooltip {
|
|
24
|
+
let name_5: string;
|
|
25
|
+
export { name_5 as name };
|
|
26
|
+
}
|
|
27
|
+
namespace errorMessage {
|
|
28
|
+
let name_6: string;
|
|
29
|
+
export { name_6 as name };
|
|
30
|
+
}
|
|
31
|
+
namespace isRequired {
|
|
32
|
+
let name_7: string;
|
|
33
|
+
export { name_7 as name };
|
|
34
|
+
}
|
|
35
|
+
namespace readOnly {
|
|
36
|
+
let name_8: string;
|
|
37
|
+
export { name_8 as name };
|
|
38
|
+
}
|
|
39
|
+
namespace invert {
|
|
40
|
+
let name_9: string;
|
|
41
|
+
export { name_9 as name };
|
|
42
|
+
}
|
|
43
|
+
let inputOnlyLabel: {};
|
|
44
|
+
}
|
|
45
|
+
namespace args {
|
|
46
|
+
let label_1: string;
|
|
47
|
+
export { label_1 as label };
|
|
48
|
+
let sublabel_1: string;
|
|
49
|
+
export { sublabel_1 as sublabel };
|
|
50
|
+
let showHints_1: boolean;
|
|
51
|
+
export { showHints_1 as showHints };
|
|
52
|
+
let hintsTitle_1: string;
|
|
53
|
+
export { hintsTitle_1 as hintsTitle };
|
|
54
|
+
let hintsBtnLabel_1: string;
|
|
55
|
+
export { hintsBtnLabel_1 as hintsBtnLabel };
|
|
56
|
+
let infoTooltip_1: string;
|
|
57
|
+
export { infoTooltip_1 as infoTooltip };
|
|
58
|
+
let errorMessage_1: string;
|
|
59
|
+
export { errorMessage_1 as errorMessage };
|
|
60
|
+
let isRequired_1: boolean;
|
|
61
|
+
export { isRequired_1 as isRequired };
|
|
62
|
+
let invert_1: boolean;
|
|
63
|
+
export { invert_1 as invert };
|
|
64
|
+
let readOnly_1: boolean;
|
|
65
|
+
export { readOnly_1 as readOnly };
|
|
66
|
+
let inputOnlyLabel_1: string;
|
|
67
|
+
export { inputOnlyLabel_1 as inputOnlyLabel };
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
export default _default;
|
|
71
|
+
export function Block_Label(args: any): import("react").JSX.Element;
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.Block_Label = void 0;
|
|
15
|
+
var BlockLabel_1 = require("../../../components/BlockLabel");
|
|
16
|
+
var themes_1 = require("../../../themes");
|
|
17
|
+
exports.default = {
|
|
18
|
+
title: "Oolib V 2.0/Components/BlockLabel",
|
|
19
|
+
argTypes: {
|
|
20
|
+
label: {
|
|
21
|
+
name: "Label",
|
|
22
|
+
},
|
|
23
|
+
sublabel: {
|
|
24
|
+
name: "Sub Label",
|
|
25
|
+
},
|
|
26
|
+
showHints: {
|
|
27
|
+
name: "Hints",
|
|
28
|
+
},
|
|
29
|
+
hintsTitle: {
|
|
30
|
+
name: "Hints Title",
|
|
31
|
+
},
|
|
32
|
+
hintsBtnLabel: {
|
|
33
|
+
name: "Hints button text",
|
|
34
|
+
},
|
|
35
|
+
// hintsSubtitle: {
|
|
36
|
+
// name: "Hints Subtitle",
|
|
37
|
+
// },
|
|
38
|
+
infoTooltip: {
|
|
39
|
+
name: "Info Tooltip",
|
|
40
|
+
},
|
|
41
|
+
errorMessage: {
|
|
42
|
+
name: "Error Message",
|
|
43
|
+
},
|
|
44
|
+
isRequired: {
|
|
45
|
+
name: "Required",
|
|
46
|
+
},
|
|
47
|
+
readOnly: {
|
|
48
|
+
name: "Read Only",
|
|
49
|
+
},
|
|
50
|
+
invert: {
|
|
51
|
+
name: "Invert",
|
|
52
|
+
},
|
|
53
|
+
inputOnlyLabel: {},
|
|
54
|
+
},
|
|
55
|
+
args: {
|
|
56
|
+
label: "default label",
|
|
57
|
+
sublabel: "",
|
|
58
|
+
showHints: true,
|
|
59
|
+
hintsTitle: "Hints",
|
|
60
|
+
hintsBtnLabel: "Hints",
|
|
61
|
+
// hintsSubtitle: "",
|
|
62
|
+
infoTooltip: "",
|
|
63
|
+
errorMessage: "", //gets converted into the appropriate errorMsgs prop below
|
|
64
|
+
isRequired: false,
|
|
65
|
+
invert: false,
|
|
66
|
+
readOnly: false,
|
|
67
|
+
inputOnlyLabel: "Shows only if label is not defined. AND readOnly = true",
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
var dummyData1 = [
|
|
71
|
+
"आप इस व्यक्ति को कैसे जानते हैं?",
|
|
72
|
+
"वे कहाँ रहते हैं?",
|
|
73
|
+
"क्या आप हमें इस व्यक्ति के बारे में कोई एक छोटी सी घटना बता सकते हैं? इस से पाठक को इस व्यक्ति को समझने मे आसानी होगी।",
|
|
74
|
+
"आपकी इस व्यक्ति से पहचान कैसे हुई?",
|
|
75
|
+
];
|
|
76
|
+
var dummyData2 = [
|
|
77
|
+
"What do you want to write about this person?",
|
|
78
|
+
"What did this person do?",
|
|
79
|
+
"Why are you writing this story? What should we learn from it?",
|
|
80
|
+
"What do you want to write about this person?",
|
|
81
|
+
"What did this person do?",
|
|
82
|
+
"Why are you writing this story? What should we learn from it?",
|
|
83
|
+
"What do you want to write about this person?",
|
|
84
|
+
"What did this person do?",
|
|
85
|
+
"Why are you writing this story? What should we learn from it?",
|
|
86
|
+
"What do you want to write about this person?",
|
|
87
|
+
];
|
|
88
|
+
var Block_Label = function (args) {
|
|
89
|
+
// return () => {
|
|
90
|
+
// document.getElementsByTagName("body")[0].removeChild(hintsRootElem);
|
|
91
|
+
// };
|
|
92
|
+
var errorMsgs = args.errorMessage ? args.errorMessage.split(",") : undefined;
|
|
93
|
+
return (React.createElement("div", null,
|
|
94
|
+
React.createElement("div", { style: {
|
|
95
|
+
display: "flex",
|
|
96
|
+
justifyContent: "space-between",
|
|
97
|
+
position: "relative",
|
|
98
|
+
padding: "2rem",
|
|
99
|
+
backgroundColor: args.invert ? themes_1.colors.greyColor100 : "",
|
|
100
|
+
} },
|
|
101
|
+
React.createElement("div", { style: {
|
|
102
|
+
backgroundColor: args.invert ? themes_1.colors.greyColor100 : "",
|
|
103
|
+
padding: "10px",
|
|
104
|
+
} }, (React.createElement(BlockLabel_1.BlockLabel, __assign({ id: "hints_1", hints: args.showHints ? dummyData2 : "" }, args, { errorMsgs: errorMsgs }))) || "no label provided"))));
|
|
105
|
+
};
|
|
106
|
+
exports.Block_Label = Block_Label;
|
|
@@ -87,6 +87,7 @@ var UIFont = function (args) { return (react_1.default.createElement("div", { st
|
|
|
87
87
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_BOLD, compName: "UI_BODY_BOLD" }),
|
|
88
88
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_SM, compName: "UI_BODY_SM" }),
|
|
89
89
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_SEMIBOLD, compName: "UI_BODY_SEMIBOLD" }),
|
|
90
|
+
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_SEMIBOLD_SM, compName: "UI_BODY_SEMIBOLD_SM" }),
|
|
90
91
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_BODY_BOLD_SM, compName: "UI_BODY_BOLD_SM" }),
|
|
91
92
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_PARAGRAPH, compName: "UI_PARAGRAPH" }),
|
|
92
93
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.UI_PARAGRAPH_BOLD, compName: "UI_PARAGRAPH_BOLD" }),
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
exports.BlockLabel = void 0;
|
|
30
|
+
var react_1 = __importStar(require("react"));
|
|
31
|
+
var Typo_1 = require("../../../components/Typo");
|
|
32
|
+
var InlineAlert_1 = require("../../../components/InlineAlert");
|
|
33
|
+
var index_styled_1 = require("./index.styled");
|
|
34
|
+
var colors_1 = require("../../../themes/colors");
|
|
35
|
+
var toArray_1 = require("../../../utils/toArray");
|
|
36
|
+
var Hints_1 = __importDefault(require("../../../components/Hints"));
|
|
37
|
+
var Tooltip_1 = require("../../../components/Tooltip");
|
|
38
|
+
var phosphor_react_1 = require("phosphor-react");
|
|
39
|
+
var Typo2_1 = require("../Typo2");
|
|
40
|
+
var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
|
|
41
|
+
var BlockLabel = function (props) {
|
|
42
|
+
var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsBtnLabel = props.hintsBtnLabel, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip;
|
|
43
|
+
var shouldCompRender = label ||
|
|
44
|
+
(!readOnly &&
|
|
45
|
+
(sublabel ||
|
|
46
|
+
inputOnlyLabel ||
|
|
47
|
+
(isRequired === false && hideOptionalLabel !== true) ||
|
|
48
|
+
(errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0));
|
|
49
|
+
var optional = readOnly ? false : isRequired === false;
|
|
50
|
+
var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return (typeof er === "object" ? er.text : er); }).join(", ");
|
|
51
|
+
//next 2 vars is for 'test link' usecase
|
|
52
|
+
var errLink = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? undefined : errorMsgs[0].link;
|
|
53
|
+
var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
|
|
54
|
+
? "danger"
|
|
55
|
+
: errorMsgs[0].type || "danger";
|
|
56
|
+
return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
|
|
57
|
+
react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
|
|
58
|
+
(label || inputOnlyLabel) && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { invert: invert, semibold: true, capitalize: true, style: { background: 'red' } }, label || inputOnlyLabel)),
|
|
59
|
+
!readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, btnlabel: hintsBtnLabel, subtitle: hintsSubtitle, hints: hints })) : null,
|
|
60
|
+
optional && !hideOptionalLabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, "(optional)")),
|
|
61
|
+
!readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,
|
|
62
|
+
infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || "right", invert: invert, debug: infoTooltip.debug, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: "infoIcon" }))),
|
|
63
|
+
!readOnly &&
|
|
64
|
+
sublabel &&
|
|
65
|
+
(0, toArray_1.toArray)(sublabel).map(function (subL, i) { return (react_1.default.createElement(Typo_1.SANS_3, { key: i, color: invert ? greyColor40 : greyColor80 }, subL)); }))));
|
|
66
|
+
};
|
|
67
|
+
exports.BlockLabel = BlockLabel;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.StyledInfoTooltipbutton = exports.StyledBlockLabel = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 0rem;\n margin-bottom: 1rem;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 0rem;\n margin-bottom: 1rem;\n position: relative;\n"])));
|
|
13
|
+
exports.StyledInfoTooltipbutton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: none;\n background: none;\n outline: none;\n"], ["\n border: none;\n background: none;\n outline: none;\n"])));
|
|
14
|
+
var templateObject_1, templateObject_2;
|
|
@@ -34,6 +34,7 @@ export declare const UI_CARDTITLE_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
|
34
34
|
export declare const UI_BODY: React.FunctionComponent<TypoCompProps>;
|
|
35
35
|
export declare const UI_BODY_SM: React.FunctionComponent<TypoCompProps>;
|
|
36
36
|
export declare const UI_BODY_SEMIBOLD: React.FunctionComponent<TypoCompProps>;
|
|
37
|
+
export declare const UI_BODY_SEMIBOLD_SM: React.FunctionComponent<TypoCompProps>;
|
|
37
38
|
export declare const UI_BODY_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
38
39
|
export declare const UI_BODY_BOLD_SM: React.FunctionComponent<TypoCompProps>;
|
|
39
40
|
export declare const UI_PARAGRAPH: 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 = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_CARDTITLE_BOLD = exports.UI_CARDTITLE = 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 = 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_CARDTITLE_BOLD = exports.UI_CARDTITLE = 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");
|
|
@@ -91,6 +91,8 @@ var UI_BODY_SM = function (props) { return react_1.default.createElement(GenComp
|
|
|
91
91
|
exports.UI_BODY_SM = UI_BODY_SM;
|
|
92
92
|
var UI_BODY_SEMIBOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_SEMIBOLD_STYLED }); };
|
|
93
93
|
exports.UI_BODY_SEMIBOLD = UI_BODY_SEMIBOLD;
|
|
94
|
+
var UI_BODY_SEMIBOLD_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_SEMIBOLD_SM_STYLED }); };
|
|
95
|
+
exports.UI_BODY_SEMIBOLD_SM = UI_BODY_SEMIBOLD_SM;
|
|
94
96
|
var UI_BODY_BOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_BOLD_STYLED }); };
|
|
95
97
|
exports.UI_BODY_BOLD = UI_BODY_BOLD;
|
|
96
98
|
var UI_BODY_BOLD_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_BODY_BOLD_SM_STYLED }); };
|
|
@@ -8,6 +8,7 @@ export declare const UI_CARDTITLE_BOLD_STYLED: import("styled-components").Style
|
|
|
8
8
|
export declare const UI_BODY_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
9
9
|
export declare const UI_BODY_SM_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
10
10
|
export declare const UI_BODY_SEMIBOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
11
|
+
export declare const UI_BODY_SEMIBOLD_SM_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
11
12
|
export declare const UI_BODY_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
12
13
|
export declare const UI_BODY_BOLD_SM_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
13
14
|
export declare const UI_PARAGRAPH_STYLED: import("styled-components").StyledComponent<"p", 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_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_CARDTITLE_BOLD_STYLED = exports.UI_CARDTITLE_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_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_CARDTITLE_BOLD_STYLED = exports.UI_CARDTITLE_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
|
|
@@ -21,27 +21,28 @@ exports.UI_CARDTITLE_BOLD_STYLED = styled_components_1.default.h3(templateObject
|
|
|
21
21
|
exports.UI_BODY_STYLED = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY);
|
|
22
22
|
exports.UI_BODY_SM_STYLED = styled_components_1.default.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SM);
|
|
23
23
|
exports.UI_BODY_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD);
|
|
24
|
-
exports.
|
|
25
|
-
exports.
|
|
26
|
-
exports.
|
|
27
|
-
exports.
|
|
28
|
-
exports.
|
|
29
|
-
exports.
|
|
30
|
-
exports.
|
|
31
|
-
exports.
|
|
32
|
-
exports.
|
|
24
|
+
exports.UI_BODY_SEMIBOLD_SM_STYLED = styled_components_1.default.p(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_SEMIBOLD_SM);
|
|
25
|
+
exports.UI_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), typo_1.typo.UI_BODY_BOLD);
|
|
26
|
+
exports.UI_BODY_BOLD_SM_STYLED = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_BODY_BOLD_SM);
|
|
27
|
+
exports.UI_PARAGRAPH_STYLED = styled_components_1.default.p(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH);
|
|
28
|
+
exports.UI_PARAGRAPH_BOLD_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_PARAGRAPH_BOLD);
|
|
29
|
+
exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION);
|
|
30
|
+
exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TAG);
|
|
31
|
+
exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HELPTEXT);
|
|
32
|
+
exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_STAT_LG);
|
|
33
|
+
exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
33
34
|
// Content Fonts
|
|
34
35
|
])), typo_1.typo.UI_STAT_SM);
|
|
35
36
|
// Content Fonts
|
|
36
|
-
exports.CONTENT_H1_STYLED = styled_components_1.default.h1(
|
|
37
|
-
exports.CONTENT_H2_STYLED = styled_components_1.default.h2(
|
|
38
|
-
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(
|
|
39
|
-
exports.CONTENT_BODY_STYLED = styled_components_1.default.p(
|
|
40
|
-
exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(
|
|
41
|
-
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(
|
|
42
|
-
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(
|
|
43
|
-
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(
|
|
44
|
-
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(
|
|
45
|
-
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(
|
|
46
|
-
exports.TYPO_V2_CLASSES = styled_components_1.default.div(
|
|
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;
|
|
37
|
+
exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", " \n "], ["\n ", " \n "])), typo_1.typo.CONTENT_H1);
|
|
38
|
+
exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H2);
|
|
39
|
+
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H3);
|
|
40
|
+
exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY);
|
|
41
|
+
exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
|
|
42
|
+
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
|
|
43
|
+
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
|
|
44
|
+
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_QUOTE);
|
|
45
|
+
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
|
|
46
|
+
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
|
|
47
|
+
exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_31 || (templateObject_31 = __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_CARDTITLE {\n ", "\n }\n \n .UI_CARDTITLE_BOLD {\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_CARDTITLE {\n ", "\n }\n \n .UI_CARDTITLE_BOLD {\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_CARDTITLE, typo_1.typo.UI_CARDTITLE_BOLD, 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);
|
|
48
|
+
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;
|
package/dist/v2/themes/typo.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export declare const typo: {
|
|
|
9
9
|
UI_BODY: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
10
10
|
UI_BODY_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
11
11
|
UI_BODY_SEMIBOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
12
|
+
UI_BODY_SEMIBOLD_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
12
13
|
UI_BODY_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
13
14
|
UI_BODY_BOLD_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
14
15
|
UI_PARAGRAPH: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
package/dist/v2/themes/typo.js
CHANGED
|
@@ -19,38 +19,39 @@ var fontCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1
|
|
|
19
19
|
});
|
|
20
20
|
var uiFont = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: 'DM Sans', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"], ["\n font-family: 'DM Sans', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"])));
|
|
21
21
|
var contentFont = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-family: 'Familjen Grotesk', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"], ["\n font-family: 'Familjen Grotesk', 'Noto Sans Devanagari', '\n Noto Sans Gujarati', 'Noto Sans Oriya', 'Noto Sans Telugu', sans-serif ;\n"])));
|
|
22
|
-
var UI_DISPLAY = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", ";\n font-size: 40px;\n line-height:
|
|
23
|
-
var UI_HEADLINE = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 32px;\n line-height:
|
|
24
|
-
var UI_HEADLINE_SM = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 28px;\n line-height:
|
|
25
|
-
var UI_TITLE = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 20px;\n line-height:
|
|
26
|
-
var UI_TITLE_SM = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 16px;\n line-height:
|
|
27
|
-
var UI_CARDTITLE = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size:
|
|
28
|
-
var UI_CARDTITLE_BOLD = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size:
|
|
29
|
-
var UI_BODY = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size:
|
|
30
|
-
var UI_BODY_SM = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size:
|
|
31
|
-
var UI_BODY_SEMIBOLD = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n font-size:
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
var
|
|
45
|
-
var
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var
|
|
22
|
+
var UI_DISPLAY = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n ", ";\n font-size: 40px;\n line-height: 130%;\n font-weight: 700;\n"], ["\n ", ";\n ", ";\n font-size: 40px;\n line-height: 130%;\n font-weight: 700;\n"])), uiFont, fontCss);
|
|
23
|
+
var UI_HEADLINE = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 32px;\n line-height: 130%;\n font-weight: 500;\n"], ["\n ", ";\n ", ";;\n font-size: 32px;\n line-height: 130%;\n font-weight: 500;\n"])), uiFont, fontCss);
|
|
24
|
+
var UI_HEADLINE_SM = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n ", ";;\n font-size: 28px;\n line-height: 130%;\n font-weight: 600;\n"], ["\n ", ";\n ", ";;\n font-size: 28px;\n line-height: 130%;\n font-weight: 600;\n"])), uiFont, fontCss);
|
|
25
|
+
var UI_TITLE = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 20px;\n line-height: 130%;\n font-weight: 700;\n letter-spacing: 0.2px;\n ", ";\n ", ";\n"], ["\n font-size: 20px;\n line-height: 130%;\n font-weight: 700;\n letter-spacing: 0.2px;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
26
|
+
var UI_TITLE_SM = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 16px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
27
|
+
var UI_CARDTITLE = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 130%;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 18px;\n line-height: 130%;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
28
|
+
var UI_CARDTITLE_BOLD = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 18px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
29
|
+
var UI_BODY = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 130%;\n font-weight: 400;\n ", ";\n", ";\n"], ["\n font-size: 16px;\n line-height: 130%;\n font-weight: 400;\n ", ";\n", ";\n"])), uiFont, fontCss);
|
|
30
|
+
var UI_BODY_SM = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __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);
|
|
31
|
+
var UI_BODY_SEMIBOLD = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 130%;\n font-weight: 500;\n ", "\n ", "\n"], ["\n font-size: 16px;\n line-height: 130%;\n font-weight: 500;\n ", "\n ", "\n"])), uiFont, fontCss);
|
|
32
|
+
var UI_BODY_SEMIBOLD_SM = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __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);
|
|
33
|
+
var UI_BODY_BOLD = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 16px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
34
|
+
var UI_BODY_BOLD_SM = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
35
|
+
var UI_PARAGRAPH = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __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);
|
|
36
|
+
var UI_PARAGRAPH_BOLD = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __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);
|
|
37
|
+
var UI_CAPTION = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 130%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 130%;\n font-weight: 400;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
38
|
+
var UI_TAG = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 130%;\n font-weight: 700; \n text-transform: uppercase;\n letter-spacing: 1px;\n ", ";\n ", ";\n"], ["\n font-size: 10px;\n line-height: 130%;\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_21 || (templateObject_21 = __makeTemplateObject(["\n font-size: 12px;\n line-height: 130%;\n font-weight: 400; \n ", ";\n ", ";\n"], ["\n font-size: 12px;\n line-height: 130%;\n font-weight: 400; \n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
40
|
+
var UI_STAT_LG = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font-size: 24px;\n line-height: 100%;\n font-weight: 500;\n ", ";\n ", ";\n"], ["\n font-size: 24px;\n line-height: 100%;\n font-weight: 500;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
41
|
+
var UI_STAT_SM = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"], ["\n font-size: 14px;\n line-height: 130%;\n font-weight: 700;\n ", ";\n ", ";\n"])), uiFont, fontCss);
|
|
42
|
+
var CONTENT_H1 = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __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_25 || (templateObject_25 = __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_26 || (templateObject_26 = __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_27 || (templateObject_27 = __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_28 || (templateObject_28 = __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_29 || (templateObject_29 = __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_30 || (templateObject_30 = __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_31 || (templateObject_31 = __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_32 || (templateObject_32 = __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_33 || (templateObject_33 = __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,
|
|
@@ -62,6 +63,7 @@ exports.typo = {
|
|
|
62
63
|
UI_BODY: UI_BODY,
|
|
63
64
|
UI_BODY_SM: UI_BODY_SM,
|
|
64
65
|
UI_BODY_SEMIBOLD: UI_BODY_SEMIBOLD,
|
|
66
|
+
UI_BODY_SEMIBOLD_SM: UI_BODY_SEMIBOLD_SM,
|
|
65
67
|
UI_BODY_BOLD: UI_BODY_BOLD,
|
|
66
68
|
UI_BODY_BOLD_SM: UI_BODY_BOLD_SM,
|
|
67
69
|
UI_PARAGRAPH: UI_PARAGRAPH,
|
|
@@ -82,4 +84,4 @@ exports.typo = {
|
|
|
82
84
|
CONTENT_TITLE_POSTIT: CONTENT_TITLE_POSTIT,
|
|
83
85
|
CONTENT_BODY_POSTIT: CONTENT_BODY_POSTIT
|
|
84
86
|
};
|
|
85
|
-
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;
|
|
87
|
+
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, templateObject_33;
|