@redsift/design-system-legacy 8.0.1 → 8.0.2

package/src/components/Table/TableStyles.jsx

@@ -1,514 +0,0 @@
-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

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