@ndla/ui 12.0.1 → 13.0.0

package/es/locale/messages-se.js

@@ -405,7 +405,7 @@ var messages = _objectSpread(_objectSpread({
       rules: 'Regler for bruk av bildet:'
     },
     images: {
-      heading: 'Slik bruker du bilder fra artikkelen',
+      heading: 'Slik gjenbruker du bilder',
       description: 'Husk å kopiere teksten som skal legges ved bildet der du bruker det.',
       rules: 'Regler for bruk av bildet:',
       itemImage: {
@@ -419,18 +419,18 @@ var messages = _objectSpread(_objectSpread({
       title: 'Tittel'
     },
     text: {
-      heading: 'Slik bruker du tekst fra artikkelen',
+      heading: 'Slik gjenbruker du teksten',
       description: 'Husk å henvise til kilden når du gjenbruker tekst.',
       rules: 'Regler for bruk av teksten:',
       published: 'Publiseringsdato'
     },
     audio: {
-      heading: 'Slik bruker du lydfiler',
+      heading: 'Slik gjenbruker du lydfiler',
       description: 'Husk å kopiere teksten som skal legges ved lydfilen der du bruker den.',
       rules: 'Regler for bruk av lydfilen:'
     },
     video: {
-      heading: 'Slik bruker du video fra artikkelen',
+      heading: 'Slik gjenbruker du videoer',
       description: 'Husk å kopiere teksten som skal legges ved videoen der du bruker den.',
       rules: 'Regler for bruk av videoen:',
       itemImage: {
@@ -438,31 +438,42 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     other: {
-      heading: 'Slik bruker du annet innhold fra artikkelen',
+      heading: 'Slik gjenbruker du annet innhold',
       description: 'Du finner retningslinjene for bruk av innholdet i innholdselementet',
       itemImage: {
         ariaLabel: 'Åpne i nytt vindu'
       }
     },
     h5p: {
-      heading: 'Slik bruker du H5P-innhold fra artikkelen',
+      heading: 'Slik gjenbruker du H5P-innhold',
       description: 'Du finner retningslinjene for bruk av innholdet i H5P-elementet',
       rules: 'Regler for bruk av H5P:'
     },
     concept: {
-      heading: 'Slik bruker du forklaringer fra artikkelen',
+      heading: 'Slik gjenbruker du forklaringer',
       description: 'Du finner retningslinjene for bruk av innholdet i forklaring-elementet',
       rules: 'Regler for bruk av forklaring:',
-      title: 'Tittel'
+      title: 'Tittel',
+      embedlink: {
+        heading: 'Slik viser du forklaringen i annet innhold',
+        description: 'Denne lenken viser forklaringen uten kontekst (meny og bunntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert'
+      }
     },
     files: {
-      heading: 'Slik bruker du filer fra artikkelen',
+      heading: 'Slik gjenbruker du filer fra artikkelen',
       description: 'Husk å kopier teksten som skal legges ved filen der du bruker den.',
       rules: 'Regler for bruk av filen:',
       itemImage: {
         ariaLabel: 'Åpne i nytt vindu'
       }
-    }
+    },
+    title: 'Tittel',
+    originator: 'Opphaver',
+    published: 'Publiseringsdato',
+    rightsholder: 'Rettighetshaver',
+    source: 'Kilde'
   },
   errorMessage: {
     title: 'Ops, noe gikk galt',
@@ -493,8 +504,10 @@ var messages = _objectSpread(_objectSpread({
       newsletterAria: 'Meld deg på vårt nyhetsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne siden',
       sharePageAria: 'Del denne siden'
     },
@@ -557,6 +570,10 @@ var messages = _objectSpread(_objectSpread({
     search: {
       placeholder: 'Søk'
     },
+    embedlink: {
+      copyTitle: 'Kopier innbyggingskode',
+      hasCopiedTitle: 'Innbyggingskode kopiert'
+    },
     filters: {
       subject: {
         useFilter: 'Bruk filter',
@@ -572,7 +589,8 @@ var messages = _objectSpread(_objectSpread({
         useFilter: 'Bruk filter',
         openFilter: 'Filtrer',
         closeFilter: 'Lukk filter',
-        heading: 'Filter'
+        heading: 'Filter',
+        filteredBy: 'Filtrert på'
       },
       alphabet: {
         letterFilter: 'Vis innhald på (bokstaven) {{letter}}.'
@@ -722,7 +740,15 @@ var messages = _objectSpread(_objectSpread({
   },
   createdBy: {
     content: 'Ressursen',
-    text: 'er hentet fra'
+    text: 'er hentet fra',
+    concept: {
+      content: 'Forklaringen',
+      text: 'er utarbeidet av'
+    },
+    listing: {
+      content: 'Listen',
+      text: 'er utarbeidet av'
+    }
   },
   fagfornyelse: {
     frontpage: {
@@ -755,7 +781,7 @@ var messages = _objectSpread(_objectSpread({
   frontpageMenu: {
     program: 'Utdanningsprogram',
     allsubjects: 'Alle fag',
-    cursorText: 'Se smakebiter fra fag som kommer høsten 2022.'
+    cursorText: 'Se smakebiter fra fag som under utvikling.'
   },
   navigation: {
     showLongerDescription: 'Vis hele emnebeskrivelsen',
@@ -895,6 +921,21 @@ var messages = _objectSpread(_objectSpread({
     myAccount: 'Min konto',
     favourites: 'Favoritter',
     help: 'Hjelp'
+  },
+  labels: {
+    category: 'Kategori',
+    subject: 'Fag',
+    other: 'Annet'
+  },
+  listingPage: {
+    or: 'eller',
+    noFilters: 'Har ingenting å filtrere',
+    loadMore: 'Last mer'
+  },
+  siteNav: {
+    search: 'Søk',
+    contact: 'Kontakt',
+    help: 'Hjelp'
   }
 });
 

package/es/locale/messages-sma.js

@@ -405,7 +405,7 @@ var messages = _objectSpread(_objectSpread({
       rules: 'Regler for bruk av bildet:'
     },
     images: {
-      heading: 'Slik bruker du bilder fra artikkelen',
+      heading: 'Slik gjenbruker du bilder',
       description: 'Husk å kopiere teksten som skal legges ved bildet der du bruker det.',
       rules: 'Regler for bruk av bildet:',
       itemImage: {
@@ -419,18 +419,18 @@ var messages = _objectSpread(_objectSpread({
       title: 'Tittel'
     },
     text: {
-      heading: 'Slik bruker du tekst fra artikkelen',
+      heading: 'Slik gjenbruker du teksten',
       description: 'Husk å henvise til kilden når du gjenbruker tekst.',
       rules: 'Regler for bruk av teksten:',
       published: 'Publiseringsdato'
     },
     audio: {
-      heading: 'Slik bruker du lydfiler',
+      heading: 'Slik gjenbruker du lydfiler',
       description: 'Husk å kopiere teksten som skal legges ved lydfilen der du bruker den.',
       rules: 'Regler for bruk av lydfilen:'
     },
     video: {
-      heading: 'Slik bruker du video fra artikkelen',
+      heading: 'Slik gjenbruker du videoer',
       description: 'Husk å kopiere teksten som skal legges ved videoen der du bruker den.',
       rules: 'Regler for bruk av videoen:',
       itemImage: {
@@ -438,31 +438,42 @@ var messages = _objectSpread(_objectSpread({
       }
     },
     other: {
-      heading: 'Slik bruker du annet innhold fra artikkelen',
+      heading: 'Slik gjenbruker du annet innhold',
       description: 'Du finner retningslinjene for bruk av innholdet i innholdselementet',
       itemImage: {
         ariaLabel: 'Åpne i nytt vindu'
       }
     },
     h5p: {
-      heading: 'Slik bruker du H5P-innhold fra artikkelen',
+      heading: 'Slik gjenbruker du H5P-innhold',
       description: 'Du finner retningslinjene for bruk av innholdet i H5P-elementet',
       rules: 'Regler for bruk av H5P:'
     },
     concept: {
-      heading: 'Slik bruker du forklaringer fra artikkelen',
+      embedlink: {
+        heading: 'Slik viser du forklaringa i anna innhald',
+        description: 'Denne lenka viser forklaringa utan kontekst (meny og botntekst)',
+        copyTitle: 'Kopier innbyggingslenke',
+        hasCopiedTitle: 'Innbyggingslenke kopiert'
+      },
+      heading: 'Slik gjenbruker du forklaringer',
       description: 'Du finner retningslinjene for bruk av innholdet i forklaring-elementet',
       rules: 'Regler for bruk av forklaring:',
       title: 'Tittel'
     },
     files: {
-      heading: 'Slik bruker du filer fra artikkelen',
+      heading: 'Slik gjenbruker du filer',
       description: 'Husk å kopier teksten som skal legges ved filen der du bruker den.',
       rules: 'Regler for bruk av filen:',
       itemImage: {
         ariaLabel: 'Åpne i nytt vindu'
       }
-    }
+    },
+    title: 'Tittel',
+    originator: 'Opphavar',
+    rightsholder: 'Rettshavar',
+    source: 'Kjelde',
+    published: 'Publiseringsdato'
   },
   errorMessage: {
     title: 'Ops, noe gikk galt',
@@ -493,8 +504,10 @@ var messages = _objectSpread(_objectSpread({
       newsletterAria: 'Meld deg på vårt nyhetsbrev',
       youtube: 'NDLA på YouTube',
       youtubeAria: 'NDLA på YouTube',
-      twitter: 'NDLA på Twitter',
-      twitterAria: 'Besøk NDLA på Twitter',
+      linkedin: 'NDLA på LinkedIn',
+      linkedinAria: 'Besøk NDLA på LinkedIn',
+      instagram: 'NDLA på Instagram',
+      instagramAria: 'Besøk NDLA på Instagram',
       sharePage: 'Del denne siden',
       sharePageAria: 'Del denne siden'
     },
@@ -557,6 +570,10 @@ var messages = _objectSpread(_objectSpread({
     search: {
       placeholder: 'Søk'
     },
+    embedlink: {
+      copyTitle: 'Kopier innbyggingskode',
+      hasCopiedTitle: 'Innbyggingskode kopiert'
+    },
     filters: {
       subject: {
         useFilter: 'Bruk filter',
@@ -572,7 +589,8 @@ var messages = _objectSpread(_objectSpread({
         useFilter: 'Bruk filter',
         openFilter: 'Filtrer',
         closeFilter: 'Lukk filter',
-        heading: 'Filter'
+        heading: 'Filter',
+        filteredBy: 'Filtrert på'
       },
       alphabet: {
         letterFilter: 'Vis innhald på (bokstaven) {{letter}}.'
@@ -722,7 +740,15 @@ var messages = _objectSpread(_objectSpread({
   },
   createdBy: {
     content: 'Ressursen',
-    text: 'er hentet fra'
+    text: 'er hentet fra',
+    concept: {
+      content: 'Forklaringa',
+      text: 'er utarbeida av'
+    },
+    listing: {
+      content: 'Lista',
+      text: 'er utarbeida av'
+    }
   },
   fagfornyelse: {
     frontpage: {
@@ -755,7 +781,7 @@ var messages = _objectSpread(_objectSpread({
   frontpageMenu: {
     program: 'Utdanningsprogram',
     allsubjects: 'Alle fag',
-    cursorText: 'Se smakebiter fra fag som kommer høsten 2022.'
+    cursorText: 'Se smakebiter fra fag under utvikling.'
   },
   navigation: {
     showLongerDescription: 'Vis hele emnebeskrivelsen',
@@ -776,7 +802,7 @@ var messages = _objectSpread(_objectSpread({
   title: 'Tittel',
   image: {
     altText: 'Alt-tekst',
-    imageText: 'Bilettekst',
+    caption: 'Bilettekst',
     type: 'Filtype',
     width: 'Breidde',
     height: 'Høgde',
@@ -895,6 +921,21 @@ var messages = _objectSpread(_objectSpread({
     myAccount: 'Min konto',
     favourites: 'Favoritter',
     help: 'Hjelp'
+  },
+  labels: {
+    category: 'Kategori',
+    subject: 'Fag',
+    other: 'Anna'
+  },
+  listingPage: {
+    or: 'eller',
+    noFilters: 'Har ikkje noko å filtrera',
+    loadMore: 'Last meir'
+  },
+  siteNav: {
+    search: 'Søk',
+    contact: 'Kontakt',
+    help: 'Hjelp'
   }
 });
 

package/lib/Breadcrumb/Breadcrumb.d.ts

@@ -5,16 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import React, { ReactNode } from 'react';
-import { WithTranslation } from 'react-i18next';
-export interface BreadcrumbItemI {
-    to: string;
-    name: string;
+import { ReactNode } from 'react';
+import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
+interface Props {
+    items: SimpleBreadcrumbItem[];
+    autoCollapse?: boolean;
+    collapseFirst?: boolean;
+    renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
+    renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
-interface Props extends WithTranslation {
-    children?: ReactNode;
-    items: BreadcrumbItemI[];
-    invertedStyle: boolean;
-}
-declare const _default: React.ComponentType<Pick<Pick<Props, "children" | "t" | "tReady" | "invertedStyle" | "items">, "children" | "invertedStyle" | "items"> & import("react-i18next").WithTranslationProps>;
-export default _default;
+declare const Breadcrumb: ({ items, autoCollapse, renderItem, renderSeparator, collapseFirst }: Props) => JSX.Element;
+export default Breadcrumb;

package/lib/Breadcrumb/Breadcrumb.js

@@ -1,61 +1,133 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+var _hooks = require("@ndla/hooks");
 
 var _util = require("@ndla/util");
 
 var _reactI18next = require("react-i18next");
 
-var _common = require("@ndla/icons/common");
-
 var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
 
 var _core = require("@emotion/core");
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-var classes = (0, _reactBemHelper["default"])({
-  name: 'breadcrumb',
-  prefix: 'c-'
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var BreadcrumbNav = (0, _styledBase["default"])("nav", {
+  target: "e1oxrjfx0",
+  label: "BreadcrumbNav"
+})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCZ0MiLCJmaWxlIjoiQnJlYWRjcnVtYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUNvbXBvbmVudFNpemUsIHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdAbmRsYS9ob29rcyc7XG5pbXBvcnQgeyB1dWlkIH0gZnJvbSAnQG5kbGEvdXRpbCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IEJyZWFkY3J1bWJJdGVtLCB7IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgU2ltcGxlQnJlYWRjcnVtYkl0ZW0gfSBmcm9tICcuL0JyZWFkY3J1bWJJdGVtJztcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaXRlbXM6IFNpbXBsZUJyZWFkY3J1bWJJdGVtW107XG4gIGF1dG9Db2xsYXBzZT86IGJvb2xlYW47XG4gIGNvbGxhcHNlRmlyc3Q/OiBib29sZWFuO1xuICByZW5kZXJJdGVtPzogKGl0ZW06IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgdG90YWxDb3VudDogbnVtYmVyKSA9PiBSZWFjdE5vZGU7XG4gIHJlbmRlclNlcGFyYXRvcj86IChpdGVtOiBJbmRleGVkQnJlYWRjcnVtYkl0ZW0sIHRvdGFsQ291bnQ6IG51bWJlcikgPT4gUmVhY3ROb2RlO1xufVxuXG5jb25zdCBCcmVhZGNydW1iTmF2ID0gc3R5bGVkLm5hdmBgO1xuXG5jb25zdCBTdHlsZWRMaXN0ID0gc3R5bGVkLm9sYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBhZGRpbmctbGVmdDogMDtcbiAgbWFyZ2luLWJvdHRvbTogMDtcbiAgbWFyZ2luLXRvcDogMDtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbmA7XG5cbmNvbnN0IEJyZWFkY3J1bWIgPSAoeyBpdGVtcywgYXV0b0NvbGxhcHNlLCByZW5kZXJJdGVtLCByZW5kZXJTZXBhcmF0b3IsIGNvbGxhcHNlRmlyc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBvbFJlZiA9IHVzZVJlZjxhbnk+KCk7XG4gIGNvbnN0IGNvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIC8vIE5vIGlkaW9tYXRpYyB3YXkgb2YgZGVhbGluZyB3aXRoIHNldHMgb2YgcmVmcyB5ZXRcbiAgLy8gU2VlOiBodHRwczovL2dpdGh1Yi5jb20vZmFjZWJvb2svcmVhY3QvaXNzdWVzLzE0MDcyI2lzc3VlY29tbWVudC00NDY3Nzc0MDZcbiAgY29uc3QgYnJlYWRjcnVtYkl0ZW1SZWZzID0gdXNlUmVmKG5ldyBNYXAoKSkuY3VycmVudDtcbiAgY29uc3Qgc2l6ZSA9IHVzZUNvbXBvbmVudFNpemUoY29udGFpbmVyUmVmKTtcblxuICB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIWF1dG9Db2xsYXBzZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICAvLyBDcmVhdGUgYW4gYXJyYXkgb2YgYWxsIGJyZWFkY3J1bWIgaXRlbSByZWZzXG4gICAgY29uc3QgaXRlbXMgPSBBcnJheS5mcm9tKGJyZWFkY3J1bWJJdGVtUmVmcykubWFwKChba2V5LCB2YWx1ZV0pID0+IHZhbHVlKTtcblxuICAgIC8vIENsZWFyIG1heCB3aWR0aCBvbiBhbGwgaXRlbXNcbiAgICBpdGVtcy5mb3JFYWNoKChlbCkgPT4ge1xuICAgICAgZWwuc2V0TWF4V2lkdGgoJ25vbmUnKTtcbiAgICB9KTtcblxuICAgIC8vIFNldCBtYXhXaWR0aCBvbiBicmVhZGNydW1iIHRleHQgaXRlbXMgaXRlcmF0aXZlbHkgdW50aWxcbiAgICAvLyB0aGUgb3JkZXJlZCBsaXN0IGZpdHMgb24gYSBzaW5nbGUgbGluZS4gSXQncyBvbiBhIHNpbmdsZSBsaW5lXG4gICAgLy8gaWYgdGhlIGhlaWdodCBvZiB0aGUgbGlzdCBpcyBsZXNzIHRoZW4gNzAuXG4gICAgaXRlbXMuZm9yRWFjaCgoZWwpID0+IHtcbiAgICAgIGlmIChvbFJlZi5jdXJyZW50Lm9mZnNldEhlaWdodCA+IDYwKSB7XG4gICAgICAgIGVsLnNldE1heFdpZHRoKCc0MHB4Jyk7XG4gICAgICB9XG4gICAgfSk7XG4gIH0sIFtzaXplXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8QnJlYWRjcnVtYk5hdiByZWY9e2NvbnRhaW5lclJlZn0gYXJpYS1sYWJlbD17dCgnYnJlYWRjcnVtYi5icmVhZGNydW1iJyl9PlxuICAgICAgPFN0eWxlZExpc3QgcmVmPXtvbFJlZn0+XG4gICAgICAgIHtpdGVtcy5tYXAoKGl0ZW0sIGluZGV4KSA9PiAoXG4gICAgICAgICAgPEJyZWFkY3J1bWJJdGVtXG4gICAgICAgICAgICBhdXRvQ29sbGFwc2U9e2F1dG9Db2xsYXBzZX1cbiAgICAgICAgICAgIHJlbmRlckl0ZW09e3JlbmRlckl0ZW19XG4gICAgICAgICAgICByZW5kZXJTZXBhcmF0b3I9e3JlbmRlclNlcGFyYXRvcn1cbiAgICAgICAgICAgIHJlZj17KGVsZW1lbnQpID0+XG4gICAgICAgICAgICAgIGVsZW1lbnQgPT09IG51bGwgfHwgKCFjb2xsYXBzZUZpcnN0ICYmIGluZGV4ID09PSAwKSAvLyBza2lwIGZpcnN0IGl0ZW0gd2hpY2ggaXMgbmV2ZXIgdHJ1bmNhdGVkXG4gICAgICAgICAgICAgICAgPyBicmVhZGNydW1iSXRlbVJlZnMuZGVsZXRlKGl0ZW0udG8pXG4gICAgICAgICAgICAgICAgOiBicmVhZGNydW1iSXRlbVJlZnMuc2V0KGl0ZW0udG8sIGVsZW1lbnQpXG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBrZXk9e3V1aWQoKX1cbiAgICAgICAgICAgIHRvdGFsQ291bnQ9e2l0ZW1zLmxlbmd0aH1cbiAgICAgICAgICAgIGl0ZW09e3sgLi4uaXRlbSwgaW5kZXggfX1cbiAgICAgICAgICAvPlxuICAgICAgICApKX1cbiAgICAgIDwvU3R5bGVkTGlzdD5cbiAgICA8L0JyZWFkY3J1bWJOYXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBCcmVhZGNydW1iO1xuIl19 */");
+var StyledList = (0, _styledBase["default"])("ol", {
+  target: "e1oxrjfx1",
+  label: "StyledList"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1gc94n2",
+  styles: "display:inline-block;padding-left:0;margin-bottom:0;margin-top:0;list-style:none;"
+} : {
+  name: "1gc94n2",
+  styles: "display:inline-block;padding-left:0;margin-bottom:0;margin-top:0;list-style:none;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyZWFkY3J1bWIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCNEIiLCJmaWxlIjoiQnJlYWRjcnVtYi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUNvbXBvbmVudFNpemUsIHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdAbmRsYS9ob29rcyc7XG5pbXBvcnQgeyB1dWlkIH0gZnJvbSAnQG5kbGEvdXRpbCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IEJyZWFkY3J1bWJJdGVtLCB7IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgU2ltcGxlQnJlYWRjcnVtYkl0ZW0gfSBmcm9tICcuL0JyZWFkY3J1bWJJdGVtJztcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaXRlbXM6IFNpbXBsZUJyZWFkY3J1bWJJdGVtW107XG4gIGF1dG9Db2xsYXBzZT86IGJvb2xlYW47XG4gIGNvbGxhcHNlRmlyc3Q/OiBib29sZWFuO1xuICByZW5kZXJJdGVtPzogKGl0ZW06IEluZGV4ZWRCcmVhZGNydW1iSXRlbSwgdG90YWxDb3VudDogbnVtYmVyKSA9PiBSZWFjdE5vZGU7XG4gIHJlbmRlclNlcGFyYXRvcj86IChpdGVtOiBJbmRleGVkQnJlYWRjcnVtYkl0ZW0sIHRvdGFsQ291bnQ6IG51bWJlcikgPT4gUmVhY3ROb2RlO1xufVxuXG5jb25zdCBCcmVhZGNydW1iTmF2ID0gc3R5bGVkLm5hdmBgO1xuXG5jb25zdCBTdHlsZWRMaXN0ID0gc3R5bGVkLm9sYFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBhZGRpbmctbGVmdDogMDtcbiAgbWFyZ2luLWJvdHRvbTogMDtcbiAgbWFyZ2luLXRvcDogMDtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbmA7XG5cbmNvbnN0IEJyZWFkY3J1bWIgPSAoeyBpdGVtcywgYXV0b0NvbGxhcHNlLCByZW5kZXJJdGVtLCByZW5kZXJTZXBhcmF0b3IsIGNvbGxhcHNlRmlyc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBvbFJlZiA9IHVzZVJlZjxhbnk+KCk7XG4gIGNvbnN0IGNvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIC8vIE5vIGlkaW9tYXRpYyB3YXkgb2YgZGVhbGluZyB3aXRoIHNldHMgb2YgcmVmcyB5ZXRcbiAgLy8gU2VlOiBodHRwczovL2dpdGh1Yi5jb20vZmFjZWJvb2svcmVhY3QvaXNzdWVzLzE0MDcyI2lzc3VlY29tbWVudC00NDY3Nzc0MDZcbiAgY29uc3QgYnJlYWRjcnVtYkl0ZW1SZWZzID0gdXNlUmVmKG5ldyBNYXAoKSkuY3VycmVudDtcbiAgY29uc3Qgc2l6ZSA9IHVzZUNvbXBvbmVudFNpemUoY29udGFpbmVyUmVmKTtcblxuICB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIWF1dG9Db2xsYXBzZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICAvLyBDcmVhdGUgYW4gYXJyYXkgb2YgYWxsIGJyZWFkY3J1bWIgaXRlbSByZWZzXG4gICAgY29uc3QgaXRlbXMgPSBBcnJheS5mcm9tKGJyZWFkY3J1bWJJdGVtUmVmcykubWFwKChba2V5LCB2YWx1ZV0pID0+IHZhbHVlKTtcblxuICAgIC8vIENsZWFyIG1heCB3aWR0aCBvbiBhbGwgaXRlbXNcbiAgICBpdGVtcy5mb3JFYWNoKChlbCkgPT4ge1xuICAgICAgZWwuc2V0TWF4V2lkdGgoJ25vbmUnKTtcbiAgICB9KTtcblxuICAgIC8vIFNldCBtYXhXaWR0aCBvbiBicmVhZGNydW1iIHRleHQgaXRlbXMgaXRlcmF0aXZlbHkgdW50aWxcbiAgICAvLyB0aGUgb3JkZXJlZCBsaXN0IGZpdHMgb24gYSBzaW5nbGUgbGluZS4gSXQncyBvbiBhIHNpbmdsZSBsaW5lXG4gICAgLy8gaWYgdGhlIGhlaWdodCBvZiB0aGUgbGlzdCBpcyBsZXNzIHRoZW4gNzAuXG4gICAgaXRlbXMuZm9yRWFjaCgoZWwpID0+IHtcbiAgICAgIGlmIChvbFJlZi5jdXJyZW50Lm9mZnNldEhlaWdodCA+IDYwKSB7XG4gICAgICAgIGVsLnNldE1heFdpZHRoKCc0MHB4Jyk7XG4gICAgICB9XG4gICAgfSk7XG4gIH0sIFtzaXplXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8QnJlYWRjcnVtYk5hdiByZWY9e2NvbnRhaW5lclJlZn0gYXJpYS1sYWJlbD17dCgnYnJlYWRjcnVtYi5icmVhZGNydW1iJyl9PlxuICAgICAgPFN0eWxlZExpc3QgcmVmPXtvbFJlZn0+XG4gICAgICAgIHtpdGVtcy5tYXAoKGl0ZW0sIGluZGV4KSA9PiAoXG4gICAgICAgICAgPEJyZWFkY3J1bWJJdGVtXG4gICAgICAgICAgICBhdXRvQ29sbGFwc2U9e2F1dG9Db2xsYXBzZX1cbiAgICAgICAgICAgIHJlbmRlckl0ZW09e3JlbmRlckl0ZW19XG4gICAgICAgICAgICByZW5kZXJTZXBhcmF0b3I9e3JlbmRlclNlcGFyYXRvcn1cbiAgICAgICAgICAgIHJlZj17KGVsZW1lbnQpID0+XG4gICAgICAgICAgICAgIGVsZW1lbnQgPT09IG51bGwgfHwgKCFjb2xsYXBzZUZpcnN0ICYmIGluZGV4ID09PSAwKSAvLyBza2lwIGZpcnN0IGl0ZW0gd2hpY2ggaXMgbmV2ZXIgdHJ1bmNhdGVkXG4gICAgICAgICAgICAgICAgPyBicmVhZGNydW1iSXRlbVJlZnMuZGVsZXRlKGl0ZW0udG8pXG4gICAgICAgICAgICAgICAgOiBicmVhZGNydW1iSXRlbVJlZnMuc2V0KGl0ZW0udG8sIGVsZW1lbnQpXG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBrZXk9e3V1aWQoKX1cbiAgICAgICAgICAgIHRvdGFsQ291bnQ9e2l0ZW1zLmxlbmd0aH1cbiAgICAgICAgICAgIGl0ZW09e3sgLi4uaXRlbSwgaW5kZXggfX1cbiAgICAgICAgICAvPlxuICAgICAgICApKX1cbiAgICAgIDwvU3R5bGVkTGlzdD5cbiAgICA8L0JyZWFkY3J1bWJOYXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBCcmVhZGNydW1iO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
 var Breadcrumb = function Breadcrumb(_ref) {
-  var children = _ref.children,
-      items = _ref.items,
-      invertedStyle = _ref.invertedStyle,
-      t = _ref.t;
-  return (0, _core.jsx)("nav", {
+  var items = _ref.items,
+      autoCollapse = _ref.autoCollapse,
+      renderItem = _ref.renderItem,
+      renderSeparator = _ref.renderSeparator,
+      collapseFirst = _ref.collapseFirst;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var olRef = (0, _react.useRef)();
+  var containerRef = (0, _react.useRef)(null); // No idiomatic way of dealing with sets of refs yet
+  // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
+
+  var breadcrumbItemRefs = (0, _react.useRef)(new Map()).current;
+  var size = (0, _hooks.useComponentSize)(containerRef);
+  (0, _hooks.useIsomorphicLayoutEffect)(function () {
+    if (!autoCollapse) {
+      return;
+    } // Create an array of all breadcrumb item refs
+
+
+    var items = Array.from(breadcrumbItemRefs).map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          value = _ref3[1];
+
+      return value;
+    }); // Clear max width on all items
+
+    items.forEach(function (el) {
+      el.setMaxWidth('none');
+    }); // Set maxWidth on breadcrumb text items iteratively until
+    // the ordered list fits on a single line. It's on a single line
+    // if the height of the list is less then 70.
+
+    items.forEach(function (el) {
+      if (olRef.current.offsetHeight > 60) {
+        el.setMaxWidth('40px');
+      }
+    });
+  }, [size]);
+  return (0, _core.jsx)(BreadcrumbNav, {
+    ref: containerRef,
     "aria-label": t('breadcrumb.breadcrumb')
-  }, children, (0, _core.jsx)("ol", classes('list'), items.map(function (item, i) {
+  }, (0, _core.jsx)(StyledList, {
+    ref: olRef
+  }, items.map(function (item, index) {
     return (0, _core.jsx)(_BreadcrumbItem["default"], {
-      invertedStyle: invertedStyle,
-      classes: classes,
-      home: i === 0,
+      autoCollapse: autoCollapse,
+      renderItem: renderItem,
+      renderSeparator: renderSeparator,
+      ref: function ref(element) {
+        return element === null || !collapseFirst && index === 0 // skip first item which is never truncated
+        ? breadcrumbItemRefs["delete"](item.to) : breadcrumbItemRefs.set(item.to, element);
+      },
       key: (0, _util.uuid)(),
-      isCurrent: i === items.length - 1,
-      to: item.to,
-      name: item.name
-    }, i === 0 ? (0, _core.jsx)(_common.Home, {
-      className: "c-icon--20",
-      title: item.name
-    }) : item.name);
+      totalCount: items.length,
+      item: _objectSpread(_objectSpread({}, item), {}, {
+        index: index
+      })
+    });
   })));
 };
 
-var _default = (0, _reactI18next.withTranslation)()(Breadcrumb);
-
+var _default = Breadcrumb;
 exports["default"] = _default;

package/lib/Breadcrumb/BreadcrumbItem.d.ts

@@ -6,15 +6,23 @@
  *
  */
 import React, { ReactNode } from 'react';
-import BEMHelper, { ReturnObject } from 'react-bem-helper';
-interface Props {
-    classes: BEMHelper<ReturnObject>;
-    isCurrent: boolean;
-    children: ReactNode;
+export interface SimpleBreadcrumbItem {
     to: string | Partial<Location>;
-    home: boolean;
     name: string;
-    invertedStyle: boolean;
+}
+export interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {
+    index: number;
+}
+export interface BreadcrumbRenderProps {
+    item: IndexedBreadcrumbItem;
+    totalCount: number;
+}
+interface Props {
+    item: IndexedBreadcrumbItem;
+    autoCollapse?: boolean;
+    totalCount: number;
+    renderItem?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
+    renderSeparator?: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
 declare const BreadcrumbItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
 export default BreadcrumbItem;