feat(react): add ClassPrefix component (#11254)

* feat(react): add ClassPrefix component

* docs(react): add docs for ClassPrefix

* feat(react): add ClassPrefix to the package entrypoint

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

@@ -405,6 +405,17 @@ Map {
       },
     },
   },
+  "ClassPrefix" => Object {
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "prefix": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+    },
+  },
   "ClickableTile" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

packages/react/src/__tests__/index-test.js

@@ -28,6 +28,7 @@ describe('Carbon Components React', () => {
         "ButtonSkeleton",
         "Checkbox",
         "CheckboxSkeleton",
+        "ClassPrefix",
         "ClickableTile",
         "CodeSnippet",
         "CodeSnippetSkeleton",

packages/react/src/components/ClassPrefix/ClassPrefix.mdx

@@ -0,0 +1,71 @@
+import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks';
+import { ClassPrefix } from '../ClassPrefix';
+
+# ClassPrefix
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ClassPrefix)
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+The `ClassPrefix` component is used to change the prefix in the classes used by
+components in Carbon.
+
+<Preview>
+  <Story id="components-classprefix--default" />
+</Preview>
+
+By default, the prefix used by components is `cds`. However, you can change this
+prefix in Sass and coordinate that change to React using the `ClassPrefix`
+component.
+
+In Sass, you can customize this prefix by writing the following:
+
+```scss
+@use '@carbon/react' with (
+  $prefix: 'custom'
+);
+```
+
+Similarly, you can configure `scss/config` directly:
+
+```scss
+@use '@carbon/react/scss/config' with (
+  $prefix: 'custom'
+);
+```
+
+In React, you use `ClassPrefix` at the top-level of your project and
+specify the prefix with the `prefix` prop:
+
+```jsx
+import { ClassPrefix } from '@carbon/react';
+
+export default function MyApp() {
+  return (
+    <ClassPrefix prefix="custom">
+      <Page />
+    </ClassPrefix>
+  );
+}
+```
+
+## Component API
+
+<Props />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/ClassPrefix/ClassPrefix.mdx).
+

packages/react/src/components/ClassPrefix/ClassPrefix.stories.js

@@ -0,0 +1,37 @@
+/**
+ * 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 React from 'react';
+import { ClassPrefix } from '../ClassPrefix';
+import { usePrefix } from '../../internal/usePrefix';
+import mdx from './ClassPrefix.mdx';
+
+export default {
+  title: 'Components/ClassPrefix',
+  component: ClassPrefix,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => {
+  function ExampleComponent() {
+    const prefix = usePrefix();
+    return <p>The current prefix is: {prefix}</p>;
+  }
+
+  return (
+    <>
+      <ExampleComponent />
+      <ClassPrefix prefix="custom">
+        <ExampleComponent />
+      </ClassPrefix>
+    </>
+  );
+};

packages/react/src/components/ClassPrefix/__tests__/ClassPrefix-test.js

@@ -0,0 +1,31 @@
+/**
+ * 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 { ClassPrefix } from '../../ClassPrefix';
+import { usePrefix } from '../../../internal/usePrefix';
+
+describe('ClassPrefix', () => {
+  it('should set the prefix value used by usePrefix', () => {
+    const calls = [];
+
+    function TestComponent() {
+      const prefix = usePrefix();
+      calls.push(prefix);
+      return null;
+    }
+
+    render(
+      <ClassPrefix prefix="custom">
+        <TestComponent />
+      </ClassPrefix>
+    );
+
+    expect(calls).toEqual(['custom']);
+  });
+});

packages/react/src/components/ClassPrefix/index.js

@@ -0,0 +1,27 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { PrefixContext } from '../../internal/usePrefix';
+
+function ClassPrefix({ children, prefix }) {
+  return (
+    <PrefixContext.Provider value={prefix}>{children}</PrefixContext.Provider>
+  );
+}
+
+ClassPrefix.propTypes = {
+  children: PropTypes.node,
+
+  /**
+   * The value used to prefix the CSS selectors used by Carbon components
+   */
+  prefix: PropTypes.string.isRequired,
+};
+
+export { ClassPrefix };

packages/react/src/index.js

@@ -14,6 +14,7 @@ export { Breadcrumb, BreadcrumbItem } from './components/Breadcrumb';
 export Button from './components/Button';
 export ButtonSet from './components/ButtonSet';
 export Checkbox from './components/Checkbox';
+export { ClassPrefix } from './components/ClassPrefix';
 export CodeSnippet from './components/CodeSnippet';
 export ComboBox from './components/ComboBox';
 export ComposedModal, {