Refs #140454 updated Breadcrumbs.jsx to latest version:

- Added also the storybook test from volto as a comparison to the DemoStories storybook
eea · Dec 7, 2021 · 63fe507 · 63fe507
1 parent 23dcf16
commit 63fe507
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 16 deletions.
diff --git a/src/customizations/components/theme/Breadcrumbs/Breadcrumbs.jsx b/src/customizations/components/theme/Breadcrumbs/Breadcrumbs.jsx
@@ -9,11 +9,14 @@ import { connect } from 'react-redux';
 
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Breadcrumb, Container, Segment, Icon } from 'semantic-ui-react';
+import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { Icon } from '@plone/volto/components';
 import { getBreadcrumbs } from '@plone/volto/actions';
-import { getBaseUrl } from '@plone/volto/helpers';
+import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+
+import homeSVG from '@plone/volto/icons/home.svg';
 
 const messages = defineMessages({
   home: {
@@ -40,6 +43,7 @@ class Breadcrumbs extends Component {
   static propTypes = {
     getBreadcrumbs: PropTypes.func.isRequired,
     pathname: PropTypes.string.isRequired,
+    root: PropTypes.string,
     items: PropTypes.arrayOf(
       PropTypes.shape({
         title: PropTypes.string,
@@ -48,13 +52,10 @@ class Breadcrumbs extends Component {
     ).isRequired,
   };
 
-  /**
-   * Component will mount
-   * @method componentWillMount
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillMount() {
-    this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
+  componentDidMount() {
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
+      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
+    }
   }
 
   /**
@@ -65,7 +66,9 @@ class Breadcrumbs extends Component {
    */
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.pathname !== this.props.pathname) {
-      this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
+      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
+        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
+      }
     }
   }
 
@@ -86,17 +89,14 @@ class Breadcrumbs extends Component {
         <Container>
           <Breadcrumb size={'tiny'}>
             <Link
-              to="/"
+              to={this.props.root || '/'}
               className="section"
               title={this.props.intl.formatMessage(messages.home)}
             >
-              <Icon name="home" />
+              <Icon name={homeSVG} size="18px" />
             </Link>
             {this.props.items.map((item, index, items) => [
-              <Breadcrumb.Divider
-                icon="angle right"
-                key={`divider-${item.url}`}
-              />,
+              <Breadcrumb.Divider key={`divider-${item.url}`} />,
               index < items.length - 1 ? (
                 <Link key={item.url} to={item.url} className="section">
                   {item.title}
@@ -114,11 +114,13 @@ class Breadcrumbs extends Component {
   }
 }
 
+export const BreadcrumbsComponent = Breadcrumbs;
 export default compose(
   injectIntl,
   connect(
     (state) => ({
       items: state.breadcrumbs.items,
+      root: state.breadcrumbs.root,
     }),
     { getBreadcrumbs },
   ),

diff --git a/src/customizations/components/theme/Breadcrumbs/Breadcrumbs.stories.mdx b/src/customizations/components/theme/Breadcrumbs/Breadcrumbs.stories.mdx
@@ -0,0 +1,30 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { BreadcrumbsComponent } from './Breadcrumbs';
+import { injectIntl } from 'react-intl';
+
+<Meta title="Breadcrumbs" />
+
+# Breadcrumbs
+
+With `MDX` we can define a story for `Breadcrumbs` right in the middle of our
+markdown documentation. Use the `args` for defining Storybook controls handlers.
+
+export const Breadcrumbs = (args) => (
+  <BreadcrumbsComponent
+    pathname=""
+    items={[
+      {
+        '@id': 'https://volto.kitconcept.com/api/Members',
+        title: 'Users',
+      },
+    ]}
+    getBreadcrumbs={() => {}}
+    {...args}
+  />
+);
+
+<Story name="Breadcrumbs">{injectIntl(Breadcrumbs).bind({})}</Story>
+
+# Props
+
+<ArgsTable of={BreadcrumbsComponent} />