@nice-digital/nds-column-list 1.0.1-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 The National Institute for Health and Care Excellence (NICE)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# `@nice-digital/nds-column-list`
+
+> Column List component for the NICE Design System
+
+## Installation
+
+Install Node, and then:
+
+```sh
+npm i @nice-digital/nds-column-list --save
+```
+
+## Usage
+
+### React
+
+Import the `ColumnList` component from the package and use within JSX:
+
+```jsx
+import React from "react";
+import { ColumnList } from "@nice-digital/nds-column-list";
+
+<ColumnList>
+	<li>Item one</li>
+	<li>Item two</li>
+	<li>Item three</li>
+</ColumnList>
+
+```
+
+> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.
+
+#### Props
+
+##### plain
+
+- Type: `boolean` (default: false)
+
+Whether to render a plain list (as opposed to a boxed one)
+
+```js
+<ColumnList plain>
+	<li>Item one</li>
+	<li>Item two</li>
+	<li>Item three</li>
+</ColumnList>
+```
+
+##### cols
+
+- Type: `number` (default: 3)
+
+The maximum number of columns to render. The only permitted values are 2 or 3.
+
+```js
+<ColumnList cols={2}>
+	<li>Item one</li>
+	<li>Item two</li>
+	<li>Item three</li>
+</ColumnList>
+```
+
+##### children
+
+- Type: `React.ReactNode`
+
+As the ColumnList component renders an `ol` element, it must have at least one `<li>`
+child.
+
+```js
+<ColumnList>
+	<li>Item one</li>
+	<li>Item two</li>
+	<li>Item three</li>
+</ColumnList>
+```
+
+###### className
+
+- Type: `string`
+
+Any additional className will be merged on to the containing `<ol>` element.
+
+### SCSS
+
+If you're not using [React](#react), then import the SCSS directly into your application by:
+
+```scss
+@import "~@nice-digital/nds-column-list/scss/column-list";
+```
+
+### HTML
+
+If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:
+
+
+#### Standard variant (3 columns, boxed layout)
+```html
+<ol class="column-list column-list--boxed column-list--three-cols">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+  <li>Six</li>
+</ol>
+```
+
+#### Alternative variant (2 columns, plain layout)
+```html
+<ol class="column-list column-list--plain column-list--two-cols">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+  <li>Six</li>
+</ol>
+```

package/es/ColumnList.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "plain", "className", "columns"];
+import React from "react";
+import PropTypes from "prop-types";
+import "../scss/column-list.scss";
+export var ColumnList = function ColumnList(props) {
+  var children = props.children,
+      plain = props.plain,
+      className = props.className,
+      columns = props.columns,
+      attrs = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("ol", _extends({
+    className: ["column-list", plain ? "column-list--plain" : "column-list--boxed", columns === 2 ? "column-list--two-cols" : "column-list--three-cols", className].filter(Boolean).join(" ")
+  }, attrs), children);
+};
+ColumnList.propTypes = {
+  children: PropTypes.node.isRequired,
+  plain: PropTypes.bool,
+  className: PropTypes.string,
+  columns: PropTypes.number
+};
+//# sourceMappingURL=ColumnList.js.map

package/es/ColumnList.js.map

@@ -0,0 +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,uBAAhB,GAA0C,yBAHhC,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-cols\" : \"column-list--three-cols\",\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"}

package/es/__tests__/nds-column-list.test.js

