@dnb/eufemia 9.16.3 → 9.18.0

package/components/step-indicator/StepIndicatorItem.js

@@ -18,6 +18,7 @@ import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.parse-float.js";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -31,7 +32,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';
 
@@ -80,7 +80,6 @@ var StepIndicatorItem = function (_React$PureComponent) {
       return typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
     });
 
-    _this._eventEmitter = EventEmitter.createInstance(context.sidebar_id);
     _this._heightAnim = new AnimateHeight({
       animate: !isTrue(context.no_animation)
     });
@@ -99,8 +98,6 @@ var StepIndicatorItem = function (_React$PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._heightAnim.remove();
-
-      this._eventEmitter.remove();
     }
   }, {
     key: "getSnapshotBeforeUpdate",
@@ -165,7 +162,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       var isVisited = currentItemNum < activeStep;
       var id = "".concat(sidebar_id || makeUniqueId(), "-").concat(currentItemNum);
       var ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', currentItemNum + 1).replace('%count', countSteps);
-      var isCurrent = currentItemNum === activeStep || isTrue(is_current);
+      var isCurrent = currentItemNum === activeStep || isTrue(is_current) && isNaN(parseFloat(activeStep));
       var element = React.createElement(StepItemWrapper, {
         number: currentItemNum + 1,
         hide_numbers: hide_numbers,
@@ -216,6 +213,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       if (!buttonParams.onClick) {
         buttonParams.element = 'span';
         buttonParams.type = '';
+        buttonParams.on_click = undefined;
         isInactive = true;
       }
 

package/components/step-indicator/StepIndicatorModal.js

@@ -1,6 +1,5 @@
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.reflect.construct.js";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
@@ -9,17 +8,18 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConst
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var _StepIndicatorList;
+var _StepIndicatorList, _StepIndicatorList2;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 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';
 
 var StepIndicatorModal = function (_React$PureComponent) {
   _inherits(StepIndicatorModal, _React$PureComponent);
@@ -33,47 +33,51 @@ var StepIndicatorModal = function (_React$PureComponent) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      open_state: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChangeState", function () {
-      _this.setState({
-        open_state: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "openHandler", function () {
-      _this.setState({
-        open_state: true
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "closeHandler", function () {
-      _this.setState({
-        open_state: false
-      });
+      var _this$context;
 
       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 = _this.context).closeHandler.apply(_this$context, arguments);
     });
 
     _this._triggerRef = React.createRef();
+    _this.state = {
+      container: null
+    };
     return _this;
   }
 
   _createClass(StepIndicatorModal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var container = document.getElementById('sidebar__' + this.context.sidebar_id);
+      this.setState({
+        container: container
+      });
+    }
+  }, {
+    key: "renderPortal",
+    value: function renderPortal() {
+      if (!this.state.container) {
+        return null;
+      }
+
+      return ReactDOM.createPortal(_StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, null)), this.state.container);
+    }
+  }, {
     key: "render",
     value: function render() {
-      if (this.context.hasSidebar && !this.context.hideSidebar) {
-        return null;
+      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,
@@ -81,19 +85,16 @@ var StepIndicatorModal = function (_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/components/step-indicator/StepIndicatorProps.js

@@ -28,7 +28,7 @@ export var 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/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 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;
+      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".
@@ -6,10 +29,26 @@ import * as React from 'react';
 export interface StepIndicatorSidebarProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * 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.
+   * A 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 the example above.
+   */
+  data?: StepIndicatorSidebarData;
   internalId?: string;
+  showInitialData?: boolean;
 }
 export default class StepIndicatorSidebar extends React.Component<
   StepIndicatorSidebarProps,

package/components/step-indicator/StepIndicatorSidebar.js

@@ -9,7 +9,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConst
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var _div;
+var _StepIndicatorList;
+
+import "core-js/modules/es.array.concat.js";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -17,32 +19,30 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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';
 
 var StepIndicatorSidebar = function (_React$PureComponent) {
   _inherits(StepIndicatorSidebar, _React$PureComponent);
 
   var _super = _createSuper(StepIndicatorSidebar);
 
-  function StepIndicatorSidebar(props) {
+  function StepIndicatorSidebar() {
     var _this;
 
     _classCallCheck(this, StepIndicatorSidebar);
 
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      hasSidebar: true,
-      hideSidebar: false
-    });
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this._eventEmitter = EventEmitter.createInstance(props.sidebar_id);
+    _this = _super.call.apply(_super, [this].concat(args));
 
-    _this._eventEmitter.update({
-      hideSidebar: true
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      showInitialData: true
     });
 
     return _this;
@@ -51,65 +51,67 @@ var StepIndicatorSidebar = function (_React$PureComponent) {
   _createClass(StepIndicatorSidebar, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
-
-      this._mediaQueryListener = onMediaQueryChange({
-        min: '0',
-        max: 'medium'
-      }, function (hideSidebar) {
-        _this2.setState({
-          hideSidebar: hideSidebar
+      if (!this.props.showInitialData) {
+        this.setState({
+          showInitialData: false
         });
-
-        if (_this2._eventEmitter) {
-          _this2._eventEmitter.update({
-            hideSidebar: hideSidebar
-          });
-        }
-      }, {
-        runOnInit: true
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function 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();
-
-        this._eventEmitter = null;
+    }
+  }, {
+    key: "getContextAndProps",
+    value: function getContextAndProps() {
+      var _this$context, _this$context2, _providerProps$data;
+
+      var 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)) {
+        var text = 'Skeleton text';
+        providerProps.data = [text.slice(10), text, text, text.slice(4)];
+        providerProps.skeleton = true;
+        this._hasSkeletonData = true;
       }
+
+      return providerProps;
     }
   }, {
     key: "render",
     value: function 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)))));
+      var 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))));
     }
   }]);
 
   return StepIndicatorSidebar;
 }(React.PureComponent);
 
