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

package/es/MaintainRatio.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "../scss/maintain-ratio.scss";
+export declare const ratios: {
+    "16:9": string;
+    "21:9": string;
+    "4:3": string;
+    square: string;
+    "1:1": string;
+};
+export interface MaintainRatioProps {
+    [prop: string]: unknown;
+    ratio?: keyof typeof ratios;
+    className?: string;
+    stretchFirstChild?: boolean;
+    children: React.ReactNode;
+}
+export declare const MaintainRatio: React.FC<MaintainRatioProps>;

package/es/MaintainRatio.js

@@ -1,46 +1,41 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["ratio", "className", "stretchFirstChild", "children"];
-import React from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import "../scss/maintain-ratio.scss";
-export var MaintainRatio = function MaintainRatio(props) {
-  var _classnames;
-
-  var ratio = props.ratio,
-      className = props.className,
-      stretchFirstChild = props.stretchFirstChild,
-      children = props.children,
-      attributes = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var classNames = classnames((_classnames = {
-    "maintain-ratio": true,
-    "maintain-ratio--16-9": ratio === "16:9",
-    "maintain-ratio--21-9": ratio === "21:9",
-    "maintain-ratio--4-3": ratio === "4:3",
-    "maintain-ratio--square": ratio === "square" || ratio === "1:1",
-    "maintain-ratio--stretch": stretchFirstChild
-  }, _classnames[className] = className && true, _classnames));
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames
-  }, attributes), children);
-};
-MaintainRatio.propTypes = {
-  ratio: PropTypes.oneOf(["16:9", "21:9", "4:3", "square", "1:1"]),
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  stretchFirstChild: PropTypes.bool
-};
-MaintainRatio.defaultProps = {
-  ratio: "16:9",
-  stretchFirstChild: false
-};
-MaintainRatio.ratios = {
-  "16:9": "16:9",
-  "21:9": "21:9",
-  "4:3": "4:3",
-  square: "square",
-  "1:1": "square"
-};
-//# sourceMappingURL=MaintainRatio.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.MaintainRatio = exports.ratios = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+require("../scss/maintain-ratio.scss");
+exports.ratios = {
+    "16:9": "16:9",
+    "21:9": "21:9",
+    "4:3": "4:3",
+    square: "square",
+    "1:1": "square"
+};
+const MaintainRatio = (props) => {
+    const { ratio = "16:9", stretchFirstChild = false, className, children } = props, attributes = __rest(props, ["ratio", "stretchFirstChild", "className", "children"]);
+    const classNames = (0, classnames_1.default)({
+        "maintain-ratio": true,
+        "maintain-ratio--16-9": ratio === "16:9",
+        "maintain-ratio--21-9": ratio === "21:9",
+        "maintain-ratio--4-3": ratio === "4:3",
+        "maintain-ratio--square": ratio === "square" || ratio === "1:1",
+        "maintain-ratio--stretch": stretchFirstChild,
+        [`${className}`]: className && true
+    });
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classNames }, attributes, { children: children })));
+};
+exports.MaintainRatio = MaintainRatio;

package/es/MaintainRatio.test.d.ts

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

package/es/MaintainRatio.test.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const MaintainRatio_1 = require("./MaintainRatio");
+describe("nds-maintain-ratio", () => {
+    it("should match the snapshot with no options", () => {
+        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(MaintainRatio_1.MaintainRatio, { children: (0, jsx_runtime_1.jsx)("p", { children: "Test" }) }));
+        expect(wrapper).toMatchSnapshot();
+    });
+    it("should pass down classname and extra props", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MaintainRatio_1.MaintainRatio, Object.assign({ className: "testing", "data-test": "yes" }, { children: (0, jsx_runtime_1.jsx)("p", { children: "Test" }) })));
+        const ratioDiv = container.querySelector(".testing");
+        expect(ratioDiv).toBeInTheDocument();
+        expect(ratioDiv === null || ratioDiv === void 0 ? void 0 : ratioDiv.getAttribute("data-test")).toBe("yes");
+    });
+    Object.keys(MaintainRatio_1.ratios).forEach((ratio) => {
+        it(`should apply the class for the ratio: ${ratio}`, () => {
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MaintainRatio_1.MaintainRatio, Object.assign({ ratio: ratio }, { children: (0, jsx_runtime_1.jsx)("p", { children: "Test" }) })));
+            if (ratio === "1:1") {
+                expect(container.querySelector(".maintain-ratio--square")).toBeInTheDocument();
+            }
+            else {
+                expect(container.querySelector(`.maintain-ratio--${ratio.replace(":", "-")}`)).toBeInTheDocument();
+            }
+        });
+    });
+});

