@sb1/ffe-buttons-react 14.0.5 → 14.0.9
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/BaseButton.js +16 -5
- package/lib/BaseButton.js +16 -5
- package/lib/ExpandButton.js +1 -1
- package/package.json +8 -10
- package/es/ActionButton.spec.js +0 -31
- package/es/BackButton.spec.js +0 -25
- package/es/BaseButton.spec.js +0 -91
- package/es/ButtonGroup.spec.js +0 -43
- package/es/ExpandButton.spec.js +0 -87
- package/es/InlineBaseButton.spec.js +0 -59
- package/es/InlineExpandButton.spec.js +0 -50
- package/es/PrimaryButton.spec.js +0 -25
- package/es/SecondaryButton.spec.js +0 -25
- package/es/ShortcutButton.spec.js +0 -30
- package/es/TaskButton.spec.js +0 -33
- package/es/TertiaryButton.spec.js +0 -25
- package/lib/ActionButton.spec.js +0 -38
- package/lib/BackButton.spec.js +0 -32
- package/lib/BaseButton.spec.js +0 -98
- package/lib/ButtonGroup.spec.js +0 -50
- package/lib/ExpandButton.spec.js +0 -97
- package/lib/InlineBaseButton.spec.js +0 -66
- package/lib/InlineExpandButton.spec.js +0 -58
- package/lib/PrimaryButton.spec.js +0 -32
- package/lib/SecondaryButton.spec.js +0 -32
- package/lib/ShortcutButton.spec.js +0 -38
- package/lib/TaskButton.spec.js +0 -41
- package/lib/TertiaryButton.spec.js +0 -32
package/es/BaseButton.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "
|
|
1
|
+
var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "element", "innerRef", "isLoading", "leftIcon", "rightIcon", "onClick"];
|
|
2
2
|
|
|
3
3
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
4
|
|
|
@@ -19,24 +19,32 @@ var BaseButton = function BaseButton(props) {
|
|
|
19
19
|
children = props.children,
|
|
20
20
|
className = props.className,
|
|
21
21
|
condensed = props.condensed,
|
|
22
|
-
disabled = props.disabled,
|
|
23
22
|
Element = props.element,
|
|
24
23
|
innerRef = props.innerRef,
|
|
25
24
|
isLoading = props.isLoading,
|
|
26
25
|
leftIcon = props.leftIcon,
|
|
27
26
|
rightIcon = props.rightIcon,
|
|
27
|
+
_onClick = props.onClick,
|
|
28
28
|
rest = _objectWithoutProperties(props, _excluded);
|
|
29
29
|
|
|
30
30
|
var supportsSpinner = ['action', 'primary', 'secondary'].includes(buttonType);
|
|
31
31
|
return /*#__PURE__*/React.createElement(Element, _extends({
|
|
32
32
|
"aria-busy": isLoading && supportsSpinner,
|
|
33
|
-
"aria-disabled": disabled || isLoading && supportsSpinner,
|
|
33
|
+
"aria-disabled": rest.disabled || isLoading && supportsSpinner,
|
|
34
34
|
className: classNames('ffe-button', "ffe-button--".concat(buttonType), {
|
|
35
35
|
'ffe-button--condensed': condensed
|
|
36
36
|
}, {
|
|
37
37
|
'ffe-button--loading': isLoading && supportsSpinner
|
|
38
38
|
}, className),
|
|
39
|
-
ref: innerRef
|
|
39
|
+
ref: innerRef,
|
|
40
|
+
onClick: function onClick(event) {
|
|
41
|
+
if (isLoading && supportsSpinner) {
|
|
42
|
+
event.preventDefault();
|
|
43
|
+
event.stopPropagation();
|
|
44
|
+
} else if (_onClick) {
|
|
45
|
+
_onClick(event);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
40
48
|
}, rest), /*#__PURE__*/React.createElement("span", {
|
|
41
49
|
className: "ffe-button__label"
|
|
42
50
|
}, leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
|
|
@@ -87,7 +95,10 @@ BaseButton.propTypes = {
|
|
|
87
95
|
leftIcon: node,
|
|
88
96
|
|
|
89
97
|
/** Icon shown to the right of the label */
|
|
90
|
-
rightIcon: node
|
|
98
|
+
rightIcon: node,
|
|
99
|
+
|
|
100
|
+
/** Called when button is clicked if not loading or disabled */
|
|
101
|
+
onClick: func
|
|
91
102
|
};
|
|
92
103
|
BaseButton.defaultProps = {
|
|
93
104
|
ariaLoadingMessage: 'Vennligst vent',
|
package/lib/BaseButton.js
CHANGED
|
@@ -11,7 +11,7 @@ var _propTypes = require("prop-types");
|
|
|
11
11
|
|
|
12
12
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
13
|
|
|
14
|
-
var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "
|
|
14
|
+
var _excluded = ["ariaLoadingMessage", "buttonType", "children", "className", "condensed", "element", "innerRef", "isLoading", "leftIcon", "rightIcon", "onClick"];
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
@@ -30,24 +30,32 @@ var BaseButton = function BaseButton(props) {
|
|
|
30
30
|
children = props.children,
|
|
31
31
|
className = props.className,
|
|
32
32
|
condensed = props.condensed,
|
|
33
|
-
disabled = props.disabled,
|
|
34
33
|
Element = props.element,
|
|
35
34
|
innerRef = props.innerRef,
|
|
36
35
|
isLoading = props.isLoading,
|
|
37
36
|
leftIcon = props.leftIcon,
|
|
38
37
|
rightIcon = props.rightIcon,
|
|
38
|
+
_onClick = props.onClick,
|
|
39
39
|
rest = _objectWithoutProperties(props, _excluded);
|
|
40
40
|
|
|
41
41
|
var supportsSpinner = ['action', 'primary', 'secondary'].includes(buttonType);
|
|
42
42
|
return /*#__PURE__*/_react.default.createElement(Element, _extends({
|
|
43
43
|
"aria-busy": isLoading && supportsSpinner,
|
|
44
|
-
"aria-disabled": disabled || isLoading && supportsSpinner,
|
|
44
|
+
"aria-disabled": rest.disabled || isLoading && supportsSpinner,
|
|
45
45
|
className: (0, _classnames.default)('ffe-button', "ffe-button--".concat(buttonType), {
|
|
46
46
|
'ffe-button--condensed': condensed
|
|
47
47
|
}, {
|
|
48
48
|
'ffe-button--loading': isLoading && supportsSpinner
|
|
49
49
|
}, className),
|
|
50
|
-
ref: innerRef
|
|
50
|
+
ref: innerRef,
|
|
51
|
+
onClick: function onClick(event) {
|
|
52
|
+
if (isLoading && supportsSpinner) {
|
|
53
|
+
event.preventDefault();
|
|
54
|
+
event.stopPropagation();
|
|
55
|
+
} else if (_onClick) {
|
|
56
|
+
_onClick(event);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
51
59
|
}, rest), /*#__PURE__*/_react.default.createElement("span", {
|
|
52
60
|
className: "ffe-button__label"
|
|
53
61
|
}, leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
|
|
@@ -98,7 +106,10 @@ BaseButton.propTypes = {
|
|
|
98
106
|
leftIcon: _propTypes.node,
|
|
99
107
|
|
|
100
108
|
/** Icon shown to the right of the label */
|
|
101
|
-
rightIcon: _propTypes.node
|
|
109
|
+
rightIcon: _propTypes.node,
|
|
110
|
+
|
|
111
|
+
/** Called when button is clicked if not loading or disabled */
|
|
112
|
+
onClick: _propTypes.func
|
|
102
113
|
};
|
|
103
114
|
BaseButton.defaultProps = {
|
|
104
115
|
ariaLoadingMessage: 'Vennligst vent',
|
package/lib/ExpandButton.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-buttons-react",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.9",
|
|
4
4
|
"description": "React implementation of ffe-buttons",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ffe"
|
|
@@ -21,11 +21,8 @@
|
|
|
21
21
|
"url": "ssh://git@github.com:SpareBank1/designsystem.git"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
|
-
"build": "
|
|
25
|
-
"
|
|
26
|
-
"build:es": "babel -d es/. --root-mode=upward --env-name=es --ignore=*.spec.js src/.",
|
|
27
|
-
"build:types": "copyfiles -f src/index.d.ts types/",
|
|
28
|
-
"lint": "eslint src/.",
|
|
24
|
+
"build": "ffe-buildtool babel",
|
|
25
|
+
"lint": "eslint src",
|
|
29
26
|
"test": "jest",
|
|
30
27
|
"test:watch": "jest --watch"
|
|
31
28
|
},
|
|
@@ -33,11 +30,12 @@
|
|
|
33
30
|
"setupTestFrameworkScriptFile": "../../test-setup.js"
|
|
34
31
|
},
|
|
35
32
|
"dependencies": {
|
|
36
|
-
"@sb1/ffe-icons-react": "^7.2.
|
|
37
|
-
"classnames": "^2.
|
|
38
|
-
"prop-types": "^15.7.
|
|
33
|
+
"@sb1/ffe-icons-react": "^7.2.21",
|
|
34
|
+
"classnames": "^2.3.1",
|
|
35
|
+
"prop-types": "^15.7.2"
|
|
39
36
|
},
|
|
40
37
|
"devDependencies": {
|
|
38
|
+
"@sb1/ffe-buildtool": "^0.2.0",
|
|
41
39
|
"enzyme": "^3.7.0",
|
|
42
40
|
"enzyme-adapter-react-16": "^1.7.0",
|
|
43
41
|
"eslint": "^5.9.0",
|
|
@@ -53,5 +51,5 @@
|
|
|
53
51
|
"publishConfig": {
|
|
54
52
|
"access": "public"
|
|
55
53
|
},
|
|
56
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "5da885a3bba8e6990f1f06796983ca0f1add9d9a"
|
|
57
55
|
}
|
package/es/ActionButton.spec.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import ActionButton from './ActionButton';
|
|
6
|
-
var defaultProps = {
|
|
7
|
-
children: 'Click me'
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var getWrapper = function getWrapper(props) {
|
|
11
|
-
return shallow( /*#__PURE__*/React.createElement(ActionButton, _extends({}, defaultProps, props)));
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
describe('<ActionButton />', function () {
|
|
15
|
-
it('renders without exploding', function () {
|
|
16
|
-
var wrapper = getWrapper();
|
|
17
|
-
expect(wrapper.props()).toHaveProperty('buttonType', 'action');
|
|
18
|
-
});
|
|
19
|
-
it('passes on any prop', function () {
|
|
20
|
-
var wrapper = getWrapper({
|
|
21
|
-
'aria-label': 'some label'
|
|
22
|
-
});
|
|
23
|
-
expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
|
|
24
|
-
});
|
|
25
|
-
it('sets correct class when ghost prop is true', function () {
|
|
26
|
-
var wrapper = getWrapper({
|
|
27
|
-
ghost: true
|
|
28
|
-
});
|
|
29
|
-
expect(wrapper.hasClass('ffe-button--ghost')).toBe(true);
|
|
30
|
-
});
|
|
31
|
-
});
|
package/es/BackButton.spec.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import BackButton from './BackButton';
|
|
6
|
-
var defaultProps = {
|
|
7
|
-
children: 'Click me'
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var getWrapper = function getWrapper(props) {
|
|
11
|
-
return shallow( /*#__PURE__*/React.createElement(BackButton, _extends({}, defaultProps, props)));
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
describe('<BackButton />', function () {
|
|
15
|
-
it('renders without exploding', function () {
|
|
16
|
-
var wrapper = getWrapper();
|
|
17
|
-
expect(wrapper.props()).toHaveProperty('buttonType', 'back');
|
|
18
|
-
});
|
|
19
|
-
it('passes on any prop', function () {
|
|
20
|
-
var wrapper = getWrapper({
|
|
21
|
-
'aria-label': 'some label'
|
|
22
|
-
});
|
|
23
|
-
expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
|
|
24
|
-
});
|
|
25
|
-
});
|
package/es/BaseButton.spec.js
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import BaseButton from './BaseButton';
|
|
6
|
-
var defaultProps = {
|
|
7
|
-
children: 'Click me'
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var getWrapper = function getWrapper(props) {
|
|
11
|
-
return shallow( /*#__PURE__*/React.createElement(BaseButton, _extends({}, defaultProps, props)));
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
describe('<BaseButton />', function () {
|
|
15
|
-
it('renders without exploding', function () {
|
|
16
|
-
var wrapper = getWrapper();
|
|
17
|
-
expect(wrapper.exists()).toBe(true);
|
|
18
|
-
});
|
|
19
|
-
it('renders the correct classes', function () {
|
|
20
|
-
var wrapper = getWrapper();
|
|
21
|
-
expect(wrapper.hasClass('ffe-button')).toBe(true);
|
|
22
|
-
wrapper.setProps({
|
|
23
|
-
className: 'custom-class',
|
|
24
|
-
buttonType: 'action'
|
|
25
|
-
});
|
|
26
|
-
expect(wrapper.hasClass('ffe-button--action')).toBe(true);
|
|
27
|
-
expect(wrapper.hasClass('custom-class')).toBe(true);
|
|
28
|
-
});
|
|
29
|
-
it('renders the correct label', function () {
|
|
30
|
-
var wrapper = getWrapper();
|
|
31
|
-
expect(wrapper.text()).toBe('Click me');
|
|
32
|
-
wrapper.setProps({
|
|
33
|
-
children: 'Press me'
|
|
34
|
-
});
|
|
35
|
-
expect(wrapper.text()).toBe('Press me');
|
|
36
|
-
});
|
|
37
|
-
it('renders left icon if set', function () {
|
|
38
|
-
var wrapper = getWrapper();
|
|
39
|
-
expect(wrapper.find('.ffe-button__icon--left').exists()).toBe(false);
|
|
40
|
-
wrapper.setProps({
|
|
41
|
-
leftIcon: /*#__PURE__*/React.createElement("svg", null)
|
|
42
|
-
});
|
|
43
|
-
expect(wrapper.find('.ffe-button__icon--left').exists()).toBe(true);
|
|
44
|
-
});
|
|
45
|
-
it('renders right icon if set', function () {
|
|
46
|
-
var wrapper = getWrapper();
|
|
47
|
-
expect(wrapper.find('.ffe-button__icon--right').exists()).toBe(false);
|
|
48
|
-
wrapper.setProps({
|
|
49
|
-
rightIcon: /*#__PURE__*/React.createElement("svg", null)
|
|
50
|
-
});
|
|
51
|
-
expect(wrapper.find('.ffe-button__icon--right').exists()).toBe(true);
|
|
52
|
-
});
|
|
53
|
-
it('renders the specified dom node', function () {
|
|
54
|
-
var wrapper = getWrapper({
|
|
55
|
-
element: 'a'
|
|
56
|
-
});
|
|
57
|
-
expect(wrapper.is('a')).toBe(true);
|
|
58
|
-
});
|
|
59
|
-
describe('when loading', function () {
|
|
60
|
-
it('sets the correct class', function () {
|
|
61
|
-
var wrapper = getWrapper({
|
|
62
|
-
buttonType: 'primary',
|
|
63
|
-
isLoading: true
|
|
64
|
-
});
|
|
65
|
-
expect(wrapper.hasClass('ffe-button--loading')).toBe(true);
|
|
66
|
-
});
|
|
67
|
-
it('sets the correct aria tags', function () {
|
|
68
|
-
var wrapper = getWrapper({
|
|
69
|
-
buttonType: 'primary',
|
|
70
|
-
isLoading: true
|
|
71
|
-
});
|
|
72
|
-
expect(wrapper.prop('aria-busy')).toBe(true);
|
|
73
|
-
});
|
|
74
|
-
it('disables the button', function () {
|
|
75
|
-
var wrapper = getWrapper({
|
|
76
|
-
buttonType: 'primary',
|
|
77
|
-
isLoading: true
|
|
78
|
-
});
|
|
79
|
-
expect(wrapper.prop('aria-disabled')).toBe(true);
|
|
80
|
-
});
|
|
81
|
-
it('does nothing for unsupported button type', function () {
|
|
82
|
-
var wrapper = getWrapper({
|
|
83
|
-
buttonType: 'shortcut',
|
|
84
|
-
isLoading: true
|
|
85
|
-
});
|
|
86
|
-
expect(wrapper.hasClass('ffe-button--loading')).toBe(false);
|
|
87
|
-
expect(wrapper.prop('aria-busy')).toBe(false);
|
|
88
|
-
expect(wrapper.prop('aria-disabled')).toBe(false);
|
|
89
|
-
});
|
|
90
|
-
});
|
|
91
|
-
});
|
package/es/ButtonGroup.spec.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import ButtonGroup from './ButtonGroup';
|
|
6
|
-
var defaultProps = {
|
|
7
|
-
thin: false
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var getWrapper = function getWrapper(props) {
|
|
11
|
-
return shallow( /*#__PURE__*/React.createElement(ButtonGroup, _extends({}, defaultProps, props)));
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
describe('<ButtonGroup />', function () {
|
|
15
|
-
it('renders without exploding', function () {
|
|
16
|
-
var wrapper = getWrapper();
|
|
17
|
-
expect(wrapper.exists()).toBe(true);
|
|
18
|
-
});
|
|
19
|
-
it('renders without the the --thin modifier if thin is false', function () {
|
|
20
|
-
var wrapper = getWrapper({
|
|
21
|
-
thin: false
|
|
22
|
-
});
|
|
23
|
-
expect(wrapper.hasClass('ffe-button-group--thin')).toBe(false);
|
|
24
|
-
});
|
|
25
|
-
it('applies the --thin modifier if thin is true', function () {
|
|
26
|
-
var wrapper = getWrapper({
|
|
27
|
-
thin: true
|
|
28
|
-
});
|
|
29
|
-
expect(wrapper.hasClass('ffe-button-group--thin')).toBe(true);
|
|
30
|
-
});
|
|
31
|
-
it('applies the --inline modifier if inline is true', function () {
|
|
32
|
-
var wrapper = getWrapper({
|
|
33
|
-
inline: true
|
|
34
|
-
});
|
|
35
|
-
expect(wrapper.hasClass('ffe-button-group--inline')).toBe(true);
|
|
36
|
-
});
|
|
37
|
-
it('applies the given className prop', function () {
|
|
38
|
-
var wrapper = getWrapper({
|
|
39
|
-
className: 'my-class'
|
|
40
|
-
});
|
|
41
|
-
expect(wrapper.hasClass('my-class')).toBe(true);
|
|
42
|
-
});
|
|
43
|
-
});
|
package/es/ExpandButton.spec.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import BamseIkon from '@sb1/ffe-icons-react/lib/bamse-ikon';
|
|
6
|
-
import BestikkIkon from '@sb1/ffe-icons-react/lib/bestikk-ikon';
|
|
7
|
-
import KryssIkon from '@sb1/ffe-icons-react/lib/kryss-ikon';
|
|
8
|
-
import ExpandButton from './ExpandButton';
|
|
9
|
-
var defaultProps = {
|
|
10
|
-
children: 'Click me',
|
|
11
|
-
isExpanded: false,
|
|
12
|
-
onClick: function onClick(f) {
|
|
13
|
-
return f;
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
var getWrapper = function getWrapper(props) {
|
|
18
|
-
return shallow( /*#__PURE__*/React.createElement(ExpandButton, _extends({}, defaultProps, props)));
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
describe('<ExpandButton />', function () {
|
|
22
|
-
it('renders without exploding', function () {
|
|
23
|
-
var wrapper = getWrapper();
|
|
24
|
-
expect(wrapper.hasClass('ffe-button')).toBe(true);
|
|
25
|
-
expect(wrapper.hasClass('ffe-button--expand')).toBe(true);
|
|
26
|
-
});
|
|
27
|
-
it('passes on any prop', function () {
|
|
28
|
-
var wrapper = getWrapper({
|
|
29
|
-
'aria-label': 'some label'
|
|
30
|
-
});
|
|
31
|
-
expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
|
|
32
|
-
});
|
|
33
|
-
it('renders leftIcon and rightIcon', function () {
|
|
34
|
-
var wrapper = getWrapper({
|
|
35
|
-
leftIcon: /*#__PURE__*/React.createElement(BestikkIkon, null),
|
|
36
|
-
rightIcon: /*#__PURE__*/React.createElement(BamseIkon, null)
|
|
37
|
-
});
|
|
38
|
-
expect(wrapper.find(BestikkIkon).exists()).toBe(true);
|
|
39
|
-
expect(wrapper.find(BamseIkon).exists()).toBe(true);
|
|
40
|
-
});
|
|
41
|
-
it('does not use an aria-label since the button itself has a children acting as label', function () {
|
|
42
|
-
var wrapper = getWrapper();
|
|
43
|
-
expect(wrapper.prop('aria-label')).toBe(undefined);
|
|
44
|
-
});
|
|
45
|
-
describe('when expanded', function () {
|
|
46
|
-
it('does not render children', function () {
|
|
47
|
-
var wrapper = getWrapper({
|
|
48
|
-
isExpanded: true
|
|
49
|
-
});
|
|
50
|
-
expect(wrapper.text()).not.toContain('Click me');
|
|
51
|
-
});
|
|
52
|
-
it('does not render leftIcon and rightIcon', function () {
|
|
53
|
-
var wrapper = getWrapper({
|
|
54
|
-
leftIcon: /*#__PURE__*/React.createElement(BestikkIkon, null),
|
|
55
|
-
isExpanded: true,
|
|
56
|
-
rightIcon: /*#__PURE__*/React.createElement(BamseIkon, null)
|
|
57
|
-
});
|
|
58
|
-
expect(wrapper.find(BestikkIkon).exists()).toBe(false);
|
|
59
|
-
expect(wrapper.find(BamseIkon).exists()).toBe(false);
|
|
60
|
-
});
|
|
61
|
-
it('sets correct class', function () {
|
|
62
|
-
var wrapper = getWrapper({
|
|
63
|
-
isExpanded: true
|
|
64
|
-
});
|
|
65
|
-
expect(wrapper.hasClass('ffe-button--expanded')).toBe(true);
|
|
66
|
-
});
|
|
67
|
-
it('sets aria-expanded prop', function () {
|
|
68
|
-
var wrapper = getWrapper({
|
|
69
|
-
isExpanded: true
|
|
70
|
-
});
|
|
71
|
-
expect(wrapper.props()).toHaveProperty('aria-expanded', true);
|
|
72
|
-
});
|
|
73
|
-
it('renders a KryssIkon', function () {
|
|
74
|
-
var wrapper = getWrapper({
|
|
75
|
-
isExpanded: true
|
|
76
|
-
});
|
|
77
|
-
expect(wrapper.find(KryssIkon).exists()).toBe(true);
|
|
78
|
-
expect(wrapper.find(KryssIkon).hasClass('ffe-button__icon')).toBe(true);
|
|
79
|
-
});
|
|
80
|
-
it('uses the default aria-label property on the button', function () {
|
|
81
|
-
var wrapper = getWrapper({
|
|
82
|
-
isExpanded: true
|
|
83
|
-
});
|
|
84
|
-
expect(wrapper.prop('aria-label')).toBe(ExpandButton.defaultProps.closeLabel);
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
});
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import InlineBaseButton from './InlineBaseButton';
|
|
6
|
-
var defaultProps = {
|
|
7
|
-
children: 'Click me'
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var getWrapper = function getWrapper(props) {
|
|
11
|
-
return shallow( /*#__PURE__*/React.createElement(InlineBaseButton, _extends({}, defaultProps, props)));
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
describe('<InlineBaseButton />', function () {
|
|
15
|
-
it('renders without exploding', function () {
|
|
16
|
-
var wrapper = getWrapper();
|
|
17
|
-
expect(wrapper.exists()).toBe(true);
|
|
18
|
-
});
|
|
19
|
-
it('renders the correct classes', function () {
|
|
20
|
-
var wrapper = getWrapper();
|
|
21
|
-
expect(wrapper.hasClass('ffe-inline-button')).toBe(true);
|
|
22
|
-
wrapper.setProps({
|
|
23
|
-
className: 'custom-class',
|
|
24
|
-
buttonType: 'tertiary'
|
|
25
|
-
});
|
|
26
|
-
expect(wrapper.hasClass('ffe-inline-button--tertiary')).toBe(true);
|
|
27
|
-
expect(wrapper.hasClass('custom-class')).toBe(true);
|
|
28
|
-
});
|
|
29
|
-
it('renders the correct label', function () {
|
|
30
|
-
var wrapper = getWrapper();
|
|
31
|
-
expect(wrapper.text()).toBe('Click me');
|
|
32
|
-
wrapper.setProps({
|
|
33
|
-
children: 'Press me'
|
|
34
|
-
});
|
|
35
|
-
expect(wrapper.text()).toBe('Press me');
|
|
36
|
-
});
|
|
37
|
-
it('renders left icon if set', function () {
|
|
38
|
-
var wrapper = getWrapper();
|
|
39
|
-
expect(wrapper.find('.ffe-inline-button__icon--left').exists()).toBe(false);
|
|
40
|
-
wrapper.setProps({
|
|
41
|
-
leftIcon: /*#__PURE__*/React.createElement("svg", null)
|
|
42
|
-
});
|
|
43
|
-
expect(wrapper.find('.ffe-inline-button__icon--left').exists()).toBe(true);
|
|
44
|
-
});
|
|
45
|
-
it('renders right icon if set', function () {
|
|
46
|
-
var wrapper = getWrapper();
|
|
47
|
-
expect(wrapper.find('.ffe-inline-button__icon--right').exists()).toBe(false);
|
|
48
|
-
wrapper.setProps({
|
|
49
|
-
rightIcon: /*#__PURE__*/React.createElement("svg", null)
|
|
50
|
-
});
|
|
51
|
-
expect(wrapper.find('.ffe-inline-button__icon--right').exists()).toBe(true);
|
|
52
|
-
});
|
|
53
|
-
it('renders the specified dom node', function () {
|
|
54
|
-
var wrapper = getWrapper({
|
|
55
|
-
element: 'a'
|
|
56
|
-
});
|
|
57
|
-
expect(wrapper.is('a')).toBe(true);
|
|
58
|
-
});
|
|
59
|
-
});
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import ChevronIkon from '@sb1/ffe-icons-react/lib/chevron-ikon';
|
|
6
|
-
import InlineExpandButton from './InlineExpandButton';
|
|
7
|
-
var defaultProps = {
|
|
8
|
-
children: 'Click me',
|
|
9
|
-
isExpanded: false,
|
|
10
|
-
onClick: function onClick(f) {
|
|
11
|
-
return f;
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
var getWrapper = function getWrapper(props) {
|
|
16
|
-
return shallow( /*#__PURE__*/React.createElement(InlineExpandButton, _extends({}, defaultProps, props)));
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
describe('<InlineExpandButton />', function () {
|
|
20
|
-
it('renders without exploding', function () {
|
|
21
|
-
var wrapper = getWrapper();
|
|
22
|
-
expect(wrapper.props()).toHaveProperty('buttonType', 'expand');
|
|
23
|
-
});
|
|
24
|
-
it('passes on any prop', function () {
|
|
25
|
-
var wrapper = getWrapper({
|
|
26
|
-
'aria-label': 'some label'
|
|
27
|
-
});
|
|
28
|
-
expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
|
|
29
|
-
});
|
|
30
|
-
it('sends a <ChevronIcon /> as a default rightIcon prop', function () {
|
|
31
|
-
var wrapper = getWrapper();
|
|
32
|
-
expect(wrapper.props()).toHaveProperty('rightIcon', /*#__PURE__*/React.createElement(ChevronIkon, {
|
|
33
|
-
style: {
|
|
34
|
-
marginLeft: '8px',
|
|
35
|
-
transform: 'none'
|
|
36
|
-
}
|
|
37
|
-
}));
|
|
38
|
-
});
|
|
39
|
-
it('sends an upside down <ChevronIcon /> as rightIcon if isExpanded prop is true', function () {
|
|
40
|
-
var wrapper = getWrapper({
|
|
41
|
-
isExpanded: true
|
|
42
|
-
});
|
|
43
|
-
expect(wrapper.props()).toHaveProperty('rightIcon', /*#__PURE__*/React.createElement(ChevronIkon, {
|
|
44
|
-
style: {
|
|
45
|
-
marginLeft: '8px',
|
|
46
|
-
transform: 'rotateZ(180deg)'
|
|
47
|
-
}
|
|
48
|
-
}));
|
|
49
|
-
});
|
|
50
|
-
});
|
package/es/PrimaryButton.spec.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import PrimaryButton from './PrimaryButton';
|
|
6
|
-
var defaultProps = {
|
|
7
|
-
children: 'Click me'
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var getWrapper = function getWrapper(props) {
|
|
11
|
-
return shallow( /*#__PURE__*/React.createElement(PrimaryButton, _extends({}, defaultProps, props)));
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
describe('<PrimaryButton />', function () {
|
|
15
|
-
it('renders without exploding', function () {
|
|
16
|
-
var wrapper = getWrapper();
|
|
17
|
-
expect(wrapper.props()).toHaveProperty('buttonType', 'primary');
|
|
18
|
-
});
|
|
19
|
-
it('passes on any prop', function () {
|
|
20
|
-
var wrapper = getWrapper({
|
|
21
|
-
'aria-label': 'some label'
|
|
22
|
-
});
|
|
23
|
-
expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
|
|
24
|
-
});
|
|
25
|
-
});
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import SecondaryButton from './SecondaryButton';
|
|
6
|
-
var defaultProps = {
|
|
7
|
-
children: 'Click me'
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var getWrapper = function getWrapper(props) {
|
|
11
|
-
return shallow( /*#__PURE__*/React.createElement(SecondaryButton, _extends({}, defaultProps, props)));
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
describe('<SecondaryButton />', function () {
|
|
15
|
-
it('renders without exploding', function () {
|
|
16
|
-
var wrapper = getWrapper();
|
|
17
|
-
expect(wrapper.props()).toHaveProperty('buttonType', 'secondary');
|
|
18
|
-
});
|
|
19
|
-
it('passes on any prop', function () {
|
|
20
|
-
var wrapper = getWrapper({
|
|
21
|
-
'aria-label': 'some label'
|
|
22
|
-
});
|
|
23
|
-
expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
|
|
24
|
-
});
|
|
25
|
-
});
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { shallow } from 'enzyme';
|
|
5
|
-
import ChevronIkon from '@sb1/ffe-icons-react/lib/chevron-ikon';
|
|
6
|
-
import ShortcutButton from './ShortcutButton';
|
|
7
|
-
var defaultProps = {
|
|
8
|
-
children: 'Click me'
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
var getWrapper = function getWrapper(props) {
|
|
12
|
-
return shallow( /*#__PURE__*/React.createElement(ShortcutButton, _extends({}, defaultProps, props)));
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
describe('<ShortcutButton />', function () {
|
|
16
|
-
it('renders without exploding', function () {
|
|
17
|
-
var wrapper = getWrapper();
|
|
18
|
-
expect(wrapper.props()).toHaveProperty('buttonType', 'shortcut');
|
|
19
|
-
});
|
|
20
|
-
it('passes on any prop', function () {
|
|
21
|
-
var wrapper = getWrapper({
|
|
22
|
-
'aria-label': 'some label'
|
|
23
|
-
});
|
|
24
|
-
expect(wrapper.props()).toHaveProperty('aria-label', 'some label');
|
|
25
|
-
});
|
|
26
|
-
it('sends a <ChevronIcon /> as a default rightIcon prop', function () {
|
|
27
|
-
var wrapper = getWrapper();
|
|
28
|
-
expect(wrapper.props()).toHaveProperty('rightIcon', /*#__PURE__*/React.createElement(ChevronIkon, null));
|
|
29
|
-
});
|
|
30
|
-
});
|