feat(breadcrumbs): deprecate BreadcrumbContainer and migrate to useBreadcrumb() container (#444)

Author: Austin Green

packages/breadcrumbs/package.json

@@ -19,6 +19,7 @@
     "start": "../../utils/scripts/start.sh"
   },
   "dependencies": {
+    "@zendeskgarden/container-breadcrumb": "^0.2.2",
     "classnames": "^2.2.5"
   },
   "peerDependencies": {

packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md

@@ -1,20 +1,7 @@
-```jsx
-const { Anchor } = require('@zendeskgarden/react-buttons/src');
+## DEPRECATION WARNING
 
-<BreadcrumbContainer>
-  {({ getContainerProps }) => (
-    /* role not needed as `BreadcrumbView` is a navigation landmark. */
-    <BreadcrumbView {...getContainerProps({ role: null })}>
-      <List>
-        <Item>
-          <Anchor>One</Anchor>
-        </Item>
-        <Item>
-          <Anchor>Two</Anchor>
-        </Item>
-        <Item current>Three</Item>
-      </List>
-    </BreadcrumbView>
-  )}
-</BreadcrumbContainer>;
-```
+This component has been deprecated in favor of the API provided in the
+[@zendeskgarden/container-breadcrumb](https://www.npmjs.com/package/@zendeskgarden/container-breadcrumb)
+package.
+
+This package will be removed in a future major release.

packages/breadcrumbs/src/containers/BreadcrumbContainer.js

@@ -8,6 +8,16 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 
+if (process.env.NODE_ENV !== 'production') {
+  /* eslint-disable no-console */
+  console.warn(
+    'Deprecation Warning: The `BreadcrumbContainer` component has been deprecated. ' +
+      'It will be removed in an upcoming major release. Migrate to the ' +
+      '`@zendeskgarden/container-breadcrumb` package to continue receiving updates.'
+  );
+  /* eslint-enable */
+}
+
 export default class BreadcrumbContainer extends Component {
   static propTypes = {
     /**

packages/breadcrumbs/src/elements/Breadcrumb.js

@@ -8,8 +8,8 @@
 import React, { Component, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { hasType } from '@zendeskgarden/react-utilities';
+import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb';
 
-import BreadcrumbContainer from '../containers/BreadcrumbContainer';
 import BreadcrumbView from '../views/BreadcrumbView';
 import List from '../views/List';
 import Item from '../views/Item';
@@ -44,16 +44,13 @@ export default class Breadcrumb extends Component {
 
   render() {
     const { children, ...breadcrumbProps } = this.props;
+    const { getContainerProps, getCurrentPageProps } = useBreadcrumb();
 
     return (
-      <BreadcrumbContainer>
-        {({ getContainerProps, getCurrentPageProps }) => (
-          /* role not needed as `BreadcrumbView` is a navigation landmark. */
-          <BreadcrumbView {...getContainerProps({ role: null })}>
-            <List {...breadcrumbProps}>{this.renderItems(children, getCurrentPageProps)}</List>
-          </BreadcrumbView>
-        )}
-      </BreadcrumbContainer>
+      /* role not needed as `BreadcrumbView` is a navigation landmark. */
+      <BreadcrumbView {...getContainerProps({ role: null })}>
+        <List {...breadcrumbProps}>{this.renderItems(children, getCurrentPageProps)}</List>
+      </BreadcrumbView>
     );
   }
 }