package/package.json

@@ -1,20 +1,17 @@
 {
 	"name": "@nice-digital/nds-maintain-ratio",
-	"version": "3.0.2-alpha.0",
+	"version": "4.0.0-alpha.0",
 	"description": "Maintain ratio component for the NICE Design System",
 	"author": "Ian Routledge <ian.routledge@nice.org.uk>",
 	"homepage": "https://design-system.nice.org.uk/",
 	"license": "MIT",
-	"main": "lib/MaintainRatio.js",
-	"module": "es/MaintainRatio.js",
+	"main": "es/MaintainRatio.js",
 	"style": "scss/maintain-ratio.scss",
-	"types": "nds-maintain-ratio.d.ts",
 	"directories": {
-		"lib": "lib",
+		"lib": "es",
 		"test": "__tests__"
 	},
 	"files": [
-		"lib",
 		"es",
 		"scss",
 		"*.d.ts"
@@ -34,16 +31,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/MaintainRatio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MaintainRatio.js","names":["React","PropTypes","classnames","MaintainRatio","props","ratio","className","stretchFirstChild","children","attributes","classNames","propTypes","oneOf","string","node","isRequired","bool","defaultProps","ratios","square"],"sources":["../src/MaintainRatio.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\n\nimport \"../scss/maintain-ratio.scss\";\n\nexport const MaintainRatio = (props) => {\n\tconst { ratio, className, stretchFirstChild, children, ...attributes } =\n\t\tprops;\n\n\tconst classNames = classnames({\n\t\t\"maintain-ratio\": true,\n\t\t\"maintain-ratio--16-9\": ratio === \"16:9\",\n\t\t\"maintain-ratio--21-9\": ratio === \"21:9\",\n\t\t\"maintain-ratio--4-3\": ratio === \"4:3\",\n\t\t\"maintain-ratio--square\": ratio === \"square\" || ratio === \"1:1\",\n\t\t\"maintain-ratio--stretch\": stretchFirstChild,\n\t\t[className]: className && true\n\t});\n\n\treturn (\n\t\t<div className={classNames} {...attributes}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nMaintainRatio.propTypes = {\n\tratio: PropTypes.oneOf([\"16:9\", \"21:9\", \"4:3\", \"square\", \"1:1\"]),\n\tclassName: PropTypes.string,\n\tchildren: PropTypes.node.isRequired,\n\tstretchFirstChild: PropTypes.bool\n};\n\nMaintainRatio.defaultProps = {\n\tratio: \"16:9\",\n\tstretchFirstChild: false\n};\n\nMaintainRatio.ratios = {\n\t\"16:9\": \"16:9\",\n\t\"21:9\": \"21:9\",\n\t\"4:3\": \"4:3\",\n\tsquare: \"square\",\n\t\"1:1\": \"square\"\n};\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAO,6BAAP;AAEA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAW;EAAA;;EACvC,IAAQC,KAAR,GACCD,KADD,CAAQC,KAAR;EAAA,IAAeC,SAAf,GACCF,KADD,CAAeE,SAAf;EAAA,IAA0BC,iBAA1B,GACCH,KADD,CAA0BG,iBAA1B;EAAA,IAA6CC,QAA7C,GACCJ,KADD,CAA6CI,QAA7C;EAAA,IAA0DC,UAA1D,iCACCL,KADD;;EAGA,IAAMM,UAAU,GAAGR,UAAU;IAC5B,kBAAkB,IADU;IAE5B,wBAAwBG,KAAK,KAAK,MAFN;IAG5B,wBAAwBA,KAAK,KAAK,MAHN;IAI5B,uBAAuBA,KAAK,KAAK,KAJL;IAK5B,0BAA0BA,KAAK,KAAK,QAAV,IAAsBA,KAAK,KAAK,KAL9B;IAM5B,2BAA2BE;EANC,eAO3BD,SAP2B,IAOfA,SAAS,IAAI,IAPE,eAA7B;EAUA,oBACC;IAAK,SAAS,EAAEI;EAAhB,GAAgCD,UAAhC,GACED,QADF,CADD;AAKA,CAnBM;AAqBPL,aAAa,CAACQ,SAAd,GAA0B;EACzBN,KAAK,EAAEJ,SAAS,CAACW,KAAV,CAAgB,CAAC,MAAD,EAAS,MAAT,EAAiB,KAAjB,EAAwB,QAAxB,EAAkC,KAAlC,CAAhB,CADkB;EAEzBN,SAAS,EAAEL,SAAS,CAACY,MAFI;EAGzBL,QAAQ,EAAEP,SAAS,CAACa,IAAV,CAAeC,UAHA;EAIzBR,iBAAiB,EAAEN,SAAS,CAACe;AAJJ,CAA1B;AAOAb,aAAa,CAACc,YAAd,GAA6B;EAC5BZ,KAAK,EAAE,MADqB;EAE5BE,iBAAiB,EAAE;AAFS,CAA7B;AAKAJ,aAAa,CAACe,MAAd,GAAuB;EACtB,QAAQ,MADc;EAEtB,QAAQ,MAFc;EAGtB,OAAO,KAHe;EAItBC,MAAM,EAAE,QAJc;EAKtB,OAAO;AALe,CAAvB"}

package/lib/MaintainRatio.js

@@ -1,71 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.MaintainRatio = 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 _classnames2 = _interopRequireDefault(require("classnames"));
-
-require("../scss/maintain-ratio.scss");
-
-var _excluded = ["ratio", "className", "stretchFirstChild", "children"];
-
-var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-maintain-ratio\\src\\MaintainRatio.js",
-    _this = void 0;
-
-var MaintainRatio = function MaintainRatio(props) {
-  var _classnames;
-
-  var ratio = props.ratio,
-      className = props.className,
-      stretchFirstChild = props.stretchFirstChild,
-      children = props.children,
-      attributes = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
-  var classNames = (0, _classnames2["default"])((_classnames = {
-    "maintain-ratio": true,
-    "maintain-ratio--16-9": ratio === "16:9",
-    "maintain-ratio--21-9": ratio === "21:9",
-    "maintain-ratio--4-3": ratio === "4:3",
-    "maintain-ratio--square": ratio === "square" || ratio === "1:1",
-    "maintain-ratio--stretch": stretchFirstChild
-  }, _classnames[className] = className && true, _classnames));
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: classNames
-  }, attributes, {
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 22,
-      columnNumber: 3
-    }
-  }), children);
-};
-
-exports.MaintainRatio = MaintainRatio;
-MaintainRatio.propTypes = {
-  ratio: _propTypes["default"].oneOf(["16:9", "21:9", "4:3", "square", "1:1"]),
-  className: _propTypes["default"].string,
-  children: _propTypes["default"].node.isRequired,
-  stretchFirstChild: _propTypes["default"].bool
-};
-MaintainRatio.defaultProps = {
-  ratio: "16:9",
-  stretchFirstChild: false
-};
-MaintainRatio.ratios = {
-  "16:9": "16:9",
-  "21:9": "21:9",
-  "4:3": "4:3",
-  square: "square",
-  "1:1": "square"
-};
-//# sourceMappingURL=MaintainRatio.js.map

