@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2
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/esm/Breadcrumb/Breadcrumb.js +96 -49
- package/dist/esm/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/esm/Button/DualFunctionButton.js +0 -3
- package/dist/esm/Button/DualFunctionButton.js.map +1 -1
- package/dist/esm/Button/Iconbutton.js +6 -2
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Button/index.js +0 -1
- package/dist/esm/Button/index.js.map +1 -1
- package/dist/esm/Chips/ChoiceChips.js +1 -2
- package/dist/esm/Chips/ChoiceChips.js.map +1 -1
- package/dist/esm/Dropdown/BasicDropdown.js +11 -3
- package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/esm/Dropdown/CommonStyling.js +15 -13
- package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
- package/dist/esm/Dropdown/DropdownButton.js +20 -8
- package/dist/esm/Dropdown/DropdownButton.js.map +1 -1
- package/dist/esm/Dropdown/DropdownContent.js +117 -31
- package/dist/esm/Dropdown/DropdownContent.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/RightSideNav.js +4 -0
- package/dist/esm/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/esm/List/ListRow.js +204 -90
- package/dist/esm/List/ListRow.js.map +1 -1
- package/dist/esm/List/__tests__/ListRow.tests.js +7 -43
- package/dist/esm/List/__tests__/ListRow.tests.js.map +1 -1
- package/dist/esm/List/index.js +1 -2
- package/dist/esm/List/index.js.map +1 -1
- package/dist/esm/Modals/ModalContainer.js +1 -0
- package/dist/esm/Modals/ModalContainer.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +12 -3
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalNote.js +56 -0
- package/dist/esm/Modals/ModalNote.js.map +1 -0
- package/dist/esm/Modals/ModalStyles.js +48 -0
- package/dist/esm/Modals/ModalStyles.js.map +1 -1
- package/dist/esm/NotificationDot/NotificationDot.js +41 -0
- package/dist/esm/NotificationDot/NotificationDot.js.map +1 -0
- package/dist/esm/NotificationDot/index.js +2 -0
- package/dist/esm/NotificationDot/index.js.map +1 -0
- package/dist/esm/Tabs/TabLink.js +25 -20
- package/dist/esm/Tabs/TabLink.js.map +1 -1
- package/dist/esm/Tabs/VerticalTabs.js +4 -1
- package/dist/esm/Tabs/VerticalTabs.js.map +1 -1
- package/dist/esm/Toggles/ToggleSwitch.js +14 -9
- package/dist/esm/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/esm/Toggles/TogglerStyles.js +101 -74
- package/dist/esm/Toggles/TogglerStyles.js.map +1 -1
- package/dist/esm/Toggles/TogglerTypes.js +0 -4
- package/dist/esm/Toggles/TogglerTypes.js.map +1 -1
- package/dist/esm/Tooltips/TooltipStyles.js +77 -0
- package/dist/esm/Tooltips/TooltipStyles.js.map +1 -0
- package/dist/esm/Tooltips/TooltipTypes.js +6 -0
- package/dist/esm/Tooltips/TooltipTypes.js.map +1 -0
- package/dist/esm/Tooltips/TooltipWrapper.js +24 -0
- package/dist/esm/Tooltips/TooltipWrapper.js.map +1 -0
- package/dist/esm/Tooltips/index.js +4 -0
- package/dist/esm/Tooltips/index.js.map +1 -0
- package/dist/esm/icons/contenticons/ContentIcons.js +454 -322
- package/dist/esm/icons/contenticons/ContentIcons.js.map +1 -1
- package/dist/esm/icons/index.js +55 -24
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/icons/systemicons/SystemIcons.js +652 -488
- package/dist/esm/icons/systemicons/SystemIcons.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types.js +1 -0
- package/dist/esm/types.js.map +1 -1
- package/dist/js/Breadcrumb/Breadcrumb.d.ts +5 -2
- package/dist/js/Breadcrumb/Breadcrumb.js +94 -36
- package/dist/js/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/js/Button/DualFunctionButton.d.ts +0 -1
- package/dist/js/Button/DualFunctionButton.js +0 -3
- package/dist/js/Button/DualFunctionButton.js.map +1 -1
- package/dist/js/Button/Iconbutton.js +2 -2
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Button/index.d.ts +0 -1
- package/dist/js/Button/index.js +0 -8
- package/dist/js/Button/index.js.map +1 -1
- package/dist/js/Chips/ChipTypes.d.ts +1 -0
- package/dist/js/Chips/ChoiceChips.js +1 -2
- package/dist/js/Chips/ChoiceChips.js.map +1 -1
- package/dist/js/Dropdown/BasicDropdown.d.ts +3 -2
- package/dist/js/Dropdown/BasicDropdown.js +18 -3
- package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/js/Dropdown/CommonStyling.d.ts +1 -0
- package/dist/js/Dropdown/CommonStyling.js +12 -12
- package/dist/js/Dropdown/CommonStyling.js.map +1 -1
- package/dist/js/Dropdown/DropdownButton.d.ts +1 -1
- package/dist/js/Dropdown/DropdownButton.js +19 -9
- package/dist/js/Dropdown/DropdownButton.js.map +1 -1
- package/dist/js/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/js/Dropdown/DropdownContent.d.ts +4 -1
- package/dist/js/Dropdown/DropdownContent.js +117 -38
- package/dist/js/Dropdown/DropdownContent.js.map +1 -1
- package/dist/js/GlobalNavigationBar/RightSideNav.js +1 -1
- package/dist/js/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/js/List/ListRow.d.ts +12 -5
- package/dist/js/List/ListRow.js +77 -55
- package/dist/js/List/ListRow.js.map +1 -1
- package/dist/js/List/__tests__/ListRow.tests.js +8 -53
- package/dist/js/List/__tests__/ListRow.tests.js.map +1 -1
- package/dist/js/List/index.d.ts +1 -2
- package/dist/js/List/index.js +0 -8
- package/dist/js/List/index.js.map +1 -1
- package/dist/js/Modals/ModalContainer.js +1 -1
- package/dist/js/Modals/ModalContainer.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +2 -0
- package/dist/js/Modals/ModalDialog.js +13 -3
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalNote.d.ts +9 -0
- package/dist/js/Modals/ModalNote.js +79 -0
- package/dist/js/Modals/ModalNote.js.map +1 -0
- package/dist/js/Modals/ModalStyles.d.ts +6 -0
- package/dist/js/Modals/ModalStyles.js +58 -4
- package/dist/js/Modals/ModalStyles.js.map +1 -1
- package/dist/js/NotificationDot/NotificationDot.d.ts +8 -0
- package/dist/js/NotificationDot/NotificationDot.js +70 -0
- package/dist/js/NotificationDot/NotificationDot.js.map +1 -0
- package/dist/js/NotificationDot/index.d.ts +1 -0
- package/dist/js/NotificationDot/index.js +16 -0
- package/dist/js/NotificationDot/index.js.map +1 -0
- package/dist/js/Tabs/TabLink.d.ts +3 -1
- package/dist/js/Tabs/TabLink.js +26 -11
- package/dist/js/Tabs/TabLink.js.map +1 -1
- package/dist/js/Tabs/VerticalTabs.d.ts +1 -0
- package/dist/js/Tabs/VerticalTabs.js +4 -1
- package/dist/js/Tabs/VerticalTabs.js.map +1 -1
- package/dist/js/Toggles/ToggleSwitch.d.ts +1 -1
- package/dist/js/Toggles/ToggleSwitch.js +16 -8
- package/dist/js/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/js/Toggles/TogglerStyles.d.ts +3 -0
- package/dist/js/Toggles/TogglerStyles.js +16 -6
- package/dist/js/Toggles/TogglerStyles.js.map +1 -1
- package/dist/js/Toggles/TogglerTypes.d.ts +2 -0
- package/dist/js/Toggles/TogglerTypes.js +0 -5
- package/dist/js/Toggles/TogglerTypes.js.map +1 -1
- package/dist/js/Tooltips/TooltipStyles.d.ts +10 -0
- package/dist/js/Tooltips/TooltipStyles.js +86 -0
- package/dist/js/Tooltips/TooltipStyles.js.map +1 -0
- package/dist/js/Tooltips/TooltipTypes.d.ts +14 -0
- package/dist/js/Tooltips/TooltipTypes.js +11 -0
- package/dist/js/Tooltips/TooltipTypes.js.map +1 -0
- package/dist/js/Tooltips/TooltipWrapper.d.ts +3 -0
- package/dist/js/Tooltips/TooltipWrapper.js +43 -0
- package/dist/js/Tooltips/TooltipWrapper.js.map +1 -0
- package/dist/js/Tooltips/index.d.ts +3 -0
- package/dist/js/Tooltips/index.js +30 -0
- package/dist/js/Tooltips/index.js.map +1 -0
- package/dist/js/icons/contenticons/ContentIcons.js +1513 -1381
- package/dist/js/icons/contenticons/ContentIcons.js.map +1 -1
- package/dist/js/icons/index.d.ts +2 -0
- package/dist/js/icons/index.js +68 -25
- package/dist/js/icons/index.js.map +1 -1
- package/dist/js/icons/systemicons/SystemIcons.js +652 -488
- package/dist/js/icons/systemicons/SystemIcons.js.map +1 -1
- package/dist/js/index.d.ts +1 -0
- package/dist/js/index.js +13 -0
- package/dist/js/index.js.map +1 -1
- package/dist/js/types.d.ts +1 -0
- package/dist/js/types.js +1 -0
- package/dist/js/types.js.map +1 -1
- package/dist/umd/Breadcrumb/Breadcrumb.js +97 -51
- package/dist/umd/Breadcrumb/Breadcrumb.js.map +1 -1
- package/dist/umd/Button/DualFunctionButton.js +10 -15
- package/dist/umd/Button/DualFunctionButton.js.map +1 -1
- package/dist/umd/Button/Iconbutton.js +6 -2
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Button/index.js +4 -10
- package/dist/umd/Button/index.js.map +1 -1
- package/dist/umd/Chips/ChoiceChips.js +1 -2
- package/dist/umd/Chips/ChoiceChips.js.map +1 -1
- package/dist/umd/Dropdown/BasicDropdown.js +11 -3
- package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/umd/Dropdown/CommonStyling.js +18 -14
- package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
- package/dist/umd/Dropdown/DropdownButton.js +20 -8
- package/dist/umd/Dropdown/DropdownButton.js.map +1 -1
- package/dist/umd/Dropdown/DropdownContent.js +119 -34
- package/dist/umd/Dropdown/DropdownContent.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/RightSideNav.js +4 -0
- package/dist/umd/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/umd/List/ListRow.js +218 -92
- package/dist/umd/List/ListRow.js.map +1 -1
- package/dist/umd/List/__tests__/ListRow.tests.js +9 -46
- package/dist/umd/List/__tests__/ListRow.tests.js.map +1 -1
- package/dist/umd/List/index.js +5 -8
- package/dist/umd/List/index.js.map +1 -1
- package/dist/umd/Modals/ModalContainer.js +1 -0
- package/dist/umd/Modals/ModalContainer.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +15 -7
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalNote.js +133 -0
- package/dist/umd/Modals/ModalNote.js.map +1 -0
- package/dist/umd/Modals/ModalStyles.js +54 -5
- package/dist/umd/Modals/ModalStyles.js.map +1 -1
- package/dist/umd/NotificationDot/NotificationDot.js +119 -0
- package/dist/umd/NotificationDot/NotificationDot.js.map +1 -0
- package/dist/umd/NotificationDot/index.js +32 -0
- package/dist/umd/NotificationDot/index.js.map +1 -0
- package/dist/umd/Tabs/TabLink.js +28 -24
- package/dist/umd/Tabs/TabLink.js.map +1 -1
- package/dist/umd/Tabs/VerticalTabs.js +4 -1
- package/dist/umd/Tabs/VerticalTabs.js.map +1 -1
- package/dist/umd/Toggles/ToggleSwitch.js +16 -12
- package/dist/umd/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/umd/Toggles/TogglerStyles.js +100 -73
- package/dist/umd/Toggles/TogglerStyles.js.map +1 -1
- package/dist/umd/Toggles/TogglerTypes.js +0 -5
- package/dist/umd/Toggles/TogglerTypes.js.map +1 -1
- package/dist/umd/Tooltips/TooltipStyles.js +101 -0
- package/dist/umd/Tooltips/TooltipStyles.js.map +1 -0
- package/dist/umd/Tooltips/TooltipTypes.js +25 -0
- package/dist/umd/Tooltips/TooltipTypes.js.map +1 -0
- package/dist/umd/Tooltips/TooltipWrapper.js +92 -0
- package/dist/umd/Tooltips/TooltipWrapper.js.map +1 -0
- package/dist/umd/Tooltips/index.js +33 -0
- package/dist/umd/Tooltips/index.js.map +1 -0
- package/dist/umd/icons/contenticons/ContentIcons.js +604 -471
- package/dist/umd/icons/contenticons/ContentIcons.js.map +1 -1
- package/dist/umd/icons/index.js +62 -29
- package/dist/umd/icons/index.js.map +1 -1
- package/dist/umd/icons/systemicons/SystemIcons.js +652 -488
- package/dist/umd/icons/systemicons/SystemIcons.js.map +1 -1
- package/dist/umd/index.js +13 -4
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/types.js +1 -0
- package/dist/umd/types.js.map +1 -1
- package/package.json +1 -1
- package/dist/esm/Button/Anchor.js +0 -76
- package/dist/esm/Button/Anchor.js.map +0 -1
- package/dist/esm/List/ListRowDropdown.js +0 -105
- package/dist/esm/List/ListRowDropdown.js.map +0 -1
- package/dist/js/Button/Anchor.d.ts +0 -7
- package/dist/js/Button/Anchor.js +0 -66
- package/dist/js/Button/Anchor.js.map +0 -1
- package/dist/js/List/ListRowDropdown.d.ts +0 -8
- package/dist/js/List/ListRowDropdown.js +0 -110
- package/dist/js/List/ListRowDropdown.js.map +0 -1
- package/dist/umd/Button/Anchor.js +0 -201
- package/dist/umd/Button/Anchor.js.map +0 -1
- package/dist/umd/List/ListRowDropdown.js +0 -182
- package/dist/umd/List/ListRowDropdown.js.map +0 -1
|
@@ -1,27 +1,37 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
|
-
exports.ToggleSwitch = exports.ToggleSwitchContainer = void 0;
|
|
8
|
+
exports.ToggleSwitch = exports.ToggleSwitchContainer = exports.StyledSwitch = void 0;
|
|
7
9
|
|
|
8
10
|
var _styles = require("../styles");
|
|
9
11
|
|
|
10
|
-
var _styledComponents =
|
|
12
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
13
|
|
|
12
14
|
var _typography = require("../styles/typography");
|
|
13
15
|
|
|
14
|
-
var _templateObject, _templateObject2;
|
|
16
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
19
|
|
|
16
|
-
function
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
21
|
|
|
18
22
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
19
23
|
|
|
20
|
-
var
|
|
24
|
+
var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ", "\n }\n\n &.medium {\n ", "\n }\n\n &.large {\n ", "\n }\n &.disabled {\n color: ", ";\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ", ";\n }\n }\n\n ", "\n &:not(.disabled):focus label:first-of-type span {\n box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, function (props) {
|
|
25
|
+
return props.selected ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n label:first-of-type span {\n background-color: ", ";\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_200, _styles.COLORS.correct_500, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.correct_500) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &.disabled label:first-of-type span {\n background-color: ", " !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ", " !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n background-color: ", ";\n }\n }\n "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.critical_500, _styles.COLORS.primary_20);
|
|
26
|
+
}, _styles.COLORS.focus_25, _styles.COLORS.focus);
|
|
27
|
+
|
|
28
|
+
exports.StyledSwitch = StyledSwitch;
|
|
29
|
+
|
|
30
|
+
var ToggleSwitchContainer = _styledComponents.default.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n"])));
|
|
21
31
|
|
|
22
32
|
exports.ToggleSwitchContainer = ToggleSwitchContainer;
|
|
23
33
|
|
|
24
|
-
var ToggleSwitch = _styledComponents.default.span(
|
|
34
|
+
var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ", ";\n border-radius: 100px;\n\n &.semantic {\n background-color: ", ";\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ", ";\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
|
|
25
35
|
|
|
26
36
|
exports.ToggleSwitch = ToggleSwitch;
|
|
27
37
|
//# sourceMappingURL=TogglerStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focus_25","focus","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,mwBASnB,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CATmB,EAanB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAbmB,EAiBnB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAjBmB,EAoBZD,eAAOE,WApBK,EAiCCF,eAAOG,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,OACIC,qBADJ,44BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,6jBAoC4BN,eAAOE,WApCnC,EAwC8BF,eAAOW,WAxCrC,EA8C8BX,eAAOY,YA9CrC,EAkD8BZ,eAAOS,UAlDrC,CADA;AAAA,CArCqB,EA6FMT,eAAOa,QA7Fb,EA6FsCb,eAAOc,KA7F7C,CAAlB;;;;AAqGA,IAAMC,qBAAqB,GAAGnB,0BAAOoB,KAAV,wMAA3B;;;;AASA,IAAMC,YAAY,GAAGrB,0BAAOsB,IAAV,grBAWHlB,eAAOmB,WAXJ,EAeDnB,eAAOY,YAfN,EAyBDZ,eAAOoB,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n display: flex;\n flex-direction: row;\n width: max-content;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n cursor: pointer;\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n &.disabled {\n color: ${COLORS.neutral_300};\n\n .label {\n cursor: not-allowed;\n }\n }\n .label {\n cursor: inherit;\n margin-left: 8px;\n }\n\n &:not(.disabled):active label:first-of-type span {\n &:before {\n background-color: ${COLORS.primary_100};\n }\n }\n\n ${(props) =>\n props.selected\n ? css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_200} !important;\n cursor: not-allowed;\n }\n }\n &:hover span {\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n label:first-of-type span {\n background-color: ${COLORS.primary_500};\n\n &.semantic {\n background-color: ${COLORS.correct_500};\n }\n\n &:before {\n -webkit-transform: translateX(20px);\n -ms-transform: translateX(20px);\n transform: translateX(20px);\n }\n }\n `\n : css`\n &.disabled label:first-of-type span {\n background-color: ${COLORS.neutral_300} !important;\n cursor: not-allowed;\n\n &:before {\n background-color: ${COLORS.neutral_100} !important;\n cursor: not-allowed;\n }\n }\n &:hover label:first-of-type span {\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n background-color: ${COLORS.primary_20};\n }\n }\n `}\n &:not(.disabled):focus label:first-of-type span {\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n }\n\n &:not(.disabled) label:first-of-type {\n cursor: inherit;\n }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n position: relative;\n align-items: center;\n display: inline-flex;\n height: 28px;\n width: auto;\n padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n position: relative;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 36px;\n height: 16px;\n background-color: ${COLORS.neutral_500};\n border-radius: 100px;\n\n &.semantic {\n background-color: ${COLORS.critical_500};\n }\n\n &:before {\n position: absolute;\n content: '';\n height: 12px;\n width: 12px;\n left: 2px;\n top: calc(50% - 6px);\n background-color: ${COLORS.white};\n -webkit-transition: background-color 0.1s, transform 0.1s;\n transition: 0.1s;\n transition-timing-function: ease-in-out;\n border-radius: 50%;\n }\n`;\n"],"file":"TogglerStyles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"TogglerTypes.js"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Size } from '../types';
|
|
2
|
+
export declare const Tooltip: import("styled-components").StyledComponent<"div", any, {
|
|
3
|
+
withArrow?: boolean;
|
|
4
|
+
size?: Size;
|
|
5
|
+
height?: string;
|
|
6
|
+
align?: 'start' | 'end' | 'center' | undefined;
|
|
7
|
+
position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
|
|
8
|
+
}, never>;
|
|
9
|
+
export declare const TooltipTrigger: import("styled-components").FlattenSimpleInterpolation;
|
|
10
|
+
export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.TooltipContainer = exports.TooltipTrigger = exports.Tooltip = void 0;
|
|
9
|
+
|
|
10
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
|
+
|
|
12
|
+
var _types = require("../types");
|
|
13
|
+
|
|
14
|
+
var _styles = require("../styles");
|
|
15
|
+
|
|
16
|
+
var _typography = require("../styles/typography");
|
|
17
|
+
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
19
|
+
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
|
|
22
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
+
|
|
24
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
25
|
+
|
|
26
|
+
var distanceToEdge = function distanceToEdge(size) {
|
|
27
|
+
return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n pointer-events: none;\n ", "\n ", "\n ", "\n ", "\n box-shadow: ", ";\n \n padding: ", ";\n border-radius: 2px;\n width: max-content;\n height: ", ";\n max-width: 34ems;\n background: ", ";\n position: absolute; \n opacity: 0; \n z-index: 1;\n ", "\n\n ", "\n ", "\n \n ", "\n\n\n&::after {\n ", "\n content: \"\";\n position: absolute;\n ", "\n \n ", "\n ", "\n\n ", "\n\n ", "\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ", " \n ", " \n ", " \n ", ";\n }\n"])), function (props) {
|
|
31
|
+
return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
|
|
32
|
+
}, function (props) {
|
|
33
|
+
return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
|
|
34
|
+
}, function (props) {
|
|
35
|
+
return props.size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return props.align == 'center' ? 'text-align: center;' : '';
|
|
38
|
+
}, _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
|
|
39
|
+
return props.size == _types.Size.XSmall ? '4px 8px' : props.size == _types.Size.Medium ? '8px 12px' : '6px 10px';
|
|
40
|
+
}, function (props) {
|
|
41
|
+
return props.height;
|
|
42
|
+
}, _styles.COLORS.primary_800, function (props) {
|
|
43
|
+
return props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '';
|
|
44
|
+
}, function (props) {
|
|
45
|
+
return props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '';
|
|
46
|
+
}, function (props) {
|
|
47
|
+
return props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '';
|
|
48
|
+
}, function (props) {
|
|
49
|
+
return props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? 'left: 0%;' : props.align == 'end' ? 'right: 0%;' : 'left: 50%; transform: translateX(-50%);';
|
|
50
|
+
}, function (props) {
|
|
51
|
+
return !props.withArrow ? 'display: none;' : '';
|
|
52
|
+
}, function (props) {
|
|
53
|
+
return props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '';
|
|
54
|
+
}, function (props) {
|
|
55
|
+
return props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '';
|
|
56
|
+
}, function (props) {
|
|
57
|
+
return props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '';
|
|
58
|
+
}, function (props) {
|
|
59
|
+
return props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? "left: ".concat(distanceToEdge(props.size), ";") : props.align == 'end' ? "right: ".concat(distanceToEdge(props.size), ";") : 'left: 50%;';
|
|
60
|
+
}, function (props) {
|
|
61
|
+
return props.position == 'left' ? '' : 'margin-left: -5px;';
|
|
62
|
+
}, function (props) {
|
|
63
|
+
return props.position == 'top' ? _styles.COLORS.primary_800 : 'transparent';
|
|
64
|
+
}, function (props) {
|
|
65
|
+
return props.position == 'right' ? _styles.COLORS.primary_800 : 'transparent';
|
|
66
|
+
}, function (props) {
|
|
67
|
+
return props.position == 'bottom' ? _styles.COLORS.primary_800 : 'transparent';
|
|
68
|
+
}, function (props) {
|
|
69
|
+
return props.position == 'left' ? _styles.COLORS.primary_800 : 'transparent';
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
exports.Tooltip = Tooltip;
|
|
73
|
+
Tooltip.defaultProps = {
|
|
74
|
+
withArrow: false,
|
|
75
|
+
size: _types.Size.Small,
|
|
76
|
+
height: 'auto',
|
|
77
|
+
align: 'center',
|
|
78
|
+
position: 'bottom'
|
|
79
|
+
};
|
|
80
|
+
var TooltipTrigger = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover ", ", &:focus-within ", ", &:focus ", " {\n opacity: 1;\n transition: 0.5s;\n transition-delay: 1s;\n }\n"])), Tooltip, Tooltip, Tooltip);
|
|
81
|
+
exports.TooltipTrigger = TooltipTrigger;
|
|
82
|
+
|
|
83
|
+
var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n\n ", "\n"])), TooltipTrigger);
|
|
84
|
+
|
|
85
|
+
exports.TooltipContainer = TooltipContainer;
|
|
86
|
+
//# sourceMappingURL=TooltipStyles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","position","withArrow","defaultProps","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst distanceToEdge = (size: Size | undefined) => {\n return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n withArrow?: boolean;\n size?: Size;\n height?: string;\n align?: 'start' | 'end' | 'center' | undefined;\n position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n pointer-events: none;\n ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n \n padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n border-radius: 2px;\n width: max-content;\n height: ${props => props.height};\n max-width: 34ems;\n background: ${COLORS.primary_800};\n position: absolute; \n opacity: 0; \n z-index: 1;\n ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n \n ${props =>\n props.position == 'left' || props.position == 'right'\n ? ''\n : props.align == 'start'\n ? 'left: 0%;'\n : props.align == 'end'\n ? 'right: 0%;'\n : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n ${props => (!props.withArrow ? 'display: none;' : '')}\n content: \"\";\n position: absolute;\n ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n \n ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n ${props =>\n props.position == 'left' || props.position == 'right' ? '' : \n props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n margin: -0.5px;\n border-width: 4px;\n border-style: solid;\n border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n }\n`;\n\nTooltip.defaultProps = {\n withArrow: false,\n size: Size.Small,\n height: 'auto',\n align: 'center',\n position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n opacity: 1;\n transition: 0.5s;\n transition-delay: 1s;\n }\n`;\n\nexport const TooltipContainer = styled.div`\n display: inline-block;\n position: relative;\n\n ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Size } from "../types";
|
|
2
|
+
/**
|
|
3
|
+
* Types for the table.
|
|
4
|
+
*/
|
|
5
|
+
export interface TooltipProps {
|
|
6
|
+
label?: string;
|
|
7
|
+
withArrow?: boolean;
|
|
8
|
+
width?: string;
|
|
9
|
+
size?: Size;
|
|
10
|
+
height?: string;
|
|
11
|
+
align?: 'start' | 'end' | 'center' | undefined;
|
|
12
|
+
position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAUG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n label?: string;\n withArrow?: boolean;\n width?: string;\n size?: Size;\n height?: string;\n align? : 'start' | 'end' | 'center' | undefined;\n position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n children?: React.ReactNode;\n };\n "],"file":"TooltipTypes.js"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _TooltipStyles = require("./TooltipStyles");
|
|
13
|
+
|
|
14
|
+
var _ = require("..");
|
|
15
|
+
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
+
|
|
18
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
|
|
20
|
+
var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
21
|
+
var label = _ref.label,
|
|
22
|
+
children = _ref.children,
|
|
23
|
+
withArrow = _ref.withArrow,
|
|
24
|
+
_ref$size = _ref.size,
|
|
25
|
+
size = _ref$size === void 0 ? _.Size.Small : _ref$size,
|
|
26
|
+
_ref$height = _ref.height,
|
|
27
|
+
height = _ref$height === void 0 ? 'auto' : _ref$height,
|
|
28
|
+
_ref$align = _ref.align,
|
|
29
|
+
align = _ref$align === void 0 ? 'center' : _ref$align,
|
|
30
|
+
_ref$position = _ref.position,
|
|
31
|
+
position = _ref$position === void 0 ? 'bottom' : _ref$position;
|
|
32
|
+
return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, null, /*#__PURE__*/React.createElement(_TooltipStyles.Tooltip, {
|
|
33
|
+
align: align,
|
|
34
|
+
height: height,
|
|
35
|
+
size: size,
|
|
36
|
+
withArrow: withArrow,
|
|
37
|
+
position: position
|
|
38
|
+
}, label), children);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
var _default = TooltipWrapper;
|
|
42
|
+
exports.default = _default;
|
|
43
|
+
//# sourceMappingURL=TooltipWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","label","children","withArrow","size","Size","Small","height","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;AAEC,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAMoB;AAAA,MALzCC,KAKyC,QALzCA,KAKyC;AAAA,MALlCC,QAKkC,QALlCA,QAKkC;AAAA,MAJzCC,SAIyC,QAJzCA,SAIyC;AAAA,uBAHzCC,IAGyC;AAAA,MAHzCA,IAGyC,0BAHlCC,OAAKC,KAG6B;AAAA,yBAFzCC,MAEyC;AAAA,MAFzCA,MAEyC,4BAFhC,MAEgC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,oBAAC,+BAAD,qBACC,oBAAC,sBAAD;AAAS,IAAA,KAAK,EAAED,KAAhB;AACG,IAAA,MAAM,EAAED,MADX;AAEG,IAAA,IAAI,EAAEH,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEM;AAJb,KAKIR,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAlBD;;eAoBeF,c","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n label, children,\n withArrow,\n size = Size.Small,\n height = 'auto',\n align = 'center', \n position = 'bottom' } : TooltipProps) => {\n \n return <TooltipContainer>\n <Tooltip align={align} \n height={height} \n size={size}\n withArrow={withArrow} \n position={position}>\n {label}\n </Tooltip>\n {children}\n </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "TooltipWrapper", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _TooltipWrapper.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "TooltipTrigger", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _TooltipStyles.TooltipTrigger;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "TooltipContainer", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _TooltipStyles.TooltipContainer;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
var _TooltipWrapper = _interopRequireDefault(require("./TooltipWrapper"));
|
|
26
|
+
|
|
27
|
+
var _TooltipStyles = require("./TooltipStyles");
|
|
28
|
+
|
|
29
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
30
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Tooltips/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import TooltipWrapper from './TooltipWrapper';\nimport {TooltipTrigger, TooltipContainer} from './TooltipStyles';\n\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer };\n"],"file":"index.js"}
|