@nice-digital/nds-core 4.0.15 → 4.0.17-alpha-node-update.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/breakpoints.d.ts +28 -28
- package/es/breakpoints.js +39 -39
- package/es/core.d.ts +2 -2
- package/es/core.js +18 -18
- package/es/utils.d.ts +78 -78
- package/es/utils.js +140 -140
- package/package.json +5 -5
- package/scss/colours/tokens/_alias.scss +2 -0
package/es/breakpoints.d.ts
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @module Breakpoints
|
|
3
|
-
*/
|
|
4
|
-
/**
|
|
5
|
-
* The breakpoints, in pixel values.
|
|
6
|
-
* These correspond with the breakpoints defined in SASS.
|
|
7
|
-
* Often not used directly, but via matchesFrom.
|
|
8
|
-
*/
|
|
9
|
-
export declare const breakpoints: {
|
|
10
|
-
xs: number;
|
|
11
|
-
sm: number;
|
|
12
|
-
md: number;
|
|
13
|
-
lg: number;
|
|
14
|
-
xl: number;
|
|
15
|
-
};
|
|
16
|
-
export type breakpointType = keyof typeof breakpoints;
|
|
17
|
-
/**
|
|
18
|
-
* Determines if the device's width matches a min-width query from the given breakpoint.
|
|
19
|
-
*
|
|
20
|
-
* @param {string} breakpointName The breakpoint name
|
|
21
|
-
* @return {Boolean} True if it matches, false otherwise.
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* import { matchesFrom } from "./breakpoints";
|
|
25
|
-
* // Checks if the media query (min-width: 25em) matches
|
|
26
|
-
* var matches = matchesFrom("xs");
|
|
27
|
-
*/
|
|
28
|
-
export declare const matchesFrom: (breakpointName: string) => boolean;
|
|
1
|
+
/**
|
|
2
|
+
* @module Breakpoints
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* The breakpoints, in pixel values.
|
|
6
|
+
* These correspond with the breakpoints defined in SASS.
|
|
7
|
+
* Often not used directly, but via matchesFrom.
|
|
8
|
+
*/
|
|
9
|
+
export declare const breakpoints: {
|
|
10
|
+
xs: number;
|
|
11
|
+
sm: number;
|
|
12
|
+
md: number;
|
|
13
|
+
lg: number;
|
|
14
|
+
xl: number;
|
|
15
|
+
};
|
|
16
|
+
export type breakpointType = keyof typeof breakpoints;
|
|
17
|
+
/**
|
|
18
|
+
* Determines if the device's width matches a min-width query from the given breakpoint.
|
|
19
|
+
*
|
|
20
|
+
* @param {string} breakpointName The breakpoint name
|
|
21
|
+
* @return {Boolean} True if it matches, false otherwise.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* import { matchesFrom } from "./breakpoints";
|
|
25
|
+
* // Checks if the media query (min-width: 25em) matches
|
|
26
|
+
* var matches = matchesFrom("xs");
|
|
27
|
+
*/
|
|
28
|
+
export declare const matchesFrom: (breakpointName: string) => boolean;
|
package/es/breakpoints.js
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
/**
|
|
3
|
-
* @module Breakpoints
|
|
4
|
-
*/
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.matchesFrom = exports.breakpoints = void 0;
|
|
7
|
-
/**
|
|
8
|
-
* The breakpoints, in pixel values.
|
|
9
|
-
* These correspond with the breakpoints defined in SASS.
|
|
10
|
-
* Often not used directly, but via matchesFrom.
|
|
11
|
-
*/
|
|
12
|
-
exports.breakpoints = {
|
|
13
|
-
xs: 400,
|
|
14
|
-
sm: 600,
|
|
15
|
-
md: 900,
|
|
16
|
-
lg: 1200,
|
|
17
|
-
xl: 1600
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* Determines if the device's width matches a min-width query from the given breakpoint.
|
|
21
|
-
*
|
|
22
|
-
* @param {string} breakpointName The breakpoint name
|
|
23
|
-
* @return {Boolean} True if it matches, false otherwise.
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* import { matchesFrom } from "./breakpoints";
|
|
27
|
-
* // Checks if the media query (min-width: 25em) matches
|
|
28
|
-
* var matches = matchesFrom("xs");
|
|
29
|
-
*/
|
|
30
|
-
const matchesFrom = (breakpointName) => {
|
|
31
|
-
let breakpointPx = exports.breakpoints[breakpointName];
|
|
32
|
-
if (!breakpointPx) {
|
|
33
|
-
throw new Error(`Breakpoint ${breakpointName} does not exist`);
|
|
34
|
-
}
|
|
35
|
-
// Assume matchMedia is polyfilled elsewhere
|
|
36
|
-
// Convert to ems to match the media query if the browser's root font-size isn't 16
|
|
37
|
-
return window.matchMedia(`(min-width: ${breakpointPx / 16}em)`).matches;
|
|
38
|
-
};
|
|
39
|
-
exports.matchesFrom = matchesFrom;
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* @module Breakpoints
|
|
4
|
+
*/
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.matchesFrom = exports.breakpoints = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* The breakpoints, in pixel values.
|
|
9
|
+
* These correspond with the breakpoints defined in SASS.
|
|
10
|
+
* Often not used directly, but via matchesFrom.
|
|
11
|
+
*/
|
|
12
|
+
exports.breakpoints = {
|
|
13
|
+
xs: 400,
|
|
14
|
+
sm: 600,
|
|
15
|
+
md: 900,
|
|
16
|
+
lg: 1200,
|
|
17
|
+
xl: 1600
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Determines if the device's width matches a min-width query from the given breakpoint.
|
|
21
|
+
*
|
|
22
|
+
* @param {string} breakpointName The breakpoint name
|
|
23
|
+
* @return {Boolean} True if it matches, false otherwise.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* import { matchesFrom } from "./breakpoints";
|
|
27
|
+
* // Checks if the media query (min-width: 25em) matches
|
|
28
|
+
* var matches = matchesFrom("xs");
|
|
29
|
+
*/
|
|
30
|
+
const matchesFrom = (breakpointName) => {
|
|
31
|
+
let breakpointPx = exports.breakpoints[breakpointName];
|
|
32
|
+
if (!breakpointPx) {
|
|
33
|
+
throw new Error(`Breakpoint ${breakpointName} does not exist`);
|
|
34
|
+
}
|
|
35
|
+
// Assume matchMedia is polyfilled elsewhere
|
|
36
|
+
// Convert to ems to match the media query if the browser's root font-size isn't 16
|
|
37
|
+
return window.matchMedia(`(min-width: ${breakpointPx / 16}em)`).matches;
|
|
38
|
+
};
|
|
39
|
+
exports.matchesFrom = matchesFrom;
|
package/es/core.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from "./utils";
|
|
2
|
-
export * from "./breakpoints";
|
|
1
|
+
export * from "./utils";
|
|
2
|
+
export * from "./breakpoints";
|
package/es/core.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./utils"), exports);
|
|
18
|
-
__exportStar(require("./breakpoints"), exports);
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./utils"), exports);
|
|
18
|
+
__exportStar(require("./breakpoints"), exports);
|
package/es/utils.d.ts
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @module Utils
|
|
3
|
-
* Utility functions
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* Trims whitespace characters from the start and end of a string.
|
|
7
|
-
* This utility method exists because String.prototype.trim is
|
|
8
|
-
* not supported in IE8.
|
|
9
|
-
*
|
|
10
|
-
* @param {string} str The string to trim
|
|
11
|
-
*/
|
|
12
|
-
export declare const trim: (str: string) => string;
|
|
13
|
-
/**
|
|
14
|
-
* Throttle events
|
|
15
|
-
* See https://remysharp.com/2010/07/21/throttling-function-calls
|
|
16
|
-
*
|
|
17
|
-
* @param {Function} func The function to throttle
|
|
18
|
-
* @param {Integer} threshold The threshold period, in milliseconds
|
|
19
|
-
* @param {Object} scope The context of the throttled function
|
|
20
|
-
* @return {Function} { The throttled function }
|
|
21
|
-
*/
|
|
22
|
-
export declare const throttle: (fn: Function, threshold?: number, scope?: Object | null) => () => void;
|
|
23
|
-
/**
|
|
24
|
-
* Debounce
|
|
25
|
-
* See http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
|
|
26
|
-
*
|
|
27
|
-
* @param {Function} func The function to debounce
|
|
28
|
-
* @param {boolean} execAsap Whether to execute the function now
|
|
29
|
-
* @param {Integer} threshold The detection period, in milliseconds
|
|
30
|
-
* @param {Object} scope The context for the debounced function
|
|
31
|
-
* @return {Function} { The debounced function }
|
|
32
|
-
*/
|
|
33
|
-
export declare const debounce: (func: Function, execAsap?: boolean, threshold?: number, scope?: Object | null) => () => void;
|
|
34
|
-
/**
|
|
35
|
-
* Turns a string into a slug.
|
|
36
|
-
* See {@link https://gist.github.com/mathewbyrne/1280286#gistcomment-1606270|this gist}.
|
|
37
|
-
*
|
|
38
|
-
* @param {string} str { The string to slugify }
|
|
39
|
-
* @returns {string} { The slugified string }
|
|
40
|
-
*
|
|
41
|
-
* @example <caption>Example slugifying</caption>
|
|
42
|
-
* import { slugify } from "./utils";
|
|
43
|
-
* // returns "a-string-to-transform-and-slugify"
|
|
44
|
-
* slugify("A (string) to transform & slugify!");
|
|
45
|
-
*/
|
|
46
|
-
export declare const slugify: (str: string) => string;
|
|
47
|
-
/**
|
|
48
|
-
* Generates a unique id in the form prefix-n by incrementing a counter.
|
|
49
|
-
* The first time this is called it will return "uid-1" then "uid-2" and so on.
|
|
50
|
-
* See {@link http://stackoverflow.com/a/20302361|This StackOverflow answer}.
|
|
51
|
-
*
|
|
52
|
-
* @param {string} prefix { The prefix for the id to return. Defaults to "uid" }
|
|
53
|
-
* @return {string} { The unique id }
|
|
54
|
-
*
|
|
55
|
-
* @example <caption>Simple example</caption>
|
|
56
|
-
* import { nextUniqueId } from "./utils";
|
|
57
|
-
* // returns "uid-1"
|
|
58
|
-
* nextUniqueId();
|
|
59
|
-
*
|
|
60
|
-
* @example <caption>Prefix example</caption>
|
|
61
|
-
* import utils from "./utils";
|
|
62
|
-
* // returns "prefix-1"
|
|
63
|
-
* utils.nextUniqueId("prefix");
|
|
64
|
-
*/
|
|
65
|
-
export declare const nextUniqueId: (prefix?: string) => string;
|
|
66
|
-
/**
|
|
67
|
-
* CamelCases a string
|
|
68
|
-
* @param {string} str The string to camel case
|
|
69
|
-
*/
|
|
70
|
-
export declare const camelCase: (str: string) => string;
|
|
71
|
-
declare const _default: {
|
|
72
|
-
throttle: (fn: Function, threshold?: number, scope?: Object | null) => () => void;
|
|
73
|
-
debounce: (func: Function, execAsap?: boolean, threshold?: number, scope?: Object | null) => () => void;
|
|
74
|
-
slugify: (str: string) => string;
|
|
75
|
-
nextUniqueId: (prefix?: string) => string;
|
|
76
|
-
camelCase: (str: string) => string;
|
|
77
|
-
};
|
|
78
|
-
export default _default;
|
|
1
|
+
/**
|
|
2
|
+
* @module Utils
|
|
3
|
+
* Utility functions
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Trims whitespace characters from the start and end of a string.
|
|
7
|
+
* This utility method exists because String.prototype.trim is
|
|
8
|
+
* not supported in IE8.
|
|
9
|
+
*
|
|
10
|
+
* @param {string} str The string to trim
|
|
11
|
+
*/
|
|
12
|
+
export declare const trim: (str: string) => string;
|
|
13
|
+
/**
|
|
14
|
+
* Throttle events
|
|
15
|
+
* See https://remysharp.com/2010/07/21/throttling-function-calls
|
|
16
|
+
*
|
|
17
|
+
* @param {Function} func The function to throttle
|
|
18
|
+
* @param {Integer} threshold The threshold period, in milliseconds
|
|
19
|
+
* @param {Object} scope The context of the throttled function
|
|
20
|
+
* @return {Function} { The throttled function }
|
|
21
|
+
*/
|
|
22
|
+
export declare const throttle: (fn: Function, threshold?: number, scope?: Object | null) => () => void;
|
|
23
|
+
/**
|
|
24
|
+
* Debounce
|
|
25
|
+
* See http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
|
|
26
|
+
*
|
|
27
|
+
* @param {Function} func The function to debounce
|
|
28
|
+
* @param {boolean} execAsap Whether to execute the function now
|
|
29
|
+
* @param {Integer} threshold The detection period, in milliseconds
|
|
30
|
+
* @param {Object} scope The context for the debounced function
|
|
31
|
+
* @return {Function} { The debounced function }
|
|
32
|
+
*/
|
|
33
|
+
export declare const debounce: (func: Function, execAsap?: boolean, threshold?: number, scope?: Object | null) => () => void;
|
|
34
|
+
/**
|
|
35
|
+
* Turns a string into a slug.
|
|
36
|
+
* See {@link https://gist.github.com/mathewbyrne/1280286#gistcomment-1606270|this gist}.
|
|
37
|
+
*
|
|
38
|
+
* @param {string} str { The string to slugify }
|
|
39
|
+
* @returns {string} { The slugified string }
|
|
40
|
+
*
|
|
41
|
+
* @example <caption>Example slugifying</caption>
|
|
42
|
+
* import { slugify } from "./utils";
|
|
43
|
+
* // returns "a-string-to-transform-and-slugify"
|
|
44
|
+
* slugify("A (string) to transform & slugify!");
|
|
45
|
+
*/
|
|
46
|
+
export declare const slugify: (str: string) => string;
|
|
47
|
+
/**
|
|
48
|
+
* Generates a unique id in the form prefix-n by incrementing a counter.
|
|
49
|
+
* The first time this is called it will return "uid-1" then "uid-2" and so on.
|
|
50
|
+
* See {@link http://stackoverflow.com/a/20302361|This StackOverflow answer}.
|
|
51
|
+
*
|
|
52
|
+
* @param {string} prefix { The prefix for the id to return. Defaults to "uid" }
|
|
53
|
+
* @return {string} { The unique id }
|
|
54
|
+
*
|
|
55
|
+
* @example <caption>Simple example</caption>
|
|
56
|
+
* import { nextUniqueId } from "./utils";
|
|
57
|
+
* // returns "uid-1"
|
|
58
|
+
* nextUniqueId();
|
|
59
|
+
*
|
|
60
|
+
* @example <caption>Prefix example</caption>
|
|
61
|
+
* import utils from "./utils";
|
|
62
|
+
* // returns "prefix-1"
|
|
63
|
+
* utils.nextUniqueId("prefix");
|
|
64
|
+
*/
|
|
65
|
+
export declare const nextUniqueId: (prefix?: string) => string;
|
|
66
|
+
/**
|
|
67
|
+
* CamelCases a string
|
|
68
|
+
* @param {string} str The string to camel case
|
|
69
|
+
*/
|
|
70
|
+
export declare const camelCase: (str: string) => string;
|
|
71
|
+
declare const _default: {
|
|
72
|
+
throttle: (fn: Function, threshold?: number, scope?: Object | null) => () => void;
|
|
73
|
+
debounce: (func: Function, execAsap?: boolean, threshold?: number, scope?: Object | null) => () => void;
|
|
74
|
+
slugify: (str: string) => string;
|
|
75
|
+
nextUniqueId: (prefix?: string) => string;
|
|
76
|
+
camelCase: (str: string) => string;
|
|
77
|
+
};
|
|
78
|
+
export default _default;
|
package/es/utils.js
CHANGED
|
@@ -1,140 +1,140 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
/**
|
|
3
|
-
* @module Utils
|
|
4
|
-
* Utility functions
|
|
5
|
-
*/
|
|
6
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.camelCase = exports.nextUniqueId = exports.slugify = exports.debounce = exports.throttle = exports.trim = void 0;
|
|
8
|
-
/**
|
|
9
|
-
* Trims whitespace characters from the start and end of a string.
|
|
10
|
-
* This utility method exists because String.prototype.trim is
|
|
11
|
-
* not supported in IE8.
|
|
12
|
-
*
|
|
13
|
-
* @param {string} str The string to trim
|
|
14
|
-
*/
|
|
15
|
-
const trim = function (str) {
|
|
16
|
-
return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
|
|
17
|
-
};
|
|
18
|
-
exports.trim = trim;
|
|
19
|
-
/**
|
|
20
|
-
* Throttle events
|
|
21
|
-
* See https://remysharp.com/2010/07/21/throttling-function-calls
|
|
22
|
-
*
|
|
23
|
-
* @param {Function} func The function to throttle
|
|
24
|
-
* @param {Integer} threshold The threshold period, in milliseconds
|
|
25
|
-
* @param {Object} scope The context of the throttled function
|
|
26
|
-
* @return {Function} { The throttled function }
|
|
27
|
-
*/
|
|
28
|
-
const throttle = function (fn, threshold = 100, scope = null) {
|
|
29
|
-
let last, deferTimer;
|
|
30
|
-
return function throttled() {
|
|
31
|
-
let context = scope || this, now = +new Date(), args = arguments;
|
|
32
|
-
if (last && now < last + threshold) {
|
|
33
|
-
// hold on to it
|
|
34
|
-
clearTimeout(deferTimer);
|
|
35
|
-
deferTimer = setTimeout(function () {
|
|
36
|
-
last = now;
|
|
37
|
-
fn.apply(context, args);
|
|
38
|
-
}, threshold);
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
last = now;
|
|
42
|
-
fn.apply(context, args);
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
exports.throttle = throttle;
|
|
47
|
-
/**
|
|
48
|
-
* Debounce
|
|
49
|
-
* See http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
|
|
50
|
-
*
|
|
51
|
-
* @param {Function} func The function to debounce
|
|
52
|
-
* @param {boolean} execAsap Whether to execute the function now
|
|
53
|
-
* @param {Integer} threshold The detection period, in milliseconds
|
|
54
|
-
* @param {Object} scope The context for the debounced function
|
|
55
|
-
* @return {Function} { The debounced function }
|
|
56
|
-
*/
|
|
57
|
-
const debounce = function (func, execAsap = false, threshold = 100, scope = null) {
|
|
58
|
-
let timeout;
|
|
59
|
-
return function debounced() {
|
|
60
|
-
let context = scope || this, args = arguments;
|
|
61
|
-
function delayed() {
|
|
62
|
-
if (!execAsap)
|
|
63
|
-
func.apply(context, args);
|
|
64
|
-
timeout = null;
|
|
65
|
-
}
|
|
66
|
-
if (timeout)
|
|
67
|
-
clearTimeout(timeout);
|
|
68
|
-
else if (execAsap)
|
|
69
|
-
func.apply(context, args);
|
|
70
|
-
timeout = setTimeout(delayed, threshold);
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
exports.debounce = debounce;
|
|
74
|
-
/**
|
|
75
|
-
* Turns a string into a slug.
|
|
76
|
-
* See {@link https://gist.github.com/mathewbyrne/1280286#gistcomment-1606270|this gist}.
|
|
77
|
-
*
|
|
78
|
-
* @param {string} str { The string to slugify }
|
|
79
|
-
* @returns {string} { The slugified string }
|
|
80
|
-
*
|
|
81
|
-
* @example <caption>Example slugifying</caption>
|
|
82
|
-
* import { slugify } from "./utils";
|
|
83
|
-
* // returns "a-string-to-transform-and-slugify"
|
|
84
|
-
* slugify("A (string) to transform & slugify!");
|
|
85
|
-
*/
|
|
86
|
-
const slugify = (str) => {
|
|
87
|
-
return (0, exports.trim)(str)
|
|
88
|
-
.toLowerCase()
|
|
89
|
-
.replace(/\s+/g, "-") // Replace spaces with -
|
|
90
|
-
.replace(/&/g, "-and-") // Replace & with 'and'
|
|
91
|
-
.replace(/[^\w-]+/g, "") // Remove all non-word chars
|
|
92
|
-
.replace(/^-+/g, "") // Trim dashes from the start
|
|
93
|
-
.replace(/-+$/g, "") // Trim dashes from the end
|
|
94
|
-
.replace(/-{2,}/g, "-"); // Replace multiple - with single -
|
|
95
|
-
};
|
|
96
|
-
exports.slugify = slugify;
|
|
97
|
-
/**
|
|
98
|
-
* Generates a unique id in the form prefix-n by incrementing a counter.
|
|
99
|
-
* The first time this is called it will return "uid-1" then "uid-2" and so on.
|
|
100
|
-
* See {@link http://stackoverflow.com/a/20302361|This StackOverflow answer}.
|
|
101
|
-
*
|
|
102
|
-
* @param {string} prefix { The prefix for the id to return. Defaults to "uid" }
|
|
103
|
-
* @return {string} { The unique id }
|
|
104
|
-
*
|
|
105
|
-
* @example <caption>Simple example</caption>
|
|
106
|
-
* import { nextUniqueId } from "./utils";
|
|
107
|
-
* // returns "uid-1"
|
|
108
|
-
* nextUniqueId();
|
|
109
|
-
*
|
|
110
|
-
* @example <caption>Prefix example</caption>
|
|
111
|
-
* import utils from "./utils";
|
|
112
|
-
* // returns "prefix-1"
|
|
113
|
-
* utils.nextUniqueId("prefix");
|
|
114
|
-
*/
|
|
115
|
-
exports.nextUniqueId = (function (i) {
|
|
116
|
-
return function (prefix = "uid") {
|
|
117
|
-
return `${prefix}-${++i}`;
|
|
118
|
-
};
|
|
119
|
-
})(0);
|
|
120
|
-
/**
|
|
121
|
-
* CamelCases a string
|
|
122
|
-
* @param {string} str The string to camel case
|
|
123
|
-
*/
|
|
124
|
-
const camelCase = function (str) {
|
|
125
|
-
str = str.split("-").join(" "); // To support kebab-case
|
|
126
|
-
// See https://stackoverflow.com/a/2970667/486434
|
|
127
|
-
return str
|
|
128
|
-
.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
|
|
129
|
-
return index === 0 ? letter.toLowerCase() : letter.toUpperCase();
|
|
130
|
-
})
|
|
131
|
-
.replace(/\s+/g, "");
|
|
132
|
-
};
|
|
133
|
-
exports.camelCase = camelCase;
|
|
134
|
-
exports.default = {
|
|
135
|
-
throttle: exports.throttle,
|
|
136
|
-
debounce: exports.debounce,
|
|
137
|
-
slugify: exports.slugify,
|
|
138
|
-
nextUniqueId: exports.nextUniqueId,
|
|
139
|
-
camelCase: exports.camelCase
|
|
140
|
-
};
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* @module Utils
|
|
4
|
+
* Utility functions
|
|
5
|
+
*/
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.camelCase = exports.nextUniqueId = exports.slugify = exports.debounce = exports.throttle = exports.trim = void 0;
|
|
8
|
+
/**
|
|
9
|
+
* Trims whitespace characters from the start and end of a string.
|
|
10
|
+
* This utility method exists because String.prototype.trim is
|
|
11
|
+
* not supported in IE8.
|
|
12
|
+
*
|
|
13
|
+
* @param {string} str The string to trim
|
|
14
|
+
*/
|
|
15
|
+
const trim = function (str) {
|
|
16
|
+
return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
|
|
17
|
+
};
|
|
18
|
+
exports.trim = trim;
|
|
19
|
+
/**
|
|
20
|
+
* Throttle events
|
|
21
|
+
* See https://remysharp.com/2010/07/21/throttling-function-calls
|
|
22
|
+
*
|
|
23
|
+
* @param {Function} func The function to throttle
|
|
24
|
+
* @param {Integer} threshold The threshold period, in milliseconds
|
|
25
|
+
* @param {Object} scope The context of the throttled function
|
|
26
|
+
* @return {Function} { The throttled function }
|
|
27
|
+
*/
|
|
28
|
+
const throttle = function (fn, threshold = 100, scope = null) {
|
|
29
|
+
let last, deferTimer;
|
|
30
|
+
return function throttled() {
|
|
31
|
+
let context = scope || this, now = +new Date(), args = arguments;
|
|
32
|
+
if (last && now < last + threshold) {
|
|
33
|
+
// hold on to it
|
|
34
|
+
clearTimeout(deferTimer);
|
|
35
|
+
deferTimer = setTimeout(function () {
|
|
36
|
+
last = now;
|
|
37
|
+
fn.apply(context, args);
|
|
38
|
+
}, threshold);
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
last = now;
|
|
42
|
+
fn.apply(context, args);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
exports.throttle = throttle;
|
|
47
|
+
/**
|
|
48
|
+
* Debounce
|
|
49
|
+
* See http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
|
|
50
|
+
*
|
|
51
|
+
* @param {Function} func The function to debounce
|
|
52
|
+
* @param {boolean} execAsap Whether to execute the function now
|
|
53
|
+
* @param {Integer} threshold The detection period, in milliseconds
|
|
54
|
+
* @param {Object} scope The context for the debounced function
|
|
55
|
+
* @return {Function} { The debounced function }
|
|
56
|
+
*/
|
|
57
|
+
const debounce = function (func, execAsap = false, threshold = 100, scope = null) {
|
|
58
|
+
let timeout;
|
|
59
|
+
return function debounced() {
|
|
60
|
+
let context = scope || this, args = arguments;
|
|
61
|
+
function delayed() {
|
|
62
|
+
if (!execAsap)
|
|
63
|
+
func.apply(context, args);
|
|
64
|
+
timeout = null;
|
|
65
|
+
}
|
|
66
|
+
if (timeout)
|
|
67
|
+
clearTimeout(timeout);
|
|
68
|
+
else if (execAsap)
|
|
69
|
+
func.apply(context, args);
|
|
70
|
+
timeout = setTimeout(delayed, threshold);
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
exports.debounce = debounce;
|
|
74
|
+
/**
|
|
75
|
+
* Turns a string into a slug.
|
|
76
|
+
* See {@link https://gist.github.com/mathewbyrne/1280286#gistcomment-1606270|this gist}.
|
|
77
|
+
*
|
|
78
|
+
* @param {string} str { The string to slugify }
|
|
79
|
+
* @returns {string} { The slugified string }
|
|
80
|
+
*
|
|
81
|
+
* @example <caption>Example slugifying</caption>
|
|
82
|
+
* import { slugify } from "./utils";
|
|
83
|
+
* // returns "a-string-to-transform-and-slugify"
|
|
84
|
+
* slugify("A (string) to transform & slugify!");
|
|
85
|
+
*/
|
|
86
|
+
const slugify = (str) => {
|
|
87
|
+
return (0, exports.trim)(str)
|
|
88
|
+
.toLowerCase()
|
|
89
|
+
.replace(/\s+/g, "-") // Replace spaces with -
|
|
90
|
+
.replace(/&/g, "-and-") // Replace & with 'and'
|
|
91
|
+
.replace(/[^\w-]+/g, "") // Remove all non-word chars
|
|
92
|
+
.replace(/^-+/g, "") // Trim dashes from the start
|
|
93
|
+
.replace(/-+$/g, "") // Trim dashes from the end
|
|
94
|
+
.replace(/-{2,}/g, "-"); // Replace multiple - with single -
|
|
95
|
+
};
|
|
96
|
+
exports.slugify = slugify;
|
|
97
|
+
/**
|
|
98
|
+
* Generates a unique id in the form prefix-n by incrementing a counter.
|
|
99
|
+
* The first time this is called it will return "uid-1" then "uid-2" and so on.
|
|
100
|
+
* See {@link http://stackoverflow.com/a/20302361|This StackOverflow answer}.
|
|
101
|
+
*
|
|
102
|
+
* @param {string} prefix { The prefix for the id to return. Defaults to "uid" }
|
|
103
|
+
* @return {string} { The unique id }
|
|
104
|
+
*
|
|
105
|
+
* @example <caption>Simple example</caption>
|
|
106
|
+
* import { nextUniqueId } from "./utils";
|
|
107
|
+
* // returns "uid-1"
|
|
108
|
+
* nextUniqueId();
|
|
109
|
+
*
|
|
110
|
+
* @example <caption>Prefix example</caption>
|
|
111
|
+
* import utils from "./utils";
|
|
112
|
+
* // returns "prefix-1"
|
|
113
|
+
* utils.nextUniqueId("prefix");
|
|
114
|
+
*/
|
|
115
|
+
exports.nextUniqueId = (function (i) {
|
|
116
|
+
return function (prefix = "uid") {
|
|
117
|
+
return `${prefix}-${++i}`;
|
|
118
|
+
};
|
|
119
|
+
})(0);
|
|
120
|
+
/**
|
|
121
|
+
* CamelCases a string
|
|
122
|
+
* @param {string} str The string to camel case
|
|
123
|
+
*/
|
|
124
|
+
const camelCase = function (str) {
|
|
125
|
+
str = str.split("-").join(" "); // To support kebab-case
|
|
126
|
+
// See https://stackoverflow.com/a/2970667/486434
|
|
127
|
+
return str
|
|
128
|
+
.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
|
|
129
|
+
return index === 0 ? letter.toLowerCase() : letter.toUpperCase();
|
|
130
|
+
})
|
|
131
|
+
.replace(/\s+/g, "");
|
|
132
|
+
};
|
|
133
|
+
exports.camelCase = camelCase;
|
|
134
|
+
exports.default = {
|
|
135
|
+
throttle: exports.throttle,
|
|
136
|
+
debounce: exports.debounce,
|
|
137
|
+
slugify: exports.slugify,
|
|
138
|
+
nextUniqueId: exports.nextUniqueId,
|
|
139
|
+
camelCase: exports.camelCase
|
|
140
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-core",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.17-alpha-node-update.0",
|
|
4
4
|
"description": "Core code for the NICE Design System",
|
|
5
5
|
"author": "Ian Routledge <ian.routledge@nice.org.uk>",
|
|
6
6
|
"contributors": [
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"url": "https://github.com/nice-digital/nice-design-system/issues"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@nice-digital/icons": "^6.1.
|
|
35
|
+
"@nice-digital/icons": "^6.1.7-alpha-node-update.0",
|
|
36
36
|
"sass-mq": "^6.0.0"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"@testing-library/react": "^13.4.0",
|
|
45
45
|
"@testing-library/user-event": "^14.4.3",
|
|
46
46
|
"@types/jest": "^29.2.2",
|
|
47
|
-
"@types/node": "
|
|
48
|
-
"typescript": "^
|
|
47
|
+
"@types/node": "22.19.0",
|
|
48
|
+
"typescript": "^5.9.3"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "1b7a4a13183120071b022adecd2fcf4eebefbb6c"
|
|
51
51
|
}
|
|
@@ -37,6 +37,8 @@ $btn-inverse-text: global.$nice-black;
|
|
|
37
37
|
// Borders
|
|
38
38
|
$border: global.$custom-grey-1;
|
|
39
39
|
$border-selected: global.$nice-teal;
|
|
40
|
+
// accessibility fix for input and textarea borders
|
|
41
|
+
$border-dark: global.$nice-black;
|
|
40
42
|
|
|
41
43
|
// Status
|
|
42
44
|
$error: global.$custom-red-1;
|