glints-aries 4.0.305 → 4.0.306

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 (15) hide show
  1. package/es/@next/DataTable/DataTable.d.ts +1 -1
  2. package/es/@next/DataTable/DataTable.js +1 -1
  3. package/es/@next/DataTable/{DatatTable.stories.d.ts → DataTable.stories.d.ts} +1 -0
  4. package/es/@next/DataTable/DataTableStyle.js +4 -3
  5. package/es/@next/DataTable/TableCell.d.ts +2 -1
  6. package/es/@next/DataTable/TableCell.js +6 -3
  7. package/es/@next/DataTable/TableHeader.js +7 -3
  8. package/lib/@next/DataTable/DataTable.d.ts +1 -1
  9. package/lib/@next/DataTable/DataTable.js +1 -1
  10. package/lib/@next/DataTable/{DatatTable.stories.d.ts → DataTable.stories.d.ts} +1 -0
  11. package/lib/@next/DataTable/DataTableStyle.js +3 -2
  12. package/lib/@next/DataTable/TableCell.d.ts +2 -1
  13. package/lib/@next/DataTable/TableCell.js +6 -3
  14. package/lib/@next/DataTable/TableHeader.js +7 -3
  15. package/package.json +1 -1
package/es/@next/DataTable/DataTable.d.ts CHANGED
@@ -19,7 +19,7 @@ export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableEleme
19
19
  }
20
20
  export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> & {
21
21
  Row: ({ children, ...props }: import("./TableRow").TableRowProps) => JSX.Element;
22
- Cell: ({ align, children, noWrap, }: import("./TableCell").TableCellProps) => JSX.Element;
22
+ Cell: ({ align, children, noWrap, verticalAlign, }: import("./TableCell").TableCellProps) => JSX.Element;
23
23
  Footer: ({ children }: {
24
24
  children: React.ReactNode;
25
25
  }) => JSX.Element;
package/es/@next/DataTable/DataTable.js CHANGED
@@ -54,7 +54,7 @@ var DataTableComponent = /*#__PURE__*/React.forwardRef(function DataTable(_ref,
54
54
  align: align
55
55
  }, /*#__PURE__*/React.createElement(Typography, {
56
56
  as: "div",
57
- variant: "body2"
57
+ variant: "caption"
58
58
  }, title));
59
59
  }) : null;
60
60
  var footer;
package/es/@next/DataTable/{DatatTable.stories.d.ts → DataTable.stories.d.ts} RENAMED
@@ -4,3 +4,4 @@ export default _default;
4
4
  export declare const Interactive: any;
5
5
  export declare const WithEmptyState: any;
6
6
  export declare const WithNoWrapCell: any;
7
+ export declare const VerticalAlignCenterCell: any;
package/es/@next/DataTable/DataTableStyle.js CHANGED
@@ -2,8 +2,9 @@ import styled from 'styled-components';
2
2
  import * as DropShadow from '../utilities/dropShadow';
3
3
  import { borderRadius8 } from '../utilities/borderRadius';
4
4
  import { Blue, Neutral } from '../utilities/colors';
5
- import { space16 } from '../utilities/spacing';
5
+ import { space16, space8 } from '../utilities/spacing';
6
6
  var alignmentStyle = "\n&[data-text-align='right'] {\n > div {\n display: flex;\n justify-content: right;\n }\n}\n\n&[data-text-align='center'] {\n > div {\n display: flex;\n justify-content: center;\n }\n}\n";
