glints-aries 4.0.305 → 4.0.307

package/es/@next/DataTable/DataTable.d.ts

@@ -19,7 +19,7 @@ export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableEleme
 }
 export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> & {
     Row: ({ children, ...props }: import("./TableRow").TableRowProps) => JSX.Element;
-    Cell: ({ align, children, noWrap, }: import("./TableCell").TableCellProps) => JSX.Element;
+    Cell: ({ align, children, noWrap, verticalAlign, }: import("./TableCell").TableCellProps) => JSX.Element;
     Footer: ({ children }: {
         children: React.ReactNode;
     }) => JSX.Element;

package/es/@next/DataTable/DataTable.js

@@ -54,7 +54,7 @@ var DataTableComponent = /*#__PURE__*/React.forwardRef(function DataTable(_ref,
       align: align
     }, /*#__PURE__*/React.createElement(Typography, {
       as: "div",
-      variant: "body2"
+      variant: "caption"
     }, title));
   }) : null;
   var footer;

package/es/@next/DataTable/{DatatTable.stories.d.ts → DataTable.stories.d.ts}

@@ -4,3 +4,4 @@ export default _default;
 export declare const Interactive: any;
 export declare const WithEmptyState: any;
 export declare const WithNoWrapCell: any;
+export declare const VerticalAlignCenterCell: any;

package/es/@next/DataTable/DataTableStyle.js

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 import * as DropShadow from '../utilities/dropShadow';
 import { borderRadius8 } from '../utilities/borderRadius';
 import { Blue, Neutral } from '../utilities/colors';
-import { space16 } from '../utilities/spacing';
+import { space16, space8 } from '../utilities/spacing';
 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";
