feat(react): add usePrefix hook and examples (#9687)

* feat(Carbon-React): add usePrefix hook and examples

* chore(test): update snapshots

* chore(test): update snapshots

* chore(test): remove test on prefix class

* chore(test): add usePrefix unit tests

Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 4 people

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -875,6 +875,24 @@ Map {
     },
   },
   "ContentSwitcher" => Object {
+    "contextType": Object {
+      "$$typeof": Symbol(react.context),
+      "Consumer": Object {
+        "$$typeof": Symbol(react.context),
+        "_calculateChangedBits": null,
+        "_context": [Circular],
+      },
+      "Provider": Object {
+        "$$typeof": Symbol(react.provider),
+        "_context": [Circular],
+      },
+      "_calculateChangedBits": null,
+      "_currentRenderer": null,
+      "_currentRenderer2": null,
+      "_currentValue": "bx",
+      "_currentValue2": "bx",
+      "_threadCount": 0,
+    },
     "defaultProps": Object {
       "onChange": [Function],
       "selectedIndex": 0,

packages/react/src/components/Accordion/Accordion.Skeleton.js

@@ -9,13 +9,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { ChevronRight16 } from '@carbon/icons-react';
-import { settings } from 'carbon-components';
 import SkeletonText from '../SkeletonText';
 import deprecate from '../../prop-types/deprecate';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 function AccordionSkeleton({ align, open, count, className, ...rest }) {
+  const prefix = usePrefix();
   const classes = cx(`${prefix}--accordion`, `${prefix}--skeleton`, className, {
     [`${prefix}--accordion--${align}`]: align,
   });
@@ -77,6 +76,7 @@ AccordionSkeleton.defaultProps = {
 };
 
 function AccordionSkeletonItem() {
+  const prefix = usePrefix();
   return (
     <li className={`${prefix}--accordion__item`}>
       <span className={`${prefix}--accordion__heading`}>

packages/react/src/components/Accordion/Accordion.js

@@ -5,13 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const { prefix } = settings;
-
 function Accordion({
   align,
   children,
@@ -20,6 +18,7 @@ function Accordion({
   size,
   ...rest
 }) {
+  const prefix = usePrefix();
   const className = cx(`${prefix}--accordion`, customClassName, {
     [`${prefix}--accordion--${align}`]: align,
     [`${prefix}--accordion--${size}`]: size,

packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js

@@ -9,9 +9,6 @@ import React from 'react';
 import ContentSwitcher from '../ContentSwitcher';
 import Switch from '../Switch';
 import { mount, shallow } from 'enzyme';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
 
 describe('ContentSwitcher', () => {
   describe('component initial rendering', () => {
@@ -24,10 +21,6 @@ describe('ContentSwitcher', () => {
 
     const children = wrapper.find(Switch);
 
-    it('should have the correct class', () => {
-      expect(wrapper.hasClass(`${prefix}--content-switcher`)).toEqual(true);
-    });
-
     it('should render children as expected', () => {
       expect(children.length).toEqual(2);
     });

packages/react/src/components/ContentSwitcher/ContentSwitcher.js

@@ -8,12 +8,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import { composeEventHandlers } from '../../tools/events';
 import { getNextIndex, matches, keys } from '../../internal/keyboard';
 import deprecate from '../../prop-types/deprecate';
-
-const { prefix } = settings;
+import { PrefixContext } from '../../internal/usePrefix';
 
 export default class ContentSwitcher extends React.Component {
   /**
@@ -68,6 +66,8 @@ export default class ContentSwitcher extends React.Component {
     size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   };
 
+  static contextType = PrefixContext;
+
   static defaultProps = {
     selectedIndex: 0,
     selectionMode: 'automatic',
@@ -130,6 +130,7 @@ export default class ContentSwitcher extends React.Component {
   };
 
   render() {
+    const prefix = this.context;
     const {
       children,
       className,

packages/react/src/internal/__tests__/usePrefix-test.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright IBM Corp. 2020
+ *
+ * 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 { cleanup, render } from '@testing-library/react';
+import React from 'react';
+import { usePrefix, PrefixContext } from '../usePrefix';
+
+describe('usePrefix', () => {
+  afterEach(cleanup);
+
+  it('should emit the default prefix without context', () => {
+    let value = null;
+
+    function TestComponent() {
+      value = usePrefix();
+      return null;
+    }
+
+    render(<TestComponent />);
+    expect(value).toBe('bx');
+  });
+
+  it('should emit the prefix in context', () => {
+    function TestComponent() {
+      return <span data-testid="test">test</span>;
+    }
+
+    const { getByTestId } = render(
+      <PrefixContext.Provider value="test">
+        <TestComponent />
+      </PrefixContext.Provider>
+    );
+
+    expect(getByTestId('test')).toHaveTextContent('test');
+  });
+});

packages/react/src/internal/usePrefix.js

@@ -0,0 +1,15 @@
+/**
+ * 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 { settings } from 'carbon-components';
+import React from 'react';
+
+export const PrefixContext = React.createContext(settings.prefix);
+
+export function usePrefix() {
+  return React.useContext(PrefixContext);
+}