@nice-digital/nds-column-list 4.0.1-alpha.0 → 4.0.2
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/ColumnList.js
CHANGED
|
@@ -23,6 +23,6 @@ const ColumnList = (props) => {
|
|
|
23
23
|
className
|
|
24
24
|
]
|
|
25
25
|
.filter(Boolean)
|
|
26
|
-
.join(" ") }, attrs, { children: children })));
|
|
26
|
+
.join(" "), "data-component": `column-list${plain ? "--plain" : "--boxed"}` }, attrs, { children: children })));
|
|
27
27
|
};
|
|
28
28
|
exports.ColumnList = ColumnList;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColumnList.js","names":["React","PropTypes","ColumnList","props","children","plain","className","columns","attrs","filter","Boolean","join","propTypes","node","isRequired","bool","string","number"],"sources":["../src/ColumnList.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport \"../scss/column-list.scss\";\n\nexport const ColumnList = (props) => {\n\tconst { children, plain, className, columns, ...attrs } = props;\n\n\treturn (\n\t\t<ol\n\t\t\tclassName={[\n\t\t\t\t\"column-list\",\n\t\t\t\tplain ? \"column-list--plain\" : \"column-list--boxed\",\n\t\t\t\tcolumns === 2 ? \"column-list--two-columns\" : \"\",\n\t\t\t\tclassName\n\t\t\t]\n\t\t\t\t.filter(Boolean)\n\t\t\t\t.join(\" \")}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t{children}\n\t\t</ol>\n\t);\n};\n\nColumnList.propTypes = {\n\tchildren: PropTypes.node.isRequired,\n\tplain: PropTypes.bool,\n\tclassName: PropTypes.string,\n\tcolumns: PropTypes.number\n};\n"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAO,0BAAP;AAEA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAW;EACpC,IAAQC,QAAR,GAA0DD,KAA1D,CAAQC,QAAR;EAAA,IAAkBC,KAAlB,GAA0DF,KAA1D,CAAkBE,KAAlB;EAAA,IAAyBC,SAAzB,GAA0DH,KAA1D,CAAyBG,SAAzB;EAAA,IAAoCC,OAApC,GAA0DJ,KAA1D,CAAoCI,OAApC;EAAA,IAAgDC,KAAhD,iCAA0DL,KAA1D;;EAEA,oBACC;IACC,SAAS,EAAE,CACV,aADU,EAEVE,KAAK,GAAG,oBAAH,GAA0B,oBAFrB,EAGVE,OAAO,KAAK,CAAZ,GAAgB,0BAAhB,GAA6C,EAHnC,EAIVD,SAJU,EAMTG,MANS,CAMFC,OANE,EAOTC,IAPS,CAOJ,GAPI;EADZ,GASKH,KATL,GAWEJ,QAXF,CADD;AAeA,CAlBM;AAoBPF,UAAU,CAACU,SAAX,GAAuB;EACtBR,QAAQ,EAAEH,SAAS,CAACY,IAAV,CAAeC,UADH;EAEtBT,KAAK,EAAEJ,SAAS,CAACc,IAFK;EAGtBT,SAAS,EAAEL,SAAS,CAACe,MAHC;EAItBT,OAAO,EAAEN,SAAS,CAACgB;AAJG,CAAvB"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { shallow } from "enzyme";
|
|
5
|
+
import { ColumnList } from "../ColumnList";
|
|
6
|
+
|
|
7
|
+
var ListItems = function ListItems() {
|
|
8
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", null, "One"), /*#__PURE__*/React.createElement("li", null, "Two"), /*#__PURE__*/React.createElement("li", null, "Three"), /*#__PURE__*/React.createElement("li", null, "Four"), /*#__PURE__*/React.createElement("li", null, "Five"), /*#__PURE__*/React.createElement("li", null, "Six"));
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
describe("ColumnList", function () {
|
|
12
|
+
it("should render without crashing", function () {
|
|
13
|
+
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, null, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
14
|
+
expect(wrapper).toHaveLength(1);
|
|
15
|
+
});
|
|
16
|
+
it("should add CSS module class name to parent list for standard (boxed) variant", function () {
|
|
17
|
+
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, null, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
18
|
+
expect(wrapper.hasClass("column-list--boxed")).toEqual(true);
|
|
19
|
+
});
|
|
20
|
+
it("should add CSS module class name to parent list for the plain variant", function () {
|
|
21
|
+
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
|
|
22
|
+
plain: true
|
|
23
|
+
}, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
24
|
+
expect(wrapper.hasClass("column-list--plain")).toEqual(true);
|
|
25
|
+
});
|
|
26
|
+
it("should add CSS module class name to parent list for the 2 column variant", function () {
|
|
27
|
+
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
|
|
28
|
+
columns: 2
|
|
29
|
+
}, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
30
|
+
expect(wrapper.hasClass("column-list--two-columns")).toEqual(true);
|
|
31
|
+
});
|
|
32
|
+
it("should add no CSS module class name to parent list for the 3 column variant", function () {
|
|
33
|
+
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
|
|
34
|
+
columns: 3
|
|
35
|
+
}, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
36
|
+
expect(wrapper.hasClass("column-list--two-columns")).toEqual(false);
|
|
37
|
+
});
|
|
38
|
+
it("should append className prop to rendered class attribute", function () {
|
|
39
|
+
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
|
|
40
|
+
className: "test"
|
|
41
|
+
}, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
42
|
+
expect(wrapper.hasClass("test")).toEqual(true);
|
|
43
|
+
});
|
|
44
|
+
it("should render additional props as attributes", function () {
|
|
45
|
+
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
|
|
46
|
+
"aria-label": "hello"
|
|
47
|
+
}, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
48
|
+
expect(wrapper.prop("aria-label")).toEqual("hello");
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
//# sourceMappingURL=nds-column-list.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nds-column-list.test.js","names":["React","shallow","ColumnList","ListItems","describe","it","wrapper","expect","toHaveLength","hasClass","toEqual","prop"],"sources":["../../src/__tests__/nds-column-list.test.js"],"sourcesContent":["\"use strict\";\n\nimport React from \"react\";\nimport { shallow } from \"enzyme\";\nimport { ColumnList } from \"../ColumnList\";\n\nconst ListItems = () => (\n\t<>\n\t\t<li>One</li>\n\t\t<li>Two</li>\n\t\t<li>Three</li>\n\t\t<li>Four</li>\n\t\t<li>Five</li>\n\t\t<li>Six</li>\n\t</>\n);\n\ndescribe(\"ColumnList\", () => {\n\tit(\"should render without crashing\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<ColumnList>\n\t\t\t\t<ListItems />\n\t\t\t</ColumnList>\n\t\t);\n\t\texpect(wrapper).toHaveLength(1);\n\t});\n\tit(\"should add CSS module class name to parent list for standard (boxed) variant\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<ColumnList>\n\t\t\t\t<ListItems />\n\t\t\t</ColumnList>\n\t\t);\n\t\texpect(wrapper.hasClass(\"column-list--boxed\")).toEqual(true);\n\t});\n\tit(\"should add CSS module class name to parent list for the plain variant\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<ColumnList plain>\n\t\t\t\t<ListItems />\n\t\t\t</ColumnList>\n\t\t);\n\t\texpect(wrapper.hasClass(\"column-list--plain\")).toEqual(true);\n\t});\n\tit(\"should add CSS module class name to parent list for the 2 column variant\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<ColumnList columns={2}>\n\t\t\t\t<ListItems />\n\t\t\t</ColumnList>\n\t\t);\n\t\texpect(wrapper.hasClass(\"column-list--two-columns\")).toEqual(true);\n\t});\n\tit(\"should add no CSS module class name to parent list for the 3 column variant\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<ColumnList columns={3}>\n\t\t\t\t<ListItems />\n\t\t\t</ColumnList>\n\t\t);\n\t\texpect(wrapper.hasClass(\"column-list--two-columns\")).toEqual(false);\n\t});\n\tit(\"should append className prop to rendered class attribute\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<ColumnList className=\"test\">\n\t\t\t\t<ListItems />\n\t\t\t</ColumnList>\n\t\t);\n\t\texpect(wrapper.hasClass(\"test\")).toEqual(true);\n\t});\n\tit(\"should render additional props as attributes\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<ColumnList aria-label=\"hello\">\n\t\t\t\t<ListItems />\n\t\t\t</ColumnList>\n\t\t);\n\t\texpect(wrapper.prop(\"aria-label\")).toEqual(\"hello\");\n\t});\n});\n"],"mappings":"AAAA;;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,UAAT,QAA2B,eAA3B;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY;EAAA,oBACjB,uDACC,sCADD,eAEC,sCAFD,eAGC,wCAHD,eAIC,uCAJD,eAKC,uCALD,eAMC,sCAND,CADiB;AAAA,CAAlB;;AAWAC,QAAQ,CAAC,YAAD,EAAe,YAAM;EAC5BC,EAAE,CAAC,gCAAD,EAAmC,YAAM;IAC1C,IAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD,qBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;IAKAM,MAAM,CAACD,OAAD,CAAN,CAAgBE,YAAhB,CAA6B,CAA7B;EACA,CAPC,CAAF;EAQAH,EAAE,CAAC,8EAAD,EAAiF,YAAM;IACxF,IAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD,qBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;IAKAM,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,oBAAjB,CAAD,CAAN,CAA+CC,OAA/C,CAAuD,IAAvD;EACA,CAPC,CAAF;EAQAL,EAAE,CAAC,uEAAD,EAA0E,YAAM;IACjF,IAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;MAAY,KAAK;IAAjB,gBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;IAKAM,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,oBAAjB,CAAD,CAAN,CAA+CC,OAA/C,CAAuD,IAAvD;EACA,CAPC,CAAF;EAQAL,EAAE,CAAC,0EAAD,EAA6E,YAAM;IACpF,IAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;MAAY,OAAO,EAAE;IAArB,gBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;IAKAM,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,0BAAjB,CAAD,CAAN,CAAqDC,OAArD,CAA6D,IAA7D;EACA,CAPC,CAAF;EAQAL,EAAE,CAAC,6EAAD,EAAgF,YAAM;IACvF,IAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;MAAY,OAAO,EAAE;IAArB,gBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;IAKAM,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,0BAAjB,CAAD,CAAN,CAAqDC,OAArD,CAA6D,KAA7D;EACA,CAPC,CAAF;EAQAL,EAAE,CAAC,0DAAD,EAA6D,YAAM;IACpE,IAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;MAAY,SAAS,EAAC;IAAtB,gBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;IAKAM,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,MAAjB,CAAD,CAAN,CAAiCC,OAAjC,CAAyC,IAAzC;EACA,CAPC,CAAF;EAQAL,EAAE,CAAC,8CAAD,EAAiD,YAAM;IACxD,IAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;MAAY,cAAW;IAAvB,gBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;IAKAM,MAAM,CAACD,OAAO,CAACK,IAAR,CAAa,YAAb,CAAD,CAAN,CAAmCD,OAAnC,CAA2C,OAA3C;EACA,CAPC,CAAF;AAQA,CAzDO,CAAR"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-column-list",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"description": "Column List component for the NICE Design System",
|
|
5
5
|
"main": "es/ColumnList.js",
|
|
6
6
|
"style": "scss/column-list.js",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"homepage": "https://design-system.nice.org.uk/",
|
|
32
32
|
"license": "MIT",
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@nice-digital/nds-core": "^4.0.
|
|
34
|
+
"@nice-digital/nds-core": "^4.0.2"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "d8feb7beba5fffa49da42d6a550cb8f67a50727d",
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@testing-library/jest-dom": "^5.16.5",
|
|
39
39
|
"@testing-library/react": "^13.4.0",
|
package/es/ColumnList.test.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/es/ColumnList.test.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
-
const react_1 = require("@testing-library/react");
|
|
5
|
-
const ColumnList_1 = require("./ColumnList");
|
|
6
|
-
const ListItems = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("li", { children: "One" }), (0, jsx_runtime_1.jsx)("li", { children: "Two" }), (0, jsx_runtime_1.jsx)("li", { children: "Three" }), (0, jsx_runtime_1.jsx)("li", { children: "Four" }), (0, jsx_runtime_1.jsx)("li", { children: "Five" }), (0, jsx_runtime_1.jsx)("li", { children: "Six" })] }));
|
|
7
|
-
describe("ColumnList", () => {
|
|
8
|
-
it("should match snapshot", () => {
|
|
9
|
-
const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(ColumnList_1.ColumnList, { children: (0, jsx_runtime_1.jsx)(ListItems, {}) }));
|
|
10
|
-
expect(wrapper).toMatchSnapshot();
|
|
11
|
-
});
|
|
12
|
-
it("should add CSS module class name to parent list for standard (boxed) variant", () => {
|
|
13
|
-
const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(ColumnList_1.ColumnList, { children: (0, jsx_runtime_1.jsx)(ListItems, {}) }));
|
|
14
|
-
expect(wrapper.getByRole("list")).toHaveClass("column-list--boxed");
|
|
15
|
-
});
|
|
16
|
-
it("should add CSS module class name to parent list for the plain variant", () => {
|
|
17
|
-
const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(ColumnList_1.ColumnList, Object.assign({ plain: true }, { children: (0, jsx_runtime_1.jsx)(ListItems, {}) })));
|
|
18
|
-
expect(wrapper.getByRole("list")).toHaveClass("column-list--plain");
|
|
19
|
-
});
|
|
20
|
-
it("should add CSS module class name to parent list for the 2 column variant", () => {
|
|
21
|
-
const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(ColumnList_1.ColumnList, Object.assign({ columns: 2 }, { children: (0, jsx_runtime_1.jsx)(ListItems, {}) })));
|
|
22
|
-
expect(wrapper.getByRole("list")).toHaveClass("column-list--two-columns");
|
|
23
|
-
});
|
|
24
|
-
it("should add no CSS module class name to parent list for the 3 column variant", () => {
|
|
25
|
-
const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(ColumnList_1.ColumnList, Object.assign({ columns: 3 }, { children: (0, jsx_runtime_1.jsx)(ListItems, {}) })));
|
|
26
|
-
expect(wrapper.getByRole("list")).not.toHaveClass("column-list--two-columns");
|
|
27
|
-
});
|
|
28
|
-
it("should append className prop to rendered class attribute", () => {
|
|
29
|
-
const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(ColumnList_1.ColumnList, Object.assign({ className: "test" }, { children: (0, jsx_runtime_1.jsx)(ListItems, {}) })));
|
|
30
|
-
expect(wrapper.getByRole("list")).toHaveClass("test");
|
|
31
|
-
});
|
|
32
|
-
it("should render additional props as attributes", () => {
|
|
33
|
-
const wrapper = (0, react_1.render)((0, jsx_runtime_1.jsx)(ColumnList_1.ColumnList, Object.assign({ "aria-label": "hello" }, { children: (0, jsx_runtime_1.jsx)(ListItems, {}) })));
|
|
34
|
-
expect(wrapper.getByRole("list").getAttribute("aria-label")).toBe("hello");
|
|
35
|
-
});
|
|
36
|
-
});
|