+var cellVerticalAlign = "\n&[data-vertical-align='top'] {\n  vertical-align: top;\n}\n\n&[data-vertical-align='center'] {\n  vertical-align: center;\n}\n";
 export var StyledTable = styled.table.withConfig({
   displayName: "DataTableStyle__StyledTable",
   componentId: "sc-18v2ula-0"
@@ -15,15 +16,15 @@ export var StyledTableRow = styled.tr.withConfig({
 export var StyledTabledHeader = styled.th.withConfig({
   displayName: "DataTableStyle__StyledTabledHeader",
   componentId: "sc-18v2ula-2"
-})(["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);
+})(["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);
 export var StyledTableCell = styled.td.withConfig({
   displayName: "DataTableStyle__StyledTableCell",
   componentId: "sc-18v2ula-3"
-})(["text-align:left;padding:", ";vertical-align:top;", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], space16, alignmentStyle);
+})(["text-align:left;padding:", " ", ";", " ", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], space8, space16, alignmentStyle, cellVerticalAlign);
 export var StyledTableFooterRow = styled.tr.withConfig({
   displayName: "DataTableStyle__StyledTableFooterRow",
   componentId: "sc-18v2ula-4"
-})(["background:", ";border-top:0;border-radius:0px 0px ", " ", ";td{padding:", ";}"], Neutral.B100, borderRadius8, borderRadius8, space16);
+})(["background:", ";border-top:0;border-radius:0px 0px ", " ", ";td{padding:", " ", ";}"], Neutral.B100, borderRadius8, borderRadius8, space8, space16);
 export var StyledTableLoadingRow = styled(StyledTableRow).withConfig({
   displayName: "DataTableStyle__StyledTableLoadingRow",
   componentId: "sc-18v2ula-5"

package/es/@next/DataTable/TableCell.d.ts

@@ -3,5 +3,6 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableColEleme
     children: React.ReactNode;
     /** Sets table cell content to not wrap*/
     noWrap?: boolean;
+    verticalAlign?: 'top' | 'center';
 }
-export declare const TableCell: ({ align, children, noWrap, }: TableCellProps) => JSX.Element;
+export declare const TableCell: ({ align, children, noWrap, verticalAlign, }: TableCellProps) => JSX.Element;

package/es/@next/DataTable/TableCell.js

@@ -5,12 +5,15 @@ export var TableCell = function TableCell(_ref) {
   var align = _ref.align,
     children = _ref.children,
     _ref$noWrap = _ref.noWrap,
-    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap;
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$verticalAlign = _ref.verticalAlign,
+    verticalAlign = _ref$verticalAlign === void 0 ? 'top' : _ref$verticalAlign;
   return /*#__PURE__*/React.createElement(StyledTableCell, {
     "data-text-align": align,
-    "data-no-wrap": noWrap
+    "data-no-wrap": noWrap,
+    "data-vertical-align": verticalAlign
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, children));
 };

package/es/@next/DataTable/TableHeader.js

@@ -16,13 +16,16 @@ export var TableHeader = function TableHeader(_ref) {
   useEffect(function () {
     setSortDirection(sortDirectionProp);
   }, [sortDirectionProp]);
-  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-xs-up-fill' : 'ri-arrow-xs-down-fill';
+  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-up-line' : 'ri-arrow-down-line';
   var iconMarkup = sortDirection ? /*#__PURE__*/React.createElement(Icon, {
-    name: iconName
+    className: "data-table-sort-button-icon",
+    name: iconName,
+    height: "10px",
+    fill: Neutral.B40
   }) : null;
   var titleMarkup = /*#__PURE__*/React.createElement(Typography, {
     as: "span",
-    variant: "body2",
+    variant: "caption",
     color: Neutral.B18,
     style: {
       whiteSpace: 'nowrap'
@@ -37,6 +40,7 @@ export var TableHeader = function TableHeader(_ref) {
     onSort == null ? void 0 : onSort(direction);
   };
   var sortableCellMarkup = /*#__PURE__*/React.createElement(Button, {
+    className: "data-table-sort-button",
     "data-testid": "data-table-sort-button-" + title,
     icon: iconMarkup,
     onClick: function onClick() {

package/es/@next/Pagination/PageButton.js

@@ -18,6 +18,6 @@ export var PageButton = function PageButton(_ref) {
     }
   }, props), /*#__PURE__*/React.createElement(Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, content));
 };

package/es/@next/Pagination/SimplePagination.js

@@ -52,7 +52,7 @@ export var SimplePagination = /*#__PURE__*/React.forwardRef(function SimplePagin
     onClick: handlePageNumberChange
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, currentPage)), editMode && /*#__PURE__*/React.createElement(StyledSimplePaginationInput, {
     "data-testid": "current-page-input",
     autoFocus: true,
@@ -68,12 +68,12 @@ export var SimplePagination = /*#__PURE__*/React.forwardRef(function SimplePagin
     disabled: disabled
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, "/")), /*#__PURE__*/React.createElement(StyledSimplePaginationButton, {
     disabled: disabled
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, totalPages)), /*#__PURE__*/React.createElement(NextStepper, {
     value: currentPage + 1,
     disabled: !hasNext || disabled,

package/lib/@next/DataTable/DataTable.d.ts

@@ -19,7 +19,7 @@ export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableEleme
 }
 export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> & {
     Row: ({ children, ...props }: import("./TableRow").TableRowProps) => JSX.Element;
-    Cell: ({ align, children, noWrap, }: import("./TableCell").TableCellProps) => JSX.Element;
+    Cell: ({ align, children, noWrap, verticalAlign, }: import("./TableCell").TableCellProps) => JSX.Element;
     Footer: ({ children }: {
         children: React.ReactNode;
     }) => JSX.Element;

package/lib/@next/DataTable/DataTable.js

@@ -59,7 +59,7 @@ var DataTableComponent = /*#__PURE__*/_react["default"].forwardRef(function Data
       align: align
     }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
       as: "div",
-      variant: "body2"
+      variant: "caption"
     }, title));
   }) : null;
   var footer;

package/lib/@next/DataTable/{DatatTable.stories.d.ts → DataTable.stories.d.ts}

@@ -4,3 +4,4 @@ export default _default;
 export declare const Interactive: any;
 export declare const WithEmptyState: any;
 export declare const WithNoWrapCell: any;
+export declare const VerticalAlignCenterCell: any;

package/lib/@next/DataTable/DataTableStyle.js

@@ -11,6 +11,7 @@ var _spacing = require("../utilities/spacing");
 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); }
 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; }
 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";