+_defineProperty(StepIndicatorSidebar, "contextType", Context);
+
 _defineProperty(StepIndicatorSidebar, "defaultProps", {
-  internalId: null
+  mode: stepIndicatorDefaultProps.mode,
+  current_step: stepIndicatorDefaultProps.current_step,
+  data: stepIndicatorDefaultProps.data
 });
 
 export { StepIndicatorSidebar as default };
 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/components/step-indicator/StepIndicatorTriggerButton.d.ts

@@ -6,7 +6,7 @@ import * as React from 'react';
 export interface StepIndicatorTriggerButtonProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * 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.
+   * A 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;
   className?: string;

package/components/step-indicator/StepIndicatorTriggerButton.js

@@ -126,7 +126,7 @@ var StepIndicatorTriggerButton = function (_React$PureComponent) {
         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/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
+    }
   }
 }
 

package/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;

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

@@ -1,2 +1,2 @@
-.dnb-step-indicator{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-step-indicator *,.dnb-step-indicator :after,.dnb-step-indicator :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-step-indicator :after,.dnb-step-indicator :before{text-decoration:inherit;vertical-align:inherit}.dnb-step-indicator-v1 .dnb-step-indicator{display:block;padding:0;position:relative;z-index:1}.dnb-step-indicator-v1 .dnb-step-indicator__list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;list-style:none;margin:0;padding:0}.dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list,.dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list li{margin-bottom:0;margin-top:0}.dnb-step-indicator-v1 .dnb-step-indicator__item{-ms-flex-item-align:end;align-self:flex-end}.dnb-step-indicator-v1 .dnb-step-indicator__item-content{font-size:1.125rem;font-size:var(--font-size-basis)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link,.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static,.dnb-step-indicator-v1 .dnb-step-indicator__item-content.dnb-anchor,.dnb-step-indicator-v1 .dnb-step-indicator__item-contenta{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;border-bottom:none;-webkit-box-shadow:none;box-shadow:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;margin:0;padding:.25rem;position:relative;text-decoration:none;z-index:2}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link.dnb-anchor{line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled],html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled]{cursor:not-allowed}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]):after{content:none}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--number{padding-right:.25rem;white-space:nowrap}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--text{text-align:left}.dnb-step-indicator-v1 .dnb-step-indicator__item-content:after{border-radius:1.5px;bottom:0;content:"";height:3px;left:0;position:absolute;width:100%;z-index:1}.dnb-step-indicator-v1 .dnb-step-indicator:after{background-color:currentColor;bottom:0;-webkit-box-shadow:100vw 0 0 0 currentColor;box-shadow:100vw 0 0 0 currentColor;color:#000;color:var(--color-black);content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-step-indicator__sidebar{margin-right:3rem;margin-right:var(--spacing-x-large);max-width:20rem}.dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:320px}.dnb-step-indicator-v2 .dnb-step-indicator__list{list-style:none;margin:0;padding:0}.dnb-step-indicator-v2 .dnb-step-indicator__list,.dnb-step-indicator-v2 .dnb-step-indicator__trigger{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button{-webkit-box-pack:justify;-ms-flex-pack:justify;border-radius:.25rem;justify-content:space-between;overflow:hidden;-webkit-transition:height .4s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1);will-change:height}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__text,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__text{text-align:left}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text{margin-right:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__alignment,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__alignment{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button,html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__trigger__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:.5rem}.dnb-step-indicator-v2 .dnb-step-indicator__item{margin-bottom:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon{opacity:1;-webkit-transition:opacity 1.4s ease-in-out;transition:opacity 1.4s 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-step-indicator{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-step-indicator *,.dnb-step-indicator :after,.dnb-step-indicator :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-step-indicator :after,.dnb-step-indicator :before{text-decoration:inherit;vertical-align:inherit}.dnb-step-indicator-v1 .dnb-step-indicator{display:block;padding:0;position:relative;z-index:1}.dnb-step-indicator-v1 .dnb-step-indicator__list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;list-style:none;margin:0;padding:0}.dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list,.dnb-spacing .dnb-step-indicator-v1 .dnb-step-indicator__list li{margin-bottom:0;margin-top:0}.dnb-step-indicator-v1 .dnb-step-indicator__item{-ms-flex-item-align:end;align-self:flex-end}.dnb-step-indicator-v1 .dnb-step-indicator__item-content{font-size:1.125rem;font-size:var(--font-size-basis)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link,.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static,.dnb-step-indicator-v1 .dnb-step-indicator__item-content.dnb-anchor,.dnb-step-indicator-v1 .dnb-step-indicator__item-contenta{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;border-bottom:none;-webkit-box-shadow:none;box-shadow:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;margin:0;padding:.25rem;position:relative;text-decoration:none;z-index:2}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link.dnb-anchor{line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled],html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus[disabled]{cursor:not-allowed}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-step-indicator-v1 .dnb-step-indicator__item-content--link:focus:not([disabled]):after{content:none}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--number{padding-right:.25rem;white-space:nowrap}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--text{text-align:left}.dnb-step-indicator-v1 .dnb-step-indicator__item-content:after{border-radius:1.5px;bottom:0;content:"";height:3px;left:0;position:absolute;width:100%;z-index:1}.dnb-step-indicator-v1 .dnb-step-indicator:after{background-color:currentColor;bottom:0;-webkit-box-shadow:100vw 0 0 0 currentColor;box-shadow:100vw 0 0 0 currentColor;color:#000;color:var(--color-black);content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}@media screen and (min-width:50.1em){.dnb-step-indicator__sidebar{margin-right:3rem;margin-right:var(--spacing-x-large);max-width:20rem}.dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:320px}}@media screen and (max-width:50.1em){.dnb-step-indicator__sidebar--ssr-skeleton{height:5.5rem;overflow:hidden;visibility:hidden;width:0}}.dnb-step-indicator-v2 .dnb-step-indicator__list{list-style:none;margin:0;padding:0}.dnb-step-indicator-v2 .dnb-step-indicator__list,.dnb-step-indicator-v2 .dnb-step-indicator__trigger{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button{-webkit-box-pack:justify;-ms-flex-pack:justify;border-radius:.25rem;justify-content:space-between;overflow:hidden;-webkit-transition:height .4s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1);will-change:height}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__text,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__text{text-align:left}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button.dnb-button--has-icon .dnb-button__text,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button.dnb-button--has-icon .dnb-button__text{margin-right:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button .dnb-button__alignment,.dnb-step-indicator-v2 .dnb-step-indicator__trigger__button .dnb-button__alignment{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button,html[data-visual-test] .dnb-step-indicator-v2 .dnb-step-indicator__trigger__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:.5rem}.dnb-step-indicator-v2 .dnb-step-indicator__item{margin-bottom:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__item .dnb-button__icon{opacity:1;-webkit-transition:opacity 1.4s ease-in-out;transition:opacity 1.4s 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}.dnb-step-indicator-v2 .dnb-step-indicator__item-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding:.5rem 0}.dnb-step-indicator-v2 .dnb-step-indicator__item-content__number{padding-right:.5rem;white-space:nowrap}.dnb-step-indicator-v2 .dnb-step-indicator__item-content__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:#333;color:var(--color-black-80);font-size:.875rem;font-size:var(--font-size-x-small)}

package/components/switch/Switch.d.ts

@@ -57,7 +57,7 @@ export type SwitchChildren = string | ((...args: any[]) => any);
  */
 export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: SwitchLabel;
 
@@ -73,7 +73,7 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   default_state?: SwitchDefaultState;
 
   /**
-   * Determine whether the switch is checked or not. Default will be `false`.
+   * Determine whether the switch is checked or not. The default will be `false`.
    */
   checked?: SwitchChecked;
   disabled?: SwitchDisabled;
@@ -90,7 +90,7 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   status?: SwitchStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -149,12 +149,12 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.
+   * Will be called on state changes made by the user. Returns a boolean `{ checked, event }`.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user, but with a delay. This way the users sees the animation, before e.g. an error will be removed. Returns an boolean `{ checked, event }`.
+   * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`.
    */
   on_change_end?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/components/tabs/Tabs.d.ts

@@ -81,7 +81,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   content_style?: string;
 
   /**
-   * To modify the `spacing` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
+   * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
    */
   content_spacing?: TabsContentSpacing;
   label?: string;
@@ -107,7 +107,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   tabs_style?: string;
 
   /**
-   * To modify the `spacing` inside the tabs list. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `false`.
+   * To modify the `spacing` inside the tab list. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `false`.
    */
   tabs_spacing?: TabsTabsSpacing;
   use_hash?: TabsUseHash;
@@ -118,7 +118,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   prerender?: TabsPrerender;
 
   /**
-   * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the users is activating a tab. Defaults to `false`.
+   * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.
    */
   prevent_rerender?: TabsPreventRerender;
 
@@ -172,7 +172,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * This event gets triggered once the a users mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.
+   * This event gets triggered once the user&#39;s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.
    */
   on_mouse_enter?: (...args: any[]) => any;
 

package/components/tabs/TabsContentWrapper.d.ts

@@ -22,7 +22,7 @@ export interface ContentWrapperProps extends React.HTMLProps<HTMLElement> {
   content_style?: string;
 
   /**
-   * To modify the `spacing` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
+   * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
    */
   content_spacing?: ContentWrapperContentSpacing;