@nice-digital/nds-action-banner 1.2.12 → 1.2.15
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/README.md +6 -0
- package/es/ActionBanner.js +12 -6
- package/es/ActionBanner.js.map +1 -1
- package/lib/ActionBanner.js +24 -17
- package/lib/ActionBanner.js.map +1 -1
- package/package.json +4 -3
- package/scss/action-banner.scss +2 -2
package/README.md
CHANGED
|
@@ -88,6 +88,12 @@ The main, call to action button.
|
|
|
88
88
|
|
|
89
89
|
The callback function to be called when this action banner is closed. Leave blank to default to a non-closable banner.
|
|
90
90
|
|
|
91
|
+
###### className
|
|
92
|
+
|
|
93
|
+
- Type: `string`
|
|
94
|
+
|
|
95
|
+
Any additional className will be merged on to the container.
|
|
96
|
+
|
|
91
97
|
### SCSS
|
|
92
98
|
|
|
93
99
|
If you're not using [React](#react), then import the SCSS directly into your application by:
|
package/es/ActionBanner.js
CHANGED
|
@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
4
4
|
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
|
|
5
|
-
var _excluded = ["variant", "onClosing", "title", "children", "cta"];
|
|
5
|
+
var _excluded = ["variant", "onClosing", "title", "children", "cta", "className"];
|
|
6
6
|
import React from "react";
|
|
7
7
|
import PropTypes from "prop-types";
|
|
8
|
+
import classnames from "classnames";
|
|
8
9
|
import RemoveIcon from "@nice-digital/icons/lib/Remove";
|
|
9
10
|
import "../scss/action-banner.scss";
|
|
10
11
|
export var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
@@ -31,6 +32,8 @@ export var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
31
32
|
};
|
|
32
33
|
|
|
33
34
|
_proto.render = function render() {
|
|
35
|
+
var _classes;
|
|
36
|
+
|
|
34
37
|
if (this.state.isClosed) return null;
|
|
35
38
|
|
|
36
39
|
var _this$props = this.props,
|
|
@@ -39,13 +42,15 @@ export var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
39
42
|
title = _this$props.title,
|
|
40
43
|
children = _this$props.children,
|
|
41
44
|
cta = _this$props.cta,
|
|
45
|
+
className = _this$props.className,
|
|
42
46
|
rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
|
|
43
47
|
|
|
44
|
-
var classes =
|
|
45
|
-
|
|
46
|
-
|
|
48
|
+
var classes = (_classes = {
|
|
49
|
+
"action-banner": true,
|
|
50
|
+
"action-banner--closeable": onClosing
|
|
51
|
+
}, _classes["action-banner--" + variant] = variant, _classes[className] = className, _classes);
|
|
47
52
|
return /*#__PURE__*/React.createElement("section", _extends({
|
|
48
|
-
className: classes
|
|
53
|
+
className: classnames(classes)
|
|
49
54
|
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
50
55
|
className: "action-banner__container"
|
|
51
56
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -74,7 +79,8 @@ ActionBanner.propTypes = {
|
|
|
74
79
|
variant: PropTypes.oneOf(["default", "subtle"]),
|
|
75
80
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
|
|
76
81
|
cta: PropTypes.node,
|
|
77
|
-
onClosing: PropTypes.func
|
|
82
|
+
onClosing: PropTypes.func,
|
|
83
|
+
className: PropTypes.string
|
|
78
84
|
};
|
|
79
85
|
ActionBanner.defaultProps = {
|
|
80
86
|
variant: "default"
|
package/es/ActionBanner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ActionBanner.js"],"names":["React","PropTypes","RemoveIcon","ActionBanner","props","state","isClosed","closeClickHandler","bind","setState","onClosing","Error","render","variant","title","children","cta","
|
|
1
|
+
{"version":3,"sources":["../src/ActionBanner.js"],"names":["React","PropTypes","classnames","RemoveIcon","ActionBanner","props","state","isClosed","closeClickHandler","bind","setState","onClosing","Error","render","variant","title","children","cta","className","rest","classes","Component","propTypes","string","isRequired","oneOf","oneOfType","arrayOf","node","func","defaultProps"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\nimport RemoveIcon from \"@nice-digital/icons/lib/Remove\";\n\nimport \"../scss/action-banner.scss\";\n\nexport class ActionBanner extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tisClosed: false\n\t\t};\n\n\t\tthis.closeClickHandler = this.closeClickHandler.bind(this);\n\t}\n\n\tcloseClickHandler() {\n\t\tthis.setState({\n\t\t\tisClosed: true\n\t\t});\n\n\t\tif (typeof this.props.onClosing === \"function\") this.props.onClosing(this);\n\t\telse throw new Error(\"The onClosing prop should be a function\");\n\t}\n\n\trender() {\n\t\tif (this.state.isClosed) return null;\n\n\t\tconst {\n\t\t\tvariant,\n\t\t\tonClosing,\n\t\t\ttitle,\n\t\t\tchildren,\n\t\t\tcta,\n\t\t\tclassName,\n\t\t\t...rest\n\t\t} = this.props;\n\n\t\tconst classes = {\n\t\t\t\"action-banner\": true,\n\t\t\t\"action-banner--closeable\": onClosing,\n\t\t\t[`action-banner--${variant}`]: variant,\n\t\t\t[className]: className\n\t\t};\n\n\t\treturn (\n\t\t\t<section className={classnames(classes)} {...rest}>\n\t\t\t\t<div className=\"action-banner__container\">\n\t\t\t\t\t<div className=\"action-banner__inner\">\n\t\t\t\t\t\t<div className=\"action-banner__text\">\n\t\t\t\t\t\t\t<h2 className=\"action-banner__title\">{title}</h2>\n\t\t\t\t\t\t\t{children && <p className=\"action-banner__intro\">{children}</p>}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{cta && <div className=\"action-banner__actions\">{cta}</div>}\n\t\t\t\t\t\t{onClosing && (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName=\"action-banner__close\"\n\t\t\t\t\t\t\t\tonClick={this.closeClickHandler}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<RemoveIcon />\n\t\t\t\t\t\t\t\t<span className=\"visually-hidden\">Close {title}</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t}\n}\n\nActionBanner.propTypes = {\n\ttitle: PropTypes.string.isRequired,\n\tvariant: PropTypes.oneOf([\"default\", \"subtle\"]),\n\tchildren: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tcta: PropTypes.node,\n\tonClosing: PropTypes.func,\n\tclassName: PropTypes.string\n};\n\nActionBanner.defaultProps = {\n\tvariant: \"default\"\n};\n"],"file":"ActionBanner.js"}
|
package/lib/ActionBanner.js
CHANGED
|
@@ -17,12 +17,14 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
17
17
|
|
|
18
18
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
19
19
|
|
|
20
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
|
+
|
|
20
22
|
var _Remove = _interopRequireDefault(require("@nice-digital/icons/lib/Remove"));
|
|
21
23
|
|
|
22
24
|
require("../scss/action-banner.scss");
|
|
23
25
|
|
|
24
|
-
var _excluded = ["variant", "onClosing", "title", "children", "cta"];
|
|
25
|
-
var _jsxFileName = "
|
|
26
|
+
var _excluded = ["variant", "onClosing", "title", "children", "cta", "className"];
|
|
27
|
+
var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-action-banner\\src\\ActionBanner.js";
|
|
26
28
|
|
|
27
29
|
var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
28
30
|
(0, _inheritsLoose2["default"])(ActionBanner, _React$Component);
|
|
@@ -48,6 +50,8 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
48
50
|
};
|
|
49
51
|
|
|
50
52
|
_proto.render = function render() {
|
|
53
|
+
var _classes;
|
|
54
|
+
|
|
51
55
|
if (this.state.isClosed) return null;
|
|
52
56
|
var _this$props = this.props,
|
|
53
57
|
variant = _this$props.variant,
|
|
@@ -55,17 +59,19 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
55
59
|
title = _this$props.title,
|
|
56
60
|
children = _this$props.children,
|
|
57
61
|
cta = _this$props.cta,
|
|
62
|
+
className = _this$props.className,
|
|
58
63
|
rest = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, _excluded);
|
|
59
|
-
var classes =
|
|
60
|
-
|
|
61
|
-
|
|
64
|
+
var classes = (_classes = {
|
|
65
|
+
"action-banner": true,
|
|
66
|
+
"action-banner--closeable": onClosing
|
|
67
|
+
}, _classes["action-banner--" + variant] = variant, _classes[className] = className, _classes);
|
|
62
68
|
return /*#__PURE__*/_react["default"].createElement("section", (0, _extends2["default"])({
|
|
63
|
-
className:
|
|
69
|
+
className: (0, _classnames["default"])(classes)
|
|
64
70
|
}, rest, {
|
|
65
71
|
__self: this,
|
|
66
72
|
__source: {
|
|
67
73
|
fileName: _jsxFileName,
|
|
68
|
-
lineNumber:
|
|
74
|
+
lineNumber: 49,
|
|
69
75
|
columnNumber: 4
|
|
70
76
|
}
|
|
71
77
|
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -73,7 +79,7 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
73
79
|
__self: this,
|
|
74
80
|
__source: {
|
|
75
81
|
fileName: _jsxFileName,
|
|
76
|
-
lineNumber:
|
|
82
|
+
lineNumber: 50,
|
|
77
83
|
columnNumber: 5
|
|
78
84
|
}
|
|
79
85
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -81,7 +87,7 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
81
87
|
__self: this,
|
|
82
88
|
__source: {
|
|
83
89
|
fileName: _jsxFileName,
|
|
84
|
-
lineNumber:
|
|
90
|
+
lineNumber: 51,
|
|
85
91
|
columnNumber: 6
|
|
86
92
|
}
|
|
87
93
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -89,7 +95,7 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
89
95
|
__self: this,
|
|
90
96
|
__source: {
|
|
91
97
|
fileName: _jsxFileName,
|
|
92
|
-
lineNumber:
|
|
98
|
+
lineNumber: 52,
|
|
93
99
|
columnNumber: 7
|
|
94
100
|
}
|
|
95
101
|
}, /*#__PURE__*/_react["default"].createElement("h2", {
|
|
@@ -97,7 +103,7 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
97
103
|
__self: this,
|
|
98
104
|
__source: {
|
|
99
105
|
fileName: _jsxFileName,
|
|
100
|
-
lineNumber:
|
|
106
|
+
lineNumber: 53,
|
|
101
107
|
columnNumber: 8
|
|
102
108
|
}
|
|
103
109
|
}, title), children && /*#__PURE__*/_react["default"].createElement("p", {
|
|
@@ -105,7 +111,7 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
105
111
|
__self: this,
|
|
106
112
|
__source: {
|
|
107
113
|
fileName: _jsxFileName,
|
|
108
|
-
lineNumber:
|
|
114
|
+
lineNumber: 54,
|
|
109
115
|
columnNumber: 21
|
|
110
116
|
}
|
|
111
117
|
}, children)), cta && /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -113,7 +119,7 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
113
119
|
__self: this,
|
|
114
120
|
__source: {
|
|
115
121
|
fileName: _jsxFileName,
|
|
116
|
-
lineNumber:
|
|
122
|
+
lineNumber: 56,
|
|
117
123
|
columnNumber: 15
|
|
118
124
|
}
|
|
119
125
|
}, cta), onClosing && /*#__PURE__*/_react["default"].createElement("button", {
|
|
@@ -123,14 +129,14 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
123
129
|
__self: this,
|
|
124
130
|
__source: {
|
|
125
131
|
fileName: _jsxFileName,
|
|
126
|
-
lineNumber:
|
|
132
|
+
lineNumber: 58,
|
|
127
133
|
columnNumber: 8
|
|
128
134
|
}
|
|
129
135
|
}, /*#__PURE__*/_react["default"].createElement(_Remove["default"], {
|
|
130
136
|
__self: this,
|
|
131
137
|
__source: {
|
|
132
138
|
fileName: _jsxFileName,
|
|
133
|
-
lineNumber:
|
|
139
|
+
lineNumber: 63,
|
|
134
140
|
columnNumber: 9
|
|
135
141
|
}
|
|
136
142
|
}), /*#__PURE__*/_react["default"].createElement("span", {
|
|
@@ -138,7 +144,7 @@ var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
|
138
144
|
__self: this,
|
|
139
145
|
__source: {
|
|
140
146
|
fileName: _jsxFileName,
|
|
141
|
-
lineNumber:
|
|
147
|
+
lineNumber: 64,
|
|
142
148
|
columnNumber: 9
|
|
143
149
|
}
|
|
144
150
|
}, "Close ", title)))));
|
|
@@ -153,7 +159,8 @@ ActionBanner.propTypes = {
|
|
|
153
159
|
variant: _propTypes["default"].oneOf(["default", "subtle"]),
|
|
154
160
|
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
|
|
155
161
|
cta: _propTypes["default"].node,
|
|
156
|
-
onClosing: _propTypes["default"].func
|
|
162
|
+
onClosing: _propTypes["default"].func,
|
|
163
|
+
className: _propTypes["default"].string
|
|
157
164
|
};
|
|
158
165
|
ActionBanner.defaultProps = {
|
|
159
166
|
variant: "default"
|
package/lib/ActionBanner.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ActionBanner.js"],"names":["ActionBanner","props","state","isClosed","closeClickHandler","bind","setState","onClosing","Error","render","variant","title","children","cta","
|
|
1
|
+
{"version":3,"sources":["../src/ActionBanner.js"],"names":["ActionBanner","props","state","isClosed","closeClickHandler","bind","setState","onClosing","Error","render","variant","title","children","cta","className","rest","classes","React","Component","propTypes","PropTypes","string","isRequired","oneOf","oneOfType","arrayOf","node","func","defaultProps"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\nimport RemoveIcon from \"@nice-digital/icons/lib/Remove\";\n\nimport \"../scss/action-banner.scss\";\n\nexport class ActionBanner extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tisClosed: false\n\t\t};\n\n\t\tthis.closeClickHandler = this.closeClickHandler.bind(this);\n\t}\n\n\tcloseClickHandler() {\n\t\tthis.setState({\n\t\t\tisClosed: true\n\t\t});\n\n\t\tif (typeof this.props.onClosing === \"function\") this.props.onClosing(this);\n\t\telse throw new Error(\"The onClosing prop should be a function\");\n\t}\n\n\trender() {\n\t\tif (this.state.isClosed) return null;\n\n\t\tconst {\n\t\t\tvariant,\n\t\t\tonClosing,\n\t\t\ttitle,\n\t\t\tchildren,\n\t\t\tcta,\n\t\t\tclassName,\n\t\t\t...rest\n\t\t} = this.props;\n\n\t\tconst classes = {\n\t\t\t\"action-banner\": true,\n\t\t\t\"action-banner--closeable\": onClosing,\n\t\t\t[`action-banner--${variant}`]: variant,\n\t\t\t[className]: className\n\t\t};\n\n\t\treturn (\n\t\t\t<section className={classnames(classes)} {...rest}>\n\t\t\t\t<div className=\"action-banner__container\">\n\t\t\t\t\t<div className=\"action-banner__inner\">\n\t\t\t\t\t\t<div className=\"action-banner__text\">\n\t\t\t\t\t\t\t<h2 className=\"action-banner__title\">{title}</h2>\n\t\t\t\t\t\t\t{children && <p className=\"action-banner__intro\">{children}</p>}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{cta && <div className=\"action-banner__actions\">{cta}</div>}\n\t\t\t\t\t\t{onClosing && (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName=\"action-banner__close\"\n\t\t\t\t\t\t\t\tonClick={this.closeClickHandler}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<RemoveIcon />\n\t\t\t\t\t\t\t\t<span className=\"visually-hidden\">Close {title}</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t}\n}\n\nActionBanner.propTypes = {\n\ttitle: PropTypes.string.isRequired,\n\tvariant: PropTypes.oneOf([\"default\", \"subtle\"]),\n\tchildren: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tcta: PropTypes.node,\n\tonClosing: PropTypes.func,\n\tclassName: PropTypes.string\n};\n\nActionBanner.defaultProps = {\n\tvariant: \"default\"\n};\n"],"file":"ActionBanner.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-action-banner",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.15",
|
|
4
4
|
"description": "Action banner component for the NICE Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"banner"
|
|
@@ -35,7 +35,8 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@nice-digital/icons": "^2.2.7",
|
|
38
|
-
"@nice-digital/nds-core": "^1.2.
|
|
38
|
+
"@nice-digital/nds-core": "^1.2.13",
|
|
39
|
+
"classnames": "^2.3.1",
|
|
39
40
|
"prop-types": "^15.7.2"
|
|
40
41
|
},
|
|
41
42
|
"peerDependencies": {
|
|
@@ -45,5 +46,5 @@
|
|
|
45
46
|
"devDependencies": {
|
|
46
47
|
"@babel/cli": "^7.5.0"
|
|
47
48
|
},
|
|
48
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "2bdf3454416a51f8e6c407a0f03ff14c08b6023a"
|
|
49
50
|
}
|
package/scss/action-banner.scss
CHANGED
|
@@ -115,7 +115,7 @@ $nds-action-banner-subtle-border: $nds-colour-nice-grey-2;
|
|
|
115
115
|
|
|
116
116
|
&__text {
|
|
117
117
|
margin-bottom: 0;
|
|
118
|
-
width: percentage(3
|
|
118
|
+
width: percentage(3*0.25);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
&__actions {
|
|
@@ -124,7 +124,7 @@ $nds-action-banner-subtle-border: $nds-colour-nice-grey-2;
|
|
|
124
124
|
text-align: right;
|
|
125
125
|
top: 50%;
|
|
126
126
|
transform: translateY(-50%);
|
|
127
|
-
width: percentage(1
|
|
127
|
+
width: percentage(1*0.25);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
&--closeable {
|