[terra-outline-table-view] Creating base component and pass through p…

…rops. (#3657)

* initial base attempt and pass through test

* Fixing wdio test to not fail do to aria issues, and making note about aria labels in body data

* fixing linting issues

* Update packages/terra-outline-table-view/src/Table.jsx

Co-authored-by: Saad Adnan <38024451+sdadn@users.noreply.github.com>

* Update packages/terra-outline-table-view/tests/jest/Table.test.jsx

Co-authored-by: Saad Adnan <38024451+sdadn@users.noreply.github.com>

* adding changelog change to terra-core-docs

* fixing jest test

Co-authored-by: Saad Adnan <38024451+sdadn@users.noreply.github.com>
Co-authored-by: Ben Cai <benbcai@gmail.com>

packages/terra-core-docs/CHANGELOG.md

@@ -5,6 +5,9 @@
 * Added
   * Added new outline-table-view docs and tests folders
 
+* Changed
+  * terra-outline-table-view tests and doc for now initial implementation
+
 ## 1.14.1 - (July 14, 2022)
 
 * Changed

packages/terra-core-docs/src/terra-dev-site/doc/outline-table-view/example/DefaultTable.jsx

@@ -3,7 +3,46 @@ import OutlineTableView from 'terra-outline-table-view';
 
 const TableExample = () => (
   <OutlineTableView
-    summaryId="outline-table-view"
+    summaryId="default-table"
+    summary="This is a default table structure."
+    numberOfColumns={3}
+    headerData={{
+      cells: [
+        { id: 'header-name', key: 'name', children: 'Name' },
+        { id: 'header-address', key: 'address', children: 'Address' },
+        { id: 'header-phone_number', key: 'phone_number', children: 'Phone Number' },
+      ],
+    }}
+    bodyData={[
+      {
+        rows: [
+          {
+            key: 'row-0',
+            cells: [
+              { key: 'cell-0', children: 'John Smith' },
+              { key: 'cell-1', children: '123 Adams Drive' },
+              { key: 'cell-2', children: '111-222-3333' },
+            ],
+          },
+          {
+            key: 'row-1',
+            cells: [
+              { key: 'cell-0', children: 'Jane Smith' },
+              { key: 'cell-1', children: '321 Drive Street' },
+              { key: 'cell-2', children: '111-222-3333' },
+            ],
+          },
+          {
+            key: 'row-2',
+            cells: [
+              { key: 'cell-0', children: 'Dave Smith' },
+              { key: 'cell-1', children: '213 Raymond Road' },
+              { key: 'cell-2', children: '111-222-3333' },
+            ],
+          },
+        ],
+      },
+    ]}
   />
 );
 

packages/terra-core-docs/src/terra-dev-site/test/outline-table-view/OutlineTableView.test.jsx

@@ -3,7 +3,52 @@ import OutlineTableView from 'terra-outline-table-view';
 
 const DefaultTest = () => (
   <OutlineTableView
-    summaryId="outline-table-view"
+    aria-multiselectable
+    bodyData={[
+      {
+        rows: [
+          {
+            key: 'row-0',
+            cells: [
+              { key: 'cell-0', children: 'John Smith' },
+              { key: 'cell-1', children: '123 Adams Drive' },
+              { key: 'cell-2', children: '111-222-3333' },
+            ],
+            toggleAction: {
+              metaData: { key: 0 },
+              toggleLabel: 'John Smith',
+            },
+          },
+          {
+            key: 'row-1',
+            cells: [
+              { key: 'cell-0', children: 'Jane Smith' },
+              { key: 'cell-1', children: '321 Drive Street' },
+              { key: 'cell-2', children: '111-222-3333' },
+            ],
+            toggleAction: {
+              metaData: { key: 1 },
+              toggleLabel: 'Jane Smith',
+            },
+          },
+        ],
+      },
+    ]}
+    fill
+    headerData={{
+      selectAllColumn: {
+        checkLabel: 'Multi Selection',
+      },
+      cells: [
+        { id: 'header-name', key: 'name', children: 'Name' },
+        { id: 'header-address', key: 'address', children: 'Address' },
+        { id: 'header-phone_number', key: 'phone_number', children: 'Phone Number' },
+      ],
+    }}
+    numberOfColumns={3}
+    numberOfRows={2}
+    summary="This is a default table structure"
+    summaryId="test-id"
   />
 );
 

packages/terra-outline-table-view/CHANGELOG.md

@@ -2,4 +2,8 @@
 
 ## Unreleased
 
+
+* Added
+  * Remove before release: Set base component props for pass through with a couple exceptions
+
 Initial stable release

packages/terra-outline-table-view/package.json

@@ -34,7 +34,8 @@
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
     "terra-content-container": "^3.36.1",
-    "terra-mixins": "^1.40.0"
+    "terra-mixins": "^1.40.0",
+    "terra-table": "^4.32.0"
   },
   "scripts": {
     "compile": "babel --root-mode upward src --out-dir lib --copy-files",

packages/terra-outline-table-view/src/Table.jsx

@@ -2,11 +2,58 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import classNamesBind from 'classnames/bind';
+import Table from 'terra-table';
+
+import sectionShape from './proptypes/sectionShape';
+import headerShape from './proptypes/headerShape';
+import widthShape from './proptypes/widthShape';
 import styles from './Table.module.scss';
 
 const cx = classNamesBind.bind(styles);
 
 const propTypes = {
+  /**
+   * An array of sections containing rows.
+   * TODO: Not final shape as row headers and parent/children  heirarchies are still needed to be addressed. NOTE: make sure bodyData rows have toggleAction with a toggleLabel, otherwise tests fail aria.
+   */
+  bodyData: PropTypes.arrayOf(sectionShape),
+  /**
+   * The width value structures associated to each column.
+   */
+  columnWidths: PropTypes.arrayOf(widthShape),
+  /**
+   * The data to build header cells and columns.
+   */
+  headerData: headerShape,
+  /**
+   * Whether or not the table should expanded to fill its parent element.
+   */
+  fill: PropTypes.bool,
+  /**
+   * Element to append to the bottom of the table. i.e. toolbars etc.
+   */
+  footerNode: PropTypes.node,
+  /**
+   * The numberOfColumns to be used as a descriptor for assistive technology.
+   */
+  numberOfColumns: PropTypes.number.isRequired,
+  /**
+   * This value is used for accessibility when paged/virtualized rows are used.
+   * By default this value is derived from the number of rows passed within the section.
+   */
+  numberOfRows: PropTypes.number,
+  /**
+   * Function callback returning the html node of the table's inner body element.
+   */
+  scrollRefCallback: PropTypes.func,
+  /**
+   * Whether or not a display only footer should be affixed to the table.
+   */
+  showSimpleFooter: PropTypes.bool,
+  /**
+   * The summary text to describe the table's content and interactions.
+   */
+  summary: PropTypes.string.isRequired,
   /**
    * The element id to associate to the descriptive text.
    */
@@ -17,6 +64,17 @@ const defaultProps = {
 };
 
 const OutlineTableView = ({
+  bodyData,
+  columnWidths,
+  fill,
+  footerNode,
+  headerData,
+  numberOfColumns,
+  numberOfRows,
+  scrollRefCallback,
+  showSimpleFooter,
+  summary,
+  summaryId,
   ...customProps
 }) => {
   const tableClasses = classNames(
@@ -27,11 +85,24 @@ const OutlineTableView = ({
   );
 
   return (
-    <div
+    <Table
+      bodyData={bodyData}
+      cellPaddingStyle="standard"
+      checkStyle="toggle"
       className={tableClasses}
-    >
-      Hello World
-    </div>
+      columnWidths={columnWidths}
+      dividerStyle="both"
+      fill={fill}
+      footerNode={footerNode}
+      headerData={headerData}
+      numberOfColumns={numberOfColumns}
+      numberOfRows={numberOfRows}
+      rowStyle="toggle"
+      scrollRefCallback={scrollRefCallback}
+      showSimpleFooter={showSimpleFooter}
+      summary={summary}
+      summaryId={summaryId}
+    />
   );
 };
 

packages/terra-outline-table-view/src/proptypes/cellShape.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+
+const cellShape = PropTypes.shape({
+  /**
+   * The react key to apply to the cell.
+   */
+  key: PropTypes.string.isRequired,
+  /**
+   * Child content to be displayed for the row cell.
+   */
+  children: PropTypes.node,
+  /**
+   * Function callback returning the html node for the cell.
+   */
+  refCallback: PropTypes.func,
+  /**
+   * Whether or not the cell's inner containing element responsible for handling table's default padding is removed.
+   * This is useful to optimize the DOM for either a table without padding or to optimize a cell whose custom content is providing its own padding.
+   */
+  removeInner: PropTypes.bool,
+  /**
+   * Additional attributes to be passed to the cell.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  attrs: PropTypes.object,
+});
+
+export default cellShape;

packages/terra-outline-table-view/src/proptypes/discloseShape.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+
+const discloseShape = PropTypes.shape({
+  /**
+   * The index of the cell that provides the accessible link entry point for disclosure style rows.
+   */
+  discloseCellIndex: PropTypes.number.isRequired,
+  /**
+   * The label associated to the row action. Should be set if `'rowStyle'` is set to `'disclose'` or `'toggle'`.
+   */
+  discloseLabel: PropTypes.string,
+  /**
+   * Whether or not the row is the currently selected disclosure.
+   * This aria state relates to the primary link cell.
+   */
+  isDisclosed: PropTypes.bool,
+  /**
+   * The associated metaData to be return within row disclose callbacks.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  metaData: PropTypes.object,
+  /**
+   * Function callback for when the appropriate click or key action is performed.
+   * Callback contains the javascript event and prop metadata, e.g. onRowAction(event, metaData)
+   */
+  onDisclose: PropTypes.func,
+});
+
+export default discloseShape;

packages/terra-outline-table-view/src/proptypes/headerCellShape.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+
+const headerCellShape = PropTypes.shape({
+  /**
+   * The id of the header cell for the row cells to set within their "headers" prop.
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * The react key to apply to the cell.
+   */
+  key: PropTypes.string.isRequired,
+  /**
+   * Content to be displayed for the column header.
+   */
+  children: PropTypes.node,
+  /**
+   * Whether or not the sort indicator is descending.
+   */
+  isSortDesc: PropTypes.bool,
+  /**
+   * Whether or not the column is to be marked as a sorted column.
+   */
+  isSortActive: PropTypes.bool,
+  /**
+   * The associated metaData to be provided in the onCellAction and onSortAction callbacks.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  metaData: PropTypes.object,
+  /**
+   * Function callback for when the appropriate click or key action is performed.
+   * Callback contains the javascript event and prop metadata, e.g. onCellAction(event, metaData)
+   * The presence of this func will indicate that the cell can be interacted with for actions or selections.
+   */
+  onCellAction: PropTypes.func,
+  /**
+   * Function callback for when the appropriate click or key action is performed.
+   * Callback contains the javascript event and prop metadata, e.g. onSortAction(event, metaData)
+   * The presence of this func will indicate that the cell can be interacted with for sorting.
+   */
+  onSortAction: PropTypes.func,
+  /**
+   * Function callback returning the html node for the header cell.
+   */
+  refCallback: PropTypes.func,
+  /**
+   * Whether or not the cell's inner containing element responsible for handling table's default padding is removed.
+   * This is useful to optimize the DOM for either a table without padding or to optimize a cell whose custom content is providing its own padding.
+   */
+  removeInner: PropTypes.bool,
+  /**
+   * Additional attributes to be passed to the cell.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  attrs: PropTypes.object,
+});
+
+export default headerCellShape;

packages/terra-outline-table-view/src/proptypes/headerShape.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import headerCellShape from './headerCellShape';
+import selectAllColumnShape from './selectAllColumnShape';
+
+const headerShape = PropTypes.shape({
+  /**
+   * The cells to be displayed within the header.
+   */
+  cells: PropTypes.arrayOf(headerCellShape),
+  /**
+   * Function callback returning the html node for the header.
+   */
+  refCallback: PropTypes.func,
+  /**
+   * The select all column header's properties.
+   */
+  selectAllColumn: selectAllColumnShape,
+});
+
+export default headerShape;