@pingux/astro 2.129.0-alpha.4 → 2.129.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 (72) hide show
  1. package/lib/cjs/components/Card/Card.styles.d.ts +0 -11
  2. package/lib/cjs/components/Card/Card.styles.js +1 -6
  3. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.mdx +1 -1
  4. package/lib/cjs/components/Table/Table.stories.js +5 -4
  5. package/lib/cjs/components/Table/Table.styles.d.ts +3 -5
  6. package/lib/cjs/components/Table/Table.styles.js +6 -8
  7. package/lib/cjs/index.d.ts +2 -3
  8. package/lib/cjs/index.js +20 -74
  9. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts +0 -22
  10. package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js +0 -22
  11. package/lib/cjs/styles/themes/next-gen/colors/colors.d.ts +0 -1
  12. package/lib/cjs/styles/themes/next-gen/colors/colors.js +1 -2
  13. package/lib/cjs/styles/themes/next-gen/convertedComponentList.js +1 -1
  14. package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +1 -146
  15. package/lib/cjs/styles/themes/next-gen/variants/cards.d.ts +1 -14
  16. package/lib/cjs/styles/themes/next-gen/variants/cards.js +2 -7
  17. package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +0 -131
  18. package/lib/cjs/styles/themes/next-gen/variants/variants.js +1 -5
  19. package/lib/cjs/styles/variants/variants.js +2 -5
  20. package/lib/components/Card/Card.styles.js +1 -6
  21. package/lib/components/RockerButtonGroup/RockerButtonGroup.mdx +1 -1
  22. package/lib/components/Table/Table.stories.js +6 -5
  23. package/lib/components/Table/Table.styles.js +6 -8
  24. package/lib/index.js +2 -3
  25. package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js +0 -22
  26. package/lib/styles/themes/next-gen/colors/colors.js +1 -2
  27. package/lib/styles/themes/next-gen/convertedComponentList.js +1 -1
  28. package/lib/styles/themes/next-gen/variants/cards.js +2 -7
  29. package/lib/styles/themes/next-gen/variants/variants.js +1 -5
  30. package/lib/styles/variants/variants.js +2 -5
  31. package/package.json +1 -1
  32. package/lib/cjs/components/TableBase/TableBase.d.ts +0 -9
  33. package/lib/cjs/components/TableBase/TableBase.js +0 -238
  34. package/lib/cjs/components/TableBase/TableBase.mdx +0 -30
  35. package/lib/cjs/components/TableBase/TableBase.stories.d.ts +0 -6
  36. package/lib/cjs/components/TableBase/TableBase.stories.js +0 -111
  37. package/lib/cjs/components/TableBase/TableBase.styles.d.ts +0 -76
  38. package/lib/cjs/components/TableBase/TableBase.styles.js +0 -80
  39. package/lib/cjs/components/TableBase/TableBase.test.d.ts +0 -1
  40. package/lib/cjs/components/TableBase/TableBase.test.js +0 -122
  41. package/lib/cjs/components/TableBase/index.d.ts +0 -1
  42. package/lib/cjs/components/TableBase/index.js +0 -14
  43. package/lib/cjs/components/TableBase/stories/NextGenDarkTableBase.chromatic.stories.d.ts +0 -6
  44. package/lib/cjs/components/TableBase/stories/NextGenDarkTableBase.chromatic.stories.js +0 -22
  45. package/lib/cjs/components/TableBase/stories/NextGenTableBase.chromatic.stories.d.ts +0 -6
  46. package/lib/cjs/components/TableBase/stories/NextGenTableBase.chromatic.stories.js +0 -22
  47. package/lib/cjs/components/TableBase/stories/NextGenTableBase.d.ts +0 -3
  48. package/lib/cjs/components/TableBase/stories/NextGenTableBase.js +0 -67
  49. package/lib/cjs/styles/themes/next-gen/variants/table.d.ts +0 -45
  50. package/lib/cjs/styles/themes/next-gen/variants/table.js +0 -65
  51. package/lib/cjs/styles/themes/next-gen/variants/tableBase.d.ts +0 -86
  52. package/lib/cjs/styles/themes/next-gen/variants/tableBase.js +0 -99
  53. package/lib/cjs/types/cell.d.ts +0 -12
  54. package/lib/cjs/types/cell.js +0 -6
  55. package/lib/cjs/types/tableBase.d.ts +0 -45
  56. package/lib/cjs/types/tableBase.js +0 -6
  57. package/lib/cjs/utils/devUtils/constants/items.d.ts +0 -10
  58. package/lib/cjs/utils/devUtils/constants/items.js +0 -87
  59. package/lib/components/TableBase/TableBase.js +0 -221
  60. package/lib/components/TableBase/TableBase.mdx +0 -30
  61. package/lib/components/TableBase/TableBase.stories.js +0 -100
  62. package/lib/components/TableBase/TableBase.styles.js +0 -72
  63. package/lib/components/TableBase/TableBase.test.js +0 -119
  64. package/lib/components/TableBase/index.js +0 -1
  65. package/lib/components/TableBase/stories/NextGenDarkTableBase.chromatic.stories.js +0 -12
  66. package/lib/components/TableBase/stories/NextGenTableBase.chromatic.stories.js +0 -12
  67. package/lib/components/TableBase/stories/NextGenTableBase.js +0 -58
  68. package/lib/styles/themes/next-gen/variants/table.js +0 -57
  69. package/lib/styles/themes/next-gen/variants/tableBase.js +0 -91
  70. package/lib/types/cell.js +0 -1
  71. package/lib/types/tableBase.js +0 -1
  72. package/lib/utils/devUtils/constants/items.js +0 -79