@@ -0,0 +1,51 @@
+"use strict";
+
+import React from "react";
+import { shallow } from "enzyme";
+import { ColumnList } from "../ColumnList";
+
+var ListItems = function ListItems() {
+  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"));
+};
+
+describe("ColumnList", function () {
+  it("should render without crashing", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, null, /*#__PURE__*/React.createElement(ListItems, null)));
+    expect(wrapper).toHaveLength(1);
+  });
+  it("should add CSS module class name to parent list for standard (boxed) variant", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, null, /*#__PURE__*/React.createElement(ListItems, null)));
+    expect(wrapper.hasClass("column-list--boxed")).toEqual(true);
+  });
+  it("should add CSS module class name to parent list for the plain variant", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
+      plain: true
+    }, /*#__PURE__*/React.createElement(ListItems, null)));
+    expect(wrapper.hasClass("column-list--plain")).toEqual(true);
+  });
+  it("should add CSS module class name to parent list for the 2 column variant", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
+      columns: 2
+    }, /*#__PURE__*/React.createElement(ListItems, null)));
+    expect(wrapper.hasClass("cols2")).toEqual(true);
+  });
+  it("should add CSS module class name to parent list for the 3 column variant", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
+      columns: 3
+    }, /*#__PURE__*/React.createElement(ListItems, null)));
+    expect(wrapper.hasClass("cols3")).toEqual(true);
+  });
+  it("should append className prop to rendered class attribute", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
+      className: "test"
+    }, /*#__PURE__*/React.createElement(ListItems, null)));
+    expect(wrapper.hasClass("test")).toEqual(true);
+  });
+  it("should render additional props as attributes", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(ColumnList, {
+      "aria-label": "hello"
+    }, /*#__PURE__*/React.createElement(ListItems, null)));
+    expect(wrapper.prop("aria-label")).toEqual("hello");
+  });
+});
+//# sourceMappingURL=nds-column-list.test.js.map

package/es/__tests__/nds-column-list.test.js.map

@@ -0,0 +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,OAAjB,CAAD,CAAN,CAAkCC,OAAlC,CAA0C,IAA1C;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,OAAjB,CAAD,CAAN,CAAkCC,OAAlC,CAA0C,IAA1C;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(\"cols2\")).toEqual(true);\n\t});\n\tit(\"should add 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(\"cols3\")).toEqual(true);\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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.ColumnList = 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"));
+
+require("../scss/column-list.scss");
+
+var _excluded = ["children", "plain", "className", "columns"];
+
+var _jsxFileName = "C:\\xampp\\htdocs\\nice-design-system\\components\\nds-column-list\\src\\ColumnList.js",
+    _this = void 0;
+
+var ColumnList = function ColumnList(props) {
+  var children = props.children,
+      plain = props.plain,
+      className = props.className,
+      columns = props.columns,
+      attrs = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("ol", (0, _extends2["default"])({
+    className: ["column-list", plain ? "column-list--plain" : "column-list--boxed", columns === 2 ? "column-list--two-cols" : "column-list--three-cols", className].filter(Boolean).join(" ")
+  }, attrs, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 9,
+      columnNumber: 3
+    }
+  }), children);
+};
+
+exports.ColumnList = ColumnList;
+ColumnList.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  plain: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  columns: _propTypes["default"].number
+};
+//# sourceMappingURL=ColumnList.js.map

package/lib/ColumnList.js.map

@@ -0,0 +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,uBAAhB,GAA0C,yBAHhC,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-cols\" : \"column-list--three-cols\",\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"}

