@nice-digital/nds-a-z-list 0.2.0-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-a-z-list`
+
+> A-Z list component for the NICE Design System
+
+## Installation
+
+Install Node, and then:
+
+```sh
+npm i @nice-digital/nds-a-z-list --save
+```
+
+## Usage
+
+### React
+
+Import the `AZList` and `AZListItem` components from the package and use within JSX:
+
+```jsx
+import React from "react";
+import { AZList, AZListItem } from "@nice-digital/nds-alphabet";
+
+const allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
+
+<AZList alphabet={mockAlphabet}>
+	{allLetters.map(letter => (
+		<AZListItem key={letter} title={letter.toUpperCase()}>
+			<p className="test-class">{letter}: lorem ipsum dolor sit amet</p>
+		</AZListItem>
+	))}
+</AZList>
+
+```
+
+> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.
+
+#### Props (AZList)
+
+##### alphabet
+
+- Type `React.ReactNode`
+
+A component to render at the top of the list, allowing the user to jump to each
+letter within the index. Technically it can be any functional component, but
+we'd recommend the NDS Alphabet component.
+
+##### children
+
+- Type: `React.ReactNode`
+
+As the AZList component renders an `ol` element, it must have at least one `<li>`
+child. Each should be an instance of `AZListItem`.
+
+#### Props (AZListItem)
+
+##### id
+
+- Type: `string`
+
+If specified, this id will be applied to the list item's h2 element. If not,
+then the id will be auto-generated by removing spaces from the title and rendering
+it in lower case. We'd recommend supplying one (in most cases this will be the
+corresponding letter of the alphabet).
+
+##### title
+
+- Type: `string` (required)
+
+The title of each item within the list
+
+##### children (required)
+
+- Type: `React.ReactNode`
+
+This can be any content at all and will be displayed below the title.
+
+### SCSS
+
+If you're not using [React](#react), then import the SCSS directly into your application by:
+
+```scss
+@import "~@nice-digital/nds-a-z-list/scss/a-z-list";
+```
+
+### HTML
+
+If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:
+
+
+```html
+<ol class="a-z-list">
+  <li class="a-z-list__item">
+    <h2 class="a-z-list__item-heading" id="a">A</h2>
+    <p class="test-class">a: lorem ipsum dolor sit amet</p>
+  </li>
+  <li class="a-z-list__item">
+    <h2 class="a-z-list__item-heading" id="b">B</h2>
+    <p class="test-class">b: lorem ipsum dolor sit amet</p>
+  </li>
+  <li class="a-z-list__item">
+    <h2 class="a-z-list__item-heading" id="c">C</h2>
+    <p class="test-class">c: lorem ipsum dolor sit amet</p>
+  </li>
+  ...
+  <li class="a-z-list__item">
+    <h2 class="a-z-list__item-heading" id="x">X</h2>
+    <p class="test-class">x: lorem ipsum dolor sit amet</p>
+  </li>
+  <li class="a-z-list__item">
+    <h2 class="a-z-list__item-heading" id="y">Y</h2>
+    <p class="test-class">y: lorem ipsum dolor sit amet</p>
+  </li>
+  <li class="a-z-list__item">
+    <h2 class="a-z-list__item-heading" id="z">Z</h2>
+    <p class="test-class">z: lorem ipsum dolor sit amet</p>
+  </li>
+</ol>
+```
+

package/es/AZList.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["alphabet", "children", "className"],
+    _excluded2 = ["id", "title", "children", "className"];
+import React from "react";
+import PropTypes from "prop-types";
+import "../scss/a-z-list.scss";
+export var AZList = function AZList(props) {
+  var Alphabet = props.alphabet,
+      children = props.children,
+      className = props.className,
+      attrs = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alphabet, {
+    className: "a-z-list__alphabet"
+  }), /*#__PURE__*/React.createElement("ol", _extends({
+    className: ["a-z-list", className].join(" ")
+  }, attrs), children));
+};
+AZList.propTypes = {
+  alphabet: PropTypes.elementType.isRequired,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string
+};
+export var AZListItem = function AZListItem(props) {
+  var id = props.id,
+      title = props.title,
+      children = props.children,
+      className = props.className,
+      attrs = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  var itemId = id || title.replace(" ", "").toLowerCase();
+  return /*#__PURE__*/React.createElement("li", _extends({
+    className: ["a-z-list__item", className].join(" ")
+  }, attrs), /*#__PURE__*/React.createElement("h2", {
+    className: "a-z-list__item-heading",
+    id: itemId
+  }, title), children);
+};
+AZListItem.propTypes = {
+  id: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string
+};
+//# sourceMappingURL=AZList.js.map

package/es/AZList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AZList.js"],"names":["React","PropTypes","AZList","props","Alphabet","alphabet","children","className","attrs","join","propTypes","elementType","isRequired","node","string","AZListItem","id","title","itemId","replace","toLowerCase"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAO,uBAAP;AAEA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK,EAAI;AAC9B,MAAkBC,QAAlB,GAA8DD,KAA9D,CAAQE,QAAR;AAAA,MAA4BC,QAA5B,GAA8DH,KAA9D,CAA4BG,QAA5B;AAAA,MAAsCC,SAAtC,GAA8DJ,KAA9D,CAAsCI,SAAtC;AAAA,MAAoDC,KAApD,iCAA8DL,KAA9D;;AAEA,sBACC,uDACC,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAC;AAApB,IADD,eAEC;AAAI,IAAA,SAAS,EAAE,CAAC,UAAD,EAAaI,SAAb,EAAwBE,IAAxB,CAA6B,GAA7B;AAAf,KAAsDD,KAAtD,GACEF,QADF,CAFD,CADD;AAQA,CAXM;AAaPJ,MAAM,CAACQ,SAAP,GAAmB;AAClBL,EAAAA,QAAQ,EAAEJ,SAAS,CAACU,WAAV,CAAsBC,UADd;AAElBN,EAAAA,QAAQ,EAAEL,SAAS,CAACY,IAAV,CAAeD,UAFP;AAGlBL,EAAAA,SAAS,EAAEN,SAAS,CAACa;AAHH,CAAnB;AAMA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAAAZ,KAAK,EAAI;AAClC,MAAQa,EAAR,GAAqDb,KAArD,CAAQa,EAAR;AAAA,MAAYC,KAAZ,GAAqDd,KAArD,CAAYc,KAAZ;AAAA,MAAmBX,QAAnB,GAAqDH,KAArD,CAAmBG,QAAnB;AAAA,MAA6BC,SAA7B,GAAqDJ,KAArD,CAA6BI,SAA7B;AAAA,MAA2CC,KAA3C,iCAAqDL,KAArD;;AAEA,MAAMe,MAAM,GAAGF,EAAE,IAAIC,KAAK,CAACE,OAAN,CAAc,GAAd,EAAmB,EAAnB,EAAuBC,WAAvB,EAArB;AAEA,sBACC;AAAI,IAAA,SAAS,EAAE,CAAC,gBAAD,EAAmBb,SAAnB,EAA8BE,IAA9B,CAAmC,GAAnC;AAAf,KAA4DD,KAA5D,gBACC;AAAI,IAAA,SAAS,EAAC,wBAAd;AAAuC,IAAA,EAAE,EAAEU;AAA3C,KACED,KADF,CADD,EAIEX,QAJF,CADD;AAQA,CAbM;AAePS,UAAU,CAACL,SAAX,GAAuB;AACtBM,EAAAA,EAAE,EAAEf,SAAS,CAACa,MADQ;AAEtBG,EAAAA,KAAK,EAAEhB,SAAS,CAACa,MAAV,CAAiBF,UAFF;AAGtBN,EAAAA,QAAQ,EAAEL,SAAS,CAACY,IAAV,CAAeD,UAHH;AAItBL,EAAAA,SAAS,EAAEN,SAAS,CAACa;AAJC,CAAvB","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport \"../scss/a-z-list.scss\";\n\nexport const AZList = props => {\n\tconst { alphabet: Alphabet, children, className, ...attrs } = props;\n\n\treturn (\n\t\t<>\n\t\t\t<Alphabet className=\"a-z-list__alphabet\" />\n\t\t\t<ol className={[\"a-z-list\", className].join(\" \")} {...attrs}>\n\t\t\t\t{children}\n\t\t\t</ol>\n\t\t</>\n\t);\n};\n\nAZList.propTypes = {\n\talphabet: PropTypes.elementType.isRequired,\n\tchildren: PropTypes.node.isRequired,\n\tclassName: PropTypes.string\n};\n\nexport const AZListItem = props => {\n\tconst { id, title, children, className, ...attrs } = props;\n\n\tconst itemId = id || title.replace(\" \", \"\").toLowerCase();\n\n\treturn (\n\t\t<li className={[\"a-z-list__item\", className].join(\" \")} {...attrs}>\n\t\t\t<h2 className=\"a-z-list__item-heading\" id={itemId}>\n\t\t\t\t{title}\n\t\t\t</h2>\n\t\t\t{children}\n\t\t</li>\n\t);\n};\n\nAZListItem.propTypes = {\n\tid: PropTypes.string,\n\ttitle: PropTypes.string.isRequired,\n\tchildren: PropTypes.node.isRequired,\n\tclassName: PropTypes.string\n};\n"],"file":"AZList.js"}

package/es/__tests__/nds-a-z-list.test.js

@@ -0,0 +1,89 @@
+"use strict";
+
+import React from "react";
+import { shallow, mount } from "enzyme";
+import toJson from "enzyme-to-json";
+import { AZList } from "../AZList";
+describe("A-Z List", function () {
+  var AZListItems = function AZListItems() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", null, "Item one"), /*#__PURE__*/React.createElement("li", null, "Item two"));
+  };
+
+  var mockAlphabet = function mockAlphabet() {
+    return /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+      href: "#a"
+    }, "A")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+      href: "#b"
+    }, "B")));
+  };
+
+  it("should render without crashing", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AZList, {
+      alphabet: mockAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(wrapper).toHaveLength(1);
+  });
+  it("should render an ordered list component", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AZList, {
+      alphabet: mockAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(wrapper.children("ol").length).toEqual(1);
+  });
+  it("should render an ordered list with the expected class name", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AZList, {
+      alphabet: mockAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(wrapper.children("ol").hasClass("a-z-list")).toEqual(true);
+  });
+  it("should append className prop to rendered class attribute for the list", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AZList, {
+      className: "test",
+      alphabet: mockAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(wrapper.children("ol").hasClass("test")).toEqual(true);
+  });
+  it("should render additional props as attributes for the list", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AZList, {
+      "aria-label": "test",
+      alphabet: mockAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(wrapper.children("ol").prop("aria-label")).toEqual("test");
+  });
+  it("should match snapshot with default attributes", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AZList, {
+      alphabet: mockAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(toJson(wrapper)).toMatchSnapshot();
+    wrapper.unmount();
+  });
+  it("should match snapshot with custom attributes", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AZList, {
+      className: "test-class",
+      "aria-label": "test-label",
+      alphabet: mockAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(toJson(wrapper)).toMatchSnapshot();
+    wrapper.unmount();
+  });
+  it("should render an alphabet component that has been passed in", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AZList, {
+      alphabet: mockAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(wrapper.find(mockAlphabet)).toHaveLength(1);
+    wrapper.unmount();
+  });
+  it("should render an alphabet component with a custom class", function () {
+    var customAlphabet = function customAlphabet() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "test-class"
+      }, "Alphabet");
+    };
+
+    var wrapper = mount( /*#__PURE__*/React.createElement(AZList, {
+      alphabet: customAlphabet
+    }, /*#__PURE__*/React.createElement(AZListItems, null)));
+    expect(wrapper.find(customAlphabet).childAt(0).hasClass("test-class")).toEqual(true);
+    wrapper.unmount();
+  });
+});
+//# sourceMappingURL=nds-a-z-list.test.js.map

package/es/__tests__/nds-a-z-list.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/__tests__/nds-a-z-list.test.js"],"names":["React","shallow","mount","toJson","AZList","describe","AZListItems","mockAlphabet","it","wrapper","expect","toHaveLength","children","length","toEqual","hasClass","prop","toMatchSnapshot","unmount","find","customAlphabet","childAt"],"mappings":"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","sourcesContent":["\"use strict\";\n\nimport React from \"react\";\nimport { shallow, mount } from \"enzyme\";\nimport toJson from \"enzyme-to-json\";\n\nimport { AZList } from \"../AZList\";\n\ndescribe(\"A-Z List\", () => {\n\tconst AZListItems = () => (\n\t\t<>\n\t\t\t<li>Item one</li>\n\t\t\t<li>Item two</li>\n\t\t</>\n\t);\n\tconst mockAlphabet = () => (\n\t\t<ol>\n\t\t\t<li>\n\t\t\t\t<a href=\"#a\">A</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a href=\"#b\">B</a>\n\t\t\t</li>\n\t\t</ol>\n\t);\n\n\tit(\"should render without crashing\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper).toHaveLength(1);\n\t});\n\n\tit(\"should render an ordered list component\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.children(\"ol\").length).toEqual(1);\n\t});\n\n\tit(\"should render an ordered list with the expected class name\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.children(\"ol\").hasClass(\"a-z-list\")).toEqual(true);\n\t});\n\n\tit(\"should append className prop to rendered class attribute for the list\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList className=\"test\" alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.children(\"ol\").hasClass(\"test\")).toEqual(true);\n\t});\n\n\tit(\"should render additional props as attributes for the list\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList aria-label=\"test\" alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.children(\"ol\").prop(\"aria-label\")).toEqual(\"test\");\n\t});\n\n\tit(\"should match snapshot with default attributes\", () => {\n\t\tconst wrapper = mount(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(toJson(wrapper)).toMatchSnapshot();\n\t\twrapper.unmount();\n\t});\n\n\tit(\"should match snapshot with custom attributes\", () => {\n\t\tconst wrapper = mount(\n\t\t\t<AZList\n\t\t\t\tclassName=\"test-class\"\n\t\t\t\taria-label=\"test-label\"\n\t\t\t\talphabet={mockAlphabet}\n\t\t\t>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(toJson(wrapper)).toMatchSnapshot();\n\t\twrapper.unmount();\n\t});\n\n\tit(\"should render an alphabet component that has been passed in\", () => {\n\t\tconst wrapper = mount(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.find(mockAlphabet)).toHaveLength(1);\n\t\twrapper.unmount();\n\t});\n\n\tit(\"should render an alphabet component with a custom class\", () => {\n\t\tconst customAlphabet = () => <div className=\"test-class\">Alphabet</div>;\n\t\tconst wrapper = mount(\n\t\t\t<AZList alphabet={customAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(\n\t\t\twrapper\n\t\t\t\t.find(customAlphabet)\n\t\t\t\t.childAt(0)\n\t\t\t\t.hasClass(\"test-class\")\n\t\t).toEqual(true);\n\t\twrapper.unmount();\n\t});\n});\n"],"file":"nds-a-z-list.test.js"}

package/lib/AZList.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.AZListItem = exports.AZList = 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/a-z-list.scss");
+
+var _excluded = ["alphabet", "children", "className"],
+    _excluded2 = ["id", "title", "children", "className"];
+
+var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-a-z-list\\src\\AZList.js",
+    _this = void 0;
+
+var AZList = function AZList(props) {
+  var Alphabet = props.alphabet,
+      children = props.children,
+      className = props.className,
+      attrs = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Alphabet, {
+    className: "a-z-list__alphabet",
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 10,
+      columnNumber: 4
+    }
+  }), /*#__PURE__*/_react["default"].createElement("ol", (0, _extends2["default"])({
+    className: ["a-z-list", className].join(" ")
+  }, attrs, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 11,
+      columnNumber: 4
+    }
+  }), children));
+};
+
+exports.AZList = AZList;
+AZList.propTypes = {
+  alphabet: _propTypes["default"].elementType.isRequired,
+  children: _propTypes["default"].node.isRequired,
+  className: _propTypes["default"].string
+};
+
+var AZListItem = function AZListItem(props) {
+  var id = props.id,
+      title = props.title,
+      children = props.children,
+      className = props.className,
+      attrs = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded2);
+  var itemId = id || title.replace(" ", "").toLowerCase();
+  return /*#__PURE__*/_react["default"].createElement("li", (0, _extends2["default"])({
+    className: ["a-z-list__item", className].join(" ")
+  }, attrs, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 30,
+      columnNumber: 3
+    }
+  }), /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "a-z-list__item-heading",
+    id: itemId,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 31,
+      columnNumber: 4
+    }
+  }, title), children);
+};
+
+exports.AZListItem = AZListItem;
+AZListItem.propTypes = {
+  id: _propTypes["default"].string,
+  title: _propTypes["default"].string.isRequired,
+  children: _propTypes["default"].node.isRequired,
+  className: _propTypes["default"].string
+};
+//# sourceMappingURL=AZList.js.map

package/lib/AZList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AZList.js"],"names":["AZList","props","Alphabet","alphabet","children","className","attrs","join","propTypes","PropTypes","elementType","isRequired","node","string","AZListItem","id","title","itemId","replace","toLowerCase"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,IAAMA,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK,EAAI;AAC9B,MAAkBC,QAAlB,GAA8DD,KAA9D,CAAQE,QAAR;AAAA,MAA4BC,QAA5B,GAA8DH,KAA9D,CAA4BG,QAA5B;AAAA,MAAsCC,SAAtC,GAA8DJ,KAA9D,CAAsCI,SAAtC;AAAA,MAAoDC,KAApD,kDAA8DL,KAA9D;AAEA,sBACC,+EACC,gCAAC,QAAD;AAAU,IAAA,SAAS,EAAC,oBAApB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADD,eAEC;AAAI,IAAA,SAAS,EAAE,CAAC,UAAD,EAAaI,SAAb,EAAwBE,IAAxB,CAA6B,GAA7B;AAAf,KAAsDD,KAAtD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MACEF,QADF,CAFD,CADD;AAQA,CAXM;;;AAaPJ,MAAM,CAACQ,SAAP,GAAmB;AAClBL,EAAAA,QAAQ,EAAEM,sBAAUC,WAAV,CAAsBC,UADd;AAElBP,EAAAA,QAAQ,EAAEK,sBAAUG,IAAV,CAAeD,UAFP;AAGlBN,EAAAA,SAAS,EAAEI,sBAAUI;AAHH,CAAnB;;AAMO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAAAb,KAAK,EAAI;AAClC,MAAQc,EAAR,GAAqDd,KAArD,CAAQc,EAAR;AAAA,MAAYC,KAAZ,GAAqDf,KAArD,CAAYe,KAAZ;AAAA,MAAmBZ,QAAnB,GAAqDH,KAArD,CAAmBG,QAAnB;AAAA,MAA6BC,SAA7B,GAAqDJ,KAArD,CAA6BI,SAA7B;AAAA,MAA2CC,KAA3C,kDAAqDL,KAArD;AAEA,MAAMgB,MAAM,GAAGF,EAAE,IAAIC,KAAK,CAACE,OAAN,CAAc,GAAd,EAAmB,EAAnB,EAAuBC,WAAvB,EAArB;AAEA,sBACC;AAAI,IAAA,SAAS,EAAE,CAAC,gBAAD,EAAmBd,SAAnB,EAA8BE,IAA9B,CAAmC,GAAnC;AAAf,KAA4DD,KAA5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBACC;AAAI,IAAA,SAAS,EAAC,wBAAd;AAAuC,IAAA,EAAE,EAAEW,MAA3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACED,KADF,CADD,EAIEZ,QAJF,CADD;AAQA,CAbM;;;AAePU,UAAU,CAACN,SAAX,GAAuB;AACtBO,EAAAA,EAAE,EAAEN,sBAAUI,MADQ;AAEtBG,EAAAA,KAAK,EAAEP,sBAAUI,MAAV,CAAiBF,UAFF;AAGtBP,EAAAA,QAAQ,EAAEK,sBAAUG,IAAV,CAAeD,UAHH;AAItBN,EAAAA,SAAS,EAAEI,sBAAUI;AAJC,CAAvB","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport \"../scss/a-z-list.scss\";\n\nexport const AZList = props => {\n\tconst { alphabet: Alphabet, children, className, ...attrs } = props;\n\n\treturn (\n\t\t<>\n\t\t\t<Alphabet className=\"a-z-list__alphabet\" />\n\t\t\t<ol className={[\"a-z-list\", className].join(\" \")} {...attrs}>\n\t\t\t\t{children}\n\t\t\t</ol>\n\t\t</>\n\t);\n};\n\nAZList.propTypes = {\n\talphabet: PropTypes.elementType.isRequired,\n\tchildren: PropTypes.node.isRequired,\n\tclassName: PropTypes.string\n};\n\nexport const AZListItem = props => {\n\tconst { id, title, children, className, ...attrs } = props;\n\n\tconst itemId = id || title.replace(\" \", \"\").toLowerCase();\n\n\treturn (\n\t\t<li className={[\"a-z-list__item\", className].join(\" \")} {...attrs}>\n\t\t\t<h2 className=\"a-z-list__item-heading\" id={itemId}>\n\t\t\t\t{title}\n\t\t\t</h2>\n\t\t\t{children}\n\t\t</li>\n\t);\n};\n\nAZListItem.propTypes = {\n\tid: PropTypes.string,\n\ttitle: PropTypes.string.isRequired,\n\tchildren: PropTypes.node.isRequired,\n\tclassName: PropTypes.string\n};\n"],"file":"AZList.js"}

package/lib/__tests__/nds-a-z-list.test.js

@@ -0,0 +1,268 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _enzymeToJson = _interopRequireDefault(require("enzyme-to-json"));
+
+var _AZList = require("../AZList");
+
+var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-a-z-list\\src\\__tests__\\nds-a-z-list.test.js",
+    _this = void 0;
+
+describe("A-Z List", function () {
+  var AZListItems = function AZListItems() {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("li", {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 12,
+        columnNumber: 4
+      }
+    }, "Item one"), /*#__PURE__*/_react["default"].createElement("li", {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 13,
+        columnNumber: 4
+      }
+    }, "Item two"));
+  };
+
+  var mockAlphabet = function mockAlphabet() {
+    return /*#__PURE__*/_react["default"].createElement("ol", {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 17,
+        columnNumber: 3
+      }
+    }, /*#__PURE__*/_react["default"].createElement("li", {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 18,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement("a", {
+      href: "#a",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 19,
+        columnNumber: 5
+      }
+    }, "A")), /*#__PURE__*/_react["default"].createElement("li", {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 21,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement("a", {
+      href: "#b",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 22,
+        columnNumber: 5
+      }
+    }, "B")));
+  };
+
+  it("should render without crashing", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      alphabet: mockAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 29,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 30,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper).toHaveLength(1);
+  });
+  it("should render an ordered list component", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      alphabet: mockAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 38,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 39,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.children("ol").length).toEqual(1);
+  });
+  it("should render an ordered list with the expected class name", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      alphabet: mockAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 47,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 48,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.children("ol").hasClass("a-z-list")).toEqual(true);
+  });
+  it("should append className prop to rendered class attribute for the list", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      className: "test",
+      alphabet: mockAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 56,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 57,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.children("ol").hasClass("test")).toEqual(true);
+  });
+  it("should render additional props as attributes for the list", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      "aria-label": "test",
+      alphabet: mockAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 65,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 66,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.children("ol").prop("aria-label")).toEqual("test");
+  });
+  it("should match snapshot with default attributes", function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      alphabet: mockAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 74,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 75,
+        columnNumber: 5
+      }
+    })));
+    expect((0, _enzymeToJson["default"])(wrapper)).toMatchSnapshot();
+    wrapper.unmount();
+  });
+  it("should match snapshot with custom attributes", function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      className: "test-class",
+      "aria-label": "test-label",
+      alphabet: mockAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 84,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 89,
+        columnNumber: 5
+      }
+    })));
+    expect((0, _enzymeToJson["default"])(wrapper)).toMatchSnapshot();
+    wrapper.unmount();
+  });
+  it("should render an alphabet component that has been passed in", function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      alphabet: mockAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 98,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 99,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.find(mockAlphabet)).toHaveLength(1);
+    wrapper.unmount();
+  });
+  it("should render an alphabet component with a custom class", function () {
+    var customAlphabet = function customAlphabet() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "test-class",
+        __self: _this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 107,
+          columnNumber: 32
+        }
+      }, "Alphabet");
+    };
+
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_AZList.AZList, {
+      alphabet: customAlphabet,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 109,
+        columnNumber: 4
+      }
+    }, /*#__PURE__*/_react["default"].createElement(AZListItems, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 110,
+        columnNumber: 5
+      }
+    })));
+    expect(wrapper.find(customAlphabet).childAt(0).hasClass("test-class")).toEqual(true);
+    wrapper.unmount();
+  });
+});
+//# sourceMappingURL=nds-a-z-list.test.js.map

package/lib/__tests__/nds-a-z-list.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/__tests__/nds-a-z-list.test.js"],"names":["describe","AZListItems","mockAlphabet","it","wrapper","expect","toHaveLength","children","length","toEqual","hasClass","prop","toMatchSnapshot","unmount","find","customAlphabet","childAt"],"mappings":"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","sourcesContent":["\"use strict\";\n\nimport React from \"react\";\nimport { shallow, mount } from \"enzyme\";\nimport toJson from \"enzyme-to-json\";\n\nimport { AZList } from \"../AZList\";\n\ndescribe(\"A-Z List\", () => {\n\tconst AZListItems = () => (\n\t\t<>\n\t\t\t<li>Item one</li>\n\t\t\t<li>Item two</li>\n\t\t</>\n\t);\n\tconst mockAlphabet = () => (\n\t\t<ol>\n\t\t\t<li>\n\t\t\t\t<a href=\"#a\">A</a>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\t<a href=\"#b\">B</a>\n\t\t\t</li>\n\t\t</ol>\n\t);\n\n\tit(\"should render without crashing\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper).toHaveLength(1);\n\t});\n\n\tit(\"should render an ordered list component\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.children(\"ol\").length).toEqual(1);\n\t});\n\n\tit(\"should render an ordered list with the expected class name\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.children(\"ol\").hasClass(\"a-z-list\")).toEqual(true);\n\t});\n\n\tit(\"should append className prop to rendered class attribute for the list\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList className=\"test\" alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.children(\"ol\").hasClass(\"test\")).toEqual(true);\n\t});\n\n\tit(\"should render additional props as attributes for the list\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<AZList aria-label=\"test\" alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.children(\"ol\").prop(\"aria-label\")).toEqual(\"test\");\n\t});\n\n\tit(\"should match snapshot with default attributes\", () => {\n\t\tconst wrapper = mount(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(toJson(wrapper)).toMatchSnapshot();\n\t\twrapper.unmount();\n\t});\n\n\tit(\"should match snapshot with custom attributes\", () => {\n\t\tconst wrapper = mount(\n\t\t\t<AZList\n\t\t\t\tclassName=\"test-class\"\n\t\t\t\taria-label=\"test-label\"\n\t\t\t\talphabet={mockAlphabet}\n\t\t\t>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(toJson(wrapper)).toMatchSnapshot();\n\t\twrapper.unmount();\n\t});\n\n\tit(\"should render an alphabet component that has been passed in\", () => {\n\t\tconst wrapper = mount(\n\t\t\t<AZList alphabet={mockAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(wrapper.find(mockAlphabet)).toHaveLength(1);\n\t\twrapper.unmount();\n\t});\n\n\tit(\"should render an alphabet component with a custom class\", () => {\n\t\tconst customAlphabet = () => <div className=\"test-class\">Alphabet</div>;\n\t\tconst wrapper = mount(\n\t\t\t<AZList alphabet={customAlphabet}>\n\t\t\t\t<AZListItems />\n\t\t\t</AZList>\n\t\t);\n\t\texpect(\n\t\t\twrapper\n\t\t\t\t.find(customAlphabet)\n\t\t\t\t.childAt(0)\n\t\t\t\t.hasClass(\"test-class\")\n\t\t).toEqual(true);\n\t\twrapper.unmount();\n\t});\n});\n"],"file":"nds-a-z-list.test.js"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@nice-digital/nds-a-z-list",
+  "version": "0.2.0-alpha.0",
+  "description": "A to Z list component for the NICE Design System",
+  "main": "lib/AZList.js",
+  "module": "es/AZList.js",
+  "style": "scss/a-z-list.js",
+  "types": "nds-a-z-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": [
+    "a to z",
+    "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": "281c966b380ead58f34ec045c8f296ff11303e0f"
+}

package/scss/a-z-list.scss

@@ -0,0 +1,26 @@
+@import '~@nice-digital/nds-core/scss/core';
+
+.a-z-list {
+  list-style: none;
+  margin: 0;
+  max-width: 100%;
+  padding: 0;
+
+  &__item {
+    margin-bottom: rem($nds-spacing-large);
+  }
+
+  &__item-heading {
+    @include nds-font-size(h4);
+    background: $nds-colour-true-white;
+    border: 1px solid $nds-colour-border;
+    font-weight: 900;
+    margin: 0;
+    max-width: 100%;
+    padding: rem($nds-spacing-small $nds-spacing-medium);
+
+    &:focus {
+      outline: none;
+    }
+  }
+}