orcs-design-system 3.2.44 → 3.2.46

package/es/components/Flex/Flex.stories.js

@@ -1,29 +1,27 @@
 import React from "react";
 import Flex from ".";
 import Button from "../Button";
-import Spacer from "../Spacer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Flex",
   component: Flex
 };
-export const basicFlex = () => /*#__PURE__*/_jsx(Flex, {
-  children: /*#__PURE__*/_jsxs(Spacer, {
-    mx: "s",
-    children: [/*#__PURE__*/_jsx(Button, {
-      children: "Button 1"
-    }), /*#__PURE__*/_jsx(Button, {
-      children: "Button 2"
-    }), /*#__PURE__*/_jsx(Button, {
-      children: "Button 3"
-    }), /*#__PURE__*/_jsx(Button, {
-      children: "Button 4"
-    }), /*#__PURE__*/_jsx(Button, {
-      children: "Button 5"
-    }), /*#__PURE__*/_jsx(Button, {
-      children: "Button 6"
-    })]
-  })
+export const basicFlex = () => /*#__PURE__*/_jsxs(Flex, {
+  gap: "r",
+  flexWrap: "wrap",
+  children: [/*#__PURE__*/_jsx(Button, {
+    children: "Button 1"
+  }), /*#__PURE__*/_jsx(Button, {
+    children: "Button 2"
+  }), /*#__PURE__*/_jsx(Button, {
+    children: "Button 3"
+  }), /*#__PURE__*/_jsx(Button, {
+    children: "Button 4"
+  }), /*#__PURE__*/_jsx(Button, {
+    children: "Button 5"
+  }), /*#__PURE__*/_jsx(Button, {
+    children: "Button 6"
+  })]
 });
 basicFlex.storyName = "Basic Flex";
 basicFlex.__docgenInfo = {

package/es/components/Flex/index.js

@@ -13,8 +13,9 @@ const FlexWrapper = styled("div").withConfig({
   componentId: "sc-1f3kfw7-0"
 }).attrs(props => ({
   "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
-}))(css({
-  boxSizing: "border-box"
+}))(props => css({
+  boxSizing: "border-box",
+  gap: props.gap
 }), FlexStyles);
 const FlexItem = styled("div").withConfig({
   displayName: "Flex__FlexItem",
@@ -25,10 +26,12 @@ const FlexItem = styled("div").withConfig({
 export default function Flex(_ref) {
   let {
     children,
+    gap,
     theme,
     ...props
   } = _ref;
   const component = /*#__PURE__*/_jsx(FlexWrapper, {
+    gap: gap,
     ...props,
     children: children
   });
@@ -49,6 +52,7 @@ export default function Flex(_ref) {
 Flex.propTypes = {
   /** Children of `Flex` are taken as node elements */
   children: PropTypes.node,
+  gap: PropTypes.string,
   theme: PropTypes.object,
   ...styledPropTypes.space,
   ...styledPropTypes.layout,
@@ -109,6 +113,13 @@ Flex.__docgenInfo = {
       },
       "required": false
     },
+    "gap": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "theme": {
       "description": "",
       "type": {

package/es/components/Table/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 import { useMaterialReactTable, MaterialReactTable } from "material-react-table";
-import { merge } from "lodash";
+import { merge, map } from "lodash";
 import muiStyleOverrides from "./muiStyleOverrides";
 import getExpandColumnConfig from "./getExpandColumnConfig";
 import { PropTypes } from "prop-types";
@@ -8,11 +8,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Table = _ref => {
   let {
     data,
-    columns,
+    columns: columnOverrides,
     ...tableConfig
   } = _ref;
   const otherConfig = {};
   const columnVisibility = {};
+  const columns = useMemo(() => {
+    return tableConfig?.enableSorting ? columnOverrides : map(columnOverrides, col => {
+      return {
+        ...col,
+        enableSorting: false
+      };
+    });
+  }, [columnOverrides, tableConfig?.enableSorting]);
   const firstCol = useMemo(() => columns[0], [columns]);
   if (tableConfig.enableExpanding) {
     columnVisibility[firstCol.id] = false;
@@ -26,6 +34,7 @@ const Table = _ref => {
     ...tableConfig,
     columns,
     data,
+    enableExpanding: true,
     initialState: merge({
       density: "compact",
       columnVisibility

package/es/components/Table/muiStyleOverrides.js

@@ -1,37 +1,60 @@
+import React from "react";
+import Icon from "../Icon";
+import Box from "../Box";
+import { jsx as _jsx } from "react/jsx-runtime";
 const muiStyleOverrides = {
+  muiExpandButtonProps: _ref => {
+    let {
+      row
+    } = _ref;
+    return {
+      children: row?.getIsExpanded() ? /*#__PURE__*/_jsx(Box, {
+        p: "s",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "chevron-down"],
+          size: "xs"
+        })
+      }) : /*#__PURE__*/_jsx(Box, {
+        p: "s",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fal", "chevron-right"],
+          size: "xs"
+        })
+      })
+    };
+  },
   muiBottomToolbarProps: {
     sx: {
-      boxShadow: "none"
+      display: "none" // Remove bottom toolbar
     }
   },
   muiTableHeadProps: {
     sx: {
-      height: "32px",
-      borderRadius: "5px",
+      backgroundColor: "transparent",
+      // No background for header
       "& .MuiTableCell-root": {
-        borderBottom: "none",
-        paddingTop: 0,
-        paddingBottom: 0,
-        verticalAlign: "middle"
-      },
-      "& .MuiTableRow-root": {
-        borderRadius: "5px",
-        background: "#F2F5F5",
-        boxShadow: "none"
-      },
-      "& th:nth-child(1)": {
-        borderRadius: "5px 0px 0px 5px"
+        color: "#6b7280",
+        // Subtle text color (gray tone)
+        fontWeight: "500",
+        // Slightly bold for clarity
+        padding: "0 0 6px 0",
+        // Consistent padding
+        borderBottom: "1px solid #e0e0e0",
+        // Subtle header-row separation
+        textAlign: "left",
+        // Ensure text alignment is consistent
+        lineHeight: "1.5" // Enhance readability
       },
-      "& th:nth-last-child(1)": {
-        borderRadius: "0px 5px 5px 0px"
+      "& button": {
+        display: "none" // Explicitly hide any buttons in the header
       }
     }
   },
-  muiTableBodyRowProps: _ref => {
+  muiTableBodyRowProps: _ref2 => {
     let {
       row,
       table
-    } = _ref;
+    } = _ref2;
     let borderBottomStyle = "solid";
     if (row.getIsExpanded()) {
       borderBottomStyle = "dashed";
@@ -57,9 +80,35 @@ const muiStyleOverrides = {
     sx: {
       borderCollapse: "separate !important",
       tableLayout: "fixed",
-      fontSize: "12px",
+      fontFamily: "inherit",
+      fontSize: "inherit",
+      fontWeight: "normal",
+      "& th, .MuiTableCell-root": {
+        fontWeight: "normal",
+        fontSize: "inherit",
+        fontFamily: "inherit"
+      },
+      "& td": {
+        fontFamily: "inherit",
+        fontSize: "inherit",
+        fontWeight: "normal"
+      },
       "& td, .MuiTableCell-root": {
-        fontSize: "12px"
+        padding: "6px 0 6px 0",
+        marginLeft: "0"
+      }
+    }
+  },
+  muiTableBodyCellProps: {
+    sx: {
+      fontWeight: "normal",
+      // Remove bold when expanded
+      // Default row cell style
+      "&.MuiTableRow-root": {
+        fontWeight: "normal" // Ensure the font is not bold by default
+      },
+      "&.expanded": {
+        fontWeight: "normal" // Remove bold when expanded
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.44",
+  "version": "3.2.46",
   "engines": {
     "node": "20.12.2"
   },
@@ -144,6 +144,7 @@
   },
   "overrides": {
     "braces": "3.0.3",
+    "cross-spawn": "7.0.6",
     "eslint-plugin-testing-library": "^5.11.1",
     "jest": "$jest",
     "nth-check": "2.1.0",