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

package/dist/cjs/index.js

@@ -12629,8 +12629,83 @@ const Alert = (props) => (React__default["default"].createElement(DefaultAlert,
     props.content,
     React__default["default"].createElement(DefaultAlert.Close, null, "X")));
 
+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;
+  }
+`;
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Button = Button;
 exports.NumberedContents = NumberedContents;
+exports.Table = Table;
 //# sourceMappingURL=index.js.map