@nice-digital/nds-alphabet 0.2.0-alpha.0 → 0.3.1
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 +149 -0
- package/es/Alphabet.js +5 -3
- package/es/Alphabet.js.map +1 -1
- package/es/__tests__/nds-alphabet.test.js +6 -0
- package/es/__tests__/nds-alphabet.test.js.map +1 -1
- package/lib/Alphabet.js +12 -10
- package/lib/Alphabet.js.map +1 -1
- package/lib/__tests__/nds-alphabet.test.js +18 -6
- package/lib/__tests__/nds-alphabet.test.js.map +1 -1
- package/nds-alphabet.d.ts +3 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
# `@nice-digital/nds-alphabet`
|
|
2
|
+
|
|
3
|
+
> Alphabet component for the NICE Design System
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Install Node, and then:
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm i @nice-digital/nds-alphabet --save
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### React
|
|
16
|
+
|
|
17
|
+
Import the `Alphabet` and `Letter` components from the package and use within JSX:
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
import React from "react";
|
|
21
|
+
import { Alphabet, Letter } from "@nice-digital/nds-alphabet";
|
|
22
|
+
|
|
23
|
+
const allLetters = "abcdefghijklmnopqrstuvwxyz".split("");
|
|
24
|
+
|
|
25
|
+
<Alphabet>
|
|
26
|
+
{allLetters.map(letter => (
|
|
27
|
+
<Letter key={letter} to={`#${letter}`} label={`Letter ${letter}`}>
|
|
28
|
+
{letter.toUpperCase()}
|
|
29
|
+
</Letter>
|
|
30
|
+
))}
|
|
31
|
+
</Alphabet>
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.
|
|
36
|
+
|
|
37
|
+
#### Props (Alphabet)
|
|
38
|
+
|
|
39
|
+
##### chunky
|
|
40
|
+
|
|
41
|
+
- Type `boolean` (default: false)
|
|
42
|
+
|
|
43
|
+
Whether to render the alphabet in its chunky (i.e. large) variant. This will
|
|
44
|
+
get passed to its children as a modifier.
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
<Alphabet chunky>
|
|
48
|
+
{children}
|
|
49
|
+
</Alphabet>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
##### id
|
|
53
|
+
|
|
54
|
+
- Type `string` (default: "a-to-z")
|
|
55
|
+
|
|
56
|
+
The id to give the generated `<ol>` element. Defaults to "a-to-z" if not specified
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
<Alphabet id="test-id">
|
|
60
|
+
{children}
|
|
61
|
+
</Alphabet>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
##### children
|
|
65
|
+
|
|
66
|
+
- Type: `React.ReactNode`
|
|
67
|
+
|
|
68
|
+
As the Alphabet component renders an `ol` element, it must have at least one `<li>`
|
|
69
|
+
child.
|
|
70
|
+
|
|
71
|
+
```js
|
|
72
|
+
<Alphabet>
|
|
73
|
+
<li>Item one</li>
|
|
74
|
+
<li>Item two</li>
|
|
75
|
+
<li>Item three</li>
|
|
76
|
+
</Alphabet>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
#### Props (Letter)
|
|
80
|
+
|
|
81
|
+
##### to
|
|
82
|
+
|
|
83
|
+
- Type: `string`
|
|
84
|
+
|
|
85
|
+
If specified, the link destination. If not specified, a span is rendered instead.
|
|
86
|
+
|
|
87
|
+
##### label
|
|
88
|
+
|
|
89
|
+
- Type: `string`
|
|
90
|
+
|
|
91
|
+
Creates an `aria-label` attribute on the generated element.
|
|
92
|
+
|
|
93
|
+
##### elementType
|
|
94
|
+
|
|
95
|
+
- Type: `Element` (default: `a`)
|
|
96
|
+
|
|
97
|
+
The element type used to render the component; can be a React component.
|
|
98
|
+
|
|
99
|
+
### SCSS
|
|
100
|
+
|
|
101
|
+
If you're not using [React](#react), then import the SCSS directly into your application by:
|
|
102
|
+
|
|
103
|
+
```scss
|
|
104
|
+
@import "~@nice-digital/nds-alphabet/scss/alphabet";
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### HTML
|
|
108
|
+
|
|
109
|
+
If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
#### Standard variant
|
|
113
|
+
```html
|
|
114
|
+
<ol class="alphabet" id="a-to-z">
|
|
115
|
+
<li class="alphabet__letter"><a href="#a" aria-label="Letter a">A</a></li>
|
|
116
|
+
<li class="alphabet__letter"><a href="#b" aria-label="Letter b">B</a></li>
|
|
117
|
+
<li class="alphabet__letter"><a href="#c" aria-label="Letter c">C</a></li>
|
|
118
|
+
...
|
|
119
|
+
<li class="alphabet__letter"><a href="#x" aria-label="Letter x">X</a></li>
|
|
120
|
+
<li class="alphabet__letter"><a href="#y" aria-label="Letter y">Y</a></li>
|
|
121
|
+
<li class="alphabet__letter"><a href="#z" aria-label="Letter z">Z</a></li>
|
|
122
|
+
</ol>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
#### Chunky variant
|
|
126
|
+
```html
|
|
127
|
+
<ol class="alphabet alphabet--chunky" id="a-to-z">
|
|
128
|
+
<li class="alphabet__letter alphabet__letter--chunky"><a href="#a" aria-label="Letter a">A</a></li>
|
|
129
|
+
<li class="alphabet__letter alphabet__letter--chunky"><a href="#b" aria-label="Letter b">B</a></li>
|
|
130
|
+
<li class="alphabet__letter alphabet__letter--chunky"><a href="#c" aria-label="Letter c">C</a></li>
|
|
131
|
+
...
|
|
132
|
+
<li class="alphabet__letter alphabet__letter--chunky"><a href="#x" aria-label="Letter x">X</a></li>
|
|
133
|
+
<li class="alphabet__letter alphabet__letter--chunky"><a href="#y" aria-label="Letter y">Y</a></li>
|
|
134
|
+
<li class="alphabet__letter alphabet__letter--chunky"><a href="#z" aria-label="Letter z">Z</a></li>
|
|
135
|
+
</ol>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
#### No links
|
|
139
|
+
```html
|
|
140
|
+
<ol class="alphabet" id="a-to-z">
|
|
141
|
+
<li class="alphabet__letter"><span aria-label="Letter a">A</span></li>
|
|
142
|
+
<li class="alphabet__letter"><span aria-label="Letter b">B</span></li>
|
|
143
|
+
<li class="alphabet__letter"><span aria-label="Letter c">C</span></li>
|
|
144
|
+
...
|
|
145
|
+
<li class="alphabet__letter"><span aria-label="Letter x">X</span></li>
|
|
146
|
+
<li class="alphabet__letter"><span aria-label="Letter y">Y</span></li>
|
|
147
|
+
<li class="alphabet__letter"><span aria-label="Letter z">Z</span></li>
|
|
148
|
+
</ol>
|
|
149
|
+
```
|
package/es/Alphabet.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["children", "id", "chunky"],
|
|
3
|
+
var _excluded = ["children", "className", "id", "chunky"],
|
|
4
4
|
_excluded2 = ["children", "label", "to", "chunky", "elementType"];
|
|
5
5
|
import React, { Children, isValidElement, cloneElement } from "react";
|
|
6
6
|
import PropTypes from "prop-types";
|
|
7
7
|
import "../scss/alphabet.scss";
|
|
8
8
|
export var Alphabet = function Alphabet(props) {
|
|
9
9
|
var children = props.children,
|
|
10
|
+
className = props.className,
|
|
10
11
|
id = props.id,
|
|
11
12
|
chunky = props.chunky,
|
|
12
13
|
attrs = _objectWithoutPropertiesLoose(props, _excluded);
|
|
@@ -18,7 +19,7 @@ export var Alphabet = function Alphabet(props) {
|
|
|
18
19
|
};
|
|
19
20
|
|
|
20
21
|
return /*#__PURE__*/React.createElement("ol", _extends({
|
|
21
|
-
className: "alphabet " + (chunky ? "alphabet--chunky" : ""),
|
|
22
|
+
className: ["alphabet " + (chunky ? "alphabet--chunky" : ""), className].join(" "),
|
|
22
23
|
id: id || "a-to-z"
|
|
23
24
|
}, attrs), chunky ? Children.map(children, function (child) {
|
|
24
25
|
return chunkyChild(child);
|
|
@@ -27,7 +28,8 @@ export var Alphabet = function Alphabet(props) {
|
|
|
27
28
|
Alphabet.propTypes = {
|
|
28
29
|
id: PropTypes.string,
|
|
29
30
|
children: PropTypes.node.isRequired,
|
|
30
|
-
chunky: PropTypes.bool
|
|
31
|
+
chunky: PropTypes.bool,
|
|
32
|
+
className: PropTypes.string
|
|
31
33
|
};
|
|
32
34
|
export var Letter = function Letter(props) {
|
|
33
35
|
var children = props.children,
|
package/es/Alphabet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"
|
|
1
|
+
{"version":3,"sources":["../src/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"],"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, 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 ? 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\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<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"}
|
|
@@ -20,6 +20,12 @@ describe("Alphabet", function () {
|
|
|
20
20
|
var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, null, letterElements));
|
|
21
21
|
expect(wrapper.hasClass("alphabet")).toEqual(true);
|
|
22
22
|
});
|
|
23
|
+
it("should add a custom class when one is specified", function () {
|
|
24
|
+
var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, {
|
|
25
|
+
className: "test-class"
|
|
26
|
+
}, letterElements));
|
|
27
|
+
expect(wrapper.hasClass("test-class")).toEqual(true);
|
|
28
|
+
});
|
|
23
29
|
it("should add a class of 'alphabet--chunky' to the chunky variant", function () {
|
|
24
30
|
var wrapper = shallow( /*#__PURE__*/React.createElement(Alphabet, {
|
|
25
31
|
chunky: true
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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":"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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 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"],"file":"nds-alphabet.test.js"}
|
package/lib/Alphabet.js
CHANGED
|
@@ -15,10 +15,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
15
15
|
|
|
16
16
|
require("../scss/alphabet.scss");
|
|
17
17
|
|
|
18
|
-
var _excluded = ["children", "id", "chunky"],
|
|
18
|
+
var _excluded = ["children", "className", "id", "chunky"],
|
|
19
19
|
_excluded2 = ["children", "label", "to", "chunky", "elementType"];
|
|
20
20
|
|
|
21
|
-
var _jsxFileName = "C:\\
|
|
21
|
+
var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-alphabet\\src\\Alphabet.js",
|
|
22
22
|
_this = void 0;
|
|
23
23
|
|
|
24
24
|
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); }
|
|
@@ -27,6 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
27
|
|
|
28
28
|
var Alphabet = function Alphabet(props) {
|
|
29
29
|
var children = props.children,
|
|
30
|
+
className = props.className,
|
|
30
31
|
id = props.id,
|
|
31
32
|
chunky = props.chunky,
|
|
32
33
|
attrs = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
|
|
@@ -38,7 +39,7 @@ var Alphabet = function Alphabet(props) {
|
|
|
38
39
|
};
|
|
39
40
|
|
|
40
41
|
return /*#__PURE__*/_react["default"].createElement("ol", (0, _extends2["default"])({
|
|
41
|
-
className: "alphabet " + (chunky ? "alphabet--chunky" : ""),
|
|
42
|
+
className: ["alphabet " + (chunky ? "alphabet--chunky" : ""), className].join(" "),
|
|
42
43
|
id: id || "a-to-z"
|
|
43
44
|
}, attrs, {
|
|
44
45
|
__self: _this,
|
|
@@ -56,7 +57,8 @@ exports.Alphabet = Alphabet;
|
|
|
56
57
|
Alphabet.propTypes = {
|
|
57
58
|
id: _propTypes["default"].string,
|
|
58
59
|
children: _propTypes["default"].node.isRequired,
|
|
59
|
-
chunky: _propTypes["default"].bool
|
|
60
|
+
chunky: _propTypes["default"].bool,
|
|
61
|
+
className: _propTypes["default"].string
|
|
60
62
|
};
|
|
61
63
|
|
|
62
64
|
var Letter = function Letter(props) {
|
|
@@ -75,7 +77,7 @@ var Letter = function Letter(props) {
|
|
|
75
77
|
__self: _this,
|
|
76
78
|
__source: {
|
|
77
79
|
fileName: _jsxFileName,
|
|
78
|
-
lineNumber:
|
|
80
|
+
lineNumber: 42,
|
|
79
81
|
columnNumber: 10
|
|
80
82
|
}
|
|
81
83
|
}, children);
|
|
@@ -87,7 +89,7 @@ var Letter = function Letter(props) {
|
|
|
87
89
|
__self: _this,
|
|
88
90
|
__source: {
|
|
89
91
|
fileName: _jsxFileName,
|
|
90
|
-
lineNumber:
|
|
92
|
+
lineNumber: 46,
|
|
91
93
|
columnNumber: 4
|
|
92
94
|
}
|
|
93
95
|
}, children);
|
|
@@ -101,7 +103,7 @@ var Letter = function Letter(props) {
|
|
|
101
103
|
__self: _this,
|
|
102
104
|
__source: {
|
|
103
105
|
fileName: _jsxFileName,
|
|
104
|
-
lineNumber:
|
|
106
|
+
lineNumber: 53,
|
|
105
107
|
columnNumber: 4
|
|
106
108
|
}
|
|
107
109
|
});
|
|
@@ -113,7 +115,7 @@ var Letter = function Letter(props) {
|
|
|
113
115
|
__self: _this,
|
|
114
116
|
__source: {
|
|
115
117
|
fileName: _jsxFileName,
|
|
116
|
-
lineNumber:
|
|
118
|
+
lineNumber: 63,
|
|
117
119
|
columnNumber: 3
|
|
118
120
|
}
|
|
119
121
|
}), body);
|
|
@@ -145,7 +147,7 @@ var Link = function Link(_ref) {
|
|
|
145
147
|
__self: _this,
|
|
146
148
|
__source: {
|
|
147
149
|
fileName: _jsxFileName,
|
|
148
|
-
lineNumber:
|
|
150
|
+
lineNumber: 93,
|
|
149
151
|
columnNumber: 3
|
|
150
152
|
}
|
|
151
153
|
}, /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
|
|
@@ -154,7 +156,7 @@ var Link = function Link(_ref) {
|
|
|
154
156
|
__self: _this,
|
|
155
157
|
__source: {
|
|
156
158
|
fileName: _jsxFileName,
|
|
157
|
-
lineNumber:
|
|
159
|
+
lineNumber: 94,
|
|
158
160
|
columnNumber: 4
|
|
159
161
|
}
|
|
160
162
|
}), text), " ");
|
package/lib/Alphabet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"
|
|
1
|
+
{"version":3,"sources":["../src/Alphabet.js"],"names":["Alphabet","props","children","className","id","chunky","attrs","chunkyChild","child","join","Children","map","propTypes","PropTypes","string","node","isRequired","bool","Letter","label","to","elementType","body","oneOfType","Link","text","destination","ElementType","method","ariaLabel","linkProps"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAAAC,KAAK,EAAI;AAChC,MAAQC,QAAR,GAAsDD,KAAtD,CAAQC,QAAR;AAAA,MAAkBC,SAAlB,GAAsDF,KAAtD,CAAkBE,SAAlB;AAAA,MAA6BC,EAA7B,GAAsDH,KAAtD,CAA6BG,EAA7B;AAAA,MAAiCC,MAAjC,GAAsDJ,KAAtD,CAAiCI,MAAjC;AAAA,MAA4CC,KAA5C,kDAAsDL,KAAtD;;AAEA,MAAMM,WAAW,GAAG,SAAdA,WAAc,CAAAC,KAAK,EAAI;AAC5B,WAAO,wCAAeA,KAAf,iBACJ,yBAAaA,KAAb,EAAoB;AAAEH,MAAAA,MAAM,EAAE;AAAV,KAApB,CADI,GAEJG,KAFH;AAGA,GAJD;;AAMA,sBACC;AACC,IAAA,SAAS,EAAE,gBACEH,MAAM,GAAG,kBAAH,GAAwB,EADhC,GAEVF,SAFU,EAGTM,IAHS,CAGJ,GAHI,CADZ;AAKC,IAAA,EAAE,EAAEL,EAAE,IAAI;AALX,KAMKE,KANL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQED,MAAM,GAAGK,gBAASC,GAAT,CAAaT,QAAb,EAAuB,UAAAM,KAAK;AAAA,WAAID,WAAW,CAACC,KAAD,CAAf;AAAA,GAA5B,CAAH,GAAyDN,QARjE,CADD;AAYA,CArBM;;;AAuBPF,QAAQ,CAACY,SAAT,GAAqB;AACpBR,EAAAA,EAAE,EAAES,sBAAUC,MADM;AAEpBZ,EAAAA,QAAQ,EAAEW,sBAAUE,IAAV,CAAeC,UAFL;AAGpBX,EAAAA,MAAM,EAAEQ,sBAAUI,IAHE;AAIpBd,EAAAA,SAAS,EAAEU,sBAAUC;AAJD,CAArB;;AAOO,IAAMI,MAAM,GAAG,SAATA,MAAS,CAAAjB,KAAK,EAAI;AAC9B,MAAQC,QAAR,GAA+DD,KAA/D,CAAQC,QAAR;AAAA,MAAkBiB,KAAlB,GAA+DlB,KAA/D,CAAkBkB,KAAlB;AAAA,MAAyBC,EAAzB,GAA+DnB,KAA/D,CAAyBmB,EAAzB;AAAA,MAA6Bf,MAA7B,GAA+DJ,KAA/D,CAA6BI,MAA7B;AAAA,MAAqCgB,WAArC,GAA+DpB,KAA/D,CAAqCoB,WAArC;AAAA,MAAqDf,KAArD,kDAA+DL,KAA/D;AAEA,MAAIqB,IAAJ;;AAEA,MAAI,CAACF,EAAL,EAAS;AACR;AACAE,IAAAA,IAAI,gBAAG;AAAM,oBAAYH,KAAlB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAA0BjB,QAA1B,CAAP;AACA,GAHD,MAGO,IAAIkB,EAAE,CAAC,CAAD,CAAF,KAAU,GAAd,EAAmB;AACzB;AACAE,IAAAA,IAAI,gBACH;AAAG,MAAA,IAAI,EAAEF,EAAT;AAAa,oBAAYD,KAAzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACEjB,QADF,CADD;AAKA,GAPM,MAOA;AACN;AACAoB,IAAAA,IAAI,gBACH,gCAAC,IAAD;AACC,MAAA,WAAW,EAAED,WADd;AAEC,MAAA,SAAS,EAAEF,KAFZ;AAGC,MAAA,WAAW,EAAEC,EAHd;AAIC,MAAA,IAAI,EAAElB,QAJP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MADD;AAQA;;AAED,sBACC;AACC,IAAA,SAAS,yBAAsBG,MAAM,GAAG,0BAAH,GAAgC,EAA5D;AADV,KAEKC,KAFL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAIEgB,IAJF,CADD;AAQA,CAnCM;;;AAqCPJ,MAAM,CAACN,SAAP,GAAmB;AAClBV,EAAAA,QAAQ,EAAEW,sBAAUE,IAAV,CAAeC,UADP;AAElBX,EAAAA,MAAM,EAAEQ,sBAAUI,IAFA;AAGlBE,EAAAA,KAAK,EAAEN,sBAAUC,MAHC;AAIlBM,EAAAA,EAAE,EAAEP,sBAAUU,SAAV,CAAoB,CAACV,sBAAUC,MAAX,EAAmBD,sBAAUI,IAA7B,CAApB,CAJc;AAKlBI,EAAAA,WAAW,EAAER,sBAAUQ;AALL,CAAnB;;AAQA,IAAMG,IAAI,GAAG,SAAPA,IAAO,OAMP;AAAA;;AAAA,MALLC,IAKK,QALLA,IAKK;AAAA,MAJLC,WAIK,QAJLA,WAIK;AAAA,8BAHLL,WAGK;AAAA,MAHQM,WAGR,iCAHsB,GAGtB;AAAA,MAFLC,MAEK,QAFLA,MAEK;AAAA,MADLC,SACK,QADLA,SACK;AACL,MAAIC,SAAS;AACZ3B,IAAAA,SAAS,EAAE;AADC,gBAEXyB,MAAM,IAAKD,WAAW,KAAK,GAAhB,IAAuB,MAAlC,IAA6C,IAFlC,IAEyCD,WAFzC,aAAb;AAKA,sBACC;AAAM,IAAA,SAAS,EAAC,wBAAhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBACC,gCAAC,WAAD;AAAa,kBAAYG;AAAzB,KAAwCC,SAAxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MACEL,IADF,CADD,EAGgB,GAHhB,CADD;AAOA,CAnBD;;AAqBAD,IAAI,CAACZ,SAAL,GAAiB;AAChBa,EAAAA,IAAI,EAAEZ,sBAAUC,MADA;AAEhBY,EAAAA,WAAW,EAAEb,sBAAUC,MAFP;AAGhBO,EAAAA,WAAW,EAAER,sBAAUQ,WAHP;AAIhBO,EAAAA,MAAM,EAAEf,sBAAUC,MAJF;AAKhBe,EAAAA,SAAS,EAAEhB,sBAAUC;AALL,CAAjB","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 ? 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\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<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"}
|
|
@@ -8,7 +8,7 @@ var _enzyme = require("enzyme");
|
|
|
8
8
|
|
|
9
9
|
var _Alphabet = require("../Alphabet");
|
|
10
10
|
|
|
11
|
-
var _jsxFileName = "C:\\
|
|
11
|
+
var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-alphabet\\src\\__tests__\\nds-alphabet.test.js",
|
|
12
12
|
_this = void 0;
|
|
13
13
|
|
|
14
14
|
describe("Alphabet", function () {
|
|
@@ -48,13 +48,25 @@ describe("Alphabet", function () {
|
|
|
48
48
|
}, letterElements));
|
|
49
49
|
expect(wrapper.hasClass("alphabet")).toEqual(true);
|
|
50
50
|
});
|
|
51
|
+
it("should add a custom class when one is specified", function () {
|
|
52
|
+
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
|
|
53
|
+
className: "test-class",
|
|
54
|
+
__self: _this,
|
|
55
|
+
__source: {
|
|
56
|
+
fileName: _jsxFileName,
|
|
57
|
+
lineNumber: 27,
|
|
58
|
+
columnNumber: 4
|
|
59
|
+
}
|
|
60
|
+
}, letterElements));
|
|
61
|
+
expect(wrapper.hasClass("test-class")).toEqual(true);
|
|
62
|
+
});
|
|
51
63
|
it("should add a class of 'alphabet--chunky' to the chunky variant", function () {
|
|
52
64
|
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Alphabet.Alphabet, {
|
|
53
65
|
chunky: true,
|
|
54
66
|
__self: _this,
|
|
55
67
|
__source: {
|
|
56
68
|
fileName: _jsxFileName,
|
|
57
|
-
lineNumber:
|
|
69
|
+
lineNumber: 33,
|
|
58
70
|
columnNumber: 27
|
|
59
71
|
}
|
|
60
72
|
}, letterElements));
|
|
@@ -65,7 +77,7 @@ describe("Alphabet", function () {
|
|
|
65
77
|
__self: _this,
|
|
66
78
|
__source: {
|
|
67
79
|
fileName: _jsxFileName,
|
|
68
|
-
lineNumber:
|
|
80
|
+
lineNumber: 38,
|
|
69
81
|
columnNumber: 27
|
|
70
82
|
}
|
|
71
83
|
}, letterElements));
|
|
@@ -77,7 +89,7 @@ describe("Alphabet", function () {
|
|
|
77
89
|
__self: _this,
|
|
78
90
|
__source: {
|
|
79
91
|
fileName: _jsxFileName,
|
|
80
|
-
lineNumber:
|
|
92
|
+
lineNumber: 43,
|
|
81
93
|
columnNumber: 27
|
|
82
94
|
}
|
|
83
95
|
}, letterElements));
|
|
@@ -90,7 +102,7 @@ describe("Alphabet", function () {
|
|
|
90
102
|
__self: _this,
|
|
91
103
|
__source: {
|
|
92
104
|
fileName: _jsxFileName,
|
|
93
|
-
lineNumber:
|
|
105
|
+
lineNumber: 54,
|
|
94
106
|
columnNumber: 4
|
|
95
107
|
}
|
|
96
108
|
}, letterElements));
|
|
@@ -102,7 +114,7 @@ describe("Alphabet", function () {
|
|
|
102
114
|
__self: _this,
|
|
103
115
|
__source: {
|
|
104
116
|
fileName: _jsxFileName,
|
|
105
|
-
lineNumber:
|
|
117
|
+
lineNumber: 61,
|
|
106
118
|
columnNumber: 4
|
|
107
119
|
}
|
|
108
120
|
}, letterElements));
|
|
@@ -1 +1 @@
|
|
|
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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
|
|
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":"AAAA;;;;AAEA;;AACA;;AACA;;;;;AAEAA,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,gCAAC,gBAAD;AAAQ,MAAA,GAAG,EAAEA,MAAb;AAAqB,MAAA,EAAE,QAAMA,MAA7B;AAAuC,MAAA,KAAK,cAAYA,MAAxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OACEA,MAAM,CAACC,WAAP,EADF,CAD2C;AAAA,GAArB,CAAvB;AAMAC,EAAAA,EAAE,CAAC,gCAAD,EAAmC,YAAM;AAC1C,QAAMC,OAAO,GAAG,mCAAQ,gCAAC,kBAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAWL,cAAX,CAAR,CAAhB;AACAM,IAAAA,MAAM,CAACD,OAAD,CAAN,CAAgBE,YAAhB,CAA6B,CAA7B;AACA,GAHC,CAAF;AAKAH,EAAAA,EAAE,CAAC,yDAAD,EAA4D,YAAM;AACnE,QAAMC,OAAO,GAAG,mCAAQ,gCAAC,kBAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAWL,cAAX,CAAR,CAAhB;AACAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,UAAjB,CAAD,CAAN,CAAqCC,OAArC,CAA6C,IAA7C;AACA,GAHC,CAAF;AAKAL,EAAAA,EAAE,CAAC,iDAAD,EAAoD,YAAM;AAC3D,QAAMC,OAAO,GAAG,mCACf,gCAAC,kBAAD;AAAU,MAAA,SAAS,EAAC,YAApB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAkCL,cAAlC,CADe,CAAhB;AAGAM,IAAAA,MAAM,CAACD,OAAO,CAACG,QAAR,CAAiB,YAAjB,CAAD,CAAN,CAAuCC,OAAvC,CAA+C,IAA/C;AACA,GALC,CAAF;AAOAL,EAAAA,EAAE,CAAC,gEAAD,EAAmE,YAAM;AAC1E,QAAMC,OAAO,GAAG,mCAAQ,gCAAC,kBAAD;AAAU,MAAA,MAAM,MAAhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAkBL,cAAlB,CAAR,CAAhB;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,GAAG,mCAAQ,gCAAC,kBAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAWL,cAAX,CAAR,CAAhB;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,GAAG,mCAAQ,gCAAC,kBAAD;AAAU,MAAA,MAAM,MAAhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAkBL,cAAlB,CAAR,CAAhB;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,GAAG,mCACf,gCAAC,kBAAD;AAAU,MAAA,SAAS,EAAC,MAApB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAA4BL,cAA5B,CADe,CAAhB;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,GAAG,mCACf,gCAAC,kBAAD;AAAU,oBAAW,OAArB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAA8BL,cAA9B,CADe,CAAhB;AAGAM,IAAAA,MAAM,CAACD,OAAO,CAACS,IAAR,CAAa,YAAb,CAAD,CAAN,CAAmCL,OAAnC,CAA2C,OAA3C;AACA,GALC,CAAF;AAMA,CA1DO,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 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"],"file":"nds-alphabet.test.js"}
|
package/nds-alphabet.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-alphabet",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Alphabet component for the NICE Design System",
|
|
5
5
|
"main": "lib/Alphabet.js",
|
|
6
6
|
"module": "es/Alphabet.js",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"url": "https://github.com/nice-digital/nice-design-system/issues"
|
|
28
28
|
},
|
|
29
29
|
"keywords": [
|
|
30
|
-
"
|
|
31
|
-
"
|
|
30
|
+
"alphabet",
|
|
31
|
+
"a to z"
|
|
32
32
|
],
|
|
33
33
|
"author": "Chris Barker <chris.barker@nice.org.uk>",
|
|
34
34
|
"homepage": "https://design-system.nice.org.uk/",
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"prop-types": "^15.8.1"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "df3d79b9696c7f06caeb26dd2828190ba3c17dc2"
|
|
40
40
|
}
|