@thecb/components 7.7.3-beta.2 → 7.7.3-beta.4

package/package.json

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

package/src/components/atoms/index.d.ts

@@ -1,6 +1,6 @@
-export * from "./card";
 export * from "./button-with-action";
 export * from "./button-with-link";
+export * from "./card";
 export * from "./icons";
 export * from "./layouts";
 export * from "./link";
@@ -8,5 +8,6 @@ export * from "./nav-footer";
 export * from "./nav-header";
 export * from "./nav-tabs";
 export * from "./paragraph";
+export * from "./table";
 export * from "./text";
 export * from "./title";

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

@@ -3,5 +3,6 @@ import styled from "styled-components";
 export default styled.table`
   width: 100%;
   table-layout: auto;
+  border-collapse: collapse;
   ${({ extraStyles }) => extraStyles}
 `;

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

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

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

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

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

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

package/src/components/atoms/table/index.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface TableProps {
+  extraStyles?: string;
+}
+
+export interface TableBodyProps {
+  extraStyles?: string;
+}
+
+export interface TableCellProps {
+  extraStyles?: string;
+  fontSize?: string;
+  maxWidth?: string;
+  padding?: string;
+}
+
+export interface TableHeadProps {
+  extraStyles?: string;
+}
+export interface TableHeadingProps {
+  extraStyles?: string;
+  minWidth?: string;
+  padding?: string;
+}
+
+export interface TableRowProps {
+  extraStyles?: string;
+  hoverCursor?: boolean;
+  hoverEffect?: boolean;
+}
+
+export const Table: React.FC<Expand<TableProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export const TableBody: React.FC<Expand<TableBodyProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export const TableCell: React.FC<Expand<TableCellProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export const TableHead: React.FC<Expand<TableHeadProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export const TableHeading: React.FC<Expand<TableHeadingProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export const TableRow: React.FC<Expand<TableRowProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/popover/Popover.js

@@ -8,9 +8,9 @@ import { useOutsideClick } from "../../../util";
 import { noop } from "../../../util/general";
 import { fallbackValues } from "./Popover.theme";
 
-const arrowBorder = (direction, width = "8px") => {
+const arrowBorder = (borderColor, direction, width = "8px") => {
   const angle = `${width} solid transparent`;
-  const straight = `${width} solid rgba(255, 255, 255, 0.85)`;
+  const straight = `${width} solid ${borderColor}`;
   if (direction == "down") {
     return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
   } else if (direction == "up") {
@@ -40,7 +40,10 @@ const Popover = ({
   arrowPosition, // { top: string, right: string, bottom: string, left: string }
   arrowDirection = "down",
   transform = "none",
-  buttonExtraStyles
+  buttonExtraStyles,
+  backgroundColor = "white",
+  borderColor = "rgba(255, 255, 255, 0.85)",
+  popoverExtraStyles
 }) => {
   const { hoverColor, activeColor, popoverTriggerColor } = themeValues;
   const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
@@ -110,7 +113,7 @@ const Popover = ({
         )}
       </ButtonWithAction>
       <Box
-        background="white"
+        background={backgroundColor}
         borderRadius="4px"
         boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
         id={`Disclosed${popoverID}`}
@@ -128,6 +131,7 @@ const Popover = ({
           left: ${left};
           height: ${height};
           transform: ${transform};
+          ${popoverExtraStyles};
           `}
       >
         <Paragraph>{content}</Paragraph>
@@ -138,7 +142,7 @@ const Popover = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(arrowDirection, "8px")};
+            ${arrowBorder(borderColor, arrowDirection, "8px")};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};

package/src/components/molecules/popover/index.d.ts

@@ -23,6 +23,9 @@ export interface PopoverProps {
   arrowDirection?: "left" | "right" | "top" | "bottom";
   transform?: string;
   disclosedExtraStyles?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  popoverExtraStyles?: string;
 }
 
 export const Popover: React.FC<Expand<PopoverProps> &