@luscii-healthtech/web-ui 30.4.0 → 30.5.0

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

@@ -9,5 +9,15 @@ export interface TableBody<Item> {
     showEmptyView: boolean;
     onRowClick?: (item: Item) => void;
     className?: string;
+    /**
+     * Property to use when the table does not have a footer,
+     * and we want to preserve the rounded layout.
+     */
+    lastRowRounded: boolean;
+    /**
+     * Property to use when the table does not have a header,
+     * and we want to preserve the rounded layout.
+     */
+    topRowRounded: boolean;
 }
 export declare function TableBody<Item>(props: TableBody<Item>): JSX.Element;

package/dist/index.development.js

@@ -3681,13 +3681,13 @@ Line.propTypes = {
 function TableHeader(props) {
   return React__namespace.default.createElement(
     "thead",
-    { className: props.className },
-    React__namespace.default.createElement("tr", null, props.fieldConfigurations.map((fieldConfig) => {
+    null,
+    React__namespace.default.createElement("tr", { className: "ui-rounded-2xl " }, props.fieldConfigurations.map((fieldConfig) => {
       var _a;
       return React__namespace.default.createElement(
         "th",
-        { className: "ui-px-2 first:ui-pl-6 last:ui-pr-6", key: fieldConfig.key },
-        React__namespace.default.createElement(Text, { text: (_a = fieldConfig.headerText) !== null && _a !== void 0 ? _a : "", type: "strong", className: "ui-truncate ui-py-4 ui-text-left ui-uppercase ui-leading-5" })
+        { className: classNames__default.default("ui-px-xxs", "ui-border-neutral-interactive", "ui-border-y", "first:ui-rounded-tl-2xl first:ui-border-l first:ui-pl-l", "last:ui-rounded-tr-2xl last:ui-border-r last:ui-pr-l"), key: fieldConfig.key },
+        React__namespace.default.createElement(Text, { variant: "strong", className: "ui-truncate ui-py-m ui-text-left ui-capitalize ui-leading-5" }, (_a = fieldConfig.headerText) !== null && _a !== void 0 ? _a : "")
       );
     }))
   );
@@ -3764,8 +3764,32 @@ function TableBody(props) {
   var _a;
   return React__namespace.default.createElement(
     "tbody",
-    { className: props.className },
-    !props.isLoading && ((_a = props.items) === null || _a === void 0 ? void 0 : _a.map((item) => React__namespace.default.createElement(TableBodyRow, { className: classNames__default.default("ui-border-b ui-border-slate-100 last:ui-border-none"), key: JSON.stringify(item), item, fieldConfigurations: props.fieldConfigurations, emptyFieldContentText: props.emptyFieldContentText, onClick: props.onRowClick }))),
+    { className: classNames__default.default(
+      props.className,
+      // setting border color across all cells
+      "[&>tr>td]:ui-border-neutral-interactive",
+      // left border for first cell and right border for last cell
+      "[&>tr>td:first-child]:ui-border-l [&>tr>td:last-child]:ui-border-r",
+      "[&>tr>td]:ui-border-b",
+      /**
+       * Configuration for the top row to have rounded edges, in case
+       * there is no header.
+       */
+      {
+        "[&>tr:first-child>td]:ui-border-t": props.topRowRounded,
+        "[&>tr:first-child>td:first-child]:ui-rounded-tl-2xl": props.topRowRounded,
+        "[&>tr:first-child>td:last-child]:ui-rounded-tr-2xl": props.topRowRounded
+      },
+      /**
+       * Configuration for the last row to have rounded edges, in case
+       * there is no footer.
+       */
+      {
+        "[&>tr:last-child>td:first-child]:ui-rounded-bl-2xl": props.lastRowRounded,
+        "[&>tr:last-child>td:last-child]:ui-rounded-br-2xl": props.lastRowRounded
+      }
+    ) },
+    !props.isLoading && ((_a = props.items) === null || _a === void 0 ? void 0 : _a.map((item) => React__namespace.default.createElement(TableBodyRow, { key: JSON.stringify(item), item, fieldConfigurations: props.fieldConfigurations, emptyFieldContentText: props.emptyFieldContentText, onClick: props.onRowClick }))),
     props.isLoading && React__namespace.default.createElement(
       "tr",
       null,
@@ -3997,7 +4021,7 @@ const TableFooter = (props) => {
       null,
       React__namespace.default.createElement(
         "td",
-        { colSpan: props.colSpan },
+        { className: "ui-rounded-b-2xl ui-border-x ui-border-b ui-border-neutral-interactive", colSpan: props.colSpan },
         React__namespace.default.createElement(PaginationMenu, Object.assign({ className: "ui-p-6" }, props.paginationMenuProps))
       )
     )
@@ -4011,14 +4035,30 @@ function Table(_a) {
     setIsPristine(false);
   }, [items, isLoading]);
   const showEmptyView = !isPristine && !isLoading && !(items && items.length > 0);
+  const showFooter = !isLoading && !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0;
   return React__namespace.default.createElement(
     "table",
-    Object.assign({ className: classNames__default.default("ui-w-full ui-table-auto ui-border-collapse ui-rounded-lg ui-bg-white", className), "data-test-id": dataTestId }, otherAttributes),
-    showHeader ? React__namespace.default.createElement(TableHeader, { className: "ui-border-b ui-border-slate-100", fieldConfigurations }) : null,
-    React__namespace.default.createElement(TableBody, { className: classNames__default.default({
-      "ui-border-b ui-border-slate-100": !isLoading && !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0
-    }), items, fieldConfigurations, emptyItemsText: emptyRowsText, emptyFieldContentText, isLoading, showEmptyView, onRowClick }),
-    !isLoading && !showEmptyView && paginationMenuProps && paginationMenuProps.currentPageNumber > 0 && paginationMenuProps.pageCount > 0 ? React__namespace.default.createElement(TableFooter, { colSpan: fieldConfigurations.length, paginationMenuProps }) : null
+    Object.assign({ className: classNames__default.default("ui-w-full ui-table-auto ui-bg-white", "ui-border-separate ui-border-spacing-0 ui-rounded-2xl", className), "data-test-id": dataTestId }, otherAttributes),
+    showHeader ? React__namespace.default.createElement(TableHeader, { fieldConfigurations }) : null,
+    React__namespace.default.createElement(
+      TableBody,
+      {
+        // TODO: early return to remove all the boolean juggling.
+        className: classNames__default.default({
+          "ui-border-b ui-border-neutral-interactive": showFooter
+        }),
+        items,
+        fieldConfigurations,
+        emptyItemsText: emptyRowsText,
+        emptyFieldContentText,
+        isLoading,
+        showEmptyView,
+        onRowClick,
+        lastRowRounded: !showFooter,
+        topRowRounded: !showHeader
+      }
+    ),
+    showFooter ? React__namespace.default.createElement(TableFooter, { colSpan: fieldConfigurations.length, paginationMenuProps }) : null
   );
 }