@nice-digital/nds-alphabet 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/es/Alphabet.js

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "id", "chunky"],
+    _excluded2 = ["children", "label", "to", "chunky", "elementType"];
+import React, { Children, isValidElement, cloneElement } from "react";
+import PropTypes from "prop-types";
+import "../scss/alphabet.scss";
+export var Alphabet = function Alphabet(props) {
+  var children = props.children,
+      id = props.id,
+      chunky = props.chunky,
+      attrs = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var chunkyChild = function chunkyChild(child) {
+    return /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+      chunky: true
+    }) : child;
+  };
+
+  return /*#__PURE__*/React.createElement("ol", _extends({
+    className: "alphabet " + (chunky ? "alphabet--chunky" : ""),
+    id: id || "a-to-z"
+  }, attrs), chunky ? Children.map(children, function (child) {
+    return chunkyChild(child);
+  }) : children);
+};
+Alphabet.propTypes = {
+  id: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  chunky: PropTypes.bool
+};
+export var Letter = function Letter(props) {
+  var children = props.children,
+      label = props.label,
+      to = props.to,
+      chunky = props.chunky,
+      elementType = props.elementType,
+      attrs = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  var body;
+
+  if (!to) {
+    // No link
+    body = /*#__PURE__*/React.createElement("span", {
+      "aria-label": label
+    }, children);
+  } else if (to[0] === "#") {
+    // Link to an id on the same page
+    body = /*#__PURE__*/React.createElement("a", {
+      href: to,
+      "aria-label": label
+    }, children);
+  } else {
+    // Link to somewhere else!
+    body = /*#__PURE__*/React.createElement(Link, {
+      elementType: elementType,
+      ariaLabel: label,
+      destination: to,
+      text: children
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("li", _extends({
+    className: "alphabet__letter " + (chunky ? "alphabet__letter--chunky" : "")
+  }, attrs), body);
+};
+Letter.propTypes = {
+  children: PropTypes.node.isRequired,
+  chunky: PropTypes.bool,
+  label: PropTypes.string,
+  to: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  elementType: PropTypes.elementType
+};
+
+var Link = function Link(_ref) {
+  var _linkProps;
+
+  var text = _ref.text,
+      destination = _ref.destination,
+      _ref$elementType = _ref.elementType,
+      ElementType = _ref$elementType === void 0 ? "a" : _ref$elementType,
+      method = _ref.method,
+      ariaLabel = _ref.ariaLabel;
+  var linkProps = (_linkProps = {
+    className: "alphabet__link"
+  }, _linkProps[method || ElementType === "a" && "href" || "to"] = destination, _linkProps);
+  return /*#__PURE__*/React.createElement("span", {
+    className: "alphabet__link-wrapper"
+  }, /*#__PURE__*/React.createElement(ElementType, _extends({
+    "aria-label": ariaLabel
+  }, linkProps), text), " ");
+};
+
+Link.propTypes = {
+  text: PropTypes.string,
+  destination: PropTypes.string,
+  elementType: PropTypes.elementType,
+  method: PropTypes.string,
+  ariaLabel: PropTypes.string
+};
+//# sourceMappingURL=Alphabet.js.map

package/es/Alphabet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Alphabet.js"],"names":["React","Children","isValidElement","cloneElement","PropTypes","Alphabet","props","children","id","chunky","attrs","chunkyChild","child","map","propTypes","string","node","isRequired","bool","Letter","label","to","elementType","body","oneOfType","Link","text","destination","ElementType","method","ariaLabel","linkProps","className"],"mappings":"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","sourcesContent":["import React, { Children, isValidElement, cloneElement } from \"react\";\nimport PropTypes from \"prop-types\";\nimport \"../scss/alphabet.scss\";\n\nexport const Alphabet = props => {\n\tconst { children, id, chunky, ...attrs } = props;\n\n\tconst chunkyChild = child => {\n\t\treturn isValidElement(child)\n\t\t\t? cloneElement(child, { chunky: true })\n\t\t\t: child;\n\t};\n\n\treturn (\n\t\t<ol\n\t\t\tclassName={`alphabet ${chunky ? \"alphabet--chunky\" : \"\"}`}\n\t\t\tid={id || \"a-to-z\"}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t{chunky ? Children.map(children, child => chunkyChild(child)) : children}\n\t\t</ol>\n\t);\n};\n\nAlphabet.propTypes = {\n\tid: PropTypes.string,\n\tchildren: PropTypes.node.isRequired,\n\tchunky: PropTypes.bool\n};\n\nexport const Letter = props => {\n\tconst { children, label, to, chunky, elementType, ...attrs } = props;\n\n\tlet body;\n\n\tif (!to) {\n\t\t// No link\n\t\tbody = <span aria-label={label}>{children}</span>;\n\t} else if (to[0] === \"#\") {\n\t\t// Link to an id on the same page\n\t\tbody = (\n\t\t\t<a href={to} aria-label={label}>\n\t\t\t\t{children}\n\t\t\t</a>\n\t\t);\n\t} else {\n\t\t// Link to somewhere else!\n\t\tbody = (\n\t\t\t<Link\n\t\t\t\telementType={elementType}\n\t\t\t\tariaLabel={label}\n\t\t\t\tdestination={to}\n\t\t\t\ttext={children}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li\n\t\t\tclassName={`alphabet__letter ${chunky ? \"alphabet__letter--chunky\" : \"\"}`}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t{body}\n\t\t</li>\n\t);\n};\n\nLetter.propTypes = {\n\tchildren: PropTypes.node.isRequired,\n\tchunky: PropTypes.bool,\n\tlabel: PropTypes.string,\n\tto: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\telementType: PropTypes.elementType\n};\n\nconst Link = ({\n\ttext,\n\tdestination,\n\telementType: ElementType = \"a\",\n\tmethod,\n\tariaLabel\n}) => {\n\tlet linkProps = {\n\t\tclassName: \"alphabet__link\",\n\t\t[method || (ElementType === \"a\" && \"href\") || \"to\"]: destination\n\t};\n\n\treturn (\n\t\t<span className=\"alphabet__link-wrapper\">\n\t\t\t<ElementType aria-label={ariaLabel} {...linkProps}>\n\t\t\t\t{text}\n\t\t\t</ElementType>{\" \"}\n\t\t</span>\n\t);\n};\n\nLink.propTypes = {\n\ttext: PropTypes.string,\n\tdestination: PropTypes.string,\n\telementType: PropTypes.elementType,\n\tmethod: PropTypes.string,\n\tariaLabel: PropTypes.string\n};\n"],"file":"Alphabet.js"}

package/es/__tests__/nds-alphabet.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import React from "react";
+import { shallow } from "enzyme";
+import { Alphabet, Letter } from "../Alphabet";
+describe("Alphabet", function () {
+  var allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
+  var letterElements = allLetters.map(function (letter) {
+    return /*#__PURE__*/React.createElement(Letter, {
+      key: letter,
+      to: "#" + letter,
+      label: "Letter " + letter
+    }, letter.toUpperCase());
+  });
+  it("should render without crashing", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, null, letterElements));
+    expect(wrapper).toHaveLength(1);
+  });
+  it("should add a class of 'alphabet' to the default variant", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, null, letterElements));
+    expect(wrapper.hasClass("alphabet")).toEqual(true);
+  });
+  it("should add a class of 'alphabet--chunky' to the chunky variant", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, {
+      chunky: true
+    }, letterElements));
+    expect(wrapper.hasClass("alphabet--chunky")).toEqual(true);
+  });
+  it("should render a child component for each letter of the alphabet", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, null, letterElements));
+    expect(wrapper.children()).toHaveLength(allLetters.length);
+  });
+  it("should render chunky child components when the chunky variant is specified on the parent", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, {
+      chunky: true
+    }, letterElements));
+    expect(wrapper.childAt(0).render() //  Used here due to this issue: https://github.com/enzymejs/enzyme/issues/1177#issuecomment-332717606
+    .hasClass("alphabet__letter alphabet__letter--chunky")).toEqual(true);
+  });
+  it("should append className prop to rendered class attribute", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, {
+      className: "test"
+    }, letterElements));
+    expect(wrapper.hasClass("test")).toEqual(true);
+  });
+  it("should render additional props as attributes", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, {
+      "aria-label": "hello"
+    }, letterElements));
+    expect(wrapper.prop("aria-label")).toEqual("hello");
+  });
+});
+//# sourceMappingURL=nds-alphabet.test.js.map

