@telus-uds/components-community.data-grid 0.1.0

package/lib/DataGridRow.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styledComponents } from '@telus-uds/components-web';
+import { ROW_TYPE } from './utility';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled,
+  css
+} = styledComponents;
+const StyledExpandedRow = styled.tr`
+  ${props => {
+  return css`
+      background-color: ${props.rowBackgroundColorOnHover};
+    `;
+}}
+  transition: 0.3s ease;
+`;
+const StyledRow = styled.tr`
+  ${props => {
+  if (props.isExpandedRowOpen) {
+    return css`
+        background-color: ${props.rowBackgroundColorOnHover};
+        cursor: pointer;
+      `;
+  }
+  return css`
+      cursor: ${props.hasExpandedContent ? `pointer` : `arrow`};
+      background-color: ${props.rowBackgroundColor};
+      padding: ${props.rowPadding}px;
+      &:hover {
+        background-color: ${props.rowBackgroundColorOnHover};
+      }
+    `;
+}}
+  transition: 0.3s ease;
+`;
+const DataGridRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    type,
+    rowId,
+    isExpandedRowOpen = false,
+    hasExpandedContent = false,
+    onClick
+  } = _ref;
+  const onClickHandler = () => {
+    onClick(rowId);
+  };
+  if (type === ROW_TYPE.HEADING) {
+    return /*#__PURE__*/_jsx("tr", {
+      ref: ref,
+      children: children
+    });
+  }
+  if (type === ROW_TYPE.EXPANDEDROW) {
+    return /*#__PURE__*/_jsx(StyledExpandedRow, {
+      ...tokens,
+      ref: ref,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(StyledRow, {
+    ...tokens,
+    isExpandedRowOpen: isExpandedRowOpen,
+    hasExpandedContent: hasExpandedContent,
+    onClick: hasExpandedContent ? onClickHandler : null,
+    ref: ref,
+    children: children
+  });
+});
+DataGridRow.displayName = 'DataGridRow';
+DataGridRow.propTypes = {
+  /**
+    Row type
+  */
+  type: PropTypes.oneOf(['heading', 'subHeading', 'expandedRow']),
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * data-id passed from the data to the row passed to the component
+   */
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Tokens passed to the component
+   */
+  tokens: PropTypes.object,
+  /**
+   * isExpandedRowOpen determines component's behavior to additonal available data
+   */
+  isExpandedRowOpen: PropTypes.bool,
+  /**
+   * hasExpandedContent determines component's behavior to additional available data
+   */
+  hasExpandedContent: PropTypes.bool,
+  /**
+   *  onClick is a function to open/close a row with expanded content
+   */
+  onClick: PropTypes.func
+};
+export default DataGridRow;

package/lib/DataGridTable.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styledComponents } from '@telus-uds/components-web';
+import { Scrollbar } from 'smooth-scrollbar-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  styled,
+  css
+} = styledComponents;
+const StyledWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  margin: 0px;
+  padding: 8px;
+  ${props => props.tokens.maxHeight && css`
+      max-height: ${props.tokens.maxHeight}px;
+    `}
+  box-sizing: border-box;
+  border: 0px solid #000000;
+  overflow-y: auto;
+`;
+const StyledTable = styled.table`
+  width: 100%;
+  border-spacing: 0;
+`;
+const WrappedScrollbar = styled(Scrollbar)`
+  width: 100%;
+`;
+const DataGridTable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    makeScrollBarAlwaysVisible,
+    testID
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledWrapper, {
+    tokens: tokens,
+    ref: ref,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(WrappedScrollbar, {
+      alwaysShowTracks: makeScrollBarAlwaysVisible,
+      children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(StyledTable, {
+          children: children
+        })
+      })
+    })
+  });
+});
+DataGridTable.displayName = 'DataGridTable';
+DataGridTable.propTypes = {
+  /**
+   * Accepts any React or HTML node
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Tokens passed to the component
+   */
+  tokens: PropTypes.object,
+  /**
+   * Set this to true to make scrollbar always visible when content is larger than the grid
+   */
+  makeScrollBarAlwaysVisible: PropTypes.bool,
+  /**
+  /**
+   * Use in tests if the datagrid test cases need to find the element with the id.
+   */
+  testID: PropTypes.string
+};
+export default DataGridTable;

package/lib/dictionary.js

@@ -0,0 +1,18 @@
+export default {
+  en: {
+    all: 'All',
+    hideRow: 'Hide Row',
+    expandRow: 'Expand Row',
+    sortAsc: 'Sort Ascending',
+    sortDesc: 'Sort Descending',
+    button: 'Button'
+  },
+  fr: {
+    all: 'Tout',
+    hideRow: 'Masquer la ligne',
+    expandRow: 'Développer la ligne',
+    sortAsc: 'Tri croissant',
+    sortDesc: 'Tri décroissant',
+    button: 'Bouton'
+  }
+};

package/lib/index.js

@@ -0,0 +1,12 @@
+import DataGrid from './DataGrid';
+import DataGridBody from './DataGridBody';
+import DataGridCell from './DataGridCell';
+import DataGridHead from './DataGridHead';
+import DataGridRow from './DataGridRow';
+import DataGridTable from './DataGridTable';
+DataGrid.Body = DataGridBody;
+DataGrid.Cell = DataGridCell;
+DataGrid.Head = DataGridHead;
+DataGrid.Row = DataGridRow;
+DataGrid.Table = DataGridTable;
+export default DataGrid;

package/lib/utility.js

@@ -0,0 +1,75 @@
+export const ROW_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  EXPANDEDROW: 'expandedRow'
+};
+export const CELL_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  EXPANDEDROWCELL: 'expandedRowCell'
+};
+export const SORT_DIRECTION = {
+  ASC: 'asc',
+  DESC: 'desc'
+};
+export const DATA_TYPE = {
+  STRING: 'string',
+  NUMBER: 'number'
+};
+const mappedData = array => {
+  return array.map(element => {
+    const eachRow = {
+      ...element,
+      isSelected: false
+    };
+    if (eachRow.expandedRowChildComponent) {
+      eachRow.hasExpandedRow = true;
+      eachRow.isExpandedRowOpen = element.expandedRowChildComponent.displayOnLoad;
+    }
+    return eachRow;
+  });
+};
+export const isAtLeastOneRowUnselected = array => {
+  return array.some(each => each.isSelected === false);
+};
+export const resetColumnsData = data => {
+  return data.map(element => ({
+    ...element,
+    currentSort: false,
+    sortDirection: SORT_DIRECTION.DESC
+  }));
+};
+export const resetRowData = function (data) {
+  let isGrouped = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (isGrouped) {
+    const result = {};
+    data.forEach(el => {
+      result[el.key] = {
+        ...el,
+        data: mappedData(el.data)
+      };
+    });
+    return result;
+  }
+  return mappedData(data);
+};
+export const toggleAllCheckBoxes = (array, headerCheckBoxState) => {
+  return array.map(element => {
+    return {
+      ...element,
+      isSelected: !headerCheckBoxState
+    };
+  });
+};
+export const toggleRowCheckbox = (array, rowId) => {
+  return array.map(el => ({
+    ...el,
+    isSelected: el.id === rowId ? !el.isSelected : el.isSelected
+  }));
+};
+export const toggleExpandedRow = (array, rowId) => {
+  return array.map(el => ({
+    ...el,
+    isExpandedRowOpen: el.id === rowId ? !el.isExpandedRowOpen : el.isExpandedRowOpen
+  }));
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "author": "TELUS Digital",
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "@telus-uds/components-web": "^3.2.1",
+    "@telus-uds/components-base": "^2.3.0",
+    "@telus-uds/system-theme-tokens": "^3.2.0",
+    "styled-components": "6.1.13",
+    "smooth-scrollbar": "8.8.4",
+    "smooth-scrollbar-react": "2.4.1"
+  },
+  "devDependencies": {
+    "@telus-uds/browserslist-config": "^1.0.4",
+    "babel-plugin-styled-components": "^2.0.6",
+    "jest-styled-components": "^7.0.8",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^13.3.0",
+    "jest-axe": "^6.0.0"
+  },
+  "homepage": "https://github.com/telus/universal-design-system#readme",
+  "license": "MIT",
+  "name": "@telus-uds/components-community.data-grid",
+  "peerDependencies": {
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
+  },
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telus/universal-design-system.git"
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "telus-standard",
+    "lint:fix": "telus-standard --fix",
+    "test": "jest",
+    "build": "babel src -d lib --env-name module"
+  },
+  "sideEffects": false,
+  "standard-engine": {
+    "skip": true
+  },
+  "version": "0.1.0"
+}