@digigov/react-core 0.8.0 → 0.10.1
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/CHANGELOG.md +21 -1
- package/Hint/__snapshots__/index.test.tsx.snap +36 -0
- package/Hint/index.d.ts +6 -1
- package/Hint/index.js +4 -3
- package/Hint/index.test.js +24 -0
- package/{TableHeaderCell → TableHeadCell}/__snapshots__/index.test.tsx.snap +49 -49
- package/TableHeadCell/index.d.ts +21 -0
- package/{TableHeaderCell → TableHeadCell}/index.js +5 -5
- package/{TableHeaderCell → TableHeadCell}/index.test.d.ts +0 -0
- package/{TableHeaderCell → TableHeadCell}/index.test.js +27 -27
- package/TableNoDataRow/__snapshots__/index.test.tsx.snap +16 -0
- package/TableNoDataRow/index.d.ts +10 -0
- package/TableNoDataRow/index.js +39 -0
- package/TableNoDataRow/index.test.d.ts +1 -0
- package/TableNoDataRow/index.test.js +15 -0
- package/es/Hint/__snapshots__/index.test.tsx.snap +36 -0
- package/es/Hint/index.js +4 -3
- package/es/Hint/index.test.js +24 -0
- package/{esm/TableHeaderCell → es/TableHeadCell}/__snapshots__/index.test.tsx.snap +49 -49
- package/es/{TableHeaderCell → TableHeadCell}/index.js +3 -3
- package/es/TableHeadCell/index.test.js +119 -0
- package/es/TableNoDataRow/__snapshots__/index.test.tsx.snap +16 -0
- package/es/TableNoDataRow/index.js +24 -0
- package/es/TableNoDataRow/index.test.js +9 -0
- package/es/index.js +2 -1
- package/esm/Hint/__snapshots__/index.test.tsx.snap +36 -0
- package/esm/Hint/index.js +4 -3
- package/esm/Hint/index.test.js +24 -0
- package/{es/TableHeaderCell → esm/TableHeadCell}/__snapshots__/index.test.tsx.snap +49 -49
- package/esm/{TableHeaderCell → TableHeadCell}/index.js +3 -3
- package/esm/TableHeadCell/index.test.js +119 -0
- package/esm/TableNoDataRow/__snapshots__/index.test.tsx.snap +16 -0
- package/esm/TableNoDataRow/index.js +24 -0
- package/esm/TableNoDataRow/index.test.js +9 -0
- package/esm/index.js +3 -2
- package/index.d.ts +2 -1
- package/index.js +11 -3
- package/package.json +2 -2
- package/TableHeaderCell/index.d.ts +0 -21
- package/es/TableHeaderCell/index.test.js +0 -119
- package/esm/TableHeaderCell/index.test.js +0 -119
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type TdElementAttributes = JSX.IntrinsicElements['td'];
|
|
3
|
+
export interface TableNoDataRowProps extends TdElementAttributes {
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Use TableNoDataRow inside the Table component when there is no data to show.
|
|
7
|
+
* you can use colSpan prop attribute to expand the td width
|
|
8
|
+
*/
|
|
9
|
+
export declare const TableNoDataRow: React.ForwardRefExoticComponent<Pick<TableNoDataRowProps, "className" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "abbr" | "height" | "width" | "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "valign"> & React.RefAttributes<HTMLTableCellElement>>;
|
|
10
|
+
export default TableNoDataRow;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = exports.TableNoDataRow = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
17
|
+
|
|
18
|
+
var _excluded = ["className", "children"];
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Use TableNoDataRow inside the Table component when there is no data to show.
|
|
22
|
+
* you can use colSpan prop attribute to expand the td width
|
|
23
|
+
*/
|
|
24
|
+
var TableNoDataRow = /*#__PURE__*/_react["default"].forwardRef(function TableNoDataRow(_ref, ref) {
|
|
25
|
+
var className = _ref.className,
|
|
26
|
+
children = _ref.children,
|
|
27
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
28
|
+
return /*#__PURE__*/_react["default"].createElement("tr", {
|
|
29
|
+
className: "govgr-table__row"
|
|
30
|
+
}, /*#__PURE__*/_react["default"].createElement("td", (0, _extends2["default"])({
|
|
31
|
+
colSpan: 100,
|
|
32
|
+
ref: ref,
|
|
33
|
+
className: (0, _clsx["default"])(className, true && 'govgr-table__cell--no-data')
|
|
34
|
+
}, props), children));
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
exports.TableNoDataRow = TableNoDataRow;
|
|
38
|
+
var _default = TableNoDataRow;
|
|
39
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _enzyme = require("enzyme");
|
|
8
|
+
|
|
9
|
+
var _TableNoDataRow = _interopRequireDefault(require("@digigov/react-core/TableNoDataRow"));
|
|
10
|
+
|
|
11
|
+
var _ref = /*#__PURE__*/_react["default"].createElement(_TableNoDataRow["default"], null, "hello");
|
|
12
|
+
|
|
13
|
+
it('renders the Table with no props', function () {
|
|
14
|
+
expect((0, _enzyme.mount)(_ref)).toMatchSnapshot();
|
|
15
|
+
});
|
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
+
exports[`renders the Hint with fontSize=14 1`] = `
|
|
4
|
+
<ForwardRef(Hint)
|
|
5
|
+
fontSize="14"
|
|
6
|
+
>
|
|
7
|
+
<p
|
|
8
|
+
className="govgr-!-font-size-14 govgr-hint"
|
|
9
|
+
>
|
|
10
|
+
hello
|
|
11
|
+
</p>
|
|
12
|
+
</ForwardRef(Hint)>
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
exports[`renders the Hint with fontSize=16 1`] = `
|
|
16
|
+
<ForwardRef(Hint)
|
|
17
|
+
fontSize="16"
|
|
18
|
+
>
|
|
19
|
+
<p
|
|
20
|
+
className="govgr-!-font-size-16 govgr-hint"
|
|
21
|
+
>
|
|
22
|
+
hello
|
|
23
|
+
</p>
|
|
24
|
+
</ForwardRef(Hint)>
|
|
25
|
+
`;
|
|
26
|
+
|
|
27
|
+
exports[`renders the Hint with fontSize=24 1`] = `
|
|
28
|
+
<ForwardRef(Hint)
|
|
29
|
+
fontSize="24"
|
|
30
|
+
>
|
|
31
|
+
<p
|
|
32
|
+
className="govgr-!-font-size-24 govgr-hint"
|
|
33
|
+
>
|
|
34
|
+
hello
|
|
35
|
+
</p>
|
|
36
|
+
</ForwardRef(Hint)>
|
|
37
|
+
`;
|
|
38
|
+
|
|
3
39
|
exports[`renders the Hint with no props 1`] = `
|
|
4
40
|
<ForwardRef(Hint)>
|
|
5
41
|
<p
|
package/es/Hint/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["className", "children"];
|
|
3
|
+
var _excluded = ["fontSize", "className", "children"];
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
|
|
@@ -8,13 +8,14 @@ import clsx from 'clsx';
|
|
|
8
8
|
* Hint component can be used in form pages and it gives an extra hint description to the form.
|
|
9
9
|
*/
|
|
10
10
|
export var Hint = /*#__PURE__*/React.forwardRef(function Hint(_ref, ref) {
|
|
11
|
-
var
|
|
11
|
+
var fontSize = _ref.fontSize,
|
|
12
|
+
className = _ref.className,
|
|
12
13
|
children = _ref.children,
|
|
13
14
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
14
15
|
|
|
15
16
|
return /*#__PURE__*/React.createElement("p", _extends({
|
|
16
17
|
ref: ref,
|
|
17
|
-
className: clsx(className, true && 'govgr-hint')
|
|
18
|
+
className: clsx(className, fontSize === '14' && 'govgr-!-font-size-14', fontSize === '16' && 'govgr-!-font-size-16', fontSize === '24' && 'govgr-!-font-size-24', true && 'govgr-hint')
|
|
18
19
|
}, props), children);
|
|
19
20
|
});
|
|
20
21
|
export default Hint;
|
package/es/Hint/index.test.js
CHANGED
|
@@ -6,4 +6,28 @@ var _ref = /*#__PURE__*/React.createElement(Hint, null, "hello");
|
|
|
6
6
|
|
|
7
7
|
it('renders the Hint with no props', function () {
|
|
8
8
|
expect(mount(_ref)).toMatchSnapshot();
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
var _ref2 = /*#__PURE__*/React.createElement(Hint, {
|
|
12
|
+
fontSize: "14"
|
|
13
|
+
}, "hello");
|
|
14
|
+
|
|
15
|
+
it('renders the Hint with fontSize=14', function () {
|
|
16
|
+
expect(mount(_ref2)).toMatchSnapshot();
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
var _ref3 = /*#__PURE__*/React.createElement(Hint, {
|
|
20
|
+
fontSize: "16"
|
|
21
|
+
}, "hello");
|
|
22
|
+
|
|
23
|
+
it('renders the Hint with fontSize=16', function () {
|
|
24
|
+
expect(mount(_ref3)).toMatchSnapshot();
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
var _ref4 = /*#__PURE__*/React.createElement(Hint, {
|
|
28
|
+
fontSize: "24"
|
|
29
|
+
}, "hello");
|
|
30
|
+
|
|
31
|
+
it('renders the Hint with fontSize=24', function () {
|
|
32
|
+
expect(mount(_ref4)).toMatchSnapshot();
|
|
9
33
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`renders the Table with dataType="numeric" prop 1`] = `
|
|
4
|
-
<ForwardRef(
|
|
4
|
+
<ForwardRef(TableHeadCell)
|
|
5
5
|
dataType="numeric"
|
|
6
6
|
>
|
|
7
7
|
<th
|
|
@@ -9,174 +9,174 @@ exports[`renders the Table with dataType="numeric" prop 1`] = `
|
|
|
9
9
|
>
|
|
10
10
|
hello
|
|
11
11
|
</th>
|
|
12
|
-
</ForwardRef(
|
|
12
|
+
</ForwardRef(TableHeadCell)>
|
|
13
13
|
`;
|
|
14
14
|
|
|
15
15
|
exports[`renders the Table with no props 1`] = `
|
|
16
|
-
<ForwardRef(
|
|
16
|
+
<ForwardRef(TableHeadCell)>
|
|
17
17
|
<th
|
|
18
18
|
className="govgr-table__header"
|
|
19
19
|
>
|
|
20
20
|
hello
|
|
21
21
|
</th>
|
|
22
|
-
</ForwardRef(
|
|
22
|
+
</ForwardRef(TableHeadCell)>
|
|
23
23
|
`;
|
|
24
24
|
|
|
25
|
-
exports[`renders the
|
|
26
|
-
<ForwardRef(
|
|
25
|
+
exports[`renders the TableHeadCell dataType="numeric" and with cellWidth=full 1`] = `
|
|
26
|
+
<ForwardRef(TableHeadCell)
|
|
27
27
|
cellWidth="full"
|
|
28
28
|
dataType="numeric"
|
|
29
29
|
>
|
|
30
30
|
<th
|
|
31
31
|
className="govgr-table__header--numeric govgr-!-width-full govgr-table__header"
|
|
32
32
|
/>
|
|
33
|
-
</ForwardRef(
|
|
33
|
+
</ForwardRef(TableHeadCell)>
|
|
34
34
|
`;
|
|
35
35
|
|
|
36
|
-
exports[`renders the
|
|
37
|
-
<ForwardRef(
|
|
36
|
+
exports[`renders the TableHeadCell dataType="numeric" and with cellWidth=full 1`] = `
|
|
37
|
+
<ForwardRef(TableHeadCell)
|
|
38
38
|
cellWidth="full"
|
|
39
39
|
dataType="numeric"
|
|
40
40
|
>
|
|
41
41
|
<th
|
|
42
42
|
className="govgr-table__header--numeric govgr-!-width-full govgr-table__header"
|
|
43
43
|
/>
|
|
44
|
-
</ForwardRef(
|
|
44
|
+
</ForwardRef(TableHeadCell)>
|
|
45
45
|
`;
|
|
46
46
|
|
|
47
|
-
exports[`renders the
|
|
48
|
-
<ForwardRef(
|
|
47
|
+
exports[`renders the TableHeadCell with cellWidth=full 1`] = `
|
|
48
|
+
<ForwardRef(TableHeadCell)
|
|
49
49
|
cellWidth="full"
|
|
50
50
|
>
|
|
51
51
|
<th
|
|
52
52
|
className="govgr-!-width-full govgr-table__header"
|
|
53
53
|
/>
|
|
54
|
-
</ForwardRef(
|
|
54
|
+
</ForwardRef(TableHeadCell)>
|
|
55
55
|
`;
|
|
56
56
|
|
|
57
|
-
exports[`renders the
|
|
58
|
-
<ForwardRef(
|
|
57
|
+
exports[`renders the TableHeadCell with cellWidth=one-half 1`] = `
|
|
58
|
+
<ForwardRef(TableHeadCell)
|
|
59
59
|
cellWidth="one-half"
|
|
60
60
|
>
|
|
61
61
|
<th
|
|
62
62
|
className="govgr-!-width-one-half govgr-table__header"
|
|
63
63
|
/>
|
|
64
|
-
</ForwardRef(
|
|
64
|
+
</ForwardRef(TableHeadCell)>
|
|
65
65
|
`;
|
|
66
66
|
|
|
67
|
-
exports[`renders the
|
|
68
|
-
<ForwardRef(
|
|
67
|
+
exports[`renders the TableHeadCell with cellWidth=one-quarter 1`] = `
|
|
68
|
+
<ForwardRef(TableHeadCell)
|
|
69
69
|
cellWidth="one-quarter"
|
|
70
70
|
>
|
|
71
71
|
<th
|
|
72
72
|
className="govgr-!-width-one-quarter govgr-table__header"
|
|
73
73
|
/>
|
|
74
|
-
</ForwardRef(
|
|
74
|
+
</ForwardRef(TableHeadCell)>
|
|
75
75
|
`;
|
|
76
76
|
|
|
77
|
-
exports[`renders the
|
|
78
|
-
<ForwardRef(
|
|
77
|
+
exports[`renders the TableHeadCell with cellWidth=one-third 1`] = `
|
|
78
|
+
<ForwardRef(TableHeadCell)
|
|
79
79
|
cellWidth="one-third"
|
|
80
80
|
>
|
|
81
81
|
<th
|
|
82
82
|
className="govgr-!-width-one-third govgr-table__header"
|
|
83
83
|
/>
|
|
84
|
-
</ForwardRef(
|
|
84
|
+
</ForwardRef(TableHeadCell)>
|
|
85
85
|
`;
|
|
86
86
|
|
|
87
|
-
exports[`renders the
|
|
88
|
-
<ForwardRef(
|
|
87
|
+
exports[`renders the TableHeadCell with cellWidth=three-quarters 1`] = `
|
|
88
|
+
<ForwardRef(TableHeadCell)
|
|
89
89
|
cellWidth="three-quarters"
|
|
90
90
|
>
|
|
91
91
|
<th
|
|
92
92
|
className="govgr-!-width-three-quarters govgr-table__header"
|
|
93
93
|
/>
|
|
94
|
-
</ForwardRef(
|
|
94
|
+
</ForwardRef(TableHeadCell)>
|
|
95
95
|
`;
|
|
96
96
|
|
|
97
|
-
exports[`renders the
|
|
98
|
-
<ForwardRef(
|
|
97
|
+
exports[`renders the TableHeadCell with cellWidth=two-thirds 1`] = `
|
|
98
|
+
<ForwardRef(TableHeadCell)
|
|
99
99
|
cellWidth="two-thirds"
|
|
100
100
|
>
|
|
101
101
|
<th
|
|
102
102
|
className="govgr-!-width-two-thirds govgr-table__header"
|
|
103
103
|
/>
|
|
104
|
-
</ForwardRef(
|
|
104
|
+
</ForwardRef(TableHeadCell)>
|
|
105
105
|
`;
|
|
106
106
|
|
|
107
|
-
exports[`renders the
|
|
108
|
-
<ForwardRef(
|
|
107
|
+
exports[`renders the TableHeadCell with dataType="numeric" and cellWidth=three-quarters 1`] = `
|
|
108
|
+
<ForwardRef(TableHeadCell)
|
|
109
109
|
cellWidth="three-quarters"
|
|
110
110
|
dataType="numeric"
|
|
111
111
|
>
|
|
112
112
|
<th
|
|
113
113
|
className="govgr-!-width-three-quarters govgr-table__header--numeric govgr-table__header"
|
|
114
114
|
/>
|
|
115
|
-
</ForwardRef(
|
|
115
|
+
</ForwardRef(TableHeadCell)>
|
|
116
116
|
`;
|
|
117
117
|
|
|
118
|
-
exports[`renders the
|
|
119
|
-
<ForwardRef(
|
|
118
|
+
exports[`renders the TableHeadCell with dataType="numeric" and cellWidth=two-thirds 1`] = `
|
|
119
|
+
<ForwardRef(TableHeadCell)
|
|
120
120
|
cellWidth="two-thirds"
|
|
121
121
|
dataType="numeric"
|
|
122
122
|
>
|
|
123
123
|
<th
|
|
124
124
|
className="govgr-!-width-two-thirds govgr-table__header--numeric govgr-table__header"
|
|
125
125
|
/>
|
|
126
|
-
</ForwardRef(
|
|
126
|
+
</ForwardRef(TableHeadCell)>
|
|
127
127
|
`;
|
|
128
128
|
|
|
129
|
-
exports[`renders the
|
|
130
|
-
<ForwardRef(
|
|
129
|
+
exports[`renders the TableHeadCell with dataType="numeric" and cellWidth=one-third 1`] = `
|
|
130
|
+
<ForwardRef(TableHeadCell)
|
|
131
131
|
cellWidth="one-third"
|
|
132
132
|
dataType="numeric"
|
|
133
133
|
>
|
|
134
134
|
<th
|
|
135
135
|
className="govgr-!-width-one-third govgr-table__header--numeric govgr-table__header"
|
|
136
136
|
/>
|
|
137
|
-
</ForwardRef(
|
|
137
|
+
</ForwardRef(TableHeadCell)>
|
|
138
138
|
`;
|
|
139
139
|
|
|
140
|
-
exports[`renders the
|
|
141
|
-
<ForwardRef(
|
|
140
|
+
exports[`renders the TableHeadCell with dataType="numeric" and cellWidth=three-quarters 1`] = `
|
|
141
|
+
<ForwardRef(TableHeadCell)
|
|
142
142
|
cellWidth="three-quarters"
|
|
143
143
|
dataType="numeric"
|
|
144
144
|
>
|
|
145
145
|
<th
|
|
146
146
|
className="govgr-!-width-three-quarters govgr-table__header--numeric govgr-table__header"
|
|
147
147
|
/>
|
|
148
|
-
</ForwardRef(
|
|
148
|
+
</ForwardRef(TableHeadCell)>
|
|
149
149
|
`;
|
|
150
150
|
|
|
151
|
-
exports[`renders the
|
|
152
|
-
<ForwardRef(
|
|
151
|
+
exports[`renders the TableHeadCell with dataType="numeric" and cellWidth=two-thirds 1`] = `
|
|
152
|
+
<ForwardRef(TableHeadCell)
|
|
153
153
|
cellWidth="two-thirds"
|
|
154
154
|
dataType="numeric"
|
|
155
155
|
>
|
|
156
156
|
<th
|
|
157
157
|
className="govgr-!-width-two-thirds govgr-table__header--numeric govgr-table__header"
|
|
158
158
|
/>
|
|
159
|
-
</ForwardRef(
|
|
159
|
+
</ForwardRef(TableHeadCell)>
|
|
160
160
|
`;
|
|
161
161
|
|
|
162
|
-
exports[`renders the
|
|
163
|
-
<ForwardRef(
|
|
162
|
+
exports[`renders the TableHeadCell with dataType="numeric" and dataType="numeric" and cellWidth=one-half 1`] = `
|
|
163
|
+
<ForwardRef(TableHeadCell)
|
|
164
164
|
cellWidth="one-half"
|
|
165
165
|
dataType="numeric"
|
|
166
166
|
>
|
|
167
167
|
<th
|
|
168
168
|
className="govgr-!-width-one-half govgr-table__header--numeric govgr-table__header"
|
|
169
169
|
/>
|
|
170
|
-
</ForwardRef(
|
|
170
|
+
</ForwardRef(TableHeadCell)>
|
|
171
171
|
`;
|
|
172
172
|
|
|
173
|
-
exports[`renders the
|
|
174
|
-
<ForwardRef(
|
|
173
|
+
exports[`renders the TableHeadCell with dataType="numeric" cellWidth=one-quarter 1`] = `
|
|
174
|
+
<ForwardRef(TableHeadCell)
|
|
175
175
|
cellWidth="one-quarter"
|
|
176
176
|
dataType="numeric"
|
|
177
177
|
>
|
|
178
178
|
<th
|
|
179
179
|
className="govgr-!-width-one-quarter govgr-table__header--numeric govgr-table__header"
|
|
180
180
|
/>
|
|
181
|
-
</ForwardRef(
|
|
181
|
+
</ForwardRef(TableHeadCell)>
|
|
182
182
|
`;
|
|
@@ -5,9 +5,9 @@ import React from 'react';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
* Use
|
|
8
|
+
* Use TableHeadCell inside the Table component to provide the header row and/or column of the table.
|
|
9
9
|
*/
|
|
10
|
-
export var
|
|
10
|
+
export var TableHeadCell = /*#__PURE__*/React.forwardRef(function TableHeadCell(_ref, ref) {
|
|
11
11
|
var _ref$dataType = _ref.dataType,
|
|
12
12
|
dataType = _ref$dataType === void 0 ? 'text' : _ref$dataType,
|
|
13
13
|
cellWidth = _ref.cellWidth,
|
|
@@ -20,4 +20,4 @@ export var TableHeaderCell = /*#__PURE__*/React.forwardRef(function TableHeaderC
|
|
|
20
20
|
className: clsx(className, cellWidth === 'three-quarters' && 'govgr-!-width-three-quarters', cellWidth === 'one-quarter' && 'govgr-!-width-one-quarter', cellWidth === 'two-thirds' && 'govgr-!-width-two-thirds', cellWidth === 'one-third' && 'govgr-!-width-one-third', cellWidth === 'one-half' && 'govgr-!-width-one-half', dataType === 'numeric' && 'govgr-table__header--numeric', cellWidth === 'full' && 'govgr-!-width-full', true && 'govgr-table__header')
|
|
21
21
|
}, props), children);
|
|
22
22
|
});
|
|
23
|
-
export default
|
|
23
|
+
export default TableHeadCell;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { mount } from 'enzyme';
|
|
3
|
+
import TableHeadCell from '@digigov/react-core/TableHeadCell';
|
|
4
|
+
|
|
5
|
+
var _ref = /*#__PURE__*/React.createElement(TableHeadCell, null, "hello");
|
|
6
|
+
|
|
7
|
+
it('renders the Table with no props', function () {
|
|
8
|
+
expect(mount(_ref)).toMatchSnapshot();
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
var _ref2 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
12
|
+
dataType: "numeric"
|
|
13
|
+
}, "hello");
|
|
14
|
+
|
|
15
|
+
it('renders the Table with dataType="numeric" prop', function () {
|
|
16
|
+
expect(mount(_ref2)).toMatchSnapshot();
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
var _ref3 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
20
|
+
cellWidth: 'one-quarter'
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('renders the TableHeadCell with cellWidth=one-quarter', function () {
|
|
24
|
+
expect(mount(_ref3)).toMatchSnapshot();
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
var _ref4 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
28
|
+
cellWidth: 'one-third'
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it('renders the TableHeadCell with cellWidth=one-third', function () {
|
|
32
|
+
expect(mount(_ref4)).toMatchSnapshot();
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
var _ref5 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
36
|
+
cellWidth: 'one-half'
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it('renders the TableHeadCell with cellWidth=one-half', function () {
|
|
40
|
+
expect(mount(_ref5)).toMatchSnapshot();
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
var _ref6 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
44
|
+
cellWidth: 'two-thirds'
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
it('renders the TableHeadCell with cellWidth=two-thirds', function () {
|
|
48
|
+
expect(mount(_ref6)).toMatchSnapshot();
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
var _ref7 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
52
|
+
cellWidth: 'three-quarters'
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
it('renders the TableHeadCell with cellWidth=three-quarters', function () {
|
|
56
|
+
expect(mount(_ref7)).toMatchSnapshot();
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
var _ref8 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
60
|
+
cellWidth: 'full'
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
it('renders the TableHeadCell with cellWidth=full', function () {
|
|
64
|
+
expect(mount(_ref8)).toMatchSnapshot();
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
var _ref9 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
68
|
+
dataType: "numeric",
|
|
69
|
+
cellWidth: 'one-quarter'
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
it('renders the TableHeadCell with dataType="numeric" cellWidth=one-quarter', function () {
|
|
73
|
+
expect(mount(_ref9)).toMatchSnapshot();
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
var _ref10 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
77
|
+
dataType: "numeric",
|
|
78
|
+
cellWidth: 'one-third'
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
it('renders the TableHeadCell with dataType="numeric" and cellWidth=one-third', function () {
|
|
82
|
+
expect(mount(_ref10)).toMatchSnapshot();
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
var _ref11 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
86
|
+
dataType: "numeric",
|
|
87
|
+
cellWidth: 'one-half'
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
it('renders the TableHeadCell with dataType="numeric" and dataType="numeric" and cellWidth=one-half', function () {
|
|
91
|
+
expect(mount(_ref11)).toMatchSnapshot();
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
var _ref12 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
95
|
+
dataType: "numeric",
|
|
96
|
+
cellWidth: 'two-thirds'
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
it('renders the TableHeadCell with dataType="numeric" and cellWidth=two-thirds', function () {
|
|
100
|
+
expect(mount(_ref12)).toMatchSnapshot();
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
var _ref13 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
104
|
+
dataType: "numeric",
|
|
105
|
+
cellWidth: 'three-quarters'
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
it('renders the TableHeadCell with dataType="numeric" and cellWidth=three-quarters', function () {
|
|
109
|
+
expect(mount(_ref13)).toMatchSnapshot();
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
var _ref14 = /*#__PURE__*/React.createElement(TableHeadCell, {
|
|
113
|
+
dataType: "numeric",
|
|
114
|
+
cellWidth: 'full'
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
it('renders the TableHeadCell dataType="numeric" and with cellWidth=full', function () {
|
|
118
|
+
expect(mount(_ref14)).toMatchSnapshot();
|
|
119
|
+
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`renders the Table with no props 1`] = `
|
|
4
|
+
<ForwardRef(TableNoDataRow)>
|
|
5
|
+
<tr
|
|
6
|
+
className="govgr-table__row"
|
|
7
|
+
>
|
|
8
|
+
<td
|
|
9
|
+
className="govgr-table__cell--no-data"
|
|
10
|
+
colSpan={100}
|
|
11
|
+
>
|
|
12
|
+
hello
|
|
13
|
+
</td>
|
|
14
|
+
</tr>
|
|
15
|
+
</ForwardRef(TableNoDataRow)>
|
|
16
|
+
`;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["className", "children"];
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import clsx from 'clsx';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Use TableNoDataRow inside the Table component when there is no data to show.
|
|
9
|
+
* you can use colSpan prop attribute to expand the td width
|
|
10
|
+
*/
|
|
11
|
+
export var TableNoDataRow = /*#__PURE__*/React.forwardRef(function TableNoDataRow(_ref, ref) {
|
|
12
|
+
var className = _ref.className,
|
|
13
|
+
children = _ref.children,
|
|
14
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
15
|
+
|
|
16
|
+
return /*#__PURE__*/React.createElement("tr", {
|
|
17
|
+
className: "govgr-table__row"
|
|
18
|
+
}, /*#__PURE__*/React.createElement("td", _extends({
|
|
19
|
+
colSpan: 100,
|
|
20
|
+
ref: ref,
|
|
21
|
+
className: clsx(className, true && 'govgr-table__cell--no-data')
|
|
22
|
+
}, props), children));
|
|
23
|
+
});
|
|
24
|
+
export default TableNoDataRow;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { mount } from 'enzyme';
|
|
3
|
+
import TableNoDataRow from '@digigov/react-core/TableNoDataRow';
|
|
4
|
+
|
|
5
|
+
var _ref = /*#__PURE__*/React.createElement(TableNoDataRow, null, "hello");
|
|
6
|
+
|
|
7
|
+
it('renders the Table with no props', function () {
|
|
8
|
+
expect(mount(_ref)).toMatchSnapshot();
|
|
9
|
+
});
|
package/es/index.js
CHANGED
|
@@ -119,8 +119,9 @@ export { default as Table } from '@digigov/react-core/Table';
|
|
|
119
119
|
export { default as TableBody } from '@digigov/react-core/TableBody';
|
|
120
120
|
export { default as TableCaption } from '@digigov/react-core/TableCaption';
|
|
121
121
|
export { default as TableDataCell } from '@digigov/react-core/TableDataCell';
|
|
122
|
+
export { default as TableNoDataRow } from '@digigov/react-core/TableNoDataRow';
|
|
122
123
|
export { default as TableHead } from '@digigov/react-core/TableHead';
|
|
123
|
-
export { default as
|
|
124
|
+
export { default as TableHeadCell } from '@digigov/react-core/TableHeadCell';
|
|
124
125
|
export { default as TableRow } from '@digigov/react-core/TableRow';
|
|
125
126
|
export { default as Tabs } from '@digigov/react-core/Tabs';
|
|
126
127
|
export { default as TabsHeading } from '@digigov/react-core/TabsHeading';
|
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
|
+
exports[`renders the Hint with fontSize=14 1`] = `
|
|
4
|
+
<ForwardRef(Hint)
|
|
5
|
+
fontSize="14"
|
|
6
|
+
>
|
|
7
|
+
<p
|
|
8
|
+
className="govgr-!-font-size-14 govgr-hint"
|
|
9
|
+
>
|
|
10
|
+
hello
|
|
11
|
+
</p>
|
|
12
|
+
</ForwardRef(Hint)>
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
exports[`renders the Hint with fontSize=16 1`] = `
|
|
16
|
+
<ForwardRef(Hint)
|
|
17
|
+
fontSize="16"
|
|
18
|
+
>
|
|
19
|
+
<p
|
|
20
|
+
className="govgr-!-font-size-16 govgr-hint"
|
|
21
|
+
>
|
|
22
|
+
hello
|
|
23
|
+
</p>
|
|
24
|
+
</ForwardRef(Hint)>
|
|
25
|
+
`;
|
|
26
|
+
|
|
27
|
+
exports[`renders the Hint with fontSize=24 1`] = `
|
|
28
|
+
<ForwardRef(Hint)
|
|
29
|
+
fontSize="24"
|
|
30
|
+
>
|
|
31
|
+
<p
|
|
32
|
+
className="govgr-!-font-size-24 govgr-hint"
|
|
33
|
+
>
|
|
34
|
+
hello
|
|
35
|
+
</p>
|
|
36
|
+
</ForwardRef(Hint)>
|
|
37
|
+
`;
|
|
38
|
+
|
|
3
39
|
exports[`renders the Hint with no props 1`] = `
|
|
4
40
|
<ForwardRef(Hint)>
|
|
5
41
|
<p
|