fix: exporting description list child components (carbon-design-syste…

…m#4599)

packages/ibm-products/src/components/DescriptionList/DescriptionList.js

@@ -15,19 +15,11 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg /*, carbon */ } from '../../settings';
 import { DescriptionListSize } from './constants';
 // Carbon and package components we use.
-import {
-  StructuredListBody,
-  StructuredListCell,
-  StructuredListRow,
-  StructuredListWrapper,
-} from '@carbon/react';
+import { StructuredListWrapper } from '@carbon/react';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--description-list`;
 const componentName = 'DescriptionList';
-const componentNameBody = 'DescriptionListBody';
-const componentNameRow = 'DescriptionListRow';
-const componentNameCell = 'DescriptionListCell';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -49,7 +41,7 @@ const defaults = {
 /**
  * Type layouts provide an orderly layout of terms and definitions.
  */
-let DescriptionList = React.forwardRef(
+export let DescriptionList = React.forwardRef(
   (
     {
       // The component props, in alphabetical order (for consistency).
@@ -95,76 +87,16 @@ DescriptionList = pkg.checkComponentEnabled(DescriptionList, componentName);
 // is used in preference to relying on function.name.
 DescriptionList.displayName = componentName;
 
-const propTypes = {
-  /** Provide the contents of the node */
-  children: PropTypes.node,
-
-  /** Provide an optional class to be applied to the containing node */
-  className: PropTypes.string,
-};
-
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 DescriptionList.propTypes = {
-  ...propTypes,
-
   /** Specify if the type layout has a border */
   border: PropTypes.bool,
-
+  /** Provide the contents of the node */
+  children: PropTypes.node,
+  /** Provide an optional class to be applied to the containing node */
+  className: PropTypes.string,
   /** Specify the size of the type layout, from a list of available sizes */
   size: PropTypes.oneOf(Object.values(DescriptionListSize)),
 };
-
-let DescriptionListBody = ({ children, className, ...rest }) => (
-  <StructuredListBody
-    className={cx(`${blockClass}__body`, className)}
-    {...rest}
-  >
-    {children}
-  </StructuredListBody>
-);
-
-DescriptionListBody.propTypes = {
-  ...propTypes,
-};
-DescriptionListBody.displayName = componentNameBody;
-
-let DescriptionListRow = ({ children, className, ...other }) => (
-  <StructuredListRow
-    className={cx(`${blockClass}__row`, className)}
-    role="row"
-    {...other}
-  >
-    {children}
-  </StructuredListRow>
-);
-
-DescriptionListRow.propTypes = {
-  ...propTypes,
-};
-
-DescriptionListRow.displayName = componentNameRow;
-
-let DescriptionListCell = ({ children, className, ...rest }) => (
-  <StructuredListCell
-    className={cx(`${blockClass}__cell`, className)}
-    tabIndex="-1"
-    {...rest}
-  >
-    {children}
-  </StructuredListCell>
-);
-
-DescriptionListCell.propTypes = {
-  ...propTypes,
-};
-
-DescriptionListCell.displayName = componentNameCell;
-
-export {
-  DescriptionList,
-  DescriptionListBody,
-  DescriptionListRow,
-  DescriptionListCell,
-};

packages/ibm-products/src/components/DescriptionList/DescriptionListBody.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+// Carbon and package components we use.
+import { StructuredListBody } from '@carbon/react';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--description-list__body`;
+const componentName = 'DescriptionListBody';
+
+export let DescriptionListBody = React.forwardRef(
+  ({ children /* TODO: remove if not needed. */, className, ...rest }, ref) => {
+    return (
+      <StructuredListBody
+        className={cx(blockClass, className)}
+        ref={ref}
+        {...getDevtoolsProps(componentName)}
+        {...rest}
+      >
+        {children}
+      </StructuredListBody>
+    );
+  }
+);
+
+DescriptionListBody.propTypes = {
+  /** Provide the contents of the node */
+  children: PropTypes.node,
+  /** Provide an optional class to be applied to the containing node */
+  className: PropTypes.string,
+};
+DescriptionListBody = pkg.checkComponentEnabled(
+  DescriptionListBody,
+  componentName
+);
+DescriptionListBody.displayName = componentName;

