@dnb/eufemia 9.16.3 → 9.18.0

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 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/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.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/es/components/step-indicator/StepIndicatorTriggerButton.js

@@ -89,7 +89,7 @@ export default class StepIndicatorTriggerButton extends 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/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
+    }
   }
 }
 

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;

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

package/es/components/tag/Tag.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "skeleton", "children", "icon", "text"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import classnames from 'classnames';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Icon from '../icon-primary/IconPrimary';
+import Context from '../../shared/Context';
+import { extendPropsWithContext } from '../../shared/component-helper';
+export const defaultProps = {
+  className: null,
+  skeleton: false,
+  text: null,
+  children: null,
+  icon: null
+};
+
+function Tag(localProps) {
+  var _context$translation;
+
+  const context = React.useContext(Context);
+
+  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag),
+        {
+    className,
+    skeleton,
+    children,
+    icon,
+    text
+  } = _extendPropsWithConte,
+        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
+  const spacingClasses = createSpacingClasses(props);
+  const content = text || children;
+  return React.createElement("div", _extends({
+    className: classnames('dnb-tag', skeletonClasses, spacingClasses, className),
+    "data-testid": "tag"
+  }, props), icon && React.createElement("span", {
+    "data-testid": "tag-icon",
+    className: "dnb-tag__icon"
+  }, React.createElement(Icon, {
+    icon: icon,
+    right: "x-small"
+  })), content && React.createElement("span", {
+    "data-testid": "tag-text",
+    className: "dnb-tag__text"
+  }, content));
+}
+
+export default Tag;

package/es/components/tag/Tag.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import { createSpacingClasses } from '../space/SpacingHelper'
+import Icon, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+
+// Shared
+import Context from '../../shared/Context'
+import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+export interface TagProps {
+  /**
+   * The content of the tag element, can be a string or a React Element.
+   * Default: null
+   */
+  text?: React.ReactNode
+
+  /**
+   * Icon displaying on the left side
+   * Default: null
+   */
+  icon?: IconPrimaryIcon
+
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonTypes
+
+  /**
+   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop
+   * Default: null
+   */
+  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...
+}
+
+export const defaultProps = {
+  className: null,
+  skeleton: false,
+  text: null,
+  children: null,
+  icon: null,
+}
+
+function Tag(localProps: TagProps & ISpacingProps) {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // Extract additional props from global context
+  const { className, skeleton, children, icon, text, ...props } =
+    extendPropsWithContext(
+      { ...defaultProps, ...localProps },
+      defaultProps,
+      context?.translation?.Tag,
+      context?.Tag
+    )
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
+  const spacingClasses = createSpacingClasses(props)
+
+  const content = text || children
+
+  return (
+    <div
+      className={classnames(
+        'dnb-tag',
+        skeletonClasses,
+        spacingClasses,
+        className
+      )}
+      data-testid="tag"
+      {...props}
+    >
+      {icon && (
+        <span data-testid="tag-icon" className="dnb-tag__icon">
+          <Icon icon={icon} right="x-small" />
+        </span>
+      )}
+      {content && (
+        <span data-testid="tag-text" className="dnb-tag__text">
+          {content}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default Tag