@sb1/ffe-buttons-react 21.0.20 → 22.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/ActionButton.js +16 -40
- package/es/BackButton.js +18 -26
- package/es/BaseButton.js +51 -80
- package/es/ButtonGroup.js +25 -26
- package/es/ExpandButton.js +31 -48
- package/es/InlineBaseButton.js +39 -51
- package/es/InlineExpandButton.js +33 -38
- package/es/PrimaryButton.js +17 -39
- package/es/SecondaryButton.js +17 -39
- package/es/ShortcutButton.js +18 -28
- package/es/TaskButton.js +29 -32
- package/es/TertiaryButton.js +17 -33
- package/es/fixedForwardRef.js +2 -0
- package/es/index.js +10 -10
- package/es/types.js +1 -0
- package/lib/ActionButton.js +22 -47
- package/lib/BackButton.js +23 -32
- package/lib/BaseButton.js +58 -87
- package/lib/ButtonGroup.js +32 -33
- package/lib/ExpandButton.js +37 -55
- package/lib/InlineBaseButton.js +46 -58
- package/lib/InlineExpandButton.js +39 -45
- package/lib/PrimaryButton.js +21 -44
- package/lib/SecondaryButton.js +21 -44
- package/lib/ShortcutButton.js +23 -34
- package/lib/TaskButton.js +34 -38
- package/lib/TertiaryButton.js +21 -38
- package/lib/fixedForwardRef.js +5 -0
- package/lib/index.js +22 -75
- package/lib/types.js +2 -0
- package/package.json +8 -10
- package/types/ActionButton.d.ts +4 -0
- package/types/BackButton.d.ts +4 -0
- package/types/BaseButton.d.ts +22 -0
- package/types/ButtonGroup.d.ts +8 -0
- package/types/ExpandButton.d.ts +18 -0
- package/types/InlineBaseButton.d.ts +28 -0
- package/types/InlineExpandButton.d.ts +10 -0
- package/types/PrimaryButton.d.ts +4 -0
- package/types/SecondaryButton.d.ts +4 -0
- package/types/ShortcutButton.d.ts +4 -0
- package/types/TaskButton.d.ts +10 -0
- package/types/TertiaryButton.d.ts +4 -0
- package/types/fixedForwardRef.d.ts +4 -0
- package/types/index.d.ts +10 -107
- package/types/types.d.ts +8 -0
package/es/ActionButton.js
CHANGED
|
@@ -1,42 +1,18 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
5
12
|
import React from 'react';
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var className = props.className,
|
|
11
|
-
leftIcon = props.leftIcon,
|
|
12
|
-
rightIcon = props.rightIcon,
|
|
13
|
-
rest = _objectWithoutProperties(props, _excluded);
|
|
14
|
-
return /*#__PURE__*/React.createElement(Button, _extends({
|
|
15
|
-
buttonType: "action",
|
|
16
|
-
className: classNames(className),
|
|
17
|
-
leftIcon: leftIcon,
|
|
18
|
-
rightIcon: rightIcon
|
|
19
|
-
}, rest));
|
|
13
|
+
import { BaseButton } from './BaseButton';
|
|
14
|
+
import { fixedForwardRef } from './fixedForwardRef';
|
|
15
|
+
function ActionButtonWithForwardRef(props, ref) {
|
|
16
|
+
return React.createElement(BaseButton, __assign({}, props, { ref: ref, buttonType: "action" }));
|
|
20
17
|
}
|
|
21
|
-
ActionButton
|
|
22
|
-
/** Aria label for loading indicator */
|
|
23
|
-
ariaLoadingMessage: string,
|
|
24
|
-
/** The button label */
|
|
25
|
-
children: node,
|
|
26
|
-
/** Extra class names */
|
|
27
|
-
className: string,
|
|
28
|
-
/** Disable a button in certain situations */
|
|
29
|
-
disabled: bool,
|
|
30
|
-
/** The rendered element, like an `<a />` or `<Link />` */
|
|
31
|
-
element: oneOfType([func, string, elementType]),
|
|
32
|
-
/** Ref-setting function, or ref created by useRef, passed to the button element */
|
|
33
|
-
innerRef: oneOfType([func, shape({
|
|
34
|
-
current: object
|
|
35
|
-
})]),
|
|
36
|
-
/** Shows a loader if true */
|
|
37
|
-
isLoading: bool,
|
|
38
|
-
/** Icon shown to the left of the label */
|
|
39
|
-
leftIcon: node,
|
|
40
|
-
/** Icon shown to the right of the label */
|
|
41
|
-
rightIcon: node
|
|
42
|
-
};
|
|
18
|
+
export var ActionButton = fixedForwardRef(ActionButtonWithForwardRef);
|
package/es/BackButton.js
CHANGED
|
@@ -1,28 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
2
12
|
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import InlineButton from './InlineBaseButton';
|
|
13
|
+
import { InlineBaseButton } from './InlineBaseButton';
|
|
5
14
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
buttonType: "back",
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
size: "md"
|
|
13
|
-
})
|
|
14
|
-
}, props));
|
|
15
|
-
};
|
|
16
|
-
BackButton.propTypes = {
|
|
17
|
-
/** The button label */
|
|
18
|
-
children: node,
|
|
19
|
-
/** Extra class names */
|
|
20
|
-
className: string,
|
|
21
|
-
/** The rendered element, like an `<a />` or `<Link />` */
|
|
22
|
-
element: oneOfType([func, string, elementType]),
|
|
23
|
-
/** Ref-setting function, or ref created by useRef, passed to the button element */
|
|
24
|
-
innerRef: oneOfType([func, shape({
|
|
25
|
-
current: object
|
|
26
|
-
})])
|
|
27
|
-
};
|
|
28
|
-
export default BackButton;
|
|
15
|
+
import { fixedForwardRef } from './fixedForwardRef';
|
|
16
|
+
function BackButtonWithForwardRef(props, ref) {
|
|
17
|
+
var chevronLeftIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im00MTguMTUzLTQ4MCAxNjIuOTIzIDE2Mi45MjRxOC4zMDggOC4zMDcgOC41IDIwLjg4NC4xOTMgMTIuNTc2LTguNSAyMS4yNjgtOC42OTIgOC42OTMtMjEuMDc2IDguNjkzdC0yMS4wNzYtOC42OTNMMzU5LjE1NS00NTQuNjkzcS01LjYxNi01LjYxNS03LjkyMy0xMS44NDYtMi4zMDgtNi4yMy0yLjMwOC0xMy40NjF0Mi4zMDgtMTMuNDYxcTIuMzA3LTYuMjMxIDcuOTIzLTExLjg0NmwxNzkuNzY5LTE3OS43NjlxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDQxOC4xNTMtNDgwWiIvPjwvc3ZnPg==';
|
|
18
|
+
return (React.createElement(InlineBaseButton, __assign({}, props, { buttonType: "back", leftIcon: React.createElement(Icon, { fileUrl: chevronLeftIcon, size: "md" }), ref: ref })));
|
|
19
|
+
}
|
|
20
|
+
export var BackButton = fixedForwardRef(BackButtonWithForwardRef);
|
package/es/BaseButton.js
CHANGED
|
@@ -1,85 +1,56 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
5
23
|
import React from 'react';
|
|
6
|
-
import {
|
|
24
|
+
import { fixedForwardRef } from './fixedForwardRef';
|
|
7
25
|
import classNames from 'classnames';
|
|
8
|
-
|
|
9
26
|
/**
|
|
10
27
|
* Internal component
|
|
28
|
+
* @ignore
|
|
11
29
|
*/
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
_onClick(event);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}, rest), /*#__PURE__*/React.createElement("span", {
|
|
43
|
-
className: "ffe-button__label"
|
|
44
|
-
}, leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
|
|
45
|
-
className: 'ffe-button__icon ffe-button__icon--left',
|
|
46
|
-
size: 'md'
|
|
47
|
-
}), children, rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
|
|
48
|
-
className: 'ffe-button__icon ffe-button__icon--right',
|
|
49
|
-
size: 'md'
|
|
50
|
-
})), supportsSpinner && isLoading && /*#__PURE__*/React.createElement("span", {
|
|
51
|
-
"aria-label": ariaLoadingMessage,
|
|
52
|
-
role: "img",
|
|
53
|
-
className: "ffe-button__spinner"
|
|
54
|
-
}));
|
|
55
|
-
};
|
|
56
|
-
BaseButton.propTypes = {
|
|
57
|
-
/** Aria label for loading indicator */
|
|
58
|
-
ariaLoadingMessage: string,
|
|
59
|
-
/**
|
|
60
|
-
* Enum of supported prop types. Used internally only.
|
|
61
|
-
* @ignore
|
|
62
|
-
*/
|
|
63
|
-
buttonType: oneOf(['action', 'primary', 'secondary', 'shortcut', 'task']),
|
|
64
|
-
/** The button label */
|
|
65
|
-
children: node,
|
|
66
|
-
/** Extra class names */
|
|
67
|
-
className: string,
|
|
68
|
-
/** Disable a button in certain situations */
|
|
69
|
-
disabled: bool,
|
|
70
|
-
/** The rendered element, like an `<a />` or `<Link />` */
|
|
71
|
-
element: oneOfType([func, string, elementType]),
|
|
72
|
-
/** Ref-setting function, or ref created by useRef, passed to the button element */
|
|
73
|
-
innerRef: oneOfType([func, shape({
|
|
74
|
-
current: object
|
|
75
|
-
})]),
|
|
76
|
-
/** Shows a loader if true */
|
|
77
|
-
isLoading: bool,
|
|
78
|
-
/** Icon shown to the left of the label */
|
|
79
|
-
leftIcon: node,
|
|
80
|
-
/** Icon shown to the right of the label */
|
|
81
|
-
rightIcon: node,
|
|
82
|
-
/** Called when button is clicked if not loading or disabled */
|
|
83
|
-
onClick: func
|
|
84
|
-
};
|
|
85
|
-
export default BaseButton;
|
|
30
|
+
function BaseButtonWithForwardRef(props, ref) {
|
|
31
|
+
var _a = props.as, Comp = _a === void 0 ? 'button' : _a, buttonType = props.buttonType, isLoading = props.isLoading, isDisabled = props.isDisabled, className = props.className, onClick = props.onClick, leftIcon = props.leftIcon, rightIcon = props.rightIcon, ariaLoadingMessage = props.ariaLoadingMessage, children = props.children, rest = __rest(props, ["as", "buttonType", "isLoading", "isDisabled", "className", "onClick", "leftIcon", "rightIcon", "ariaLoadingMessage", "children"]);
|
|
32
|
+
var supportsSpinner = ['action', 'primary', 'secondary'].includes(buttonType);
|
|
33
|
+
return (React.createElement(Comp, __assign({ "aria-busy": isLoading && supportsSpinner, "aria-disabled": isDisabled || (isLoading && supportsSpinner), className: classNames('ffe-button', "ffe-button--".concat(buttonType), { 'ffe-button--loading': isLoading && supportsSpinner }, className), onClick: function (event) {
|
|
34
|
+
if (isLoading && supportsSpinner) {
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
event.stopPropagation();
|
|
37
|
+
}
|
|
38
|
+
else if (onClick) {
|
|
39
|
+
onClick(event);
|
|
40
|
+
}
|
|
41
|
+
} }, rest, { ref: ref }),
|
|
42
|
+
React.createElement("span", { className: "ffe-button__label" },
|
|
43
|
+
leftIcon &&
|
|
44
|
+
React.cloneElement(leftIcon, {
|
|
45
|
+
className: 'ffe-button__icon ffe-button__icon--left',
|
|
46
|
+
size: 'md',
|
|
47
|
+
}),
|
|
48
|
+
children,
|
|
49
|
+
rightIcon &&
|
|
50
|
+
React.cloneElement(rightIcon, {
|
|
51
|
+
className: 'ffe-button__icon ffe-button__icon--right',
|
|
52
|
+
size: 'md',
|
|
53
|
+
})),
|
|
54
|
+
supportsSpinner && isLoading && (React.createElement("span", { "aria-label": ariaLoadingMessage, role: "img", className: "ffe-button__spinner" }))));
|
|
55
|
+
}
|
|
56
|
+
export var BaseButton = fixedForwardRef(BaseButtonWithForwardRef);
|
package/es/ButtonGroup.js
CHANGED
|
@@ -1,29 +1,28 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
5
23
|
import React from 'react';
|
|
6
|
-
import { bool, string } from 'prop-types';
|
|
7
24
|
import classNames from 'classnames';
|
|
8
|
-
var ButtonGroup = function
|
|
9
|
-
|
|
10
|
-
thin
|
|
11
|
-
inline = _ref.inline,
|
|
12
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
13
|
-
return /*#__PURE__*/React.createElement("div", _extends({
|
|
14
|
-
className: classNames('ffe-button-group', {
|
|
15
|
-
'ffe-button-group--thin': thin
|
|
16
|
-
}, {
|
|
17
|
-
'ffe-button-group--inline': inline
|
|
18
|
-
}, className)
|
|
19
|
-
}, rest));
|
|
20
|
-
};
|
|
21
|
-
ButtonGroup.propTypes = {
|
|
22
|
-
/** Extra class name applied in addition to the FFE classes */
|
|
23
|
-
className: string,
|
|
24
|
-
/** Applies the thin modifier to remove margins */
|
|
25
|
-
thin: bool,
|
|
26
|
-
/** Applies the inline modifier to make all child buttons inline */
|
|
27
|
-
inline: bool
|
|
25
|
+
export var ButtonGroup = function (_a) {
|
|
26
|
+
var className = _a.className, thin = _a.thin, inline = _a.inline, rest = __rest(_a, ["className", "thin", "inline"]);
|
|
27
|
+
return (React.createElement("div", __assign({ "data-testid": "button-group", className: classNames('ffe-button-group', { 'ffe-button-group--thin': thin }, { 'ffe-button-group--inline': inline }, className) }, rest)));
|
|
28
28
|
};
|
|
29
|
-
export default ButtonGroup;
|
package/es/ExpandButton.js
CHANGED
|
@@ -1,51 +1,34 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
5
23
|
import React from 'react';
|
|
6
|
-
import { bool, func, oneOfType, string, node, object, shape, elementType } from 'prop-types';
|
|
7
24
|
import classNames from 'classnames';
|
|
8
25
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
className = props.className,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
rest = _objectWithoutProperties(props, _excluded);
|
|
19
|
-
var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
|
|
20
|
-
return /*#__PURE__*/React.createElement(Element, _extends({
|
|
21
|
-
"aria-expanded": isExpanded,
|
|
22
|
-
"aria-label": isExpanded ? closeLabel : undefined,
|
|
23
|
-
className: classNames('ffe-button', 'ffe-button--expand', {
|
|
24
|
-
'ffe-button--expanded': isExpanded
|
|
25
|
-
}, className),
|
|
26
|
-
ref: innerRef
|
|
27
|
-
}, rest), isExpanded && /*#__PURE__*/React.createElement(Icon, {
|
|
28
|
-
className: "ffe-button__icon",
|
|
29
|
-
fileUrl: closeIcon,
|
|
30
|
-
size: "md"
|
|
31
|
-
}), !isExpanded && /*#__PURE__*/React.createElement("span", null, children));
|
|
32
|
-
};
|
|
33
|
-
ExpandButton.propTypes = {
|
|
34
|
-
/** The button label */
|
|
35
|
-
children: node.isRequired,
|
|
36
|
-
/** Extra class names */
|
|
37
|
-
className: string,
|
|
38
|
-
/** The rendered element, like an `<a />` or `<Link />` */
|
|
39
|
-
element: oneOfType([func, string, elementType]),
|
|
40
|
-
/** An accessible label for the close-button, only shown in the "isExpanded" state */
|
|
41
|
-
closeLabel: string,
|
|
42
|
-
/** Ref-setting function, or ref created by useRef, passed to the button element */
|
|
43
|
-
innerRef: oneOfType([func, shape({
|
|
44
|
-
current: object
|
|
45
|
-
})]),
|
|
46
|
-
/** When true the component will render a circle with an X indicating whatever is controlled is in an expanded state. */
|
|
47
|
-
isExpanded: bool.isRequired,
|
|
48
|
-
/** Use to listen for clicks and toggle the `isExpanded` property together with whatever it is you're expanding. */
|
|
49
|
-
onClick: func.isRequired
|
|
50
|
-
};
|
|
51
|
-
export default ExpandButton;
|
|
26
|
+
import { fixedForwardRef } from './fixedForwardRef';
|
|
27
|
+
function ExpandButtonWithForwardRef(props, ref) {
|
|
28
|
+
var children = props.children, className = props.className, _a = props.closeLabel, closeLabel = _a === void 0 ? 'Lukk' : _a, _b = props.as, Comp = _b === void 0 ? 'button' : _b, isExpanded = props.isExpanded, rest = __rest(props, ["children", "className", "closeLabel", "as", "isExpanded"]);
|
|
29
|
+
var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
|
|
30
|
+
return (React.createElement(Comp, __assign({ "aria-expanded": isExpanded, "aria-label": isExpanded ? closeLabel : undefined, className: classNames('ffe-button', 'ffe-button--expand', { 'ffe-button--expanded': isExpanded }, className) }, rest, { ref: ref }),
|
|
31
|
+
isExpanded && (React.createElement(Icon, { className: "ffe-button__icon", fileUrl: closeIcon, size: "md" })),
|
|
32
|
+
!isExpanded && React.createElement("span", null, children)));
|
|
33
|
+
}
|
|
34
|
+
export var ExpandButton = fixedForwardRef(ExpandButtonWithForwardRef);
|
package/es/InlineBaseButton.js
CHANGED
|
@@ -1,57 +1,45 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
5
23
|
import React from 'react';
|
|
6
|
-
import {
|
|
24
|
+
import { fixedForwardRef } from './fixedForwardRef';
|
|
7
25
|
import classNames from 'classnames';
|
|
8
|
-
|
|
9
26
|
/**
|
|
10
27
|
* Internal component
|
|
11
28
|
* @ignore
|
|
12
29
|
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
30
|
-
className: "ffe-inline-button__label"
|
|
31
|
-
}, children), rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
|
|
32
|
-
className: 'ffe-inline-button__icon ffe-inline-button__icon--right',
|
|
33
|
-
size: 'md'
|
|
34
|
-
}));
|
|
35
|
-
};
|
|
36
|
-
InlineBaseButton.propTypes = {
|
|
37
|
-
/**
|
|
38
|
-
* Enum of supported prop types. Used internally only.
|
|
39
|
-
* @ignore
|
|
40
|
-
*/
|
|
41
|
-
buttonType: oneOf(['tertiary', 'back', 'expand']),
|
|
42
|
-
/** The button label */
|
|
43
|
-
children: node.isRequired,
|
|
44
|
-
/** Extra class names */
|
|
45
|
-
className: string,
|
|
46
|
-
/** The rendered element, like an `<a />` or `<Link />` */
|
|
47
|
-
element: oneOfType([string, func, elementType]),
|
|
48
|
-
/** Ref-setting function, or ref created by useRef, passed to the button element */
|
|
49
|
-
innerRef: oneOfType([func, shape({
|
|
50
|
-
current: object
|
|
51
|
-
})]),
|
|
52
|
-
/** Icon shown to the left of the label */
|
|
53
|
-
leftIcon: node,
|
|
54
|
-
/** Icon shown to the right of the label */
|
|
55
|
-
rightIcon: node
|
|
56
|
-
};
|
|
57
|
-
export default InlineBaseButton;
|
|
30
|
+
function InlineBaseButtonWithForwardRef(props, ref) {
|
|
31
|
+
var _a = props.as, Comp = _a === void 0 ? 'button' : _a, buttonType = props.buttonType, className = props.className, leftIcon = props.leftIcon, rightIcon = props.rightIcon, children = props.children, rest = __rest(props, ["as", "buttonType", "className", "leftIcon", "rightIcon", "children"]);
|
|
32
|
+
return (React.createElement(Comp, __assign({ className: classNames('ffe-inline-button', "ffe-inline-button--".concat(buttonType), className) }, rest, { ref: ref }),
|
|
33
|
+
leftIcon &&
|
|
34
|
+
React.cloneElement(leftIcon, {
|
|
35
|
+
className: 'ffe-inline-button__icon ffe-inline-button__icon--left',
|
|
36
|
+
size: 'md',
|
|
37
|
+
}),
|
|
38
|
+
React.createElement("span", { className: "ffe-inline-button__label" }, children),
|
|
39
|
+
rightIcon &&
|
|
40
|
+
React.cloneElement(rightIcon, {
|
|
41
|
+
className: 'ffe-inline-button__icon ffe-inline-button__icon--right',
|
|
42
|
+
size: 'md',
|
|
43
|
+
})));
|
|
44
|
+
}
|
|
45
|
+
export var InlineBaseButton = fixedForwardRef(InlineBaseButtonWithForwardRef);
|
package/es/InlineExpandButton.js
CHANGED
|
@@ -1,41 +1,36 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
5
23
|
import React from 'react';
|
|
6
|
-
import { bool, func, node, oneOfType, object, shape, string } from 'prop-types';
|
|
7
24
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
25
|
+
import { InlineBaseButton } from './InlineBaseButton';
|
|
26
|
+
import { fixedForwardRef } from './fixedForwardRef';
|
|
8
27
|
import classNames from 'classnames';
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
className =
|
|
13
|
-
rest
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
className: classNames(className, {
|
|
19
|
-
'ffe-inline-button--expanded': isExpanded
|
|
20
|
-
}),
|
|
21
|
-
rightIcon: /*#__PURE__*/React.createElement(Icon, {
|
|
22
|
-
size: "md",
|
|
23
|
-
fileUrl: expandMoreIcon
|
|
24
|
-
})
|
|
25
|
-
}, rest));
|
|
26
|
-
};
|
|
27
|
-
InlineExpandButton.propTypes = {
|
|
28
|
-
/** Text that should reflect the isExpanded state. */
|
|
29
|
-
children: node,
|
|
30
|
-
/** Ref-setting function, or ref created by useRef, passed to the button element */
|
|
31
|
-
innerRef: oneOfType([func, shape({
|
|
32
|
-
current: object
|
|
33
|
-
})]),
|
|
34
|
-
/** When true it will indicate the button is in its open state */
|
|
35
|
-
isExpanded: bool.isRequired,
|
|
36
|
-
/** Listen for clicks to toggle the isExpanded state. */
|
|
37
|
-
onClick: func.isRequired,
|
|
38
|
-
/** Extra class names */
|
|
39
|
-
className: string
|
|
40
|
-
};
|
|
41
|
-
export default InlineExpandButton;
|
|
28
|
+
function InlineExpandButtonWithForwardRef(props, ref) {
|
|
29
|
+
var expandMoreIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+';
|
|
30
|
+
var propWithRef = __assign(__assign({}, props), { ref: ref });
|
|
31
|
+
var isExpanded = propWithRef.isExpanded, className = propWithRef.className, rest = __rest(propWithRef, ["isExpanded", "className"]);
|
|
32
|
+
return (React.createElement(InlineBaseButton, __assign({ rightIcon: React.createElement(Icon, { size: "md", fileUrl: expandMoreIcon }), buttonType: "expand", type: "button" }, rest, { className: classNames(className, {
|
|
33
|
+
'ffe-inline-button--expanded': isExpanded,
|
|
34
|
+
}), ref: propWithRef.ref })));
|
|
35
|
+
}
|
|
36
|
+
export var InlineExpandButton = fixedForwardRef(InlineExpandButtonWithForwardRef);
|
package/es/PrimaryButton.js
CHANGED
|
@@ -1,40 +1,18 @@
|
|
|
1
|
-
var
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
rest = _objectWithoutProperties(props, _excluded);
|
|
12
|
-
return /*#__PURE__*/React.createElement(Button, _extends({
|
|
13
|
-
buttonType: "primary",
|
|
14
|
-
leftIcon: leftIcon,
|
|
15
|
-
rightIcon: rightIcon
|
|
16
|
-
}, rest));
|
|
17
|
-
};
|
|
18
|
-
PrimaryButton.propTypes = {
|
|
19
|
-
/** Aria label for loading indicator */
|
|
20
|
-
ariaLoadingMessage: string,
|
|
21
|
-
/** The button label */
|
|
22
|
-
children: node,
|
|
23
|
-
/** Extra class names */
|
|
24
|
-
className: string,
|
|
25
|
-
/** Disable a button in certain situations */
|
|
26
|
-
disabled: bool,
|
|
27
|
-
/** The rendered element, like an `<a />` or `<Link />` */
|
|
28
|
-
element: oneOfType([func, string, elementType]),
|
|
29
|
-
/** Ref-setting function, or ref created by useRef, passed to the button element */
|
|
30
|
-
innerRef: oneOfType([func, shape({
|
|
31
|
-
current: object
|
|
32
|
-
})]),
|
|
33
|
-
/** Shows a loader if true */
|
|
34
|
-
isLoading: bool,
|
|
35
|
-
/** Icon shown to the left of the label */
|
|
36
|
-
leftIcon: node,
|
|
37
|
-
/** Icon shown to the right of the label */
|
|
38
|
-
rightIcon: node
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
39
11
|
};
|
|
40
|
-
|
|
12
|
+
import React from 'react';
|
|
13
|
+
import { BaseButton } from './BaseButton';
|
|
14
|
+
import { fixedForwardRef } from './fixedForwardRef';
|
|
15
|
+
function PrimaryButtonWithForwardRef(props, ref) {
|
|
16
|
+
return React.createElement(BaseButton, __assign({}, props, { ref: ref, buttonType: "primary" }));
|
|
17
|
+
}
|
|
18
|
+
export var PrimaryButton = fixedForwardRef(PrimaryButtonWithForwardRef);
|