From 79c909cc7e8fb3a10836f6d750407f7f5e545b22 Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Thu, 18 Mar 2021 11:46:56 -0500
Subject: [PATCH] feat(StructureList): refactor class components, add aria
 table roles (#8084)

* fix(StructuredList): refactor es6 class components

* fix(StructuredList): add aria table roles

* fix(StructuredList): remove unused setLabel and rowSelection state

* test(StructuredList): update test checking for class instance
---
 .../StructuredList/StructuredList-test.js     |   2 +-
 .../StructuredList/StructuredList.js          | 584 +++++++++---------
 2 files changed, 286 insertions(+), 300 deletions(-)

diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/StructuredList-test.js
index 7e01b3779875..11f96fdb52cb 100644
--- a/packages/react/src/components/StructuredList/StructuredList-test.js
+++ b/packages/react/src/components/StructuredList/StructuredList-test.js
@@ -95,7 +95,7 @@ describe('StructuredListInput', () => {
     it('Should render unique id with multiple inputs when no id prop is given', () => {
       const wrapper1 = mount(<StructuredListInput className="extra-class" />);
       const wrapper2 = mount(<StructuredListInput className="extra-class" />);
-      expect(wrapper1.instance().uid).not.toEqual(wrapper2.instance().uid);
+      expect(wrapper1.find('[id]')).not.toEqual(wrapper2.find('[id]'));
     });
   });
 });
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index d303b4373851..ac665c0e376a 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
@@ -13,313 +13,299 @@ import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
+const getInstanceId = setupGetInstanceId();
 
