From f3e2bdfd3de685e00897e1aa06f94b5770612f51 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Mon, 21 Jan 2019 21:17:37 +0100
Subject: [PATCH] feat: move #step-indicator into components and enhance the
 styles with the new defined style

---
 CHANGELOG.md                                  |   6 +-
 packages/dnb-design-system-portal/src/html.js |   2 +-
 .../step-indicator.md                         |   6 +-
 .../src/pages/uilib/components/switch.md      |   2 +-
 .../src/pages/uilib/components/tabs.md        |   2 +-
 .../src/pages/uilib/patterns/summary-table.md |   2 +-
 .../src/pages/uilib/patterns/view-title.md    |   2 +-
 .../uilib/components/demos/StepIndicator.js   |  46 ++
 .../src/uilib/components/demos/allParts.js    |   2 +
 .../components/examples/StepIndicator.txt     |  20 +
 .../src/uilib/patterns/demos/allParts.js      |   2 -
 .../uilib/patterns/examples/StepIndicator.txt |   6 -
 packages/dnb-ui-lib/src/components/index.js   |   3 +
 .../step-indicator/Example.js                 |  21 +-
 .../step-indicator/StepIndicator.js           |  98 ++--
 .../__tests__/StepIndicator.test.js           |  78 +++
 .../__snapshots__/StepIndicator.test.js.snap  | 466 ++++++++++++++++++
 .../step-indicator/description.md             |   4 -
 .../step-indicator/details.md                 |   0
 .../step-indicator/index.js                   |   0
 .../step-indicator/style.js                   |   0
 .../step-indicator/style/_step-indicator.scss | 104 ++++
 .../style/dnb-step-indicator.scss             |   0
 .../step-indicator/style/index.js             |   0
 .../themes/dnb-step-indicator-theme-ui.scss   |  42 ++
 .../step-indicator/web-component.js           |   0
 .../dnb-ui-lib/src/components/tabs/Tabs.js    |  21 +-
 .../__tests__/__snapshots__/Tabs.test.js.snap |  97 ++--
 .../src/components/tabs/style/_tabs.scss      |  33 +-
 .../tabs/style/themes/dnb-tabs-theme-ui.scss  |  27 +-
 packages/dnb-ui-lib/src/index.js              |   4 +-
 packages/dnb-ui-lib/src/patterns/index.js     |   3 -
 .../step-indicator/style/_step-indicator.scss |  68 ---
 .../dnb-ui-lib/src/style/core/dnb-core.scss   |  11 -
 .../src/style/dnb-ui-components.scss          |   1 +
 .../dnb-ui-lib/src/style/dnb-ui-patterns.scss |   1 -
 .../src/style/themes/dnb-theme-ui.scss        |   1 +
 37 files changed, 948 insertions(+), 233 deletions(-)
 rename packages/dnb-design-system-portal/src/pages/uilib/{patterns => components}/step-indicator.md (67%)
 create mode 100644 packages/dnb-design-system-portal/src/uilib/components/demos/StepIndicator.js
 create mode 100644 packages/dnb-design-system-portal/src/uilib/components/examples/StepIndicator.txt
 delete mode 100644 packages/dnb-design-system-portal/src/uilib/patterns/examples/StepIndicator.txt
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/Example.js (74%)
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/StepIndicator.js (71%)
 create mode 100644 packages/dnb-ui-lib/src/components/step-indicator/__tests__/StepIndicator.test.js
 create mode 100644 packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/description.md (93%)
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/details.md (100%)
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/index.js (100%)
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/style.js (100%)
 create mode 100644 packages/dnb-ui-lib/src/components/step-indicator/style/_step-indicator.scss
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/style/dnb-step-indicator.scss (100%)
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/style/index.js (100%)
 create mode 100644 packages/dnb-ui-lib/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss
 rename packages/dnb-ui-lib/src/{patterns => components}/step-indicator/web-component.js (100%)
 delete mode 100644 packages/dnb-ui-lib/src/patterns/step-indicator/style/_step-indicator.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52244d9d8b8..c721a7c4efc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,9 +4,11 @@
 
 - Change from 1px to 2px outline on input for error state
 - Signal Orange is replaced by Emerald Green for focus state
-- Tab and Progress bars have now Sea Green Alt
+- Tab and StepIndicator (Progress bar) have now Sea Green Alt underline
 - The Switch component has now an outline of 2px
-- Hover on Tabs looks more lie an anchor
+- Hover on Tabs looks more like an anchor
 - Color change: Sea Green 4% -> Mint Green 12%
 
