@nice-digital/nds-container 3.0.2 → 4.0.1-alpha.0

package/es/Container.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "../scss/container.scss";
+export interface ContainerProps {
+    /** Allow any additional props to be passed and applied to the container */
+    [prop: string]: unknown;
+    /** Contents for the container element */
+    children: React.ReactNode;
+    /** Additional classes to add to the container */
+    className?: string;
+    /** Allow the container to defy the max-width and extend to the edges of the viewport */
+    fullWidth?: boolean;
+    /** The type of DOM node to render for the container item. Leave blank to default to div. */
+    elementType?: React.ElementType;
+}
+export declare const Container: React.FC<ContainerProps>;

package/es/Container.js

@@ -1,27 +1,30 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "className", "elementType", "fullWidth"];
-import React from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import "../scss/container.scss";
-export var Container = function Container(props) {
-  var children = props.children,
-      className = props.className,
-      _props$elementType = props.elementType,
-      ElementType = _props$elementType === void 0 ? "div" : _props$elementType,
-      fullWidth = props.fullWidth,
-      rest = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var classes = classnames(["container", fullWidth && "container--full", className]);
-  return /*#__PURE__*/React.createElement(ElementType, _extends({
-    className: classes
-  }, rest), children);
-};
-Container.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  className: PropTypes.string,
-  elementType: PropTypes.elementType,
-  fullWidth: PropTypes.bool
-};
-//# sourceMappingURL=Container.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.Container = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+require("../scss/container.scss");
+const Container = (props) => {
+    const { children, className, elementType: ElementType = "div", fullWidth } = props, rest = __rest(props, ["children", "className", "elementType", "fullWidth"]);
+    const classes = (0, classnames_1.default)([
+        "container",
+        fullWidth && "container--full",
+        className
+    ]);
+    return ((0, jsx_runtime_1.jsx)(ElementType, Object.assign({ className: classes }, rest, { children: children })));
+};
+exports.Container = Container;

package/es/Container.test.d.ts

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

package/es/Container.test.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const Container_1 = require("./Container");
+const Content = () => (0, jsx_runtime_1.jsx)("p", { children: "Test" });
+describe("Container", () => {
+    it("should match snapshot", () => {
+        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(Container_1.Container, { children: (0, jsx_runtime_1.jsx)(Content, {}) }));
+        expect(wrapper).toMatchSnapshot();
+    });
+    it("should add additional classNames", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Container_1.Container, Object.assign({ className: "testclass" }, { children: (0, jsx_runtime_1.jsx)(Content, {}) })));
+        expect(container.querySelector(".container")).toHaveClass("testclass");
+    });
+    it("should add full width class if bool supplied", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Container_1.Container, Object.assign({ fullWidth: true }, { children: (0, jsx_runtime_1.jsx)(Content, {}) })));
+        expect(container.querySelector(".container")).toHaveClass("container--full");
+    });
+    it("should use elementType prop as rendered DOM node type", () => {
+        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(Container_1.Container, Object.assign({ elementType: "main" }, { children: (0, jsx_runtime_1.jsx)(Content, {}) })));
+        expect(wrapper.getByRole("main")).toHaveClass("container");
+    });
+    it("should spread other props against the container", () => {
+        var _a;
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Container_1.Container, Object.assign({ "data-track": "trackme" }, { children: (0, jsx_runtime_1.jsx)(Content, {}) })));
+        expect((_a = container.querySelector(".container")) === null || _a === void 0 ? void 0 : _a.getAttribute("data-track")).toBe("trackme");
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-container",
-	"version": "3.0.2",
+	"version": "4.0.1-alpha.0",
 	"description": "Container component for the NICE Design System",
 	"keywords": [
 		"container"
@@ -8,16 +8,12 @@
 	"author": "Warren Keith <warren.keith@nice.org.uk>",
 	"homepage": "https://design-system.nice.org.uk/",
 	"license": "MIT",
-	"main": "lib/Container.js",
-	"module": "es/Container.js",
+	"main": "es/Container.js",
 	"style": "scss/container.scss",
-	"types": "nds-container.d.ts",
 	"directories": {
-		"lib": "lib",
 		"test": "__tests__"
 	},
 	"files": [
-		"lib",
 		"es",
 		"scss",
 		"*.d.ts"
@@ -37,12 +33,19 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/nds-core": "^3.0.2",
-		"classnames": "^2.2.6",
-		"prop-types": "^15.7.2"
+		"@nice-digital/nds-core": "^4.0.1-alpha.0",
+		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
 		"react": "^16 || ^17 || ^18"
 	},
-	"gitHead": "88329347c4985509b2347ecc27daec0a33aef607"
+	"gitHead": "e75957040c9acfbd7eeb164cad724e3b48760679",
+	"devDependencies": {
+		"@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"
+	}
 }