package/es/__tests__/nds-alphabet.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/__tests__/nds-alphabet.test.js"],"names":["React","shallow","Alphabet","Letter","describe","allLetters","split","letterElements","map","letter","toUpperCase","it","wrapper","expect","toHaveLength","hasClass","toEqual","children","length","childAt","render","prop"],"mappings":"AAAA;;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,QAAT,EAAmBC,MAAnB,QAAiC,aAAjC;AAEAC,QAAQ,CAAC,UAAD,EAAa,YAAM;AAC1B,MAAMC,UAAU,GAAG,6BAA6BC,KAA7B,CAAmC,EAAnC,CAAnB;AACA,MAAMC,cAAc,GAAGF,UAAU,CAACG,GAAX,CAAe,UAAAC,MAAM;AAAA,wBAC3C,oBAAC,MAAD;AAAQ,MAAA,GAAG,EAAEA,MAAb;AAAqB,MAAA,EAAE,QAAMA,MAA7B;AAAuC,MAAA,KAAK,cAAYA;AAAxD,OACEA,MAAM,CAACC,WAAP,EADF,CAD2C;AAAA,GAArB,CAAvB;AAMAC,EAAAA,EAAE,CAAC,gCAAD,EAAmC,YAAM;AAC1C,QAAMC,OAAO,GAAGX,OAAO,eAAC,oBAAC,QAAD,QAAWM,cAAX,CAAD,CAAvB;AACAM,IAAAA,MAAM,CAACD,OAAD,CAAN,CAAgBE,YAAhB,CAA6B,CAA7B;AACA,GAHC,CAAF;AAKAH,EAAAA,EAAE,CAAC,yDAAD,EAA4D,YAAM;AACnE,QAAMC,OAAO,GAAGX,OAAO,eAAC,oBAAC,QAAD,QAAWM,cAAX,CAAD,CAAvB;AACAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,UAAjB,CAAD,CAAN,CAAqCC,OAArC,CAA6C,IAA7C;AACA,GAHC,CAAF;AAKAL,EAAAA,EAAE,CAAC,gEAAD,EAAmE,YAAM;AAC1E,QAAMC,OAAO,GAAGX,OAAO,eAAC,oBAAC,QAAD;AAAU,MAAA,MAAM;AAAhB,OAAkBM,cAAlB,CAAD,CAAvB;AACAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,kBAAjB,CAAD,CAAN,CAA6CC,OAA7C,CAAqD,IAArD;AACA,GAHC,CAAF;AAKAL,EAAAA,EAAE,CAAC,iEAAD,EAAoE,YAAM;AAC3E,QAAMC,OAAO,GAAGX,OAAO,eAAC,oBAAC,QAAD,QAAWM,cAAX,CAAD,CAAvB;AACAM,IAAAA,MAAM,CAACD,OAAO,CAACK,QAAR,EAAD,CAAN,CAA2BH,YAA3B,CAAwCT,UAAU,CAACa,MAAnD;AACA,GAHC,CAAF;AAKAP,EAAAA,EAAE,CAAC,0FAAD,EAA6F,YAAM;AACpG,QAAMC,OAAO,GAAGX,OAAO,eAAC,oBAAC,QAAD;AAAU,MAAA,MAAM;AAAhB,OAAkBM,cAAlB,CAAD,CAAvB;AACAM,IAAAA,MAAM,CACLD,OAAO,CACLO,OADF,CACU,CADV,EAEEC,MAFF,GAEW;AAFX,KAGEL,QAHF,CAGW,2CAHX,CADK,CAAN,CAKEC,OALF,CAKU,IALV;AAMA,GARC,CAAF;AAUAL,EAAAA,EAAE,CAAC,0DAAD,EAA6D,YAAM;AACpE,QAAMC,OAAO,GAAGX,OAAO,eACtB,oBAAC,QAAD;AAAU,MAAA,SAAS,EAAC;AAApB,OAA4BM,cAA5B,CADsB,CAAvB;AAGAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,MAAjB,CAAD,CAAN,CAAiCC,OAAjC,CAAyC,IAAzC;AACA,GALC,CAAF;AAOAL,EAAAA,EAAE,CAAC,8CAAD,EAAiD,YAAM;AACxD,QAAMC,OAAO,GAAGX,OAAO,eACtB,oBAAC,QAAD;AAAU,oBAAW;AAArB,OAA8BM,cAA9B,CADsB,CAAvB;AAGAM,IAAAA,MAAM,CAACD,OAAO,CAACS,IAAR,CAAa,YAAb,CAAD,CAAN,CAAmCL,OAAnC,CAA2C,OAA3C;AACA,GALC,CAAF;AAMA,CAnDO,CAAR","sourcesContent":["\"use strict\";\n\nimport React from \"react\";\nimport { shallow } from \"enzyme\";\nimport { Alphabet, Letter } from \"../Alphabet\";\n\ndescribe(\"Alphabet\", () => {\n\tconst allLetters = \"abcdefghijklmnopqrstuvwxyz\".split(\"\");\n\tconst letterElements = allLetters.map(letter => (\n\t\t<Letter key={letter} to={`#${letter}`} label={`Letter ${letter}`}>\n\t\t\t{letter.toUpperCase()}\n\t\t</Letter>\n\t));\n\n\tit(\"should render without crashing\", () => {\n\t\tconst wrapper = shallow(<Alphabet>{letterElements}</Alphabet>);\n\t\texpect(wrapper).toHaveLength(1);\n\t});\n\n\tit(\"should add a class of 'alphabet' to the default variant\", () => {\n\t\tconst wrapper = shallow(<Alphabet>{letterElements}</Alphabet>);\n\t\texpect(wrapper.hasClass(\"alphabet\")).toEqual(true);\n\t});\n\n\tit(\"should add a class of 'alphabet--chunky' to the chunky variant\", () => {\n\t\tconst wrapper = shallow(<Alphabet chunky>{letterElements}</Alphabet>);\n\t\texpect(wrapper.hasClass(\"alphabet--chunky\")).toEqual(true);\n\t});\n\n\tit(\"should render a child component for each letter of the alphabet\", () => {\n\t\tconst wrapper = shallow(<Alphabet>{letterElements}</Alphabet>);\n\t\texpect(wrapper.children()).toHaveLength(allLetters.length);\n\t});\n\n\tit(\"should render chunky child components when the chunky variant is specified on the parent\", () => {\n\t\tconst wrapper = shallow(<Alphabet chunky>{letterElements}</Alphabet>);\n\t\texpect(\n\t\t\twrapper\n\t\t\t\t.childAt(0)\n\t\t\t\t.render() //  Used here due to this issue: https://github.com/enzymejs/enzyme/issues/1177#issuecomment-332717606\n\t\t\t\t.hasClass(\"alphabet__letter alphabet__letter--chunky\")\n\t\t).toEqual(true);\n\t});\n\n\tit(\"should append className prop to rendered class attribute\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<Alphabet className=\"test\">{letterElements}</Alphabet>\n\t\t);\n\t\texpect(wrapper.hasClass(\"test\")).toEqual(true);\n\t});\n\n\tit(\"should render additional props as attributes\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<Alphabet aria-label=\"hello\">{letterElements}</Alphabet>\n\t\t);\n\t\texpect(wrapper.prop(\"aria-label\")).toEqual(\"hello\");\n\t});\n});\n"],"file":"nds-alphabet.test.js"}

