@atom-learning/components 2.42.1 → 2.43.0

package/CHANGELOG.md

@@ -1,9 +1,14 @@
-## [2.42.1](https://github.com/Atom-Learning/components/compare/v2.42.0...v2.42.1) (2023-03-08)
+# [2.43.0](https://github.com/Atom-Learning/components/compare/v2.42.1...v2.43.0) (2023-03-09)
 
 
 ### Bug Fixes
 
-* custom idColumn on DragAndDropTable ([f5bae51](https://github.com/Atom-Learning/components/commit/f5bae519828fe45b860dcb15fd58139c5b9894d2))
+* remove the xl test to be consistent with other components: we don't test every possible variant ([ca95811](https://github.com/Atom-Learning/components/commit/ca95811e4641ba50d6a118b241f52f6bdf5d3094))
+
+
+### Features
+
+* add new size for Table (xl) and change the padding in  size ([77af4dd](https://github.com/Atom-Learning/components/commit/77af4dd0d4fe8553a0bf804cd56f1842db90435c))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

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

@@ -18,7 +18,7 @@ declare type TableSubComponents = {
     StickyColumnsContainer: typeof TableStickyColumnsContainer;
 };
 declare const StyledTable: import("@stitches/react/types/styled-component").StyledComponent<"table", {
-    size?: "md" | "lg" | undefined;
+    size?: "md" | "lg" | "xl" | undefined;
     corners?: "round" | "square" | undefined;
 }, {
     sm: string;

package/dist/components/table/Table.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{styled as f}from"../../stitches.js";import{TableBody as b}from"./TableBody.js";import{TableCell as o}from"./TableCell.js";import{TableFooter as p}from"./TableFooter.js";import{TableFooterCell as t}from"./TableFooterCell.js";import{TableHeader as $}from"./TableHeader.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";import{StyledRow as c,TableRow as u}from"./TableRow.js";import{TableStickyColumnsContainer as m}from"./TableStickyColumnsContainer.js";const C=f("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${o}, ${r}, ${t}`]:{height:"$4"}},lg:{[`${o}, ${r}, ${t}`]:{height:"$5"}}},corners:{round:{[`${r}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${c}:last-child`]:{[`${o}:first-child`]:{borderBottomLeftRadius:"$0"},[`${o}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),e=({size:s="md",corners:d="round",numberOfStickyColumns:l=0,...n})=>{const a=i.createElement(C,{size:s,corners:d,...n});return l?i.createElement(m,{numberOfStickyColumns:l},a):a};e.Body=b,e.Cell=o,e.Footer=p,e.FooterCell=t,e.Header=$,e.HeaderCell=r,e.Row=u,e.StickyColumnsContainer=m,e.displayName="Table";export{e as Table};
+import*as a from"react";import{styled as $}from"../../stitches.js";import{TableBody as p}from"./TableBody.js";import{TableCell as o}from"./TableCell.js";import{TableFooter as f}from"./TableFooter.js";import{TableFooterCell as t}from"./TableFooterCell.js";import{TableHeader as b}from"./TableHeader.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";import{StyledRow as c,TableRow as u}from"./TableRow.js";import{TableStickyColumnsContainer as m}from"./TableStickyColumnsContainer.js";const C=$("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${o}, ${r}, ${t}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${o}, ${r}, ${t}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${o}, ${r}, ${t}`]:{height:"$6",padding:"$4 $3"}}},corners:{round:{[`${r}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${c}:last-child`]:{[`${o}:first-child`]:{borderBottomLeftRadius:"$0"},[`${o}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),e=({size:d="md",corners:s="round",numberOfStickyColumns:l=0,...n})=>{const i=a.createElement(C,{size:d,corners:s,...n});return l?a.createElement(m,{numberOfStickyColumns:l},i):i};e.Body=p,e.Cell=o,e.Footer=f,e.FooterCell=t,e.Header=b,e.HeaderCell=r,e.Row=u,e.StickyColumnsContainer=m,e.displayName="Table";export{e as Table};
 //# sourceMappingURL=Table.js.map

package/dist/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { StyledRow, TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\ntype TableSubComponents = {\n  Body: typeof TableBody\n  Cell: typeof TableCell\n  Footer: typeof TableFooter\n  FooterCell: typeof TableFooterCell\n  Header: typeof TableHeader\n  HeaderCell: typeof TableHeaderCell\n  Row: typeof TableRow\n  StickyColumnsContainer: typeof TableStickyColumnsContainer\n}\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$sans',\n  fontSize: '$sm',\n  width: '100%',\n  variants: {\n    size: {\n      md: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$4'\n        }\n      },\n      lg: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$5'\n        }\n      }\n    },\n    corners: {\n      round: {\n        [`${TableHeaderCell}`]: {\n          '&:first-of-type': { borderTopLeftRadius: '$0' },\n          '&:last-of-type': { borderTopRightRadius: '$0' }\n        },\n        [`${StyledRow}:last-child`]: {\n          [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n          [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n        }\n      },\n      square: {}\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n}\n\nexport const Table: React.FC<TableProps> & TableSubComponents = ({\n  size = 'md',\n  corners = 'round',\n  numberOfStickyColumns = 0,\n  ...rest\n}: TableProps) => {\n  const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n  if (numberOfStickyColumns) {\n    return (\n      <TableStickyColumnsContainer\n        numberOfStickyColumns={numberOfStickyColumns}\n      >\n        {tableComponent}\n      </TableStickyColumnsContainer>\n    )\n  }\n\n  return tableComponent\n}\n\nTable.Body = TableBody\nTable.Cell = TableCell\nTable.Footer = TableFooter\nTable.FooterCell = TableFooterCell\nTable.Header = TableHeader\nTable.HeaderCell = TableHeaderCell\nTable.Row = TableRow\nTable.StickyColumnsContainer = TableStickyColumnsContainer\n\nTable.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","Table","size","corners","numberOfStickyColumns","rest","tableComponent","React","TableStickyColumnsContainer","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAwBA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,IACV,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,IACV,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,CAAA,CACV,CACF,CACF,CAAC,EAMYI,EAAmD,CAAC,CAC/D,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,KACrBC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACZ,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGE,EAAM,EAE5E,OAAID,EAEAG,EAAA,cAACC,EAAA,CACC,sBAAuBJ,GAEtBE,CACH,EAIGA,CACT,EAEAL,EAAM,KAAOQ,EACbR,EAAM,KAAOJ,EACbI,EAAM,OAASS,EACfT,EAAM,WAAaF,EACnBE,EAAM,OAASU,EACfV,EAAM,WAAaH,EACnBG,EAAM,IAAMW,EACZX,EAAM,uBAAyBO,EAE/BP,EAAM,YAAc"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { StyledRow, TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\ntype TableSubComponents = {\n  Body: typeof TableBody\n  Cell: typeof TableCell\n  Footer: typeof TableFooter\n  FooterCell: typeof TableFooterCell\n  Header: typeof TableHeader\n  HeaderCell: typeof TableHeaderCell\n  Row: typeof TableRow\n  StickyColumnsContainer: typeof TableStickyColumnsContainer\n}\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$sans',\n  fontSize: '$sm',\n  width: '100%',\n  variants: {\n    size: {\n      md: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$4',\n          padding: '$1 $3'\n        }\n      },\n      lg: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$5',\n          padding: '$2 $3'\n        }\n      },\n      xl: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$6',\n          padding: '$4 $3'\n        }\n      }\n    },\n    corners: {\n      round: {\n        [`${TableHeaderCell}`]: {\n          '&:first-of-type': { borderTopLeftRadius: '$0' },\n          '&:last-of-type': { borderTopRightRadius: '$0' }\n        },\n        [`${StyledRow}:last-child`]: {\n          [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n          [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n        }\n      },\n      square: {}\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n}\n\nexport const Table: React.FC<TableProps> & TableSubComponents = ({\n  size = 'md',\n  corners = 'round',\n  numberOfStickyColumns = 0,\n  ...rest\n}: TableProps) => {\n  const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n  if (numberOfStickyColumns) {\n    return (\n      <TableStickyColumnsContainer\n        numberOfStickyColumns={numberOfStickyColumns}\n      >\n        {tableComponent}\n      </TableStickyColumnsContainer>\n    )\n  }\n\n  return tableComponent\n}\n\nTable.Body = TableBody\nTable.Cell = TableCell\nTable.Footer = TableFooter\nTable.FooterCell = TableFooterCell\nTable.Header = TableHeader\nTable.HeaderCell = TableHeaderCell\nTable.Row = TableRow\nTable.StickyColumnsContainer = TableStickyColumnsContainer\n\nTable.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","Table","size","corners","numberOfStickyColumns","rest","tableComponent","React","TableStickyColumnsContainer","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAwBA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,EACV,CACF,CACF,CAAC,EAMYI,EAAmD,CAAC,CAC/D,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,KACrBC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACZ,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGE,CAAM,CAAA,EAE5E,OAAID,EAEAG,EAAA,cAACC,EAAA,CACC,sBAAuBJ,CAEtBE,EAAAA,CACH,EAIGA,CACT,EAEAL,EAAM,KAAOQ,EACbR,EAAM,KAAOJ,EACbI,EAAM,OAASS,EACfT,EAAM,WAAaF,EACnBE,EAAM,OAASU,EACfV,EAAM,WAAaH,EACnBG,EAAM,IAAMW,EACZX,EAAM,uBAAyBO,EAE/BP,EAAM,YAAc"}

package/dist/components/table/TableCell.js

@@ -1,2 +1,2 @@
-import{styled as o}from"../../stitches.js";const l=o("td",{borderBottom:"1px solid $tonal100",boxSizing:"border-box",color:"$tonal400",fontFamily:"$body",lineHeight:1.5,p:"$2 $3",textAlign:"left",verticalAlign:"middle","&:first-child":{fontWeight:"bold"}});l.displayName="TableCell";export{l as TableCell};
+import{styled as o}from"../../stitches.js";const l=o("td",{borderBottom:"1px solid $tonal100",boxSizing:"border-box",color:"$tonal400",fontFamily:"$body",lineHeight:1.5,textAlign:"left",verticalAlign:"middle","&:first-child":{fontWeight:"bold"}});l.displayName="TableCell";export{l as TableCell};
 //# sourceMappingURL=TableCell.js.map

package/dist/components/table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableCell = styled('td', {\n  borderBottom: '1px solid $tonal100',\n  boxSizing: 'border-box',\n  color: '$tonal400',\n  fontFamily: '$body',\n  lineHeight: 1.5,\n  p: '$2 $3',\n  textAlign: 'left',\n  verticalAlign: 'middle',\n  '&:first-child': { fontWeight: 'bold' }\n})\n\nTableCell.displayName = 'TableCell'\n"],"names":["TableCell","styled"],"mappings":"2CAEO,MAAMA,EAAYC,EAAO,KAAM,CACpC,aAAc,sBACd,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,EAAG,QACH,UAAW,OACX,cAAe,SACf,gBAAiB,CAAE,WAAY,MAAO,CACxC,CAAC,EAEDD,EAAU,YAAc"}
+{"version":3,"file":"TableCell.js","sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableCell = styled('td', {\n  borderBottom: '1px solid $tonal100',\n  boxSizing: 'border-box',\n  color: '$tonal400',\n  fontFamily: '$body',\n  lineHeight: 1.5,\n  textAlign: 'left',\n  verticalAlign: 'middle',\n  '&:first-child': { fontWeight: 'bold' }\n})\n\nTableCell.displayName = 'TableCell'\n"],"names":["TableCell","styled"],"mappings":"2CAEO,MAAMA,EAAYC,EAAO,KAAM,CACpC,aAAc,sBACd,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,gBAAiB,CAAE,WAAY,MAAO,CACxC,CAAC,EAEDD,EAAU,YAAc"}

package/dist/components/table/TableFooterCell.js

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";const l=t("td",{color:"$tonal400",fontFamily:"$body",fontWeight:600,p:"$2 $3",textAlign:"left",verticalAlign:"middle"});l.displayName="TableFooterCell";export{l as TableFooterCell};
+import{styled as t}from"../../stitches.js";const l=t("td",{color:"$tonal400",fontFamily:"$body",fontWeight:600,textAlign:"left",verticalAlign:"middle"});l.displayName="TableFooterCell";export{l as TableFooterCell};
 //# sourceMappingURL=TableFooterCell.js.map

package/dist/components/table/TableFooterCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooterCell.js","sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableFooterCell = styled('td', {\n  color: '$tonal400',\n  fontFamily: '$body',\n  fontWeight: 600,\n  p: '$2 $3',\n  textAlign: 'left',\n  verticalAlign: 'middle'\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"names":["TableFooterCell","styled"],"mappings":"2CAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,EAAG,QACH,UAAW,OACX,cAAe,QACjB,CAAC,EAEDD,EAAgB,YAAc"}
+{"version":3,"file":"TableFooterCell.js","sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableFooterCell = styled('td', {\n  color: '$tonal400',\n  fontFamily: '$body',\n  fontWeight: 600,\n  textAlign: 'left',\n  verticalAlign: 'middle'\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"names":["TableFooterCell","styled"],"mappings":"2CAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,UAAW,OACX,cAAe,QACjB,CAAC,EAEDD,EAAgB,YAAc"}

package/dist/components/table/TableHeaderCell.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";const e=l("th",{color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,p:"$2 $3",textAlign:"left",verticalAlign:"middle"});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
+import{styled as l}from"../../stitches.js";const e=l("th",{color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,textAlign:"left",verticalAlign:"middle"});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
 //# sourceMappingURL=TableHeaderCell.js.map

package/dist/components/table/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n  color: 'white',\n  fontFamily: '$body',\n  fontWeight: 600,\n  lineHeight: 1.5,\n  p: '$2 $3',\n  textAlign: 'left',\n  verticalAlign: 'middle'\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"2CAEa,MAAAA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,QACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,EAAG,QACH,UAAW,OACX,cAAe,QACjB,CAAC,EAEDD,EAAgB,YAAc"}
+{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n  color: 'white',\n  fontFamily: '$body',\n  fontWeight: 600,\n  lineHeight: 1.5,\n  textAlign: 'left',\n  verticalAlign: 'middle'\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"2CAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,QACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,OACX,cAAe,QACjB,CAAC,EAEDD,EAAgB,YAAc"}