@nulogy/components 14.4.2 → 14.6.0

package/dist/main.js

@@ -62280,6 +62280,7 @@
     })(function (_ref) {
       var align = _ref.align,
           compact = _ref.compact,
+          verticalAlign = _ref.verticalAlign,
           theme = _ref.theme;
       var padding = compact ? theme.space.x1 : theme.space.x2;
       return {
@@ -62287,6 +62288,7 @@
         paddingBottom: padding,
         textAlign: align,
         paddingRight: padding,
+        verticalAlign: verticalAlign || "middle",
         "&:first-child": {
           paddingLeft: padding
         }
@@ -62325,7 +62327,8 @@
 
       return /*#__PURE__*/React__default["default"].createElement(StyledTableCell, {
         align: column.align,
-        compact: compact
+        compact: compact,
+        verticalAlign: row.verticalAlign
       }, cellContent);
     };
 
@@ -62345,15 +62348,21 @@
       componentId: "sc-b5sejq-1"
     })(function (_ref2) {
       var rowHovers = _ref2.rowHovers,
+          rowBorder = _ref2.rowBorder,
           theme = _ref2.theme;
-      return {
+      return Object.assign({
         "&:hover": {
           backgroundColor: rowHovers ? theme.colors.whiteGrey : null
         }
-      };
+      }, rowBorder && {
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: theme.colors.lightGrey,
+        borderCollapse: "collapse"
+      });
     });
 
