@nice-digital/nds-hero 3.0.2-alpha.0 → 4.0.0-alpha.0

package/es/Hero.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "../scss/hero.scss";
+export interface HeroProps {
+    [prop: string]: unknown;
+    actions?: React.ReactNode;
+    extra?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    intro?: React.ReactNode;
+    title: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Hero: React.FC<HeroProps>;

package/es/Hero.js

@@ -1,47 +1,25 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["actions", "children", "footer", "header", "intro", "title", "className"];
-import React from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import "../scss/hero.scss";
-export var Hero = function Hero(props) {
-  var actions = props.actions,
-      children = props.children,
-      footer = props.footer,
-      header = props.header,
-      intro = props.intro,
-      title = props.title,
-      className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, _excluded);
-
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classnames(["hero", className])
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: "hero__container"
-  }, header && header, /*#__PURE__*/React.createElement("div", {
-    className: "hero__body"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "hero__copy"
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: "hero__title"
-  }, title), intro && /*#__PURE__*/React.createElement("p", {
-    className: "hero__intro"
-  }, intro), actions && /*#__PURE__*/React.createElement("div", {
-    className: "hero__actions"
-  }, actions)), children && /*#__PURE__*/React.createElement("div", {
-    className: "hero__extra"
-  }, children)), footer && /*#__PURE__*/React.createElement("div", {
-    className: "hero__footer"
-  }, footer)));
-};
-Hero.propTypes = {
-  actions: PropTypes.node,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  footer: PropTypes.node,
-  header: PropTypes.node,
-  intro: PropTypes.node,
-  title: PropTypes.node.isRequired
-};
-//# sourceMappingURL=Hero.js.map
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hero = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+require("../scss/hero.scss");
+const Hero = (props) => {
+    const { actions, children, footer, header, intro, title, className } = props, rest = __rest(props, ["actions", "children", "footer", "header", "intro", "title", "className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(["hero", className]) }, rest, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hero__container" }, { children: [header && header, (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hero__body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hero__copy" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "hero__title" }, { children: title })), intro && (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "hero__intro" }, { children: intro })), actions && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "hero__actions" }, { children: actions }))] })), children && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "hero__extra" }, { children: children }))] })), footer && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "hero__footer" }, { children: footer }))] })) })));
+};
+exports.Hero = Hero;

package/es/Hero.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/Hero.test.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const Hero_1 = require("./Hero");
+const actions = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "page-one" }, { children: "Go to page one" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "page-two" }, { children: "Go to page two" }))] }));
+const header = (0, jsx_runtime_1.jsx)("p", { children: "Header content" });
+const footer = (0, jsx_runtime_1.jsx)("p", { children: "Footer content" });
+const extras = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: "Quick links" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "page-one" }, { children: "Go to page one" })) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("ul", { children: (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "page-two" }, { children: "Go to page two" })) }) }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "page-three" }, { children: "Go to page three" })) })] })] }));
+describe("Hero", () => {
+    it("should match the snapshot with props", () => {
+        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(Hero_1.Hero, Object.assign({ title: "Welcoming title", intro: "Introduction text", actions: actions, header: header, footer: footer }, { children: extras })));
+        expect(wrapper).toMatchSnapshot();
+    });
+    it("should pass any number of child components via actions and extra props ", () => {
+        var _a;
+        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(Hero_1.Hero, Object.assign({ title: "Welcoming title", intro: "Introduction text", actions: actions, "data-track": false, className: "mt--0" }, { children: extras })));
+        const anchors = wrapper.getAllByRole("link", { name: "Go to page two" });
+        expect(anchors.length).toBe(2);
+        expect(anchors[anchors.length - 1].textContent).toBe("Go to page two");
+        expect((_a = wrapper.container.querySelector("div.hero")) === null || _a === void 0 ? void 0 : _a.getAttribute("data-track")).toBe("false");
+        expect(wrapper.container.querySelector("div.hero")).toHaveClass("mt--0");
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-hero",
-	"version": "3.0.2-alpha.0",
+	"version": "4.0.0-alpha.0",
 	"description": "Hero component for the NICE Design System",
 	"keywords": [
 		"hero"
@@ -8,16 +8,12 @@
 	"author": "Ian Routledge <ian.routledge@nice.org.uk>",
 	"homepage": "https://design-system.nice.org.uk/",
 	"license": "MIT",
-	"types": "nds-hero.d.ts",
-	"main": "lib/Hero.js",
-	"module": "es/Hero.js",
+	"main": "es/Hero.js",
 	"style": "scss/hero.scss",
 	"directories": {
-		"lib": "lib",
 		"test": "__tests__"
 	},
 	"files": [
-		"lib",
 		"es",
 		"scss",
 		"*.d.ts"
@@ -37,16 +33,20 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/nds-core": "^3.0.2-alpha.0",
-		"classnames": "^2.3.1",
-		"prop-types": "^15.7.2"
+		"@nice-digital/nds-core": "^4.0.0-alpha.0",
+		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
 		"react": "^16 || ^17 || ^18",
 		"react-dom": "^16 || ^17 || ^18"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.5.0"
-	},
-	"gitHead": "01eb23ab82d96b46f389b4ed274d1c666e8c4b76"
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/jest": "^29.2.2",
+		"@types/node": "^18.11.9",
+		"typescript": "^4.8.4"
+	},
+	"gitHead": "e225e0b15723013fb3df7309d197590a09cc2ea7"
 }

package/es/Hero.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Hero.js","names":["React","PropTypes","classnames","Hero","props","actions","children","footer","header","intro","title","className","rest","propTypes","node","string","isRequired"],"sources":["../src/Hero.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\nimport \"../scss/hero.scss\";\n\nexport const Hero = (props) => {\n\tconst {\n\t\tactions,\n\t\tchildren,\n\t\tfooter,\n\t\theader,\n\t\tintro,\n\t\ttitle,\n\t\tclassName,\n\t\t...rest\n\t} = props;\n\treturn (\n\t\t<div className={classnames([\"hero\", className])} {...rest}>\n\t\t\t<div className=\"hero__container\">\n\t\t\t\t{header && header}\n\t\t\t\t<div className=\"hero__body\">\n\t\t\t\t\t<div className=\"hero__copy\">\n\t\t\t\t\t\t<h1 className=\"hero__title\">{title}</h1>\n\t\t\t\t\t\t{intro && <p className=\"hero__intro\">{intro}</p>}\n\t\t\t\t\t\t{actions && <div className=\"hero__actions\">{actions}</div>}\n\t\t\t\t\t</div>\n\t\t\t\t\t{children && <div className=\"hero__extra\">{children}</div>}\n\t\t\t\t</div>\n\t\t\t\t{footer && <div className=\"hero__footer\">{footer}</div>}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nHero.propTypes = {\n\tactions: PropTypes.node,\n\tchildren: PropTypes.node,\n\tclassName: PropTypes.string,\n\tfooter: PropTypes.node,\n\theader: PropTypes.node,\n\tintro: PropTypes.node,\n\ttitle: PropTypes.node.isRequired\n};\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAO,mBAAP;AAEA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAAW;EAC9B,IACCC,OADD,GASID,KATJ,CACCC,OADD;EAAA,IAECC,QAFD,GASIF,KATJ,CAECE,QAFD;EAAA,IAGCC,MAHD,GASIH,KATJ,CAGCG,MAHD;EAAA,IAICC,MAJD,GASIJ,KATJ,CAICI,MAJD;EAAA,IAKCC,KALD,GASIL,KATJ,CAKCK,KALD;EAAA,IAMCC,KAND,GASIN,KATJ,CAMCM,KAND;EAAA,IAOCC,SAPD,GASIP,KATJ,CAOCO,SAPD;EAAA,IAQIC,IARJ,iCASIR,KATJ;;EAUA,oBACC;IAAK,SAAS,EAAEF,UAAU,CAAC,CAAC,MAAD,EAASS,SAAT,CAAD;EAA1B,GAAqDC,IAArD,gBACC;IAAK,SAAS,EAAC;EAAf,GACEJ,MAAM,IAAIA,MADZ,eAEC;IAAK,SAAS,EAAC;EAAf,gBACC;IAAK,SAAS,EAAC;EAAf,gBACC;IAAI,SAAS,EAAC;EAAd,GAA6BE,KAA7B,CADD,EAEED,KAAK,iBAAI;IAAG,SAAS,EAAC;EAAb,GAA4BA,KAA5B,CAFX,EAGEJ,OAAO,iBAAI;IAAK,SAAS,EAAC;EAAf,GAAgCA,OAAhC,CAHb,CADD,EAMEC,QAAQ,iBAAI;IAAK,SAAS,EAAC;EAAf,GAA8BA,QAA9B,CANd,CAFD,EAUEC,MAAM,iBAAI;IAAK,SAAS,EAAC;EAAf,GAA+BA,MAA/B,CAVZ,CADD,CADD;AAgBA,CA3BM;AA6BPJ,IAAI,CAACU,SAAL,GAAiB;EAChBR,OAAO,EAAEJ,SAAS,CAACa,IADH;EAEhBR,QAAQ,EAAEL,SAAS,CAACa,IAFJ;EAGhBH,SAAS,EAAEV,SAAS,CAACc,MAHL;EAIhBR,MAAM,EAAEN,SAAS,CAACa,IAJF;EAKhBN,MAAM,EAAEP,SAAS,CAACa,IALF;EAMhBL,KAAK,EAAER,SAAS,CAACa,IAND;EAOhBJ,KAAK,EAAET,SAAS,CAACa,IAAV,CAAeE;AAPN,CAAjB"}

