@nice-digital/nds-grid 4.0.18 → 4.0.20-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/Grid.d.ts +60 -60
- package/es/Grid.js +62 -62
- package/es/GridItem.d.ts +36 -36
- package/es/GridItem.js +48 -48
- package/package.json +5 -5
package/es/Grid.d.ts
CHANGED
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { GridItem, type Columns, type PullOrPush, type BreakPointGridDefinition } from "./GridItem";
|
|
3
|
-
import "../scss/grid.scss";
|
|
4
|
-
export { GridItem, Columns, PullOrPush, BreakPointGridDefinition };
|
|
5
|
-
export type ValidGridItemProps = React.ReactElement<typeof GridItem> | boolean | null | undefined;
|
|
6
|
-
export declare const gutterTypes: {
|
|
7
|
-
readonly standard: "standard";
|
|
8
|
-
readonly none: "none";
|
|
9
|
-
readonly compact: "compact";
|
|
10
|
-
readonly loose: "loose";
|
|
11
|
-
};
|
|
12
|
-
export declare const horizontalAlignmentTypes: {
|
|
13
|
-
readonly left: "left";
|
|
14
|
-
readonly center: "center";
|
|
15
|
-
readonly right: "right";
|
|
16
|
-
};
|
|
17
|
-
export declare const verticalAlignmentTypes: {
|
|
18
|
-
readonly top: "top";
|
|
19
|
-
readonly middle: "middle";
|
|
20
|
-
readonly bottom: "bottom";
|
|
21
|
-
};
|
|
22
|
-
export interface GridProps {
|
|
23
|
-
/** Grid item elements */
|
|
24
|
-
children: ValidGridItemProps[] | ValidGridItemProps;
|
|
25
|
-
/** Renders grid items in the opposite way to the source order */
|
|
26
|
-
reverse?: boolean;
|
|
27
|
-
/** Make children of grid items ahve 100% height to fill the vertical space */
|
|
28
|
-
equalHeight?: boolean;
|
|
29
|
-
/** The horizontal alignment of items within the grid, when there are empty columns. Leave blank to default to left. */
|
|
30
|
-
horizontalAlignment?: keyof typeof horizontalAlignmentTypes;
|
|
31
|
-
/** The vertical alignment of items within the grid. Leave blank to default to top. */
|
|
32
|
-
verticalAlignment?: keyof typeof verticalAlignmentTypes;
|
|
33
|
-
/** The gap between grid cells. Leave blank to default to the standard gutter. */
|
|
34
|
-
gutter?: keyof typeof gutterTypes;
|
|
35
|
-
/** Debug puts a coloured outline around the grid and its cells */
|
|
36
|
-
debug?: boolean;
|
|
37
|
-
/** Additional classes to add to the grid, for example mt--e */
|
|
38
|
-
className?: string;
|
|
39
|
-
/** The type of DOM node to render for the grid. Leave blank to default to div. */
|
|
40
|
-
elementType?: React.ElementType;
|
|
41
|
-
}
|
|
42
|
-
export declare const Grid: {
|
|
43
|
-
(props: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
-
gutter: {
|
|
45
|
-
readonly standard: "standard";
|
|
46
|
-
readonly none: "none";
|
|
47
|
-
readonly compact: "compact";
|
|
48
|
-
readonly loose: "loose";
|
|
49
|
-
};
|
|
50
|
-
horizontalAlignment: {
|
|
51
|
-
readonly left: "left";
|
|
52
|
-
readonly center: "center";
|
|
53
|
-
readonly right: "right";
|
|
54
|
-
};
|
|
55
|
-
verticalAlignment: {
|
|
56
|
-
readonly top: "top";
|
|
57
|
-
readonly middle: "middle";
|
|
58
|
-
readonly bottom: "bottom";
|
|
59
|
-
};
|
|
60
|
-
};
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { GridItem, type Columns, type PullOrPush, type BreakPointGridDefinition } from "./GridItem";
|
|
3
|
+
import "../scss/grid.scss";
|
|
4
|
+
export { GridItem, Columns, PullOrPush, BreakPointGridDefinition };
|
|
5
|
+
export type ValidGridItemProps = React.ReactElement<typeof GridItem> | boolean | null | undefined;
|
|
6
|
+
export declare const gutterTypes: {
|
|
7
|
+
readonly standard: "standard";
|
|
8
|
+
readonly none: "none";
|
|
9
|
+
readonly compact: "compact";
|
|
10
|
+
readonly loose: "loose";
|
|
11
|
+
};
|
|
12
|
+
export declare const horizontalAlignmentTypes: {
|
|
13
|
+
readonly left: "left";
|
|
14
|
+
readonly center: "center";
|
|
15
|
+
readonly right: "right";
|
|
16
|
+
};
|
|
17
|
+
export declare const verticalAlignmentTypes: {
|
|
18
|
+
readonly top: "top";
|
|
19
|
+
readonly middle: "middle";
|
|
20
|
+
readonly bottom: "bottom";
|
|
21
|
+
};
|
|
22
|
+
export interface GridProps {
|
|
23
|
+
/** Grid item elements */
|
|
24
|
+
children: ValidGridItemProps[] | ValidGridItemProps;
|
|
25
|
+
/** Renders grid items in the opposite way to the source order */
|
|
26
|
+
reverse?: boolean;
|
|
27
|
+
/** Make children of grid items ahve 100% height to fill the vertical space */
|
|
28
|
+
equalHeight?: boolean;
|
|
29
|
+
/** The horizontal alignment of items within the grid, when there are empty columns. Leave blank to default to left. */
|
|
30
|
+
horizontalAlignment?: keyof typeof horizontalAlignmentTypes;
|
|
31
|
+
/** The vertical alignment of items within the grid. Leave blank to default to top. */
|
|
32
|
+
verticalAlignment?: keyof typeof verticalAlignmentTypes;
|
|
33
|
+
/** The gap between grid cells. Leave blank to default to the standard gutter. */
|
|
34
|
+
gutter?: keyof typeof gutterTypes;
|
|
35
|
+
/** Debug puts a coloured outline around the grid and its cells */
|
|
36
|
+
debug?: boolean;
|
|
37
|
+
/** Additional classes to add to the grid, for example mt--e */
|
|
38
|
+
className?: string;
|
|
39
|
+
/** The type of DOM node to render for the grid. Leave blank to default to div. */
|
|
40
|
+
elementType?: React.ElementType;
|
|
41
|
+
}
|
|
42
|
+
export declare const Grid: {
|
|
43
|
+
(props: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
gutter: {
|
|
45
|
+
readonly standard: "standard";
|
|
46
|
+
readonly none: "none";
|
|
47
|
+
readonly compact: "compact";
|
|
48
|
+
readonly loose: "loose";
|
|
49
|
+
};
|
|
50
|
+
horizontalAlignment: {
|
|
51
|
+
readonly left: "left";
|
|
52
|
+
readonly center: "center";
|
|
53
|
+
readonly right: "right";
|
|
54
|
+
};
|
|
55
|
+
verticalAlignment: {
|
|
56
|
+
readonly top: "top";
|
|
57
|
+
readonly middle: "middle";
|
|
58
|
+
readonly bottom: "bottom";
|
|
59
|
+
};
|
|
60
|
+
};
|
package/es/Grid.js
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Grid = exports.verticalAlignmentTypes = exports.horizontalAlignmentTypes = exports.gutterTypes = exports.GridItem = void 0;
|
|
18
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
20
|
-
const GridItem_1 = require("./GridItem");
|
|
21
|
-
Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return GridItem_1.GridItem; } });
|
|
22
|
-
require("../scss/grid.scss");
|
|
23
|
-
exports.gutterTypes = {
|
|
24
|
-
standard: "standard",
|
|
25
|
-
none: "none",
|
|
26
|
-
compact: "compact",
|
|
27
|
-
loose: "loose"
|
|
28
|
-
};
|
|
29
|
-
exports.horizontalAlignmentTypes = {
|
|
30
|
-
left: "left",
|
|
31
|
-
center: "center",
|
|
32
|
-
right: "right"
|
|
33
|
-
};
|
|
34
|
-
exports.verticalAlignmentTypes = {
|
|
35
|
-
top: "top",
|
|
36
|
-
middle: "middle",
|
|
37
|
-
bottom: "bottom"
|
|
38
|
-
};
|
|
39
|
-
const Grid = (props) => {
|
|
40
|
-
const { children, reverse, equalHeight, gutter, horizontalAlignment, verticalAlignment, debug, className, elementType } = props, rest = __rest(props, ["children", "reverse", "equalHeight", "gutter", "horizontalAlignment", "verticalAlignment", "debug", "className", "elementType"]);
|
|
41
|
-
const classNames = (0, classnames_1.default)({
|
|
42
|
-
grid: true,
|
|
43
|
-
"grid--rev": reverse,
|
|
44
|
-
"grid--equal-height": equalHeight,
|
|
45
|
-
"grid--gutterless": gutter === exports.gutterTypes.none,
|
|
46
|
-
"grid--compact": gutter === exports.gutterTypes.compact,
|
|
47
|
-
"grid--loose": gutter === exports.gutterTypes.loose,
|
|
48
|
-
"grid--center": horizontalAlignment === exports.horizontalAlignmentTypes.center,
|
|
49
|
-
"grid--right": horizontalAlignment === exports.horizontalAlignmentTypes.right,
|
|
50
|
-
"grid--middle": verticalAlignment === exports.verticalAlignmentTypes.middle,
|
|
51
|
-
"grid--bottom": verticalAlignment === exports.verticalAlignmentTypes.bottom,
|
|
52
|
-
"grid--debug": debug,
|
|
53
|
-
[`${className}`]: className
|
|
54
|
-
});
|
|
55
|
-
const GridElementType = elementType || "div";
|
|
56
|
-
return ((0, jsx_runtime_1.jsx)(GridElementType, Object.assign({ className: classNames }, rest, { children: children })));
|
|
57
|
-
};
|
|
58
|
-
exports.Grid = Grid;
|
|
59
|
-
// Legacy references - deprecated!
|
|
60
|
-
exports.Grid.gutter = exports.gutterTypes;
|
|
61
|
-
exports.Grid.horizontalAlignment = exports.horizontalAlignmentTypes;
|
|
62
|
-
exports.Grid.verticalAlignment = exports.verticalAlignmentTypes;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.Grid = exports.verticalAlignmentTypes = exports.horizontalAlignmentTypes = exports.gutterTypes = exports.GridItem = void 0;
|
|
18
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
20
|
+
const GridItem_1 = require("./GridItem");
|
|
21
|
+
Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return GridItem_1.GridItem; } });
|
|
22
|
+
require("../scss/grid.scss");
|
|
23
|
+
exports.gutterTypes = {
|
|
24
|
+
standard: "standard",
|
|
25
|
+
none: "none",
|
|
26
|
+
compact: "compact",
|
|
27
|
+
loose: "loose"
|
|
28
|
+
};
|
|
29
|
+
exports.horizontalAlignmentTypes = {
|
|
30
|
+
left: "left",
|
|
31
|
+
center: "center",
|
|
32
|
+
right: "right"
|
|
33
|
+
};
|
|
34
|
+
exports.verticalAlignmentTypes = {
|
|
35
|
+
top: "top",
|
|
36
|
+
middle: "middle",
|
|
37
|
+
bottom: "bottom"
|
|
38
|
+
};
|
|
39
|
+
const Grid = (props) => {
|
|
40
|
+
const { children, reverse, equalHeight, gutter, horizontalAlignment, verticalAlignment, debug, className, elementType } = props, rest = __rest(props, ["children", "reverse", "equalHeight", "gutter", "horizontalAlignment", "verticalAlignment", "debug", "className", "elementType"]);
|
|
41
|
+
const classNames = (0, classnames_1.default)({
|
|
42
|
+
grid: true,
|
|
43
|
+
"grid--rev": reverse,
|
|
44
|
+
"grid--equal-height": equalHeight,
|
|
45
|
+
"grid--gutterless": gutter === exports.gutterTypes.none,
|
|
46
|
+
"grid--compact": gutter === exports.gutterTypes.compact,
|
|
47
|
+
"grid--loose": gutter === exports.gutterTypes.loose,
|
|
48
|
+
"grid--center": horizontalAlignment === exports.horizontalAlignmentTypes.center,
|
|
49
|
+
"grid--right": horizontalAlignment === exports.horizontalAlignmentTypes.right,
|
|
50
|
+
"grid--middle": verticalAlignment === exports.verticalAlignmentTypes.middle,
|
|
51
|
+
"grid--bottom": verticalAlignment === exports.verticalAlignmentTypes.bottom,
|
|
52
|
+
"grid--debug": debug,
|
|
53
|
+
[`${className}`]: className
|
|
54
|
+
});
|
|
55
|
+
const GridElementType = elementType || "div";
|
|
56
|
+
return ((0, jsx_runtime_1.jsx)(GridElementType, Object.assign({ className: classNames }, rest, { children: children })));
|
|
57
|
+
};
|
|
58
|
+
exports.Grid = Grid;
|
|
59
|
+
// Legacy references - deprecated!
|
|
60
|
+
exports.Grid.gutter = exports.gutterTypes;
|
|
61
|
+
exports.Grid.horizontalAlignment = exports.horizontalAlignmentTypes;
|
|
62
|
+
exports.Grid.verticalAlignment = exports.verticalAlignmentTypes;
|
package/es/GridItem.d.ts
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
3
|
-
export type PullOrPush = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
|
|
4
|
-
export type BreakPointGridDefinition = Columns | {
|
|
5
|
-
/** The number of columns at this breakpoint */
|
|
6
|
-
cols: Columns;
|
|
7
|
-
/** The number of columns to pull at this breakpoint */
|
|
8
|
-
pull?: PullOrPush;
|
|
9
|
-
/** The number of columns to push at this breakpoint */
|
|
10
|
-
push?: PullOrPush;
|
|
11
|
-
};
|
|
12
|
-
export interface GridItemProps {
|
|
13
|
-
/** Contents of the grid item */
|
|
14
|
-
children: React.ReactNode;
|
|
15
|
-
/** The number of columns for the first (smallest) screen size */
|
|
16
|
-
cols?: Columns;
|
|
17
|
-
/** The number of columns to pull the grid item for the first (smallest) screen size */
|
|
18
|
-
pull?: PullOrPush;
|
|
19
|
-
/** The number of columns to push the grid item for the first (smallest) screen size */
|
|
20
|
-
push?: PullOrPush;
|
|
21
|
-
/** Grid definition from the xs breakpoint */
|
|
22
|
-
xs?: BreakPointGridDefinition;
|
|
23
|
-
/** Grid definition from the sm breakpoint */
|
|
24
|
-
sm?: BreakPointGridDefinition;
|
|
25
|
-
/** Grid definition from the md breakpoint */
|
|
26
|
-
md?: BreakPointGridDefinition;
|
|
27
|
-
/** Grid definition from the lg breakpoint */
|
|
28
|
-
lg?: BreakPointGridDefinition;
|
|
29
|
-
/** Grid definition from the xl breakpoint */
|
|
30
|
-
xl?: BreakPointGridDefinition;
|
|
31
|
-
/** Additional classes to add to the grid, for example mt--e */
|
|
32
|
-
className?: string;
|
|
33
|
-
/** The type of DOM node to render for the grid item. Leave blank to default to div. */
|
|
34
|
-
elementType?: React.ElementType;
|
|
35
|
-
}
|
|
36
|
-
export declare const GridItem: React.FC<GridItemProps>;
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
3
|
+
export type PullOrPush = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
|
|
4
|
+
export type BreakPointGridDefinition = Columns | {
|
|
5
|
+
/** The number of columns at this breakpoint */
|
|
6
|
+
cols: Columns;
|
|
7
|
+
/** The number of columns to pull at this breakpoint */
|
|
8
|
+
pull?: PullOrPush;
|
|
9
|
+
/** The number of columns to push at this breakpoint */
|
|
10
|
+
push?: PullOrPush;
|
|
11
|
+
};
|
|
12
|
+
export interface GridItemProps {
|
|
13
|
+
/** Contents of the grid item */
|
|
14
|
+
children: React.ReactNode;
|
|
15
|
+
/** The number of columns for the first (smallest) screen size */
|
|
16
|
+
cols?: Columns;
|
|
17
|
+
/** The number of columns to pull the grid item for the first (smallest) screen size */
|
|
18
|
+
pull?: PullOrPush;
|
|
19
|
+
/** The number of columns to push the grid item for the first (smallest) screen size */
|
|
20
|
+
push?: PullOrPush;
|
|
21
|
+
/** Grid definition from the xs breakpoint */
|
|
22
|
+
xs?: BreakPointGridDefinition;
|
|
23
|
+
/** Grid definition from the sm breakpoint */
|
|
24
|
+
sm?: BreakPointGridDefinition;
|
|
25
|
+
/** Grid definition from the md breakpoint */
|
|
26
|
+
md?: BreakPointGridDefinition;
|
|
27
|
+
/** Grid definition from the lg breakpoint */
|
|
28
|
+
lg?: BreakPointGridDefinition;
|
|
29
|
+
/** Grid definition from the xl breakpoint */
|
|
30
|
+
xl?: BreakPointGridDefinition;
|
|
31
|
+
/** Additional classes to add to the grid, for example mt--e */
|
|
32
|
+
className?: string;
|
|
33
|
+
/** The type of DOM node to render for the grid item. Leave blank to default to div. */
|
|
34
|
+
elementType?: React.ElementType;
|
|
35
|
+
}
|
|
36
|
+
export declare const GridItem: React.FC<GridItemProps>;
|
package/es/GridItem.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.GridItem = void 0;
|
|
15
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
|
-
const GridItem = (props) => {
|
|
17
|
-
const { children, cols = 12, push, pull, xs, sm, md, lg, xl, className, elementType: GridItemElementType = "div" } = props, rest = __rest(props, ["children", "cols", "push", "pull", "xs", "sm", "md", "lg", "xl", "className", "elementType"]);
|
|
18
|
-
let gridColsAttr = [cols.toString()];
|
|
19
|
-
if (push)
|
|
20
|
-
gridColsAttr.push("push:" + push);
|
|
21
|
-
if (pull)
|
|
22
|
-
gridColsAttr.push("pull:" + pull);
|
|
23
|
-
const bpGridDefs = { xs, sm, md, lg, xl };
|
|
24
|
-
const mapBpToAttr = (bp) => {
|
|
25
|
-
const key = bp;
|
|
26
|
-
const bpGridDef = bpGridDefs[key];
|
|
27
|
-
if (!bpGridDef)
|
|
28
|
-
return null;
|
|
29
|
-
// E.g. "xs:6"
|
|
30
|
-
if (typeof bpGridDef === "number")
|
|
31
|
-
return bp + ":" + bpGridDef;
|
|
32
|
-
// E.g. "xs:6 xs:push:3"
|
|
33
|
-
const { cols, pull, push } = bpGridDef;
|
|
34
|
-
let gridDefAttr = bp + ":" + cols;
|
|
35
|
-
if (pull)
|
|
36
|
-
gridDefAttr += ` ${bp}:pull:${pull}`;
|
|
37
|
-
if (push)
|
|
38
|
-
gridDefAttr += ` ${bp}:push:${push}`;
|
|
39
|
-
return gridDefAttr;
|
|
40
|
-
};
|
|
41
|
-
const bpGridDefKeys = Object.keys(bpGridDefs).map(mapBpToAttr);
|
|
42
|
-
gridColsAttr = gridColsAttr
|
|
43
|
-
.concat(bpGridDefKeys)
|
|
44
|
-
.filter((col) => col)
|
|
45
|
-
.join(" ");
|
|
46
|
-
return ((0, jsx_runtime_1.jsx)(GridItemElementType, Object.assign({ "data-g": gridColsAttr, "data-component": "grid-item", className: className }, rest, { children: children })));
|
|
47
|
-
};
|
|
48
|
-
exports.GridItem = GridItem;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.GridItem = void 0;
|
|
15
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
|
+
const GridItem = (props) => {
|
|
17
|
+
const { children, cols = 12, push, pull, xs, sm, md, lg, xl, className, elementType: GridItemElementType = "div" } = props, rest = __rest(props, ["children", "cols", "push", "pull", "xs", "sm", "md", "lg", "xl", "className", "elementType"]);
|
|
18
|
+
let gridColsAttr = [cols.toString()];
|
|
19
|
+
if (push)
|
|
20
|
+
gridColsAttr.push("push:" + push);
|
|
21
|
+
if (pull)
|
|
22
|
+
gridColsAttr.push("pull:" + pull);
|
|
23
|
+
const bpGridDefs = { xs, sm, md, lg, xl };
|
|
24
|
+
const mapBpToAttr = (bp) => {
|
|
25
|
+
const key = bp;
|
|
26
|
+
const bpGridDef = bpGridDefs[key];
|
|
27
|
+
if (!bpGridDef)
|
|
28
|
+
return null;
|
|
29
|
+
// E.g. "xs:6"
|
|
30
|
+
if (typeof bpGridDef === "number")
|
|
31
|
+
return bp + ":" + bpGridDef;
|
|
32
|
+
// E.g. "xs:6 xs:push:3"
|
|
33
|
+
const { cols, pull, push } = bpGridDef;
|
|
34
|
+
let gridDefAttr = bp + ":" + cols;
|
|
35
|
+
if (pull)
|
|
36
|
+
gridDefAttr += ` ${bp}:pull:${pull}`;
|
|
37
|
+
if (push)
|
|
38
|
+
gridDefAttr += ` ${bp}:push:${push}`;
|
|
39
|
+
return gridDefAttr;
|
|
40
|
+
};
|
|
41
|
+
const bpGridDefKeys = Object.keys(bpGridDefs).map(mapBpToAttr);
|
|
42
|
+
gridColsAttr = gridColsAttr
|
|
43
|
+
.concat(bpGridDefKeys)
|
|
44
|
+
.filter((col) => col)
|
|
45
|
+
.join(" ");
|
|
46
|
+
return ((0, jsx_runtime_1.jsx)(GridItemElementType, Object.assign({ "data-g": gridColsAttr, "data-component": "grid-item", className: className }, rest, { children: children })));
|
|
47
|
+
};
|
|
48
|
+
exports.GridItem = GridItem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-grid",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.20-alpha-node-update.0",
|
|
4
4
|
"description": "Grid component for the NICE Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"grid"
|
|
@@ -34,19 +34,19 @@
|
|
|
34
34
|
"url": "https://github.com/nice-digital/nice-design-system/issues"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@nice-digital/nds-core": "^4.0.
|
|
37
|
+
"@nice-digital/nds-core": "^4.0.17-alpha-node-update.0",
|
|
38
38
|
"classnames": "^2.2.6"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "^16 || ^17 || ^18"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "1b7a4a13183120071b022adecd2fcf4eebefbb6c",
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@testing-library/jest-dom": "^5.16.5",
|
|
46
46
|
"@testing-library/react": "^13.4.0",
|
|
47
47
|
"@testing-library/user-event": "^14.4.3",
|
|
48
48
|
"@types/jest": "^29.2.2",
|
|
49
|
-
"@types/node": "
|
|
50
|
-
"typescript": "^
|
|
49
|
+
"@types/node": "22.19.0",
|
|
50
|
+
"typescript": "^5.9.3"
|
|
51
51
|
}
|
|
52
52
|
}
|