+More in the [Releases section on GitHub](https://github.com/dnbexperience/eufemia/releases)
+
 ---
diff --git a/packages/dnb-design-system-portal/src/html.js b/packages/dnb-design-system-portal/src/html.js
index 945273c07f3..43b15800d34 100644
--- a/packages/dnb-design-system-portal/src/html.js
+++ b/packages/dnb-design-system-portal/src/html.js
@@ -16,7 +16,7 @@ export default class HTML extends PureComponent {
           <meta name="robots" content="noindex" />
           <meta
             name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=yes, maximum-scale=12"
           />
           {this.props.headComponents}
         </head>
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/patterns/step-indicator.md b/packages/dnb-design-system-portal/src/pages/uilib/components/step-indicator.md
similarity index 67%
rename from packages/dnb-design-system-portal/src/pages/uilib/patterns/step-indicator.md
rename to packages/dnb-design-system-portal/src/pages/uilib/components/step-indicator.md
index 44e0fd4cc63..a77271b9d15 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/patterns/step-indicator.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/step-indicator.md
@@ -2,8 +2,8 @@
 header: 'UI Library'
 title: 'StepIndicator'
 draft: false
-status: wip
-order: 12
+status: null
+order: 14
 ---
 
 <!--
@@ -11,6 +11,6 @@ order: 12
   Do not change the content!
 -->
 
-import StepIndicatorPage from 'Src/uilib/patterns/demos/StepIndicator'
+import StepIndicatorPage from 'Src/uilib/components/demos/StepIndicator'
 
 <StepIndicatorPage />
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/switch.md b/packages/dnb-design-system-portal/src/pages/uilib/components/switch.md
index 78298a0276d..849813bda66 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/switch.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/switch.md
@@ -3,7 +3,7 @@ header: 'UI Library'
 title: 'Switch'
 draft: false
 status: wip
-order: 14
+order: 15
 ---
 
 <!--
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/tabs.md b/packages/dnb-design-system-portal/src/pages/uilib/components/tabs.md
index 321fc5f39b6..d648b24bcae 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/tabs.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/tabs.md
@@ -3,7 +3,7 @@ header: 'UI Library'
 title: 'Tabs'
 draft: false
 status: null
-order: 15
+order: 16
 ---
 
 <!--
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/patterns/summary-table.md b/packages/dnb-design-system-portal/src/pages/uilib/patterns/summary-table.md
index b9232592009..71d882bbbbb 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/patterns/summary-table.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/patterns/summary-table.md
@@ -3,7 +3,7 @@ header: 'UI Library'
 title: 'SummaryTable'
 draft: false
 status: wip
-order: 13
+order: 12
 ---
 
 <!--
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/patterns/view-title.md b/packages/dnb-design-system-portal/src/pages/uilib/patterns/view-title.md
index b140ce722f7..3c01240d8b3 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/patterns/view-title.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/patterns/view-title.md
@@ -3,7 +3,7 @@ header: 'UI Library'
 title: 'ViewTitle'
 draft: false
 status: wip
-order: 14
+order: 13
 ---
 
 <!--
diff --git a/packages/dnb-design-system-portal/src/uilib/components/demos/StepIndicator.js b/packages/dnb-design-system-portal/src/uilib/components/demos/StepIndicator.js
new file mode 100644
index 00000000000..a72f328e631
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/uilib/components/demos/StepIndicator.js
@@ -0,0 +1,46 @@
+/**
+ * ATTENTION: This file is auto generated by using "makeDemosFactory".
+ * Do not change the content!
+ *
+ * "Component" Demo setup
+ * Ready for imporing in page
+ *
+ */
+
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import ItemWrapper from '../../../shared/parts/uilib/ItemWrapper'
+import DemoComponent, {
+  Example as CodeComponent
+} from 'dnb-ui-lib/src/components/step-indicator/Example'
+import Description from 'dnb-ui-lib/src/components/step-indicator/description.md'
+import Details from 'dnb-ui-lib/src/components/step-indicator/details.md'
+import ExampleCode from 'raw-loader!../examples/StepIndicator.txt'
+
+export default class StepIndicatorDemo extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    id: PropTypes.string,
+    Description: PropTypes.func,
+    Details: PropTypes.func,
+    DemoComponent: PropTypes.func,
+    CodeComponent: PropTypes.func,
+    hideTabs: PropTypes.bool
+  }
+  static defaultProps = {
+    title: 'StepIndicator',
+    id: 'step-indicator',
+    ExampleCode,
+    Description,
+    Details,
+    DemoComponent,
+    CodeComponent,
+    callback: CodeComponent.AdditionalCallback || null,
+    hideTabs: false
+  }
+  render() {
+    return (
+      <ItemWrapper {...StepIndicatorDemo.defaultProps} {...this.props} />
+    )
+  }
+}
diff --git a/packages/dnb-design-system-portal/src/uilib/components/demos/allParts.js b/packages/dnb-design-system-portal/src/uilib/components/demos/allParts.js
index f9f9525a518..414bc7d5150 100644
--- a/packages/dnb-design-system-portal/src/uilib/components/demos/allParts.js
+++ b/packages/dnb-design-system-portal/src/uilib/components/demos/allParts.js
@@ -16,6 +16,7 @@ import Logo from './Logo'
 import Modal from './Modal'
 import Notification from './Notification'
 import Slider from './Slider'
+import StepIndicator from './StepIndicator'
 import Switch from './Switch'
 import Tabs from './Tabs'
 
@@ -33,6 +34,7 @@ export default [
   Modal,
   Notification,
   Slider,
+  StepIndicator,
   Switch,
   Tabs
 ]
diff --git a/packages/dnb-design-system-portal/src/uilib/components/examples/StepIndicator.txt b/packages/dnb-design-system-portal/src/uilib/components/examples/StepIndicator.txt
new file mode 100644
index 00000000000..44eb2017d7b
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/uilib/components/examples/StepIndicator.txt
@@ -0,0 +1,20 @@
+<StepIndicator
+  active_item="2"
+  active_url={this.state.active_url}
+  data={dataBlob}
+  on_change={this.onChangeHandler}
+/>
+{/* <StepIndicator
+          active_item="3"
+          data={[
+            {
+              title: 'Om din nye bolig'
+            },
+            {
+              title: 'Ditt lån og egenkapital'
+            },
+            {
+              title: 'Oppsummering'
+            }
+          ]}
+        /> */}
diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/demos/allParts.js b/packages/dnb-design-system-portal/src/uilib/patterns/demos/allParts.js
index 087091b36c8..fff0782dbae 100644
--- a/packages/dnb-design-system-portal/src/uilib/patterns/demos/allParts.js
+++ b/packages/dnb-design-system-portal/src/uilib/patterns/demos/allParts.js
@@ -14,7 +14,6 @@ import Grid from './Grid'
 import HelperClasses from './HelperClasses'
 import MainNav from './MainNav'
 import RangeSlider from './RangeSlider'
-import StepIndicator from './StepIndicator'
 import SummaryTable from './SummaryTable'
 import ViewTitle from './ViewTitle'
 
@@ -30,7 +29,6 @@ export default [
   HelperClasses,
   MainNav,
   RangeSlider,
-  StepIndicator,
   SummaryTable,
   ViewTitle
 ]
diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/examples/StepIndicator.txt b/packages/dnb-design-system-portal/src/uilib/patterns/examples/StepIndicator.txt
deleted file mode 100644
index d7afbd1d930..00000000000
--- a/packages/dnb-design-system-portal/src/uilib/patterns/examples/StepIndicator.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-<StepIndicator
-  active_item="2"
-  active_url={this.state.active_url}
-  data={dataBlob}
-  on_change={this.onChangeHandler}
-/>
diff --git a/packages/dnb-ui-lib/src/components/index.js b/packages/dnb-ui-lib/src/components/index.js
index 102e315c1ca..28201f2c1e8 100644
--- a/packages/dnb-ui-lib/src/components/index.js
+++ b/packages/dnb-ui-lib/src/components/index.js
@@ -25,6 +25,7 @@ import Logo from './logo/Logo'
 import Modal from './modal/Modal'
 import Notification from './notification/Notification'
 import Slider from './slider/Slider'
+import StepIndicator from './step-indicator/StepIndicator'
 import Switch from './switch/Switch'
 import Tabs from './tabs/Tabs'
 
@@ -43,6 +44,7 @@ export {
   Modal,
   Notification,
   Slider,
+  StepIndicator,
   Switch,
   Tabs
 }
