@dnb/eufemia 10.7.0 → 10.9.0

package/cjs/components/step-indicator/StepIndicatorItem.d.ts

@@ -1,61 +1,59 @@
-import * as React from 'react';
-import type { FormStatusText } from '../FormStatus';
-export type StepIndicatorItemTitle = string | React.ReactNode;
-export type StepIndicatorItemStatusState = 'warn' | 'info' | 'error';
-export interface StepIndicatorItemProps
-  extends React.HTMLProps<HTMLElement> {
-  /**
-   * <em>(required)</em> 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?: string;
-  title: StepIndicatorItemTitle;
-  step_title?: string;
-  /**
-   * Define whether to show automatically counted numbers or not. Defaults to `false`.
-   */
-  hide_numbers?: boolean;
-  /**
-   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
-   */
-  on_item_render?: (...args: any[]) => any;
-  /**
-   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
-   */
-  on_change?: (...args: any[]) => any;
-  on_render?: (...args: any[]) => any;
-  /**
-   * Will be called once the user 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;
-  is_current?: boolean;
-  inactive?: boolean;
-  disabled?: boolean;
-  status?: FormStatusText;
-  status_state?: StepIndicatorItemStatusState;
-  currentItemNum: number;
-}
-export default class StepIndicatorItem extends React.Component<
-  StepIndicatorItemProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
-export interface StepItemButtonProps {
-  children?: React.ReactNode;
-  inner_ref?: React.RefObject<HTMLElement>;
-  className?: string;
-  status?: FormStatusText;
-  status_state?: StepIndicatorStatusState;
-}
-export declare const StepItemButton: React.FC<StepItemButtonProps>;
-export interface StepItemWrapperProps {
-  children?: React.ReactNode;
-  number?: number;
-  /**
-   * Define whether to show automatically counted numbers or not. Defaults to `false`.
-   */
-  hide_numbers?: boolean;
-  status?: string;
-}
-export declare const StepItemWrapper: React.FC<StepItemWrapperProps>;
+/**
+ * Web StepIndicator Component
+ *
+ */
+import React from 'react';
+import { ButtonProps } from '../button/Button';
+import { StepIndicatorMouseEvent, StepIndicatorRenderCallback } from './StepIndicator';
+export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorItemProps = Omit<React.HTMLProps<HTMLElement>, 'title' | 'data'> & {
+    title: string | React.ReactNode;
+    /**
+     * If set to true, this item step will be set as the current current selected step. This can be used instead of `current_step` on the component itself.
+     */
+    is_current?: boolean;
+    /**
+     * If set to true, this item step will be handled as an inactive step and will not be clickable.
+     * Defaults to `false`
+     */
+    inactive?: boolean;
+    /**
+     * If set to true, this item step will be visible as an disabled button and will not be clickable.
+     * Defaults to false.
+     */
+    disabled?: boolean;
+    /**
+     * Is used to set the status text.
+     */
+    status?: string | React.ReactNode;
+    /**
+     * Used to set the status state to be either `info`, `error` or `warn`.
+     * Defaults to `warn`.
+     */
+    status_state?: StepIndicatorStatusState;
+    /**
+     * Callback function to manipulate or wrap the step item. Has to return a React Node. You receive an object `{ StepItem, element, attributes, props, context }`.
+     */
+    on_render?: ({ StepItem, element, attributes, props, context, }: StepIndicatorRenderCallback) => React.ReactNode;
+    /**
+     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+     */
+    on_click?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
+    currentItemNum: number;
+};
+declare function StepIndicatorItem({ status_state: status_state_default, inactive: inactive_default, disabled: disabled_default, ...restOfProps }: StepIndicatorItemProps): import("react/jsx-runtime").JSX.Element;
+export type StepItemButtonProps = Omit<ButtonProps, 'status_state'> & {
+    status_state?: StepIndicatorStatusState;
+};
+export declare function StepItemButton({ children, className, status, status_state, inner_ref, ...props }: StepItemButtonProps): import("react/jsx-runtime").JSX.Element;
+export type StepItemWrapperProps = React.HTMLProps<HTMLElement> & {
+    children?: React.ReactNode;
+    number?: number;
+    /**
+     * Define whether to show automatically counted numbers or not. Defaults to `false`.
+     */
+    hide_numbers?: boolean;
+    status?: string | React.ReactNode;
+};
+export declare function StepItemWrapper({ children, number, hide_numbers, status, }: StepItemWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default StepIndicatorItem;

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

@@ -3,232 +3,210 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StepItemWrapper = exports.StepItemButton = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.StepItemButton = StepItemButton;
+exports.StepItemWrapper = StepItemWrapper;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _componentHelper = require("../../shared/component-helper");
 var _HeightAnimationInstance = _interopRequireDefault(require("../height-animation/HeightAnimationInstance"));
 var _Button = _interopRequireDefault(require("../button/Button"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
-var _FormStatus = require("../../components/form-status/FormStatus");
+var _FormStatus = require("../form-status/FormStatus");
 var _StepIndicatorContext = _interopRequireDefault(require("./StepIndicatorContext"));
-const _excluded = ["currentItemNum", "title", "is_current", "inactive", "disabled", "status", "status_state", "on_render", "on_click", "on_change"],
-  _excluded2 = ["children", "className", "status", "status_state", "inner_ref"];
+var _StepIndicatorProps = require("./StepIndicatorProps");
+const _excluded = ["status_state", "inactive", "disabled"],
+  _excluded2 = ["currentItemNum", "title", "is_current", "inactive", "disabled", "status", "status_state", "on_render", "on_click"],
+  _excluded3 = ["children", "className", "status", "status_state", "inner_ref"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-class StepIndicatorItem extends _react.default.PureComponent {
-  constructor(props, context) {
-    super(props);
-    _defineProperty(this, "onClickHandler", _ref => {
-      let {
-        event,
-        item,
-        currentItemNum
-      } = _ref;
-      const params = {
-        event,
-        item,
-        current_step: currentItemNum,
-        currentStep: currentItemNum
-      };
-      const onClickItem = (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_click', params);
-      const onClickGlobal = (0, _componentHelper.dispatchCustomElementEvent)(this.context, 'on_click', params);
-      if (onClickItem === false || onClickGlobal === false) {
-        return;
-      }
-      if (this.context.activeStep !== currentItemNum) {
-        this.context.setActiveStep(currentItemNum);
-        if (typeof this.context.onChangeState === 'function') {
-          this.context.onChangeState(currentItemNum);
-        }
-        (0, _componentHelper.dispatchCustomElementEvent)(this.context, 'on_change', params);
-      }
-    });
-    this._heightAnim = new _HeightAnimationInstance.default({
-      animate: !(0, _componentHelper.isTrue)(context.no_animation)
-    });
-    this._ref = _react.default.createRef();
-  }
-  componentDidMount() {
-    this._heightAnim.setElement(this._ref.current);
-    this._prevStep = this.context.activeStep;
-  }
-  componentWillUnmount() {
-    this._heightAnim.remove();
-  }
-  getSnapshotBeforeUpdate() {
-    return this._heightAnim.getHeight();
-  }
-  componentDidUpdate(a, b, height) {
-    if (this._prevStep !== this.context.activeStep && (this.props.currentItemNum === this._prevStep || this.props.currentItemNum === this.context.activeStep)) {
-      const toHeight = this._heightAnim.getUnknownHeight();
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function StepIndicatorItem(_ref) {
+  let {
+      status_state: status_state_default = 'warn',
+      inactive: inactive_default = false,
+      disabled: disabled_default = false
+    } = _ref,
+    restOfProps = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread({
+    status_state: status_state_default,
+    inactive: inactive_default,
+    disabled: disabled_default
+  }, restOfProps);
+  const context = (0, _react.useContext)(_StepIndicatorContext.default);
+  const [previousStep, setPreviousStep] = (0, _react.useState)(context.activeStep);
+  const heightAnim = (0, _react.useRef)(new _HeightAnimationInstance.default({
+    animate: (context === null || context === void 0 ? void 0 : context.no_animation) !== undefined ? context.no_animation : false
+  })).current;
+  const ref = (0, _react.useRef)(null);
+  const thisReference = {
+    context,
+    props,
+    onClickHandler
+  };
+  (0, _react.useEffect)(() => {
+    heightAnim.setElement(ref.current);
+    return () => {
+      heightAnim.remove();
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (previousStep !== context.activeStep) {
+      setPreviousStep(context.activeStep);
+    }
+  }, [context.activeStep]);
+  (0, _react.useLayoutEffect)(() => {
+    const height = heightAnim.getHeight();
+    if (previousStep !== context.activeStep && (props.currentItemNum === previousStep || props.currentItemNum === context.activeStep)) {
+      const toHeight = heightAnim.getUnknownHeight();
       if (height !== toHeight) {
-        this._heightAnim.adjustTo(height, toHeight);
+        heightAnim.adjustTo(height, toHeight);
       }
     }
-    this._prevStep = this.context.activeStep;
-  }
-  render() {
-    const {
-      mode,
-      filterAttributes,
-      activeStep,
-      countSteps,
-      listOfReachedSteps,
-      hide_numbers,
-      on_item_render,
-      sidebar_id,
-      step_title
-    } = this.context;
-    const _this$props = this.props,
-      {
-        currentItemNum,
-        title,
-        is_current,
-        inactive,
-        disabled,
-        status,
-        status_state,
-        on_render,
-        on_click,
-        on_change
-      } = _this$props,
-      attributes = _objectWithoutProperties(_this$props, _excluded);
-    Object.keys(attributes).forEach(key => {
-      if (filterAttributes.includes(key)) {
-        delete attributes[key];
-      }
-    });
-    const hasPassedAndIsCurrent = mode === 'loose' || currentItemNum <= activeStep || listOfReachedSteps.includes(currentItemNum);
-    const isNavigateable = mode === 'strict' || mode === 'loose';
-    let isInactive = (0, _componentHelper.isTrue)(inactive) || mode === 'strict' && !hasPassedAndIsCurrent;
-    let isVisited = currentItemNum < activeStep;
-    const id = `${sidebar_id || (0, _componentHelper.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 || (0, _componentHelper.isTrue)(is_current) && isNaN(parseFloat(activeStep));
-    let element = _react.default.createElement(StepItemWrapper, {
-      number: currentItemNum + 1,
-      hide_numbers: hide_numbers,
-      status: status,
-      status_state: status_state
-    }, title);
-    const callbackProps = {
-      StepItem: StepItemWrapper,
-      element,
-      attributes,
-      props: this.props,
-      context: this.context
+  }, [previousStep, context.activeStep, heightAnim, props.currentItemNum]);
+  function onClickHandler(_ref2) {
+    let {
+      event,
+      item,
+      currentItemNum
+    } = _ref2;
+    const params = {
+      event,
+      item,
+      current_step: currentItemNum,
+      currentStep: currentItemNum
     };
-    if (typeof on_render === 'function') {
-      element = on_render(callbackProps);
-    } else if (typeof on_item_render === 'function') {
-      element = on_item_render(callbackProps);
+    const onClickItem = (0, _componentHelper.dispatchCustomElementEvent)(thisReference, 'on_click', params);
+    const onClickGlobal = (0, _componentHelper.dispatchCustomElementEvent)(context, 'on_click', params);
+    if (onClickItem === false || onClickGlobal === false) {
+      return;
     }
-    const itemParams = {};
-    const buttonParams = {
-      icon: 'check',
+    if (context.activeStep !== currentItemNum) {
+      context.setActiveStep(currentItemNum);
+      if (typeof context.onChangeState === 'function') {
+        context.onChangeState();
+      }
+      (0, _componentHelper.dispatchCustomElementEvent)(context, 'on_change', params);
+    }
+  }
+  const {
+    mode,
+    filterAttributes,
+    activeStep,
+    countSteps,
+    listOfReachedSteps,
+    hide_numbers,
+    on_item_render,
+    sidebar_id,
+    step_title
+  } = context;
+  const {
+      currentItemNum,
+      title,
+      is_current,
+      inactive,
+      disabled,
       status,
       status_state,
-      'aria-describedby': id
-    };
-    if (isCurrent) {
-      itemParams['aria-current'] = 'step';
-    }
-    if ((0, _componentHelper.isTrue)(disabled)) {
-      buttonParams['disabled'] = true;
+      on_render,
+      on_click
+    } = props,
+    attributes = _objectWithoutProperties(props, _excluded2);
+  Object.keys(attributes).forEach(key => {
+    if (filterAttributes.includes(key)) {
+      delete attributes[key];
     }
-    if (isNavigateable && !isInactive) {
-      buttonParams.onClick = _ref2 => {
-        let {
-          event
-        } = _ref2;
-        return this.onClickHandler({
-          event,
-          item: this.props,
-          currentItemNum
-        });
-      };
-    }
-    if (!buttonParams.onClick) {
-      buttonParams.element = 'span';
-      buttonParams.type = '';
-      buttonParams.on_click = undefined;
-      isInactive = true;
-    }
-    return _react.default.createElement("li", _extends({}, itemParams, {
-      className: (0, _classnames.default)('dnb-step-indicator__item', itemParams.className, isCurrent && 'dnb-step-indicator__item--current', isInactive && 'dnb-step-indicator__item--inactive', isVisited && 'dnb-step-indicator__item--visited')
-    }), _react.default.createElement(StepItemButton, _extends({}, buttonParams, {
-      inner_ref: this._ref
-    }), element), _react.default.createElement("span", {
-      id: id,
-      "aria-hidden": true,
-      className: "dnb-sr-only"
-    }, ariaLabel));
+  });
+  const hasPassedAndIsCurrent = mode === 'loose' || currentItemNum <= activeStep || listOfReachedSteps.includes(currentItemNum);
+  const isNavigateable = mode === 'strict' || mode === 'loose';
+  let isInactive = inactive || mode === 'strict' && !hasPassedAndIsCurrent;
+  const isVisited = currentItemNum < activeStep;
+  const id = `${sidebar_id || (0, _componentHelper.makeUniqueId)()}-${currentItemNum}`;
+  const ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', String(currentItemNum + 1)).replace('%count', String(countSteps));
+  const isCurrent = currentItemNum === activeStep;
+  let element = _react.default.createElement(StepItemWrapper, {
+    number: currentItemNum + 1,
+    hide_numbers: hide_numbers,
+    status: status
+  }, title);
+  const callbackProps = {
+    StepItem: StepItemWrapper,
+    element,
+    attributes,
+    props,
+    context
+  };
+  if (typeof on_render === 'function') {
+    element = on_render(callbackProps);
+  } else if (typeof on_item_render === 'function') {
+    element = on_item_render(callbackProps);
+  }
+  const itemParams = {};
+  const buttonParams = {
+    icon: 'check',
+    status,
+    status_state,
+    'aria-describedby': id
+  };
+  if (isCurrent) {
+    itemParams['aria-current'] = 'step';
+  }
+  if (disabled) {
+    buttonParams.disabled = true;
+  }
+  if (isNavigateable && !isInactive) {
+    buttonParams.onClick = _ref3 => {
+      let {
+        event
+      } = _ref3;
+      return onClickHandler({
+        event,
+        item: props,
+        currentItemNum
+      });
+    };
   }
+  if (!buttonParams.onClick) {
+    buttonParams.element = 'span';
+    buttonParams.type = '';
+    buttonParams.on_click = undefined;
+    isInactive = true;
+  }
+  return _react.default.createElement("li", _extends({}, itemParams, {
+    className: (0, _classnames.default)('dnb-step-indicator__item', itemParams.className, isCurrent && 'dnb-step-indicator__item--current', isInactive && 'dnb-step-indicator__item--inactive', isVisited && 'dnb-step-indicator__item--visited')
+  }), _react.default.createElement(StepItemButton, _extends({}, buttonParams, {
+    inner_ref: ref
+  }), element), _react.default.createElement("span", {
+    id: id,
+    "aria-hidden": true,
+    className: "dnb-sr-only"
+  }, ariaLabel));
 }
-exports.default = StepIndicatorItem;
-_defineProperty(StepIndicatorItem, "contextType", _StepIndicatorContext.default);
-_defineProperty(StepIndicatorItem, "defaultProps", {
-  mode: null,
-  step_title: '%step',
-  hide_numbers: false,
-  on_item_render: null,
-  on_change: null,
-  on_render: null,
-  on_click: null,
-  is_current: null,
-  inactive: null,
-  disabled: null,
-  status: null,
-  status_state: 'warn'
-});
-process.env.NODE_ENV !== "production" ? StepIndicatorItem.propTypes = {
-  mode: _propTypes.default.string,
-  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
-  step_title: _propTypes.default.string,
-  hide_numbers: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  on_item_render: _propTypes.default.func,
-  on_change: _propTypes.default.func,
-  on_render: _propTypes.default.func,
-  on_click: _propTypes.default.func,
-  is_current: _propTypes.default.bool,
-  inactive: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  status_state: _propTypes.default.oneOf(['warn', 'info', 'error']),
-  currentItemNum: _propTypes.default.number.isRequired
-} : void 0;
-const StepItemButton = _ref3 => {
+function StepItemButton(_ref4) {
   let {
       children,
       className,
       status,
       status_state,
       inner_ref
-    } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded2);
+    } = _ref4,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  const icons = {
+    info: _FormStatus.InfoIcon,
+    error: _FormStatus.ErrorIcon,
+    warn: _FormStatus.WarnIcon
+  };
   if (status) {
-    let icon = null;
-    switch (status_state) {
-      case 'info':
-        icon = _FormStatus.InfoIcon;
-        break;
-      case 'error':
-        icon = _FormStatus.ErrorIcon;
-        break;
-      case 'warn':
-      default:
-        icon = _FormStatus.WarnIcon;
-        break;
-    }
     props.icon = _react.default.createElement(_Icon.default, {
-      icon: icon,
+      icon: icons[status_state] || icons.warn,
       className: "dnb-button__icon",
       size: "medium",
       inherit_color: false
@@ -243,32 +221,17 @@ const StepItemButton = _ref3 => {
     icon_position: "right",
     inner_ref: inner_ref
   }, props), children);
-};
-exports.StepItemButton = StepItemButton;
-process.env.NODE_ENV !== "production" ? StepItemButton.propTypes = {
-  children: _propTypes.default.node,
-  inner_ref: _propTypes.default.object,
-  className: _propTypes.default.string,
-  status: _propTypes.default.string,
-  status_state: _propTypes.default.string
-} : void 0;
-StepItemButton.defaultProps = {
-  children: null,
-  inner_ref: null,
-  className: null,
-  status: null,
-  status_state: null
-};
-const StepItemWrapper = _ref4 => {
+}
+function StepItemWrapper(_ref5) {
   let {
     children,
     number,
-    hide_numbers,
+    hide_numbers = _StepIndicatorProps.stepIndicatorDefaultProps.hide_numbers,
     status
-  } = _ref4;
+  } = _ref5;
   return _react.default.createElement("span", {
     className: "dnb-step-indicator__item-content"
-  }, !(0, _componentHelper.isTrue)(hide_numbers) && _react.default.createElement("span", {
+  }, !hide_numbers && _react.default.createElement("span", {
     "aria-hidden": true,
     className: "dnb-step-indicator__item-content__number"
   }, number, "."), _react.default.createElement("span", {
@@ -278,18 +241,7 @@ const StepItemWrapper = _ref4 => {
   }, children), status && _react.default.createElement("span", {
     className: "dnb-step-indicator__item-content__status"
   }, status)));
-};
-exports.StepItemWrapper = StepItemWrapper;
-process.env.NODE_ENV !== "production" ? StepItemWrapper.propTypes = {
-  children: _propTypes.default.node,
-  number: _propTypes.default.number,
-  hide_numbers: _propTypes.default.bool,
-  status: _propTypes.default.string
-} : void 0;
-StepItemWrapper.defaultProps = {
-  children: null,
-  number: null,
-  hide_numbers: null,
-  status: null
-};
+}
+var _default = StepIndicatorItem;
+exports.default = _default;
 //# sourceMappingURL=StepIndicatorItem.js.map