@agregio-solutions/design-system 1.34.0 → 1.35.1

package/dist/design-system.cjs

@@ -965,8 +965,17 @@ See https://s-c.sh/2BAXzed for more info.`),window[Pa]+=1);const be={color:{cont
   line-height: ${re.xxSmall};
 `,T7=l.forwardRef(({count:e,onPageChange:t,pageIndex:n,itemsPerPageOptions:r=[10,20,30,40,50],itemsPerPage:a=10,onItemsPerPageChange:u,...o},i)=>{const s=l.useMemo(()=>n*a+1,[a,n]),d=l.useMemo(()=>Math.min((n+1)*a,e),[e,a,n]),c=l.useMemo(()=>Math.ceil(e/a),[e,a]),p=l.useMemo(()=>Math.max(c-1,0),[c]);return m.jsxs(v$,{...o,ref:i,children:[m.jsxs(g$,{children:[m.jsx(b$,{children:"Item per page"}),m.jsx(rl,{id:"table-pagination-items-per-page",label:"Select the number of items per page",mode:"single",value:String(a),onChange:h=>u(Number(h)),fullWidth:!0,children:r.map(h=>m.jsx(Rn,{id:String(h),text:String(h)},h))}),m.jsxs(y$,{"data-testid":"table-pagination-items-range",children:[m.jsx("b",{children:s})," - ",m.jsx("b",{children:d})," of ",m.jsx("b",{children:e})," items"]})]}),m.jsxs(x$,{children:[m.jsx(rl,{id:"table-pagination-page-selector",label:"Select page to display",mode:"single",value:String(n),onChange:h=>t(Number(h)),fullWidth:!0,children:h$(c).map(h=>m.jsx(Rn,{id:String(h),text:String(h+1)},h))}),m.jsxs($$,{"data-testid":"table-pagination-pages-range",children:["On ",m.jsx("b",{children:c})," pages"]}),m.jsxs("div",{children:[m.jsx(Be,{iconLeft:"first_page","aria-label":"Go to first page",onClick:()=>t(0),disabled:n===0,mode:"tertiary"}),m.jsx(Be,{iconLeft:"chevron_left","aria-label":"Go to previous page",onClick:()=>t(n-1),disabled:n===0,mode:"tertiary"}),m.jsx(Be,{iconLeft:"chevron_right","aria-label":"Go to next page",onClick:()=>t(n+1),disabled:n===p,mode:"tertiary"}),m.jsx(Be,{iconLeft:"last_page","aria-label":"Go to last page",onClick:()=>t(p),disabled:n===p,mode:"tertiary"})]})]})]})}),C$=I.table`
   width: 100%;
-  border-collapse: separate;
-  border-spacing: 0 var(--spacing-xxs);
+  border-collapse: collapse;
+  border-spacing: 0;
+  background-color: var(--color-content-neutral-primary-reversed);
+
+  tbody {
+    border-top: 1px solid var(--color-content-neutral-stroke);
+
+    tr {
+      border-bottom: 1px solid var(--color-content-neutral-stroke);
+    }
+  }
 `;function R7({children:e,...t}){return m.jsx(C$,{...t,children:e})}const D$=I.div`
   padding: var(--spacing-md);
   text-align: center;
@@ -991,10 +1000,20 @@ See https://s-c.sh/2BAXzed for more info.`),window[Pa]+=1);const be={color:{cont
   > [data-design-system-component="Checkbox"] {
     padding: 0 !important;
   }
+
+  &[data-border="left"],
+  &[data-border="both"] {
+    border-left: 1px solid var(--color-content-neutral-stroke);
+  }
+
+  &[data-border="right"],
+  &[data-border="both"] {
+    border-right: 1px solid var(--color-content-neutral-stroke);
+  }
 `,P$=I(Ce)`
   display: inline-block;
   font-size: ${X.large};
-`;function A$({children:e,iconLeft:t,...n}){return m.jsx(S$,{...n,children:m.jsxs(k$,{children:[!!t&&m.jsx(P$,{name:t}),e]})})}const F$=I.th`
+`;function A$({children:e,iconLeft:t,border:n,...r}){return m.jsx(S$,{...r,children:m.jsxs(k$,{"data-border":n,children:[!!t&&m.jsx(P$,{name:t}),e]})})}const F$=I.th`
   padding: 0;
   vertical-align: bottom;
 `,T$=I.div`
