@nice-digital/nds-action-banner 3.0.2-alpha.0 → 4.0.0-alpha.0
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/ActionBanner.d.ts +19 -0
- package/es/ActionBanner.js +53 -88
- package/es/ActionBanner.test.d.ts +1 -0
- package/es/ActionBanner.test.js +65 -0
- package/package.json +13 -13
- package/es/ActionBanner.js.map +0 -1
- package/lib/ActionBanner.js +0 -168
- package/lib/ActionBanner.js.map +0 -1
- package/nds-action-banner.d.ts +0 -14
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import "../scss/action-banner.scss";
|
|
3
|
+
interface ActionBannerProps {
|
|
4
|
+
title: string;
|
|
5
|
+
variant?: "default" | "subtle";
|
|
6
|
+
children: ReactNode[] | ReactNode;
|
|
7
|
+
cta?: ReactNode;
|
|
8
|
+
onClosing?: Function;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
interface ActionBannerState {
|
|
12
|
+
isClosed: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare class ActionBanner extends React.Component<ActionBannerProps, ActionBannerState> {
|
|
15
|
+
constructor(props: ActionBannerProps);
|
|
16
|
+
closeClickHandler(): void;
|
|
17
|
+
render(): JSX.Element | null;
|
|
18
|
+
}
|
|
19
|
+
export {};
|
package/es/ActionBanner.js
CHANGED
|
@@ -1,88 +1,53 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
55
|
-
className: "action-banner__container"
|
|
56
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
57
|
-
className: "action-banner__inner"
|
|
58
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
59
|
-
className: "action-banner__text"
|
|
60
|
-
}, /*#__PURE__*/React.createElement("h2", {
|
|
61
|
-
className: "action-banner__title"
|
|
62
|
-
}, title), children && /*#__PURE__*/React.createElement("p", {
|
|
63
|
-
className: "action-banner__intro"
|
|
64
|
-
}, children)), cta && /*#__PURE__*/React.createElement("div", {
|
|
65
|
-
className: "action-banner__actions"
|
|
66
|
-
}, cta), onClosing && /*#__PURE__*/React.createElement("button", {
|
|
67
|
-
type: "button",
|
|
68
|
-
className: "action-banner__close",
|
|
69
|
-
onClick: this.closeClickHandler
|
|
70
|
-
}, /*#__PURE__*/React.createElement(RemoveIcon, null), /*#__PURE__*/React.createElement("span", {
|
|
71
|
-
className: "visually-hidden"
|
|
72
|
-
}, "Close ", title)))));
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
return ActionBanner;
|
|
76
|
-
}(React.Component);
|
|
77
|
-
ActionBanner.propTypes = {
|
|
78
|
-
title: PropTypes.string.isRequired,
|
|
79
|
-
variant: PropTypes.oneOf(["default", "subtle"]),
|
|
80
|
-
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
|
|
81
|
-
cta: PropTypes.node,
|
|
82
|
-
onClosing: PropTypes.func,
|
|
83
|
-
className: PropTypes.string
|
|
84
|
-
};
|
|
85
|
-
ActionBanner.defaultProps = {
|
|
86
|
-
variant: "default"
|
|
87
|
-
};
|
|
88
|
-
//# sourceMappingURL=ActionBanner.js.map
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.ActionBanner = void 0;
|
|
18
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
const react_1 = __importDefault(require("react"));
|
|
20
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
21
|
+
const Remove_1 = __importDefault(require("@nice-digital/icons/lib/Remove"));
|
|
22
|
+
require("../scss/action-banner.scss");
|
|
23
|
+
class ActionBanner extends react_1.default.Component {
|
|
24
|
+
constructor(props) {
|
|
25
|
+
super(props);
|
|
26
|
+
this.state = {
|
|
27
|
+
isClosed: false
|
|
28
|
+
};
|
|
29
|
+
this.closeClickHandler = this.closeClickHandler.bind(this);
|
|
30
|
+
}
|
|
31
|
+
closeClickHandler() {
|
|
32
|
+
this.setState({
|
|
33
|
+
isClosed: true
|
|
34
|
+
});
|
|
35
|
+
if (typeof this.props.onClosing === "function")
|
|
36
|
+
this.props.onClosing(this);
|
|
37
|
+
else
|
|
38
|
+
throw new Error("The onClosing prop should be a function");
|
|
39
|
+
}
|
|
40
|
+
render() {
|
|
41
|
+
if (this.state.isClosed)
|
|
42
|
+
return null;
|
|
43
|
+
const _a = this.props, { variant, onClosing, title, children, cta, className } = _a, rest = __rest(_a, ["variant", "onClosing", "title", "children", "cta", "className"]);
|
|
44
|
+
const classes = {
|
|
45
|
+
"action-banner": true,
|
|
46
|
+
"action-banner--closeable": onClosing,
|
|
47
|
+
[`action-banner--${variant}`]: variant,
|
|
48
|
+
[`${className}`]: className
|
|
49
|
+
};
|
|
50
|
+
return ((0, jsx_runtime_1.jsx)("section", Object.assign({ className: (0, classnames_1.default)(classes), "data-component": "action-banner" }, rest, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__container" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "action-banner__inner" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "action-banner__text" }, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "action-banner__title" }, { children: title })), children && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__intro" }, { children: children })))] })), cta && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "action-banner__actions" }, { children: cta })), onClosing && ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: "action-banner__close", onClick: this.closeClickHandler }, { children: [(0, jsx_runtime_1.jsx)(Remove_1.default, {}), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "visually-hidden" }, { children: ["Close ", title] }))] })))] })) })) })));
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
exports.ActionBanner = ActionBanner;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
12
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
|
+
const react_1 = require("@testing-library/react");
|
|
17
|
+
const ActionBanner_1 = require("./ActionBanner");
|
|
18
|
+
const user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
19
|
+
describe("ActionBanner", () => {
|
|
20
|
+
it("should render child text", () => {
|
|
21
|
+
const sampleText = "Some sample text";
|
|
22
|
+
(0, react_1.render)((0, jsx_runtime_1.jsx)(ActionBanner_1.ActionBanner, Object.assign({ title: "Title" }, { children: sampleText })));
|
|
23
|
+
expect(react_1.screen.getByText(sampleText)).toBeInTheDocument();
|
|
24
|
+
});
|
|
25
|
+
it("should match snapshot for default action banner", () => {
|
|
26
|
+
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ActionBanner_1.ActionBanner, Object.assign({ title: "Some title", cta: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "/test" }, { children: "Some CTA" })) }, { children: "Some body" })));
|
|
27
|
+
expect(container).toMatchSnapshot();
|
|
28
|
+
});
|
|
29
|
+
it("should match snapshot for closeable subtle action banner", () => {
|
|
30
|
+
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ActionBanner_1.ActionBanner, Object.assign({ variant: "subtle", title: "Some title", cta: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "/test" }, { children: "Some CTA" })), onClosing: jest.fn() }, { children: "Some body" })));
|
|
31
|
+
expect(container).toMatchSnapshot();
|
|
32
|
+
});
|
|
33
|
+
it("should spread additional props onto the container", () => {
|
|
34
|
+
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ActionBanner_1.ActionBanner, Object.assign({ title: "Some title", cta: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "/test" }, { children: "Some CTA" })), "data-track": "test" }, { children: "Some body" })));
|
|
35
|
+
expect(container.querySelector("section")).toHaveAttribute("data-track", "test");
|
|
36
|
+
});
|
|
37
|
+
it("should merge additional classes into the existing classes", () => {
|
|
38
|
+
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ActionBanner_1.ActionBanner, Object.assign({ title: "Some title", className: "mt--0" }, { children: "Some body" })));
|
|
39
|
+
expect(container.querySelector("section")).toHaveClass("mt--0");
|
|
40
|
+
});
|
|
41
|
+
it("should not render an empty CTA", () => {
|
|
42
|
+
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ActionBanner_1.ActionBanner, Object.assign({ title: "Title" }, { children: "Body" })));
|
|
43
|
+
expect(container.querySelector(".action-banner__actions")).toBe(null);
|
|
44
|
+
});
|
|
45
|
+
it("should hide banner after clicking close button", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
46
|
+
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ActionBanner_1.ActionBanner, Object.assign({ title: "Title", onClosing: jest.fn() }, { children: "Body" })));
|
|
47
|
+
// First, check for the banner's existence
|
|
48
|
+
expect(container.querySelector("section")).toBeInTheDocument();
|
|
49
|
+
const button = react_1.screen.getByRole("button");
|
|
50
|
+
user_event_1.default.click(button);
|
|
51
|
+
// Next, check that the banner has gone
|
|
52
|
+
yield (0, react_1.waitFor)(() => {
|
|
53
|
+
expect(container.querySelector("section")).toBe(null);
|
|
54
|
+
});
|
|
55
|
+
}));
|
|
56
|
+
it("should call onClosing prop with component instance on close button click", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
57
|
+
const onClosing = jest.fn();
|
|
58
|
+
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ActionBanner_1.ActionBanner, Object.assign({ title: "Title", onClosing: onClosing }, { children: "Body" })));
|
|
59
|
+
const button = react_1.screen.getByRole("button");
|
|
60
|
+
user_event_1.default.click(button);
|
|
61
|
+
yield (0, react_1.waitFor)(() => {
|
|
62
|
+
expect(onClosing).toHaveBeenCalledTimes(1);
|
|
63
|
+
});
|
|
64
|
+
}));
|
|
65
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-action-banner",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-alpha.0",
|
|
4
4
|
"description": "Action banner component for the NICE Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"banner"
|
|
@@ -8,16 +8,12 @@
|
|
|
8
8
|
"author": "Ian Routledge <ian.routledge@nice.org.uk>",
|
|
9
9
|
"homepage": "https://design-system.nice.org.uk/",
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"main": "
|
|
12
|
-
"module": "es/ActionBanner.js",
|
|
11
|
+
"main": "es/ActionBanner.js",
|
|
13
12
|
"style": "scss/action-banner.scss",
|
|
14
|
-
"types": "nds-action-banner.d.ts",
|
|
15
13
|
"directories": {
|
|
16
|
-
"lib": "
|
|
17
|
-
"test": "__tests__"
|
|
14
|
+
"lib": "es"
|
|
18
15
|
},
|
|
19
16
|
"files": [
|
|
20
|
-
"lib",
|
|
21
17
|
"es",
|
|
22
18
|
"scss",
|
|
23
19
|
"*.d.ts"
|
|
@@ -34,17 +30,21 @@
|
|
|
34
30
|
"url": "https://github.com/nice-digital/nice-design-system/issues"
|
|
35
31
|
},
|
|
36
32
|
"dependencies": {
|
|
37
|
-
"@nice-digital/icons": "^
|
|
38
|
-
"@nice-digital/nds-core": "^
|
|
39
|
-
"classnames": "^2.3.1"
|
|
40
|
-
"prop-types": "^15.7.2"
|
|
33
|
+
"@nice-digital/icons": "^6.0.0-alpha.0",
|
|
34
|
+
"@nice-digital/nds-core": "^4.0.0-alpha.0",
|
|
35
|
+
"classnames": "^2.3.1"
|
|
41
36
|
},
|
|
42
37
|
"peerDependencies": {
|
|
43
38
|
"react": "^16 || ^17 || ^18",
|
|
44
39
|
"react-dom": "^16 || ^17 || ^18"
|
|
45
40
|
},
|
|
46
41
|
"devDependencies": {
|
|
47
|
-
"@
|
|
42
|
+
"@testing-library/jest-dom": "^5.16.5",
|
|
43
|
+
"@testing-library/react": "^13.4.0",
|
|
44
|
+
"@testing-library/user-event": "^14.4.3",
|
|
45
|
+
"@types/jest": "^29.2.2",
|
|
46
|
+
"@types/node": "^18.11.9",
|
|
47
|
+
"typescript": "^4.8.4"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "e225e0b15723013fb3df7309d197590a09cc2ea7"
|
|
50
50
|
}
|
package/es/ActionBanner.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"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"],"sources":["../src/ActionBanner.js"],"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 { variant, onClosing, title, children, cta, className, ...rest } =\n\t\t\tthis.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"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,UAAP,MAAuB,gCAAvB;AAEA,OAAO,4BAAP;AAEA,WAAaC,YAAb;EAAA;;EACC,sBAAYC,KAAZ,EAAmB;IAAA;;IAClB,oCAAMA,KAAN;IAEA,MAAKC,KAAL,GAAa;MACZC,QAAQ,EAAE;IADE,CAAb;IAIA,MAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,+BAAzB;IAPkB;EAQlB;;EATF;;EAAA,OAWCD,iBAXD,GAWC,6BAAoB;IACnB,KAAKE,QAAL,CAAc;MACbH,QAAQ,EAAE;IADG,CAAd;IAIA,IAAI,OAAO,KAAKF,KAAL,CAAWM,SAAlB,KAAgC,UAApC,EAAgD,KAAKN,KAAL,CAAWM,SAAX,CAAqB,IAArB,EAAhD,KACK,MAAM,IAAIC,KAAJ,CAAU,yCAAV,CAAN;EACL,CAlBF;;EAAA,OAoBCC,MApBD,GAoBC,kBAAS;IAAA;;IACR,IAAI,KAAKP,KAAL,CAAWC,QAAf,EAAyB,OAAO,IAAP;;IAEzB,kBACC,KAAKF,KADN;IAAA,IAAQS,OAAR,eAAQA,OAAR;IAAA,IAAiBH,SAAjB,eAAiBA,SAAjB;IAAA,IAA4BI,KAA5B,eAA4BA,KAA5B;IAAA,IAAmCC,QAAnC,eAAmCA,QAAnC;IAAA,IAA6CC,GAA7C,eAA6CA,GAA7C;IAAA,IAAkDC,SAAlD,eAAkDA,SAAlD;IAAA,IAAgEC,IAAhE;;IAGA,IAAMC,OAAO;MACZ,iBAAiB,IADL;MAEZ,4BAA4BT;IAFhB,gCAGOG,OAHP,IAGmBA,OAHnB,WAIXI,SAJW,IAICA,SAJD,WAAb;IAOA,oBACC;MAAS,SAAS,EAAEhB,UAAU,CAACkB,OAAD;IAA9B,GAA6CD,IAA7C,gBACC;MAAK,SAAS,EAAC;IAAf,gBACC;MAAK,SAAS,EAAC;IAAf,gBACC;MAAK,SAAS,EAAC;IAAf,gBACC;MAAI,SAAS,EAAC;IAAd,GAAsCJ,KAAtC,CADD,EAEEC,QAAQ,iBAAI;MAAG,SAAS,EAAC;IAAb,GAAqCA,QAArC,CAFd,CADD,EAKEC,GAAG,iBAAI;MAAK,SAAS,EAAC;IAAf,GAAyCA,GAAzC,CALT,EAMEN,SAAS,iBACT;MACC,IAAI,EAAC,QADN;MAEC,SAAS,EAAC,sBAFX;MAGC,OAAO,EAAE,KAAKH;IAHf,gBAKC,oBAAC,UAAD,OALD,eAMC;MAAM,SAAS,EAAC;IAAhB,aAAyCO,KAAzC,CAND,CAPF,CADD,CADD,CADD;EAuBA,CAxDF;;EAAA;AAAA,EAAkCf,KAAK,CAACqB,SAAxC;AA2DAjB,YAAY,CAACkB,SAAb,GAAyB;EACxBP,KAAK,EAAEd,SAAS,CAACsB,MAAV,CAAiBC,UADA;EAExBV,OAAO,EAAEb,SAAS,CAACwB,KAAV,CAAgB,CAAC,SAAD,EAAY,QAAZ,CAAhB,CAFe;EAGxBT,QAAQ,EAAEf,SAAS,CAACyB,SAAV,CAAoB,CAC7BzB,SAAS,CAAC0B,OAAV,CAAkB1B,SAAS,CAAC2B,IAA5B,CAD6B,EAE7B3B,SAAS,CAAC2B,IAFmB,CAApB,EAGPJ,UANqB;EAOxBP,GAAG,EAAEhB,SAAS,CAAC2B,IAPS;EAQxBjB,SAAS,EAAEV,SAAS,CAAC4B,IARG;EASxBX,SAAS,EAAEjB,SAAS,CAACsB;AATG,CAAzB;AAYAnB,YAAY,CAAC0B,YAAb,GAA4B;EAC3BhB,OAAO,EAAE;AADkB,CAA5B"}
|
package/lib/ActionBanner.js
DELETED
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
exports.__esModule = true;
|
|
6
|
-
exports.ActionBanner = void 0;
|
|
7
|
-
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
|
|
10
|
-
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
11
|
-
|
|
12
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
13
|
-
|
|
14
|
-
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
|
|
15
|
-
|
|
16
|
-
var _react = _interopRequireDefault(require("react"));
|
|
17
|
-
|
|
18
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
19
|
-
|
|
20
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
|
-
|
|
22
|
-
var _Remove = _interopRequireDefault(require("@nice-digital/icons/lib/Remove"));
|
|
23
|
-
|
|
24
|
-
require("../scss/action-banner.scss");
|
|
25
|
-
|
|
26
|
-
var _excluded = ["variant", "onClosing", "title", "children", "cta", "className"];
|
|
27
|
-
var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-action-banner\\src\\ActionBanner.js";
|
|
28
|
-
|
|
29
|
-
var ActionBanner = /*#__PURE__*/function (_React$Component) {
|
|
30
|
-
(0, _inheritsLoose2["default"])(ActionBanner, _React$Component);
|
|
31
|
-
|
|
32
|
-
function ActionBanner(props) {
|
|
33
|
-
var _this;
|
|
34
|
-
|
|
35
|
-
_this = _React$Component.call(this, props) || this;
|
|
36
|
-
_this.state = {
|
|
37
|
-
isClosed: false
|
|
38
|
-
};
|
|
39
|
-
_this.closeClickHandler = _this.closeClickHandler.bind((0, _assertThisInitialized2["default"])(_this));
|
|
40
|
-
return _this;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
var _proto = ActionBanner.prototype;
|
|
44
|
-
|
|
45
|
-
_proto.closeClickHandler = function closeClickHandler() {
|
|
46
|
-
this.setState({
|
|
47
|
-
isClosed: true
|
|
48
|
-
});
|
|
49
|
-
if (typeof this.props.onClosing === "function") this.props.onClosing(this);else throw new Error("The onClosing prop should be a function");
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
_proto.render = function render() {
|
|
53
|
-
var _classes;
|
|
54
|
-
|
|
55
|
-
if (this.state.isClosed) return null;
|
|
56
|
-
var _this$props = this.props,
|
|
57
|
-
variant = _this$props.variant,
|
|
58
|
-
onClosing = _this$props.onClosing,
|
|
59
|
-
title = _this$props.title,
|
|
60
|
-
children = _this$props.children,
|
|
61
|
-
cta = _this$props.cta,
|
|
62
|
-
className = _this$props.className,
|
|
63
|
-
rest = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, _excluded);
|
|
64
|
-
var classes = (_classes = {
|
|
65
|
-
"action-banner": true,
|
|
66
|
-
"action-banner--closeable": onClosing
|
|
67
|
-
}, _classes["action-banner--" + variant] = variant, _classes[className] = className, _classes);
|
|
68
|
-
return /*#__PURE__*/_react["default"].createElement("section", (0, _extends2["default"])({
|
|
69
|
-
className: (0, _classnames["default"])(classes)
|
|
70
|
-
}, rest, {
|
|
71
|
-
__self: this,
|
|
72
|
-
__source: {
|
|
73
|
-
fileName: _jsxFileName,
|
|
74
|
-
lineNumber: 42,
|
|
75
|
-
columnNumber: 4
|
|
76
|
-
}
|
|
77
|
-
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
78
|
-
className: "action-banner__container",
|
|
79
|
-
__self: this,
|
|
80
|
-
__source: {
|
|
81
|
-
fileName: _jsxFileName,
|
|
82
|
-
lineNumber: 43,
|
|
83
|
-
columnNumber: 5
|
|
84
|
-
}
|
|
85
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
86
|
-
className: "action-banner__inner",
|
|
87
|
-
__self: this,
|
|
88
|
-
__source: {
|
|
89
|
-
fileName: _jsxFileName,
|
|
90
|
-
lineNumber: 44,
|
|
91
|
-
columnNumber: 6
|
|
92
|
-
}
|
|
93
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
94
|
-
className: "action-banner__text",
|
|
95
|
-
__self: this,
|
|
96
|
-
__source: {
|
|
97
|
-
fileName: _jsxFileName,
|
|
98
|
-
lineNumber: 45,
|
|
99
|
-
columnNumber: 7
|
|
100
|
-
}
|
|
101
|
-
}, /*#__PURE__*/_react["default"].createElement("h2", {
|
|
102
|
-
className: "action-banner__title",
|
|
103
|
-
__self: this,
|
|
104
|
-
__source: {
|
|
105
|
-
fileName: _jsxFileName,
|
|
106
|
-
lineNumber: 46,
|
|
107
|
-
columnNumber: 8
|
|
108
|
-
}
|
|
109
|
-
}, title), children && /*#__PURE__*/_react["default"].createElement("p", {
|
|
110
|
-
className: "action-banner__intro",
|
|
111
|
-
__self: this,
|
|
112
|
-
__source: {
|
|
113
|
-
fileName: _jsxFileName,
|
|
114
|
-
lineNumber: 47,
|
|
115
|
-
columnNumber: 21
|
|
116
|
-
}
|
|
117
|
-
}, children)), cta && /*#__PURE__*/_react["default"].createElement("div", {
|
|
118
|
-
className: "action-banner__actions",
|
|
119
|
-
__self: this,
|
|
120
|
-
__source: {
|
|
121
|
-
fileName: _jsxFileName,
|
|
122
|
-
lineNumber: 49,
|
|
123
|
-
columnNumber: 15
|
|
124
|
-
}
|
|
125
|
-
}, cta), onClosing && /*#__PURE__*/_react["default"].createElement("button", {
|
|
126
|
-
type: "button",
|
|
127
|
-
className: "action-banner__close",
|
|
128
|
-
onClick: this.closeClickHandler,
|
|
129
|
-
__self: this,
|
|
130
|
-
__source: {
|
|
131
|
-
fileName: _jsxFileName,
|
|
132
|
-
lineNumber: 51,
|
|
133
|
-
columnNumber: 8
|
|
134
|
-
}
|
|
135
|
-
}, /*#__PURE__*/_react["default"].createElement(_Remove["default"], {
|
|
136
|
-
__self: this,
|
|
137
|
-
__source: {
|
|
138
|
-
fileName: _jsxFileName,
|
|
139
|
-
lineNumber: 56,
|
|
140
|
-
columnNumber: 9
|
|
141
|
-
}
|
|
142
|
-
}), /*#__PURE__*/_react["default"].createElement("span", {
|
|
143
|
-
className: "visually-hidden",
|
|
144
|
-
__self: this,
|
|
145
|
-
__source: {
|
|
146
|
-
fileName: _jsxFileName,
|
|
147
|
-
lineNumber: 57,
|
|
148
|
-
columnNumber: 9
|
|
149
|
-
}
|
|
150
|
-
}, "Close ", title)))));
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
return ActionBanner;
|
|
154
|
-
}(_react["default"].Component);
|
|
155
|
-
|
|
156
|
-
exports.ActionBanner = ActionBanner;
|
|
157
|
-
ActionBanner.propTypes = {
|
|
158
|
-
title: _propTypes["default"].string.isRequired,
|
|
159
|
-
variant: _propTypes["default"].oneOf(["default", "subtle"]),
|
|
160
|
-
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
|
|
161
|
-
cta: _propTypes["default"].node,
|
|
162
|
-
onClosing: _propTypes["default"].func,
|
|
163
|
-
className: _propTypes["default"].string
|
|
164
|
-
};
|
|
165
|
-
ActionBanner.defaultProps = {
|
|
166
|
-
variant: "default"
|
|
167
|
-
};
|
|
168
|
-
//# sourceMappingURL=ActionBanner.js.map
|
package/lib/ActionBanner.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBanner.js","names":["ActionBanner","props","state","isClosed","closeClickHandler","bind","setState","onClosing","Error","render","variant","title","children","cta","className","rest","classes","classnames","React","Component","propTypes","PropTypes","string","isRequired","oneOf","oneOfType","arrayOf","node","func","defaultProps"],"sources":["../src/ActionBanner.js"],"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 { variant, onClosing, title, children, cta, className, ...rest } =\n\t\t\tthis.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"],"mappings":"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"}
|
package/nds-action-banner.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
declare module "@nice-digital/nds-action-banner" {
|
|
2
|
-
import React = require("react");
|
|
3
|
-
|
|
4
|
-
export interface ActionBannerProps {
|
|
5
|
-
[prop: string]: unknown;
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
title: string;
|
|
8
|
-
variant?: "default" | "subtle";
|
|
9
|
-
cta?: React.ReactNode;
|
|
10
|
-
onClosing?: (element: React.ReactElement) => void;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export class ActionBanner extends React.Component<ActionBannerProps> {}
|
|
14
|
-
}
|