@@ -62,6 +64,7 @@ export const getComponents = () => {
     Modal,
     Notification,
     Slider,
+    StepIndicator,
     Switch,
     Tabs
   }
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/Example.js b/packages/dnb-ui-lib/src/components/step-indicator/Example.js
similarity index 74%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/Example.js
rename to packages/dnb-ui-lib/src/components/step-indicator/Example.js
index 0827114e880..d244092f5d1 100644
--- a/packages/dnb-ui-lib/src/patterns/step-indicator/Example.js
+++ b/packages/dnb-ui-lib/src/components/step-indicator/Example.js
@@ -54,6 +54,26 @@ class Example extends PureComponent {
             data={dataBlob}
             on_change={this.onChangeHandler}
           />
+          <p className="example-caption">
+            StepIndicator with urls, for visited steps only
+          </p>
+        </div>
+        <div className="example-box">
+          {/* <StepIndicator
+            active_item="3"
+            data={[
+              {
+                title: 'Om din nye bolig'
+              },
+              {
+                title: 'Ditt lån og egenkapital'
+              },
+              {
+                title: 'Oppsummering'
+              }
+            ]}
+          /> */}
+          <p className="example-caption">StepIndicator with no urls</p>
         </div>
       </Fragment>
     )
@@ -68,7 +88,6 @@ const data = [
   {
     title: 'Ditt lån og egenkapital',
     url: '?b'
-    // url_future: ''
   },
   {
     title: 'Oppsummering',
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/StepIndicator.js b/packages/dnb-ui-lib/src/components/step-indicator/StepIndicator.js
similarity index 71%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/StepIndicator.js
rename to packages/dnb-ui-lib/src/components/step-indicator/StepIndicator.js
index cb02944227a..a9239456f20 100644
--- a/packages/dnb-ui-lib/src/patterns/step-indicator/StepIndicator.js
+++ b/packages/dnb-ui-lib/src/components/step-indicator/StepIndicator.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { PureComponent, Fragment } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
@@ -12,7 +12,7 @@ import {
   processChildren,
   dispatchCustomElementEvent
 } from '../../shared/component-helper'
-// import './style/dnb-step-indicator.scss' // no good solution to import the style here
+// import { Dummy } from '../tabs/Tabs'
 
 const renderProps = {
   on_change: null
@@ -128,11 +128,16 @@ export default class StepIndicator extends PureComponent {
     const data = StepIndicator.getData(this.props)
     let activeItem = parseFloat(active_item) - 1
 
-    if (active_url !== null && data.length > 0)
+    if (
+      (active_url || !(parseFloat(active_item) > 0)) &&
+      data.length > 0
+    ) {
       activeItem = data.reduce(
-        (acc, { url }, i) => (url == active_url ? i : acc),
-        activeItem
+        (acc, { url }, i) =>
+          url && (url === active_item || url === active_url) ? i : acc,
+        1
       )
+    }
 
     const params = {
       className: classnames('dnb-step-indicator', className, _className)
@@ -143,36 +148,30 @@ export default class StepIndicator extends PureComponent {
 
     return (
       <div {...params}>
-        <div className="dnb-width-limit">
-          {data.length > 0 && (
-            <ul className="dnb-step-indicator__list">
-              {data.map((props, i) => (
-                <li
-                  key={`bc${i}`}
-                  className={classnames(
-                    'dnb-breadcrumb',
-                    i === activeItem
-                      ? 'dnb-breadcrumb--active dnb-typo-book'
-                      : null,
-                    i < activeItem
-                      ? 'dnb-breadcrumb--visited typo-light'
-                      : null
-                  )}
-                >
-                  <ItemContent
-                    {...{
-                      activeItem,
-                      show_numbers,
-                      number: i,
-                      ...props
-                    }}
-                    onChangeHandler={this.onChangeHandler}
-                  />
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
+        {data.length > 0 && (
+          <ul className="dnb-step-indicator__list">
+            {data.map((props, i) => (
+              <li
+                key={`bc${i}`}
+                className={classnames(
+                  'dnb-step-indicator__item',
+                  i === activeItem ? 'dnb-step-indicator--active' : null,
+                  i < activeItem ? 'dnb-step-indicator--visited' : null
+                )}
+              >
+                <ItemContent
+                  {...{
+                    activeItem,
+                    show_numbers,
+                    number: i,
+                    ...props
+                  }}
+                  onChangeHandler={this.onChangeHandler}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
     )
   }
@@ -217,38 +216,39 @@ class ItemContent extends PureComponent {
     return url ? (
       <a
         className={classnames(
-          'dnb-breadcrumb-item-text',
-          'dnb-breadcrumb-item-text--link',
-          number > activeItem ? 'typo-light' : null
+          'dnb-step-indicator-item-content',
+          'dnb-step-indicator-item-content--link'
         )}
         href={url}
         onClick={this._onChangeHandler}
       >
-        <ItemContentNumber {...{ title, number, ...rest }} />
+        <ItemContentWrapper {...{ title, number, ...rest }} />
       </a>
     ) : (
       <span
         className={classnames(
-          'dnb-breadcrumb-item-text',
-          'dnb-breadcrumb-item-text--static',
-          number > activeItem ? ' typo-light' : null
+          'dnb-step-indicator-item-content',
+          'dnb-step-indicator-item-content--static'
         )}
       >
-        <ItemContentNumber {...{ number, title, ...rest }} />
+        <ItemContentWrapper {...{ number, title, ...rest }} />
       </span>
     )
   }
 }
 
-const ItemContentNumber = ({ number, title, show_numbers }) => (
-  <Fragment>
-    <span className="dnb-breadcrumb-number">
+const ItemContentWrapper = ({ number, title, show_numbers }) => (
+  <>
+    <span className="dnb-step-indicator-number">
       {(show_numbers && `${number + 1}. `) || ''}
     </span>
-    {title}
-  </Fragment>
+    <span className="dnb-step-indicator-text">
+      {title}
+      {/* <Dummy>{title}</Dummy> */}
+    </span>
+  </>
 )
-ItemContentNumber.propTypes = {
+ItemContentWrapper.propTypes = {
   number: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
   show_numbers: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
diff --git a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/StepIndicator.test.js b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/StepIndicator.test.js
new file mode 100644
index 00000000000..d448a7da5f5
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/StepIndicator.test.js
@@ -0,0 +1,78 @@
+/**
+ * Component Test
+ *
+ */
+
+import React from 'react'
+import {
+  mount,
+  fakeProps,
+  axeComponent,
+  toJson,
+  loadScss
+} from '../../../core/jest/jestSetup'
+import Component from '../StepIndicator'
+// just to make sure we re-run the test in watch mode due to changes in this file
+import '../style/dnb-step-indicator.scss'
+import '../style/themes/dnb-step-indicator-theme-ui.scss'
+
+const props = fakeProps(require.resolve('../StepIndicator'), {
+  // all: true,
+  optional: true
+})
+delete props.render
+// props.active_url = '?b'
+
+const active_url = '?b'
+const stepIndicatorListData = [
+  {
+    title: 'Aa',
+    url: '?a'
+  },
+  {
+    title: 'Bb',
+    url: '?b'
+  },
+  {
+    title: 'Cc',
+    url: '?c',
+    url_future: ''
+  }
+]
+
+describe('StepIndicator component', () => {
+  const Comp = mount(
+    <Component
+      {...props}
+      data={stepIndicatorListData}
+      active_url={active_url}
+    />
+  )
+
+  it('have to match snapshot', () => {
+    expect(toJson(Comp)).toMatchSnapshot()
+  })
+
+  it('have a "active_url" state have to be same as prop from startup', () => {
+    expect(Comp.state().active_url).toBe(active_url)
+  })
+
+  it('should validate with ARIA rules', async () => {
+    expect(await axeComponent(Comp)).toHaveNoViolations()
+  })
+})
+
+describe('StepIndicator scss', () => {
+  it('have to match snapshot', () => {
+    const scss = loadScss(
+      require.resolve('../style/dnb-step-indicator.scss')
+    )
+    expect(scss).toMatchSnapshot()
+  })
+  it('have to match default theme snapshot', () => {
+    const scss = loadScss(
+      require.resolve('../style/themes/dnb-step-indicator-theme-ui.scss')
+    )
+    expect(scss).toMatchSnapshot()
+  })
+})
diff --git a/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
new file mode 100644
index 00000000000..b160df3fdef
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
@@ -0,0 +1,466 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StepIndicator component have to match snapshot 1`] = `
+<StepIndicator
+  active_item="active_item"
+  active_url="?b"
+  class="class"
+  className="className"
+  data={
+    Array [
+      Object {
+        "title": "Aa",
+        "url": "?a",
+      },
+      Object {
+        "title": "Bb",
+        "url": "?b",
+      },
+      Object {
+        "title": "Cc",
+        "url": "?c",
+        "url_future": "",
+      },
+    ]
+  }
+  on_change={[Function]}
+  show_numbers="show_numbers"
+>
+  <div
+    className="dnb-step-indicator className class"
+  >
+    <ul
+      className="dnb-step-indicator__list"
+    >
+      <li
+        className="dnb-step-indicator__item dnb-step-indicator--visited"
+        key="bc0"
+      >
+        <ItemContent
+          activeItem={1}
+          number={0}
+          onChangeHandler={[Function]}
+          show_numbers="show_numbers"
+          title="Aa"
+          url="?a"
+          url_future={null}
+          url_passed={null}
+        >
+          <a
+            className="dnb-step-indicator-item-content dnb-step-indicator-item-content--link"
+            href="?a"
+            onClick={[Function]}
+          >
+            <ItemContentWrapper
+              number={0}
+              onChangeHandler={[Function]}
+              show_numbers="show_numbers"
+              title="Aa"
+              url="?a"
+            >
+              <span
+                className="dnb-step-indicator-number"
+              >
+                1. 
+              </span>
+              <span
+                className="dnb-step-indicator-text"
+              >
+                Aa
+              </span>
+            </ItemContentWrapper>
+          </a>
+        </ItemContent>
+      </li>
+      <li
+        className="dnb-step-indicator__item dnb-step-indicator--active"
+        key="bc1"
+      >
+        <ItemContent
+          activeItem={1}
+          number={1}
+          onChangeHandler={[Function]}
+          show_numbers="show_numbers"
+          title="Bb"
+          url="?b"
+          url_future={null}
+          url_passed={null}
+        >
+          <a
+            className="dnb-step-indicator-item-content dnb-step-indicator-item-content--link"
+            href="?b"
+            onClick={[Function]}
+          >
+            <ItemContentWrapper
+              number={1}
+              onChangeHandler={[Function]}
+              show_numbers="show_numbers"
+              title="Bb"
+              url="?b"
+            >
+              <span
+                className="dnb-step-indicator-number"
+              >
+                2. 
+              </span>
+              <span
+                className="dnb-step-indicator-text"
+              >
+                Bb
+              </span>
+            </ItemContentWrapper>
+          </a>
+        </ItemContent>
+      </li>
+      <li
+        className="dnb-step-indicator__item"
+        key="bc2"
+      >
+        <ItemContent
+          activeItem={1}
+          number={2}
+          onChangeHandler={[Function]}
+          show_numbers="show_numbers"
+          title="Cc"
+          url="?c"
+          url_future=""
+          url_passed={null}
+        >
+          <span
+            className="dnb-step-indicator-item-content dnb-step-indicator-item-content--static"
+          >
+            <ItemContentWrapper
+              number={2}
+              onChangeHandler={[Function]}
+              show_numbers="show_numbers"
+              title="Cc"
+              url="?c"
+            >
+              <span
+                className="dnb-step-indicator-number"
+              >
+                3. 
+              </span>
+              <span
+                className="dnb-step-indicator-text"
+              >
+                Cc
+              </span>
+            </ItemContentWrapper>
+          </span>
+        </ItemContent>
+      </li>
+    </ul>
+  </div>
+</StepIndicator>
+`;
+
+exports[`StepIndicator scss have to match default theme snapshot 1`] = `
+"/*
+* StepIndicator theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Typography
+ *
+ * The font-family properties are defined in the properties.scss file, like:
+ * --font-family-default:
+ *
+ */
+.dnb-typo-std,
+.dnb-typo-book {
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-style: normal; }
+
+.dnb-typo-medium {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-medium);
+  font-style: normal; }
+
+.dnb-typo-demi {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-demi);
+  font-style: normal; }
+
+.dnb-typo-number--lining {
+  font-variant-numeric: lining-nums;
+  font-feature-settings: \\"lnum\\"; }
+
+.dnb-typo-number--tabular {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: \\"lnum\\"; }
+
+.dnb-typo-number--oldstyle {
+  font-variant-numeric: oldstyle-nums;
+  font-feature-settings: \\"onum\\"; }
+
+.dnb-typo-number--proportional {
+  font-variant-numeric: proportional-nums;
+  font-feature-settings: \\"pnum\\"; }
+
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../../assets/fonts//FedraSansStd-Book.eot\\");
+  src: url(\\"../../../../../assets/fonts//FedraSansStd-Book.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Book.woff2\\") format(\\"woff2\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Book.woff\\") format(\\"woff\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Book.ttf\\") format(\\"truetype\\");
+  font-weight: normal;
+  font-style: normal;
+  font-display: fallback; }
+
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
+  font-style: normal;
+  font-display: fallback; }
+
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal;
+  font-display: fallback; }
+
+.dnb-step-indicator-item-content--static {
+  color: var(--color-emerald-green); }
+
+.dnb-step-indicator-item-content--link {
+  color: var(--color-sea-green-alt); }
+
+.no-touch .dnb-step-indicator--visited .dnb-step-indicator-item-content--link:hover[disabled] {
+  cursor: not-allowed; }
+
+.no-touch .dnb-step-indicator--visited .dnb-step-indicator-item-content--link:hover:not([disabled]) {
+  border-color: var(--color-sea-green); }
+
+.dnb-step-indicator--active::after {
+  background-color: var(--color-sea-green-alt); }
+
+.dnb-step-indicator--active .dnb-step-indicator-item-content {
+  font-family: var(--font-family-demi);
+  font-weight: var(--font-weight-demi);
+  color: var(--color-emerald-green); }
+
+.dnb-step-indicator::after {
+  background-color: var(--color-mint-green); }
+"
+`;
+
+exports[`StepIndicator scss have to match snapshot 1`] = `
+"/*
+* DNB StepIndicator
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * CSS Properties
+ *
+ */
+:root {
+  --font-family-default: 'Fedra Sans Std', sans-serif;
+  --font-family-book: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-demi: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-family-medium: 'Fedra Sans Std', sans-serif;
+  /* Do not use, use --font-weight-... */
+  --font-weight-default: normal;
+  --font-weight-book: normal;
+  --font-weight-demi: 500;
+  --font-weight-medium: 600;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-xx-large: 3rem;
+  --color-sea-green-alt: #008484;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-sea-green-4: #f5fafa;
+  --color-sea-green-alt-30: #b3dada;
+  --color-signal-yellow-30: #ffffd7;
+  --color-cherry-red: #e10076;
+  --color-cherry-red-80: #fdebf4;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-30: #b3b3b3;
+  --color-white: #fff;
+  --color-black-border: #cdcdcd;
+  --color-black-background: #fafafa;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-signal-orange: #ff5400;
+  --color-signal-yellow: #ffff7a;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2; }
+
+/*
+ * Utilities
+ */
+/*
+ * Typography
+ *
+ * The font-family properties are defined in the properties.scss file, like:
+ * --font-family-default:
+ *
+ */
+.dnb-typo-std,
+.dnb-typo-book {
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-style: normal; }
+
+.dnb-typo-medium {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-medium);
+  font-style: normal; }
+
+.dnb-typo-demi {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-demi);
+  font-style: normal; }
+
+.dnb-typo-number--lining {
+  font-variant-numeric: lining-nums;
+  font-feature-settings: \\"lnum\\"; }
+
+.dnb-typo-number--tabular {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: \\"lnum\\"; }
+
+.dnb-typo-number--oldstyle {
+  font-variant-numeric: oldstyle-nums;
+  font-feature-settings: \\"onum\\"; }
+
+.dnb-typo-number--proportional {
+  font-variant-numeric: proportional-nums;
+  font-feature-settings: \\"pnum\\"; }
+
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Book.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Book.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Book.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Book.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Book.ttf\\") format(\\"truetype\\");
+  font-weight: normal;
+  font-style: normal;
+  font-display: fallback; }
+
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Demi.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Demi.ttf\\") format(\\"truetype\\");
+  font-weight: 500;
+  font-style: normal;
+  font-display: fallback; }
+
+@font-face {
+  font-family: 'Fedra Sans Std';
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot\\");
+  src: url(\\"../../../../assets/fonts//FedraSansStd-Medium.eot?#iefix\\") format(\\"embedded-opentype\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff2\\") format(\\"woff2\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.woff\\") format(\\"woff\\"), url(\\"../../../../assets/fonts//FedraSansStd-Medium.ttf\\") format(\\"truetype\\");
+  font-weight: 600;
+  font-style: normal;
+  font-display: fallback; }
+
+/*
+ * Scopes
+ *
+ */
+.dnb-step-indicator {
+  font-family: sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
+  font-size: 1rem;
+  font-style: normal;
+  line-height: 1.5rem;
+  color: var(--color-black-80, #333);
+  font-variant-numeric: lining-nums;
+  font-feature-settings: \\"lnum\\"; }
+  .dnb-step-indicator *,
+  .dnb-step-indicator ::before,
+  .dnb-step-indicator ::after {
+    background-repeat: no-repeat;
+    box-sizing: border-box; }
+  .dnb-step-indicator ::before,
+  .dnb-step-indicator ::after {
+    text-decoration: inherit;
+    vertical-align: inherit; }
+
+/*
+ * StepIndicator element
+ *
+ */
+.dnb-step-indicator {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  margin: 0;
+  padding: 0; }
+  .dnb-step-indicator__list {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    align-items: flex-start; }
+  .dnb-step-indicator__item {
+    position: relative;
+    z-index: 2;
+    padding: 0;
+    margin-left: 4.5rem; }
+    .dnb-step-indicator__item:first-child {
+      margin-left: 0; }
+    @media screen and (max-width: 700px) {
+      .dnb-step-indicator__item {
+        margin-left: 2rem; } }
+    .dnb-step-indicator__item::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      bottom: 0;
+      /* because of the link/anchor border-bottom 2px */
+      width: 100%;
+      height: 3px;
+      border-radius: 1.5px; }
+  .dnb-step-indicator-item-content {
+    display: flex;
+    padding: 0.25rem 0.25rem 0.125rem;
+    border-bottom: 2px solid transparent;
+    text-decoration: none; }
+    .no-touch .dnb-step-indicator-item-content:hover[disabled] {
+      cursor: not-allowed; }
+    .no-touch .dnb-step-indicator-item-content:hover:not([disabled]) {
+      text-decoration: none; }
+  .dnb-step-indicator-number {
+    padding-right: 0.25rem;
+    white-space: nowrap; }
+  .dnb-step-indicator--active .dnb-step-indicator-item-content {
+    cursor: default;
+    pointer-events: none; }
+  .dnb-step-indicator::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    left: -50vw;
+    right: -50vw;
+    bottom: 0;
+    width: 200vw;
+    height: 1px; }
+"
+`;
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/description.md b/packages/dnb-ui-lib/src/components/step-indicator/description.md
similarity index 93%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/description.md
rename to packages/dnb-ui-lib/src/components/step-indicator/description.md
index 56969132b49..274a044dcd6 100644
--- a/packages/dnb-ui-lib/src/patterns/step-indicator/description.md
+++ b/packages/dnb-ui-lib/src/components/step-indicator/description.md
@@ -1,7 +1,3 @@
----
-status: 'wip'
----
-
 ## Description
 
 The breadcrumb component is a pagination component - not a navigation.
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/details.md b/packages/dnb-ui-lib/src/components/step-indicator/details.md
similarity index 100%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/details.md
rename to packages/dnb-ui-lib/src/components/step-indicator/details.md
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/index.js b/packages/dnb-ui-lib/src/components/step-indicator/index.js
similarity index 100%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/index.js
rename to packages/dnb-ui-lib/src/components/step-indicator/index.js
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/style.js b/packages/dnb-ui-lib/src/components/step-indicator/style.js
similarity index 100%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/style.js
rename to packages/dnb-ui-lib/src/components/step-indicator/style.js
diff --git a/packages/dnb-ui-lib/src/components/step-indicator/style/_step-indicator.scss b/packages/dnb-ui-lib/src/components/step-indicator/style/_step-indicator.scss
new file mode 100644
index 00000000000..406513eeac9
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/step-indicator/style/_step-indicator.scss
@@ -0,0 +1,104 @@
+/*
+ * StepIndicator element
+ *
+ */
+
+.dnb-step-indicator {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+
+  margin: 0;
+  padding: 0;
+
+  &__list {
+    display: flex;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+    align-items: flex-start;
+  }
+
+  &__item {
+    position: relative;
+    z-index: 2;
+
+    padding: 0;
+    // padding: 0 0.5rem;
+    margin-left: 4.5rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    @include allBelow(medium) {
+      margin-left: 2rem;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      bottom: 0; /* because of the link/anchor border-bottom 2px */
+
+      width: 100%;
+      height: 3px;
+      border-radius: 1.5px;
+    }
+  }
+
+  &-item-content {
+    display: flex; // make text wrap
+    padding: 0.25rem 0.25rem 0.125rem;
+
+    border-bottom: 2px solid transparent;
+    text-decoration: none;
+
+    @include hover(true) {
+      text-decoration: none;
+    }
+
+    // &--static {
+    // }
+    //
+    // &--link {
+    // }
+  }
+
+  &-number {
+    padding-right: 0.25rem;
+    white-space: nowrap;
+  }
+  // &-text {
+  // }
+
+  &--visited &-item-content {
+    &--link {
+      // @include hover(true) {
+      // }
+    }
+  }
+
+  // &--active {
+  //   &::after {
+  //   }
+  // }
+
+  &--active &-item-content {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    left: -50vw;
+    right: -50vw;
+    bottom: 0;
+
+    width: 200vw;
+    height: 1px;
+  }
+}
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/style/dnb-step-indicator.scss b/packages/dnb-ui-lib/src/components/step-indicator/style/dnb-step-indicator.scss
similarity index 100%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/style/dnb-step-indicator.scss
rename to packages/dnb-ui-lib/src/components/step-indicator/style/dnb-step-indicator.scss
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/style/index.js b/packages/dnb-ui-lib/src/components/step-indicator/style/index.js
similarity index 100%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/style/index.js
rename to packages/dnb-ui-lib/src/components/step-indicator/style/index.js
diff --git a/packages/dnb-ui-lib/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss b/packages/dnb-ui-lib/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss
new file mode 100644
index 00000000000..a585cd81ec2
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss
@@ -0,0 +1,42 @@
+/*
+* StepIndicator theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+
+.dnb-step-indicator {
+  &-item-content {
+    &--static {
+      color: var(--color-emerald-green);
+    }
+
+    &--link {
+      color: var(--color-sea-green-alt);
+    }
+  }
+
+  &--visited &-item-content {
+    &--link {
+      @include hover(true) {
+        border-color: var(--color-sea-green);
+      }
+    }
+  }
+
+  &--active {
+    &::after {
+      background-color: var(--color-sea-green-alt);
+    }
+  }
+  &--active &-item-content {
+    font-family: var(--font-family-demi);
+    font-weight: var(--font-weight-demi);
+
+    color: var(--color-emerald-green);
+  }
+
+  &::after {
+    background-color: var(--color-mint-green);
+  }
+}
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/web-component.js b/packages/dnb-ui-lib/src/components/step-indicator/web-component.js
similarity index 100%
rename from packages/dnb-ui-lib/src/patterns/step-indicator/web-component.js
rename to packages/dnb-ui-lib/src/components/step-indicator/web-component.js
diff --git a/packages/dnb-ui-lib/src/components/tabs/Tabs.js b/packages/dnb-ui-lib/src/components/tabs/Tabs.js
index fb0f932cae6..738750f1ead 100644
--- a/packages/dnb-ui-lib/src/components/tabs/Tabs.js
+++ b/packages/dnb-ui-lib/src/components/tabs/Tabs.js
@@ -384,10 +384,7 @@ export default class Tabs extends PureComponent {
               {...params}
             >
               <span className="dnb-tablink-title">{title}</span>
-              {/* we use "aria-hidden" SPAN to simulate a wider width for each tab */}
-              <span aria-hidden={true} hidden>
-                {title}
-              </span>
+              <Dummy>{title}</Dummy>
             </button>
           )
         }
@@ -540,3 +537,19 @@ const generateKey = title => {
 Tabs.Content = CustomContent
 Tabs.generateKey = generateKey
 Tabs.ContentWrapper = ContentWrapper
+
+export const Dummy = ({ children }) => {
+  /**
+   * This is a dummy markup, to define a width of every tab
+   * We use "aria-hidden" SPAN to simulate a wider width for each tab
+   * There is also a CSS to make this work. Have a look in the styles: & > span[hidden] {...}
+   */
+  return (
+    <span aria-hidden={true} hidden>
+      {children}
+    </span>
+  )
+}
+Dummy.propTypes = {
+  children: PropTypes.node.isRequired
+}
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
index 33588f20d5c..174985ab200 100644
--- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -41,6 +41,14 @@ exports[`Tabs component have to match snapshot 1`] = `
       },
     }
   }
+  3={
+    Object {
+      "displayName": "Dummy",
+      "props": Object {
+        "children": "children",
+      },
+    }
+  }
   align="left"
   class={null}
   className={null}
@@ -97,12 +105,14 @@ exports[`Tabs component have to match snapshot 1`] = `
                 >
                   First
                 </span>
-                <span
-                  aria-hidden={true}
-                  hidden={true}
-                >
-                  First
-                </span>
+                <Dummy>
+                  <span
+                    aria-hidden={true}
+                    hidden={true}
+                  >
+                    First
+                  </span>
+                </Dummy>
               </button>
               <button
                 aria-controls="id-content-second"
@@ -120,12 +130,14 @@ exports[`Tabs component have to match snapshot 1`] = `
                 >
                   Second
                 </span>
-                <span
-                  aria-hidden={true}
-                  hidden={true}
-                >
-                  Second
-                </span>
+                <Dummy>
+                  <span
+                    aria-hidden={true}
+                    hidden={true}
+                  >
+                    Second
+                  </span>
+                </Dummy>
               </button>
               <button
                 aria-selected={false}
@@ -142,12 +154,14 @@ exports[`Tabs component have to match snapshot 1`] = `
                 >
                   Third
                 </span>
-                <span
-                  aria-hidden={true}
-                  hidden={true}
-                >
-                  Third
-                </span>
+                <Dummy>
+                  <span
+                    aria-hidden={true}
+                    hidden={true}
+                  >
+                    Third
+                  </span>
+                </Dummy>
               </button>
             </div>
           </Tabs>
@@ -257,6 +271,14 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
 
 .dnb-tabs__tabs::after {
   border-bottom: 1px solid var(--color-mint-green); }
+  @media screen and (max-width: 400px) {
+    .dnb-tabs__tabs::after {
+      border-bottom-color: transparent; } }
+
+@media screen and (max-width: 400px) {
+  .dnb-tabs__tabs {
+    box-shadow: 0 0 0 1px var(--color-mint-green);
+    border-color: transparent; } }
 
 .dnb-tabs__tabs .dnb-tablink-title {
   font-weight: var(--font-weight-book);
@@ -267,7 +289,7 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
 .dnb-tabs__tabs .dnb-tablink::after {
   height: 3px;
   border-radius: 1.5px;
-  border-bottom: 3px solid transparent; }
+  background-color: 3px solid transparent; }
 
 .dnb-tabs__tabs .dnb-tablink:not([disabled]):hover {
   background-color: var(--color-mint-green); }
@@ -281,19 +303,11 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
   color: var(--color-emerald-green); }
 
 .dnb-tabs__tabs .dnb-tablink:not([disabled]):active::after, .dnb-tabs__tabs .dnb-tablink:not([disabled]).selected::after {
-  border-bottom-color: var(--color-sea-green); }
+  background-color: var(--color-sea-green); }
 
 .dnb-tabs__tabs .dnb-tablink:not([disabled]).selected .dnb-tablink-title {
   font-family: var(--font-family-demi);
   font-weight: var(--font-weight-demi); }
-
-.dnb-tabs__tabs .dnb-tablink:not([disabled]):not(:active):not(.selected):focus {
-  outline: none; }
-  html[data-whatinput='keyboard'] .dnb-tabs__tabs .dnb-tablink:not([disabled]):not(:active):not(.selected):focus {
-    box-shadow: 0 0 0 2px var(--color-emerald-green);
-    border-color: transparent; }
-  .dnb-tabs__tabs .dnb-tablink:not([disabled]):not(:active):not(.selected):focus::after {
-    border-bottom: 3px solid transparent; }
 "
 `;
 
@@ -466,15 +480,6 @@ exports[`Tabs scss have to match snapshot 1`] = `
     justify-content: flex-end; }
   .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
     justify-content: center; }
-  .dnb-tabs__tabs::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    left: -50vw;
-    right: -50vw;
-    bottom: 0;
-    width: 200vw;
-    height: 1px; }
   .dnb-tabs__tabs .dnb-tablink {
     position: relative;
     z-index: 1;
@@ -508,19 +513,27 @@ exports[`Tabs scss have to match snapshot 1`] = `
       height: 1px; }
   .dnb-tabs__tabs .dnb-tablink:first-child {
     margin-left: 0; }
+  .dnb-tabs__tabs::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    left: -50vw;
+    right: -50vw;
+    bottom: 0;
+    width: 200vw;
+    height: 1px; }
   @media screen and (max-width: 700px) {
     .dnb-tabs__tabs .dnb-tablink {
       margin-left: 2.5rem; } }
   @media screen and (max-width: 400px) {
     .dnb-tabs__tabs__tablist {
-      display: block; }
+      flex-direction: column;
+      margin: 0; }
     .dnb-tabs__tabs .dnb-tablink {
-      margin-top: 0.5rem;
-      /* because of wrappering */
-      margin-left: 1rem; } }
+      margin-left: 0; } }
 
 .dnb-tabs__content {
   padding-top: 1rem;
-  margin-bottom: 1rem; }
+  margin-top: 1rem; }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
index e6d6cf088aa..c6ac71e42f6 100644
--- a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
+++ b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
@@ -30,20 +30,6 @@
       justify-content: center;
     }
 