-    var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter) {
+    var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
       return rows.length > 0 ? rows.map(function (row) {
         return /*#__PURE__*/React__default["default"].createElement(TableBodyRow, {
           row: row,
@@ -62374,7 +62383,8 @@
               row: row,
               e: e
             });
-          }
+          },
+          rowBorder: rowBorder
         });
       }) : /*#__PURE__*/React__default["default"].createElement(TableMessageContainer, {
         colSpan: columns.length
@@ -62388,7 +62398,8 @@
           compact = _ref3.compact,
           rowClassName = _ref3.rowClassName,
           onMouseLeave = _ref3.onMouseLeave,
-          onMouseEnter = _ref3.onMouseEnter;
+          onMouseEnter = _ref3.onMouseEnter,
+          rowBorder = _ref3.rowBorder;
 
       var renderAllCells = function renderAllCells() {
         return columns.map(function (column, index) {
@@ -62409,7 +62420,8 @@
         "data-testid": "table-row",
         className: rowClassName,
         onMouseLeave: onMouseLeave,
-        onMouseEnter: onMouseEnter
+        onMouseEnter: onMouseEnter,
+        rowBorder: rowBorder
       }, row.heading ? /*#__PURE__*/React__default["default"].createElement(TableCell, {
         row: row,
         colSpan: columns.length,
@@ -62454,10 +62466,11 @@
           rowHovers = _ref6.rowHovers,
           compact = _ref6.compact,
           onRowMouseLeave = _ref6.onRowMouseLeave,
-          onRowMouseEnter = _ref6.onRowMouseEnter;
+          onRowMouseEnter = _ref6.onRowMouseEnter,
+          rowBorder = _ref6.rowBorder;
       return /*#__PURE__*/React__default["default"].createElement("tbody", {
         "data-testid": "table-body"
-      }, !loading ? renderRows$1(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter) : /*#__PURE__*/React__default["default"].createElement(LoadingContent, {
+      }, !loading ? renderRows$1(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) : /*#__PURE__*/React__default["default"].createElement(LoadingContent, {
         colSpan: columns.length
       }));
     };
@@ -62562,7 +62575,9 @@
           rows = _a.rows,
           id = _a.id,
           className = _a.className,
-          props = __rest$3(_a, ["noRowsContent", "keyField", "loading", "footerRows", "rowHovers", "compact", "stickyHeader", "onRowMouseEnter", "onRowMouseLeave", "columns", "rows", "id", "className"]);
+          _a$rowBorder = _a.rowBorder,
+          rowBorder = _a$rowBorder === void 0 ? false : _a$rowBorder,
+          props = __rest$3(_a, ["noRowsContent", "keyField", "loading", "footerRows", "rowHovers", "compact", "stickyHeader", "onRowMouseEnter", "onRowMouseLeave", "columns", "rows", "id", "className", "rowBorder"]);
 
       return /*#__PURE__*/React__default["default"].createElement(StyledTable, Object.assign({
         id: id,
@@ -62580,7 +62595,8 @@
         rowHovers: rowHovers,
         compact: compact,
         onRowMouseLeave: onRowMouseLeave,
-        onRowMouseEnter: onRowMouseEnter
+        onRowMouseEnter: onRowMouseEnter,
+        rowBorder: rowBorder
       }), footerRows && /*#__PURE__*/React__default["default"].createElement(TableFoot, {
         columns: columns,
         rows: footerRows,

package/dist/main.module.js

@@ -62263,6 +62263,7 @@ var StyledTableCell = styled.td.withConfig({
 })(function (_ref) {
   var align = _ref.align,
       compact = _ref.compact,
+      verticalAlign = _ref.verticalAlign,
       theme = _ref.theme;
   var padding = compact ? theme.space.x1 : theme.space.x2;
   return {
@@ -62270,6 +62271,7 @@ var StyledTableCell = styled.td.withConfig({
     paddingBottom: padding,
     textAlign: align,
     paddingRight: padding,
+    verticalAlign: verticalAlign || "middle",
     "&:first-child": {
       paddingLeft: padding
     }
@@ -62308,7 +62310,8 @@ var TableCell = function TableCell(_ref2) {
 
   return /*#__PURE__*/React__default.createElement(StyledTableCell, {
     align: column.align,
-    compact: compact
+    compact: compact,
+    verticalAlign: row.verticalAlign
   }, cellContent);
 };
 
@@ -62328,15 +62331,21 @@ var StyledTr = styled.tr.withConfig({
   componentId: "sc-b5sejq-1"
 })(function (_ref2) {
   var rowHovers = _ref2.rowHovers,
+      rowBorder = _ref2.rowBorder,
       theme = _ref2.theme;
-  return {
+  return Object.assign({
     "&:hover": {
       backgroundColor: rowHovers ? theme.colors.whiteGrey : null
     }
-  };
+  }, rowBorder && {
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: theme.colors.lightGrey,
+    borderCollapse: "collapse"
+  });
 });
 
-var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter) {
+var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) {
   return rows.length > 0 ? rows.map(function (row) {
     return /*#__PURE__*/React__default.createElement(TableBodyRow, {
       row: row,
@@ -62357,7 +62366,8 @@ var renderRows$1 = function renderRows(rows, columns, keyField, noRowsContent, r
           row: row,
           e: e
         });
-      }
+      },
+      rowBorder: rowBorder
     });
   }) : /*#__PURE__*/React__default.createElement(TableMessageContainer, {
     colSpan: columns.length
@@ -62371,7 +62381,8 @@ var TableBodyRow = function TableBodyRow(_ref3) {
       compact = _ref3.compact,
       rowClassName = _ref3.rowClassName,
       onMouseLeave = _ref3.onMouseLeave,
-      onMouseEnter = _ref3.onMouseEnter;
+      onMouseEnter = _ref3.onMouseEnter,
+      rowBorder = _ref3.rowBorder;
 
   var renderAllCells = function renderAllCells() {
     return columns.map(function (column, index) {
@@ -62392,7 +62403,8 @@ var TableBodyRow = function TableBodyRow(_ref3) {
     "data-testid": "table-row",
     className: rowClassName,
     onMouseLeave: onMouseLeave,
-    onMouseEnter: onMouseEnter
+    onMouseEnter: onMouseEnter,
+    rowBorder: rowBorder
   }, row.heading ? /*#__PURE__*/React__default.createElement(TableCell, {
     row: row,
     colSpan: columns.length,
@@ -62437,10 +62449,11 @@ var TableBody = function TableBody(_ref6) {
       rowHovers = _ref6.rowHovers,
       compact = _ref6.compact,
       onRowMouseLeave = _ref6.onRowMouseLeave,
-      onRowMouseEnter = _ref6.onRowMouseEnter;
+      onRowMouseEnter = _ref6.onRowMouseEnter,
+      rowBorder = _ref6.rowBorder;
   return /*#__PURE__*/React__default.createElement("tbody", {
     "data-testid": "table-body"
-  }, !loading ? renderRows$1(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter) : /*#__PURE__*/React__default.createElement(LoadingContent, {
+  }, !loading ? renderRows$1(rows, columns, keyField, noRowsContent, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder) : /*#__PURE__*/React__default.createElement(LoadingContent, {
     colSpan: columns.length
   }));
 };
@@ -62545,7 +62558,9 @@ function BaseTable(_a) {
       rows = _a.rows,
       id = _a.id,
       className = _a.className,
-      props = __rest$3(_a, ["noRowsContent", "keyField", "loading", "footerRows", "rowHovers", "compact", "stickyHeader", "onRowMouseEnter", "onRowMouseLeave", "columns", "rows", "id", "className"]);
+      _a$rowBorder = _a.rowBorder,
+      rowBorder = _a$rowBorder === void 0 ? false : _a$rowBorder,
+      props = __rest$3(_a, ["noRowsContent", "keyField", "loading", "footerRows", "rowHovers", "compact", "stickyHeader", "onRowMouseEnter", "onRowMouseLeave", "columns", "rows", "id", "className", "rowBorder"]);
 
   return /*#__PURE__*/React__default.createElement(StyledTable, Object.assign({
     id: id,
@@ -62563,7 +62578,8 @@ function BaseTable(_a) {
     rowHovers: rowHovers,
     compact: compact,
     onRowMouseLeave: onRowMouseLeave,
-    onRowMouseEnter: onRowMouseEnter
+    onRowMouseEnter: onRowMouseEnter,
+    rowBorder: rowBorder
   }), footerRows && /*#__PURE__*/React__default.createElement(TableFoot, {
     columns: columns,
     rows: footerRows,

package/dist/src/Card/Card.story.d.ts

@@ -11,4 +11,9 @@ export declare const CustomCard: {
     };
 };
 export declare const Cardset: () => React.JSX.Element;
-export declare const AdvancedUsage: () => React.JSX.Element;
+export declare const AdvancedUsage: {
+    (): React.JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};

package/dist/src/Table/BaseTable.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { RowType, Columns } from "./Table.types";
+import { RowType, Columns, RowBorder } from "./Table.types";
 export type BaseTableProps<ColumnMetaData> = {
     columns: Columns<ColumnMetaData>;
     rows: RowType[];
@@ -16,6 +16,7 @@ export type BaseTableProps<ColumnMetaData> = {
     onRowMouseLeave?: (...args: any[]) => any;
     onMouseEnter?: any;
     onMouseLeave?: any;
+    rowBorder?: RowBorder;
 };
-declare function BaseTable<ColumnMetaData>({ noRowsContent, keyField, loading, footerRows, rowHovers, compact, stickyHeader, onRowMouseEnter, onRowMouseLeave, columns, rows, id, className, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
+declare function BaseTable<ColumnMetaData>({ noRowsContent, keyField, loading, footerRows, rowHovers, compact, stickyHeader, onRowMouseEnter, onRowMouseLeave, columns, rows, id, className, rowBorder, ...props }: BaseTableProps<ColumnMetaData>): React.JSX.Element;
 export default BaseTable;

package/dist/src/Table/BaseTable.story.d.ts

@@ -16,3 +16,4 @@ export declare const WithMetadata: () => React.JSX.Element;
 export declare const WithFullWidthSection: () => React.JSX.Element;
 export declare const WithAFooter: () => React.JSX.Element;
 export declare const WithRowBorder: () => React.JSX.Element;
+export declare const WithVerticalAlignment: () => React.JSX.Element;

package/dist/src/Table/StatefulTable.d.ts

@@ -85,6 +85,7 @@ declare class StatefulTable<ColumnMetaData> extends Component<StatefulTableProps
         onRowMouseLeave?: (...args: any[]) => any;
         onMouseEnter?: any;
         onMouseLeave?: any;
+        rowBorder?: boolean;
         selectedRows?: string[];
         onRowSelectionChange?: (...args: any[]) => any;
         onRowExpansionChange?: (...args: any[]) => any;

package/dist/src/Table/Table.types.d.ts

@@ -24,4 +24,5 @@ export type ColumnType<ColumnMetadata> = {
     key?: never | undefined;
 });
 export type Columns<ColumnMetadata> = ColumnType<ColumnMetadata>[];
+export type RowBorder = boolean;
 export {};

package/dist/src/Table/TableBody.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { RowBorder } from "./Table.types";
 type TableBodyProps = {
     rows: any[];
     columns: any[];
@@ -9,6 +10,7 @@ type TableBodyProps = {
     compact?: boolean;
     onRowMouseLeave?: any;
     onRowMouseEnter?: any;
+    rowBorder?: RowBorder;
 };
-declare const TableBody: ({ rows, columns, keyField, noRowsContent, loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, }: TableBodyProps) => React.JSX.Element;
+declare const TableBody: ({ rows, columns, keyField, noRowsContent, loading, rowHovers, compact, onRowMouseLeave, onRowMouseEnter, rowBorder, }: TableBodyProps) => React.JSX.Element;
 export default TableBody;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "14.4.2",
+  "version": "14.6.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {