feat(react): update wrapComponent to bring in usePrefix (#11575)

* feat(react): update wrapComponent to bring in usePrefix * test(react): add wrapComponent test Co-authored-by: D.A. Kahn <[email protected]>
carbon-design-system · Jun 9, 2022 · 22847c4 · 22847c4
1 parent 0f3ca75
commit 22847c4
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 7 deletions.
diff --git a/packages/react/src/components/DataTable/TableActionList.js b/packages/react/src/components/DataTable/TableActionList.js
@@ -10,7 +10,7 @@ import wrapComponent from '../../tools/wrapComponent';
 const TableActionList = wrapComponent({
   name: 'TableActionList',
   type: 'div',
-  className: `cds--action-list`,
+  className: (prefix) => `${prefix}--action-list`,
 });
 
 export default TableActionList;
diff --git a/packages/react/src/components/DataTable/TableToolbarContent.js b/packages/react/src/components/DataTable/TableToolbarContent.js
@@ -10,7 +10,7 @@ import wrapComponent from '../../tools/wrapComponent';
 const TableToolbarContent = wrapComponent({
   name: 'TableToolbarContent',
   type: 'div',
-  className: `cds--toolbar-content`,
+  className: (prefix) => `${prefix}--toolbar-content`,
 });
 
 export default TableToolbarContent;
diff --git a/packages/react/src/components/UIShell/HeaderGlobalBar.js b/packages/react/src/components/UIShell/HeaderGlobalBar.js
@@ -12,6 +12,6 @@ import wrapComponent from '../../tools/wrapComponent';
  */
 export default wrapComponent({
   name: 'HeaderGlobalBar',
-  className: `cds--header__global`,
+  className: (prefix) => `${prefix}--header__global`,
   type: 'div',
 });
diff --git a/packages/react/src/tools/__tests__/wrapComponent-test.js b/packages/react/src/tools/__tests__/wrapComponent-test.js
@@ -0,0 +1,58 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+import wrapComponent from '../wrapComponent';
+
+describe('wrapComponent', () => {
+  it('should render the outermost element as the given type', () => {
+    const WrappedComponent = wrapComponent({
+      name: 'WrappedComponent',
+      type: 'div',
+    });
+    const { container } = render(<WrappedComponent />);
+    expect(container.firstChild.tagName).toBe('DIV');
+  });
+
+  it('should set the `displayName` for a component', () => {
+    const WrappedComponent = wrapComponent({
+      name: 'WrappedComponent',
+      type: 'div',
+    });
+    expect(WrappedComponent.displayName).toBe('WrappedComponent');
+  });
+
+  it('should support static class names with `className`', () => {
+    const WrappedComponent = wrapComponent({
+      name: 'WrappedComponent',
+      type: 'div',
+      className: 'test',
+    });
+    const { container } = render(<WrappedComponent />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should support prefix class names with `className`', () => {
+    const WrappedComponent = wrapComponent({
+      name: 'WrappedComponent',
+      type: 'div',
+      className: (prefix) => `${prefix}--test`,
+    });
+    const { container } = render(<WrappedComponent />);
+    expect(container.firstChild).toHaveClass('cds--test');
+  });
+
+  it('should spread additional props on the outermost node', () => {
+    const WrappedComponent = wrapComponent({
+      name: 'WrappedComponent',
+      type: 'div',
+    });
+    const { container } = render(<WrappedComponent data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+  });
+});
diff --git a/packages/react/src/tools/wrapComponent.js b/packages/react/src/tools/wrapComponent.js
@@ -8,22 +8,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { usePrefix } from '../internal/usePrefix';
+
+const wrapComponent = ({ name, className: getClassName, type }) => {
+  function Component({ className: baseClassName, ...other }) {
+    const prefix = usePrefix();
+    const componentClass = cx(
+      typeof getClassName === 'function' ? getClassName(prefix) : getClassName,
+      baseClassName
+    );
 
-const wrapComponent = ({ name, className, type }) => {
-  const Component = ({ className: baseClassName, ...other }) => {
-    const componentClass = cx(className, baseClassName);
     return React.createElement(type, {
       ...other,
       // Prevent Weird quirk where `cx` will evaluate to an empty string, '',
       // and so we have empty `class` attributes in the resulting markup
       // eslint-disable-next-line no-extra-boolean-cast
       className: !!componentClass ? componentClass : undefined,
     });
-  };
+  }
+
   Component.displayName = name;
   Component.propTypes = {
     className: PropTypes.string,
   };
+
   return Component;
 };