@nice-digital/nds-core 1.2.9-alpha.0 → 1.2.12
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 -9
- package/es/breakpoints.js +2 -4
- package/es/breakpoints.js.map +1 -1
- package/es/core.js +2 -1
- package/es/core.js.map +1 -1
- package/lib/breakpoints.js +2 -2
- package/lib/breakpoints.js.map +1 -1
- package/lib/core.js +18 -0
- package/lib/core.js.map +1 -1
- package/lib/utils.js +1 -1
- package/package.json +3 -3
- package/scss/typography/_typography-headings.scss +4 -1
package/README.md
CHANGED
package/es/breakpoints.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* These correspond with the breakpoints defined in SASS.
|
|
8
8
|
* Often not used directly, but via matchesFrom.
|
|
9
9
|
*/
|
|
10
|
-
var breakpoints = {
|
|
10
|
+
export var breakpoints = {
|
|
11
11
|
xs: 400,
|
|
12
12
|
sm: 600,
|
|
13
13
|
md: 900,
|
|
@@ -26,7 +26,7 @@ var breakpoints = {
|
|
|
26
26
|
* var matches = matchesFrom("xs");
|
|
27
27
|
*/
|
|
28
28
|
|
|
29
|
-
var matchesFrom = function matchesFrom(breakpointName) {
|
|
29
|
+
export var matchesFrom = function matchesFrom(breakpointName) {
|
|
30
30
|
var breakpointPx = breakpoints[breakpointName];
|
|
31
31
|
|
|
32
32
|
if (!breakpointPx) {
|
|
@@ -37,6 +37,4 @@ var matchesFrom = function matchesFrom(breakpointName) {
|
|
|
37
37
|
|
|
38
38
|
return window.matchMedia("(min-width: " + breakpointPx / 16 + "em)").matches;
|
|
39
39
|
};
|
|
40
|
-
|
|
41
|
-
export { breakpoints as default, matchesFrom };
|
|
42
40
|
//# sourceMappingURL=breakpoints.js.map
|
package/es/breakpoints.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/breakpoints.js"],"names":["breakpoints","xs","sm","md","lg","xl","matchesFrom","breakpointName","breakpointPx","Error","window","matchMedia","matches"
|
|
1
|
+
{"version":3,"sources":["../src/breakpoints.js"],"names":["breakpoints","xs","sm","md","lg","xl","matchesFrom","breakpointName","breakpointPx","Error","window","matchMedia","matches"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMA,WAAW,GAAG;AAC1BC,EAAAA,EAAE,EAAE,GADsB;AAE1BC,EAAAA,EAAE,EAAE,GAFsB;AAG1BC,EAAAA,EAAE,EAAE,GAHsB;AAI1BC,EAAAA,EAAE,EAAE,IAJsB;AAK1BC,EAAAA,EAAE,EAAE;AALsB,CAApB;AAQP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAAAC,cAAc,EAAI;AAC5C,MAAIC,YAAY,GAAGR,WAAW,CAACO,cAAD,CAA9B;;AAEA,MAAI,CAACC,YAAL,EAAmB;AAClB,UAAM,IAAIC,KAAJ,iBAAwBF,cAAxB,qBAAN;AACA,GAL2C,CAO5C;AACA;;;AACA,SAAOG,MAAM,CAACC,UAAP,kBAAiCH,YAAY,GAAG,EAAhD,UAAyDI,OAAhE;AACA,CAVM","sourcesContent":["/**\n * @module Breakpoints\n */\n\n/**\n * The breakpoints, in pixel values.\n * These correspond with the breakpoints defined in SASS.\n * Often not used directly, but via matchesFrom.\n */\nexport const breakpoints = {\n\txs: 400,\n\tsm: 600,\n\tmd: 900,\n\tlg: 1200,\n\txl: 1600\n};\n\n/**\n * Determines if the device's width matches a min-width query from the given breakpoint.\n *\n * @param {string} breakpointName The breakpoint name\n * @return {Boolean} True if it matches, false otherwise.\n *\n * @example\n * \timport { matchesFrom } from \"./breakpoints\";\n * \t// Checks if the media query (min-width: 25em) matches\n * \tvar matches = matchesFrom(\"xs\");\n */\nexport const matchesFrom = breakpointName => {\n\tlet breakpointPx = breakpoints[breakpointName];\n\n\tif (!breakpointPx) {\n\t\tthrow new Error(`Breakpoint ${breakpointName} does not exist`);\n\t}\n\n\t// Assume matchMedia is polyfilled elsewhere\n\t// Convert to ems to match the media query if the browser's root font-size isn't 16\n\treturn window.matchMedia(`(min-width: ${breakpointPx / 16}em)`).matches;\n};\n"],"file":"breakpoints.js"}
|
package/es/core.js
CHANGED
package/es/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"core.js"}
|
|
1
|
+
{"version":3,"sources":["../src/core.js"],"names":[],"mappings":"AAAA,cAAc,SAAd;AACA,cAAc,eAAd","sourcesContent":["export * from \"./utils\";\nexport * from \"./breakpoints\";\n"],"file":"core.js"}
|
package/lib/breakpoints.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
-
exports.matchesFrom = exports
|
|
4
|
+
exports.matchesFrom = exports.breakpoints = void 0;
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* @module Breakpoints
|
|
@@ -31,7 +31,7 @@ var breakpoints = {
|
|
|
31
31
|
* var matches = matchesFrom("xs");
|
|
32
32
|
*/
|
|
33
33
|
|
|
34
|
-
exports
|
|
34
|
+
exports.breakpoints = breakpoints;
|
|
35
35
|
|
|
36
36
|
var matchesFrom = function matchesFrom(breakpointName) {
|
|
37
37
|
var breakpointPx = breakpoints[breakpointName];
|
package/lib/breakpoints.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/breakpoints.js"],"names":["breakpoints","xs","sm","md","lg","xl","matchesFrom","breakpointName","breakpointPx","Error","window","matchMedia","matches"],"mappings":";;;;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"sources":["../src/breakpoints.js"],"names":["breakpoints","xs","sm","md","lg","xl","matchesFrom","breakpointName","breakpointPx","Error","window","matchMedia","matches"],"mappings":";;;;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG;AAC1BC,EAAAA,EAAE,EAAE,GADsB;AAE1BC,EAAAA,EAAE,EAAE,GAFsB;AAG1BC,EAAAA,EAAE,EAAE,GAHsB;AAI1BC,EAAAA,EAAE,EAAE,IAJsB;AAK1BC,EAAAA,EAAE,EAAE;AALsB,CAApB;AAQP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACO,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAAAC,cAAc,EAAI;AAC5C,MAAIC,YAAY,GAAGR,WAAW,CAACO,cAAD,CAA9B;;AAEA,MAAI,CAACC,YAAL,EAAmB;AAClB,UAAM,IAAIC,KAAJ,iBAAwBF,cAAxB,qBAAN;AACA,GAL2C,CAO5C;AACA;;;AACA,SAAOG,MAAM,CAACC,UAAP,kBAAiCH,YAAY,GAAG,EAAhD,UAAyDI,OAAhE;AACA,CAVM","sourcesContent":["/**\n * @module Breakpoints\n */\n\n/**\n * The breakpoints, in pixel values.\n * These correspond with the breakpoints defined in SASS.\n * Often not used directly, but via matchesFrom.\n */\nexport const breakpoints = {\n\txs: 400,\n\tsm: 600,\n\tmd: 900,\n\tlg: 1200,\n\txl: 1600\n};\n\n/**\n * Determines if the device's width matches a min-width query from the given breakpoint.\n *\n * @param {string} breakpointName The breakpoint name\n * @return {Boolean} True if it matches, false otherwise.\n *\n * @example\n * \timport { matchesFrom } from \"./breakpoints\";\n * \t// Checks if the media query (min-width: 25em) matches\n * \tvar matches = matchesFrom(\"xs\");\n */\nexport const matchesFrom = breakpointName => {\n\tlet breakpointPx = breakpoints[breakpointName];\n\n\tif (!breakpointPx) {\n\t\tthrow new Error(`Breakpoint ${breakpointName} does not exist`);\n\t}\n\n\t// Assume matchMedia is polyfilled elsewhere\n\t// Convert to ems to match the media query if the browser's root font-size isn't 16\n\treturn window.matchMedia(`(min-width: ${breakpointPx / 16}em)`).matches;\n};\n"],"file":"breakpoints.js"}
|
package/lib/core.js
CHANGED
|
@@ -1,2 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
|
|
5
|
+
var _utils = require("./utils");
|
|
6
|
+
|
|
7
|
+
Object.keys(_utils).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _utils[key]) return;
|
|
10
|
+
exports[key] = _utils[key];
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _breakpoints = require("./breakpoints");
|
|
14
|
+
|
|
15
|
+
Object.keys(_breakpoints).forEach(function (key) {
|
|
16
|
+
if (key === "default" || key === "__esModule") return;
|
|
17
|
+
if (key in exports && exports[key] === _breakpoints[key]) return;
|
|
18
|
+
exports[key] = _breakpoints[key];
|
|
19
|
+
});
|
|
2
20
|
//# sourceMappingURL=core.js.map
|
package/lib/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"core.js"}
|
|
1
|
+
{"version":3,"sources":["../src/core.js"],"names":[],"mappings":";;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./utils\";\nexport * from \"./breakpoints\";\n"],"file":"core.js"}
|
package/lib/utils.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
-
exports
|
|
4
|
+
exports.trim = exports.throttle = exports.slugify = exports.nextUniqueId = exports["default"] = exports.debounce = exports.camelCase = void 0;
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* @module Utils
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-core",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.12",
|
|
4
4
|
"description": "Core code for the NICE Design System",
|
|
5
5
|
"author": "Ian Routledge <ian.routledge@nice.org.uk>",
|
|
6
6
|
"contributors": [
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"url": "https://github.com/nice-digital/nice-design-system/issues"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@nice-digital/icons": "^2.2.
|
|
36
|
+
"@nice-digital/icons": "^2.2.7",
|
|
37
37
|
"prop-types": "^15.7.2",
|
|
38
38
|
"sass-mq": "^5.0.0"
|
|
39
39
|
},
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@babel/cli": "^7.5.0"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "70d5237c684b38532174d7e7b81e0d859867b222"
|
|
48
48
|
}
|
|
@@ -8,8 +8,11 @@
|
|
|
8
8
|
@mixin nds-h1 {
|
|
9
9
|
@include nds-font(h1);
|
|
10
10
|
clear: both;
|
|
11
|
-
font-weight:
|
|
11
|
+
font-weight: 700;
|
|
12
|
+
// Letter spacing and text shadow to mimic 900 weight, see https://github.com/nice-digital/nice-design-system/issues/240
|
|
13
|
+
letter-spacing: 0.5px;
|
|
12
14
|
max-width: 66ch;
|
|
15
|
+
text-shadow: 1.5px 0 0 currentColor;
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
/// Secondary heading. Used for h2 tag but can be used directly
|