+var cellVerticalAlign = "\n&[data-vertical-align='top'] {\n  vertical-align: top;\n}\n\n&[data-vertical-align='center'] {\n  vertical-align: center;\n}\n";
 var StyledTable = _styledComponents["default"].table.withConfig({
   displayName: "DataTableStyle__StyledTable",
   componentId: "sc-18v2ula-0"
@@ -24,17 +25,17 @@ exports.StyledTableRow = StyledTableRow;
 var StyledTabledHeader = _styledComponents["default"].th.withConfig({
   displayName: "DataTableStyle__StyledTabledHeader",
   componentId: "sc-18v2ula-2"
-})(["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);
+})(["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);
 exports.StyledTabledHeader = StyledTabledHeader;
 var StyledTableCell = _styledComponents["default"].td.withConfig({
   displayName: "DataTableStyle__StyledTableCell",
   componentId: "sc-18v2ula-3"
-})(["text-align:left;padding:", ";vertical-align:top;", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], _spacing.space16, alignmentStyle);
+})(["text-align:left;padding:", " ", ";", " ", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], _spacing.space8, _spacing.space16, alignmentStyle, cellVerticalAlign);
 exports.StyledTableCell = StyledTableCell;
 var StyledTableFooterRow = _styledComponents["default"].tr.withConfig({
   displayName: "DataTableStyle__StyledTableFooterRow",
   componentId: "sc-18v2ula-4"
-})(["background:", ";border-top:0;border-radius:0px 0px ", " ", ";td{padding:", ";}"], _colors.Neutral.B100, _borderRadius.borderRadius8, _borderRadius.borderRadius8, _spacing.space16);
+})(["background:", ";border-top:0;border-radius:0px 0px ", " ", ";td{padding:", " ", ";}"], _colors.Neutral.B100, _borderRadius.borderRadius8, _borderRadius.borderRadius8, _spacing.space8, _spacing.space16);
 exports.StyledTableFooterRow = StyledTableFooterRow;
 var StyledTableLoadingRow = (0, _styledComponents["default"])(StyledTableRow).withConfig({
   displayName: "DataTableStyle__StyledTableLoadingRow",

package/lib/@next/DataTable/TableCell.d.ts

@@ -3,5 +3,6 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableColEleme
     children: React.ReactNode;
     /** Sets table cell content to not wrap*/
     noWrap?: boolean;
+    verticalAlign?: 'top' | 'center';
 }
-export declare const TableCell: ({ align, children, noWrap, }: TableCellProps) => JSX.Element;
+export declare const TableCell: ({ align, children, noWrap, verticalAlign, }: TableCellProps) => JSX.Element;

package/lib/@next/DataTable/TableCell.js

@@ -10,13 +10,16 @@ var TableCell = function TableCell(_ref) {
   var align = _ref.align,
     children = _ref.children,
     _ref$noWrap = _ref.noWrap,
-    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap;
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$verticalAlign = _ref.verticalAlign,
+    verticalAlign = _ref$verticalAlign === void 0 ? 'top' : _ref$verticalAlign;
   return /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
     "data-text-align": align,
-    "data-no-wrap": noWrap
+    "data-no-wrap": noWrap,
+    "data-vertical-align": verticalAlign
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, children));
 };
 exports.TableCell = TableCell;

package/lib/@next/DataTable/TableHeader.js

@@ -22,13 +22,16 @@ var TableHeader = function TableHeader(_ref) {
   (0, _react.useEffect)(function () {
     setSortDirection(sortDirectionProp);
   }, [sortDirectionProp]);
-  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-xs-up-fill' : 'ri-arrow-xs-down-fill';
+  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-up-line' : 'ri-arrow-down-line';
   var iconMarkup = sortDirection ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
-    name: iconName
+    className: "data-table-sort-button-icon",
+    name: iconName,
+    height: "10px",
+    fill: _colors.Neutral.B40
   }) : null;
   var titleMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
-    variant: "body2",
+    variant: "caption",
     color: _colors.Neutral.B18,
     style: {
       whiteSpace: 'nowrap'
@@ -43,6 +46,7 @@ var TableHeader = function TableHeader(_ref) {
     onSort == null ? void 0 : onSort(direction);
   };
   var sortableCellMarkup = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    className: "data-table-sort-button",
     "data-testid": "data-table-sort-button-" + title,
     icon: iconMarkup,
     onClick: function onClick() {

package/lib/@next/Pagination/PageButton.js

@@ -23,7 +23,7 @@ var PageButton = function PageButton(_ref) {
     }
   }, props), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, content));
 };
 exports.PageButton = PageButton;

package/lib/@next/Pagination/SimplePagination.js

@@ -58,7 +58,7 @@ var SimplePagination = /*#__PURE__*/_react["default"].forwardRef(function Simple
     onClick: handlePageNumberChange
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, currentPage)), editMode && /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledSimplePaginationInput, {
     "data-testid": "current-page-input",
     autoFocus: true,
@@ -74,12 +74,12 @@ var SimplePagination = /*#__PURE__*/_react["default"].forwardRef(function Simple
     disabled: disabled
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, "/")), /*#__PURE__*/_react["default"].createElement(_PaginationStyle.StyledSimplePaginationButton, {
     disabled: disabled
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, totalPages)), /*#__PURE__*/_react["default"].createElement(_Stepper.NextStepper, {
     value: currentPage + 1,
     disabled: !hasNext || disabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.305",
+  "version": "4.0.307",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",