-    // we may wrap this &::after in allAbove to now show for mobile
-    // @include allAbove(medium) {}
-
-    &::after {
-      content: '';
-      position: absolute;
-      z-index: -1;
-      left: -50vw;
-      right: -50vw;
-      bottom: 0;
-      width: 200vw;
-      height: 1px;
-    }
-
     .dnb-tablink {
       position: relative;
       z-index: 1;
@@ -92,6 +78,17 @@
       margin-left: 0;
     }
 
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: -50vw;
+      right: -50vw;
+      bottom: 0;
+      width: 200vw;
+      height: 1px;
+    }
+
     @include allBelow(medium) {
       .dnb-tablink {
         margin-left: 2.5rem;
@@ -100,17 +97,17 @@
 
     @include allBelow(small) {
       &__tablist {
-        display: block;
+        flex-direction: column;
+        margin: 0;
       }
       .dnb-tablink {
-        margin-top: 0.5rem; /* because of wrappering */
-        margin-left: 1rem;
+        margin-left: 0;
       }
     }
   }
 
   &__content {
     padding-top: 1rem;
-    margin-bottom: 1rem;
+    margin-top: 1rem;
   }
 }
diff --git a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
index a970df859c4..5e8c1a478b8 100644
--- a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
@@ -9,6 +9,12 @@
   &__tabs {
     &::after {
       border-bottom: 1px solid var(--color-mint-green);
+      @include allBelow(small) {
+        border-bottom-color: transparent;
+      }
+    }
+    @include allBelow(small) {
+      @include fakeBorder(var(--color-mint-green), 1px);
     }
 
     .dnb-tablink {
@@ -25,15 +31,12 @@
       &::after {
         height: 3px;
         border-radius: 1.5px;
-        border-bottom: 3px solid transparent;
+        background-color: 3px solid transparent;
       }
 
       // hover
       &:not([disabled]):hover {
         background-color: var(--color-mint-green);
-        // &::after {
-        //   border-bottom-color: var(--color-emerald-green);
-        // }
       }
 
       // disabled
@@ -51,7 +54,7 @@
           color: var(--color-emerald-green);
         }
         &::after {
-          border-bottom-color: var(--color-sea-green);
+          background-color: var(--color-sea-green);
         }
       }
 
