@unitedstatespowersquadrons/components 1.2.16 → 1.2.18-1

package/StripedTable/Table.tsx

@@ -4,21 +4,30 @@ import classNames from "classnames";
 import TableStyles from "./TableStyles";
 
 const useStyles = createUseStyles({
+  collapse: { borderCollapse: "collapse" },
+  separate: { borderCollapse: "separate" },
   table: TableStyles.table,
+  tableStripedTbody: TableStyles.tableStripedTbody,
 });
 
 interface Props {
+  borderCollapse?: boolean;
   children: React.ReactNode;
   className?: string;
   id?: string;
+  stripedTbody?: boolean;
 }
 
 const Table = (props: Props) => {
-  const { children, className, id } = props;
+  const { borderCollapse, children, className, id, stripedTbody } = props;
   const classes = useStyles();
 
+  const borderCollapseClassName = borderCollapse ? classes.collapse : classes.separate;
+
+  const tableClassName = stripedTbody ? classes.tableStripedTbody : classes.table;
+
   return(
-    <table className={classNames(className, classes.table)} id={id}>
+    <table className={classNames(className, tableClassName, borderCollapseClassName)} id={id}>
       {children}
     </table>
   );

package/StripedTable/TableStyles.ts

@@ -26,6 +26,21 @@ const tbody = {
   },
 };
 
+const stripedTbody = {
+  "&:nth-child(even)": {
+    "& > td, & > th": {
+      backgroundColor: Colors.shades._e,
+      height: "1.75em",
+    },
+  },
+  "&:nth-child(odd)": {
+    "& > td, & > th": {
+      backgroundColor: Colors.shades._d,
+      height: "1.75em",
+    },
+  },
+};
+
 const tfoot = {
   "& > tr" : {
     "& > td": {
@@ -41,6 +56,12 @@ const table = {
   "& > thead": thead,
 };
 
-const TableStyles = { table, tbody, tfoot, thead };
+const tableStripedTbody = {
+  "& > tbody": stripedTbody,
+  "& > tfoot": tfoot,
+  "& > thead": thead,
+};
+
+const TableStyles = { table, tableStripedTbody, tbody, tfoot, thead };
 
 export default TableStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.2.16",
+  "version": "1.2.18-1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {

package/tsconfig.json

@@ -9,6 +9,7 @@
     "jsx": "react",
     "module": "commonjs",
     "noEmit": true,
+    "noErrorTruncation": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,