package/es/Container.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Container.js","names":["React","PropTypes","classnames","Container","props","children","className","elementType","ElementType","fullWidth","rest","classes","propTypes","oneOfType","arrayOf","node","isRequired","string","bool"],"sources":["../src/Container.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\nimport \"../scss/container.scss\";\n\nexport const Container = (props) => {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\telementType: ElementType = \"div\",\n\t\tfullWidth,\n\t\t...rest\n\t} = props;\n\n\tconst classes = classnames([\n\t\t\"container\",\n\t\tfullWidth && \"container--full\",\n\t\tclassName\n\t]);\n\n\treturn (\n\t\t<ElementType className={classes} {...rest}>\n\t\t\t{children}\n\t\t</ElementType>\n\t);\n};\n\nContainer.propTypes = {\n\tchildren: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tclassName: PropTypes.string,\n\telementType: PropTypes.elementType,\n\tfullWidth: PropTypes.bool\n};\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAO,wBAAP;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAAW;EACnC,IACCC,QADD,GAMID,KANJ,CACCC,QADD;EAAA,IAECC,SAFD,GAMIF,KANJ,CAECE,SAFD;EAAA,yBAMIF,KANJ,CAGCG,WAHD;EAAA,IAGcC,WAHd,mCAG4B,KAH5B;EAAA,IAICC,SAJD,GAMIL,KANJ,CAICK,SAJD;EAAA,IAKIC,IALJ,iCAMIN,KANJ;;EAQA,IAAMO,OAAO,GAAGT,UAAU,CAAC,CAC1B,WAD0B,EAE1BO,SAAS,IAAI,iBAFa,EAG1BH,SAH0B,CAAD,CAA1B;EAMA,oBACC,oBAAC,WAAD;IAAa,SAAS,EAAEK;EAAxB,GAAqCD,IAArC,GACEL,QADF,CADD;AAKA,CApBM;AAsBPF,SAAS,CAACS,SAAV,GAAsB;EACrBP,QAAQ,EAAEJ,SAAS,CAACY,SAAV,CAAoB,CAC7BZ,SAAS,CAACa,OAAV,CAAkBb,SAAS,CAACc,IAA5B,CAD6B,EAE7Bd,SAAS,CAACc,IAFmB,CAApB,EAGPC,UAJkB;EAKrBV,SAAS,EAAEL,SAAS,CAACgB,MALA;EAMrBV,WAAW,EAAEN,SAAS,CAACM,WANF;EAOrBE,SAAS,EAAER,SAAS,CAACiB;AAPA,CAAtB"}

package/lib/Container.js

