@telus-uds/components-community.data-grid 0.1.2 → 1.0.1

package/lib/DataGridCell.js

@@ -1,184 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styledComponents } from '@telus-uds/components-web';
-import { CELL_TYPE } from './utility';
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled,
-  css
-} = styledComponents;
-const StyledHeaderCell = styled.th`
-  ${props => {
-  return css`
-      background-color: ${props.headerRowBackgroundColor};
-      border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
-      border-bottom: solid ${props.headerBorderBottomWidth}px ${props.headerBorderBottomColor};
-      padding: ${props.headerPadding}px;
-      text-align: ${props.headerTextAlign};
-      box-sizing: border-box;
-      font-size: ${props.headerFontSize}px;
-      font-weight: bold;
-      line-height: ${props.headerLineHeight * props.headerFontSize}px;
-      color: ${props.headerTextColor};
-      width: ${props.firstColWidth};
-      font-family: ${props.headerFontFamily};
-    `;
-}}
-`;
-const StyledHeaderCellDiv = styled.div`
-  display: flex;
-  align-items: center;
-`;
-const StyledGroupHeaderCell = styled.td`
-  ${props => {
-  return css`
-      background-color: ${props.subHeadingBackgroundColor};
-      padding: ${props.cellPadding}px;
-      border-top: solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};
-      text-align: ${props.cellTextAlign};
-      font-size: ${props.cellFontSize}px;
-      font-weight: normal;
-      line-height: ${props.cellLineHeight * props.cellFontSize}px;
-      color: ${props.cellTextColor};
-      font-family: ${props.cellFontFamily};
-    `;
-}}
-`;
-const StyledGroupHeaderCellDiv = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: start;
-`;
-const StyledExpandedCell = styled.td`
-  ${props => {
-  return css`
-      padding: ${props.cellPadding}px;
-      border-bottom: ${props.isExpandedRowOpen ? `solid ${props.cellBorderBottomWidth}px ${props.headerBorderBottomColor};` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor};`}
-      text-align: ${props.cellTextAlign};
-      font-size: ${props.cellFontSize}px;
-      font-weight: normal;
-      line-height: ${props.cellLineHeight * props.cellFontSize}px;
-      color: ${props.cellTextColor};
-      font-family: ${props.cellFontFamily};
-    `;
-}}
-`;
-const StyledExpandedCellDiv = styled.div`
-  ${props => {
-  return css`
-      display: flex;
-      align-items: center;
-      justify-content: ${props.expandedContentAlignment ? props.expandedContentAlignment : 'start'};
-      padding-left: ${props.showCheckbox ? `${props.expandedContentLeftPadding}px` : `${props.expandedContentDefaultLeftPadding}px`};
-    `;
-}}
-`;
-export const StyledCell = styled.td`
-  ${props => {
-  if (props.isExpandedRowOpen) {
-    return css`
-        padding: ${props.cellPadding}px;
-        text-align: ${props.cellTextAlign};
-        font-size: ${props.cellFontSize}px;
-        font-weight: normal;
-        line-height: ${props.cellLineHeight * props.cellFontSize}px;
-        color: ${props.cellTextColor};
-        font-family: ${props.cellFontFamily};
-        border-top: solid ${props.headerBorderTopWidth}px ${props.headerBorderTopColor};
-      `;
-  }
-  return css`
-      padding: ${props.cellPadding}px;
-      border-bottom: ${props.hideRowBottomBorder === 1 ? `none` : `solid ${props.cellBorderBottomWidth}px ${props.cellBorderBottomColor}`};
-      text-align: ${props.cellTextAlign};
-      font-size: ${props.cellFontSize}px;
-      font-weight: normal;
-      line-height: ${props.cellLineHeight * props.cellFontSize}px;
-      color: ${props.cellTextColor};
-      font-family: ${props.cellFontFamily};
-    `;
-}}
-`;
-const DataGridCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    tokens,
-    type,
-    columnsLength,
-    showCheckbox = false,
-    isFirstCol = false,
-    isExpandedRowOpen = false
-  } = _ref;
-  if (type === CELL_TYPE.HEADING) {
-    return /*#__PURE__*/_jsx(StyledHeaderCell, {
-      ...tokens,
-      firstColWidth: isFirstCol ? tokens.firstColWidth : 'auto',
-      ref: ref,
-      children: /*#__PURE__*/_jsx(StyledHeaderCellDiv, {
-        children: children
-      })
-    });
-  }
-  if (type === CELL_TYPE.SUBHEADING) {
-    return /*#__PURE__*/_jsx(StyledGroupHeaderCell, {
-      colSpan: columnsLength + 1,
-      ...tokens,
-      ref: ref,
-      children: /*#__PURE__*/_jsx(StyledGroupHeaderCellDiv, {
-        ...tokens,
-        children: children
-      })
-    });
-  }
-  if (type === CELL_TYPE.EXPANDEDROWCELL) {
-    return /*#__PURE__*/_jsx(StyledExpandedCell, {
-      colSpan: columnsLength + 1,
-      ...tokens,
-      isExpandedRowOpen: isExpandedRowOpen,
-      ref: ref,
-      children: /*#__PURE__*/_jsx(StyledExpandedCellDiv, {
-        showCheckbox: showCheckbox,
-        ...tokens,
-        children: children
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(StyledCell, {
-    ...tokens,
-    isExpandedRowOpen: isExpandedRowOpen,
-    ref: ref,
-    children: children
-  });
-});
-DataGridCell.displayName = 'DataGridCell';
-DataGridCell.propTypes = {
-  /**
-    cell type
-  */
-  type: PropTypes.oneOf(['heading', 'subHeading', 'expandedRowCell']),
-  /**
-   * Accepts any React or HTML node
-   */
-  children: PropTypes.node,
-  /**
-   * Tokens passed to the component
-   */
-  tokens: PropTypes.object,
-  /**
-   * columnsLength passed to the component for certain scenarios in which colSpan is required
-   */
-  columnsLength: PropTypes.number,
-  /**
-   * showCheckbox passed to the component for certain scenarios in which checkbox visibility impacts the display design
-   */
-  showCheckbox: PropTypes.bool,
-  /**
-   * isFirstCol passed to the component to determine if cell is first within the row
-   */
-  isFirstCol: PropTypes.bool,
-  /**
-   * isExpandedRowOpen passed to the component to determine if cell is displaying additional data
-   */
-  isExpandedRowOpen: PropTypes.bool
-};
-export default DataGridCell;