@nice-digital/nds-grid 4.0.2-alpha.0 → 4.0.3-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.
Files changed (3) hide show
  1. package/es/Grid.d.ts +38 -20
  2. package/es/Grid.js +28 -27
  3. package/package.json +2 -2
package/es/Grid.d.ts CHANGED
@@ -3,22 +3,22 @@ import { GridItem } from "./GridItem";
3
3
  import "../scss/grid.scss";
4
4
  export { GridItem };
5
5
  declare type ValidGridItemProps = React.ReactElement<typeof GridItem> | boolean | null | undefined;
6
- export declare enum HorizontalAlignmentEnum {
7
- left = "left",
8
- center = "center",
9
- right = "right"
10
- }
11
- export declare enum VerticalAlignmentEnum {
12
- top = "top",
13
- middle = "middle",
14
- bottom = "bottom"
15
- }
16
- export declare enum GutterEnum {
17
- standard = "standard",
18
- none = "none",
19
- compact = "compact",
20
- loose = "loose"
21
- }
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
22
  export interface GridProps {
23
23
  /** Grid item elements */
24
24
  children: ValidGridItemProps[] | ValidGridItemProps;
@@ -27,11 +27,11 @@ export interface GridProps {
27
27
  /** Make children of grid items ahve 100% height to fill the vertical space */
28
28
  equalHeight?: boolean;
29
29
  /** The horizontal alignment of items within the grid, when there are empty columns. Leave blank to default to left. */
30
- horizontalAlignment?: HorizontalAlignmentEnum;
30
+ horizontalAlignment?: keyof typeof horizontalAlignmentTypes;
31
31
  /** The vertical alignment of items within the grid. Leave blank to default to top. */
32
- verticalAlignment?: VerticalAlignmentEnum;
32
+ verticalAlignment?: keyof typeof verticalAlignmentTypes;
33
33
  /** The gap between grid cells. Leave blank to default to the standard gutter. */
34
- gutter?: GutterEnum;
34
+ gutter?: keyof typeof gutterTypes;
35
35
  /** Debug puts a coloured outline around the grid and its cells */
36
36
  debug?: boolean;
37
37
  /** Additional classes to add to the grid, for example mt--e */
@@ -39,4 +39,22 @@ export interface GridProps {
39
39
  /** The type of DOM node to render for the grid. Leave blank to default to div. */
40
40
  elementType?: React.ElementType;
41
41
  }
42
- export declare const Grid: React.FC<GridProps>;
42
+ export declare const Grid: {
43
+ (props: GridProps): 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
@@ -14,44 +14,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
14
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.Grid = exports.GutterEnum = exports.VerticalAlignmentEnum = exports.HorizontalAlignmentEnum = exports.GridItem = void 0;
17
+ exports.Grid = exports.verticalAlignmentTypes = exports.horizontalAlignmentTypes = exports.gutterTypes = exports.GridItem = void 0;
18
18
  const jsx_runtime_1 = require("react/jsx-runtime");
19
19
  const classnames_1 = __importDefault(require("classnames"));
20
20
  const GridItem_1 = require("./GridItem");
21
21
  Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return GridItem_1.GridItem; } });
22
22
  require("../scss/grid.scss");
23
- var HorizontalAlignmentEnum;
24
- (function (HorizontalAlignmentEnum) {
25
- HorizontalAlignmentEnum["left"] = "left";
26
- HorizontalAlignmentEnum["center"] = "center";
27
- HorizontalAlignmentEnum["right"] = "right";
28
- })(HorizontalAlignmentEnum = exports.HorizontalAlignmentEnum || (exports.HorizontalAlignmentEnum = {}));
29
- var VerticalAlignmentEnum;
30
- (function (VerticalAlignmentEnum) {
31
- VerticalAlignmentEnum["top"] = "top";
32
- VerticalAlignmentEnum["middle"] = "middle";
33
- VerticalAlignmentEnum["bottom"] = "bottom";
34
- })(VerticalAlignmentEnum = exports.VerticalAlignmentEnum || (exports.VerticalAlignmentEnum = {}));
35
- var GutterEnum;
36
- (function (GutterEnum) {
37
- GutterEnum["standard"] = "standard";
38
- GutterEnum["none"] = "none";
39
- GutterEnum["compact"] = "compact";
40
- GutterEnum["loose"] = "loose";
41
- })(GutterEnum = exports.GutterEnum || (exports.GutterEnum = {}));
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
+ };
42
39
  const Grid = (props) => {
43
40
  const { children, reverse, equalHeight, gutter, horizontalAlignment, verticalAlignment, debug, className, elementType } = props, rest = __rest(props, ["children", "reverse", "equalHeight", "gutter", "horizontalAlignment", "verticalAlignment", "debug", "className", "elementType"]);
44
41
  const classNames = (0, classnames_1.default)({
45
42
  grid: true,
46
43
  "grid--rev": reverse,
47
44
  "grid--equal-height": equalHeight,
48
- "grid--gutterless": gutter === GutterEnum.none,
49
- "grid--compact": gutter === GutterEnum.compact,
50
- "grid--loose": gutter === GutterEnum.loose,
51
- "grid--center": horizontalAlignment === HorizontalAlignmentEnum.center,
52
- "grid--right": horizontalAlignment === HorizontalAlignmentEnum.right,
53
- "grid--middle": verticalAlignment === VerticalAlignmentEnum.middle,
54
- "grid--bottom": verticalAlignment === VerticalAlignmentEnum.bottom,
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,
55
52
  "grid--debug": debug,
56
53
  [`${className}`]: className
57
54
  });
@@ -59,3 +56,7 @@ const Grid = (props) => {
59
56
  return ((0, jsx_runtime_1.jsx)(GridElementType, Object.assign({ className: classNames }, rest, { children: children })));
60
57
  };
61
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice-digital/nds-grid",
3
- "version": "4.0.2-alpha.0",
3
+ "version": "4.0.3-alpha.0",
4
4
  "description": "Grid component for the NICE Design System",
5
5
  "keywords": [
6
6
  "grid"
@@ -39,7 +39,7 @@
39
39
  "peerDependencies": {
40
40
  "react": "^16 || ^17 || ^18"
41
41
  },
42
- "gitHead": "4e9cad8a2b94cdf4af05b18a6610835883bedf0e",
42
+ "gitHead": "0a6b742ccd11300f0586abf5dc3790e217f70c21",
43
43
  "devDependencies": {
44
44
  "@testing-library/jest-dom": "^5.16.5",
45
45
  "@testing-library/react": "^13.4.0",