package/lib/Alphabet.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Letter = exports.Alphabet = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+require("../scss/alphabet.scss");
+
+var _excluded = ["children", "id", "chunky"],
+    _excluded2 = ["children", "label", "to", "chunky", "elementType"];
+
+var _jsxFileName = "C:\\xampp\\htdocs\\nice-design-system\\components\\nds-alphabet\\src\\Alphabet.js",
+    _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Alphabet = function Alphabet(props) {
+  var children = props.children,
+      id = props.id,
+      chunky = props.chunky,
+      attrs = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+
+  var chunkyChild = function chunkyChild(child) {
+    return /*#__PURE__*/(0, _react.isValidElement)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, {
+      chunky: true
+    }) : child;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("ol", (0, _extends2["default"])({
+    className: "alphabet " + (chunky ? "alphabet--chunky" : ""),
+    id: id || "a-to-z"
+  }, attrs, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 15,
+      columnNumber: 3
+    }
+  }), chunky ? _react.Children.map(children, function (child) {
+    return chunkyChild(child);
+  }) : children);
+};
+
+exports.Alphabet = Alphabet;
+Alphabet.propTypes = {
+  id: _propTypes["default"].string,
+  children: _propTypes["default"].node.isRequired,
+  chunky: _propTypes["default"].bool
+};
+
+var Letter = function Letter(props) {
+  var children = props.children,
+      label = props.label,
+      to = props.to,
+      chunky = props.chunky,
+      elementType = props.elementType,
+      attrs = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded2);
+  var body;
+
+  if (!to) {
+    // No link
+    body = /*#__PURE__*/_react["default"].createElement("span", {
+      "aria-label": label,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 38,
+        columnNumber: 10
+      }
+    }, children);
+  } else if (to[0] === "#") {
+    // Link to an id on the same page
+    body = /*#__PURE__*/_react["default"].createElement("a", {
+      href: to,
+      "aria-label": label,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 42,
+        columnNumber: 4
+      }
+    }, children);
+  } else {
+    // Link to somewhere else!
+    body = /*#__PURE__*/_react["default"].createElement(Link, {
+      elementType: elementType,
+      ariaLabel: label,
+      destination: to,
+      text: children,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 49,
+        columnNumber: 4
+      }
+    });
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("li", (0, _extends2["default"])({
+    className: "alphabet__letter " + (chunky ? "alphabet__letter--chunky" : "")
+  }, attrs, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 59,
+      columnNumber: 3
+    }
+  }), body);
+};
+
+exports.Letter = Letter;
+Letter.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  chunky: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  to: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),
+  elementType: _propTypes["default"].elementType
+};
+
+var Link = function Link(_ref) {
+  var _linkProps;
+
+  var text = _ref.text,
+      destination = _ref.destination,
+      _ref$elementType = _ref.elementType,
+      ElementType = _ref$elementType === void 0 ? "a" : _ref$elementType,
+      method = _ref.method,
+      ariaLabel = _ref.ariaLabel;
+  var linkProps = (_linkProps = {
+    className: "alphabet__link"
+  }, _linkProps[method || ElementType === "a" && "href" || "to"] = destination, _linkProps);
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: "alphabet__link-wrapper",
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 89,
+      columnNumber: 3
+    }
+  }, /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
+    "aria-label": ariaLabel
+  }, linkProps, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 90,
+      columnNumber: 4
+    }
+  }), text), " ");
+};
+
+Link.propTypes = {
+  text: _propTypes["default"].string,
+  destination: _propTypes["default"].string,
+  elementType: _propTypes["default"].elementType,
+  method: _propTypes["default"].string,
+  ariaLabel: _propTypes["default"].string
+};
+//# sourceMappingURL=Alphabet.js.map