7
+ var cellVerticalAlign = "\n&[data-vertical-align='top'] {\n vertical-align: top;\n}\n\n&[data-vertical-align='center'] {\n vertical-align: center;\n}\n";
7
8
  export var StyledTable = styled.table.withConfig({
8
9
  displayName: "DataTableStyle__StyledTable",
9
10
  componentId: "sc-18v2ula-0"
@@ -15,11 +16,11 @@ export var StyledTableRow = styled.tr.withConfig({
15
16
  export var StyledTabledHeader = styled.th.withConfig({
16
17
  displayName: "DataTableStyle__StyledTabledHeader",
17
18
  componentId: "sc-18v2ula-2"
18
- })(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:24px;height:24px;fill:", ";}"], space16, alignmentStyle, Neutral.B99, Neutral.B40);
19
+ })(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:16px;height:16px;fill:", ";margin-bottom:2px;}"], space16, alignmentStyle, Neutral.B99, Neutral.B40);
19
20
  export var StyledTableCell = styled.td.withConfig({
20
21
  displayName: "DataTableStyle__StyledTableCell",
21
22
  componentId: "sc-18v2ula-3"
22
- })(["text-align:left;padding:", ";vertical-align:top;", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], space16, alignmentStyle);
23
+ })(["text-align:left;padding:", " ", ";", " ", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], space8, space16, alignmentStyle, cellVerticalAlign);
23
24
  export var StyledTableFooterRow = styled.tr.withConfig({
24
25
  displayName: "DataTableStyle__StyledTableFooterRow",
25
26
  componentId: "sc-18v2ula-4"
package/es/@next/DataTable/TableCell.d.ts CHANGED
@@ -3,5 +3,6 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableColEleme
3
3
  children: React.ReactNode;
4
4
  /** Sets table cell content to not wrap*/
5
5
  noWrap?: boolean;
6
+ verticalAlign?: 'top' | 'center';
6
7
  }
7
- export declare const TableCell: ({ align, children, noWrap, }: TableCellProps) => JSX.Element;
8
+ export declare const TableCell: ({ align, children, noWrap, verticalAlign, }: TableCellProps) => JSX.Element;
package/es/@next/DataTable/TableCell.js CHANGED
@@ -5,12 +5,15 @@ export var TableCell = function TableCell(_ref) {
5
5
  var align = _ref.align,
6
6
  children = _ref.children,
7
7
  _ref$noWrap = _ref.noWrap,
8
- noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap;
8
+ noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
9
+ _ref$verticalAlign = _ref.verticalAlign,
10
+ verticalAlign = _ref$verticalAlign === void 0 ? 'top' : _ref$verticalAlign;
9
11
  return /*#__PURE__*/React.createElement(StyledTableCell, {
10
12
  "data-text-align": align,
11
- "data-no-wrap": noWrap
13
+ "data-no-wrap": noWrap,
14
+ "data-vertical-align": verticalAlign
12
15
  }, /*#__PURE__*/React.createElement(Typography, {
13
16
  as: "div",
14
- variant: "body1"
17
+ variant: "subtitle2"
15
18
  }, children));
16
19
  };
package/es/@next/DataTable/TableHeader.js CHANGED
@@ -16,13 +16,16 @@ export var TableHeader = function TableHeader(_ref) {
16
16
  useEffect(function () {
17
17
  setSortDirection(sortDirectionProp);
18
18
  }, [sortDirectionProp]);
19
- var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-xs-up-fill' : 'ri-arrow-xs-down-fill';
19
+ var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-up-line' : 'ri-arrow-down-line';
20
20
  var iconMarkup = sortDirection ? /*#__PURE__*/React.createElement(Icon, {
21
- name: iconName
21
+ className: "data-table-sort-button-icon",
22
+ name: iconName,
23
+ height: "10px",
24
+ fill: Neutral.B40
22
25
  }) : null;
23
26
  var titleMarkup = /*#__PURE__*/React.createElement(Typography, {
24
27
  as: "span",
25
- variant: "body2",
28
+ variant: "caption",
26
29
  color: Neutral.B18,
27
30
  style: {
28
31
  whiteSpace: 'nowrap'
@@ -37,6 +40,7 @@ export var TableHeader = function TableHeader(_ref) {
37
40
  onSort == null ? void 0 : onSort(direction);
38
41
  };
39
42
  var sortableCellMarkup = /*#__PURE__*/React.createElement(Button, {
43
+ className: "data-table-sort-button",
40
44
  "data-testid": "data-table-sort-button-" + title,
41
45
  icon: iconMarkup,
42
46
  onClick: function onClick() {
package/lib/@next/DataTable/DataTable.d.ts CHANGED
@@ -19,7 +19,7 @@ export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableEleme
19
19
  }
20
20
  export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> & {
21
21
  Row: ({ children, ...props }: import("./TableRow").TableRowProps) => JSX.Element;
22
- Cell: ({ align, children, noWrap, }: import("./TableCell").TableCellProps) => JSX.Element;
22
+ Cell: ({ align, children, noWrap, verticalAlign, }: import("./TableCell").TableCellProps) => JSX.Element;
23
23
  Footer: ({ children }: {
24
24
  children: React.ReactNode;
25
25
  }) => JSX.Element;
package/lib/@next/DataTable/DataTable.js CHANGED
@@ -59,7 +59,7 @@ var DataTableComponent = /*#__PURE__*/_react["default"].forwardRef(function Data
59
59
  align: align
60
60
  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
61
61
  as: "div",
62
- variant: "body2"
62
+ variant: "caption"
63
63
  }, title));
64
64
  }) : null;
65
65
  var footer;
package/lib/@next/DataTable/{DatatTable.stories.d.ts → DataTable.stories.d.ts} RENAMED
@@ -4,3 +4,4 @@ export default _default;
4
4
  export declare const Interactive: any;
5
5
  export declare const WithEmptyState: any;
6
6
  export declare const WithNoWrapCell: any;
7
+ export declare const VerticalAlignCenterCell: any;
package/lib/@next/DataTable/DataTableStyle.js CHANGED
@@ -11,6 +11,7 @@ var _spacing = require("../utilities/spacing");
11
11
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
12
12
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
13
  var alignmentStyle = "\n&[data-text-align='right'] {\n > div {\n display: flex;\n justify-content: right;\n }\n}\n\n&[data-text-align='center'] {\n > div {\n display: flex;\n justify-content: center;\n }\n}\n";
14
+ var cellVerticalAlign = "\n&[data-vertical-align='top'] {\n vertical-align: top;\n}\n\n&[data-vertical-align='center'] {\n vertical-align: center;\n}\n";
14
15
  var StyledTable = _styledComponents["default"].table.withConfig({
15
16
  displayName: "DataTableStyle__StyledTable",
16
17
  componentId: "sc-18v2ula-0"
@@ -24,12 +25,12 @@ exports.StyledTableRow = StyledTableRow;
24
25
  var StyledTabledHeader = _styledComponents["default"].th.withConfig({
25
26
  displayName: "DataTableStyle__StyledTabledHeader",
26
27
  componentId: "sc-18v2ula-2"
27
- })(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:24px;height:24px;fill:", ";}"], _spacing.space16, alignmentStyle, _colors.Neutral.B99, _colors.Neutral.B40);
28
+ })(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:16px;height:16px;fill:", ";margin-bottom:2px;}"], _spacing.space16, alignmentStyle, _colors.Neutral.B99, _colors.Neutral.B40);
28
29
  exports.StyledTabledHeader = StyledTabledHeader;
29
30
  var StyledTableCell = _styledComponents["default"].td.withConfig({
30
31
  displayName: "DataTableStyle__StyledTableCell",
31
32
  componentId: "sc-18v2ula-3"
32
- })(["text-align:left;padding:", ";vertical-align:top;", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], _spacing.space16, alignmentStyle);
33
+ })(["text-align:left;padding:", " ", ";", " ", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], _spacing.space8, _spacing.space16, alignmentStyle, cellVerticalAlign);
33
34
  exports.StyledTableCell = StyledTableCell;
34
35
  var StyledTableFooterRow = _styledComponents["default"].tr.withConfig({
35
36
  displayName: "DataTableStyle__StyledTableFooterRow",
package/lib/@next/DataTable/TableCell.d.ts CHANGED
@@ -3,5 +3,6 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableColEleme
3
3
  children: React.ReactNode;
4
4
  /** Sets table cell content to not wrap*/
5
5
  noWrap?: boolean;
6
+ verticalAlign?: 'top' | 'center';
6
7
  }
7
- export declare const TableCell: ({ align, children, noWrap, }: TableCellProps) => JSX.Element;
8
+ export declare const TableCell: ({ align, children, noWrap, verticalAlign, }: TableCellProps) => JSX.Element;
package/lib/@next/DataTable/TableCell.js CHANGED
@@ -10,13 +10,16 @@ var TableCell = function TableCell(_ref) {
10
10
  var align = _ref.align,
11
11
  children = _ref.children,
12
12
  _ref$noWrap = _ref.noWrap,
13
- noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap;
13
+ noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
14
+ _ref$verticalAlign = _ref.verticalAlign,
15
+ verticalAlign = _ref$verticalAlign === void 0 ? 'top' : _ref$verticalAlign;
14
16
  return /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
15
17
  "data-text-align": align,
16
- "data-no-wrap": noWrap
18
+ "data-no-wrap": noWrap,
19
+ "data-vertical-align": verticalAlign
17
20
  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
18
21
  as: "div",
19
- variant: "body1"
22
+ variant: "subtitle2"
20
23
  }, children));
21
24
  };