@@ -1003,7 +1022,18 @@ See https://s-c.sh/2BAXzed for more info.`),window[Pa]+=1);const be={color:{cont
   width: 100%;
   column-gap: var(--spacing-xxs);
   padding: var(--spacing-sm);
+  background: var(--color-background-neutral-underground-1);
   border-bottom: 1px solid var(--color-content-neutral-stroke);
+
+  &[data-border="left"],
+  &[data-border="both"] {
+    border-left: 1px solid var(--color-content-neutral-stroke);
+  }
+
+  &[data-border="right"],
+  &[data-border="both"] {
+    border-right: 1px solid var(--color-content-neutral-stroke);
+  }
 `,al=I(Ce)`
   display: inline-block;
   font-size: ${X.large};
@@ -1028,7 +1058,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[Pa]+=1);const be={color:{cont
   }
 `,R$=I(I7)`
   height: ${X.large};
-`;function I$({text:e,iconLeft:t,sortDirection:n="none",onSortClick:r,...a}){return m.jsx(F$,{...a,children:m.jsxs(T$,{children:[!!t&&m.jsx(al,{name:t}),m.jsx(I7,{type:"button",onClick:r,disabled:!r,children:e}),!!r&&n!=="none"&&m.jsx(R$,{type:"button",onClick:r,disabled:!r,children:m.jsx(al,{name:n==="asc"?"expand_less":"expand_more"})})]})})}const M$=I(Bb)`
+`;function I$({text:e,iconLeft:t,sortDirection:n="none",onSortClick:r,border:a,...u}){return m.jsx(F$,{...u,children:m.jsxs(T$,{"data-border":a,children:[!!t&&m.jsx(al,{name:t}),m.jsxs(I7,{type:"button",onClick:r,disabled:!r,children:[e||" "," "]}),!!r&&n!=="none"&&m.jsx(R$,{type:"button",onClick:r,disabled:!r,children:m.jsx(al,{name:n==="asc"?"expand_less":"expand_more"})})]})})}const M$=I(Bb)`
   display: flex;
 
   &[data-fullwidth="true"] {
@@ -1485,9 +1515,10 @@ See https://s-c.sh/2BAXzed for more info.`),window[Pa]+=1);const be={color:{cont
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
 `,BC=I.div`
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: flex-end;
   gap: var(--spacing-sm);
 `,SC=I.div`

package/dist/design-system.js

@@ -22138,8 +22138,17 @@ const DC = R.div`
   }
 ), kC = R.table`
   width: 100%;
-  border-collapse: separate;
-  border-spacing: 0 var(--spacing-xxs);
+  border-collapse: collapse;
+  border-spacing: 0;
+  background-color: var(--color-content-neutral-primary-reversed);
+
+  tbody {
+    border-top: 1px solid var(--color-content-neutral-stroke);
+
+    tr {
+      border-bottom: 1px solid var(--color-content-neutral-stroke);
+    }
+  }
 `;
 function AC({
   children: e,
@@ -22222,6 +22231,16 @@ const RC = R.td`
   > [data-design-system-component="Checkbox"] {
     padding: 0 !important;
   }
+
+  &[data-border="left"],
+  &[data-border="both"] {
+    border-left: 1px solid var(--color-content-neutral-stroke);
+  }
+
+  &[data-border="right"],
+  &[data-border="both"] {
+    border-right: 1px solid var(--color-content-neutral-stroke);
+  }
 `, VC = R(Te)`
   display: inline-block;
   font-size: ${ne.large};
@@ -22229,9 +22248,10 @@ const RC = R.td`
 function gw({
   children: e,
   iconLeft: t,
-  ...n
+  border: n,
+  ...r
 }) {
-  return /* @__PURE__ */ m(RC, { ...n, children: /* @__PURE__ */ Y(MC, { children: [
+  return /* @__PURE__ */ m(RC, { ...r, children: /* @__PURE__ */ Y(MC, { "data-border": n, children: [
     !!t && /* @__PURE__ */ m(VC, { name: t }),
     e
   ] }) });
@@ -22245,7 +22265,18 @@ const KC = R.th`
   width: 100%;
   column-gap: var(--spacing-xxs);
   padding: var(--spacing-sm);
+  background: var(--color-background-neutral-underground-1);
   border-bottom: 1px solid var(--color-content-neutral-stroke);
+
+  &[data-border="left"],
+  &[data-border="both"] {
+    border-left: 1px solid var(--color-content-neutral-stroke);
+  }
+
+  &[data-border="right"],
+  &[data-border="both"] {
+    border-right: 1px solid var(--color-content-neutral-stroke);
+  }
 `, cl = R(Te)`
   display: inline-block;
   font-size: ${ne.large};
@@ -22276,11 +22307,15 @@ function bw({
   iconLeft: t,
   sortDirection: n = "none",
   onSortClick: r,
-  ...a
+  border: a,
+  ...u
 }) {
-  return /* @__PURE__ */ m(KC, { ...a, children: /* @__PURE__ */ Y(OC, { children: [
+  return /* @__PURE__ */ m(KC, { ...u, children: /* @__PURE__ */ Y(OC, { "data-border": a, children: [
     !!t && /* @__PURE__ */ m(cl, { name: t }),
-    /* @__PURE__ */ m(H7, { type: "button", onClick: r, disabled: !r, children: e }),
+    /* @__PURE__ */ Y(H7, { type: "button", onClick: r, disabled: !r, children: [
+      e || " ",
+      " "
+    ] }),
     !!r && n !== "none" && /* @__PURE__ */ m(
       LC,
       {
@@ -23271,9 +23306,10 @@ const xD = R.div`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
 `, AD = R.div`
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: flex-end;
   gap: var(--spacing-sm);
 `, FD = R.div`

package/dist/packages/components/DataTable/DataTableCell/index.d.ts

@@ -28,6 +28,10 @@ type Props = {
      * The inline style for the element.
      */
     style?: React.CSSProperties;
+    /**
+     * The border to apply to the cell.
+     */
+    border?: "right" | "left" | "both";
 };
-export default function DataTableCell({ children, iconLeft, ...otherProps }: Props): React.ReactElement;
+export default function DataTableCell({ children, iconLeft, border, ...otherProps }: Props): React.ReactElement;
 export {};

package/dist/packages/components/DataTable/DataTableHeader/index.d.ts

@@ -25,5 +25,19 @@ export type Props = {
      * The inline style for the element.
      */
     style?: React.CSSProperties;
+    /**
+     * The border to apply to the header.
+     */
+    border?: "right" | "left" | "both";
+    /**
+     * Sets or retrieves the number columns in the table that the object should span.
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/colSpan)
+     */
+    colSpan?: number;
+    /**
+     * Sets or retrieves how many rows in a table the cell should span.
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/rowSpan)
+     */
+    rowSpan?: number;
 };
-export default function DataTableHeader({ text, iconLeft, sortDirection, onSortClick, ...otherProps }: Props): React.ReactElement;
+export default function DataTableHeader({ text, iconLeft, sortDirection, onSortClick, border, ...otherProps }: Props): React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.34.0",
+  "version": "1.35.1",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",
@@ -16,7 +16,7 @@
     "build": "vite build",
     "build-storybook": "storybook build",
     "chromatic": "chromatic",
-    "eslint": "eslint . --ignore-path .gitignore",
+    "eslint": "eslint .",
     "formatters": "npm run prettier:check && npm run eslint && npm run typescript:check",
     "integrity": "npm run formatters && npm run build && npm run vitest:all && npm run storybook:test:integrity",
     "jest:compatibility-check": "npm run build && jest internal/test-jest-compatibility.jest.js",
@@ -36,10 +36,13 @@
   "devDependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@eslint/compat": "^1.2.2",
+    "@eslint/js": "^9.14.0",
     "@mui/material": "^5.16.7",
     "@semantic-release/gitlab": "^13.2.1",
     "@semantic-release/npm": "^12.0.1",
     "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-docs": "^8.4.2",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
@@ -53,16 +56,14 @@
     "@tanstack/react-table": "^8.20.5",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@vitejs/plugin-react": "^4.3.3",
     "chromatic": "^11.12.6",
     "conventional-changelog-conventionalcommits": "8.0.0",
-    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest-dom": "^5.4.0",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^0.11.0",
     "http-server": "^14.1.1",
     "husky": "^9.1.6",
     "jest": "^29.7.0",
@@ -77,6 +78,7 @@
     "semantic-release": "^24.1.3",
     "start-server-and-test": "^2.0.8",
     "storybook": "^8.3.6",
+    "typescript-eslint": "^8.13.0",
     "vite-plugin-dts": "4.3.0",
     "vitest": "^2.1.3"
   },