package/lib/Alphabet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Alphabet.js"],"names":["Alphabet","props","children","id","chunky","attrs","chunkyChild","child","Children","map","propTypes","PropTypes","string","node","isRequired","bool","Letter","label","to","elementType","body","oneOfType","Link","text","destination","ElementType","method","ariaLabel","linkProps","className"],"mappings":"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","sourcesContent":["import React, { Children, isValidElement, cloneElement } from \"react\";\nimport PropTypes from \"prop-types\";\nimport \"../scss/alphabet.scss\";\n\nexport const Alphabet = props => {\n\tconst { children, id, chunky, ...attrs } = props;\n\n\tconst chunkyChild = child => {\n\t\treturn isValidElement(child)\n\t\t\t? cloneElement(child, { chunky: true })\n\t\t\t: child;\n\t};\n\n\treturn (\n\t\t<ol\n\t\t\tclassName={`alphabet ${chunky ? \"alphabet--chunky\" : \"\"}`}\n\t\t\tid={id || \"a-to-z\"}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t{chunky ? Children.map(children, child => chunkyChild(child)) : children}\n\t\t</ol>\n\t);\n};\n\nAlphabet.propTypes = {\n\tid: PropTypes.string,\n\tchildren: PropTypes.node.isRequired,\n\tchunky: PropTypes.bool\n};\n\nexport const Letter = props => {\n\tconst { children, label, to, chunky, elementType, ...attrs } = props;\n\n\tlet body;\n\n\tif (!to) {\n\t\t// No link\n\t\tbody = <span aria-label={label}>{children}</span>;\n\t} else if (to[0] === \"#\") {\n\t\t// Link to an id on the same page\n\t\tbody = (\n\t\t\t<a href={to} aria-label={label}>\n\t\t\t\t{children}\n\t\t\t</a>\n\t\t);\n\t} else {\n\t\t// Link to somewhere else!\n\t\tbody = (\n\t\t\t<Link\n\t\t\t\telementType={elementType}\n\t\t\t\tariaLabel={label}\n\t\t\t\tdestination={to}\n\t\t\t\ttext={children}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li\n\t\t\tclassName={`alphabet__letter ${chunky ? \"alphabet__letter--chunky\" : \"\"}`}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t{body}\n\t\t</li>\n\t);\n};\n\nLetter.propTypes = {\n\tchildren: PropTypes.node.isRequired,\n\tchunky: PropTypes.bool,\n\tlabel: PropTypes.string,\n\tto: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\telementType: PropTypes.elementType\n};\n\nconst Link = ({\n\ttext,\n\tdestination,\n\telementType: ElementType = \"a\",\n\tmethod,\n\tariaLabel\n}) => {\n\tlet linkProps = {\n\t\tclassName: \"alphabet__link\",\n\t\t[method || (ElementType === \"a\" && \"href\") || \"to\"]: destination\n\t};\n\n\treturn (\n\t\t<span className=\"alphabet__link-wrapper\">\n\t\t\t<ElementType aria-label={ariaLabel} {...linkProps}>\n\t\t\t\t{text}\n\t\t\t</ElementType>{\" \"}\n\t\t</span>\n\t);\n};\n\nLink.propTypes = {\n\ttext: PropTypes.string,\n\tdestination: PropTypes.string,\n\telementType: PropTypes.elementType,\n\tmethod: PropTypes.string,\n\tariaLabel: PropTypes.string\n};\n"],"file":"Alphabet.js"}