22
25
  exports.TableCell = TableCell;
package/lib/@next/DataTable/TableHeader.js CHANGED
@@ -22,13 +22,16 @@ var TableHeader = function TableHeader(_ref) {
22
22
  (0, _react.useEffect)(function () {
23
23
  setSortDirection(sortDirectionProp);
24
24
  }, [sortDirectionProp]);
25
- var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-xs-up-fill' : 'ri-arrow-xs-down-fill';
25
+ var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-up-line' : 'ri-arrow-down-line';
26
26
  var iconMarkup = sortDirection ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
27
- name: iconName
27
+ className: "data-table-sort-button-icon",
28
+ name: iconName,
29
+ height: "10px",
30
+ fill: _colors.Neutral.B40
28
31
  }) : null;
29
32
  var titleMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
30
33
  as: "span",
31
- variant: "body2",
34
+ variant: "caption",
32
35
  color: _colors.Neutral.B18,
33
36
  style: {
34
37
  whiteSpace: 'nowrap'
@@ -43,6 +46,7 @@ var TableHeader = function TableHeader(_ref) {
43
46
  onSort == null ? void 0 : onSort(direction);
44
47
  };
45
48
  var sortableCellMarkup = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
49
+ className: "data-table-sort-button",
46
50
  "data-testid": "data-table-sort-button-" + title,
47
51
  icon: iconMarkup,
48
52
  onClick: function onClick() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.305",
3
+ "version": "4.0.306",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",