-export class StructuredListWrapper extends Component {
-  static propTypes = {
-    /**
-     * Specify a label to be read by screen readers on the container node
-     */
-    ariaLabel: PropTypes.string,
-
-    /**
-     * Specify whether a border should be added to your StructuredListWrapper
-     */
-    border: deprecate(
-      PropTypes.bool,
-      `\nThe prop \`border\` will be removed in the next major version of Carbon.`
-    ),
-
-    /**
-     * Provide the contents of your StructuredListWrapper
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether your StructuredListWrapper should have selections
-     */
-    selection: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    selection: false,
-    ariaLabel: 'Structured list section',
-  };
-
-  render() {
-    const {
-      children,
-      selection,
-      className,
-      ariaLabel,
-      border: _border,
-      ...other
-    } = this.props;
-
-    const classes = classNames(`${prefix}--structured-list`, className, {
-      [`${prefix}--structured-list--selection`]: selection,
-    });
-
-    return (
-      <div className={classes} {...other} aria-label={ariaLabel}>
-        {children}
-      </div>
-    );
-  }
+export function StructuredListWrapper(props) {
+  const {
+    children,
+    selection,
+    className,
+    ariaLabel,
+    border: _border,
+    ...other
+  } = props;
+  const classes = classNames(`${prefix}--structured-list`, className, {
+    [`${prefix}--structured-list--selection`]: selection,
+  });
+
+  return (
+    <div role="table" className={classes} {...other} aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
 }
 
-export class StructuredListHead extends Component {
-  static propTypes = {
-    /**
-     * Provide the contents of your StructuredListHead
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the node
-     */
-    className: PropTypes.string,
-  };
-
-  render() {
-    const { children, className, ...other } = this.props;
-
-    const classes = classNames(`${prefix}--structured-list-thead`, className);
-    return (
-      <div className={classes} {...other}>
-        {children}
-      </div>
-    );
-  }
+StructuredListWrapper.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * Specify whether a border should be added to your StructuredListWrapper
+   */
+  border: deprecate(
+    PropTypes.bool,
+    `\nThe prop \`border\` will be removed in the next major version of Carbon.`
+  ),
+
+  /**
+   * Provide the contents of your StructuredListWrapper
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether your StructuredListWrapper should have selections
+   */
+  selection: PropTypes.bool,
+};
+
+StructuredListWrapper.defaultProps = {
+  selection: false,
+  ariaLabel: 'Structured list section',
+};
+
+export function StructuredListHead(props) {
+  const { children, className, ...other } = props;
+  const classes = classNames(`${prefix}--structured-list-thead`, className);
+
+  return (
+    <div role="rowgroup" className={classes} {...other}>
+      {children}
+    </div>
+  );
 }
 
-const getInstanceId = setupGetInstanceId();
-
-export class StructuredListInput extends Component {
-  static propTypes = {
-    /**
-     * Specify an optional className to be applied to the input
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether the underlying input should be checked by default
-     */
-    defaultChecked: PropTypes.bool,
-
-    /**
-     * Specify a custom `id` for the input
-     */
-    id: PropTypes.string,
-
-    /**
-     * Provide a `name` for the input
-     */
-    name: PropTypes.string,
-
-    /**
-     * Provide an optional hook that is called each time the input is updated
-     */
-    onChange: PropTypes.func,
-
-    /**
-     * Provide a `title` for the input
-     */
-    title: PropTypes.string,
-
-    /**
-     * Specify the value of the input
-     */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  };
-
-  static defaultProps = {
-    onChange: () => {},
-    value: 'value',
-    title: 'title',
-  };
-
-  constructor(props) {
-    super(props);
-    this.uid = this.props.id || getInstanceId();
-  }
-
-  render() {
-    const { className, value, name, title, ...other } = this.props;
-    const classes = classNames(`${prefix}--structured-list-input`, className);
-    return (
-      <input
-        {...other}
-        type="radio"
-        tabIndex={-1}
-        id={this.uid}
-        className={classes}
-        value={value}
-        name={name}
-        title={title}
-      />
-    );
-  }
+StructuredListHead.propTypes = {
+  /**
+   * Provide the contents of your StructuredListHead
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the node
+   */
+  className: PropTypes.string,
+};
+
+export function StructuredListBody(props) {
+  const { children, className, ...other } = props;
+  const classes = classNames(`${prefix}--structured-list-tbody`, className);
+
+  return (
+    <div className={classes} role="rowgroup" {...other}>
+      {children}
+    </div>
+  );
 }
 
-export class StructuredListRow extends Component {
-  static propTypes = {
-    /**
-     * Provide the contents of your StructuredListRow
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether your StructuredListRow should be used as a header row
-     */
-    head: PropTypes.bool,
-
-    /**
-     * Specify whether a `<label>` should be used
-     */
-    label: PropTypes.bool,
-
-    /**
-     * Provide a handler that is invoked on the key down event for the control,
-     * if `<label>` is in use
-     */
-    onKeyDown: PropTypes.func,
-
-    /**
-     * Specify the tab index of the container node, if `<label>` is in use
-     */
-    tabIndex: PropTypes.number,
-  };
-
-  static defaultProps = {
-    head: false,
-    label: false,
-    tabIndex: 0,
-    onKeyDown: () => {},
-  };
-
-  render() {
-    const {
-      onKeyDown,
-      tabIndex,
-      children,
-      className,
-      head,
-      label,
-      ...other
-    } = this.props;
-
-    const classes = classNames(`${prefix}--structured-list-row`, className, {
-      [`${prefix}--structured-list-row--header-row`]: head,
-    });
-
-    return label ? (
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      <label
-        {...other}
-        tabIndex={tabIndex}
-        className={classes}
-        onKeyDown={onKeyDown}>
-        {children}
-      </label>
-    ) : (
-      <div {...other} className={classes}>
-        {children}
-      </div>
-    );
-  }
+StructuredListBody.propTypes = {
+  /**
+   * Provide the contents of your StructuredListBody
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  head: PropTypes.bool,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes.func,
+};
+
+StructuredListBody.defaultProps = {
+  onKeyDown: () => {},
+};
+
+export function StructuredListRow(props) {
+  const {
+    onKeyDown,
+    tabIndex,
+    children,
+    className,
+    head,
+    label,
+    ...other
+  } = props;
+  const classes = classNames(`${prefix}--structured-list-row`, className, {
+    [`${prefix}--structured-list-row--header-row`]: head,
+  });
+
+  return label ? (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    <label
+      {...other}
+      tabIndex={tabIndex}
+      className={classes}
+      onKeyDown={onKeyDown}>
+      {children}
+    </label>
+  ) : (
+    <div {...other} className={classes}>
+      {children}
+    </div>
+  );
 }
 
-export class StructuredListBody extends Component {
-  static propTypes = {
-    /**
-     * Provide the contents of your StructuredListBody
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    head: PropTypes.bool,
-
-    /**
-     * Provide a handler that is invoked on the key down event for the control
-     */
-    onKeyDown: PropTypes.func,
-  };
-
-  static defaultProps = {
-    onKeyDown: () => {},
-  };
-
-  state = {
-    labelRows: null,
-    rowSelected: 0,
-  };
-
-  render() {
-    const { children, className, ...other } = this.props;
-    const classes = classNames(`${prefix}--structured-list-tbody`, className);
-    return (
-      <div className={classes} {...other}>
-        {children}
-      </div>
-    );
-  }
+StructuredListRow.propTypes = {
+  /**
+   * Provide the contents of your StructuredListRow
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether your StructuredListRow should be used as a header row
+   */
+  head: PropTypes.bool,
+
+  /**
+   * Specify whether a `<label>` should be used
+   */
+  label: PropTypes.bool,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control,
+   * if `<label>` is in use
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Specify the tab index of the container node, if `<label>` is in use
+   */
+  tabIndex: PropTypes.number,
+};
+
+StructuredListRow.defaultProps = {
+  head: false,
+  label: false,
+  tabIndex: 0,
+  onKeyDown: () => {},
+};
+
+export function StructuredListInput(props) {
+  const { className, value, name, title, id, ...other } = props;
+  const classes = classNames(`${prefix}--structured-list-input`, className);
+  const instanceId = id || getInstanceId();
+
+  return (
+    <input
+      {...other}
+      type="radio"
+      tabIndex={-1}
+      id={instanceId}
+      className={classes}
+      value={value}
+      name={name}
+      title={title}
+    />
+  );
 }
 
-export class StructuredListCell extends Component {
-  static propTypes = {
-    /**
-     * Provide the contents of your StructuredListCell
-     */
-    children: PropTypes.node,
-
-    /**
-     * Specify an optional className to be applied to the container node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify whether your StructuredListCell should be used as a header cell
-     */
-    head: PropTypes.bool,
-
-    /**
-     * Specify whether your StructuredListCell should have text wrapping
-     */
-    noWrap: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    head: false,
-    noWrap: false,
-  };
-
-  render() {
-    const { children, className, head, noWrap, ...other } = this.props;
-
-    const classes = classNames(className, {
-      [`${prefix}--structured-list-th`]: head,
-      [`${prefix}--structured-list-td`]: !head,
-      [`${prefix}--structured-list-content--nowrap`]: noWrap,
-    });
-
-    return (
-      <div className={classes} {...other}>
-        {children}
-      </div>
-    );
-  }
+StructuredListInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the input
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the underlying input should be checked by default
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide a `name` for the input
+   */
+  name: PropTypes.string,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide a `title` for the input
+   */
+  title: PropTypes.string,
+
+  /**
+   * Specify the value of the input
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+StructuredListInput.defaultProps = {
+  onChange: () => {},
+  value: 'value',
+  title: 'title',
+};
+
+export function StructuredListCell(props) {
+  const { children, className, head, noWrap, ...other } = props;
+  const classes = classNames(className, {
+    [`${prefix}--structured-list-th`]: head,
+    [`${prefix}--structured-list-td`]: !head,
+    [`${prefix}--structured-list-content--nowrap`]: noWrap,
+  });
+
+  return (
+    <div className={classes} role={head ? 'columnheader' : 'cell'} {...other}>
+      {children}
+    </div>
+  );
 }
+
+StructuredListCell.propTypes = {
+  /**
+   * Provide the contents of your StructuredListCell
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether your StructuredListCell should be used as a header cell
+   */
+  head: PropTypes.bool,
+
+  /**
+   * Specify whether your StructuredListCell should have text wrapping
+   */
+  noWrap: PropTypes.bool,
+};
+
+StructuredListCell.defaultProps = {
+  head: false,
+  noWrap: false,
+};
+
+export default {
+  StructuredListWrapper,
+  StructuredListHead,
+  StructuredListBody,
+  StructuredListRow,
+  StructuredListInput,
+  StructuredListCell,
+};