oolib 2.161.0 → 2.163.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/index.d.ts +1 -0
- package/dist/index.js +3 -1
- package/dist/stories/v2/components/Button.stories.d.ts +20 -2
- package/dist/stories/v2/components/Button.stories.js +37 -15
- package/dist/stories/v2/components/Date.stories.d.ts +43 -0
- package/dist/stories/v2/components/Date.stories.js +61 -0
- package/dist/stories/v2/components/TextInputs.stories.js +1 -1
- package/dist/stories/v2/themes/Typo.stories.js +2 -0
- package/dist/themes/mixins/index.d.ts +1 -0
- package/dist/themes/mixins/index.js +10 -1
- package/dist/v2/components/Buttons/derivedComps/ButtonPrimaryCompact.d.ts +8 -0
- package/dist/v2/components/Buttons/derivedComps/ButtonPrimaryCompact.js +46 -0
- package/dist/v2/components/Buttons/derivedComps/ButtonSecondaryCompact.d.ts +2 -0
- package/dist/v2/components/Buttons/derivedComps/ButtonSecondaryCompact.js +26 -0
- package/dist/v2/components/Buttons/derivedComps/ButtonTertiaryCompact.d.ts +2 -0
- package/dist/v2/components/Buttons/derivedComps/ButtonTertiaryCompact.js +26 -0
- package/dist/v2/components/Buttons/index.d.ts +6 -2
- package/dist/v2/components/Buttons/index.js +21 -10
- package/dist/v2/components/Buttons/styled.d.ts +3 -19
- package/dist/v2/components/Buttons/styled.js +79 -61
- package/dist/v2/components/DateRangePicker/index.d.ts +19 -0
- package/dist/v2/components/DateRangePicker/index.js +124 -0
- package/dist/v2/components/DateRangePicker/styled.d.ts +7 -0
- package/dist/v2/components/DateRangePicker/styled.js +24 -0
- package/dist/v2/components/TabBar/index.js +1 -1
- package/dist/v2/components/TabBar/index.styled.js +2 -2
- package/dist/v2/components/TextInputs/index.js +3 -4
- package/dist/v2/components/Typo2/index.d.ts +2 -0
- package/dist/v2/components/Typo2/index.js +5 -1
- package/dist/v2/components/Typo2/index.styled.d.ts +2 -0
- package/dist/v2/components/Typo2/index.styled.js +19 -17
- package/dist/v2/components/cards/ListContent/index.js +1 -1
- package/dist/v2/components/cards/ListContent/styled.js +6 -3
- package/dist/v2/themes/typo.d.ts +2 -0
- package/dist/v2/themes/typo.js +21 -17
- package/package.json +2 -1
- package/dist/v2/components/Buttons/derivedComps/ActionButton.d.ts +0 -7
- package/dist/v2/components/Buttons/derivedComps/ActionButton.js +0 -43
- package/dist/v2/components/Buttons/derivedComps/ClearButton.d.ts +0 -6
- package/dist/v2/components/Buttons/derivedComps/ClearButton.js +0 -36
|
@@ -27,78 +27,96 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.
|
|
31
|
-
var styled_components_1 = __importStar(require("styled-components"));
|
|
30
|
+
exports.StyledBodyText = exports.ButtonStyled = void 0;
|
|
32
31
|
var colors_1 = require("../../../v2/themes/colors");
|
|
33
32
|
var mixins_1 = require("../../../themes/mixins");
|
|
34
33
|
var utils_1 = require("../../themes/utils");
|
|
34
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
35
35
|
var Typo2_1 = require("../Typo2");
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
M: "3.2rem",
|
|
36
|
+
// Constants
|
|
37
|
+
var BUTTON_SIZES = {
|
|
38
|
+
S: '3rem',
|
|
39
|
+
M: '3.2rem',
|
|
41
40
|
};
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var ButtonPrimary = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n\n ", "\n\n ", " \n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n\n\n"], ["\n background-color: ", ";\n color: ", ";\n\n ", "\n\n ", " \n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n\n\n"])), function (_a) {
|
|
47
|
-
var colors = _a.theme.colors;
|
|
48
|
-
return colors ? (0, utils_1.getPrimaryContainer)(colors) : primaryContainer;
|
|
49
|
-
}, function (_a) {
|
|
50
|
-
var colors = _a.theme.colors;
|
|
51
|
-
return colors ? (0, utils_1.getOnPrimary)(colors) : onPrimary;
|
|
52
|
-
}, function (_a) {
|
|
53
|
-
var disabled = _a.disabled;
|
|
54
|
-
return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n "], ["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n "])), grey10, grey40);
|
|
55
|
-
}, function (_a) {
|
|
56
|
-
var forceHover = _a.forceHover;
|
|
57
|
-
return forceHover && hoverStylingPrimary;
|
|
58
|
-
}, hoverStylingPrimary);
|
|
59
|
-
var ButtonSecondary = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n\n ", "\n\n ", " \n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"], ["\n background-color: ", ";\n color: ", ";\n\n ", "\n\n ", " \n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"])), function (_a) {
|
|
60
|
-
var colors = _a.theme.colors;
|
|
61
|
-
return colors ? (0, utils_1.getSecondaryContainer)(colors) : secondaryContainer;
|
|
62
|
-
}, function (_a) {
|
|
63
|
-
var colors = _a.theme.colors;
|
|
64
|
-
return colors ? (0, utils_1.getOnSecondary)(colors) : onSecondary;
|
|
65
|
-
}, function (_a) {
|
|
66
|
-
var disabled = _a.disabled;
|
|
67
|
-
return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n\n color: ", ";\n pointer-events: none;\n "], ["\n background-color: ", ";\n\n color: ", ";\n pointer-events: none;\n "])), grey10, grey40);
|
|
68
|
-
}, function (_a) {
|
|
69
|
-
var forceHover = _a.forceHover;
|
|
70
|
-
return forceHover && hoverStylingSecondary;
|
|
71
|
-
}, hoverStylingSecondary);
|
|
72
|
-
var ButtonGhost = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n\n ", "\n\n ", " \n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"], ["\n background-color: transparent;\n color: ", ";\n\n ", "\n\n ", " \n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n"])), grey80, function (_a) {
|
|
73
|
-
var disabled = _a.disabled;
|
|
74
|
-
return disabled && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), grey80);
|
|
75
|
-
}, function (_a) {
|
|
76
|
-
var forceHover = _a.forceHover;
|
|
77
|
-
return forceHover && hoverStylingGhost;
|
|
78
|
-
}, hoverStylingGhost);
|
|
79
|
-
var buttonVariantSetting = {
|
|
80
|
-
primary: ButtonPrimary,
|
|
81
|
-
secondary: ButtonSecondary,
|
|
82
|
-
ghost: ButtonGhost,
|
|
83
|
-
// custom: ButtonCustom,
|
|
84
|
-
// googleAuth: GoogleButton,
|
|
41
|
+
var BUTTON_PADDING = {
|
|
42
|
+
default: '0.9rem 1.2rem',
|
|
43
|
+
iconWithText: '0.9rem 1.2rem 0.9rem 1rem',
|
|
44
|
+
iconOnly: '0.9rem',
|
|
85
45
|
};
|
|
86
|
-
|
|
87
|
-
|
|
46
|
+
var BUTTON_PADDING_DF = {
|
|
47
|
+
default: '1.2rem 1.4rem 1.2rem 1.6rem',
|
|
48
|
+
iconWithText: '1.2rem 1.4rem 1.2rem 1.2rem',
|
|
49
|
+
iconOnly: '1.2rem',
|
|
50
|
+
};
|
|
51
|
+
// Hover Effects
|
|
52
|
+
var createHoverEffect = function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &::before {\n content: '';\n background-color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n ", "\n }\n\n &:hover::before {\n background-color: rgba(0, 0, 0, 0.1);\n }\n"], ["\n &::before {\n content: '';\n background-color: transparent;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n ", "\n }\n\n &:hover::before {\n background-color: rgba(0, 0, 0, 0.1);\n }\n"])), (0, mixins_1.transition)("background-color")); };
|
|
53
|
+
// Disabled States
|
|
54
|
+
var disabledStyles = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n"], ["\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n"])), colors_1.colors.grey10, colors_1.colors.grey40);
|
|
55
|
+
// Variant Styles
|
|
56
|
+
var variants = {
|
|
57
|
+
primary: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n \n ", "\n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: ", ";\n color: ", ";\n \n ", "\n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), function (_a) {
|
|
58
|
+
var colors = _a.theme.colors;
|
|
59
|
+
return colors ? (0, utils_1.getPrimaryContainer)(colors) : colors_1.colors.primaryContainer;
|
|
60
|
+
}, function (_a) {
|
|
61
|
+
var colors = _a.theme.colors;
|
|
62
|
+
return colors ? (0, utils_1.getOnPrimary)(colors) : colors_1.colors.onPrimary;
|
|
63
|
+
}, function (_a) {
|
|
64
|
+
var disabled = _a.disabled;
|
|
65
|
+
return disabled && disabledStyles;
|
|
66
|
+
}, function (_a) {
|
|
67
|
+
var forceHover = _a.forceHover;
|
|
68
|
+
return forceHover && createHoverEffect();
|
|
69
|
+
}, createHoverEffect()),
|
|
70
|
+
secondary: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n \n ", "\n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: ", ";\n color: ", ";\n \n ", "\n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), function (_a) {
|
|
71
|
+
var colors = _a.theme.colors;
|
|
72
|
+
return colors ? (0, utils_1.getSecondaryContainer)(colors) : colors_1.colors.secondaryContainer;
|
|
73
|
+
}, function (_a) {
|
|
74
|
+
var colors = _a.theme.colors;
|
|
75
|
+
return colors ? (0, utils_1.getOnSecondary)(colors) : colors_1.colors.onSecondary;
|
|
76
|
+
}, function (_a) {
|
|
77
|
+
var disabled = _a.disabled;
|
|
78
|
+
return disabled && disabledStyles;
|
|
79
|
+
}, function (_a) {
|
|
80
|
+
var forceHover = _a.forceHover;
|
|
81
|
+
return forceHover && createHoverEffect();
|
|
82
|
+
}, createHoverEffect()),
|
|
83
|
+
tertiary: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n border: 1px solid ", ";\n\n ", "\n\n ", "\n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: transparent;\n color: ", ";\n border: 1px solid ", ";\n\n ", "\n\n ", "\n\n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), colors_1.colors.grey80, colors_1.colors.grey10, function (_a) {
|
|
84
|
+
var disabled = _a.disabled;
|
|
85
|
+
return disabled && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), colors_1.colors.grey80);
|
|
86
|
+
}, function (_a) {
|
|
87
|
+
var forceHover = _a.forceHover;
|
|
88
|
+
return forceHover && createHoverEffect();
|
|
89
|
+
}, createHoverEffect()),
|
|
90
|
+
ghost: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: transparent;\n color: ", ";\n \n ", "\n \n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "], ["\n background-color: transparent;\n color: ", ";\n \n ", "\n \n ", "\n \n @media (hover: hover) {\n &:hover {\n ", "\n }\n }\n "])), colors_1.colors.grey80, function (_a) {
|
|
91
|
+
var disabled = _a.disabled;
|
|
92
|
+
return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n pointer-events: none;\n "], ["\n color: ", ";\n pointer-events: none;\n "])), colors_1.colors.grey80);
|
|
93
|
+
}, function (_a) {
|
|
94
|
+
var forceHover = _a.forceHover;
|
|
95
|
+
return forceHover && createHoverEffect();
|
|
96
|
+
}, createHoverEffect()),
|
|
97
|
+
};
|
|
98
|
+
// Composition Styles
|
|
99
|
+
var getCompositionStyles = function (composition, responsive) {
|
|
88
100
|
switch (composition) {
|
|
89
|
-
case
|
|
90
|
-
return (0, styled_components_1.css)(
|
|
91
|
-
case
|
|
92
|
-
return (0, styled_components_1.css)(
|
|
101
|
+
case 'iconOnly':
|
|
102
|
+
return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: ", "; \n flex-shrink: 0;\n "], ["\n padding: ", "; \n flex-shrink: 0;\n "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
|
|
103
|
+
case 'icon+text':
|
|
104
|
+
return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n padding: ", "; \n "], ["\n padding: ", "; \n "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
|
|
93
105
|
default:
|
|
94
|
-
return (0, styled_components_1.css)(
|
|
106
|
+
return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n padding: ", "; \n "], ["\n padding: ", "; \n "])), responsive ? BUTTON_PADDING_DF.iconOnly : BUTTON_PADDING.iconOnly);
|
|
95
107
|
}
|
|
108
|
+
};
|
|
109
|
+
// Main Button Component
|
|
110
|
+
exports.ButtonStyled = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n \n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.4rem;\n cursor: pointer;\n border: none;\n border-radius: 6px;\n position: relative;\n overflow: hidden;\n\n /* ", " */\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n ", "\n\n > * {\n position: relative;\n z-index: 2;\n }\n"], ["\n ", "\n \n white-space: nowrap;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.4rem;\n cursor: pointer;\n border: none;\n border-radius: 6px;\n position: relative;\n overflow: hidden;\n\n /* ", " */\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", "\n ", "\n\n > * {\n position: relative;\n z-index: 2;\n }\n"])), function (_a) {
|
|
111
|
+
var _b = _a.composition, composition = _b === void 0 ? 'textOnly' : _b, responsive = _a.responsive;
|
|
112
|
+
return getCompositionStyles(composition, responsive);
|
|
96
113
|
}, function (_a) {
|
|
97
114
|
var width = _a.width, composition = _a.composition, size = _a.size;
|
|
98
|
-
return width
|
|
115
|
+
return width
|
|
116
|
+
? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), width) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n min-width: ", ";\n max-width: 400px;\n "], ["\n min-width: ", ";\n max-width: 400px;\n "])), composition === 'iconOnly' ? BUTTON_SIZES[size] : '60px');
|
|
99
117
|
}, (0, mixins_1.transition)("background-color"), function (_a) {
|
|
100
118
|
var variant = _a.variant;
|
|
101
|
-
return
|
|
119
|
+
return variants[variant];
|
|
102
120
|
});
|
|
103
|
-
exports.
|
|
104
|
-
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
|
|
121
|
+
exports.StyledBodyText = (0, styled_components_1.default)(Typo2_1.UI_BODY_BOLD_SM)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mixins_1.ellipsis);
|
|
122
|
+
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;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import 'react-datepicker/dist/react-datepicker.css';
|
|
3
|
+
interface DateRangePickerProps {
|
|
4
|
+
onChange: (id: string, value: (Date | null)[]) => void;
|
|
5
|
+
value: (Date | null)[];
|
|
6
|
+
id: string;
|
|
7
|
+
readOnly?: boolean;
|
|
8
|
+
futureDateOnly?: boolean;
|
|
9
|
+
previousDateOnly?: boolean;
|
|
10
|
+
allowPresentlyOngoing?: boolean;
|
|
11
|
+
invert?: boolean;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
debug?: boolean;
|
|
14
|
+
startDateLabel?: string;
|
|
15
|
+
endDateLabel?: string;
|
|
16
|
+
}
|
|
17
|
+
declare function DateRangePicker_(props: DateRangePickerProps): React.JSX.Element;
|
|
18
|
+
export declare const DateRangePicker: React.MemoExoticComponent<typeof DateRangePicker_>;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,124 @@
|
|
|
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
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
37
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
38
|
+
if (ar || !(i in from)) {
|
|
39
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
40
|
+
ar[i] = from[i];
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
44
|
+
};
|
|
45
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
46
|
+
exports.DateRangePicker = void 0;
|
|
47
|
+
var react_1 = __importStar(require("react"));
|
|
48
|
+
require("react-datepicker/dist/react-datepicker.css");
|
|
49
|
+
var RadioAndCheckbox_1 = require("../../../components/RadioAndCheckbox");
|
|
50
|
+
var BlockLabel_1 = require("../BlockLabel");
|
|
51
|
+
var getBlockLabelProps_1 = require("../../../utils/getBlockLabelProps");
|
|
52
|
+
var Typo2_1 = require("../Typo2");
|
|
53
|
+
var styled_1 = require("./styled");
|
|
54
|
+
var TextInputs_1 = require("../TextInputs");
|
|
55
|
+
var __1 = require("../../..");
|
|
56
|
+
function DateRangePicker_(props) {
|
|
57
|
+
var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, allowPresentlyOngoing = props.allowPresentlyOngoing, invert = props.invert, disabled = props.disabled, debug = props.debug, startDateLabel = props.startDateLabel, endDateLabel = props.endDateLabel;
|
|
58
|
+
var _a = (0, react_1.useState)(value[0] || null), startDate = _a[0], setStartDate = _a[1];
|
|
59
|
+
var _b = (0, react_1.useState)(value[1] || null), endDate = _b[0], setEndDate = _b[1];
|
|
60
|
+
(0, react_1.useEffect)(function () {
|
|
61
|
+
setStartDate(value[0] || null);
|
|
62
|
+
setEndDate(value[1] || null);
|
|
63
|
+
}, [value]);
|
|
64
|
+
// Get current date at midnight for consistent comparison
|
|
65
|
+
var currentDate = new Date();
|
|
66
|
+
currentDate.setHours(0, 0, 0, 0);
|
|
67
|
+
// Get yesterday's date
|
|
68
|
+
var yesterday = new Date(currentDate);
|
|
69
|
+
yesterday.setDate(currentDate.getDate() - 1);
|
|
70
|
+
var handleOnChange = function (index, date) {
|
|
71
|
+
var newValue = __spreadArray([], value, true);
|
|
72
|
+
newValue[index] = date;
|
|
73
|
+
onChange(id, newValue);
|
|
74
|
+
if (index === 0) {
|
|
75
|
+
setStartDate(date);
|
|
76
|
+
if (date && endDate && date > endDate) {
|
|
77
|
+
setEndDate(null);
|
|
78
|
+
newValue[1] = null;
|
|
79
|
+
onChange(id, newValue);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
setEndDate(date);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
// Calculate min and max dates based on restrictions
|
|
87
|
+
var getMinDate = function (isEndDate) {
|
|
88
|
+
if (futureDateOnly) {
|
|
89
|
+
return currentDate;
|
|
90
|
+
}
|
|
91
|
+
if (isEndDate && startDate) {
|
|
92
|
+
return startDate;
|
|
93
|
+
}
|
|
94
|
+
return undefined;
|
|
95
|
+
};
|
|
96
|
+
var getMaxDate = function () {
|
|
97
|
+
if (previousDateOnly) {
|
|
98
|
+
return yesterday;
|
|
99
|
+
}
|
|
100
|
+
return undefined;
|
|
101
|
+
};
|
|
102
|
+
return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.2rem' } },
|
|
103
|
+
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
|
|
104
|
+
react_1.default.createElement(styled_1.StyledDateRangeInputWrapper, { invert: invert, readOnly: readOnly },
|
|
105
|
+
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
|
|
106
|
+
react_1.default.createElement(Typo2_1.UI_CAPTION, null, startDateLabel),
|
|
107
|
+
react_1.default.createElement(styled_1.StyledDatePicker, { className: 'UI_BODY_SM', selected: startDate, onChange: function (date) { return handleOnChange(0, date); }, selectsStart: true, startDate: startDate, endDate: endDate, minDate: getMinDate(false), maxDate: getMaxDate(), readOnly: readOnly, disabled: disabled, dateFormat: "MM/dd/yyyy" })),
|
|
108
|
+
react_1.default.createElement(styled_1.StyledDateRangeInputDivider, null),
|
|
109
|
+
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
|
|
110
|
+
react_1.default.createElement(Typo2_1.UI_CAPTION, null, endDateLabel),
|
|
111
|
+
value && value[1] === null ?
|
|
112
|
+
react_1.default.createElement("div", { style: { border: "1px solid ".concat(__1.colors2.grey20), padding: '8px 20px', borderRadius: '5px', width: '120px', background: "".concat(__1.colors2.grey5) } },
|
|
113
|
+
react_1.default.createElement(TextInputs_1.TextInput, { value: "OnGoing", readOnly: true }))
|
|
114
|
+
:
|
|
115
|
+
react_1.default.createElement(styled_1.StyledDatePicker, { className: 'UI_BODY_SM', selected: endDate, onChange: function (date) { return handleOnChange(1, date); }, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: getMinDate(true), maxDate: getMaxDate(), readOnly: readOnly, disabled: disabled || (value && value[1] === null), dateFormat: "MM/dd/yyyy" }))),
|
|
116
|
+
!readOnly && allowPresentlyOngoing && (react_1.default.createElement("div", { style: { marginTop: '0.5rem' } },
|
|
117
|
+
react_1.default.createElement(RadioAndCheckbox_1.CheckboxInput, { option: { display: 'Presently Ongoing', value: 'Ongoing' }, value: value && value[1] === null
|
|
118
|
+
? [{ display: 'Presently Ongoing', value: 'Ongoing' }]
|
|
119
|
+
: [], onClick: function (isSelected) {
|
|
120
|
+
return handleOnChange(1, isSelected ? undefined : null);
|
|
121
|
+
}, disabled: disabled || readOnly }))),
|
|
122
|
+
debug && (react_1.default.createElement("pre", null, JSON.stringify({ startDate: startDate, endDate: endDate, value: value }, null, 2)))));
|
|
123
|
+
}
|
|
124
|
+
exports.DateRangePicker = react_1.default.memo(DateRangePicker_);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import DatePicker from "react-datepicker";
|
|
2
|
+
export declare const StyledDateRangeInputWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
invert?: boolean;
|
|
4
|
+
readOnly?: boolean;
|
|
5
|
+
}, never>;
|
|
6
|
+
export declare const StyledDateRangeInputDivider: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
7
|
+
export declare const StyledDatePicker: import("styled-components").StyledComponent<typeof DatePicker, any, {}, never>;
|
|
@@ -0,0 +1,24 @@
|
|
|
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.StyledDatePicker = exports.StyledDateRangeInputDivider = exports.StyledDateRangeInputWrapper = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var themes_1 = require("../../themes");
|
|
13
|
+
var __1 = require("../../..");
|
|
14
|
+
var react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
15
|
+
exports.StyledDateRangeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n /* gap: 8px; */\n ", "\n ", "\n\n .react-datepicker{\n margin-left: 3rem;\n }\n\n .react-datepicker__header{\n font-family: ", ";\n background-color: ", ";\n \n .react-datepicker__current-month{\n font-family: ", "; \n margin-bottom: 0.5rem;\n }\n }\n\n .react-datepicker__month{\n font-family: ", ";\n .react-datepicker__day{\n width: 20px;\n margin: 0.2rem;\n }\n }\n .react-datepicker__day-name{\n margin: 0.2rem;\n }\n"], ["\n display: flex;\n align-items: center;\n /* gap: 8px; */\n ", "\n ", "\n\n .react-datepicker{\n margin-left: 3rem;\n }\n\n .react-datepicker__header{\n font-family: ", ";\n background-color: ", ";\n \n .react-datepicker__current-month{\n font-family: ", "; \n margin-bottom: 0.5rem;\n }\n }\n\n .react-datepicker__month{\n font-family: ", ";\n .react-datepicker__day{\n width: 20px;\n margin: 0.2rem;\n }\n }\n .react-datepicker__day-name{\n margin: 0.2rem;\n }\n"])), function (_a) {
|
|
16
|
+
var invert = _a.invert;
|
|
17
|
+
return invert && "\n background-color: #333;\n color: #fff;\n ";
|
|
18
|
+
}, function (_a) {
|
|
19
|
+
var readOnly = _a.readOnly;
|
|
20
|
+
return readOnly && "\n opacity: 0.7;\n pointer-events: none;\n ";
|
|
21
|
+
}, themes_1.typo.UI_CAPTION, __1.colors2.grey10, themes_1.typo.UI_CAPTION, themes_1.typo.UI_CAPTION);
|
|
22
|
+
exports.StyledDateRangeInputDivider = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 1rem;\n"], ["\n margin: 1rem;\n"])));
|
|
23
|
+
exports.StyledDatePicker = (0, styled_components_1.default)(react_datepicker_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 16px;\n width: 120px;\n &:disabled {\n background-color: #f0f0f0;\n cursor: not-allowed;\n }\n"], ["\n padding: 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-size: 16px;\n width: 120px;\n &:disabled {\n background-color: #f0f0f0;\n cursor: not-allowed;\n }\n"])));
|
|
24
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -70,6 +70,6 @@ var CustomSelectComp = function (_a) {
|
|
|
70
70
|
return (react_1.default.createElement(index_styled_1.StyledWrapper, null,
|
|
71
71
|
react_1.default.createElement("div", null,
|
|
72
72
|
react_1.default.createElement(Typo2_1.UI_TAG, { style: { color: colors_1.colors.grey40 } }, title),
|
|
73
|
-
react_1.default.createElement(Typo2_1.
|
|
73
|
+
react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD, { capitalize: true, style: { color: display ? colors_1.colors.black : colors_1.colors.grey60 } }, display || placeholder)),
|
|
74
74
|
react_1.default.createElement(phosphor_react_1.List, { size: 18, weight: "bold" })));
|
|
75
75
|
};
|
|
@@ -75,10 +75,10 @@ exports.tabStyles = {
|
|
|
75
75
|
};
|
|
76
76
|
exports.TabBarStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n z-index: 1000;\n height: ", ";\n"], ["\n background-color: ", ";\n z-index: 1000;\n height: ", ";\n"])), white, function (_a) {
|
|
77
77
|
var size = _a.size;
|
|
78
|
-
return size === 'S' ? '2.5rem' : '
|
|
78
|
+
return size === 'S' ? '2.5rem' : 'auto';
|
|
79
79
|
});
|
|
80
80
|
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n"], ["\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n"])));
|
|
81
|
-
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n gap:
|
|
81
|
+
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n gap: 0.4rem;\n ", ";\n transform: ", ";\n"], ["\n display: flex;\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n gap: 0.4rem;\n ", ";\n transform: ", ";\n"])), (0, mixins_1.transition)('transform'), function (_a) {
|
|
82
82
|
var translateX = _a.translateX;
|
|
83
83
|
return "translateX(".concat(translateX, "px)");
|
|
84
84
|
});
|
|
@@ -92,9 +92,8 @@ var NumberInput_1 = require("./derivedComps/NumberInput");
|
|
|
92
92
|
Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return NumberInput_1.NumberInput; } });
|
|
93
93
|
var PhoneInput_1 = require("./derivedComps/PhoneInput");
|
|
94
94
|
Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return PhoneInput_1.PhoneInput; } });
|
|
95
|
-
var ClearButton_1 = require("../Buttons/derivedComps/ClearButton");
|
|
96
|
-
var ActionButton_1 = require("../Buttons/derivedComps/ActionButton");
|
|
97
95
|
var icons_1 = require("../../../icons");
|
|
96
|
+
var Buttons_1 = require("../Buttons");
|
|
98
97
|
var BadgeVetted = icons_1.icons.BadgeVetted;
|
|
99
98
|
function TextInput(_a) {
|
|
100
99
|
var _this = this;
|
|
@@ -189,8 +188,8 @@ function TextInput(_a) {
|
|
|
189
188
|
react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true }))),
|
|
190
189
|
(validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
|
|
191
190
|
react_1.default.createElement(BadgeVetted, { size: 26 }))),
|
|
192
|
-
clearBtn && clearBtnEnabled && (react_1.default.createElement(
|
|
193
|
-
actionBtn && (react_1.default.createElement(
|
|
191
|
+
(clearBtn && clearBtnEnabled) && (react_1.default.createElement(Buttons_1.ButtonSecondaryCompact, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } })),
|
|
192
|
+
actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimaryCompact, { value: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: size === "S" ? '-0.4rem' : '-0.2rem' } }))),
|
|
194
193
|
displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
|
|
195
194
|
(validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.error })),
|
|
196
195
|
react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,
|
|
@@ -47,6 +47,8 @@ export declare const UI_CAPTION: React.FunctionComponent<TypoCompProps>;
|
|
|
47
47
|
export declare const UI_CAPTION_BOLD: React.FunctionComponent<TypoCompProps>;
|
|
48
48
|
export declare const UI_CAPTION_DF: React.FunctionComponent<TypoCompProps>;
|
|
49
49
|
export declare const UI_CAPTION_BOLD_DF: React.FunctionComponent<TypoCompProps>;
|
|
50
|
+
export declare const UI_CAPTION_SEMIBOLD_DF: React.FunctionComponent<TypoCompProps>;
|
|
51
|
+
export declare const UI_CAPTION_SEMIBOLD: React.FunctionComponent<TypoCompProps>;
|
|
50
52
|
export declare const UI_TAG: React.FunctionComponent<TypoCompProps>;
|
|
51
53
|
export declare const UI_HELPTEXT: React.FunctionComponent<TypoCompProps>;
|
|
52
54
|
export declare const UI_STAT_LG: React.FunctionComponent<TypoCompProps>;
|
|
@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION_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 = 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");
|
|
@@ -117,6 +117,10 @@ var UI_CAPTION_DF = function (props) { return react_1.default.createElement(GenC
|
|
|
117
117
|
exports.UI_CAPTION_DF = UI_CAPTION_DF;
|
|
118
118
|
var UI_CAPTION_BOLD_DF = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_BOLD_DF_STYLED }); };
|
|
119
119
|
exports.UI_CAPTION_BOLD_DF = UI_CAPTION_BOLD_DF;
|
|
120
|
+
var UI_CAPTION_SEMIBOLD_DF = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_SEMIBOLD_DF_STYLED }); };
|
|
121
|
+
exports.UI_CAPTION_SEMIBOLD_DF = UI_CAPTION_SEMIBOLD_DF;
|
|
122
|
+
var UI_CAPTION_SEMIBOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_SEMIBOLD_STYLED }); };
|
|
123
|
+
exports.UI_CAPTION_SEMIBOLD = UI_CAPTION_SEMIBOLD;
|
|
120
124
|
var UI_TAG = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_TAG_STYLED }); };
|
|
121
125
|
exports.UI_TAG = UI_TAG;
|
|
122
126
|
var UI_HELPTEXT = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_HELPTEXT_STYLED }); };
|
|
@@ -21,6 +21,8 @@ export declare const UI_CAPTION_STYLED: import("styled-components").StyledCompon
|
|
|
21
21
|
export declare const UI_CAPTION_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
22
22
|
export declare const UI_CAPTION_DF_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
23
23
|
export declare const UI_CAPTION_BOLD_DF_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
24
|
+
export declare const UI_CAPTION_SEMIBOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
25
|
+
export declare const UI_CAPTION_SEMIBOLD_DF_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
24
26
|
export declare const UI_TAG_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
25
27
|
export declare const UI_HELPTEXT_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
|
|
26
28
|
export declare const UI_STAT_LG_STYLED: import("styled-components").StyledComponent<"h2", any, {}, never>;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_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_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
|
|
@@ -34,22 +34,24 @@ exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_20 || (
|
|
|
34
34
|
exports.UI_CAPTION_BOLD_STYLED = styled_components_1.default.p(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_BOLD);
|
|
35
35
|
exports.UI_CAPTION_DF_STYLED = styled_components_1.default.p(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_DF);
|
|
36
36
|
exports.UI_CAPTION_BOLD_DF_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_BOLD_DF);
|
|
37
|
-
exports.
|
|
38
|
-
exports.
|
|
39
|
-
exports.
|
|
40
|
-
exports.
|
|
37
|
+
exports.UI_CAPTION_SEMIBOLD_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_SEMIBOLD);
|
|
38
|
+
exports.UI_CAPTION_SEMIBOLD_DF_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_CAPTION_SEMIBOLD_DF);
|
|
39
|
+
exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_TAG);
|
|
40
|
+
exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_HELPTEXT);
|
|
41
|
+
exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.UI_STAT_LG);
|
|
42
|
+
exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
41
43
|
// Content Fonts
|
|
42
44
|
])), typo_1.typo.UI_STAT_SM);
|
|
43
45
|
// Content Fonts
|
|
44
|
-
exports.CONTENT_H1_STYLED = styled_components_1.default.h1(
|
|
45
|
-
exports.CONTENT_H2_STYLED = styled_components_1.default.h2(
|
|
46
|
-
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(
|
|
47
|
-
exports.CONTENT_BODY_STYLED = styled_components_1.default.p(
|
|
48
|
-
exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(
|
|
49
|
-
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(
|
|
50
|
-
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(
|
|
51
|
-
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(
|
|
52
|
-
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(
|
|
53
|
-
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(
|
|
54
|
-
exports.TYPO_V2_CLASSES = styled_components_1.default.div(
|
|
55
|
-
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;
|
|
46
|
+
exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n ", " \n "], ["\n ", " \n "])), typo_1.typo.CONTENT_H1);
|
|
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
|
+
exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n ", " \n"], ["\n ", " \n"])), typo_1.typo.CONTENT_H3);
|
|
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.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
|
|
51
|
+
exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
|
|
52
|
+
exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
|
|
53
|
+
exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_QUOTE);
|
|
54
|
+
exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
|
|
55
|
+
exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
|
|
56
|
+
exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __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);
|
|
57
|
+
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;
|
|
@@ -60,7 +60,7 @@ var ListContent = function (_a) {
|
|
|
60
60
|
react_1.default.createElement(styled_js_1.StyledListWrapper, null,
|
|
61
61
|
react_1.default.createElement(styled_js_1.StyledMainSection, null,
|
|
62
62
|
react_1.default.createElement("div", null,
|
|
63
|
-
(cardLabel || statusTag) && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight },
|
|
63
|
+
(cardLabel || statusTag) && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight, mediaConfigExists: mediaConfigExists },
|
|
64
64
|
react_1.default.createElement(CustomTag, { displayText: cardLabel, tagVariant: "primary", bothTagsDisplayTogether: bothTagsDisplayTogether }),
|
|
65
65
|
react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: statusTagVariant ? statusTagVariant : highlight == "primary" ? "positive" : "warning", bothTagsDisplayTogether: bothTagsDisplayTogether }))),
|
|
66
66
|
title ? (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 4, noOfLines_D: 3, title: title },
|
|
@@ -34,9 +34,12 @@ exports.StyledContentModule = styled_components_1.default.div(templateObject_4 |
|
|
|
34
34
|
exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n"])));
|
|
35
35
|
exports.StyledVideoOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
36
36
|
exports.StyledMainSection = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n overflow: hidden;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n overflow: hidden;\n"])));
|
|
37
|
-
exports.StyledLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", "
|
|
38
|
-
var highlight = _a.highlight;
|
|
39
|
-
|
|
37
|
+
exports.StyledLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n margin-bottom: 8px;\n display: flex;\n gap: 6px;\n"], ["\n width: ", ";\n margin-bottom: 8px;\n display: flex;\n gap: 6px;\n"])), function (_a) {
|
|
38
|
+
var highlight = _a.highlight, mediaConfigExists = _a.mediaConfigExists;
|
|
39
|
+
if (!mediaConfigExists && highlight)
|
|
40
|
+
return "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)"); // 6px gap between highlight and tag
|
|
41
|
+
else
|
|
42
|
+
return "100%";
|
|
40
43
|
});
|
|
41
44
|
exports.StyledTagWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n max-width: ", "; // 3px is the half of the space between tags\n"], ["\n max-width: ", "; // 3px is the half of the space between tags\n"])), function (_a) {
|
|
42
45
|
var bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
|
package/dist/v2/themes/typo.d.ts
CHANGED
|
@@ -22,6 +22,8 @@ export declare const typo: {
|
|
|
22
22
|
UI_PARAGRAPH_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
23
23
|
UI_CAPTION: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
24
24
|
UI_CAPTION_BOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
25
|
+
UI_CAPTION_SEMIBOLD: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
26
|
+
UI_CAPTION_SEMIBOLD_DF: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
25
27
|
UI_TAG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
26
28
|
UI_HELPTEXT: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
27
29
|
UI_STAT_LG: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|