@dnb/eufemia 9.16.0 → 9.17.0

package/es/components/step-indicator/StepIndicatorContext.js

@@ -6,42 +6,160 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import EventEmitter from '../../shared/EventEmitter';
+import Context from '../../shared/Context';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+import { processChildren, extendPropsWithContext } from '../../shared/component-helper';
+import { onMediaQueryChange } from '../../shared/MediaQueryUtils';
 const filterAttributes = Object.keys(stepIndicatorDefaultProps).filter(item => {
   return !['class', 'className'].includes(item);
-}).concat(['internalId', 'hasSidebar', 'hideSidebar', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'innerRef', 'filterAttributes', 'listAttributes', 'onChangeState', 'isV1', 'activeUrl']);
+}).concat(['internalId', 'isSidebar', 'hasSidebar', 'hideSidebar', 'sidebarIsVisible', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'openState', 'onChangeState', 'openHandler', 'closeHandler', 'innerRef', 'hasSkeletonData', 'filterAttributes', 'listAttributes', 'onChangeState', 'isV1', 'activeUrl']);
 const StepIndicatorContext = React.createContext(null);
 export default StepIndicatorContext;
 export class StepIndicatorProvider extends React.PureComponent {
+  static getData(props) {
+    let res = [];
+    if (props.data) res = props.data;else res = processChildren(props);
+    if (typeof res === 'string') return res[0] === '[' ? JSON.parse(res) : [];
+    return res || [];
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    var _state$data, _state$step_title, _state$data2, _state$step_title_ext, _state$data3;
+
+    if (props.data) {
+      state.data = StepIndicatorProvider.getData(props);
+    }
+
+    state.countSteps = (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.length;
+
+    if (parseFloat(props.current_step) > -1 && props.current_step !== state._current_step) {
+      state.activeStep = parseFloat(props.current_step) || 0;
+    }
+
+    if (props.active_item !== null && props.active_item !== state._active_item) {
+      state.activeStep = parseFloat(props.active_item) || 0;
+    }
+
+    if (props.active_url && state.data.length > 0) {
+      state.activeStep = state.data.reduce((acc, {
+        url
+      }, i) => {
+        return url && (url === state.current_step || url === props.active_url) ? i : acc;
+      }, parseFloat(state.current_step) || 0);
+    }
+
+    if (!state.listOfReachedSteps.includes(state.activeStep)) {
+      state.listOfReachedSteps.push(state.activeStep);
+    }
+
+    state.stepsLabel = (_state$step_title = state.step_title) === null || _state$step_title === void 0 ? void 0 : _state$step_title.replace('%step', (state.activeStep || 0) + 1).replace('%count', ((_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : _state$data2.length) || 1);
+    state.stepsLabelExtended = (_state$step_title_ext = state.step_title_extended) === null || _state$step_title_ext === void 0 ? void 0 : _state$step_title_ext.replace('%step', (state.activeStep || 0) + 1).replace('%count', ((_state$data3 = state.data) === null || _state$data3 === void 0 ? void 0 : _state$data3.length) || 1);
+    state._current_step = props.current_step;
+    state._active_item = props.active_item;
+    state._active_url = props.active_url;
+    return state;
+  }
+
   constructor(props) {
     super(props);
-    this._eventEmitter = EventEmitter.createInstance(props.sidebar_id);
-    this.state = this._eventEmitter.get();
+
+    _defineProperty(this, "setActiveStep", activeStep => {
+      this.setState({
+        activeStep
+      });
+    });
+
+    _defineProperty(this, "onChangeState", () => {
+      this.setState({
+        openState: false
+      });
+    });
+
+    _defineProperty(this, "openHandler", () => {
+      this.setState({
+        openState: true
+      });
+    });
+
+    _defineProperty(this, "closeHandler", () => {
+      this.setState({
+        openState: false
+      });
+    });
+
+    this.state = {
+      hasSidebar: true,
+      hideSidebar: false,
+      activeStep: undefined,
+      setActiveStep: this.setActiveStep,
+      onChangeState: this.onChangeState,
+      openHandler: this.openHandler,
+      closeHandler: this.closeHandler
+    };
+
+    if (!this.state.listOfReachedSteps) {
+      this.state.listOfReachedSteps = [];
+    }
   }
 
   componentDidMount() {
-    this._eventEmitter.listen(state => {
-      this.setState(state);
-    });
+    this._isMounted = true;
+
+    if (!this.props.isV1) {
+      var _document;
+
+      this._mediaQueryListener = onMediaQueryChange({
+        min: '0',
+        max: 'medium'
+      }, hideSidebar => {
+        this.setState({
+          hideSidebar
+        });
+      }, {
+        runOnInit: true
+      });
+      const container = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('sidebar__' + this.props.sidebar_id);
+      this.setState({
+        hasSidebar: Boolean(container)
+      });
+    }
   }
 
   componentWillUnmount() {
-    if (this._eventEmitter) {
-      this._eventEmitter.remove();
-
-      this._eventEmitter = null;
+    if (this._mediaQueryListener) {
+      this._mediaQueryListener();
     }
   }
 
   componentDidUpdate() {
-    this._eventEmitter.update(_objectSpread({}, this.props));
+    this.setState(this.makeContextValue());
   }
 
-  render() {
-    const value = _objectSpread(_objectSpread({
+  getGlobalContext(context = this.context) {
+    const data = extendPropsWithContext(this.props, stepIndicatorDefaultProps, {
+      skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+    }, context.getTranslation(context).StepIndicator, context.FormRow, context.StepIndicator);
+    return data;
+  }
+
+  makeContextValue({
+    state = _objectSpread({}, this.state),
+    props = this.props,
+    context = this.context
+  } = {}) {
+    const globalContext = this.getGlobalContext(context);
+    const value = extendSafe({
       filterAttributes
-    }, this.props), this.state);
+    }, globalContext, {
+      defaultProps: stepIndicatorDefaultProps,
+      props
+    }, state);
+    value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar;
+    return value;
+  }
+
+  render() {
+    const value = this.makeContextValue();
 
     if (typeof window !== 'undefined' && window.IS_TEST) {
       value.no_animation = true;
@@ -58,7 +176,37 @@ export class StepIndicatorProvider extends React.PureComponent {
   }
 
 }
+
+_defineProperty(StepIndicatorProvider, "contextType", Context);
+
+_defineProperty(StepIndicatorProvider, "defaultProps", {
+  isSidebar: false
+});
+
 process.env.NODE_ENV !== "production" ? StepIndicatorProvider.propTypes = {
   sidebar_id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired
-} : void 0;
+  children: PropTypes.node.isRequired,
+  isSidebar: PropTypes.bool
+} : void 0;
+
+function extendSafe(...objects) {
+  const obj = {};
+  objects.forEach(itm => {
+    if (itm.defaultProps && itm.props) {
+      itm = Object.entries(itm.props).reduce((acc, [k, v]) => {
+        if (itm.defaultProps[k] !== v) {
+          acc[k] = v;
+        }
+
+        return acc;
+      }, {});
+    }
+
+    Object.entries(itm).forEach(([k, v]) => {
+      if (!obj[k] || obj[k] && v) {
+        obj[k] = v;
+      }
+    });
+  });
+  return obj;
+}

package/es/components/step-indicator/StepIndicatorItem.js

@@ -11,7 +11,6 @@ import AnimateHeight from '../../shared/AnimateHeight';
 import Button from '../button/Button';
 import Icon from '../icon/Icon';
 import { WarnIcon, InfoIcon, ErrorIcon } from '../../components/form-status/FormStatus';
-import EventEmitter from '../../shared/EventEmitter';
 import StepIndicatorContext from './StepIndicatorContext';
 import { deprecated_v1 } from './StepIndicatorItem-v1';
 export default class StepIndicatorItem extends React.PureComponent {
@@ -50,7 +49,6 @@ export default class StepIndicatorItem extends React.PureComponent {
 
     _defineProperty(this, "canWarn", () => typeof process !== 'undefined' && process.env.NODE_ENV === 'development');
 
-    this._eventEmitter = EventEmitter.createInstance(context.sidebar_id);
     this._heightAnim = new AnimateHeight({
       animate: !isTrue(context.no_animation)
     });
@@ -65,8 +63,6 @@ export default class StepIndicatorItem extends React.PureComponent {
 
   componentWillUnmount() {
     this._heightAnim.remove();
-
-    this._eventEmitter.remove();
   }
 
   getSnapshotBeforeUpdate() {
@@ -129,7 +125,7 @@ export default class StepIndicatorItem extends React.PureComponent {
     let isVisited = currentItemNum < activeStep;
     const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}`;
     const ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', currentItemNum + 1).replace('%count', countSteps);
-    const isCurrent = currentItemNum === activeStep || isTrue(is_current);
+    const isCurrent = currentItemNum === activeStep || isTrue(is_current) && isNaN(parseFloat(activeStep));
     let element = React.createElement(StepItemWrapper, {
       number: currentItemNum + 1,
       hide_numbers: hide_numbers,

package/es/components/step-indicator/StepIndicatorModal.js

@@ -1,55 +1,55 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var _StepIndicatorList;
+var _StepIndicatorList, _StepIndicatorList2;
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Modal from '../modal/Modal';
 import StepIndicatorTriggerButton from './StepIndicatorTriggerButton';
 import StepIndicatorList from './StepIndicatorList';
-import StepIndicatorContext, { StepIndicatorProvider } from './StepIndicatorContext';
+import StepIndicatorContext from './StepIndicatorContext';
 export default class StepIndicatorModal extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "state", {
-      open_state: false
-    });
-
-    _defineProperty(this, "onChangeState", () => {
-      this.setState({
-        open_state: false
-      });
-    });
-
-    _defineProperty(this, "openHandler", () => {
-      this.setState({
-        open_state: true
-      });
-    });
-
-    _defineProperty(this, "closeHandler", () => {
-      this.setState({
-        open_state: false
-      });
-
+    _defineProperty(this, "closeHandler", (...args) => {
       if (this.context.hasSidebar) {
         var _this$_triggerRef$cur;
 
         (_this$_triggerRef$cur = this._triggerRef.current) === null || _this$_triggerRef$cur === void 0 ? void 0 : _this$_triggerRef$cur.focus();
       }
+
+      this.context.closeHandler(...args);
     });
 
     this._triggerRef = React.createRef();
+    this.state = {
+      container: null
+    };
   }
 
-  render() {
-    if (this.context.hasSidebar && !this.context.hideSidebar) {
+  componentDidMount() {
+    const container = document.getElementById('sidebar__' + this.context.sidebar_id);
+    this.setState({
+      container
+    });
+  }
+
+  renderPortal() {
+    if (!this.state.container) {
       return null;
     }
 
+    return ReactDOM.createPortal(_StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, null)), this.state.container);
+  }
+
+  render() {
+    if (this.context.sidebarIsVisible) {
+      return this.renderPortal();
+    }
+
     return React.createElement(React.Fragment, null, React.createElement(StepIndicatorTriggerButton, {
-      on_click: this.openHandler,
+      on_click: this.context.openHandler,
       inner_ref: this._triggerRef
     }), React.createElement(Modal, {
       id: this.context.sidebar_id,
@@ -57,19 +57,16 @@ export default class StepIndicatorModal extends React.PureComponent {
       trigger_hidden: true,
       mode: "drawer",
       animation_direction: "bottom",
-      open_state: this.state.open_state,
-      on_open: this.openHandler,
+      open_state: this.context.openState,
+      on_open: this.context.openHandler,
       on_close: this.closeHandler
-    }, React.createElement(StepIndicatorProvider, _extends({}, this.context, {
-      sidebar_id: this.context.sidebar_id,
-      onChangeState: this.onChangeState
-    }), React.createElement(Modal.Content, {
+    }, React.createElement(Modal.Content, {
       style_type: "white"
     }, React.createElement("div", {
       className: "dnb-step-indicator-v2"
     }, React.createElement("p", {
       className: "dnb-p dnb-step-indicator__label"
-    }, this.context.stepsLabelExtended), _StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, null)))))));
+    }, this.context.stepsLabelExtended), _StepIndicatorList2 || (_StepIndicatorList2 = React.createElement(StepIndicatorList, null))))));
   }
 
 }

package/es/components/step-indicator/StepIndicatorProps.js

@@ -21,7 +21,7 @@ export const stepIndicatorPropTypes = _objectSpread(_objectSpread({
     is_active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     url_future: PropTypes.string,
     url_passed: PropTypes.string
-  }))]).isRequired,
+  }))]),
   overview_title: PropTypes.string,
   step_title_extended: PropTypes.string,
   step_title: PropTypes.string,

package/es/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -1,4 +1,27 @@
 import * as React from 'react';
+export type StepIndicatorSidebarMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorSidebarCurrentStep = string | number;
+export type StepIndicatorSidebarData =
+  | string
+  | string[]
+  | {
+      title: string | React.ReactNode;
+      is_current?: boolean;
+      inactive?: boolean;
+      disabled?: boolean;
+      status?: string | React.ReactNode;
+      status_state?: 'warn' | 'info' | 'error';
+
+      /**
+       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       */
+      on_click?: (...args: any[]) => any;
+      on_render?: (...args: any[]) => any;
+      url?: string;
+      is_active?: string | boolean;
+      url_future?: string;
+      url_passed?: string;
+    }[];
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -9,7 +32,23 @@ export interface StepIndicatorSidebarProps
    * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id: string;
+
+  /**
+   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   */
+  mode?: StepIndicatorSidebarMode;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorSidebarCurrentStep;
+
+  /**
+   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   */
+  data?: StepIndicatorSidebarData;
   internalId?: string;
+  showInitialData?: boolean;
 }
 export default class StepIndicatorSidebar extends React.Component<
   StepIndicatorSidebarProps,

package/es/components/step-indicator/StepIndicatorSidebar.js

@@ -1,83 +1,81 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var _div;
+var _StepIndicatorList;
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { extendPropsWithContext } from '../../shared/component-helper';
+import Context from '../../shared/Context';
 import StepIndicatorList from './StepIndicatorList';
+import { stepIndicatorPropTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
 import { StepIndicatorProvider } from './StepIndicatorContext';
-import EventEmitter from '../../shared/EventEmitter';
-import { onMediaQueryChange } from '../../shared/MediaQueryUtils';
 export default class StepIndicatorSidebar extends React.PureComponent {
-  constructor(props) {
-    super(props);
+  constructor(...args) {
+    super(...args);
 
     _defineProperty(this, "state", {
-      hasSidebar: true,
-      hideSidebar: false
-    });
-
-    this._eventEmitter = EventEmitter.createInstance(props.sidebar_id);
-
-    this._eventEmitter.update({
-      hideSidebar: true
+      showInitialData: true
     });
   }
 
   componentDidMount() {
-    this._mediaQueryListener = onMediaQueryChange({
-      min: '0',
-      max: 'medium'
-    }, hideSidebar => {
+    if (!this.props.showInitialData) {
       this.setState({
-        hideSidebar
+        showInitialData: false
       });
-
-      if (this._eventEmitter) {
-        this._eventEmitter.update({
-          hideSidebar
-        });
-      }
-    }, {
-      runOnInit: true
-    });
-  }
-
-  componentWillUnmount() {
-    if (this._mediaQueryListener) {
-      this._mediaQueryListener();
     }
 
-    if (this._eventEmitter) {
-      this._eventEmitter.update({
-        hasSidebar: false
+    if (this._hasSkeletonData) {
+      this.setState({
+        skeleton: false
       });
     }
+  }
 
-    if (this._eventEmitter) {
-      this._eventEmitter.remove();
+  getContextAndProps() {
+    var _this$context, _this$context2, _providerProps$data;
 
-      this._eventEmitter = null;
+    const providerProps = extendPropsWithContext(this.props, stepIndicatorDefaultProps, {
+      skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
+    }, this.context.getTranslation(this.context).StepIndicator, (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.StepIndicator);
+
+    if (!(((_providerProps$data = providerProps.data) === null || _providerProps$data === void 0 ? void 0 : _providerProps$data.length) > 0)) {
+      const text = 'Skeleton text';
+      providerProps.data = [text.slice(10), text, text, text.slice(4)];
+      providerProps.skeleton = true;
+      this._hasSkeletonData = true;
     }
+
+    return providerProps;
   }
 
   render() {
-    return React.createElement(StepIndicatorProvider, _extends({
-      sidebar_id: this.props.internalId || this.props.sidebar_id,
-      listAttributes: this.props
-    }, this.state), !(this.state.hasSidebar & this.state.hideSidebar) && (_div || (_div = React.createElement("div", {
-      className: "dnb-step-indicator-v2 dnb-step-indicator__sidebar"
-    }, React.createElement(StepIndicatorList, null)))));
+    const providerProps = this.state.showInitialData ? this.getContextAndProps() : null;
+    return React.createElement("div", {
+      id: 'sidebar__' + this.props.sidebar_id,
+      className: "dnb-step-indicator-v2 dnb-step-indicator__sidebar" + (this._hasSkeletonData && providerProps !== null && providerProps !== void 0 && providerProps.skeleton ? " dnb-step-indicator__sidebar--ssr-skeleton" : "")
+    }, providerProps && React.createElement(StepIndicatorProvider, _extends({
+      isSidebar: true,
+      sidebar_id: this.props.internalId || this.props.sidebar_id
+    }, providerProps), _StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, null))));
   }
 
 }
 
+_defineProperty(StepIndicatorSidebar, "contextType", Context);
+
 _defineProperty(StepIndicatorSidebar, "defaultProps", {
-  internalId: null
+  mode: stepIndicatorDefaultProps.mode,
+  current_step: stepIndicatorDefaultProps.current_step,
+  data: stepIndicatorDefaultProps.data
 });
 
 process.env.NODE_ENV !== "production" ? StepIndicatorSidebar.propTypes = {
   sidebar_id: PropTypes.string.isRequired,
-  internalId: PropTypes.string
+  mode: stepIndicatorPropTypes.mode,
+  current_step: stepIndicatorPropTypes.current_step,
+  data: stepIndicatorPropTypes.data,
+  internalId: PropTypes.string,
+  showInitialData: PropTypes.bool
 } : void 0;

package/es/components/step-indicator/StepIndicatorTriggerButton.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../button/Button';
-import fullscreen_medium from '../../icons/fullscreen_medium';
+import chevron_down_medium from '../../icons/chevron_down_medium';
 import { validateDOMAttributes, combineDescribedBy, isTrue } from '../../shared/component-helper';
 import AnimateHeight from '../../shared/AnimateHeight';
 import { createSpacingClasses } from '../space/SpacingHelper';
@@ -84,12 +84,12 @@ export default class StepIndicatorTriggerButton extends React.PureComponent {
       wrap: true,
       stretch: true,
       variant: "secondary",
-      icon: fullscreen_medium,
+      icon: chevron_down_medium,
       icon_size: "medium",
       icon_position: "right",
       inner_ref: this._buttonRef
     }), React.createElement(StepItemWrapper, {
-      number: this.context.activeStep + 1,
+      number: (this.context.activeStep || 0) + 1,
       hide_numbers: this.context.hide_numbers
     }, (typeof item === 'string' ? item : item && item.title) || '')));
   }

package/es/components/step-indicator/style/_step-indicator.scss

@@ -6,11 +6,24 @@
 @import './_step-indicator-v1.scss';
 
 .dnb-step-indicator__sidebar {
-  max-width: 20rem;
-  margin-right: var(--spacing-x-large);
+  @media screen and (min-width: 50.1em) {
+    max-width: 20rem;
+    margin-right: var(--spacing-x-large);
 
-  .dnb-step-indicator__item {
-    min-width: 320px;
+    .dnb-step-indicator__item {
+      min-width: 320px;
+    }
+  }
+
+  // To avoid layout shift during SSR hydration
+  // we hide the sidebar with skeleton on small screens
+  &--ssr-skeleton {
+    @media screen and (max-width: 50.1em) {
+      visibility: hidden;
+      overflow: hidden;
+      width: 0;
+      height: 5.5rem; // the height of the modal button + label + margin
+    }
   }
 }
 
@@ -50,6 +63,10 @@
 
     will-change: height;
     transition: height 400ms #{$defaultEasing};
+
+    html[data-visual-test] & {
+      transition-duration: 1ms !important;
+    }
   }
   &__trigger button#{&}__trigger__button {
     margin-top: 0.5rem;
@@ -61,6 +78,10 @@
     .dnb-button__icon {
       opacity: 1;
       transition: opacity 1400ms ease-in-out;
+
+      html[data-visual-test] & {
+        transition-duration: 1ms !important;
+      }
     }
     &:not(.dnb-step-indicator__item--visited)
       .dnb-button:not(.dnb-step-indicator__button__status)

package/es/components/step-indicator/style/dnb-step-indicator.css

@@ -174,12 +174,20 @@
     -webkit-box-shadow: 100vw 0 0 0 currentColor;
             box-shadow: 100vw 0 0 0 currentColor; }
 
-.dnb-step-indicator__sidebar {
-  max-width: 20rem;
-  margin-right: 3rem;
-  margin-right: var(--spacing-x-large); }
-  .dnb-step-indicator__sidebar .dnb-step-indicator__item {
-    min-width: 320px; }
+@media screen and (min-width: 50.1em) {
+  .dnb-step-indicator__sidebar {
+    max-width: 20rem;
+    margin-right: 3rem;
+    margin-right: var(--spacing-x-large); }
+    .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+      min-width: 320px; } }
+
+@media screen and (max-width: 50.1em) {
+  .dnb-step-indicator__sidebar--ssr-skeleton {
+    visibility: hidden;
+    overflow: hidden;
+    width: 0;
+    height: 5.5rem; } }
 
 .dnb-step-indicator-v2 .dnb-step-indicator__list {
   display: -webkit-box;
@@ -223,6 +231,10 @@
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2; }
+  html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__trigger__button, html[data-visual-test]
+  .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button {
+    -webkit-transition-duration: 1ms !important;
+            transition-duration: 1ms !important; }
 
 .dnb-step-indicator-v2 .dnb-step-indicator__trigger button.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button {
   margin-top: 0.5rem; }
@@ -233,6 +245,9 @@
     opacity: 1;
     -webkit-transition: opacity 1400ms ease-in-out;
     transition: opacity 1400ms ease-in-out; }
+    html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon {
+      -webkit-transition-duration: 1ms !important;
+              transition-duration: 1ms !important; }
   .dnb-step-indicator-v2 .dnb-step-indicator__item:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status)
 .dnb-button__icon {
     opacity: 0; }