@nice-digital/nds-alphabet 1.0.1-alpha.0 → 1.0.4-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/es/Alphabet.js +2 -4
- package/es/Alphabet.js.map +1 -1
- package/es/__tests__/nds-alphabet.test.js.map +1 -1
- package/lib/Alphabet.js +8 -16
- package/lib/Alphabet.js.map +1 -1
- package/lib/__tests__/nds-alphabet.test.js.map +1 -1
- package/package.json +3 -3
- package/scss/alphabet.scss +16 -10
package/README.md
CHANGED
|
@@ -101,7 +101,7 @@ The element type used to render the component; can be a React component.
|
|
|
101
101
|
If you're not using [React](#react), then import the SCSS directly into your application by:
|
|
102
102
|
|
|
103
103
|
```scss
|
|
104
|
-
@
|
|
104
|
+
@forward '@nice-digital/nds-alphabet/scss/alphabet';
|
|
105
105
|
```
|
|
106
106
|
|
|
107
107
|
### HTML
|
package/es/Alphabet.js
CHANGED
|
@@ -86,11 +86,9 @@ var Link = function Link(_ref) {
|
|
|
86
86
|
var linkProps = (_linkProps = {
|
|
87
87
|
className: "alphabet__link"
|
|
88
88
|
}, _linkProps[method || ElementType === "a" && "href" || "to"] = destination, _linkProps);
|
|
89
|
-
return /*#__PURE__*/React.createElement(
|
|
90
|
-
className: "alphabet__link-wrapper"
|
|
91
|
-
}, /*#__PURE__*/React.createElement(ElementType, _extends({
|
|
89
|
+
return /*#__PURE__*/React.createElement(ElementType, _extends({
|
|
92
90
|
"aria-label": ariaLabel
|
|
93
|
-
}, linkProps), text)
|
|
91
|
+
}, linkProps), text);
|
|
94
92
|
};
|
|
95
93
|
|
|
96
94
|
Link.propTypes = {
|
package/es/Alphabet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Alphabet.js","names":["React","Children","isValidElement","cloneElement","PropTypes","Alphabet","props","children","className","id","chunky","attrs","chunkyChild","child","join","map","propTypes","string","node","isRequired","bool","Letter","label","to","elementType","body","oneOfType","Link","text","destination","ElementType","method","ariaLabel","linkProps"],"sources":["../src/Alphabet.js"],"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, className, 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={[\n\t\t\t\t`alphabet ${chunky ? \"alphabet--chunky\" : \"\"}`,\n\t\t\t\tclassName\n\t\t\t].join(\" \")}\n\t\t\tid={id || \"a-to-z\"}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t{chunky\n\t\t\t\t? Children.map(children, (child) => chunkyChild(child))\n\t\t\t\t: 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\tclassName: PropTypes.string\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<ElementType aria-label={ariaLabel} {...linkProps}>\n\t\t\t{text}\n\t\t</ElementType>\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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"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"],"sources":["../../src/__tests__/nds-alphabet.test.js"],"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 custom class when one is specified\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<Alphabet className=\"test-class\">{letterElements}</Alphabet>\n\t\t);\n\t\texpect(wrapper.hasClass(\"test-class\")).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"],"mappings":"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"}
|
package/lib/Alphabet.js
CHANGED
|
@@ -77,7 +77,7 @@ var Letter = function Letter(props) {
|
|
|
77
77
|
__self: _this,
|
|
78
78
|
__source: {
|
|
79
79
|
fileName: _jsxFileName,
|
|
80
|
-
lineNumber:
|
|
80
|
+
lineNumber: 44,
|
|
81
81
|
columnNumber: 10
|
|
82
82
|
}
|
|
83
83
|
}, children);
|
|
@@ -89,7 +89,7 @@ var Letter = function Letter(props) {
|
|
|
89
89
|
__self: _this,
|
|
90
90
|
__source: {
|
|
91
91
|
fileName: _jsxFileName,
|
|
92
|
-
lineNumber:
|
|
92
|
+
lineNumber: 48,
|
|
93
93
|
columnNumber: 4
|
|
94
94
|
}
|
|
95
95
|
}, children);
|
|
@@ -103,7 +103,7 @@ var Letter = function Letter(props) {
|
|
|
103
103
|
__self: _this,
|
|
104
104
|
__source: {
|
|
105
105
|
fileName: _jsxFileName,
|
|
106
|
-
lineNumber:
|
|
106
|
+
lineNumber: 55,
|
|
107
107
|
columnNumber: 4
|
|
108
108
|
}
|
|
109
109
|
});
|
|
@@ -115,7 +115,7 @@ var Letter = function Letter(props) {
|
|
|
115
115
|
__self: _this,
|
|
116
116
|
__source: {
|
|
117
117
|
fileName: _jsxFileName,
|
|
118
|
-
lineNumber:
|
|
118
|
+
lineNumber: 65,
|
|
119
119
|
columnNumber: 3
|
|
120
120
|
}
|
|
121
121
|
}), body);
|
|
@@ -142,24 +142,16 @@ var Link = function Link(_ref) {
|
|
|
142
142
|
var linkProps = (_linkProps = {
|
|
143
143
|
className: "alphabet__link"
|
|
144
144
|
}, _linkProps[method || ElementType === "a" && "href" || "to"] = destination, _linkProps);
|
|
145
|
-
return /*#__PURE__*/_react["default"].createElement("
|
|
146
|
-
className: "alphabet__link-wrapper",
|
|
147
|
-
__self: _this,
|
|
148
|
-
__source: {
|
|
149
|
-
fileName: _jsxFileName,
|
|
150
|
-
lineNumber: 93,
|
|
151
|
-
columnNumber: 3
|
|
152
|
-
}
|
|
153
|
-
}, /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
|
|
145
|
+
return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
|
|
154
146
|
"aria-label": ariaLabel
|
|
155
147
|
}, linkProps, {
|
|
156
148
|
__self: _this,
|
|
157
149
|
__source: {
|
|
158
150
|
fileName: _jsxFileName,
|
|
159
|
-
lineNumber:
|
|
160
|
-
columnNumber:
|
|
151
|
+
lineNumber: 95,
|
|
152
|
+
columnNumber: 3
|
|
161
153
|
}
|
|
162
|
-
}), text)
|
|
154
|
+
}), text);
|
|
163
155
|
};
|
|
164
156
|
|
|
165
157
|
Link.propTypes = {
|
package/lib/Alphabet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Alphabet.js","names":["Alphabet","props","children","className","id","chunky","attrs","chunkyChild","child","isValidElement","cloneElement","join","Children","map","propTypes","PropTypes","string","node","isRequired","bool","Letter","label","to","elementType","body","oneOfType","Link","text","destination","ElementType","method","ariaLabel","linkProps"],"sources":["../src/Alphabet.js"],"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, className, 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={[\n\t\t\t\t`alphabet ${chunky ? \"alphabet--chunky\" : \"\"}`,\n\t\t\t\tclassName\n\t\t\t].join(\" \")}\n\t\t\tid={id || \"a-to-z\"}\n\t\t\t{...attrs}\n\t\t>\n\t\t\t{chunky\n\t\t\t\t? Children.map(children, (child) => chunkyChild(child))\n\t\t\t\t: 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\tclassName: PropTypes.string\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<ElementType aria-label={ariaLabel} {...linkProps}>\n\t\t\t{text}\n\t\t</ElementType>\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"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAW;EAClC,IAAQC,QAAR,GAAsDD,KAAtD,CAAQC,QAAR;EAAA,IAAkBC,SAAlB,GAAsDF,KAAtD,CAAkBE,SAAlB;EAAA,IAA6BC,EAA7B,GAAsDH,KAAtD,CAA6BG,EAA7B;EAAA,IAAiCC,MAAjC,GAAsDJ,KAAtD,CAAiCI,MAAjC;EAAA,IAA4CC,KAA5C,kDAAsDL,KAAtD;;EAEA,IAAMM,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAW;IAC9B,OAAO,iBAAAC,qBAAA,EAAeD,KAAf,iBACJ,IAAAE,mBAAA,EAAaF,KAAb,EAAoB;MAAEH,MAAM,EAAE;IAAV,CAApB,CADI,GAEJG,KAFH;EAGA,CAJD;;EAMA,oBACC;IACC,SAAS,EAAE,gBACEH,MAAM,GAAG,kBAAH,GAAwB,EADhC,GAEVF,SAFU,EAGTQ,IAHS,CAGJ,GAHI,CADZ;IAKC,EAAE,EAAEP,EAAE,IAAI;EALX,GAMKE,KANL;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,IAQED,MAAM,GACJO,eAAA,CAASC,GAAT,CAAaX,QAAb,EAAuB,UAACM,KAAD;IAAA,OAAWD,WAAW,CAACC,KAAD,CAAtB;EAAA,CAAvB,CADI,GAEJN,QAVJ,CADD;AAcA,CAvBM;;;AAyBPF,QAAQ,CAACc,SAAT,GAAqB;EACpBV,EAAE,EAAEW,qBAAA,CAAUC,MADM;EAEpBd,QAAQ,EAAEa,qBAAA,CAAUE,IAAV,CAAeC,UAFL;EAGpBb,MAAM,EAAEU,qBAAA,CAAUI,IAHE;EAIpBhB,SAAS,EAAEY,qBAAA,CAAUC;AAJD,CAArB;;AAOO,IAAMI,MAAM,GAAG,SAATA,MAAS,CAACnB,KAAD,EAAW;EAChC,IAAQC,QAAR,GAA+DD,KAA/D,CAAQC,QAAR;EAAA,IAAkBmB,KAAlB,GAA+DpB,KAA/D,CAAkBoB,KAAlB;EAAA,IAAyBC,EAAzB,GAA+DrB,KAA/D,CAAyBqB,EAAzB;EAAA,IAA6BjB,MAA7B,GAA+DJ,KAA/D,CAA6BI,MAA7B;EAAA,IAAqCkB,WAArC,GAA+DtB,KAA/D,CAAqCsB,WAArC;EAAA,IAAqDjB,KAArD,kDAA+DL,KAA/D;EAEA,IAAIuB,IAAJ;;EAEA,IAAI,CAACF,EAAL,EAAS;IACR;IACAE,IAAI,gBAAG;MAAM,cAAYH,KAAlB;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAA0BnB,QAA1B,CAAP;EACA,CAHD,MAGO,IAAIoB,EAAE,CAAC,CAAD,CAAF,KAAU,GAAd,EAAmB;IACzB;IACAE,IAAI,gBACH;MAAG,IAAI,EAAEF,EAAT;MAAa,cAAYD,KAAzB;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GACEnB,QADF,CADD;EAKA,CAPM,MAOA;IACN;IACAsB,IAAI,gBACH,gCAAC,IAAD;MACC,WAAW,EAAED,WADd;MAEC,SAAS,EAAEF,KAFZ;MAGC,WAAW,EAAEC,EAHd;MAIC,IAAI,EAAEpB,QAJP;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,EADD;EAQA;;EAED,oBACC;IACC,SAAS,yBAAsBG,MAAM,GAAG,0BAAH,GAAgC,EAA5D;EADV,GAEKC,KAFL;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,IAIEkB,IAJF,CADD;AAQA,CAnCM;;;AAqCPJ,MAAM,CAACN,SAAP,GAAmB;EAClBZ,QAAQ,EAAEa,qBAAA,CAAUE,IAAV,CAAeC,UADP;EAElBb,MAAM,EAAEU,qBAAA,CAAUI,IAFA;EAGlBE,KAAK,EAAEN,qBAAA,CAAUC,MAHC;EAIlBM,EAAE,EAAEP,qBAAA,CAAUU,SAAV,CAAoB,CAACV,qBAAA,CAAUC,MAAX,EAAmBD,qBAAA,CAAUI,IAA7B,CAApB,CAJc;EAKlBI,WAAW,EAAER,qBAAA,CAAUQ;AALL,CAAnB;;AAQA,IAAMG,IAAI,GAAG,SAAPA,IAAO,OAMP;EAAA;;EAAA,IALLC,IAKK,QALLA,IAKK;EAAA,IAJLC,WAIK,QAJLA,WAIK;EAAA,4BAHLL,WAGK;EAAA,IAHQM,WAGR,iCAHsB,GAGtB;EAAA,IAFLC,MAEK,QAFLA,MAEK;EAAA,IADLC,SACK,QADLA,SACK;EACL,IAAIC,SAAS;IACZ7B,SAAS,EAAE;EADC,cAEX2B,MAAM,IAAKD,WAAW,KAAK,GAAhB,IAAuB,MAAlC,IAA6C,IAFlC,IAEyCD,WAFzC,aAAb;EAKA,oBACC,gCAAC,WAAD;IAAa,cAAYG;EAAzB,GAAwCC,SAAxC;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,IACEL,IADF,CADD;AAKA,CAjBD;;AAmBAD,IAAI,CAACZ,SAAL,GAAiB;EAChBa,IAAI,EAAEZ,qBAAA,CAAUC,MADA;EAEhBY,WAAW,EAAEb,qBAAA,CAAUC,MAFP;EAGhBO,WAAW,EAAER,qBAAA,CAAUQ,WAHP;EAIhBO,MAAM,EAAEf,qBAAA,CAAUC,MAJF;EAKhBe,SAAS,EAAEhB,qBAAA,CAAUC;AALL,CAAjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"nds-alphabet.test.js","names":["describe","allLetters","split","letterElements","map","letter","toUpperCase","it","wrapper","shallow","expect","toHaveLength","hasClass","toEqual","children","length","childAt","render","prop"],"sources":["../../src/__tests__/nds-alphabet.test.js"],"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 custom class when one is specified\", () => {\n\t\tconst wrapper = shallow(\n\t\t\t<Alphabet className=\"test-class\">{letterElements}</Alphabet>\n\t\t);\n\t\texpect(wrapper.hasClass(\"test-class\")).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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-alphabet",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4-alpha.0",
|
|
4
4
|
"description": "Alphabet component for the NICE Design System",
|
|
5
5
|
"main": "lib/Alphabet.js",
|
|
6
6
|
"module": "es/Alphabet.js",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"homepage": "https://design-system.nice.org.uk/",
|
|
35
35
|
"license": "MIT",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@nice-digital/nds-core": "^2.0.
|
|
37
|
+
"@nice-digital/nds-core": "^2.0.4-alpha.0",
|
|
38
38
|
"prop-types": "^15.8.1"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "5bbe911b595b15d7d039aec0972d5aeabcd8de6f"
|
|
41
41
|
}
|
package/scss/alphabet.scss
CHANGED
|
@@ -16,11 +16,13 @@
|
|
|
16
16
|
@supports (display: grid) {
|
|
17
17
|
column-gap: utils.rem(spacing.$small);
|
|
18
18
|
display: grid;
|
|
19
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
19
|
+
grid-template-columns: repeat(auto-fit, minmax(3ch, 1fr));
|
|
20
20
|
row-gap: utils.rem(spacing.$small);
|
|
21
21
|
|
|
22
22
|
&--chunky {
|
|
23
|
+
column-gap: utils.rem(spacing.$medium);
|
|
23
24
|
grid-template-columns: repeat(auto-fit, minmax(6ch, 1fr));
|
|
25
|
+
row-gap: utils.rem(spacing.$medium);
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
|
|
@@ -29,18 +31,10 @@
|
|
|
29
31
|
font-weight: bold;
|
|
30
32
|
margin: utils.rem(0 spacing.$small spacing.$small 0);
|
|
31
33
|
|
|
32
|
-
&--chunky {
|
|
33
|
-
@include typography.font-size(h4);
|
|
34
|
-
|
|
35
|
-
a,
|
|
36
|
-
span {
|
|
37
|
-
width: 4.95ch;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
34
|
a,
|
|
42
35
|
span {
|
|
43
36
|
display: block;
|
|
37
|
+
line-height: 1;
|
|
44
38
|
padding: utils.rem(spacing.$small 0);
|
|
45
39
|
text-align: center;
|
|
46
40
|
width: 3.95ch;
|
|
@@ -49,6 +43,7 @@
|
|
|
49
43
|
a {
|
|
50
44
|
background: colours.$alphabet-letter-background;
|
|
51
45
|
border: 1px solid colours.$border;
|
|
46
|
+
border-radius: utils.rem(spacing.$xx-small);
|
|
52
47
|
text-decoration: none;
|
|
53
48
|
|
|
54
49
|
&:hover {
|
|
@@ -60,7 +55,18 @@
|
|
|
60
55
|
color: colours.$alphabet-letter-span;
|
|
61
56
|
}
|
|
62
57
|
|
|
58
|
+
&--chunky {
|
|
59
|
+
@include typography.font-size(h4);
|
|
60
|
+
|
|
61
|
+
a,
|
|
62
|
+
span {
|
|
63
|
+
padding: utils.rem(spacing.$medium 0);
|
|
64
|
+
width: 4.95ch;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
63
68
|
@supports (display: grid) {
|
|
69
|
+
display: block;
|
|
64
70
|
margin: 0;
|
|
65
71
|
|
|
66
72
|
a,
|