@@ -63,13 +66,13 @@
         }
       }
 
-      // focus
-      &:not([disabled]):not(:active):not(.selected):focus {
-        @include fakeFocus();
-        &::after {
-          border-bottom: 3px solid transparent;
-        }
-      }
+      // focus helper, for positioning
+      // &:not([disabled]):not(:active):not(.selected):focus {
+      //   @include fakeFocus();
+      //   &::after {
+      //     border-bottom: 3px solid transparent;
+      //   }
+      // }
     }
   }
 }
diff --git a/packages/dnb-ui-lib/src/index.js b/packages/dnb-ui-lib/src/index.js
index ec3c5fba829..22b143a88e7 100644
--- a/packages/dnb-ui-lib/src/index.js
+++ b/packages/dnb-ui-lib/src/index.js
@@ -27,6 +27,7 @@ import Logo from './components/logo/Logo'
 import Modal from './components/modal/Modal'
 import Notification from './components/notification/Notification'
 import Slider from './components/slider/Slider'
+import StepIndicator from './components/step-indicator/StepIndicator'
 import Switch from './components/switch/Switch'
 import Tabs from './components/tabs/Tabs'
 import ActionNav from './patterns/action-nav/ActionNav'
@@ -40,7 +41,6 @@ import Grid from './patterns/grid/Grid'
 import HelperClasses from './patterns/helper-classes/HelperClasses'
 import MainNav from './patterns/main-nav/MainNav'
 import RangeSlider from './patterns/range-slider/RangeSlider'
