@nice-digital/nds-column-list 1.0.1-alpha.0 → 1.0.2-alpha.0
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/README.md +4 -4
- package/es/ColumnList.js +1 -1
- package/es/ColumnList.js.map +1 -1
- package/es/__tests__/nds-column-list.test.js +3 -3
- package/es/__tests__/nds-column-list.test.js.map +1 -1
- package/lib/ColumnList.js +1 -1
- package/lib/ColumnList.js.map +1 -1
- package/lib/__tests__/nds-column-list.test.js +3 -3
- package/lib/__tests__/nds-column-list.test.js.map +1 -1
- package/package.json +2 -2
- package/scss/column-list.scss +12 -5
package/README.md
CHANGED
|
@@ -46,14 +46,14 @@ Whether to render a plain list (as opposed to a boxed one)
|
|
|
46
46
|
</ColumnList>
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
-
#####
|
|
49
|
+
##### columns
|
|
50
50
|
|
|
51
51
|
- Type: `number` (default: 3)
|
|
52
52
|
|
|
53
53
|
The maximum number of columns to render. The only permitted values are 2 or 3.
|
|
54
54
|
|
|
55
55
|
```js
|
|
56
|
-
<ColumnList
|
|
56
|
+
<ColumnList columns={2}>
|
|
57
57
|
<li>Item one</li>
|
|
58
58
|
<li>Item two</li>
|
|
59
59
|
<li>Item three</li>
|
|
@@ -96,7 +96,7 @@ If you're not using [React](#react), then include the [SCSS as above](#scss) and
|
|
|
96
96
|
|
|
97
97
|
#### Standard variant (3 columns, boxed layout)
|
|
98
98
|
```html
|
|
99
|
-
<ol class="column-list column-list--boxed
|
|
99
|
+
<ol class="column-list column-list--boxed">
|
|
100
100
|
<li>One</li>
|
|
101
101
|
<li>Two</li>
|
|
102
102
|
<li>Three</li>
|
|
@@ -108,7 +108,7 @@ If you're not using [React](#react), then include the [SCSS as above](#scss) and
|
|
|
108
108
|
|
|
109
109
|
#### Alternative variant (2 columns, plain layout)
|
|
110
110
|
```html
|
|
111
|
-
<ol class="column-list column-list--plain column-list--two-
|
|
111
|
+
<ol class="column-list column-list--plain column-list--two-columns">
|
|
112
112
|
<li>One</li>
|
|
113
113
|
<li>Two</li>
|
|
114
114
|
<li>Three</li>
|
package/es/ColumnList.js
CHANGED
|
@@ -12,7 +12,7 @@ export var ColumnList = function ColumnList(props) {
|
|
|
12
12
|
attrs = _objectWithoutPropertiesLoose(props, _excluded);
|
|
13
13
|
|
|
14
14
|
return /*#__PURE__*/React.createElement("ol", _extends({
|
|
15
|
-
className: ["column-list", plain ? "column-list--plain" : "column-list--boxed", columns === 2 ? "column-list--two-
|
|
15
|
+
className: ["column-list", plain ? "column-list--plain" : "column-list--boxed", columns === 2 ? "column-list--two-columns" : "", className].filter(Boolean).join(" ")
|
|
16
16
|
}, attrs), children);
|
|
17
17
|
};
|
|
18
18
|
ColumnList.propTypes = {
|
package/es/ColumnList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ColumnList.js"],"names":["React","PropTypes","ColumnList","props","children","plain","className","columns","attrs","filter","Boolean","join","propTypes","node","isRequired","bool","string","number"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAO,0BAAP;AAEA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAAAC,KAAK,EAAI;AAClC,MAAQC,QAAR,GAA0DD,KAA1D,CAAQC,QAAR;AAAA,MAAkBC,KAAlB,GAA0DF,KAA1D,CAAkBE,KAAlB;AAAA,MAAyBC,SAAzB,GAA0DH,KAA1D,CAAyBG,SAAzB;AAAA,MAAoCC,OAApC,GAA0DJ,KAA1D,CAAoCI,OAApC;AAAA,MAAgDC,KAAhD,iCAA0DL,KAA1D;;AAEA,sBACC;AACC,IAAA,SAAS,EAAE,CACV,aADU,EAEVE,KAAK,GAAG,oBAAH,GAA0B,oBAFrB,EAGVE,OAAO,KAAK,CAAZ,GAAgB,
|
|
1
|
+
{"version":3,"sources":["../src/ColumnList.js"],"names":["React","PropTypes","ColumnList","props","children","plain","className","columns","attrs","filter","Boolean","join","propTypes","node","isRequired","bool","string","number"],"mappings":";;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAO,0BAAP;AAEA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAAAC,KAAK,EAAI;AAClC,MAAQC,QAAR,GAA0DD,KAA1D,CAAQC,QAAR;AAAA,MAAkBC,KAAlB,GAA0DF,KAA1D,CAAkBE,KAAlB;AAAA,MAAyBC,SAAzB,GAA0DH,KAA1D,CAAyBG,SAAzB;AAAA,MAAoCC,OAApC,GAA0DJ,KAA1D,CAAoCI,OAApC;AAAA,MAAgDC,KAAhD,iCAA0DL,KAA1D;;AAEA,sBACC;AACC,IAAA,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;AADZ,KASKH,KATL,GAWEJ,QAXF,CADD;AAeA,CAlBM;AAoBPF,UAAU,CAACU,SAAX,GAAuB;AACtBR,EAAAA,QAAQ,EAAEH,SAAS,CAACY,IAAV,CAAeC,UADH;AAEtBT,EAAAA,KAAK,EAAEJ,SAAS,CAACc,IAFK;AAGtBT,EAAAA,SAAS,EAAEL,SAAS,CAACe,MAHC;AAItBT,EAAAA,OAAO,EAAEN,SAAS,CAACgB;AAJG,CAAvB","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"],"file":"ColumnList.js"}
|
|
@@ -27,13 +27,13 @@ describe("ColumnList", function () {
|
|
|
27
27
|
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
|
|
28
28
|
columns: 2
|
|
29
29
|
}, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
30
|
-
expect(wrapper.hasClass("
|
|
30
|
+
expect(wrapper.hasClass("column-list--two-columns")).toEqual(true);
|
|
31
31
|
});
|
|
32
|
-
it("should add CSS module class name to parent list for the 3 column variant", function () {
|
|
32
|
+
it("should add no CSS module class name to parent list for the 3 column variant", function () {
|
|
33
33
|
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
|
|
34
34
|
columns: 3
|
|
35
35
|
}, /*#__PURE__*/React.createElement(ListItems, null)));
|
|
36
|
-
expect(wrapper.hasClass("
|
|
36
|
+
expect(wrapper.hasClass("column-list--two-columns")).toEqual(false);
|
|
37
37
|
});
|
|
38
38
|
it("should append className prop to rendered class attribute", function () {
|
|
39
39
|
var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/__tests__/nds-column-list.test.js"],"names":["React","shallow","ColumnList","ListItems","describe","it","wrapper","expect","toHaveLength","hasClass","toEqual","prop"],"mappings":"AAAA;;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,UAAT,QAA2B,eAA3B;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,sBACjB,uDACC,sCADD,eAEC,sCAFD,eAGC,wCAHD,eAIC,uCAJD,eAKC,uCALD,eAMC,sCAND,CADiB;AAAA,CAAlB;;AAWAC,QAAQ,CAAC,YAAD,EAAe,YAAM;AAC5BC,EAAAA,EAAE,CAAC,gCAAD,EAAmC,YAAM;AAC1C,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD,qBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAD,CAAN,CAAgBE,YAAhB,CAA6B,CAA7B;AACA,GAPC,CAAF;AAQAH,EAAAA,EAAE,CAAC,8EAAD,EAAiF,YAAM;AACxF,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD,qBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,oBAAjB,CAAD,CAAN,CAA+CC,OAA/C,CAAuD,IAAvD;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,uEAAD,EAA0E,YAAM;AACjF,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;AAAY,MAAA,KAAK;AAAjB,oBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,oBAAjB,CAAD,CAAN,CAA+CC,OAA/C,CAAuD,IAAvD;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,0EAAD,EAA6E,YAAM;AACpF,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;AAAY,MAAA,OAAO,EAAE;AAArB,oBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,
|
|
1
|
+
{"version":3,"sources":["../../src/__tests__/nds-column-list.test.js"],"names":["React","shallow","ColumnList","ListItems","describe","it","wrapper","expect","toHaveLength","hasClass","toEqual","prop"],"mappings":"AAAA;;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,UAAT,QAA2B,eAA3B;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,sBACjB,uDACC,sCADD,eAEC,sCAFD,eAGC,wCAHD,eAIC,uCAJD,eAKC,uCALD,eAMC,sCAND,CADiB;AAAA,CAAlB;;AAWAC,QAAQ,CAAC,YAAD,EAAe,YAAM;AAC5BC,EAAAA,EAAE,CAAC,gCAAD,EAAmC,YAAM;AAC1C,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD,qBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAD,CAAN,CAAgBE,YAAhB,CAA6B,CAA7B;AACA,GAPC,CAAF;AAQAH,EAAAA,EAAE,CAAC,8EAAD,EAAiF,YAAM;AACxF,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD,qBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,oBAAjB,CAAD,CAAN,CAA+CC,OAA/C,CAAuD,IAAvD;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,uEAAD,EAA0E,YAAM;AACjF,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;AAAY,MAAA,KAAK;AAAjB,oBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,oBAAjB,CAAD,CAAN,CAA+CC,OAA/C,CAAuD,IAAvD;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,0EAAD,EAA6E,YAAM;AACpF,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;AAAY,MAAA,OAAO,EAAE;AAArB,oBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,0BAAjB,CAAD,CAAN,CAAqDC,OAArD,CAA6D,IAA7D;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,6EAAD,EAAgF,YAAM;AACvF,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;AAAY,MAAA,OAAO,EAAE;AAArB,oBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,0BAAjB,CAAD,CAAN,CAAqDC,OAArD,CAA6D,KAA7D;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,0DAAD,EAA6D,YAAM;AACpE,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;AAAY,MAAA,SAAS,EAAC;AAAtB,oBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,MAAjB,CAAD,CAAN,CAAiCC,OAAjC,CAAyC,IAAzC;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,8CAAD,EAAiD,YAAM;AACxD,QAAMC,OAAO,GAAGL,OAAO,eACtB,oBAAC,UAAD;AAAY,oBAAW;AAAvB,oBACC,oBAAC,SAAD,OADD,CADsB,CAAvB;AAKAM,IAAAA,MAAM,CAACD,OAAO,CAACK,IAAR,CAAa,YAAb,CAAD,CAAN,CAAmCD,OAAnC,CAA2C,OAA3C;AACA,GAPC,CAAF;AAQA,CAzDO,CAAR","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"],"file":"nds-column-list.test.js"}
|
package/lib/ColumnList.js
CHANGED
|
@@ -27,7 +27,7 @@ var ColumnList = function ColumnList(props) {
|
|
|
27
27
|
columns = props.columns,
|
|
28
28
|
attrs = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
|
|
29
29
|
return /*#__PURE__*/_react["default"].createElement("ol", (0, _extends2["default"])({
|
|
30
|
-
className: ["column-list", plain ? "column-list--plain" : "column-list--boxed", columns === 2 ? "column-list--two-
|
|
30
|
+
className: ["column-list", plain ? "column-list--plain" : "column-list--boxed", columns === 2 ? "column-list--two-columns" : "", className].filter(Boolean).join(" ")
|
|
31
31
|
}, attrs, {
|
|
32
32
|
__self: _this,
|
|
33
33
|
__source: {
|
package/lib/ColumnList.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ColumnList.js"],"names":["ColumnList","props","children","plain","className","columns","attrs","filter","Boolean","join","propTypes","PropTypes","node","isRequired","bool","string","number"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAAAC,KAAK,EAAI;AAClC,MAAQC,QAAR,GAA0DD,KAA1D,CAAQC,QAAR;AAAA,MAAkBC,KAAlB,GAA0DF,KAA1D,CAAkBE,KAAlB;AAAA,MAAyBC,SAAzB,GAA0DH,KAA1D,CAAyBG,SAAzB;AAAA,MAAoCC,OAApC,GAA0DJ,KAA1D,CAAoCI,OAApC;AAAA,MAAgDC,KAAhD,kDAA0DL,KAA1D;AAEA,sBACC;AACC,IAAA,SAAS,EAAE,CACV,aADU,EAEVE,KAAK,GAAG,oBAAH,GAA0B,oBAFrB,EAGVE,OAAO,KAAK,CAAZ,GAAgB,
|
|
1
|
+
{"version":3,"sources":["../src/ColumnList.js"],"names":["ColumnList","props","children","plain","className","columns","attrs","filter","Boolean","join","propTypes","PropTypes","node","isRequired","bool","string","number"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAAAC,KAAK,EAAI;AAClC,MAAQC,QAAR,GAA0DD,KAA1D,CAAQC,QAAR;AAAA,MAAkBC,KAAlB,GAA0DF,KAA1D,CAAkBE,KAAlB;AAAA,MAAyBC,SAAzB,GAA0DH,KAA1D,CAAyBG,SAAzB;AAAA,MAAoCC,OAApC,GAA0DJ,KAA1D,CAAoCI,OAApC;AAAA,MAAgDC,KAAhD,kDAA0DL,KAA1D;AAEA,sBACC;AACC,IAAA,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;AADZ,KASKH,KATL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWEJ,QAXF,CADD;AAeA,CAlBM;;;AAoBPF,UAAU,CAACU,SAAX,GAAuB;AACtBR,EAAAA,QAAQ,EAAES,sBAAUC,IAAV,CAAeC,UADH;AAEtBV,EAAAA,KAAK,EAAEQ,sBAAUG,IAFK;AAGtBV,EAAAA,SAAS,EAAEO,sBAAUI,MAHC;AAItBV,EAAAA,OAAO,EAAEM,sBAAUK;AAJG,CAAvB","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"],"file":"ColumnList.js"}
|
|
@@ -130,9 +130,9 @@ describe("ColumnList", function () {
|
|
|
130
130
|
columnNumber: 5
|
|
131
131
|
}
|
|
132
132
|
})));
|
|
133
|
-
expect(wrapper.hasClass("
|
|
133
|
+
expect(wrapper.hasClass("column-list--two-columns")).toEqual(true);
|
|
134
134
|
});
|
|
135
|
-
it("should add CSS module class name to parent list for the 3 column variant", function () {
|
|
135
|
+
it("should add no CSS module class name to parent list for the 3 column variant", function () {
|
|
136
136
|
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
|
|
137
137
|
columns: 3,
|
|
138
138
|
__self: _this,
|
|
@@ -149,7 +149,7 @@ describe("ColumnList", function () {
|
|
|
149
149
|
columnNumber: 5
|
|
150
150
|
}
|
|
151
151
|
})));
|
|
152
|
-
expect(wrapper.hasClass("
|
|
152
|
+
expect(wrapper.hasClass("column-list--two-columns")).toEqual(false);
|
|
153
153
|
});
|
|
154
154
|
it("should append className prop to rendered class attribute", function () {
|
|
155
155
|
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/__tests__/nds-column-list.test.js"],"names":["ListItems","describe","it","wrapper","expect","toHaveLength","hasClass","toEqual","prop"],"mappings":"AAAA;;;;AAEA;;AACA;;AACA;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,sBACjB,+EACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WADD,eAEC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAFD,eAGC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAHD,eAIC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAJD,eAKC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YALD,eAMC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAND,CADiB;AAAA,CAAlB;;AAWAC,QAAQ,CAAC,YAAD,EAAe,YAAM;AAC5BC,EAAAA,EAAE,CAAC,gCAAD,EAAmC,YAAM;AAC1C,QAAMC,OAAO,GAAG,mCACf,gCAAC,sBAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBACC,gCAAC,SAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MADD,CADe,CAAhB;AAKAC,IAAAA,MAAM,CAACD,OAAD,CAAN,CAAgBE,YAAhB,CAA6B,CAA7B;AACA,GAPC,CAAF;AAQAH,EAAAA,EAAE,CAAC,8EAAD,EAAiF,YAAM;AACxF,QAAMC,OAAO,GAAG,mCACf,gCAAC,sBAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBACC,gCAAC,SAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MADD,CADe,CAAhB;AAKAC,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,oBAAjB,CAAD,CAAN,CAA+CC,OAA/C,CAAuD,IAAvD;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,uEAAD,EAA0E,YAAM;AACjF,QAAMC,OAAO,GAAG,mCACf,gCAAC,sBAAD;AAAY,MAAA,KAAK,MAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBACC,gCAAC,SAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MADD,CADe,CAAhB;AAKAC,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,oBAAjB,CAAD,CAAN,CAA+CC,OAA/C,CAAuD,IAAvD;AACA,GAPC,CAAF;AAQAL,EAAAA,EAAE,CAAC,0EAAD,EAA6E,YAAM;AACpF,QAAMC,OAAO,GAAG,mCACf,gCAAC,sBAAD;AAAY,MAAA,OAAO,EAAE,CAArB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBACC,gCAAC,SAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MADD,CADe,CAAhB;AAKAC,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,
|
|
1
|
+
{"version":3,"sources":["../../src/__tests__/nds-column-list.test.js"],"names":["ListItems","describe","it","wrapper","expect","toHaveLength","hasClass","toEqual","prop"],"mappings":"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","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"],"file":"nds-column-list.test.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-column-list",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2-alpha.0",
|
|
4
4
|
"description": "Column List component for the NICE Design System",
|
|
5
5
|
"main": "lib/ColumnList.js",
|
|
6
6
|
"module": "es/ColumnList.js",
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"prop-types": "^15.8.1"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "e8a57d14144bcf3be37bd03e9d9e9581e8933d3d"
|
|
40
40
|
}
|
package/scss/column-list.scss
CHANGED
|
@@ -2,22 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
.column-list {
|
|
4
4
|
list-style: none;
|
|
5
|
-
margin: 0;
|
|
5
|
+
margin: 0 0 rem($nds-spacing-large);
|
|
6
6
|
max-width: 100%;
|
|
7
7
|
|
|
8
8
|
&--boxed {
|
|
9
9
|
background: $nds-colour-true-white;
|
|
10
10
|
border: 1px solid $nds-colour-border;
|
|
11
11
|
|
|
12
|
+
li {
|
|
13
|
+
padding: rem(
|
|
14
|
+
$nds-spacing-small
|
|
15
|
+
); // Make room for the anchor focus outline
|
|
16
|
+
}
|
|
17
|
+
|
|
12
18
|
a {
|
|
13
|
-
padding: rem($nds-spacing-x-small
|
|
19
|
+
padding: rem($nds-spacing-x-small 0);
|
|
14
20
|
}
|
|
15
21
|
}
|
|
16
22
|
|
|
17
23
|
li {
|
|
18
24
|
break-inside: avoid;
|
|
19
25
|
display: block;
|
|
20
|
-
padding: rem($nds-spacing-small) 0; // Make room for the anchor focus outline
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
@include mq($from: md) {
|
|
@@ -25,8 +30,10 @@
|
|
|
25
30
|
}
|
|
26
31
|
|
|
27
32
|
@include mq($from: lg) {
|
|
28
|
-
|
|
29
|
-
|
|
33
|
+
column-count: 3;
|
|
34
|
+
|
|
35
|
+
&--two-columns {
|
|
36
|
+
column-count: 2;
|
|
30
37
|
}
|
|
31
38
|
}
|
|
32
39
|
}
|