@@ -1,52 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.Container = 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/container.scss");
-
-var _excluded = ["children", "className", "elementType", "fullWidth"];
-
-var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-container\\src\\Container.js",
-    _this = void 0;
-
-var Container = function Container(props) {
-  var children = props.children,
-      className = props.className,
-      _props$elementType = props.elementType,
-      ElementType = _props$elementType === void 0 ? "div" : _props$elementType,
-      fullWidth = props.fullWidth,
-      rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
-  var classes = (0, _classnames["default"])(["container", fullWidth && "container--full", className]);
-  return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
-    className: classes
-  }, rest, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 22,
-      columnNumber: 3
-    }
-  }), children);
-};
-
-exports.Container = Container;
-Container.propTypes = {
-  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
-  className: _propTypes["default"].string,
-  elementType: _propTypes["default"].elementType,
-  fullWidth: _propTypes["default"].bool
-};
-//# sourceMappingURL=Container.js.map

package/lib/Container.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Container.js","names":["Container","props","children","className","elementType","ElementType","fullWidth","rest","classes","classnames","propTypes","PropTypes","oneOfType","arrayOf","node","isRequired","string","bool"],"sources":["../src/Container.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\nimport \"../scss/container.scss\";\n\nexport const Container = (props) => {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\telementType: ElementType = \"div\",\n\t\tfullWidth,\n\t\t...rest\n\t} = props;\n\n\tconst classes = classnames([\n\t\t\"container\",\n\t\tfullWidth && \"container--full\",\n\t\tclassName\n\t]);\n\n\treturn (\n\t\t<ElementType className={classes} {...rest}>\n\t\t\t{children}\n\t\t</ElementType>\n\t);\n};\n\nContainer.propTypes = {\n\tchildren: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tclassName: PropTypes.string,\n\telementType: PropTypes.elementType,\n\tfullWidth: PropTypes.bool\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,KAAD,EAAW;EACnC,IACCC,QADD,GAMID,KANJ,CACCC,QADD;EAAA,IAECC,SAFD,GAMIF,KANJ,CAECE,SAFD;EAAA,yBAMIF,KANJ,CAGCG,WAHD;EAAA,IAGcC,WAHd,mCAG4B,KAH5B;EAAA,IAICC,SAJD,GAMIL,KANJ,CAICK,SAJD;EAAA,IAKIC,IALJ,kDAMIN,KANJ;EAQA,IAAMO,OAAO,GAAG,IAAAC,sBAAA,EAAW,CAC1B,WAD0B,EAE1BH,SAAS,IAAI,iBAFa,EAG1BH,SAH0B,CAAX,CAAhB;EAMA,oBACC,gCAAC,WAAD;IAAa,SAAS,EAAEK;EAAxB,GAAqCD,IAArC;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,IACEL,QADF,CADD;AAKA,CApBM;;;AAsBPF,SAAS,CAACU,SAAV,GAAsB;EACrBR,QAAQ,EAAES,qBAAA,CAAUC,SAAV,CAAoB,CAC7BD,qBAAA,CAAUE,OAAV,CAAkBF,qBAAA,CAAUG,IAA5B,CAD6B,EAE7BH,qBAAA,CAAUG,IAFmB,CAApB,EAGPC,UAJkB;EAKrBZ,SAAS,EAAEQ,qBAAA,CAAUK,MALA;EAMrBZ,WAAW,EAAEO,qBAAA,CAAUP,WANF;EAOrBE,SAAS,EAAEK,qBAAA,CAAUM;AAPA,CAAtB"}

package/nds-container.d.ts

@@ -1,19 +0,0 @@
-declare module "@nice-digital/nds-container" {
-	import React = require("react");
-
-	export interface ContainerProps {
-		/** Allow any additional props to be passed and applied to the container */
-		[prop: string]: unknown;
-		/** Contents for the container element */
-		children: React.ReactNode;
-		/** Additional classes to add to the container */
-		className?: string;
-		/** Allow the container to defy the max-width and extend to the edges of the viewport */
-		fullWidth?: boolean;
-		/** The type of DOM node to render for the container item. Leave blank to default to div. */
-		elementType?: React.ElementType;
-	}
-
-	/** A wrapper to house child grids */
-	export const Container: React.FC<ContainerProps>;
-}