@nice-digital/nds-alphabet 1.0.3-alpha.0 → 1.0.6-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/es/Alphabet.js +2 -4
- package/es/Alphabet.js.map +1 -1
- package/lib/Alphabet.js +4 -12
- package/lib/Alphabet.js.map +1 -1
- package/package.json +3 -3
- package/scss/alphabet.scss +20 -7
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,"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<
|
|
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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"}
|
package/lib/Alphabet.js
CHANGED
|
@@ -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: 95,
|
|
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,"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<
|
|
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":"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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.6-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.6-alpha.0",
|
|
38
38
|
"prop-types": "^15.8.1"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "0ad5f104aab2d044a2a87dfa8a197b8e78e97849"
|
|
41
41
|
}
|
package/scss/alphabet.scss
CHANGED
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
@use '@nice-digital/nds-core/scss/typography';
|
|
4
4
|
@use '@nice-digital/nds-core/scss/utils';
|
|
5
5
|
|
|
6
|
+
// To meet Success Criterion 2.5.5: Target Size (Enhanced) of WCAG 2.2
|
|
7
|
+
$-minimum-anchor-size: 44px;
|
|
8
|
+
|
|
6
9
|
.alphabet {
|
|
7
10
|
list-style: none;
|
|
8
11
|
margin: utils.rem(0 0 spacing.$large);
|
|
@@ -14,13 +17,17 @@
|
|
|
14
17
|
}
|
|
15
18
|
|
|
16
19
|
@supports (display: grid) {
|
|
17
|
-
column-gap: utils.rem(
|
|
20
|
+
column-gap: utils.rem(
|
|
21
|
+
spacing.$small - 2
|
|
22
|
+
); // Hack to get 26 letters to fit across on 1 line on desktop
|
|
18
23
|
display: grid;
|
|
19
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
20
|
-
row-gap: utils.rem(spacing.$small);
|
|
24
|
+
grid-template-columns: repeat(auto-fit, minmax($-minimum-anchor-size, 1fr));
|
|
25
|
+
row-gap: utils.rem(spacing.$small - 2);
|
|
21
26
|
|
|
22
27
|
&--chunky {
|
|
28
|
+
column-gap: utils.rem(spacing.$medium);
|
|
23
29
|
grid-template-columns: repeat(auto-fit, minmax(6ch, 1fr));
|
|
30
|
+
row-gap: utils.rem(spacing.$medium);
|
|
24
31
|
}
|
|
25
32
|
}
|
|
26
33
|
|
|
@@ -31,11 +38,14 @@
|
|
|
31
38
|
|
|
32
39
|
a,
|
|
33
40
|
span {
|
|
34
|
-
|
|
41
|
+
align-items: center;
|
|
42
|
+
aspect-ratio: 1 / 1;
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: center;
|
|
35
45
|
line-height: 1;
|
|
36
46
|
padding: utils.rem(spacing.$small 0);
|
|
37
47
|
text-align: center;
|
|
38
|
-
width:
|
|
48
|
+
width: utils.rem($-minimum-anchor-size);
|
|
39
49
|
}
|
|
40
50
|
|
|
41
51
|
a {
|
|
@@ -44,7 +54,7 @@
|
|
|
44
54
|
text-decoration: none;
|
|
45
55
|
|
|
46
56
|
&:hover {
|
|
47
|
-
text-decoration: underline;
|
|
57
|
+
text-decoration-line: underline;
|
|
48
58
|
}
|
|
49
59
|
}
|
|
50
60
|
|
|
@@ -54,19 +64,22 @@
|
|
|
54
64
|
|
|
55
65
|
&--chunky {
|
|
56
66
|
@include typography.font-size(h4);
|
|
67
|
+
margin: utils.rem(0 spacing.$medium spacing.$medium 0);
|
|
57
68
|
|
|
58
69
|
a,
|
|
59
70
|
span {
|
|
60
71
|
padding: utils.rem(spacing.$medium 0);
|
|
61
|
-
width:
|
|
72
|
+
width: utils.rem(spacing.$x-large);
|
|
62
73
|
}
|
|
63
74
|
}
|
|
64
75
|
|
|
65
76
|
@supports (display: grid) {
|
|
77
|
+
display: block;
|
|
66
78
|
margin: 0;
|
|
67
79
|
|
|
68
80
|
a,
|
|
69
81
|
span {
|
|
82
|
+
padding: 0;
|
|
70
83
|
width: auto;
|
|
71
84
|
}
|
|
72
85
|
}
|