@@ -1,221 +0,0 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
- import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
10
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
11
- import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
12
- var _excluded = ["caption", "selectionMode", "selectedKeys", "defaultSelectedKeys", "tableBodyProps"],
13
- _excluded2 = ["type", "children", "hasCaption", "className"];
14
- import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
15
- import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
16
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
17
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
18
- import React, { forwardRef, useRef } from 'react';
19
- import { useFocusRing } from '@react-aria/focus';
20
- import { useHover, usePress } from '@react-aria/interactions';
21
- import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
22
- import { mergeProps } from '@react-aria/utils';
23
- import { useTableState } from '@react-stately/table';
24
- import { Box } from '../..';
25
- import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
26
- import { jsx as ___EmotionJSX } from "@emotion/react";
27
- var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
28
- var _context, _context3;
29
- var caption = props.caption,
30
- selectionMode = props.selectionMode,
31
- selectedKeys = props.selectedKeys,
32
- _props$defaultSelecte = props.defaultSelectedKeys,
33
- defaultSelectedKeys = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
34
- tableBodyProps = props.tableBodyProps,
35
- others = _objectWithoutProperties(props, _excluded);
36
- var state = useTableState(_objectSpread(_objectSpread({}, props), {}, {
37
- selectionMode: selectionMode,
38
- selectedKeys: selectedKeys,
39
- defaultSelectedKeys: selectedKeys ? undefined : defaultSelectedKeys
40
- }));
41
- var tableRef = useLocalOrForwardRef(ref);
42
- var bodyRef = useRef(null);
43
- var collection = state.collection;
44
- var _useTable = useTable(_objectSpread(_objectSpread({}, props), {}, {
45
- 'aria-describedby': props['aria-describedby'] || 'table-caption',
46
- scrollRef: bodyRef
47
- }), state, tableRef),
48
- gridProps = _useTable.gridProps;
49
- return ___EmotionJSX(Box, _extends({
50
- as: "table",
51
- display: "table",
52
- variant: "tableBase.container",
53
- ref: tableRef
54
- }, gridProps, others), caption && ___EmotionJSX(Box, {
55
- as: "caption",
56
- display: "table-caption",
57
- variant: "tableBase.caption",
58
- textAlign: "left",
59
- id: props['aria-describedby'] || 'table-caption'
60
- }, caption), ___EmotionJSX(TableRowGroup, {
61
- type: "thead",
62
- hasCaption: !!caption
63
- }, _mapInstanceProperty(_context = collection.headerRows).call(_context, function (headerRow) {
64
- var _context2, _state$collection$get, _state$collection;
65
- return ___EmotionJSX(TableHeaderRow, {
66
- key: headerRow.key,
67
- item: headerRow,
68
- state: state
69
- }, _mapInstanceProperty(_context2 = _Array$from(((_state$collection$get = (_state$collection = state.collection).getChildren) === null || _state$collection$get === void 0 ? void 0 : _state$collection$get.call(_state$collection, headerRow.key)) || [])).call(_context2, function (column) {
70
- return ___EmotionJSX(TableColumnHeader, {
71
- key: column.key,
72
- column: column,
73
- state: state
74
- });
75
- }));
76
- })), ___EmotionJSX(TableRowGroup, _extends({
77
- ref: bodyRef,
78
- type: "tbody"
79
- }, tableBodyProps), _mapInstanceProperty(_context3 = _Array$from(collection)).call(_context3, function (row) {
80
- var _context4;
81
- return ___EmotionJSX(TableRow, {
82
- key: row.key,
83
- item: row,
84
- state: state
85
- }, _mapInstanceProperty(_context4 = _Array$from(state.collection.getChildren(row.key))).call(_context4, function (cell) {
86
- return ___EmotionJSX(TableCell, {
87
- key: cell.key,
88
- cell: cell,
89
- state: state
90
- });
91
- }));
92
- })));
93
- });
94
- export default TableBase;
95
- export var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
96
- var type = props.type,
97
- children = props.children,
98
- hasCaption = props.hasCaption,
99
- className = props.className,
100
- others = _objectWithoutProperties(props, _excluded2);
101
- var _useTableRowGroup = useTableRowGroup(),
102
- rowGroupProps = _useTableRowGroup.rowGroupProps;
103
- var _useStatusClasses = useStatusClasses(className, {
104
- hasCaption: hasCaption
105
- }),
106
- classNames = _useStatusClasses.classNames;
107
- return ___EmotionJSX(Box, _extends({
108
- ref: ref
109
- }, rowGroupProps, {
110
- as: type,
111
- className: classNames,
112
- display: "table-row-group",
113
- variant: "tableBase.".concat(type)
114
- }, others), children);
115
- });
116
- export var TableHeaderRow = function TableHeaderRow(props) {
117
- var item = props.item,
118
- state = props.state,
119
- children = props.children;
120
- var ref = useRef(null);
121
- var _useTableHeaderRow = useTableHeaderRow({
122
- node: item
123
- }, state, ref),
124
- rowProps = _useTableHeaderRow.rowProps;
125
- return ___EmotionJSX(Box, _extends({
126
- as: "tr",
127
- display: "table-row"
128
- }, rowProps, {
129
- ref: ref
130
- }), children);
131
- };
132
- export var TableColumnHeader = function TableColumnHeader(props) {
133
- var column = props.column,
134
- state = props.state,
135
- className = props.className;
136
- var ref = useRef(null);
137
- var _useTableColumnHeader = useTableColumnHeader({
138
- node: column
139
- }, state, ref),
140
- columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
141
- var _useFocusRing = useFocusRing(),
142
- isFocusVisible = _useFocusRing.isFocusVisible,
143
- focusProps = _useFocusRing.focusProps;
144
- var _useStatusClasses2 = useStatusClasses(className, {
145
- isFocused: isFocusVisible
146
- }),
147
- classNames = _useStatusClasses2.classNames;
148
- return ___EmotionJSX(Box, _extends({
149
- as: "th",
150
- display: "table-cell",
151
- variant: "tableBase.head",
152
- className: classNames
153
- }, mergeProps(columnHeaderProps, focusProps), {
154
- ref: ref
155
- }, column.props), column.rendered);
156
- };
157
- export var TableRow = function TableRow(props) {
158
- var item = props.item,
159
- state = props.state,
160
- children = props.children,
161
- className = props.className;
162
- var ref = useRef(null);
163
- var _useTableRow = useTableRow({
164
- node: item
165
- }, state, ref),
166
- rowProps = _useTableRow.rowProps;
167
- var isSelected = state.selectionManager.isSelected(item.key);
168
- var _useFocusRing2 = useFocusRing(),
169
- isFocusVisible = _useFocusRing2.isFocusVisible,
170
- focusProps = _useFocusRing2.focusProps;
171
- var _useHover = useHover({}),
172
- hoverProps = _useHover.hoverProps,
173
- isHovered = _useHover.isHovered;
174
- var _usePress = usePress({
175
- ref: ref
176
- }),
177
- pressProps = _usePress.pressProps,
178
- isPressed = _usePress.isPressed;
179
- var _useStatusClasses3 = useStatusClasses(className, {
180
- isSelected: isSelected,
181
- isHovered: isHovered,
182
- isPressed: isPressed,
183
- isFocused: isFocusVisible
184
- }),
185
- classNames = _useStatusClasses3.classNames;
186
- return ___EmotionJSX(Box, _extends({
187
- display: "table-row",
188
- as: "tr",
189
- className: classNames,
190
- variant: "tableBase.row"
191
- }, mergeProps(rowProps, focusProps, hoverProps, pressProps), {
192
- ref: ref
193
- }), children);
194
- };
195
- export function TableCell(props) {
196
- var _cell$props$noWrap;
197
- var cell = props.cell,
198
- state = props.state,
199
- className = props.className;
200
- var ref = useRef(null);
201
- var _useTableCell = useTableCell({
202
- node: cell
203
- }, state, ref),
204
- gridCellProps = _useTableCell.gridCellProps;
205
- var _useFocusRing3 = useFocusRing(),
206
- isFocusVisible = _useFocusRing3.isFocusVisible,
207
- focusProps = _useFocusRing3.focusProps;
208
- var _useStatusClasses4 = useStatusClasses(className, {
209
- isFocused: isFocusVisible,
210
- noWrap: (_cell$props$noWrap = cell.props.noWrap) !== null && _cell$props$noWrap !== void 0 ? _cell$props$noWrap : false
211
- }),
212
- classNames = _useStatusClasses4.classNames;
213
- return ___EmotionJSX(Box, _extends({
214
- as: "td",
215
- display: "table-cell",
216
- className: classNames
217
- }, mergeProps(gridCellProps, focusProps), {
218
- variant: "tableBase.data",
219
- ref: ref
220
- }, cell.props), cell.rendered);
221
- }
@@ -1,30 +0,0 @@
1
- import { Meta } from '@storybook/addon-docs';
2
-
3
- <Meta title="Components/Table/Table" />
4
-
5
- # Table
6
-
7
- Data tables display information in a grid-like format of rows and columns.
8
- They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data.
9
-
10
- Column header names describe the type of content displayed in each column.
11
- Each row contains data related to a single entity.
12
-
13
- Tables should:
14
- - Have consistently aligned content.
15
- - Use multiple heading rows for higher-level grouping of the columns.
16
- - Use column dividers sparingly.
17
-
18
- Tables shouldn’t use different indicators to represent empty fields.
19
-
20
- This basic component is rendered as an HTML `<table>`, which accepts the `<TableBody>` component and the `<TableHead>` as children.
21
-
22
- ### Required Components
23
-
24
- This component requires these additional components:
25
-
26
- - TableCaption
27
- - TableHead
28
- - TableRow
29
- - TableCell
30
- - TableBody
@@ -1,100 +0,0 @@
1
- import React from 'react';
2
- import DocsLayout from '../../../.storybook/storybookDocsLayout';
3
- import { Badge, Card, Cell, Column, Row, TableBase, TBody, THead } from '../..';
4
- import { items } from '../../utils/devUtils/constants/items';
5
- import TableReadme from './TableBase.mdx';
6
- import { jsx as ___EmotionJSX } from "@emotion/react";
7
- export default {
8
- title: 'Experimental/Table',
9
- component: TableBase,
10
- parameters: {
11
- docs: {
12
- page: function page() {
13
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableReadme, null), ___EmotionJSX(DocsLayout, null));
14
- }
15
- }
16
- }
17
- };
18
- var headers = [{
19
- key: 'type',
20
- name: 'Type'
21
- }, {
22
- key: 'date',
23
- name: 'Date'
24
- }, {
25
- key: 'additional_grant',
26
- name: 'Additional Grant'
27
- }, {
28
- key: 'total_grant',
29
- name: 'Total Grant'
30
- }];
31
- var objects = [{
32
- id: 1,
33
- type: 'Lorem ipsum',
34
- date: '2020-06-12',
35
- additional_grant: '+25,000',
36
- total_grant: '25,000'
37
- }, {
38
- id: 2,
39
- type: 'Lorem ipsum',
40
- date: '2020-10-01',
41
- additional_grant: '+25,000',
42
- total_grant: '50,000'
43
- }, {
44
- id: 3,
45
- type: 'Lorem ipsum',
46
- date: '2021-01-01',
47
- additional_grant: '+25,000',
48
- total_grant: '75,000'
49
- }];
50
- export var Default = function Default() {
51
- return ___EmotionJSX(Card, {
52
- variant: "cards.tableWrapper"
53
- }, ___EmotionJSX(TableBase, {
54
- caption: "Lorem ipsum",
55
- "aria-label": "table"
56
- }, ___EmotionJSX(THead, {
57
- columns: headers
58
- }, function (column) {
59
- return ___EmotionJSX(Column, {
60
- key: column.key
61
- }, column.name);
62
- }), ___EmotionJSX(TBody, {
63
- items: objects
64
- }, function (item) {
65
- return ___EmotionJSX(Row, {
66
- key: item.id
67
- }, function (columnKey) {
68
- return ___EmotionJSX(Cell, null, item[columnKey]);
69
- });
70
- })));
71
- };
72
- export var Customization = function Customization() {
73
- var statusVariant = {
74
- 'Pending': 'warningStatusBadge',
75
- 'Failed': 'criticalStatusBadge',
76
- 'Rejected': 'criticalStatusBadge',
77
- 'Active': 'healthyStatusBadge',
78
- 'Inactive': 'secondaryStatusBadge'
79
- };
80
- return ___EmotionJSX(Card, {
81
- variant: "cards.tableWrapper"
82
- }, ___EmotionJSX(TableBase, {
83
- "aria-label": "table"
84
- }, ___EmotionJSX(THead, null, ___EmotionJSX(Column, {
85
- width: 70
86
- }, "#"), ___EmotionJSX(Column, null, "Name"), ___EmotionJSX(Column, null, "Email"), ___EmotionJSX(Column, null, "Status"), ___EmotionJSX(Column, null, "Bio")), ___EmotionJSX(TBody, {
87
- items: items
88
- }, function (item) {
89
- return ___EmotionJSX(Row, {
90
- key: item.email
91
- }, ___EmotionJSX(Cell, null, item.id), ___EmotionJSX(Cell, {
92
- noWrap: true
93
- }, item.firstName, ' ', item.lastName), ___EmotionJSX(Cell, {
94
- noWrap: true
95
- }, item.email), ___EmotionJSX(Cell, null, ___EmotionJSX(Badge, {
96
- variant: statusVariant[item.status],
97
- label: item.status
98
- })), ___EmotionJSX(Cell, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!"));
99
- })));
100
- };
@@ -1,72 +0,0 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
6
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
8
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
11
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
12
- import { text } from '../Text/Text.styles';
13
- var defaultFocus = {
14
- outline: '1px',
15
- outlineStyle: 'solid',
16
- outlineColor: 'focus',
17
- outlineOffset: '-1px'
18
- };
19
- var container = {
20
- width: '100%',
21
- borderSpacing: '0',
22
- borderCollapse: 'collapse'
23
- };
24
- var caption = {
25
- fontFamily: 'standard',
26
- fontSize: 'lg',
27
- fontWeight: '2',
28
- p: 'sm',
29
- textAlign: 'left'
30
- };
31
- var thead = {};
32
- var head = _objectSpread(_objectSpread({}, text.label), {}, {
33
- fontWeight: 500,
34
- textAlign: 'left',
35
- p: 'sm',
36
- cursor: 'default',
37
- '&.is-focused': _objectSpread({}, defaultFocus)
38
- });
39
- var tbody = {
40
- borderTop: '1px solid',
41
- borderTopColor: 'neutral.40',
42
- borderBottom: '1px solid',
43
- borderBottomColor: 'neutral.80'
44
- };
45
- var row = {
46
- '&:nth-of-type(odd) ': {
47
- bg: 'neutral.95'
48
- },
49
- '&.is-focused': _objectSpread({}, defaultFocus),
50
- '&.is-hovered': {
51
- // This is the hover state for the row
52
- },
53
- '&.is-selected': {
54
- // This is the selected state for the row
55
- }
56
- };
57
- var data = _objectSpread(_objectSpread({}, text.tableData), {}, {
58
- p: 'sm',
59
- '&.no-wrap': {
60
- whiteSpace: 'nowrap'
61
- },
62
- '&.is-focused': _objectSpread({}, defaultFocus)
63
- });
64
- export default {
65
- thead: thead,
66
- tbody: tbody,
67
- caption: caption,
68
- container: container,
69
- data: data,
70
- head: head,
71
- row: row
72
- };
@@ -1,119 +0,0 @@
1
- import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
3
- import React from 'react';
4
- import { render, screen } from '@testing-library/react';
5
- import { Cell, Column, Row, TBody, THead } from '../../index';
6
- import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
7
- import TableBase from './TableBase';
8
- import { jsx as ___EmotionJSX } from "@emotion/react";
9
- var testId = 'test-table';
10
- var defaultProps = {
11
- 'aria-label': 'table',
12
- 'data-testid': testId,
13
- caption: 'Populations of Countries'
14
- };
15
- var headers = [{
16
- key: 'country',
17
- name: 'Country'
18
- }, {
19
- key: 'population',
20
- name: 'Population'
21
- }, {
22
- key: 'continent',
23
- name: 'Continent'
24
- }];
25
- var objects = [{
26
- key: '1',
27
- country: 'USA',
28
- population: '320,000,000',
29
- continent: 'South America',
30
- cellProps: {
31
- noWrap: true
32
- }
33
- }, {
34
- key: '2',
35
- country: 'Canada',
36
- population: '37,000,000',
37
- continent: 'North America'
38
- }, {
39
- key: '3',
40
- country: 'China',
41
- population: '1,398,000,000',
42
- continent: 'Asia'
43
- }, {
44
- key: '4',
45
- country: 'France',
46
- population: '67,000,000',
47
- continent: 'Europe'
48
- }];
49
- var getComponent = function getComponent() {
50
- return render(___EmotionJSX(TableBase, defaultProps, ___EmotionJSX(THead, {
51
- columns: headers
52
- }, function (head) {
53
- return ___EmotionJSX(Column, {
54
- key: head.key
55
- }, head.name);
56
- }), ___EmotionJSX(TBody, {
57
- items: objects
58
- }, function (row) {
59
- return ___EmotionJSX(Row, {
60
- key: row.key
61
- }, function (columnKey) {
62
- return ___EmotionJSX(Cell, row.cellProps || {}, row[columnKey]);
63
- });
64
- })));
65
- };
66
-
67
- // Needs to be added to each components test file
68
- universalComponentTests({
69
- renderComponent: function renderComponent(props) {
70
- return ___EmotionJSX(TableBase, _extends({}, defaultProps, props), ___EmotionJSX(THead, {
71
- columns: headers
72
- }, function (head) {
73
- return ___EmotionJSX(Column, {
74
- key: head.key
75
- }, head.name);
76
- }), ___EmotionJSX(TBody, {
77
- items: objects
78
- }, function (row) {
79
- return ___EmotionJSX(Row, {
80
- key: row.key
81
- }, function (columnKey) {
82
- return ___EmotionJSX(Cell, null, row[columnKey]);
83
- });
84
- }));
85
- }
86
- });
87
- test('default table', function () {
88
- getComponent();
89
- var table = screen.getByTestId(testId);
90
- expect(table).toBeInTheDocument();
91
- });
92
- test('renders caption', function () {
93
- getComponent();
94
- var caption = screen.getByText(defaultProps.caption);
95
- expect(caption).toBeInTheDocument();
96
- });
97
- test('renders table headers', function () {
98
- getComponent();
99
- var headerCells = screen.getAllByRole('columnheader');
100
- expect(headerCells).toHaveLength(headers.length);
101
- _forEachInstanceProperty(headers).call(headers, function (header) {
102
- expect(screen.getByText(header.name)).toBeInTheDocument();
103
- });
104
- });
105
- test('renders table rows', function () {
106
- getComponent();
107
- var rows = screen.getAllByRole('row');
108
- expect(rows).toHaveLength(objects.length + 1);
109
- _forEachInstanceProperty(objects).call(objects, function (object) {
110
- expect(screen.getByText(object.country)).toBeInTheDocument();
111
- expect(screen.getByText(object.population)).toBeInTheDocument();
112
- expect(screen.getByText(object.continent)).toBeInTheDocument();
113
- });
114
- });
115
- test('renders cell with noWrap prop', function () {
116
- getComponent();
117
- var cell = screen.getByText('South America');
118
- expect(cell).toHaveClass('no-wrap');
119
- });
@@ -1 +0,0 @@
1
- export { default } from './TableBase';
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { AstroProvider, NextGenDarkTheme } from '../../..';
3
- import NextGenTableBase from './NextGenTableBase';
4
- import { jsx as ___EmotionJSX } from "@emotion/react";
5
- export default {
6
- title: 'Chromatic Only Onyx Dark TableBase'
7
- };
8
- export var Default = function Default() {
9
- return ___EmotionJSX(AstroProvider, {
10
- themeOverrides: [NextGenDarkTheme]
11
- }, ___EmotionJSX(NextGenTableBase, null));
12
- };
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { AstroProvider, NextGenTheme } from '../../..';
3
- import NextGenTableBase from './NextGenTableBase';
4
- import { jsx as ___EmotionJSX } from "@emotion/react";
5
- export default {
6
- title: 'Chromatic Only Onyx TableBase'
7
- };
8
- export var Default = function Default() {
9
- return ___EmotionJSX(AstroProvider, {
10
- themeOverrides: [NextGenTheme]
11
- }, ___EmotionJSX(NextGenTableBase, null));
12
- };
@@ -1,58 +0,0 @@
1
- import React from 'react';
2
- import { Card, Cell, Column, Row, TableBase, TBody, THead } from '../../..';
3
- import { jsx as ___EmotionJSX } from "@emotion/react";
4
- var NextGenTableBase = function NextGenTableBase() {
5
- var headers = [{
6
- key: 'type',
7
- name: 'Type'
8
- }, {
9
- key: 'date',
10
- name: 'Date'
11
- }, {
12
- key: 'additional_grant',
13
- name: 'Additional Grant'
14
- }, {
15
- key: 'total_grant',
16
- name: 'Total Grant'
17
- }];
18
- var objects = [{
19
- id: 1,
20
- type: 'Lorem ipsum',
21
- date: '2020-06-12',
22
- additional_grant: '+25,000',
23
- total_grant: '25,000'
24
- }, {
25
- id: 2,
26
- type: 'Lorem ipsum',
27
- date: '2020-10-01',
28
- additional_grant: '+25,000',
29
- total_grant: '50,000'
30
- }, {
31
- id: 3,
32
- type: 'Lorem ipsum',
33
- date: '2021-01-01',
34
- additional_grant: '+25,000',
35
- total_grant: '75,000'
36
- }];
37
- return ___EmotionJSX(Card, {
38
- variant: "cards.tableWrapper"
39
- }, ___EmotionJSX(TableBase, {
40
- caption: "Lorem ipsum",
41
- "aria-label": "table"
42
- }, ___EmotionJSX(THead, {
43
- columns: headers
44
- }, function (column) {
45
- return ___EmotionJSX(Column, {
46
- key: column.key
47
- }, column.name);
48
- }), ___EmotionJSX(TBody, {
49
- items: objects
50
- }, function (item) {
51
- return ___EmotionJSX(Row, {
52
- key: item.id
53
- }, function (columnKey) {
54
- return ___EmotionJSX(Cell, null, item[columnKey]);
55
- });
56
- })));
57
- };
58
- export default NextGenTableBase;