@nice-digital/nds-grid 4.0.3-alpha.0 → 4.0.4

package/es/GridItem.js

@@ -43,6 +43,6 @@ const GridItem = (props) => {
         .concat(bpGridDefKeys)
         .filter((col) => col)
         .join(" ");
-    return ((0, jsx_runtime_1.jsx)(GridItemElementType, Object.assign({ "data-g": gridColsAttr, className: className }, rest, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(GridItemElementType, Object.assign({ "data-g": gridColsAttr, "data-component": "grid-item", className: className }, rest, { children: children })));
 };
 exports.GridItem = GridItem;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-grid",
-	"version": "4.0.3-alpha.0",
+	"version": "4.0.4",
 	"description": "Grid component for the NICE Design System",
 	"keywords": [
 		"grid"
@@ -33,13 +33,13 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/nds-core": "^4.0.2-alpha.0",
+		"@nice-digital/nds-core": "^4.0.3",
 		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
 		"react": "^16 || ^17 || ^18"
 	},
-	"gitHead": "0a6b742ccd11300f0586abf5dc3790e217f70c21",
+	"gitHead": "ae51389ba2e51dbe9ee3849e71d44fd567fb2822",
 	"devDependencies": {
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^13.4.0",

package/es/Grid.test.d.ts

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

package/es/Grid.test.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@testing-library/react");
-const Grid_1 = require("./Grid");
-describe("Grid", () => {
-    it("should match snapshot", () => {
-        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsxs)(Grid_1.Grid, { children: [(0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })), (0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" }))] }));
-        expect(wrapper).toMatchSnapshot();
-    });
-    it("should add rev class name to grid with reverse prop", () => {
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ reverse: true }, { children: (0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })) })));
-        expect(container.querySelector(".grid")).toHaveClass("grid grid--rev");
-    });
-    describe("gutters", () => {
-        const gutterTest = (gutter, expectedClassName) => {
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ gutter: gutter }, { children: (0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })) })));
-            expect(container.querySelector(".grid")).toHaveClass(expectedClassName);
-        };
-        it("shouldn't add any class to grid with gutter prop as standard", () => {
-            gutterTest(Grid_1.GutterEnum.standard, "grid");
-        });
-        it("should add gutterless class to grid with gutter prop as none", () => {
-            gutterTest(Grid_1.GutterEnum.none, "grid grid--gutterless");
-        });
-        it("should add compact class to grid with gutter prop as compact", () => {
-            gutterTest(Grid_1.GutterEnum.compact, "grid grid--compact");
-        });
-        it("should add compact class to grid with gutter prop as compact", () => {
-            gutterTest(Grid_1.GutterEnum.loose, "grid grid--loose");
-        });
-    });
-    describe("horizontal alignment", () => {
-        const horizontalAlignmentTest = (hAlignment, expectedClassName) => {
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ horizontalAlignment: hAlignment }, { children: (0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })) })));
-            expect(container.querySelector(".grid")).toHaveClass(expectedClassName);
-        };
-        it("shouldn't add any class to grid with horizontalAlignment prop as left", () => {
-            horizontalAlignmentTest(Grid_1.HorizontalAlignmentEnum.left, "grid");
-        });
-        it("should add center modifier class to grid when horizontalAlignment prop set to center", () => {
-            horizontalAlignmentTest(Grid_1.HorizontalAlignmentEnum.center, "grid grid--center");
-        });
-        it("should add right modifier class to grid when horizontalAlignment prop set to right", () => {
-            horizontalAlignmentTest(Grid_1.HorizontalAlignmentEnum.right, "grid grid--right");
-        });
-    });
-    describe("vertical alignment", () => {
-        const verticalAlignmentTest = (vAlignment, expectedClassName) => {
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ verticalAlignment: vAlignment }, { children: (0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })) })));
-            expect(container.querySelector(".grid")).toHaveClass(expectedClassName);
-        };
-        it("shouldn't add any class to grid with vertical alignment prop as top", () => {
-            verticalAlignmentTest(Grid_1.VerticalAlignmentEnum.top, "grid");
-        });
-        it("should add middle modifier class to grid when verticalAlignment prop set to middle", () => {
-            verticalAlignmentTest(Grid_1.VerticalAlignmentEnum.middle, "grid grid--middle");
-        });
-        it("should add bottom modifier class to grid when verticalAlignment prop set to bottom", () => {
-            verticalAlignmentTest(Grid_1.VerticalAlignmentEnum.bottom, "grid grid--bottom");
-        });
-    });
-    it("should add a debug modifier class when debug prop set to true", () => {
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ debug: true }, { children: (0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })) })));
-        expect(container.querySelector(".grid")).toHaveClass("grid grid--debug");
-    });
-    it("should add given additional class names to rendered grid class names", () => {
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ className: "mt--d" }, { children: (0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })) })));
-        expect(container.querySelector(".grid")).toHaveClass("grid mt--d");
-    });
-    it("should use elementType prop as rendered DOM node type", () => {
-        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.Grid, Object.assign({ elementType: "ul" }, { children: (0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })) })));
-        expect(wrapper.getByRole("list")).toBeInTheDocument();
-    });
-});