package/lib/Hero.js

@@ -1,120 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.Hero = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-require("../scss/hero.scss");
-
-var _excluded = ["actions", "children", "footer", "header", "intro", "title", "className"];
-
-var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-hero\\src\\Hero.js",
-    _this = void 0;
-
-var Hero = function Hero(props) {
-  var actions = props.actions,
-      children = props.children,
-      footer = props.footer,
-      header = props.header,
-      intro = props.intro,
-      title = props.title,
-      className = props.className,
-      rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: (0, _classnames["default"])(["hero", className])
-  }, rest, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 18,
-      columnNumber: 3
-    }
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hero__container",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 19,
-      columnNumber: 4
-    }
-  }, header && header, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hero__body",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 21,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hero__copy",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 22,
-      columnNumber: 6
-    }
-  }, /*#__PURE__*/_react["default"].createElement("h1", {
-    className: "hero__title",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 23,
-      columnNumber: 7
-    }
-  }, title), intro && /*#__PURE__*/_react["default"].createElement("p", {
-    className: "hero__intro",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 24,
-      columnNumber: 17
-    }
-  }, intro), actions && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hero__actions",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 25,
-      columnNumber: 19
-    }
-  }, actions)), children && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hero__extra",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 27,
-      columnNumber: 19
-    }
-  }, children)), footer && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hero__footer",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 29,
-      columnNumber: 16
-    }
-  }, footer)));
-};
-
-exports.Hero = Hero;
-Hero.propTypes = {
-  actions: _propTypes["default"].node,
-  children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
-  footer: _propTypes["default"].node,
-  header: _propTypes["default"].node,
-  intro: _propTypes["default"].node,
-  title: _propTypes["default"].node.isRequired
-};
-//# sourceMappingURL=Hero.js.map