package/lib/__tests__/nds-alphabet.test.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _Alphabet = require("../Alphabet");
+
+var _jsxFileName = "C:\\xampp\\htdocs\\nice-design-system\\components\\nds-alphabet\\src\\__tests__\\nds-alphabet.test.js",
+    _this = void 0;
+
+describe("Alphabet", function () {
+  var allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
+  var letterElements = allLetters.map(function (letter) {
+    return /*#__PURE__*/_react["default"].createElement(_Alphabet.Letter, {
+      key: letter,
+      to: "#" + letter,
+      label: "Letter " + letter,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 10,
+        columnNumber: 3
+      }
+    }, letter.toUpperCase());
+  });
+  it("should render without crashing", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 16,
+        columnNumber: 27
+      }
+    }, letterElements));
+    expect(wrapper).toHaveLength(1);
+  });
+  it("should add a class of 'alphabet' to the default variant", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 21,
+        columnNumber: 27
+      }
+    }, letterElements));
+    expect(wrapper.hasClass("alphabet")).toEqual(true);
+  });
+  it("should add a class of 'alphabet--chunky' to the chunky variant", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
+      chunky: true,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 26,
+        columnNumber: 27
+      }
+    }, letterElements));
+    expect(wrapper.hasClass("alphabet--chunky")).toEqual(true);
+  });
+  it("should render a child component for each letter of the alphabet", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 31,
+        columnNumber: 27
+      }
+    }, letterElements));
+    expect(wrapper.children()).toHaveLength(allLetters.length);
+  });
+  it("should render chunky child components when the chunky variant is specified on the parent", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
+      chunky: true,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 36,
+        columnNumber: 27
+      }
+    }, letterElements));
+    expect(wrapper.childAt(0).render() //  Used here due to this issue: https://github.com/enzymejs/enzyme/issues/1177#issuecomment-332717606
+    .hasClass("alphabet__letter alphabet__letter--chunky")).toEqual(true);
+  });
+  it("should append className prop to rendered class attribute", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
+      className: "test",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 47,
+        columnNumber: 4
+      }
+    }, letterElements));
+    expect(wrapper.hasClass("test")).toEqual(true);
+  });
+  it("should render additional props as attributes", function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
+      "aria-label": "hello",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 54,
+        columnNumber: 4
+      }
+    }, letterElements));
+    expect(wrapper.prop("aria-label")).toEqual("hello");
+  });
+});
+//# sourceMappingURL=nds-alphabet.test.js.map