package/es/GridItem.test.d.ts

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

package/es/GridItem.test.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@testing-library/react");
-const Grid_1 = require("../src/Grid");
-describe("GridItem", () => {
-    it("should match snapshot", () => {
-        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6 }, { children: "Test" })));
-        expect(wrapper).toMatchSnapshot();
-    });
-    it("should add push columns to data attribute", () => {
-        var _a;
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6, push: 2 }, { children: "Test" })));
-        expect((_a = container.querySelector("div")) === null || _a === void 0 ? void 0 : _a.getAttribute("data-g")).toBe("6 push:2");
-    });
-    it("should add pull columns to data attribute", () => {
-        var _a;
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6, pull: 2 }, { children: "Test" })));
-        expect((_a = container.querySelector("div")) === null || _a === void 0 ? void 0 : _a.getAttribute("data-g")).toBe("6 pull:2");
-    });
-    describe("breakpoints", () => {
-        const pushDef = { cols: 4, push: 2, toString: () => "push 2" };
-        const pullDef = { cols: 3, pull: 1, toString: () => "pull 1" };
-        it.each([
-            ["xs", 8, "xs:8"],
-            ["xs", pushDef, "xs:4 xs:push:2"],
-            ["xs", pullDef, "xs:3 xs:pull:1"],
-            ["sm", 8, "sm:8"],
-            ["sm", pushDef, "sm:4 sm:push:2"],
-            ["sm", pullDef, "sm:3 sm:pull:1"],
-            ["md", 8, "md:8"],
-            ["md", pushDef, "md:4 md:push:2"],
-            ["md", pullDef, "md:3 md:pull:1"],
-            ["lg", 8, "lg:8"],
-            ["lg", pushDef, "lg:4 lg:push:2"],
-            ["lg", pullDef, "lg:3 lg:pull:1"],
-            ["xl", 8, "xl:8"],
-            ["xl", pushDef, "xl:4 xl:push:2"],
-            ["xl", pullDef, "xl:3 xl:pull:1"]
-        ])("for breakpoint '%s' and grid definition '%s' should set data-g to '%s'", (breakpointName, breakpointGridDef, expected) => {
-            var _a;
-            const cols = 6;
-            const breakPointProps = {
-                [breakpointName]: breakpointGridDef
-            };
-            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: cols }, breakPointProps, { children: "Test" })));
-            expect((_a = container.querySelector("div")) === null || _a === void 0 ? void 0 : _a.getAttribute("data-g")).toBe(cols + " " + expected);
-        });
-    });
-    it("should add given additional class names to rendered grid item class names", () => {
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6, className: "mt--d" }, { children: "Test" })));
-        expect(container.querySelector("[data-g]")).toHaveClass("mt--d");
-    });
-    it("should add other props to rendered grid item", () => {
-        var _a;
-        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6, "aria-label": "test" }, { children: "Test" })));
-        expect((_a = container.querySelector("[data-g]")) === null || _a === void 0 ? void 0 : _a.getAttribute("aria-label")).toBe("test");
-    });
-    it("should use elementType prop as rendered DOM node type", () => {
-        const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(Grid_1.GridItem, Object.assign({ cols: 6, elementType: "li" }, { children: "Test" })));
-        expect(wrapper.getByRole("listitem")).toBeInTheDocument();
-    });
-});