@ndla/ui 12.0.1 → 13.0.0

package/src/locale/messages-sma.ts

@@ -442,7 +442,7 @@ const messages = {
       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: {
@@ -456,18 +456,18 @@ const messages = {
       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: {
@@ -475,31 +475,42 @@ const messages = {
       },
     },
     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',
@@ -530,8 +541,10 @@ const messages = {
       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',
     },
@@ -594,6 +607,10 @@ const messages = {
     search: {
       placeholder: 'Søk',
     },
+    embedlink: {
+      copyTitle: 'Kopier innbyggingskode',
+      hasCopiedTitle: 'Innbyggingskode kopiert',
+    },
     filters: {
       subject: {
         useFilter: 'Bruk filter',
@@ -610,6 +627,7 @@ const messages = {
         openFilter: 'Filtrer',
         closeFilter: 'Lukk filter',
         heading: 'Filter',
+        filteredBy: 'Filtrert på',
       },
       alphabet: {
         letterFilter: 'Vis innhald på (bokstaven) {{letter}}.',
@@ -765,6 +783,14 @@ const messages = {
   createdBy: {
     content: 'Ressursen',
     text: 'er hentet fra',
+    concept: {
+      content: 'Forklaringa',
+      text: 'er utarbeida av',
+    },
+    listing: {
+      content: 'Lista',
+      text: 'er utarbeida av',
+    },
   },
   fagfornyelse: {
     frontpage: {
@@ -797,7 +823,7 @@ const messages = {
   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',
@@ -818,7 +844,7 @@ const messages = {
   title: 'Tittel',
   image: {
     altText: 'Alt-tekst',
-    imageText: 'Bilettekst',
+    caption: 'Bilettekst',
     type: 'Filtype',
     width: 'Breidde',
     height: 'Høgde',
@@ -938,6 +964,21 @@ const messages = {
     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',
+  },
 };
 
 export default messages;

package/src/main.scss

@@ -8,8 +8,6 @@
 @import 'Article/component.article-author-popup';
 
 @import 'global/components/component.bodybox';
-@import 'Breadcrumb/component.breadcrumb';
-@import 'Breadcrumb/component.breadcrumb-block';
 @import 'global/components/component.story-intro';
 @import 'Figure/component.figure';
 @import 'Figure/component.figure-license';

package/es/Breadcrumb/BreadcrumbBlock.js

@@ -1,90 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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; }
-
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import React, { useRef } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { useComponentSize, useIsomorphicLayoutEffect } from '@ndla/hooks';
-import { useTranslation } from 'react-i18next';
-import BreadcrumbItem from './BreadcrumbItem';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-var classes = BEMHelper({
-  name: 'breadcrumb-block',
-  prefix: 'c-'
-});
-
-var BreadcrumbBlock = function BreadcrumbBlock(_ref) {
-  var children = _ref.children,
-      items = _ref.items;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
-  var olRef = useRef();
-  var containerRef = useRef(null); // No idiomatic way of dealing with sets of refs yet
-  // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
-
-  var breadcrumbItemRefs = useRef(new Map()).current;
-  var size = useComponentSize(containerRef);
-  useIsomorphicLayoutEffect(function () {
-    // 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 > 70) {
-        el.setMaxWidth('40px');
-      }
-    });
-  }, [size]);
-  return ___EmotionJSX("nav", _extends({}, classes(''), {
-    ref: containerRef,
-    "aria-label": t('breadcrumb.breadcrumb')
-  }), children, ___EmotionJSX("ol", _extends({}, classes('list'), {
-    ref: olRef
-  }), items.map(function (item, i) {
-    return ___EmotionJSX(BreadcrumbItem, {
-      ref: function ref(element) {
-        return element === null || i === 0 // skip first item which is never truncated
-        ? breadcrumbItemRefs["delete"](item.to) : breadcrumbItemRefs.set(item.to, element);
-      },
-      classes: classes,
-      key: item.to,
-      isCurrent: i === items.length - 1,
-      to: item.to,
-      name: item.name,
-      home: false,
-      invertedStyle: false
-    }, item.name);
-  })));
-};
-
-export default BreadcrumbBlock;

package/lib/Breadcrumb/BreadcrumbBlock.d.ts

@@ -1,15 +0,0 @@
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import { ReactNode } from 'react';
-import { BreadcrumbItemI } from './Breadcrumb';
-interface Props {
-    children?: ReactNode;
-    items: BreadcrumbItemI[];
-}
-declare const BreadcrumbBlock: ({ children, items }: Props) => JSX.Element;
-export default BreadcrumbBlock;

package/lib/Breadcrumb/BreadcrumbBlock.js

@@ -1,105 +0,0 @@
-"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 = _interopRequireWildcard(require("react"));
-
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-
-var _hooks = require("@ndla/hooks");
-
-var _reactI18next = require("react-i18next");
-
-var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
-
-var _core = require("@emotion/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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; }
-
-var classes = (0, _reactBemHelper["default"])({
-  name: 'breadcrumb-block',
-  prefix: 'c-'
-});
-
-var BreadcrumbBlock = function BreadcrumbBlock(_ref) {
-  var children = _ref.children,
-      items = _ref.items;
-
-  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 () {
-    // 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 > 70) {
-        el.setMaxWidth('40px');
-      }
-    });
-  }, [size]);
-  return (0, _core.jsx)("nav", _extends({}, classes(''), {
-    ref: containerRef,
-    "aria-label": t('breadcrumb.breadcrumb')
-  }), children, (0, _core.jsx)("ol", _extends({}, classes('list'), {
-    ref: olRef
-  }), items.map(function (item, i) {
-    return (0, _core.jsx)(_BreadcrumbItem["default"], {
-      ref: function ref(element) {
-        return element === null || i === 0 // skip first item which is never truncated
-        ? breadcrumbItemRefs["delete"](item.to) : breadcrumbItemRefs.set(item.to, element);
-      },
-      classes: classes,
-      key: item.to,
-      isCurrent: i === items.length - 1,
-      to: item.to,
-      name: item.name,
-      home: false,
-      invertedStyle: false
-    }, item.name);
-  })));
-};
-
-var _default = BreadcrumbBlock;
-exports["default"] = _default;

package/src/Breadcrumb/BreadcrumbBlock.tsx

@@ -1,80 +0,0 @@
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import React, { ReactNode, useRef } from 'react';
-import BEMHelper, { ReturnObject } from 'react-bem-helper';
-import { useComponentSize, useIsomorphicLayoutEffect } from '@ndla/hooks';
-import { useTranslation } from 'react-i18next';
-import BreadcrumbItem from './BreadcrumbItem';
-import { BreadcrumbItemI } from './Breadcrumb';
-
-const classes: BEMHelper<ReturnObject> = BEMHelper({
-  name: 'breadcrumb-block',
-  prefix: 'c-',
-});
-
-interface Props {
-  children?: ReactNode;
-  items: BreadcrumbItemI[];
-}
-
-const BreadcrumbBlock = ({ children, items }: Props) => {
-  const { t } = useTranslation();
-  const olRef = useRef<any>();
-  const containerRef = useRef<HTMLDivElement>(null);
-  // No idiomatic way of dealing with sets of refs yet
-  // See: https://github.com/facebook/react/issues/14072#issuecomment-446777406
-  const breadcrumbItemRefs = useRef(new Map()).current;
-  const size = useComponentSize(containerRef);
-
-  useIsomorphicLayoutEffect(() => {
-    // Create an array of all breadcrumb item refs
-    const items = Array.from(breadcrumbItemRefs).map(([key, value]) => value);
-
-    // Clear max width on all items
-    items.forEach((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((el) => {
-      if (olRef.current.offsetHeight > 70) {
-        el.setMaxWidth('40px');
-      }
-    });
-  }, [size]);
-
-  return (
-    <nav {...classes('')} ref={containerRef} aria-label={t('breadcrumb.breadcrumb')}>
-      {children}
-      <ol {...classes('list')} ref={olRef}>
-        {items.map((item, i) => (
-          <BreadcrumbItem
-            ref={(element) =>
-              element === null || i === 0 // skip first item which is never truncated
-                ? breadcrumbItemRefs.delete(item.to)
-                : breadcrumbItemRefs.set(item.to, element)
-            }
-            classes={classes}
-            key={item.to}
-            isCurrent={i === items.length - 1}
-            to={item.to}
-            name={item.name}
-            home={false}
-            invertedStyle={false}>
-            {item.name}
-          </BreadcrumbItem>
-        ))}
-      </ol>
-    </nav>
-  );
-};
-
-export default BreadcrumbBlock;

package/src/Breadcrumb/component.breadcrumb-block.scss

@@ -1,98 +0,0 @@
-/**
-** BREADCRUMB BLOCK
-**
-** EXAMPLE:
-** <div class="c-breadcrumb-block">
-**  <ol class="c-breadcrumb-block__list">
-**    <li class="c-breadcrumb-block__item">
-**      <a href="#">Medieuttrykk og mediesamfunnet</a>
-**    </li>
-**    <li class="c-breadcrumb-block__item>
-**      <a href="#">Idéutvikling</a>
-**    </li>
-**  </ol>
-** </div>
-**/
-
-.c-breadcrumb-block {
-  display: none;
-
-  @include mq(desktop) {
-    display: block;
-  }
-}
-
-.c-breadcrumb-block__list {
-  padding-top: 1px;
-  margin-left: $spacing;
-  margin-bottom: 0;
-  margin-top: 0;
-  display: inline-block;
-  list-style: none;
-  text-align: left;
-}
-.c-breadcrumb-block__item {
-  display: inline-block;
-  margin-right: $spacing--small/2;
-  margin-bottom: 0;
-  text-transform: none;
-  a:hover {
-    box-shadow: none;
-  }
-  &:before {
-    display: none;
-  }
-
-  .c-icon {
-    width: 14px;
-    height: 14px;
-    color: $brand-color;
-    margin-top: -1px;
-    margin-left: $spacing--small/2;
-  }
-
-  &:first-child {
-    .c-icon {
-      display: none;
-    }
-  }
-
-  &:not(:first-child) {
-    display: inline-flex;
-    align-items: center;
-    a,
-    span {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      display: inline-block;
-    }
-  }
-
-  &:last-child {
-    .c-icon {
-      display: none;
-    }
-  }
-
-  span {
-    color: $brand-color;
-  }
-}
-.c-breadcrumb-block__item:last-child {
-  &:after {
-    display: none;
-  }
-}
-.c-breadcrumb-block__item:nth-child(1) {
-  display: block;
-  text-align: left;
-  @include inuit-font-size(14px);
-  font-weight: $font-weight-bold;
-  &:after {
-    display: none;
-  }
-}
-.c-breadcrumb-block__item--home {
-  display: none;
-}

package/src/Breadcrumb/component.breadcrumb.scss

@@ -1,104 +0,0 @@
-/**
-** BREADCRUMB
-**
-** EXAMPLE:
-** <div class="c-breadcrumb">
-**  <ol class="c-breadcrumb__list">
-**    <li class="c-breadcrumb__item c-breadcrumb__item--home">
-**      <a href="#"><svg home /></a>
-**    </li>
-**    <li class="c-breadcrumb__item">
-**      <a href="#">Medieuttrykk og mediesamfunnet</a>
-**    </li>
-**  </ol>
-** </div>
-**/
-
-.c-breadcrumb {
-  max-width: 100%;
-  @include inuit-font-size(18px);
-  display: block;
-}
-.c-breadcrumb__list {
-  display: inline-block;
-  padding-left: 0;
-  margin-bottom: 0;
-  margin-top: 0;
-  list-style: none;
-}
-.c-breadcrumb__item {
-  font-weight: $font-weight-normal;
-  padding-right: $spacing--small / 2;
-  margin-bottom: 0;
-  margin-left: 0;
-  display: block;
-
-  &:not(.c-breadcrumb__item--home) {
-    .c-icon {
-      width: 14px;
-      height: 14px;
-      margin-left: $spacing--small/2;
-      margin-top: -1px;
-    }
-  }
-
-  @include mq(tablet) {
-    display: inline-block;
-  }
-
-  a {
-    text-decoration: none;
-    color: $primary-color;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: $primary-color;
-    }
-  }
-
-  &--invertedStyle {
-    color: #fff;
-    a {
-      color: #fff;
-  
-      &:hover,
-      &:active,
-      &:focus {
-        color: #fff;
-      }
-    }
-  }
-
-  &:before {
-    display: none;
-  }
-
-  &:first-child {
-    a {
-      box-shadow: none;
-      border-bottom: none;
-    }
-  }
-  &:last-child {
-    .c-icon {
-      display: none;
-    }
-  }
-}
-.c-breadcrumb__item--home {
-  a {
-    border-bottom: none;
-  }
-
-  @include mq(tablet) {
-    padding-right: $spacing--small;
-
-    &:after {
-      padding-left: $spacing--small;
-      content: '|';
-      @include inuit-font-size(14px);
-      color: $primary-color;
-    }
-  }
-}