@bcgov-sso/common-react-components 1.20.2 → 1.20.6

package/dist/cjs/types/components/index.d.ts

@@ -2,3 +2,4 @@ export { default as Accordion } from './Accordion';
 export { default as NumberedContents } from './NumberedContents';
 export { default as Button } from './Button';
 export { default as Alert } from './Alert';
+export { default as Table } from './Table';

package/dist/esm/index.js

@@ -12621,5 +12621,79 @@ const Alert = (props) => (React.createElement(DefaultAlert, Object.assign({}, pr
     props.content,
     React.createElement(DefaultAlert.Close, null, "X")));
 
-export { Accordion, Alert, Button, NumberedContents };
+const TABLE_BACKGROUND_COLOR = '#ededed';
+const TABLE_ROW_ACTIVE_COLOR = '#4950FA';
+const TABLE_ROW_HEIGHT = 40;
+const TABLE_ROW_HEIGHT_MINI = 40;
+const TABLE_ROW_SPACING = 5;
+const TABLE_ROW_BORDER_RADIUS = 6;
+const Table = qe.table `
+  width: 100%;
+  -webkit-box-shadow: none;
+  background-color: ${TABLE_BACKGROUND_COLOR};
+  padding: 0.1em 0.6em;
+  box-shadow: none;
+  text-align: left;
+  border-collapse: separate;
+  border-spacing: 0 ${TABLE_ROW_SPACING}px;
+  color: black;
+
+  & thead {
+    font-size: 16px;
+    & > th {
+      min-width: ${(props) => (props.variant === 'mini' ? '30px' : '140px')};
+    }
+  }
+
+  & tbody {
+    font-size: ${(props) => (props.variant === 'mini' ? '14px' : '16px')};
+    & > tr {
+      height: ${(props) => (props.variant === 'mini' ? `${TABLE_ROW_HEIGHT_MINI}px` : `${TABLE_ROW_HEIGHT}px`)};
+      background-color: #fff;
+
+      td:first-child {
+        border-top-left-radius: ${TABLE_ROW_BORDER_RADIUS}px;
+      }
+      td:last-child {
+        border-top-right-radius: ${TABLE_ROW_BORDER_RADIUS}px;
+      }
+
+      td:first-child {
+        border-bottom-left-radius: ${TABLE_ROW_BORDER_RADIUS}px;
+      }
+      td:last-child {
+        border-bottom-right-radius: ${TABLE_ROW_BORDER_RADIUS}px;
+      }
+
+      ${(props) => !props.readOnly &&
+    `
+        &:hover {
+          background-color: ${TABLE_ROW_ACTIVE_COLOR};
+          color: #fff;
+          cursor: pointer;
+        }
+        &.active {
+          background-color: ${TABLE_ROW_ACTIVE_COLOR};
+          color: #fff;
+          font-weight: bold;
+        }
+      `}
+    }
+  }
+
+  & th:first-child,
+  & td:first-child {
+    padding-left: 1em;
+    text-align: left;
+  }
+
+  & th,
+  & td {
+    border: none;
+    padding: 0;
+    overflow: hidden;
+  }
+`;
+
+export { Accordion, Alert, Button, NumberedContents, Table };
 //# sourceMappingURL=index.js.map