package/lib/Hero.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Hero.js","names":["Hero","props","actions","children","footer","header","intro","title","className","rest","classnames","propTypes","PropTypes","node","string","isRequired"],"sources":["../src/Hero.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\nimport \"../scss/hero.scss\";\n\nexport const Hero = (props) => {\n\tconst {\n\t\tactions,\n\t\tchildren,\n\t\tfooter,\n\t\theader,\n\t\tintro,\n\t\ttitle,\n\t\tclassName,\n\t\t...rest\n\t} = props;\n\treturn (\n\t\t<div className={classnames([\"hero\", className])} {...rest}>\n\t\t\t<div className=\"hero__container\">\n\t\t\t\t{header && header}\n\t\t\t\t<div className=\"hero__body\">\n\t\t\t\t\t<div className=\"hero__copy\">\n\t\t\t\t\t\t<h1 className=\"hero__title\">{title}</h1>\n\t\t\t\t\t\t{intro && <p className=\"hero__intro\">{intro}</p>}\n\t\t\t\t\t\t{actions && <div className=\"hero__actions\">{actions}</div>}\n\t\t\t\t\t</div>\n\t\t\t\t\t{children && <div className=\"hero__extra\">{children}</div>}\n\t\t\t\t</div>\n\t\t\t\t{footer && <div className=\"hero__footer\">{footer}</div>}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nHero.propTypes = {\n\tactions: PropTypes.node,\n\tchildren: PropTypes.node,\n\tclassName: PropTypes.string,\n\tfooter: PropTypes.node,\n\theader: PropTypes.node,\n\tintro: PropTypes.node,\n\ttitle: PropTypes.node.isRequired\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;AAEO,IAAMA,IAAI,GAAG,SAAPA,IAAO,CAACC,KAAD,EAAW;EAC9B,IACCC,OADD,GASID,KATJ,CACCC,OADD;EAAA,IAECC,QAFD,GASIF,KATJ,CAECE,QAFD;EAAA,IAGCC,MAHD,GASIH,KATJ,CAGCG,MAHD;EAAA,IAICC,MAJD,GASIJ,KATJ,CAICI,MAJD;EAAA,IAKCC,KALD,GASIL,KATJ,CAKCK,KALD;EAAA,IAMCC,KAND,GASIN,KATJ,CAMCM,KAND;EAAA,IAOCC,SAPD,GASIP,KATJ,CAOCO,SAPD;EAAA,IAQIC,IARJ,kDASIR,KATJ;EAUA,oBACC;IAAK,SAAS,EAAE,IAAAS,sBAAA,EAAW,CAAC,MAAD,EAASF,SAAT,CAAX;EAAhB,GAAqDC,IAArD;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,iBACC;IAAK,SAAS,EAAC,iBAAf;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GACEJ,MAAM,IAAIA,MADZ,eAEC;IAAK,SAAS,EAAC,YAAf;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,gBACC;IAAK,SAAS,EAAC,YAAf;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,gBACC;IAAI,SAAS,EAAC,aAAd;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAA6BE,KAA7B,CADD,EAEED,KAAK,iBAAI;IAAG,SAAS,EAAC,aAAb;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAA4BA,KAA5B,CAFX,EAGEJ,OAAO,iBAAI;IAAK,SAAS,EAAC,eAAf;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAAgCA,OAAhC,CAHb,CADD,EAMEC,QAAQ,iBAAI;IAAK,SAAS,EAAC,aAAf;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAA8BA,QAA9B,CANd,CAFD,EAUEC,MAAM,iBAAI;IAAK,SAAS,EAAC,cAAf;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAA+BA,MAA/B,CAVZ,CADD,CADD;AAgBA,CA3BM;;;AA6BPJ,IAAI,CAACW,SAAL,GAAiB;EAChBT,OAAO,EAAEU,qBAAA,CAAUC,IADH;EAEhBV,QAAQ,EAAES,qBAAA,CAAUC,IAFJ;EAGhBL,SAAS,EAAEI,qBAAA,CAAUE,MAHL;EAIhBV,MAAM,EAAEQ,qBAAA,CAAUC,IAJF;EAKhBR,MAAM,EAAEO,qBAAA,CAAUC,IALF;EAMhBP,KAAK,EAAEM,qBAAA,CAAUC,IAND;EAOhBN,KAAK,EAAEK,qBAAA,CAAUC,IAAV,CAAeE;AAPN,CAAjB"}

package/nds-hero.d.ts

@@ -1,16 +0,0 @@
-declare module "@nice-digital/nds-hero" {
-	import React = require("react");
-
-	export interface HeroProps {
-		[prop: string]: unknown;
-		actions?: React.ReactNode;
-		extra?: React.ReactNode;
-		footer?: React.ReactNode;
-		header?: React.ReactNode;
-		intro?: React.ReactNode;
-		title: React.ReactNode;
-		className?: string;
-	}
-
-	export const Hero: React.FC<HeroProps>;
-}