package/lib/__tests__/nds-column-list.test.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _ColumnList = require("../ColumnList");
+
+var _jsxFileName = "C:\\xampp\\htdocs\\nice-design-system\\components\\nds-column-list\\src\\__tests__\\nds-column-list.test.js",
+    _this = void 0;
+
+var ListItems = function ListItems() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 9,
+      columnNumber: 3
+    }
+  }, "One"), /*#__PURE__*/_react["default"].createElement("li", {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 10,
+      columnNumber: 3
+    }
+  }, "Two"), /*#__PURE__*/_react["default"].createElement("li", {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 11,
+      columnNumber: 3
+    }
+  }, "Three"), /*#__PURE__*/_react["default"].createElement("li", {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 12,
+      columnNumber: 3
+    }
+  }, "Four"), /*#__PURE__*/_react["default"].createElement("li", {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 13,
+      columnNumber: 3
+    }
+  }, "Five"), /*#__PURE__*/_react["default"].createElement("li", {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 14,
+      columnNumber: 3
+    }
+  }, "Six"));
+};
+
+describe("ColumnList", function () {
+  it("should render without crashing", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 21,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(ListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 22,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper).toHaveLength(1);
+  });
+  it("should add CSS module class name to parent list for standard (boxed) variant", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 29,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(ListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 30,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.hasClass("column-list--boxed")).toEqual(true);
+  });
+  it("should add CSS module class name to parent list for the plain variant", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
+      plain: true,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 37,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(ListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 38,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.hasClass("column-list--plain")).toEqual(true);
+  });
+  it("should add CSS module class name to parent list for the 2 column variant", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
+      columns: 2,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 45,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(ListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 46,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.hasClass("cols2")).toEqual(true);
+  });
+  it("should add CSS module class name to parent list for the 3 column variant", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
+      columns: 3,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 53,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(ListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 54,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.hasClass("cols3")).toEqual(true);
+  });
+  it("should append className prop to rendered class attribute", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
+      className: "test",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 61,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(ListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 62,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.hasClass("test")).toEqual(true);
+  });
+  it("should render additional props as attributes", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_ColumnList.ColumnList, {
+      "aria-label": "hello",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 69,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(ListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 70,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.prop("aria-label")).toEqual("hello");
+  });
+});
+//# sourceMappingURL=nds-column-list.test.js.map

package/lib/__tests__/nds-column-list.test.js.map

@@ -0,0 +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(\"cols2\")).toEqual(true);\n\t});\n\tit(\"should add 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(\"cols3\")).toEqual(true);\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/nds-column-list.d.ts

@@ -0,0 +1,14 @@
+declare module "@nice-digital/nds-column-list" {
+	import React = require("react");
+
+	export interface ColumnListProps {
+		children: React.ReactNode;
+		plain?: boolean;
+		className?: string;
+		/** Number of columns on desktop-width screens */
+		columns?: 2 | 3;
+		[prop: string]: unknown;
+	}
+
+	export const ColumnList: React.FC<ColumnListProps>;
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@nice-digital/nds-column-list",
+  "version": "1.0.1-alpha.0",
+  "description": "Column List component for the NICE Design System",
+  "main": "lib/ColumnList.js",
+  "module": "es/ColumnList.js",
+  "style": "scss/column-list.js",
+  "types": "nds-column-list.d.ts",
+  "files": [
+    "lib",
+    "es",
+    "scss",
+    "*.d.ts"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nice-digital/nice-design-system.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/nice-digital/nice-design-system/issues"
+  },
+  "keywords": [
+    "column",
+    "list"
+  ],
+  "author": "Chris Barker <chris.barker@nice.org.uk>",
+  "homepage": "https://design-system.nice.org.uk/",
+  "license": "MIT",
+  "dependencies": {
+    "prop-types": "^15.8.1"
+  },
+  "gitHead": "d50fd220eddd4cbcac9051bb4fd536ff52398da9"
+}

package/scss/column-list.scss

@@ -0,0 +1,32 @@
+@import '~@nice-digital/nds-core/scss/core';
+
+.column-list {
+  list-style: none;
+  margin: 0;
+  max-width: 100%;
+
+  &--boxed {
+    background: $nds-colour-true-white;
+    border: 1px solid $nds-colour-border;
+
+    a {
+      padding: rem($nds-spacing-x-small $nds-spacing-medium);
+    }
+  }
+
+  li {
+    break-inside: avoid;
+    display: block;
+    padding: rem($nds-spacing-small) 0; // Make room for the anchor focus outline
+  }
+
+  @include mq($from: md) {
+    column-count: 2;
+  }
+
+  @include mq($from: lg) {
+    &--three-cols {
+      column-count: 3;
+    }
+  }
+}