oolib 2.168.6 → 2.169.1
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/DropdownMulti/index.js +7 -4
- package/dist/components/Dropdowns/comps/OptionsShell/styled.js +1 -1
- package/dist/components/Dropdowns/comps/SelectTagsInput/index.d.ts +2 -1
- package/dist/components/Dropdowns/comps/SelectTagsInput/index.js +2 -2
- package/dist/stories/v2/themes/Typo.stories.js +1 -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 +10 -9
- package/dist/v2/themes/typo.d.ts +1 -0
- package/dist/v2/themes/typo.js +10 -8
- package/package.json +1 -1
|
@@ -140,9 +140,12 @@ function DropdownMulti(_a) {
|
|
|
140
140
|
react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1, S: S }))); })));
|
|
141
141
|
};
|
|
142
142
|
var _f = (0, react_1.useState)(false), focusSelectTagsInput = _f[0], setFocusSelectTagsInput = _f[1];
|
|
143
|
-
var genSelectTagsInput = function () {
|
|
144
|
-
|
|
145
|
-
|
|
143
|
+
var genSelectTagsInput = function (options) {
|
|
144
|
+
if (options === void 0) { options = {}; }
|
|
145
|
+
return (react_1.default.createElement(SelectTagsInput_1.SelectTagsInput, __assign({ id: id, value: value, invert: invert, handleSelect: handleSelect, searchString: searchString,
|
|
146
|
+
setSearchString: setSearchString,
|
|
147
|
+
single_multi: "multi", placeholder: placeholder, focusSelectTagsInput: focusSelectTagsInput, setFocusSelectTagsInput: setFocusSelectTagsInput, showOptions: showOptions, S: S, disabled: disabled }, ((options === null || options === void 0 ? void 0 : options.style) || {}))));
|
|
148
|
+
};
|
|
146
149
|
var genInputComp = function () {
|
|
147
150
|
// const SelectComp = isTagsStyle ? SelectTagsInput : SelectDropdown
|
|
148
151
|
return (react_1.default.createElement(styled_1.StyledDropdownRefWrapper, { ref: dropdownRef },
|
|
@@ -151,7 +154,7 @@ function DropdownMulti(_a) {
|
|
|
151
154
|
? !showOptions && handleShowOptions() //if tagsStyle, then click always shows options
|
|
152
155
|
: showOptions ? handleHideOptions() : handleShowOptions(); //if dropdowns, then click toggles show/hide
|
|
153
156
|
} }, isTagsStyle ? genSelectTagsInput() : (react_1.default.createElement(SelectDropdown_1.SelectDropdown, { invert: invert, value: value, placeholder: placeholder, selectClassName: selectClassName, selectStyleOverride: selectStyleOverride, showOptions: showOptions, genCustomSelectComp: genCustomSelectComp, disableSelectTextUpdate: disableSelectTextUpdate, selectConfig: selectConfig, S: S, disabled: disabled }))),
|
|
154
|
-
react_1.default.createElement(OptionsMulti_1.OptionsMulti, { searchbarPlaceholder: searchbarPlaceholder, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput(), invert: invert, setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown })));
|
|
157
|
+
react_1.default.createElement(OptionsMulti_1.OptionsMulti, { searchbarPlaceholder: searchbarPlaceholder, id: id, value: value, relativeToRef: selectRef, showOptions: showOptions, handleSelect: handleSelect, handleHideOptions: handleHideOptions, optionsClassName: optionsClassName, options: options, optionsFn: optionsFn, isSearchable: isTagsStyle ? false : isSearchable, searchString: searchString, setSearchString: setSearchString, label: label, optionsModalLabel: optionsModalLabel, isTagsStyle: isTagsStyle, genCreateTagButton: genCreateTagButton, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, optionsAnchor: optionsAnchor, SelectComp: isTagsStyle && genSelectTagsInput({ style: { position: 'sticky', top: 0, zIndex: 1000 } }), invert: invert, setFocusSelectTagsInput: setFocusSelectTagsInput, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, S: S, alignDropdown: alignDropdown })));
|
|
155
158
|
};
|
|
156
159
|
return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : "") },
|
|
157
160
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
|
|
@@ -38,7 +38,7 @@ exports.StyledOptionsWrapper = styled_components_1.default.ul(templateObject_2 |
|
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
/** for modal shell */
|
|
41
|
-
exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n padding-left: 0;\n cursor: pointer;\n background-color: ", ";\n width: 100%;\n min-width: max-content;\n min-width: -moz-max-content;\n overflow: auto
|
|
41
|
+
exports.StyledModalOptionsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n padding-left: 0;\n cursor: pointer;\n background-color: ", ";\n width: 100%;\n min-width: max-content;\n min-width: -moz-max-content;\n /* overflow: auto; */\n"], ["\n position: relative;\n padding-left: 0;\n cursor: pointer;\n background-color: ", ";\n width: 100%;\n min-width: max-content;\n min-width: -moz-max-content;\n /* overflow: auto; */\n"])), function (_a) {
|
|
42
42
|
var invert = _a.invert;
|
|
43
43
|
return invert ? themes_1.colors.greyColor90 : themes_1.colors.white;
|
|
44
44
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function SelectTagsInput({ invert, id, value, disabled, handleSelect, searchString, setSearchString, placeholder, setFocusSelectTagsInput, focusSelectTagsInput, single_multi, showOptions, S, tagColor, }: {
|
|
1
|
+
export function SelectTagsInput({ invert, id, value, disabled, handleSelect, searchString, setSearchString, placeholder, setFocusSelectTagsInput, focusSelectTagsInput, single_multi, showOptions, S, tagColor, style }: {
|
|
2
2
|
invert: any;
|
|
3
3
|
id: any;
|
|
4
4
|
value: any;
|
|
@@ -13,5 +13,6 @@ export function SelectTagsInput({ invert, id, value, disabled, handleSelect, sea
|
|
|
13
13
|
showOptions: any;
|
|
14
14
|
S: any;
|
|
15
15
|
tagColor: any;
|
|
16
|
+
style: any;
|
|
16
17
|
}): React.JSX.Element;
|
|
17
18
|
import React from "react";
|
|
@@ -42,7 +42,7 @@ var SelectTagsInput = function (_a) {
|
|
|
42
42
|
handleSelect = _a.handleSelect, searchString = _a.searchString, setSearchString = _a.setSearchString, placeholder = _a.placeholder,
|
|
43
43
|
// minHeight, // standard | wide | actual height in rem
|
|
44
44
|
setFocusSelectTagsInput = _a.setFocusSelectTagsInput, focusSelectTagsInput = _a.focusSelectTagsInput, //force focus when after an option is selected in multiselect
|
|
45
|
-
single_multi = _a.single_multi, showOptions = _a.showOptions, S = _a.S, tagColor = _a.tagColor;
|
|
45
|
+
single_multi = _a.single_multi, showOptions = _a.showOptions, S = _a.S, tagColor = _a.tagColor, style = _a.style;
|
|
46
46
|
var inputRef = (0, react_1.useRef)(null);
|
|
47
47
|
var theme = (0, styled_components_1.useTheme)();
|
|
48
48
|
var localize = (0, utilsOolib_1.useLocale)();
|
|
@@ -87,7 +87,7 @@ var SelectTagsInput = function (_a) {
|
|
|
87
87
|
// : "9rem"; //wide by default
|
|
88
88
|
return (react_1.default.createElement(styled_2.StyledSelectTagsInputContainer, { onKeyDown: blurInputOnEscKey,
|
|
89
89
|
// style={{ minHeight: '9rem' }}
|
|
90
|
-
className: "".concat(isFocussed ? "focussed" : ""), invert: invert, disabled: disabled, onFocus: function () {
|
|
90
|
+
style: style, className: "".concat(isFocussed ? "focussed" : ""), invert: invert, disabled: disabled, onFocus: function () {
|
|
91
91
|
handleFocus(true);
|
|
92
92
|
}, onBlur: function () { return handleFocus(false); }, tabIndex: 0 },
|
|
93
93
|
react_1.default.createElement(styled_1.StyledTagsInputWrapper, null,
|
|
@@ -117,6 +117,7 @@ var ContentFont = function (args) { return (react_1.default.createElement("div",
|
|
|
117
117
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.CONTENT_H2, compName: "CONTENT_H2" }),
|
|
118
118
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.CONTENT_H3, compName: "CONTENT_H3" }),
|
|
119
119
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.CONTENT_BODY, compName: "CONTENT_BODY" }),
|
|
120
|
+
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.CONTENT_BODY_SM, compName: "CONTENT_BODY_SM" }),
|
|
120
121
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.CONTENT_BODY_BOLD, compName: "CONTENT_BODY_BOLD" }),
|
|
121
122
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.CONTENT_BODY_ITALIC, compName: "CONTENT_BODY_ITALIC" }),
|
|
122
123
|
react_1.default.createElement(GenComp, { args: args, Comp: Typo2_1.CONTENT_BODY_BOLD_ITALIC, compName: "CONTENT_BODY_BOLD_ITALIC" }),
|
|
@@ -57,6 +57,7 @@ export declare const CONTENT_H1: React.FunctionComponent<TypoCompProps>;
|
|
|
57
57
|
export declare const CONTENT_H2: React.FunctionComponent<TypoCompProps>;
|
|
58
58
|
export declare const CONTENT_H3: React.FunctionComponent<TypoCompProps>;
|
|
59
59
|
export declare const CONTENT_BODY: React.FunctionComponent<TypoCompProps>;
|
|
60
|
+
export declare const CONTENT_BODY_SM: React.FunctionComponent<TypoCompProps>;
|
|
60
61
|
export declare const CONTENT_BODY_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
61
62
|
export declare const CONTENT_BODY_ITALIC: React.FunctionComponent<TypoCompProps>;
|
|
62
63
|
export declare const CONTENT_BODY_BOLD_ITALIC: 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_SEMIBOLD = exports.UI_CAPTION_SEMIBOLD_DF = exports.UI_CAPTION_BOLD_DF = exports.UI_CAPTION_DF = exports.UI_CAPTION_BOLD = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM_DF = exports.UI_BODY_BOLD_DF = exports.UI_BODY_SEMIBOLD_SM_DF = exports.UI_BODY_SEMIBOLD_DF = exports.UI_BODY_SM_DF = exports.UI_BODY_DF = 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_SM = 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_SEMIBOLD = exports.UI_CAPTION_SEMIBOLD_DF = exports.UI_CAPTION_BOLD_DF = exports.UI_CAPTION_DF = exports.UI_CAPTION_BOLD = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM_DF = exports.UI_BODY_BOLD_DF = exports.UI_BODY_SEMIBOLD_SM_DF = exports.UI_BODY_SEMIBOLD_DF = exports.UI_BODY_SM_DF = exports.UI_BODY_DF = 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");
|
|
@@ -137,6 +137,8 @@ var CONTENT_H3 = function (props) { return react_1.default.createElement(GenComp
|
|
|
137
137
|
exports.CONTENT_H3 = CONTENT_H3;
|
|
138
138
|
var CONTENT_BODY = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.CONTENT_BODY_STYLED }); };
|
|
139
139
|
exports.CONTENT_BODY = CONTENT_BODY;
|
|
140
|
+
var CONTENT_BODY_SM = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.CONTENT_BODY_SM_STYLED }); };
|
|
141
|
+
exports.CONTENT_BODY_SM = CONTENT_BODY_SM;
|
|
140
142
|
var CONTENT_BODY_BOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.CONTENT_BODY_BOLD_STYLED }); };
|
|
141
143
|
exports.CONTENT_BODY_BOLD = CONTENT_BODY_BOLD;
|
|
142
144
|
var CONTENT_BODY_ITALIC = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.CONTENT_BODY_ITALIC_STYLED }); };
|
|
@@ -31,6 +31,7 @@ export declare const CONTENT_H1_STYLED: import("styled-components").StyledCompon
|
|
|
31
31
|
export declare const CONTENT_H2_STYLED: import("styled-components").StyledComponent<"h2", any, {}, never>;
|
|
32
32
|
export declare const CONTENT_H3_STYLED: import("styled-components").StyledComponent<"h3", any, {}, never>;
|
|
33
33
|
export declare const CONTENT_BODY_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
34
|
+
export declare const CONTENT_BODY_SM_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
34
35
|
export declare const CONTENT_BODY_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
35
36
|
export declare const CONTENT_BODY_ITALIC_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
36
37
|
export declare const CONTENT_BODY_BOLD_ITALIC_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_SEMIBOLD_DF_STYLED = exports.UI_CAPTION_SEMIBOLD_STYLED = exports.UI_CAPTION_BOLD_DF_STYLED = exports.UI_CAPTION_DF_STYLED = exports.UI_CAPTION_BOLD_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_DF_STYLED = exports.UI_BODY_SEMIBOLD_SM_DF_STYLED = exports.UI_BODY_SM_DF_STYLED = exports.UI_BODY_DF_STYLED = exports.UI_BODY_BOLD_DF_STYLED = exports.UI_BODY_SEMIBOLD_DF_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_SM_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_SEMIBOLD_DF_STYLED = exports.UI_CAPTION_SEMIBOLD_STYLED = exports.UI_CAPTION_BOLD_DF_STYLED = exports.UI_CAPTION_DF_STYLED = exports.UI_CAPTION_BOLD_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_DF_STYLED = exports.UI_BODY_SEMIBOLD_SM_DF_STYLED = exports.UI_BODY_SM_DF_STYLED = exports.UI_BODY_DF_STYLED = exports.UI_BODY_BOLD_DF_STYLED = exports.UI_BODY_SEMIBOLD_DF_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
|
|
@@ -47,11 +47,12 @@ exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_30 ||
|
|
|
47
47
|
exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H2);
|
|
48
48
|
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H3);
|
|
49
49
|
exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY);
|
|
50
|
-
exports.
|
|
51
|
-
exports.
|
|
52
|
-
exports.
|
|
53
|
-
exports.
|
|
54
|
-
exports.
|
|
55
|
-
exports.
|
|
56
|
-
exports.
|
|
57
|
-
|
|
50
|
+
exports.CONTENT_BODY_SM_STYLED = styled_components_1.default.p(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_SM);
|
|
51
|
+
exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
|
|
52
|
+
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
|
|
53
|
+
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
|
|
54
|
+
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_QUOTE);
|
|
55
|
+
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
|
|
56
|
+
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
|
|
57
|
+
exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __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 .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\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 .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\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 .UI_BODY_BOLD_DF {\n ", "\n }\n\n .UI_BODY_BOLD_SM_DF {\n ", "\n }\n\n .UI_BODY_DF {\n ", "\n }\n\n .UI_BODY_SM_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_DF {\n ", "\n }\n\n .UI_BODY_SEMIBOLD_SM_DF {\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 .UI_CAPTION_BOLD {\n ", "\n }\n\n .UI_CAPTION_DF {\n ", "\n }\n \n .UI_CAPTION_BOLD_DF {\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_DF, typo_1.typo.UI_BODY_BOLD_SM_DF, typo_1.typo.UI_BODY_DF, typo_1.typo.UI_BODY_SM_DF, typo_1.typo.UI_BODY_SEMIBOLD_DF, typo_1.typo.UI_BODY_SEMIBOLD_SM_DF, 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_CAPTION_BOLD, typo_1.typo.UI_CAPTION_DF, typo_1.typo.UI_CAPTION_BOLD_DF, 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);
|
|
58
|
+
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, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41;
|
package/dist/v2/themes/typo.d.ts
CHANGED
|
@@ -32,6 +32,7 @@ export declare const typo: {
|
|
|
32
32
|
CONTENT_H2: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
33
33
|
CONTENT_H1: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
34
34
|
CONTENT_BODY: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
35
|
+
CONTENT_BODY_SM: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
35
36
|
CONTENT_BODY_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
36
37
|
CONTENT_BODY_ITALIC: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
37
38
|
CONTENT_BODY_BOLD_ITALIC: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
package/dist/v2/themes/typo.js
CHANGED
|
@@ -58,16 +58,17 @@ var UI_STAT_SM = (0, styled_components_1.css)(templateObject_38 || (templateObje
|
|
|
58
58
|
var CONTENT_H1 = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __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);
|
|
59
59
|
var CONTENT_H2 = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __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);
|
|
60
60
|
var CONTENT_H3 = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __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);
|
|
61
|
-
var
|
|
62
|
-
var
|
|
63
|
-
var
|
|
64
|
-
var
|
|
65
|
-
var
|
|
61
|
+
var CONTENT_BODY_SM = (0, styled_components_1.css)(templateObject_42 || (templateObject_42 = __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);
|
|
62
|
+
var CONTENT_BODY = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"], ["\n font-size: 17px;\n line-height: 140%;\n font-weight: 400;\n ", ";\n ", ";\n"])), contentFont, fontCss);
|
|
63
|
+
var CONTENT_BODY_BOLD = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __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);
|
|
64
|
+
var CONTENT_BODY_ITALIC = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __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);
|
|
65
|
+
var CONTENT_BODY_BOLD_ITALIC = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __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);
|
|
66
|
+
var CONTENT_QUOTE = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __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) {
|
|
66
67
|
var invert = _a.invert, colors = _a.theme.colors;
|
|
67
68
|
return invert ? colors.greyColor40 : (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
68
69
|
}, contentFont, fontCss);
|
|
69
|
-
var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(
|
|
70
|
-
var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(
|
|
70
|
+
var CONTENT_TITLE_POSTIT = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __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);
|
|
71
|
+
var CONTENT_BODY_POSTIT = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __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);
|
|
71
72
|
exports.typo = {
|
|
72
73
|
UI_DISPLAY: UI_DISPLAY,
|
|
73
74
|
UI_HEADLINE: UI_HEADLINE,
|
|
@@ -104,6 +105,7 @@ exports.typo = {
|
|
|
104
105
|
CONTENT_H2: CONTENT_H2,
|
|
105
106
|
CONTENT_H1: CONTENT_H1,
|
|
106
107
|
CONTENT_BODY: CONTENT_BODY,
|
|
108
|
+
CONTENT_BODY_SM: CONTENT_BODY_SM,
|
|
107
109
|
CONTENT_BODY_BOLD: CONTENT_BODY_BOLD,
|
|
108
110
|
CONTENT_BODY_ITALIC: CONTENT_BODY_ITALIC,
|
|
109
111
|
CONTENT_BODY_BOLD_ITALIC: CONTENT_BODY_BOLD_ITALIC,
|
|
@@ -111,4 +113,4 @@ exports.typo = {
|
|
|
111
113
|
CONTENT_TITLE_POSTIT: CONTENT_TITLE_POSTIT,
|
|
112
114
|
CONTENT_BODY_POSTIT: CONTENT_BODY_POSTIT
|
|
113
115
|
};
|
|
114
|
-
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, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48;
|
|
116
|
+
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, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
|