@thecb/components 7.7.2 → 7.7.3-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.2",
+  "version": "7.7.3-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/index.js

@@ -46,3 +46,4 @@ export { default as TypeaheadInput } from "./typeahead-input";
 export { default as Card } from "./card";
 export { default as NavTabs } from "./nav-tabs";
 export { default as LoadingLine } from "./loading-line";
+export * from "./table";

package/src/components/atoms/table/Table.styled.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export default styled.table`
+  width: 100%;
+  table-layout: auto;
+  ${({ extraStyles }) => extraStyles}
+`;

package/src/components/atoms/table/TableBody.styled.js

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export default styled.tbody`
+  ${({ extraStyles }) => extraStyles}
+`;

package/src/components/atoms/table/TableCell.styled.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export default styled.td`
+  padding: ${({ padding }) => (padding ? padding : "24px")};
+  font-size: 0.875rem;
+  white-space: nowrap;
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &:last-child {
+    text-align: right;
+  }
+  ${({ extraStyles }) => extraStyles};
+`;

package/src/components/atoms/table/TableHead.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { fallbackValues } from "./TableHead.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import StyledTableHead from "./TableHead.styled";
+import TableRow from "./TableRow";
+
+const TableHead = ({ children, extraStyles = "", themeValues }) => (
+  <StyledTableHead
+    backgroundColor={themeValues.backgroundColor}
+    borderColor={themeValues.borderColor}
+  >
+    <TableRow extraStyles={extraStyles} hoverEffect={false}>
+      {children}
+    </TableRow>
+  </StyledTableHead>
+);
+
+export default themeComponent(TableHead, "TableHead", fallbackValues);

package/src/components/atoms/table/TableHead.styled.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export default styled.thead`
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border-bottom: ${({ borderColor }) => `1px solid ${borderColor}`};
+  font-size: 0.875rem;
+`;

package/src/components/atoms/table/TableHead.theme.js

@@ -0,0 +1,9 @@
+import { ALABASTER_WHITE, GREY_CHATEAU } from "../../../constants/colors";
+
+const backgroundColor = ALABASTER_WHITE;
+const borderColor = GREY_CHATEAU;
+
+export const fallbackValues = {
+  backgroundColor,
+  borderColor
+};

package/src/components/atoms/table/TableHeading.styled.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export default styled.th`
+  padding: 24px;
+  min-width: ${({ minWidth }) => (minWidth ? minWidth : "initial")};
+  text-align: left;
+  &:last-child {
+    text-align: right;
+  }
+  ${({ extraStyles }) => extraStyles}
+`;

package/src/components/atoms/table/TableRow.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { fallbackValues } from "./TableRow.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import TableRowWrapper from "./TableRow.styled";
+
+const TableRow = ({
+  children,
+  extraStyles,
+  hoverCursor = false,
+  hoverEffect = true,
+  onClick,
+  themeValues,
+  ...props
+}) => (
+  <TableRowWrapper
+    onClick={onClick}
+    hoverEffect={hoverEffect}
+    extraStyles={extraStyles}
+    borderColor={themeValues.borderColor}
+    hoverBackgroundColor={themeValues.hoverBackgroundColor}
+    {...props}
+  >
+    {children}
+  </TableRowWrapper>
+);
+
+export default themeComponent(TableRow, "TableRow", fallbackValues);

package/src/components/atoms/table/TableRow.styled.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export default styled.tr`
+  &:not(:last-child) {
+    border-bottom: ${({ borderColor }) => `1px solid ${borderColor}`};
+  }
+
+  ${({ hoverCursor, hoverEffect, hoverBackgroundColor }) =>
+    hoverEffect &&
+    `&:hover {
+    ${hoverCursor && "cursor: pointer"};
+    background-color: ${hoverBackgroundColor};
+  }`}
+
+  ${({ extraStyles }) => extraStyles}
+`;

package/src/components/atoms/table/TableRow.theme.js

@@ -0,0 +1,9 @@
+import { GREY_CHATEAU, HOVER_LIGHT_BLUE } from "../../../constants/colors";
+
+const borderColor = GREY_CHATEAU;
+const hoverBackgroundColor = HOVER_LIGHT_BLUE;
+
+export const fallbackValues = {
+  borderColor,
+  hoverBackgroundColor
+};

package/src/components/atoms/table/index.js

@@ -0,0 +1,8 @@
+import Table from "./Table.styled";
+import TableBody from "./TableBody.styled";
+import TableCell from "./TableCell.styled";
+import TableHead from "./TableHead";
+import TableHeading from "./TableHeading.styled";
+import TableRow from "./TableRow";
+
+export { Table, TableBody, TableCell, TableHead, TableHeading, TableRow };