package/lib/__tests__/nds-alphabet.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/__tests__/nds-alphabet.test.js"],"names":["describe","allLetters","split","letterElements","map","letter","toUpperCase","it","wrapper","expect","toHaveLength","hasClass","toEqual","children","length","childAt","render","prop"],"mappings":"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","sourcesContent":["\"use strict\";\n\nimport React from \"react\";\nimport { shallow } from \"enzyme\";\nimport { Alphabet, Letter } from \"../Alphabet\";\n\ndescribe(\"Alphabet\", () => {\n\tconst allLetters = \"abcdefghijklmnopqrstuvwxyz\".split(\"\");\n\tconst letterElements = allLetters.map(letter => (\n\t\t<Letter key={letter} to={`#${letter}`} label={`Letter ${letter}`}>\n\t\t\t{letter.toUpperCase()}\n\t\t</Letter>\n\t));\n\n\tit(\"should render without crashing\", () => {\n\t\tconst wrapper = shallow(<Alphabet>{letterElements}</Alphabet>);\n\t\texpect(wrapper).toHaveLength(1);\n\t});\n\n\tit(\"should add a class of 'alphabet' to the default variant\", () => {\n\t\tconst wrapper = shallow(<Alphabet>{letterElements}</Alphabet>);\n\t\texpect(wrapper.hasClass(\"alphabet\")).toEqual(true);\n\t});\n\n\tit(\"should add a class of 'alphabet--chunky' to the chunky variant\", () => {\n\t\tconst wrapper = shallow(<Alphabet chunky>{letterElements}</Alphabet>);\n\t\texpect(wrapper.hasClass(\"alphabet--chunky\")).toEqual(true);\n\t});\n\n\tit(\"should render a child component for each letter of the alphabet\", () => {\n\t\tconst wrapper = shallow(<Alphabet>{letterElements}</Alphabet>);\n\t\texpect(wrapper.children()).toHaveLength(allLetters.length);\n\t});\n\n\tit(\"should render chunky child components when the chunky variant is specified on the parent\", () => {\n\t\tconst wrapper = shallow(<Alphabet chunky>{letterElements}</Alphabet>);\n\t\texpect(\n\t\t\twrapper\n\t\t\t\t.childAt(0)\n\t\t\t\t.render() //  Used here due to this issue: https://github.com/enzymejs/enzyme/issues/1177#issuecomment-332717606\n\t\t\t\t.hasClass(\"alphabet__letter alphabet__letter--chunky\")\n\t\t).toEqual(true);\n\t});\n\n\tit(\"should append className prop to rendered class attribute\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<Alphabet className=\"test\">{letterElements}</Alphabet>\n\t\t);\n\t\texpect(wrapper.hasClass(\"test\")).toEqual(true);\n\t});\n\n\tit(\"should render additional props as attributes\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<Alphabet aria-label=\"hello\">{letterElements}</Alphabet>\n\t\t);\n\t\texpect(wrapper.prop(\"aria-label\")).toEqual(\"hello\");\n\t});\n});\n"],"file":"nds-alphabet.test.js"}

