Merge pull request #1369 from statisticsnorway/MIM-2040-breadcrumb-co…

…de-refined

Link element instead of Button - for breadcrumb mobileCompressedView

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

src/components/Breadcrumb/_breadcrumb.scss

@@ -7,24 +7,3 @@
   font-stretch: normal;
   line-height: 1.25;
 }
-
-.ssb-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
-  content: none !important;
-}
-
-.breadcrumb-button {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 16px;
-  font-family: 'Open Sans', sans-serif;
-
-  &:focus {
-    outline: 2px solid rgb(146 114 252 / 100%);
-    outline-offset: 4px;
-    border-radius: 2px;
-  }
-}

src/components/Breadcrumb/index.jsx

@@ -15,19 +15,12 @@ const Breadcrumb = ({ className, items, mobileCompressedView = false }) => {
 
   const shouldShowCompressed = isMobile && mobileCompressedView && items.length > 1
 
-  const handleNavigation = (link) => {
-    window.location.href = link
-  }
-
   return (
     <div className={`ssb-breadcrumbs${className ? ` ${className}` : ''}`}>
       {shouldShowCompressed ? (
-        <div className='breadcrumb-item' style={{ display: 'flex', alignItems: 'center' }}>
-          <ArrowLeft style={{ color: '#00824d', marginRight: '10px' }} />
-          <button onClick={() => handleNavigation(items[items.length - 2].link)} className='breadcrumb-button'>
-            {items[items.length - 2].text}
-          </button>
-        </div>
+        <Link href={items[items.length - 2].link} icon={<ArrowLeft size={20} />}>
+          {items[items.length - 2].text}
+        </Link>
       ) : (
         <>
           {items.slice(0, -1).map((item) => (