packages/ibm-products/src/components/DescriptionList/DescriptionListCell.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+// Carbon and package components we use.
+import { StructuredListCell } from '@carbon/react';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--description-list__cell`;
+const componentName = 'DescriptionListCell';
+
+export let DescriptionListCell = React.forwardRef(
+  ({ children /* TODO: remove if not needed. */, className, ...rest }, ref) => {
+    return (
+      <StructuredListCell
+        className={cx(blockClass, className)}
+        ref={ref}
+        {...getDevtoolsProps(componentName)}
+        {...rest}
+      >
+        {children}
+      </StructuredListCell>
+    );
+  }
+);
+
+DescriptionListCell.propTypes = {
+  /** Provide the contents of the node */
+  children: PropTypes.node,
+  /** Provide an optional class to be applied to the containing node */
+  className: PropTypes.string,
+};
+DescriptionListCell = pkg.checkComponentEnabled(
+  DescriptionListCell,
+  componentName
+);
+DescriptionListCell.displayName = componentName;

packages/ibm-products/src/components/DescriptionList/DescriptionListRow.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+// Carbon and package components we use.
+import { StructuredListRow } from '@carbon/react';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${pkg.prefix}--description-list__row`;
+const componentName = 'DescriptionListRow';
+
+export let DescriptionListRow = React.forwardRef(
+  ({ children /* TODO: remove if not needed. */, className, ...rest }, ref) => {
+    return (
+      <StructuredListRow
+        className={cx(blockClass, className)}
+        // role="row"
+        ref={ref}
+        {...getDevtoolsProps(componentName)}
+        {...rest}
+      >
+        {children}
+      </StructuredListRow>
+    );
+  }
+);
+
+DescriptionListRow.propTypes = {
+  /** Provide the contents of the node */
+  children: PropTypes.node,
+  /** Provide an optional class to be applied to the containing node */
+  className: PropTypes.string,
+};
+DescriptionListRow = pkg.checkComponentEnabled(
+  DescriptionListRow,
+  componentName
+);
+DescriptionListRow.displayName = componentName;

packages/ibm-products/src/components/DescriptionList/index.js

@@ -5,9 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export {
-  DescriptionList,
-  DescriptionListBody,
-  DescriptionListRow,
-  DescriptionListCell,
-} from './DescriptionList';
+export { DescriptionList } from './DescriptionList';
+export { DescriptionListBody } from './DescriptionListBody';
+export { DescriptionListCell } from './DescriptionListCell';
+export { DescriptionListRow } from './DescriptionListRow';

packages/ibm-products/src/components/index.js

@@ -108,7 +108,12 @@ export { Decorator } from './Decorator';
 export { DecoratorLink } from './DecoratorLink';
 export { DecoratorSingleButton } from './DecoratorSingleButton';
 export { DecoratorDualButton } from './DecoratorDualButton';
-export { DescriptionList } from './DescriptionList';
+export {
+  DescriptionList,
+  DescriptionListBody,
+  DescriptionListCell,
+  DescriptionListRow,
+} from './DescriptionList';
 export { FullPageError } from './FullPageError';
 export { SearchBar } from './SearchBar';
 export { Nav } from './Nav';

packages/ibm-products/src/global/js/package-settings.js

@@ -95,6 +95,9 @@ const defaults = {
     DecoratorSingleButton: false,
     DecoratorDualButton: false,
     DescriptionList: false,
+    DescriptionListBody: false,
+    DescriptionListCell: false,
+    DescriptionListRow: false,
     SearchBar: false,
     UserAvatar: false,