-import StepIndicator from './patterns/step-indicator/StepIndicator'
 import SummaryTable from './patterns/summary-table/SummaryTable'
 import ViewTitle from './patterns/view-title/ViewTitle'
 
@@ -59,6 +59,7 @@ export {
   Modal,
   Notification,
   Slider,
+  StepIndicator,
   Switch,
   Tabs,
   ActionNav,
@@ -72,7 +73,6 @@ export {
   HelperClasses,
   MainNav,
   RangeSlider,
-  StepIndicator,
   SummaryTable,
   ViewTitle
 }
diff --git a/packages/dnb-ui-lib/src/patterns/index.js b/packages/dnb-ui-lib/src/patterns/index.js
index e264514e202..987abed1488 100644
--- a/packages/dnb-ui-lib/src/patterns/index.js
+++ b/packages/dnb-ui-lib/src/patterns/index.js
@@ -23,7 +23,6 @@ import Grid from './grid/Grid'
 import HelperClasses from './helper-classes/HelperClasses'
 import MainNav from './main-nav/MainNav'
 import RangeSlider from './range-slider/RangeSlider'
-import StepIndicator from './step-indicator/StepIndicator'
 import SummaryTable from './summary-table/SummaryTable'
 import ViewTitle from './view-title/ViewTitle'
 
@@ -40,7 +39,6 @@ export {
   HelperClasses,
   MainNav,
   RangeSlider,
-  StepIndicator,
   SummaryTable,
   ViewTitle
 }
@@ -58,7 +56,6 @@ export const getComponents = () => {
     HelperClasses,
     MainNav,
     RangeSlider,
-    StepIndicator,
     SummaryTable,
     ViewTitle
   }
diff --git a/packages/dnb-ui-lib/src/patterns/step-indicator/style/_step-indicator.scss b/packages/dnb-ui-lib/src/patterns/step-indicator/style/_step-indicator.scss
deleted file mode 100644
index e01c0afab50..00000000000
--- a/packages/dnb-ui-lib/src/patterns/step-indicator/style/_step-indicator.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * StepIndicator element
- *
- */
-
-.dnb-step-indicator {
-  margin: 1rem 0 3rem 0;
-  padding: 1rem 0 0 0;
-
-  border-bottom: 1px solid var(--color-summer-green);
-}
-
-.dnb-step-indicator__list {
-  display: flex;
-  margin: 0 0 -1px 0;
-
-  list-style: none;
-  align-items: flex-start;
-}
-
-.dnb-breadcrumb {
-  display: inline-flex;
-  margin: 0 0 0 1rem;
-
-  &:first-child {
-    margin-left: 0;
-  }
-
-  @include allAbove(medium) {
-    margin-left: 2rem;
-  }
-}
-
-.dnb-breadcrumb-number {
-  margin: 0 0.25rem 0 0;
-}
-
-.dnb-breadcrumb-item-text {
-  display: flex;
-  padding: 2px 0;
-
-  border-bottom: 0 solid transparent;
-  border-width: 0 0 2px 0;
-  text-decoration: none;
-
-  @include hover(true) {
-    text-decoration: none;
-  }
-}
-
-.dnb-breadcrumb-item-text--static {
-  color: #585959;
-}
-
-.dnb-breadcrumb-item-text--link {
-  color: var(--color-black-80);
-}
-
-.dnb-breadcrumb--active .dnb-breadcrumb-item-text {
-  border-color: var(--color-signal-orange);
-}
-
-.dnb-breadcrumb--visited .dnb-breadcrumb-item-text {
-  @include hover(true) {
-    border-color: var(--color-signal-orange);
-    color: var(--color-black-80);
-  }
-}
diff --git a/packages/dnb-ui-lib/src/style/core/dnb-core.scss b/packages/dnb-ui-lib/src/style/core/dnb-core.scss
index 4c121bd9e70..063ae6e08a1 100644
--- a/packages/dnb-ui-lib/src/style/core/dnb-core.scss
+++ b/packages/dnb-ui-lib/src/style/core/dnb-core.scss
@@ -66,17 +66,6 @@ html[data-whatinput='keyboard'] .dnb-style *:not(a):not(div):focus {
     display: none;
   }
 }