package/nds-alphabet.d.ts

@@ -0,0 +1,18 @@
+declare module "@nice-digital/nds-alphabet" {
+	import React = require("react");
+
+	export interface AlphabetProps {
+		id?: string;
+		children: React.ReactElement<LetterProps>[];
+		chunky?: boolean;
+		[key: string]: unknown;
+	}
+
+	export interface LetterProps {
+		children: React.ReactNode;
+		label?: string;
+		chunky?: boolean;
+		to?: string | false;
+		[key: string]: unknown;
+	}
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@nice-digital/nds-alphabet",
+  "version": "0.2.0-alpha.0",
+  "description": "Alphabet component for the NICE Design System",
+  "main": "lib/Alphabet.js",
+  "module": "es/Alphabet.js",
+  "style": "scss/alphabet.js",
+  "types": "nds-alphabet.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": "fc384b7fb39d7d1d39e3029fb010e40c257c13f4"
+}

package/scss/alphabet.scss

@@ -0,0 +1,69 @@
+@import '~@nice-digital/nds-core/scss/core';
+
+.alphabet {
+  list-style: none;
+  margin: rem(0 0 $nds-spacing-large);
+  max-width: 100%;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  @supports (display: grid) {
+    column-gap: rem($nds-spacing-small);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(4ch, 1fr));
+    row-gap: rem($nds-spacing-small);
+
+    &--chunky {
+      grid-template-columns: repeat(auto-fit, minmax(6ch, 1fr));
+    }
+  }
+
+  &__letter {
+    display: inline-block;
+    font-weight: bold;
+    margin: rem(0 $nds-spacing-small $nds-spacing-small 0);
+
+    &--chunky {
+      @include nds-font-size(h4);
+
+      a,
+      span {
+        width: 4.95ch;
+      }
+    }
+
+    a,
+    span {
+      display: block;
+      padding: rem($nds-spacing-small 0);
+      text-align: center;
+      width: 3.95ch;
+    }
+
+    a {
+      background: $nds-colour-true-white;
+      border: 1px solid $nds-colour-border;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    span {
+      color: $nds-colour-nice-dark-grey;
+    }
+
+    @supports (display: grid) {
+      margin: 0;
+
+      a,
+      span {
+        width: auto;
+      }
+    }
+  }
+}