@laerdal/life-react-components 1.0.1-dev.22.full → 1.0.1-dev.29.full
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/Banners/Banner.js +11 -8
- package/dist/esm/Banners/Banner.js.map +1 -1
- package/dist/esm/Button/Anchor.js +76 -0
- package/dist/esm/Button/Anchor.js.map +1 -0
- package/dist/esm/Button/BackButton.js +1 -1
- package/dist/esm/Button/BackButton.js.map +1 -1
- package/dist/esm/Button/Button.js +46 -19
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Button/DualFunctionButton.js +111 -0
- package/dist/esm/Button/DualFunctionButton.js.map +1 -0
- package/dist/esm/Button/Iconbutton.js +21 -1
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Button/__tests__/Button.test.js +2 -1
- package/dist/esm/Button/__tests__/Button.test.js.map +1 -1
- package/dist/esm/Button/index.js +1 -0
- package/dist/esm/Button/index.js.map +1 -1
- package/dist/esm/Dropdown/BasicDropdown.js +60 -127
- package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/esm/Dropdown/ChipDropdownInput.js +41 -132
- package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/esm/Dropdown/CommonStyling.js +20 -15
- package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
- package/dist/esm/Dropdown/DropdownButton.js +2 -2
- package/dist/esm/Dropdown/DropdownButton.js.map +1 -1
- package/dist/esm/Dropdown/DropdownContent.js +424 -0
- package/dist/esm/Dropdown/DropdownContent.js.map +1 -0
- package/dist/esm/Dropdown/DropdownFilter.js +42 -151
- package/dist/esm/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js +15 -17
- package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/esm/InputFields/Checkbox.js +19 -10
- package/dist/esm/InputFields/Checkbox.js.map +1 -1
- package/dist/esm/InputFields/QuickSearch.js +22 -12
- package/dist/esm/InputFields/QuickSearch.js.map +1 -1
- package/dist/esm/InputFields/RadioButton.js +18 -11
- package/dist/esm/InputFields/RadioButton.js.map +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +14 -14
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalStyles.js +3 -2
- package/dist/esm/Modals/ModalStyles.js.map +1 -1
- package/dist/esm/Paginator/Paginator.js +18 -8
- package/dist/esm/Paginator/Paginator.js.map +1 -1
- package/dist/esm/Paginator/__tests__/Paginator.test.js +1 -1
- package/dist/esm/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/esm/Table/Table.js +2 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Tabs/TabLink.js +1 -1
- package/dist/esm/Tabs/TabLink.js.map +1 -1
- package/dist/esm/Toasters/Toast.js +2 -1
- package/dist/esm/Toasters/Toast.js.map +1 -1
- package/dist/esm/types.js +8 -0
- package/dist/esm/types.js.map +1 -1
- package/dist/js/Banners/Banner.js +13 -11
- package/dist/js/Banners/Banner.js.map +1 -1
- package/dist/js/Button/Anchor.d.ts +7 -0
- package/dist/js/Button/Anchor.js +66 -0
- package/dist/js/Button/Anchor.js.map +1 -0
- package/dist/js/Button/BackButton.js +1 -1
- package/dist/js/Button/BackButton.js.map +1 -1
- package/dist/js/Button/Button.d.ts +4 -1
- package/dist/js/Button/Button.js +44 -18
- package/dist/js/Button/Button.js.map +1 -1
- package/dist/js/Button/DualFunctionButton.d.ts +12 -0
- package/dist/js/Button/DualFunctionButton.js +148 -0
- package/dist/js/Button/DualFunctionButton.js.map +1 -0
- package/dist/js/Button/Iconbutton.d.ts +1 -0
- package/dist/js/Button/Iconbutton.js +23 -3
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Button/__tests__/Button.test.js +3 -1
- package/dist/js/Button/__tests__/Button.test.js.map +1 -1
- package/dist/js/Button/index.d.ts +1 -0
- package/dist/js/Button/index.js +8 -0
- package/dist/js/Button/index.js.map +1 -1
- package/dist/js/Dropdown/BasicDropdown.d.ts +9 -2
- package/dist/js/Dropdown/BasicDropdown.js +67 -133
- package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/js/Dropdown/ChipDropdownInput.js +45 -138
- package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/js/Dropdown/CommonStyling.d.ts +6 -2
- package/dist/js/Dropdown/CommonStyling.js +17 -6
- package/dist/js/Dropdown/CommonStyling.js.map +1 -1
- package/dist/js/Dropdown/DropdownButton.js +1 -1
- package/dist/js/Dropdown/DropdownButton.js.map +1 -1
- package/dist/js/Dropdown/DropdownContent.d.ts +45 -0
- package/dist/js/Dropdown/DropdownContent.js +476 -0
- package/dist/js/Dropdown/DropdownContent.js.map +1 -0
- package/dist/js/Dropdown/DropdownFilter.js +59 -186
- package/dist/js/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js +7 -17
- package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/js/InputFields/Checkbox.d.ts +5 -3
- package/dist/js/InputFields/Checkbox.js +16 -9
- package/dist/js/InputFields/Checkbox.js.map +1 -1
- package/dist/js/InputFields/QuickSearch.js +24 -6
- package/dist/js/InputFields/QuickSearch.js.map +1 -1
- package/dist/js/InputFields/RadioButton.d.ts +4 -2
- package/dist/js/InputFields/RadioButton.js +15 -10
- package/dist/js/InputFields/RadioButton.js.map +1 -1
- package/dist/js/InputFields/components/SearchBarInput.js +1 -1
- package/dist/js/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +2 -1
- package/dist/js/Modals/ModalDialog.js +15 -14
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalStyles.d.ts +4 -3
- package/dist/js/Modals/ModalStyles.js +4 -2
- package/dist/js/Modals/ModalStyles.js.map +1 -1
- package/dist/js/Paginator/Paginator.js +7 -5
- package/dist/js/Paginator/Paginator.js.map +1 -1
- package/dist/js/Paginator/__tests__/Paginator.test.js +1 -1
- package/dist/js/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/js/Table/Table.js +3 -1
- package/dist/js/Table/Table.js.map +1 -1
- package/dist/js/Tabs/TabLink.js +1 -1
- package/dist/js/Tabs/TabLink.js.map +1 -1
- package/dist/js/Toasters/Toast.js +1 -1
- package/dist/js/Toasters/Toast.js.map +1 -1
- package/dist/js/types.d.ts +5 -0
- package/dist/js/types.js +10 -1
- package/dist/js/types.js.map +1 -1
- package/dist/umd/Banners/Banner.js +11 -8
- package/dist/umd/Banners/Banner.js.map +1 -1
- package/dist/umd/Button/Anchor.js +201 -0
- package/dist/umd/Button/Anchor.js.map +1 -0
- package/dist/umd/Button/BackButton.js +1 -1
- package/dist/umd/Button/BackButton.js.map +1 -1
- package/dist/umd/Button/Button.js +48 -22
- package/dist/umd/Button/Button.js.map +1 -1
- package/dist/umd/Button/DualFunctionButton.js +237 -0
- package/dist/umd/Button/DualFunctionButton.js.map +1 -0
- package/dist/umd/Button/Iconbutton.js +21 -1
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Button/__tests__/Button.test.js +5 -5
- package/dist/umd/Button/__tests__/Button.test.js.map +1 -1
- package/dist/umd/Button/index.js +10 -4
- package/dist/umd/Button/index.js.map +1 -1
- package/dist/umd/Dropdown/BasicDropdown.js +64 -131
- package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/umd/Dropdown/ChipDropdownInput.js +44 -134
- package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/umd/Dropdown/CommonStyling.js +23 -19
- package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
- package/dist/umd/Dropdown/DropdownButton.js +1 -1
- package/dist/umd/Dropdown/DropdownButton.js.map +1 -1
- package/dist/umd/Dropdown/DropdownContent.js +458 -0
- package/dist/umd/Dropdown/DropdownContent.js.map +1 -0
- package/dist/umd/Dropdown/DropdownFilter.js +47 -155
- package/dist/umd/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js +18 -21
- package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
- package/dist/umd/InputFields/Checkbox.js +22 -14
- package/dist/umd/InputFields/Checkbox.js.map +1 -1
- package/dist/umd/InputFields/QuickSearch.js +22 -12
- package/dist/umd/InputFields/QuickSearch.js.map +1 -1
- package/dist/umd/InputFields/RadioButton.js +21 -15
- package/dist/umd/InputFields/RadioButton.js.map +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +17 -18
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalStyles.js +6 -6
- package/dist/umd/Modals/ModalStyles.js.map +1 -1
- package/dist/umd/Paginator/Paginator.js +18 -8
- package/dist/umd/Paginator/Paginator.js.map +1 -1
- package/dist/umd/Paginator/__tests__/Paginator.test.js +1 -1
- package/dist/umd/Paginator/__tests__/Paginator.test.js.map +1 -1
- package/dist/umd/Table/Table.js +5 -5
- package/dist/umd/Table/Table.js.map +1 -1
- package/dist/umd/Tabs/TabLink.js +1 -1
- package/dist/umd/Tabs/TabLink.js.map +1 -1
- package/dist/umd/Toasters/Toast.js +1 -1
- package/dist/umd/Toasters/Toast.js.map +1 -1
- package/dist/umd/types.js +8 -0
- package/dist/umd/types.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports", "prop-types", "react", "./Button", "../icons/systemicons/SystemIcons", "../Dropdown/CommonStyling", "../types", "../Dropdown/DropdownContent", "styled-components"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("./Button"), require("../icons/systemicons/SystemIcons"), require("../Dropdown/CommonStyling"), require("../types"), require("../Dropdown/DropdownContent"), require("styled-components"));
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.CommonStyling, global.types, global.DropdownContent, global.styledComponents);
|
|
11
|
+
global.undefined = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _CommonStyling, _types, _DropdownContent, _styledComponents) {
|
|
14
|
+
"use strict";
|
|
15
|
+
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
21
|
+
|
|
22
|
+
var React = _interopRequireWildcard(_react);
|
|
23
|
+
|
|
24
|
+
var _Button2 = _interopRequireDefault(_Button);
|
|
25
|
+
|
|
26
|
+
var _DropdownContent2 = _interopRequireDefault(_DropdownContent);
|
|
27
|
+
|
|
28
|
+
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
29
|
+
|
|
30
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
31
|
+
if (typeof WeakMap !== "function") return null;
|
|
32
|
+
var cacheBabelInterop = new WeakMap();
|
|
33
|
+
var cacheNodeInterop = new WeakMap();
|
|
34
|
+
return (_getRequireWildcardCache = function (nodeInterop) {
|
|
35
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
36
|
+
})(nodeInterop);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function _interopRequireWildcard(obj, nodeInterop) {
|
|
40
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
41
|
+
return obj;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
45
|
+
return {
|
|
46
|
+
default: obj
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
51
|
+
|
|
52
|
+
if (cache && cache.has(obj)) {
|
|
53
|
+
return cache.get(obj);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
var newObj = {};
|
|
57
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
58
|
+
|
|
59
|
+
for (var key in obj) {
|
|
60
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
61
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
62
|
+
|
|
63
|
+
if (desc && (desc.get || desc.set)) {
|
|
64
|
+
Object.defineProperty(newObj, key, desc);
|
|
65
|
+
} else {
|
|
66
|
+
newObj[key] = obj[key];
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
newObj.default = obj;
|
|
72
|
+
|
|
73
|
+
if (cache) {
|
|
74
|
+
cache.set(obj, newObj);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
return newObj;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function _interopRequireDefault(obj) {
|
|
81
|
+
return obj && obj.__esModule ? obj : {
|
|
82
|
+
default: obj
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
const _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownCustomizationProps"],
|
|
87
|
+
_excluded2 = ["loading", "icon", "onClick"];
|
|
88
|
+
|
|
89
|
+
function _extends() {
|
|
90
|
+
_extends = Object.assign || function (target) {
|
|
91
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
92
|
+
var source = arguments[i];
|
|
93
|
+
|
|
94
|
+
for (var key in source) {
|
|
95
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
96
|
+
target[key] = source[key];
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
return target;
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
return _extends.apply(this, arguments);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
function _objectWithoutProperties(source, excluded) {
|
|
108
|
+
if (source == null) return {};
|
|
109
|
+
|
|
110
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
111
|
+
|
|
112
|
+
var key, i;
|
|
113
|
+
|
|
114
|
+
if (Object.getOwnPropertySymbols) {
|
|
115
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
116
|
+
|
|
117
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
118
|
+
key = sourceSymbolKeys[i];
|
|
119
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
120
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
121
|
+
target[key] = source[key];
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
return target;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
129
|
+
if (source == null) return {};
|
|
130
|
+
var target = {};
|
|
131
|
+
var sourceKeys = Object.keys(source);
|
|
132
|
+
var key, i;
|
|
133
|
+
|
|
134
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
135
|
+
key = sourceKeys[i];
|
|
136
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
137
|
+
target[key] = source[key];
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
return target;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
const ButtonsContainer = _styledComponents2.default.div`
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
|
|
147
|
+
button:first-child {
|
|
148
|
+
margin-right: 2px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.extramargin {
|
|
152
|
+
margin-right: 9px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
div.button-content {
|
|
156
|
+
gap: 0px;
|
|
157
|
+
padding: ${props => props.size == _types.Size.Large ? '4px 10px' : props.size == _types.Size.Medium ? '4px 8px' : '4px 6px'};
|
|
158
|
+
}
|
|
159
|
+
`;
|
|
160
|
+
|
|
161
|
+
const DualFunctionButton = _ref => {
|
|
162
|
+
let {
|
|
163
|
+
children = 'Primary Button',
|
|
164
|
+
variant = 'primary',
|
|
165
|
+
type = 'button',
|
|
166
|
+
size = _types.Size.Medium,
|
|
167
|
+
width = 'auto',
|
|
168
|
+
testId,
|
|
169
|
+
disabled,
|
|
170
|
+
id,
|
|
171
|
+
dropdownCustomizationProps
|
|
172
|
+
} = _ref,
|
|
173
|
+
props = _objectWithoutProperties(_ref, _excluded); // Let's filter out properties that we don't need to render.
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
const {
|
|
177
|
+
loading,
|
|
178
|
+
icon,
|
|
179
|
+
onClick
|
|
180
|
+
} = props,
|
|
181
|
+
renderProps = _objectWithoutProperties(props, _excluded2);
|
|
182
|
+
|
|
183
|
+
const [isOpen, setIsOpen] = React.useState(false);
|
|
184
|
+
const [selectedValues, setSelectedValues] = React.useState([]);
|
|
185
|
+
return /*#__PURE__*/React.createElement(ButtonsContainer, {
|
|
186
|
+
size: size
|
|
187
|
+
}, /*#__PURE__*/React.createElement(_CommonStyling.Dropdown, {
|
|
188
|
+
isButton: true,
|
|
189
|
+
locked: false,
|
|
190
|
+
disabled: false,
|
|
191
|
+
margin: ""
|
|
192
|
+
}, /*#__PURE__*/React.createElement(_Button2.default, _extends({}, renderProps, {
|
|
193
|
+
onClick: onClick,
|
|
194
|
+
disabled: disabled,
|
|
195
|
+
type: type,
|
|
196
|
+
imageExtraMargin: true,
|
|
197
|
+
loading: loading,
|
|
198
|
+
icon: icon,
|
|
199
|
+
size: size,
|
|
200
|
+
width: width,
|
|
201
|
+
variant: variant,
|
|
202
|
+
flatEdge: "right"
|
|
203
|
+
}), children), /*#__PURE__*/React.createElement(_DropdownContent2.default, {
|
|
204
|
+
customizationProps: dropdownCustomizationProps,
|
|
205
|
+
filter: "",
|
|
206
|
+
selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : selectedValues,
|
|
207
|
+
setSelectedValues: setSelectedValues,
|
|
208
|
+
isButton: true,
|
|
209
|
+
setIsOpen: setIsOpen,
|
|
210
|
+
hideOnClickOutside: true,
|
|
211
|
+
size: size,
|
|
212
|
+
isOpen: isOpen,
|
|
213
|
+
id: id ?? 'dropdownId',
|
|
214
|
+
messageOnNoResults: "",
|
|
215
|
+
alignLeft: true
|
|
216
|
+
})), /*#__PURE__*/React.createElement(_Button2.default, _extends({
|
|
217
|
+
variant: variant
|
|
218
|
+
}, renderProps, {
|
|
219
|
+
disabled: disabled,
|
|
220
|
+
type: type,
|
|
221
|
+
size: size,
|
|
222
|
+
onClick: () => setIsOpen(!isOpen),
|
|
223
|
+
icon: isOpen ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropUp, {
|
|
224
|
+
size: "16px"
|
|
225
|
+
}) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
|
|
226
|
+
size: "16px"
|
|
227
|
+
}),
|
|
228
|
+
flatEdge: "left"
|
|
229
|
+
}), /*#__PURE__*/React.createElement("span", null)));
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
DualFunctionButton.propTypes = {
|
|
233
|
+
isButton: _propTypes2.default.bool.isRequired
|
|
234
|
+
};
|
|
235
|
+
exports.default = DualFunctionButton;
|
|
236
|
+
});
|
|
237
|
+
//# sourceMappingURL=DualFunctionButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","Size","isButton","DualFunctionButton","children","variant","type","size","width","dropdownCustomizationProps","onClick","renderProps","React","id","setIsOpen","isOpen"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport Button, { ButtonProps } from './Button'\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n display: flex;\n align-items: center;\n\n button:first-child {\n margin-right: 2px;\n }\n\n .extramargin {\n margin-right: 9px;\n }\n\n div.button-content {\n gap: 0px;\n padding: ${ props => props.size == Size.Large ? '4px 10px' : props.size == Size.Medium ? '4px 8px' : '4px 6px' };\n }\n`;\n\nexport interface ButtonOption {\n label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n isButton: boolean;\n dropdownCustomizationProps: DropdownCustomizationProps;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n children = 'Primary Button',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n testId,\n disabled,\n id,\n dropdownCustomizationProps,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, icon, onClick, ...renderProps } = props;\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n return <ButtonsContainer size={size}>\n <Dropdown isButton={true} locked={false} disabled={false} margin=''>\n <Button\n {...renderProps}\n onClick={onClick}\n disabled={disabled}\n type={type}\n imageExtraMargin={true}\n loading={loading}\n icon={icon}\n size={size}\n width={width}\n variant={variant}\n flatEdge=\"right\">\n {children}\n </Button>\n <DropdownContent\n customizationProps={dropdownCustomizationProps}\n filter=''\n selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : selectedValues}\n setSelectedValues={setSelectedValues}\n isButton={true}\n setIsOpen={setIsOpen}\n hideOnClickOutside={true}\n size={size}\n isOpen={isOpen}\n id={id ?? 'dropdownId'}\n messageOnNoResults=''\n alignLeft={true} />\n </Dropdown>\n <Button variant={variant}\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n onClick={() => setIsOpen(!isOpen)}\n icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\n flatEdge=\"left\"><span/></Button>\n </ButtonsContainer>;\n };\n\n\nexport default DualFunctionButton;\n"],"file":"DualFunctionButton.js"}
|
|
@@ -108,6 +108,24 @@
|
|
|
108
108
|
}
|
|
109
109
|
};
|
|
110
110
|
|
|
111
|
+
const getBorderRadius = props => props.borderRadius ? `${props.borderRadius}px` : '4px';
|
|
112
|
+
|
|
113
|
+
const getBorderRadiusStyle = props => {
|
|
114
|
+
const radius = getBorderRadius(props);
|
|
115
|
+
|
|
116
|
+
switch (props.flatEdge) {
|
|
117
|
+
case 'left':
|
|
118
|
+
return `0px ${radius} ${radius} 0px`;
|
|
119
|
+
|
|
120
|
+
case 'right':
|
|
121
|
+
return `${radius} 0px 0px ${radius}`;
|
|
122
|
+
|
|
123
|
+
case 'none':
|
|
124
|
+
default:
|
|
125
|
+
return `${radius}`;
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
|
|
111
129
|
const StyledIconButton = _styledComponents2.default.button`
|
|
112
130
|
border-width: 0;
|
|
113
131
|
cursor: pointer;
|
|
@@ -124,7 +142,7 @@
|
|
|
124
142
|
div {
|
|
125
143
|
height: 36px;
|
|
126
144
|
width: 36px;
|
|
127
|
-
border-radius: ${
|
|
145
|
+
border-radius: ${getBorderRadiusStyle};
|
|
128
146
|
display: flex;
|
|
129
147
|
justify-content: center;
|
|
130
148
|
align-items: center;
|
|
@@ -252,6 +270,7 @@
|
|
|
252
270
|
iconColor,
|
|
253
271
|
unsetIconSize,
|
|
254
272
|
tabIndex,
|
|
273
|
+
flatEdge,
|
|
255
274
|
borderRadius,
|
|
256
275
|
onKeyPress,
|
|
257
276
|
tabbedHereBackgroundColor,
|
|
@@ -307,6 +326,7 @@
|
|
|
307
326
|
id: id,
|
|
308
327
|
type: type ?? 'button',
|
|
309
328
|
"data-testid": id,
|
|
329
|
+
flatEdge: flatEdge,
|
|
310
330
|
onClick: event => action(event),
|
|
311
331
|
onKeyDown: e => isPressingEnter(e) ? action() : null,
|
|
312
332
|
disabled: disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","BREAKPOINTS","MEDIUM","borderRadius","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","IconButton","type","supressFocusRef","React","isPressingEnter","e","event","setTabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n tabbedHere?: boolean;\n tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n switch (variant) {\n case 'secondary':\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n `;\n case 'primary':\n default:\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n `;\n }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n div {\n height: 36px;\n width: 36px;\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n &:focus:not(:disabled) {\n outline: none;\n div {\n outline: none;\n }\n }\n &:active:not(:disabled) {\n div {\n box-shadow: none;\n }\n }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_700};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_800};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n div {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_20};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_100};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ntype Props = {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n tabbedHereBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n borderRadius,\n onKeyPress,\n tabbedHereBackgroundColor,\n type,\n}): React.ReactElement<Props> => {\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledPrimaryIconButton>\n );\n }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","StyledIconButton","styled","button","BREAKPOINTS","MEDIUM","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","IconButton","type","supressFocusRef","React","isPressingEnter","e","event","setTabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n tabbedHere?: boolean;\n tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n switch (variant) {\n case 'secondary':\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n `;\n case 'primary':\n default:\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n `;\n }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch(props.flatEdge)\n {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n \n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n div {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n &:focus:not(:disabled) {\n outline: none;\n div {\n outline: none;\n }\n }\n &:active:not(:disabled) {\n div {\n box-shadow: none;\n }\n }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_700};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_800};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n div {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_20};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_100};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ntype Props = {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n tabbedHereBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n onKeyPress,\n tabbedHereBackgroundColor,\n type,\n}): React.ReactElement<Props> => {\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledPrimaryIconButton>\n );\n }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["react", "@testing-library/react", "../index", "jest-styled-components"], factory);
|
|
3
|
+
define(["react", "@testing-library/react", "../index", "../..", "jest-styled-components"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(require("react"), require("@testing-library/react"), require("../index"), require("jest-styled-components"));
|
|
5
|
+
factory(require("react"), require("@testing-library/react"), require("../index"), require("../.."), require("jest-styled-components"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(global.react, global.react, global.index, global.jestStyledComponents);
|
|
10
|
+
factory(global.react, global.react, global.index, global._, global.jestStyledComponents);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (_react, _react3, _index) {
|
|
13
|
+
})(this, function (_react, _react3, _index, _) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
var _react2 = _interopRequireDefault(_react);
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
} = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Button, {
|
|
30
30
|
variant: "primary",
|
|
31
31
|
testId: "TestButton",
|
|
32
|
-
size:
|
|
32
|
+
size: _.Size.Large
|
|
33
33
|
}, "TestButton"));
|
|
34
34
|
expect(queryByText('TestButton')).toBeDefined();
|
|
35
35
|
/*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/Button/__tests__/Button.test.tsx"],"names":["describe","it","getByTestId","render","expect","queryByText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/Button/__tests__/Button.test.tsx"],"names":["describe","it","getByTestId","render","Size","Large","expect","queryByText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOAA,EAAAA,QAAQ,CAAA,YAAA,EAAe,MAAM;AAC3BC,IAAAA,EAAE,CAAA,wBAAA,EAA2B,YAAY;AACvC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,OAAO,EAAf,SAAA;AAA0B,QAAA,MAAM,EAAhC,YAAA;AAA8C,QAAA,IAAI,EAAEC,OAAKC;AAAzD,OAAA,EADF,YACE,CADmCF,CAArC;AAKAG,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACA;AACJ;AACA;AATEL,KAAE,CAAFA;AAWAA,IAAAA,EAAE,CAAA,0BAAA,EAA6B,YAAY;AACzC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,OAAO,EAAf,WAAA;AAA4B,QAAA,MAAM,EAAC;AAAnC,OAAA,EADF,YACE,CADmCA,CAArC;AAKAG,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACA;AACJ;AACA;AATEL,KAAE,CAAFA;AAWAA,IAAAA,EAAE,CAAA,yBAAA,EAA4B,YAAY;AACxC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,OAAO,EAAf,UAAA;AAA2B,QAAA,MAAM,EAAC;AAAlC,OAAA,EADF,YACE,CADmCA,CAArC;AAKAG,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACA;AACJ;AACA;AATEL,KAAE,CAAFA;AAvBFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { Button } from '../index';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport { Size } from '../..';\n\ndescribe('<Button />', () => {\n it('Renders primary button', async () => {\n const { queryByText, getByTestId } = render(\n <Button variant=\"primary\" testId=\"TestButton\" size={Size.Large}>\n TestButton\n </Button>,\n );\n expect(queryByText('TestButton')).toBeDefined();\n /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);\n expect(getByTestId('TestButton')).toHaveStyleRule('cursor', 'pointer');\n expect(getByTestId('TestButton')).toHaveStyleRule('color', 'white');*/\n });\n it('Renders secondary button', async () => {\n const { queryByText, getByTestId } = render(\n <Button variant=\"secondary\" testId=\"TestButton\">\n TestButton\n </Button>,\n );\n expect(queryByText('TestButton')).toBeDefined();\n /*expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);\n expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.primary);\n expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');*/\n });\n it('Renders tertiary button', async () => {\n const { queryByText, getByTestId } = render(\n <Button variant=\"tertiary\" testId=\"TestButton\">\n TestButton\n </Button>,\n );\n expect(queryByText('TestButton')).toBeDefined();\n /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');\n expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.neutral_100);\n expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);*/\n });\n});\n"],"file":"Button.test.js"}
|
package/dist/umd/Button/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "./Iconbutton", "./Button", "./BackButton"], factory);
|
|
3
|
+
define(["exports", "./Iconbutton", "./Button", "./BackButton", "./Anchor"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("./Iconbutton"), require("./Button"), require("./BackButton"));
|
|
5
|
+
factory(exports, require("./Iconbutton"), require("./Button"), require("./BackButton"), require("./Anchor"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.Iconbutton, global.Button, global.BackButton);
|
|
10
|
+
factory(mod.exports, global.Iconbutton, global.Button, global.BackButton, global.Anchor);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _Iconbutton, _Button, _BackButton) {
|
|
13
|
+
})(this, function (exports, _Iconbutton, _Button, _BackButton, _Anchor) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -34,6 +34,12 @@
|
|
|
34
34
|
return _interopRequireDefault(_BackButton).default;
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
+
Object.defineProperty(exports, "Anchor", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () {
|
|
40
|
+
return _interopRequireDefault(_Anchor).default;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
37
43
|
|
|
38
44
|
function _interopRequireDefault(obj) {
|
|
39
45
|
return obj && obj.__esModule ? obj : {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;iDAAA,O;;;;;;6CACA,O;;;;;;iDACA,O","sourcesContent":["export { default as IconButton } from './Iconbutton';\nexport { default as Button } from './Button';\nexport { default as BackButton } from './BackButton';\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;iDAAA,O;;;;;;6CACA,O;;;;;;iDACA,O;;;;;;6CACA,O","sourcesContent":["export { default as IconButton } from './Iconbutton';\nexport { default as Button } from './Button';\nexport { default as BackButton } from './BackButton';\nexport { default as Anchor } from './Anchor';\n"],"file":"index.js"}
|