-.dnb-width-limit {
-  margin: 0 auto;
-  width: 100%;
-  max-width: map-get($map: $breakpoints, $key: large);
-  padding: 0 0.5rem;
-
-  @include allAbove(medium) {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
 .dnb-belt {
   padding: 1rem 0;
   width: 100%;
diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
index cde29734cf8..95d1454e5bc 100644
--- a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
+++ b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
@@ -17,5 +17,6 @@
 @import '../components/modal/style/_modal.scss';
 @import '../components/notification/style/_notification.scss';
 @import '../components/slider/style/_slider.scss';
+@import '../components/step-indicator/style/_step-indicator.scss';
 @import '../components/switch/style/_switch.scss';
 @import '../components/tabs/style/_tabs.scss';
diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-patterns.scss b/packages/dnb-ui-lib/src/style/dnb-ui-patterns.scss
index d823e7a2765..ddfc26c8d4b 100644
--- a/packages/dnb-ui-lib/src/style/dnb-ui-patterns.scss
+++ b/packages/dnb-ui-lib/src/style/dnb-ui-patterns.scss
@@ -14,6 +14,5 @@
 @import '../patterns/grid/style/_grid.scss';
 @import '../patterns/main-nav/style/_main-nav.scss';
 @import '../patterns/range-slider/style/_range-slider.scss';
-@import '../patterns/step-indicator/style/_step-indicator.scss';
 @import '../patterns/summary-table/style/_summary-table.scss';
 @import '../patterns/view-title/style/_view-title.scss';
diff --git a/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss
index c1626b57e5e..8dc49387a1d 100644
--- a/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/style/themes/dnb-theme-ui.scss
@@ -17,4 +17,5 @@ $fonts-path: '../../../assets/fonts/' !default;
 @import '../../components/button/style/themes/dnb-button-theme-ui.scss';
 @import '../../components/form-status/style/themes/dnb-form-status-theme-ui.scss';
 @import '../../components/input/style/themes/dnb-input-theme-ui.scss';
+@import '../../components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss';
 @import '../../components/tabs/style/themes/dnb-tabs-theme-ui.scss';