Improvement of the ContentsBreadcrumbs component (#3903)

* Improvement of the `ContentsBreadcrumbs` component * Update src/components/manage/Contents/ContentsBreadcrumbs.jsx Co-authored-by: David Glick <[email protected]> * Fix typo * locales Co-authored-by: David Glick <[email protected]>
plone · Nov 17, 2022 · b75e118 · b75e118
1 parent b3991bf
commit b75e118
Show file tree

Hide file tree

Showing 18 changed files with 72 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,12 @@
 
 ### Breaking
 
+- The `ContentsBreadcrumbs` component now renders the whole language name of the language root folder (if any) instead of just the `id` (before: `de`, now: `Deutsch`) @sneridagh
+
 ### Feature
 
+- Improvement of the `ContentsBreadcrumbs` component, add child `ContentsBreadcrumbsRootItem` and `ContentsBreadcrumbsHomeItem` for easy customization of these single elements in projects @sneridagh
+
 ### Bugfix
 
 ### Internal

diff --git a/locales/ca/LC_MESSAGES/volto.po b/locales/ca/LC_MESSAGES/volto.po
@@ -1578,6 +1578,7 @@ msgstr "Historial de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2707,6 +2708,7 @@ msgid "Roles"
 msgstr "Funcions"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Arrel"

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -1575,6 +1575,7 @@ msgstr "Historie von {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2704,6 +2705,7 @@ msgid "Roles"
 msgstr "Rollen"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Wurzel"

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -1569,6 +1569,7 @@ msgstr ""
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2698,6 +2699,7 @@ msgid "Roles"
 msgstr ""
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr ""

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -1580,6 +1580,7 @@ msgstr "Historial de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2709,6 +2710,7 @@ msgid "Roles"
 msgstr "Roles"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Raíz"

diff --git a/locales/eu/LC_MESSAGES/volto.po b/locales/eu/LC_MESSAGES/volto.po
@@ -1576,6 +1576,7 @@ msgstr "{title} elementuaren historia"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2705,6 +2706,7 @@ msgid "Roles"
 msgstr "Rolak"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Erroa"

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -1586,6 +1586,7 @@ msgstr "Historique de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2715,6 +2716,7 @@ msgid "Roles"
 msgstr "Rôles"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr ""

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -1569,6 +1569,7 @@ msgstr "Cronologia di {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2698,6 +2699,7 @@ msgid "Roles"
 msgstr "Ruoli"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Radice"

diff --git a/locales/ja/LC_MESSAGES/volto.po b/locales/ja/LC_MESSAGES/volto.po
@@ -1577,6 +1577,7 @@ msgstr "{title} の履歴"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2706,6 +2707,7 @@ msgid "Roles"
 msgstr "ロール"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Root"

diff --git a/locales/nl/LC_MESSAGES/volto.po b/locales/nl/LC_MESSAGES/volto.po
@@ -1576,6 +1576,7 @@ msgstr "Geschiedenis van {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2705,6 +2706,7 @@ msgid "Roles"
 msgstr "Rollen"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Root"

diff --git a/locales/pt/LC_MESSAGES/volto.po b/locales/pt/LC_MESSAGES/volto.po
@@ -1577,6 +1577,7 @@ msgstr "Histórico de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2706,6 +2707,7 @@ msgid "Roles"
 msgstr "Papéis"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr ""

diff --git a/locales/pt_BR/LC_MESSAGES/volto.po b/locales/pt_BR/LC_MESSAGES/volto.po
@@ -1579,6 +1579,7 @@ msgstr "Histórico de {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2708,6 +2709,7 @@ msgid "Roles"
 msgstr "Papéis"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Raiz"

diff --git a/locales/ro/LC_MESSAGES/volto.po b/locales/ro/LC_MESSAGES/volto.po
@@ -1569,6 +1569,7 @@ msgstr "Istoricul {title}"
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2698,6 +2699,7 @@ msgid "Roles"
 msgstr "Roluri"
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr "Root"

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2022-11-09T21:02:11.332Z\n"
+"POT-Creation-Date: 2022-11-16T16:07:48.403Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -1571,6 +1571,7 @@ msgstr ""
 
 #: components/manage/Contents/Contents
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsHomeItem
 #: components/theme/Breadcrumbs/Breadcrumbs
 # defaultMessage: Home
 msgid "Home"
@@ -2700,6 +2701,7 @@ msgid "Roles"
 msgstr ""
 
 #: components/manage/Contents/ContentsBreadcrumbs
+#: components/manage/Contents/ContentsBreadcrumbsRootItem
 # defaultMessage: Root
 msgid "Root"
 msgstr ""

diff --git a/src/components/manage/Contents/ContentsBreadcrumbs.jsx b/src/components/manage/Contents/ContentsBreadcrumbs.jsx
@@ -2,6 +2,10 @@ import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
 import { Link, useLocation } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
+import { langmap } from '@plone/volto/helpers';
+import ContentsBreadcrumbsRootItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsRootItem';
+import ContentsBreadcrumbsHomeItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsHomeItem';
+
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -31,7 +35,7 @@ const ContentsBreadcrumbs = (props) => {
             className="section"
             title={intl.formatMessage(messages.root)}
           >
-            {intl.formatMessage(messages.root)}
+            <ContentsBreadcrumbsRootItem />
           </Link>
           <Breadcrumb.Divider />
         </>
@@ -42,7 +46,7 @@ const ContentsBreadcrumbs = (props) => {
           className="section"
           title={intl.formatMessage(messages.home)}
         >
-          {lang}
+          {langmap?.[lang]?.nativeName ?? lang}
         </Link>
       )}
       {!settings.isMultilingual && (
@@ -51,7 +55,7 @@ const ContentsBreadcrumbs = (props) => {
           className="section"
           title={intl.formatMessage(messages.home)}
         >
-          {intl.formatMessage(messages.home)}
+          <ContentsBreadcrumbsHomeItem />
         </Link>
       )}
       {items.map((breadcrumb, index, breadcrumbs) => [

diff --git a/src/components/manage/Contents/ContentsBreadcrumbsHomeItem.jsx b/src/components/manage/Contents/ContentsBreadcrumbsHomeItem.jsx
@@ -0,0 +1,16 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  home: {
+    id: 'Home',
+    defaultMessage: 'Home',
+  },
+});
+
+const ContentsBreadcrumbsHomeItem = () => {
+  const intl = useIntl();
+
+  return <>{intl.formatMessage(messages.home)}</>;
+};
+
+export default ContentsBreadcrumbsHomeItem;
diff --git a/src/components/manage/Contents/ContentsBreadcrumbsRootItem.jsx b/src/components/manage/Contents/ContentsBreadcrumbsRootItem.jsx
@@ -0,0 +1,16 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  root: {
+    id: 'Root',
+    defaultMessage: 'Root',
+  },
+});
+
+const ContentsBreadcrumbsRootItem = () => {
+  const intl = useIntl();
+
+  return <>{intl.formatMessage(messages.root)}</>;
+};
+
+export default ContentsBreadcrumbsRootItem;
diff --git a/src/components/manage/Contents/__snapshots__/ContentsBreadcrumbs.Multilingual.test.jsx.snap b/src/components/manage/Contents/__snapshots__/ContentsBreadcrumbs.Multilingual.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`ContentsBreadcrumbs Multilingual renders a ContentsBreadcrumbs componen
     onClick={[Function]}
     title="Home"
   >
-    en
+    English
   </a>
   <div
     className="divider"
@@ -74,7 +74,7 @@ exports[`ContentsBreadcrumbs Multilingual renders a breadcrumbs component contai
     onClick={[Function]}
     title="Home"
   >
-    en
+    English
   </a>
   <div
     className="divider"