@redsift/design-system-legacy 8.0.0 → 8.0.1

package/src/components/Table/TableStyles.jsx

@@ -0,0 +1,514 @@
+import React, { Fragment, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import SimpleBarReact from "simplebar-react";
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { ArrowDown, ArrowUp, ChevronRight } from '../icons';
+
+// NOTE:
+// - for valid DOM nesting with custom scrollbar (simplebar), we need to use divs unfortunately
+// - aria roles used as recommended here:
+// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role
+// https://github.com/redsift/design-system/commit/8d1d84c2c74d76cbb0996e39b28974f5b8c871c1
+const StyledSimpleBar = styled(SimpleBarReact)`
+  overflow-y: hidden;
+  .simplebar-track.simplebar-horizontal {
+    height: 8px;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.125);
+    ${({ xoverflow }) => xoverflow && `left: ${xoverflow + 2}px;`}
+  }
+  .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+    height: 8px;
+    top: 0;
+  }
+  .simplebar-scrollbar,
+  .simplebar-scrollbar:before,
+  .simplebar-track.simplebar-horizontal {
+    border-radius: 4px;
+  }
+  .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    left: 0;
+  }
+  .simplebar-content:after {
+    content: none;
+  }
+  ${({ xoverflow, placeholderHeight }) =>
+    xoverflow &&
+    `
+    .simplebar-track.simplebar-vertical {
+      display: none;
+      visibility: hidden;
+    }
+    .simplebar-content {
+      box-sizing: border-box;
+    }
+    .simplebar-placeholder {
+      height: ${placeholderHeight}px !important;
+    }
+    .simplebar-scrollbar:before {
+      top: 0;
+      bottom: 0;
+    }
+  `};
+`;
+
+const TableContent = forwardRef(
+  ({ children, xOverflow, placeholderHeight }, ref) => {
+    return xOverflow ? (
+      <StyledSimpleBar
+        autoHide={false}
+        forceVisible="x"
+        ref={ref}
+        xoverflow={xOverflow}
+        placeholderHeight={placeholderHeight}
+      >
+        {children}
+      </StyledSimpleBar>
+    ) : (
+      <Fragment>{children}</Fragment>
+    );
+  }
+);
+
+const ExpandIcon = styled(ChevronRight)`
+  vertical-align: middle;
+  transform: ${({ expanded }) => (expanded ? "rotate(90deg)" : "unset")};
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const sortIconStyles = css`
+  height: 18px;
+  width: 18px;
+  position: relative;
+  top: 5px;
+`;
+
+const SortDownIcon = styled(ArrowDown)`
+  ${sortIconStyles};
+`;
+
+const SortUpIcon = styled(ArrowUp)`
+  ${sortIconStyles};
+`;
+
+const CenteredActionButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  height: 40px;
+  white-space: nowrap;
+  ${(props) =>
+    props.useMobileLayout
+      ? `
+    flex: 1;
+    justify-content: center;
+    * + && {
+      span {
+        display: none;
+      }
+      svg {
+        margin-right: 0;
+      }
+    }
+  `
+      : ""}
+
+  ${(props) =>
+    props.hoverColor
+      ? `&:hover { background-color: ${props.hoverColor}; }`
+      : ""}
+  ${(props) =>
+    props.activeColor
+      ? `&:active { background-color: ${props.activeColor}; }`
+      : ""}
+  ${(props) =>
+    props.unPadded
+      ? ""
+      : `
+          padding: 8px 16px;
+          svg {
+            margin-right: 14px;
+          }
+          && + && {
+            margin-left: 8px;
+          }
+        `}
+`;
+
+const ActionIcon = ({
+  icon: Icon,
+  label,
+  disabled,
+  flatIcon = true,
+  outlined = false,
+  color,
+  ...rest
+}) => {
+  const iconColor = flatIcon || outlined ? color : "#FFF";
+  return (
+    <CenteredActionButton
+      disabled={disabled}
+      flatIcon={flatIcon}
+      outlined={outlined}
+      color={color}
+      {...rest}
+    >
+      <Icon disabled={disabled} color={iconColor} fill={iconColor} />
+      <span>{label}</span>
+    </CenteredActionButton>
+  );
+};
+
+const Search = styled(Input)`
+  width: ${(props) => (props.expand ? "100%" : "360px")};
+  max-width: 100%;
+  margin-left: 0;
+`;
+
+const Header = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+`;
+
+const HeaderPrimaryContent = styled.div`
+  flex: 1 1 360px;
+`;
+
+const ActionBar = styled.div`
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+  ${(props) => (props.spaced ? "margin-left: 32px;" : "")}
+
+  ${Button} {
+    flex: 1;
+  }
+`;
+
+const TableElement = styled.div`
+  display: block;
+  border-radius: 4px;
+  width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.12);
+  border-width: ${({ bordered }) => (bordered ? "1px 1px 0px 1px" : "0px")};
+  ${({ xOverflow }) => xOverflow && "overflow-x: scroll; overflow-y: hidden"};
+`;
+
+const StyledTable = ({ children, ...props }) => {
+  return (
+    <TableElement {...props} role="table">
+      {children}
+    </TableElement>
+  );
+};
+
+const TableHeaderSection = styled.div`
+  ${({ xOverflow }) =>
+    xOverflow ? "width: auto; display: table;" : "display: flex;"}
+`;
+
+// last cell style for xOverflow only
+// - last column has width: 100% and max-width: 100%
+const ThTdStyles = css`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
+  font-family: Raleway, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  letter-spacing: 0.0071428571em;
+  margin: 0;
+  padding: ${({ noPadding }) => (noPadding ? "0px" : "10px")};
+
+  ${({ stickyCell, xOverflowBg }) =>
+    stickyCell &&
+    `
+    box-shadow: 4px 4px 6px -4px rgba(0, 0, 0, 0.4);
+    background: ${xOverflowBg ? xOverflowBg : "white"};
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  `}
+  ${({ stickyCellNext }) => stickyCellNext && `padding-left: 20px`};
+  width: 100px;
+  min-width: 100px;
+  ${({ enableFlex, size }) => enableFlex && `flex: ${size || 100}px`};
+  ${({ size }) =>
+    size &&
+    `
+    width: ${parseInt(size) ? `${size}px` : size};
+    min-width: ${parseInt(size) ? `${size}px` : size};
+    max-width: ${parseInt(size) ? `${size}px` : size};
+  `}
+  ${({ lastCell }) =>
+    lastCell &&
+    `
+    width: 100%;
+    min-width: 100px;
+    max-width: 100%;
+  `}
+  ${({ xOverflow }) => xOverflow && `word-wrap: break-word;`}
+`;
+
+const TableHeaderTh = styled.div`
+  ${ThTdStyles};
+  font-weight: 600;
+  text-align: left;
+  flex-direction: column;
+  justify-content: ${({ justifyStart }) =>
+    justifyStart ? "flex-start" : "center"};
+  align-items: flex-start;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.42);
+  ${({ checkbox }) =>
+    checkbox &&
+    `
+    margin: 0px;
+    padding: 0px 20px;
+  `}
+  .sort-icon {
+    transition: opacity 0.2s ease;
+    opacity: ${({ sortIconVisible }) => (sortIconVisible ? "1" : "0")};
+  }
+
+  &:hover {
+    .sort-icon {
+      opacity: ${({ sortIconVisible }) => (sortIconVisible ? "1" : "0.3")};
+    }
+  }
+`;
+
+const TableHeaderCell = ({ children, ...props }) => {
+  return (
+    <TableHeaderTh {...props} role="columnheader">
+      {children}
+    </TableHeaderTh>
+  );
+};
+
+const rowStyles = css`
+  display: flex;
+  height: auto;
+  min-height: 55px;
+  width: 100%;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.12);
+  border-width: ${({ isFooter, bordered }) =>
+    isFooter
+      ? "2px 1px 1px 1px"
+      : bordered
+      ? "0px 1px 1px 1px"
+      : "0px 0px 1px 0px"};
+  ${({ rowSpacing }) =>
+    rowSpacing &&
+    `
+  border: 1px solid #D8D9D9;
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin-top: ${Number.isInteger(rowSpacing) ? `${rowSpacing}px` : "10px"};
+`};
+`;
+
+const leftBorder = css`
+  div:not(:first-child) {
+    border-left: solid 1px rgba(0, 0, 0, 0.12);
+  }
+`;
+
+const HeaderRow = styled.div`
+  ${rowStyles};
+  ${({ bordered }) => bordered && leftBorder};
+  ${({ xOverflow }) => xOverflow && ` border: 0;`}
+`;
+
+const BodyRow = styled.div`
+  ${rowStyles};
+  ${({ bordered }) => bordered && leftBorder};
+  background-color: ${({ rowColor, selected, selectHighlight }) =>
+    rowColor || (selected && selectHighlight) || "unset"};
+  &:hover {
+    background-color: ${({
+      isFooter,
+      isEmpty,
+      rowColor,
+      selected,
+      selectHighlight,
+    }) =>
+      rowColor
+        ? rowColor
+        : selected && selectHighlight
+        ? selectHighlight
+        : isFooter || isEmpty
+        ? "unset"
+        : "rgba(0, 0, 0, 0.04)"};
+  }
+`;
+
+const Row = ({ children, header, ...props }) => {
+  if (!header) {
+    return (
+      <BodyRow {...props} role="row">
+        {children}
+      </BodyRow>
+    );
+  }
+  return (
+    <HeaderRow {...props} role="row">
+      {children}
+    </HeaderRow>
+  );
+};
+
+const TableBody = styled.div`
+  ${({ xOverflow }) =>
+    !xOverflow &&
+    `
+  display: flex;
+  flex-direction: column;
+  `}
+  ${({ xOverflow }) => xOverflow && `display: table;`}
+`;
+
+const CellElement = styled.div`
+  ${ThTdStyles};
+  border-bottom-color: rgba(0, 0, 0, 0.42);
+  border-bottom-color: ${({ rowSpacing }) =>
+    rowSpacing ? "transparent" : "rgba(0, 0, 0, 0.42)"};
+  text-align: ${({ isNumber }) => (isNumber ? "right" : "left")};
+  justify-content: ${({ isNumber }) => (isNumber ? "flex-end" : "flex-start")};
+  ${({ checkbox }) =>
+    checkbox &&
+    `
+    margin: 0px;
+    padding: 0px 20px;
+  `}
+  ${({ onClick }) => onClick && "cursor: pointer;"}
+`;
+
+const CellElementEllipsis = styled.div`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const Cell = ({ children, ellipsisOverflow, ...props }) => {
+  return (
+    <CellElement {...props} role="cell">
+      {ellipsisOverflow ? (
+        <CellElementEllipsis>{children}</CellElementEllipsis>
+      ) : (
+        children
+      )}
+    </CellElement>
+  );
+};
+
+const SortCell = styled(Cell)`
+  flex: 1;
+  flex-direction: column;
+  padding: 0px !important;
+  width: 25px;
+  height: unset;
+`;
+
+const DeleteConfirmButton = styled.button`
+  font-family: Raleway, sans-serif;
+  font-weight: 700;
+  color: ${({ confirm }) => (confirm ? "#d1462f" : "")};
+  border: none;
+  font-size: 0.8125rem;
+  background-color: transparent;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  outline: 0;
+`;
+
+const GreyButton = styled.button`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  border: 0;
+  padding: ${({ rowSpacing, action }) =>
+    rowSpacing && action ? "10px 5px" : "10px 4px"};
+  background: #f7f7f7;
+  border: 1px solid #c0c0c2;
+  ${({ rowSpacing, action }) =>
+    rowSpacing &&
+    action === "increment" &&
+    `
+    border-top-left-radius: 4px;
+    margin-left: -1px;
+    margin-top: -1px;
+    `};
+  ${({ rowSpacing, action }) =>
+    rowSpacing &&
+    action === "decrement" &&
+    `
+    border-bottom-left-radius: 4px;
+    margin-left: -1px;
+    margin-bottom: -1px;
+    `};
+  transition: 0.2s;
+  svg {
+    transform: ${({ action }) =>
+      action === "increment" ? "rotate(-90deg)" : "rotate(90deg)"};
+  }
+  svg > path {
+    stroke: #c0c0c2;
+    transition: 0.2s;
+  }
+  cursor: pointer;
+  &:hover,
+  &:focus,
+  &:active {
+    background: #e2e6ea;
+    svg > path {
+      stroke: #333;
+    }
+    outline: none;
+  }
+`;
+
+const AddComponentContainer = styled.div`
+  border: 1px solid #ebedf4;
+  border-radius: 5px;
+  background-color: #fafbff;
+  padding: 16px 20px;
+`;
+
+export {
+  AddComponentContainer,
+  Container,
+  SortDownIcon,
+  SortUpIcon,
+  ActionIcon,
+  Search,
+  TableHeaderCell,
+  TableHeaderSection,
+  TableBody,
+  Header,
+  Row,
+  ActionBar,
+  Cell,
+  SortCell,
+  StyledTable,
+  DeleteConfirmButton,
+  GreyButton,
+  ExpandIcon,
+  TableContent,
+  HeaderPrimaryContent,
+};

package/src/components/Table/index.ts

@@ -0,0 +1 @@
+export * from './Table';