package/lib/MaintainRatio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MaintainRatio.js","names":["MaintainRatio","props","ratio","className","stretchFirstChild","children","attributes","classNames","classnames","propTypes","PropTypes","oneOf","string","node","isRequired","bool","defaultProps","ratios","square"],"sources":["../src/MaintainRatio.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\n\nimport \"../scss/maintain-ratio.scss\";\n\nexport const MaintainRatio = (props) => {\n\tconst { ratio, className, stretchFirstChild, children, ...attributes } =\n\t\tprops;\n\n\tconst classNames = classnames({\n\t\t\"maintain-ratio\": true,\n\t\t\"maintain-ratio--16-9\": ratio === \"16:9\",\n\t\t\"maintain-ratio--21-9\": ratio === \"21:9\",\n\t\t\"maintain-ratio--4-3\": ratio === \"4:3\",\n\t\t\"maintain-ratio--square\": ratio === \"square\" || ratio === \"1:1\",\n\t\t\"maintain-ratio--stretch\": stretchFirstChild,\n\t\t[className]: className && true\n\t});\n\n\treturn (\n\t\t<div className={classNames} {...attributes}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nMaintainRatio.propTypes = {\n\tratio: PropTypes.oneOf([\"16:9\", \"21:9\", \"4:3\", \"square\", \"1:1\"]),\n\tclassName: PropTypes.string,\n\tchildren: PropTypes.node.isRequired,\n\tstretchFirstChild: PropTypes.bool\n};\n\nMaintainRatio.defaultProps = {\n\tratio: \"16:9\",\n\tstretchFirstChild: false\n};\n\nMaintainRatio.ratios = {\n\t\"16:9\": \"16:9\",\n\t\"21:9\": \"21:9\",\n\t\"4:3\": \"4:3\",\n\tsquare: \"square\",\n\t\"1:1\": \"square\"\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAW;EAAA;;EACvC,IAAQC,KAAR,GACCD,KADD,CAAQC,KAAR;EAAA,IAAeC,SAAf,GACCF,KADD,CAAeE,SAAf;EAAA,IAA0BC,iBAA1B,GACCH,KADD,CAA0BG,iBAA1B;EAAA,IAA6CC,QAA7C,GACCJ,KADD,CAA6CI,QAA7C;EAAA,IAA0DC,UAA1D,kDACCL,KADD;EAGA,IAAMM,UAAU,GAAG,IAAAC,uBAAA;IAClB,kBAAkB,IADA;IAElB,wBAAwBN,KAAK,KAAK,MAFhB;IAGlB,wBAAwBA,KAAK,KAAK,MAHhB;IAIlB,uBAAuBA,KAAK,KAAK,KAJf;IAKlB,0BAA0BA,KAAK,KAAK,QAAV,IAAsBA,KAAK,KAAK,KALxC;IAMlB,2BAA2BE;EANT,eAOjBD,SAPiB,IAOLA,SAAS,IAAI,IAPR,eAAnB;EAUA,oBACC;IAAK,SAAS,EAAEI;EAAhB,GAAgCD,UAAhC;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,IACED,QADF,CADD;AAKA,CAnBM;;;AAqBPL,aAAa,CAACS,SAAd,GAA0B;EACzBP,KAAK,EAAEQ,qBAAA,CAAUC,KAAV,CAAgB,CAAC,MAAD,EAAS,MAAT,EAAiB,KAAjB,EAAwB,QAAxB,EAAkC,KAAlC,CAAhB,CADkB;EAEzBR,SAAS,EAAEO,qBAAA,CAAUE,MAFI;EAGzBP,QAAQ,EAAEK,qBAAA,CAAUG,IAAV,CAAeC,UAHA;EAIzBV,iBAAiB,EAAEM,qBAAA,CAAUK;AAJJ,CAA1B;AAOAf,aAAa,CAACgB,YAAd,GAA6B;EAC5Bd,KAAK,EAAE,MADqB;EAE5BE,iBAAiB,EAAE;AAFS,CAA7B;AAKAJ,aAAa,CAACiB,MAAd,GAAuB;EACtB,QAAQ,MADc;EAEtB,QAAQ,MAFc;EAGtB,OAAO,KAHe;EAItBC,MAAM,EAAE,QAJc;EAKtB,OAAO;AALe,CAAvB"}

package/nds-maintain-ratio.d.ts

@@ -1,13 +0,0 @@
-declare module "@nice-digital/nds-maintain-ratio" {
-	import React = require("react");
-
-	export interface MaintainRatioProps {
-		[prop: string]: unknown;
-		ratio?: "16:9" | "21:9" | "4:3" | "square" | "1:1";
-		className?: string;
-		stretchFirstChild?: boolean;
-		children: React.ReactNode;
-	}
-
-	export const MaintainRatio: React.FC<MaintainRatioProps>;
-}