dibk-design 6.2.3 → 6.4.0

package/dist/assets/svg/checkmark-symbol.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Ferdig" style="fill: rgb(23, 121, 18);">
+    <mask id="mask0_1089_7430" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" style="mask-type: alpha;">
+        <rect width="20" height="20"></rect>
+    </mask>
+    <g mask="url(#mask0_1089_7430)">
+        <path d="M5.71427 8.57149L3.80951 10.4762L8.57141 15.2382L17.1428 6.66672L15.2381 4.76196L8.57141 11.4286L5.71427 8.57149Z"></path>
+    </g>
+</svg>

package/dist/components/DescriptionDetails.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../functions/helpers");
+var _DescriptionDetailsModule = _interopRequireDefault(require("./DescriptionDetails.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DescriptionDetails = _ref => {
+  let {
+    compact,
+    titleWidth,
+    children
+  } = _ref;
+  return _react.default.createElement("dd", {
+    className: (0, _helpers.classNameArrayToClassNameString)([_DescriptionDetailsModule.default.descriptionDetails, compact && _DescriptionDetailsModule.default.compact]),
+    style: {
+      "--title-width": titleWidth || null
+    }
+  }, children);
+};
+DescriptionDetails.propTypes = {
+  compact: _propTypes.default.bool,
+  titleWidth: _propTypes.default.string
+};
+DescriptionDetails.defaultProps = {
+  compact: false
+};
+var _default = exports.default = DescriptionDetails;

package/dist/components/DescriptionDetails.module.scss

@@ -0,0 +1,21 @@
+@import "../style/global.scss";
+
+.descriptionDetails {
+    font-size: 16px;
+    list-style: var(--listStyle);
+    color: var(--color-primary, $color-primary);
+    margin: 0;
+    &:not(.compact) {
+        line-height: 1.6;
+    }
+    &.compact {
+        line-height: 1.4;
+    }
+    &:not([style*="--title-width"]) {
+        display: inline;
+    }
+    &[style*="--title-width"] {
+        flex-basis: calc(100% - var(--title-width));
+        flex-grow: 1;
+    }
+}

package/dist/components/DescriptionList.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _DescriptionListModule = _interopRequireDefault(require("./DescriptionList.module.scss"));
+var _helpers = require("../functions/helpers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DescriptionList = _ref => {
+  let {
+    compact,
+    titleWidth,
+    children
+  } = _ref;
+  const renderChildElements = childElements => {
+    const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
+    return childElementsthroughFragments.map((childElement, index) => {
+      const childElementCopy = _react.default.cloneElement(childElement, {
+        compact: compact,
+        titleWidth: titleWidth,
+        key: "descriptionListItem-".concat(index)
+      });
+      return childElementCopy;
+    });
+  };
+  const renderList = children => {
+    let listElement = _react.default.createElement("dl", {
+      className: (0, _helpers.classNameArrayToClassNameString)([_DescriptionListModule.default.descriptionList, !!compact && _DescriptionListModule.default.compact]),
+      style: {
+        "--title-width": titleWidth || null
+      }
+    }, renderChildElements(_react.default.Children.toArray(children)));
+    return listElement;
+  };
+  return renderList(children);
+};
+DescriptionList.propTypes = {
+  compact: _propTypes.default.bool,
+  titleWidth: _propTypes.default.string
+};
+DescriptionList.defaultProps = {
+  compact: false
+};
+var _default = exports.default = DescriptionList;

package/dist/components/DescriptionList.module.scss

@@ -0,0 +1,17 @@
+@import "../style/global.scss";
+
+.descriptionList {
+    margin: 0;
+    padding: 0;
+    margin-bottom: 20px;
+    font-size: 16px;
+    list-style: var(--listStyle);
+    &[style*="--title-width"] {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: end;
+    }
+    &.compact {
+        margin-left: 0px;
+    }
+}

package/dist/components/DescriptionTerm.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../functions/helpers");
+var _DescriptionTermModule = _interopRequireDefault(require("./DescriptionTerm.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DescriptionTerm = _ref => {
+  let {
+    compact,
+    titleWidth,
+    children
+  } = _ref;
+  return _react.default.createElement("dt", {
+    className: (0, _helpers.classNameArrayToClassNameString)([_DescriptionTermModule.default.descriptionTerm, compact && _DescriptionTermModule.default.compact]),
+    style: {
+      "--title-width": titleWidth || null
+    }
+  }, children);
+};
+DescriptionTerm.propTypes = {
+  compact: _propTypes.default.bool,
+  titleWidth: _propTypes.default.string
+};
+DescriptionTerm.defaultProps = {
+  compact: false
+};
+var _default = exports.default = DescriptionTerm;

package/dist/components/DescriptionTerm.module.scss

@@ -0,0 +1,29 @@
+@import "../style/global.scss";
+
+.descriptionTerm {
+    font-size: 16px;
+    list-style: var(--listStyle);
+    color: var(--color-primary, $color-primary);
+    margin: 0;
+    font-weight: bold;
+    &:not(.compact) {
+        line-height: 1.6;
+    }
+    &.compact {
+        line-height: 1.4;
+    }
+    &:not([style*="--title-width"]) {
+        display: inline;
+        &::before {
+            display: block;
+            content: "";
+        }
+        &::after {
+            display: inline;
+            content: " ";
+        }
+    }
+    &[style*="--title-width"] {
+        width: var(--title-width);
+    }
+}

package/dist/components/List.js

@@ -6,10 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../functions/helpers");
 var _ListModule = _interopRequireDefault(require("./List.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const List = props => {
-  const renderList = () => {
+  const renderChildElements = childElements => {
+    const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
+    return childElementsthroughFragments.map((childElement, index) => {
+      const childElementCopy = _react.default.cloneElement(childElement, {
+        compact: props.compact,
+        key: "listItem-".concat(index)
+      });
+      return childElementCopy;
+    });
+  };
+  const renderList = children => {
     let listType = props.ordered ? "ol" : "ul";
     const defaultListStyle = props.ordered ? "decimal" : "disc";
     const scssValueProperty = "--listStyle";
@@ -18,10 +29,10 @@ const List = props => {
       style: {
         [scssValueProperty]: props.listStyle || defaultListStyle
       }
-    }, props.children);
+    }, renderChildElements(_react.default.Children.toArray(children)));
     return listElement;
   };
-  return renderList();
+  return renderList(props.children);
 };
 List.propTypes = {
   listStyle: _propTypes.default.string,

package/dist/components/List.module.scss

@@ -1,3 +1,5 @@
+@import "../style/global.scss";
+
 .list {
     margin: 0;
     margin-left: 20px;
@@ -6,13 +8,7 @@
     list-style-position: outside;
     font-size: 16px;
     list-style: var(--listStyle);
-    > li {
-        line-height: 1.6;
-    }
     &.compact {
         margin-left: 0px;
-        > li {
-            line-height: 1.4;
-        }
     }
 }

package/dist/components/ListItem.js

@@ -6,14 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _helpers = require("../functions/helpers");
+var _ListItemModule = _interopRequireDefault(require("./ListItem.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ListItem = props => {
-  const elementProps = {
-    key: props.elementKey || null
-  };
-  return _react.default.createElement("li", elementProps, props.children, props.elementKey);
+const ListItem = _ref => {
+  let {
+    compact,
+    children
+  } = _ref;
+  return _react.default.createElement("li", {
+    className: (0, _helpers.classNameArrayToClassNameString)([_ListItemModule.default.listItem, compact && _ListItemModule.default.compact])
+  }, children);
 };
 ListItem.propTypes = {
-  elementKey: _propTypes.default.string
+  compact: _propTypes.default.bool
+};
+ListItem.defaultProps = {
+  compact: false
 };
 var _default = exports.default = ListItem;

package/dist/components/ListItem.module.scss

@@ -0,0 +1,9 @@
+@import "../style/global.scss";
+
+.listItem {
+    line-height: 1.6;
+    color: var(--color-primary, $color-primary);
+    &.compact {
+        line-height: 1.4;
+    }
+}

package/dist/components/Theme.js

@@ -6,14 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
 var _Button = _interopRequireDefault(require("./Button"));
+var _CheckBoxList = _interopRequireDefault(require("./CheckBoxList"));
+var _CheckBoxListItem = _interopRequireDefault(require("./CheckBoxListItem"));
 var _Container = _interopRequireDefault(require("./Container"));
+var _DescriptionDetails = _interopRequireDefault(require("./DescriptionDetails"));
+var _DescriptionList = _interopRequireDefault(require("./DescriptionList"));
+var _DescriptionTerm = _interopRequireDefault(require("./DescriptionTerm"));
 var _Header = _interopRequireDefault(require("./Header"));
-var _Accordion = _interopRequireDefault(require("./Accordion"));
-var _Paper = _interopRequireDefault(require("./Paper"));
+var _List = _interopRequireDefault(require("./List"));
+var _ListItem = _interopRequireDefault(require("./ListItem"));
 var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
-var _CheckBoxList = _interopRequireDefault(require("./CheckBoxList"));
-var _CheckBoxListItem = _interopRequireDefault(require("./CheckBoxListItem"));
+var _Paper = _interopRequireDefault(require("./Paper"));
 var _RadioButtonList = _interopRequireDefault(require("./RadioButtonList"));
 var _RadioButtonListItem = _interopRequireDefault(require("./RadioButtonListItem"));
 var _ThemeModule = _interopRequireDefault(require("./Theme.module.scss"));
@@ -108,7 +113,23 @@ const Theme = _ref => {
     inputValue: "value 2",
     name: "radio-button-list-list-item",
     id: "radioButtonList-listItem-2"
-  }, "Unchecked radio button")))))) : "Select a theme";
+  }, "Unchecked radio button"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Lists"), _react.default.createElement(_Header.default, {
+    size: 3
+  }, "Unordered list"), _react.default.createElement(_List.default, null, _react.default.createElement(_ListItem.default, null, "First list item"), _react.default.createElement(_ListItem.default, null, "Second list item"), _react.default.createElement(_ListItem.default, null, "Third list item")), _react.default.createElement(_Header.default, {
+    size: 3
+  }, "Ordered list"), _react.default.createElement(_List.default, {
+    ordered: true
+  }, _react.default.createElement(_ListItem.default, null, "First list item"), _react.default.createElement(_ListItem.default, null, "Second list item"), _react.default.createElement(_ListItem.default, null, "Third list item"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Description lists"), _react.default.createElement(_Header.default, {
+    size: 3
+  }, "Description list variable title width"), _react.default.createElement(_DescriptionList.default, null, _react.default.createElement(_DescriptionTerm.default, null, "First description term:"), _react.default.createElement(_DescriptionDetails.default, null, "First description details"), _react.default.createElement(_DescriptionTerm.default, null, "Second description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Second description details"), _react.default.createElement(_DescriptionTerm.default, null, "Third description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Third description details")), _react.default.createElement(_Header.default, {
+    size: 3
+  }, "Description list with static title width"), _react.default.createElement(_DescriptionList.default, {
+    titleWidth: "240px"
+  }, _react.default.createElement(_DescriptionTerm.default, null, "First description term:"), _react.default.createElement(_DescriptionDetails.default, null, "First description details"), _react.default.createElement(_DescriptionTerm.default, null, "Second description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Second description details"), _react.default.createElement(_DescriptionTerm.default, null, "Third description term:"), _react.default.createElement(_DescriptionDetails.default, null, "Third description details")))))) : "Select a theme";
 };
 Theme.propTypes = {
   theme: _propTypes.default.object.isRequired

package/dist/components/ToggleNavigationButton.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ToggleNavigationButtonModule = _interopRequireDefault(require("./ToggleNavigationButton.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ToggleNavigationButton = _ref => {
+  let {
+    id,
+    htmlTag,
+    showText,
+    hideText,
+    buttonProps,
+    isOpen
+  } = _ref;
+  const elementClass = _ToggleNavigationButtonModule.default.toggleNavigationButton;
+  let element = _react.default.createElement(htmlTag, {
+    className: elementClass,
+    id: id || null
+  }, isOpen ? hideText : showText);
+  return element;
+};
+ToggleNavigationButton.propTypes = {
+  id: _propTypes.default.string,
+  htmlTag: _propTypes.default.string,
+  showText: _propTypes.default.string,
+  hideText: _propTypes.default.string,
+  buttonProps: _propTypes.default.object,
+  isOpen: _propTypes.default.bool
+};
+ToggleNavigationButton.defaultProps = {
+  htmlTag: "button",
+  isOpen: false
+};
+var _default = exports.default = ToggleNavigationButton;

package/dist/components/ToggleNavigationButton.module.scss

@@ -0,0 +1,31 @@
+@import "../style/global.scss";
+
+.toggleNavigationButton {
+    background-color: var(--color-body-background, $color-body-background);
+    color: var(--color-primary, $color-primary);
+    border: 1px solid var(--color-primary, $color-primary);
+    font-family: $default-font;
+    transition: background-color $default-transition;
+    display: block;
+    width: 100%;
+    margin: 0 auto;
+    border-radius: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0.01em;
+    padding: 12px 24px;
+    cursor: pointer;
+    text-align: center;
+    position: relative;
+    text-decoration: none;
+    &:hover {
+        color: var(--color-primary-text, $color-primary-text);
+    }
+    &:focus {
+        outline-width: 2px;
+        outline-color: var(--color-focus, $color-focus);
+        outline-style: auto;
+        outline-offset: 1px;
+    }
+}

package/dist/components/WizardNavigation/Step.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
 var _helpers = require("../../functions/helpers");
 var _StepModule = _interopRequireDefault(require("./Step.module.scss"));
+var _checkmarkSymbol = _interopRequireDefault(require("../../assets/svg/checkmark-symbol.svg?url"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -23,11 +24,19 @@ const Step = props => {
     return step.hasErrors ? _StepModule.default.hasErrors : "";
   };
   const renderStepContent = (step, index) => {
+    const isActiveStep = props.activeStepId === step.id;
+    const isVertical = props.direction === "vertical";
+    const isFinished = step.finished;
+    const showCheckmarkSymbol = isVertical && isFinished && !isActiveStep;
     return _react.default.createElement(_react.Fragment, null, _react.default.createElement("span", {
       className: _StepModule.default.stepNumber
     }, index + 1), _react.default.createElement("span", {
       className: _StepModule.default.stepName
-    }, step.name));
+    }, step.name), showCheckmarkSymbol && _react.default.createElement("img", {
+      src: _checkmarkSymbol.default,
+      alt: "",
+      className: _StepModule.default.checkmarkSymbol
+    }));
   };
   const {
     step,
@@ -35,7 +44,7 @@ const Step = props => {
     activeStepId
   } = props;
   return _react.default.createElement("li", {
-    className: (0, _helpers.classNameArrayToClassNameString)([_StepModule.default.wizardTopnavItem, getActiveClass(step), getFinishedClass(step), getErrorClass(step)])
+    className: (0, _helpers.classNameArrayToClassNameString)([_StepModule.default.wizardTopnavItem, getActiveClass(step), getFinishedClass(step), getErrorClass(step), _StepModule.default[props.direction]])
   }, step.link && Object.keys(step.link).length ? _react.default.createElement(_reactRouterDom.Link, {
     to: step.link,
     "aria-current": activeStepId === step.id ? "step" : null,
@@ -48,6 +57,10 @@ const Step = props => {
 Step.propTypes = {
   step: _propTypes.default.object.isRequired,
   activeStepId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  index: _propTypes.default.number.isRequired
+  index: _propTypes.default.number.isRequired,
+  direction: _propTypes.default.oneOf(["vertical", "horizontal"])
+};
+Step.defaultProps = {
+  direction: "vertical"
 };
 var _default = exports.default = Step;

package/dist/components/WizardNavigation/Step.module.scss

@@ -1,112 +1,170 @@
 @import "../../style/global.scss";
 
-.wizard-topnav .wizard-topnav-item.finished .wizard-topnav-item-content:before {
-  background-color: var(--color-primary, $color-primary);
-}
-
 .wizardTopnavItem {
-  flex: 1;
   a {
     text-decoration: none;
   }
   .wizardTopnavItemContent {
     display: flex;
-    height: 60px;
-    align-items: center;
-    @media only screen and (min-width: $screen-sm) {
-      display: block;
-      height: auto;
-    }
-    &:before {
-      @media only screen and (max-width: $screen-xs-max) {
-        display: block;
-        content: " ";
-        height: 36px;
-        background-color: #e2e1e0;
-        left: 10px;
-        top: 33px;
-        position: relative;
-        margin-top: -3px;
-        margin-bottom: -3px;
-        width: 15px;
-        margin-right: -15px;
+  }
+  &.vertical {
+    transition: background-color $long-transition;
+    .wizardTopnavItemContent {
+      -webkit-box-align: center;
+      align-items: center;
+      -webkit-box-pack: center;
+      justify-content: center;
+      text-decoration: none;
+      border-radius: 0px;
+      padding: 12px;
+      margin-bottom: 4px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      letter-spacing: 0.01em;
+      .stepNumber {
+        display: flex;
+        align-self: stretch;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        justify-content: center;
+        overflow: hidden;
+        min-width: 12px;
+        max-width: 100%;
+        color: var(--color-secondary-contrast, $color-secondary-contrast);
       }
-      @media only screen and (min-width: $screen-sm) {
-        display: inline-block;
-        content: " ";
-        height: 15px;
-        background-color: #e2e1e0;
-        width: 100%;
-        left: 50%;
-        position: relative;
-        margin-bottom: -30px;
+      .stepName {
+        -webkit-box-flex: 1;
+        flex-grow: 1;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        letter-spacing: 0.01em;
+        margin: 0px 0px 0px 12px;
+        color: var(--color-default-text, $color-default-text);
       }
     }
-    .stepNumber {
-      border-radius: 50%;
-      width: 35px;
-      height: 35px;
-      display: block;
-      text-align: center;
-      background-color: #e2e1e0;
-      color: var(--color-default-text, $color-default-text);
-      position: relative;
-      font-size: 20px;
-      line-height: 1.75em;
-      z-index: 1;
-      margin-right: 8px;
-      @media only screen and (min-width: $screen-sm) {
-        margin: auto;
-      }
+    &:hover:not(.active):not(.finished):not(.hasErrors) {
+      background-color: var(--color-secondary-x-light, $color-secondary-x-light);
     }
-    .stepName {
-      display: block;
-      text-align: left;
-      color: var(--color-default-text, $color-default-text);
-      flex: 1;
-      flex-basis: min-content;
-      @media only screen and (min-width: $screen-sm) {
-        display: block;
-        text-align: center;
+    &.active {
+      background-color: var(--color-secondary-light, $color-secondary-light);
+    }
+    &.finished:not(.active) {
+      background-color: var(--color-success-x-light, $color-success-x-light);
+      &:hover {
+        background-color: var(--color-success-light, $color-success-light);
       }
     }
-  }
-  &.active {
-    :local(.stepNumber) {
-      background-color: var(--color-primary, $color-primary);
-      color: #fff;
+    &.hasErrors:not(.active) {
+      background-color: var(--color-error-x-light, $color-error-x-light);
+      &:hover {
+        background-color: var(--color-error-light, $color-error-light);
+      }
     }
   }
-  &.finished {
+  &.horizontal {
+    flex: 1;
     .wizardTopnavItemContent {
+      height: 60px;
+      align-items: center;
+      @media only screen and (min-width: $screen-sm) {
+        display: block;
+        height: auto;
+      }
       &:before {
-        background-color: var(--color-primary, $color-primary);
+        @media only screen and (max-width: $screen-xs-max) {
+          display: block;
+          content: " ";
+          height: 36px;
+          background-color: #e2e1e0;
+          left: 10px;
+          top: 33px;
+          position: relative;
+          margin-top: -3px;
+          margin-bottom: -3px;
+          width: 15px;
+          margin-right: -15px;
+        }
+        @media only screen and (min-width: $screen-sm) {
+          display: inline-block;
+          content: " ";
+          height: 15px;
+          background-color: #e2e1e0;
+          width: 100%;
+          left: 50%;
+          position: relative;
+          margin-bottom: -30px;
+        }
       }
       .stepNumber {
+        border-radius: 50%;
+        width: 35px;
+        height: 35px;
+        display: block;
+        text-align: center;
+        background-color: #e2e1e0;
+        color: var(--color-default-text, $color-default-text);
+        position: relative;
+        font-size: 20px;
+        line-height: 1.75em;
+        z-index: 1;
+        margin-right: 8px;
+        @media only screen and (min-width: $screen-sm) {
+          margin: auto;
+        }
+      }
+      .stepName {
+        display: block;
+        text-align: left;
+        color: var(--color-default-text, $color-default-text);
+        flex: 1;
+        flex-basis: min-content;
+        @media only screen and (min-width: $screen-sm) {
+          display: block;
+          text-align: center;
+        }
+      }
+    }
+
+    &.active {
+      :local(.stepNumber) {
         background-color: var(--color-primary, $color-primary);
         color: #fff;
       }
     }
-  }
-  &.hasErrors {
-    .wizardTopnavItemContent {
-      &:before {
-        background-color: var(--color-warning, $color-warning);
-      }
-      .stepNumber {
-        background-color: var(--color-warning, $color-warning);
-        color: #fff;
+    &.finished {
+      .wizardTopnavItemContent {
+        &:before {
+          background-color: var(--color-primary, $color-primary);
+        }
+        .stepNumber {
+          background-color: var(--color-primary, $color-primary);
+          color: #fff;
+        }
       }
     }
-  }
-  &:last-child {
-    .wizardTopnavItemContent {
-      &:before {
-        @media only screen and (max-width: $screen-xs-max) {
-          height: 0;
+    &.hasErrors {
+      .wizardTopnavItemContent {
+        &:before {
+          background-color: var(--color-warning, $color-warning);
         }
-        @media only screen and (min-width: $screen-sm) {
-          width: 0;
+        .stepNumber {
+          background-color: var(--color-warning, $color-warning);
+          color: #fff;
+        }
+      }
+    }
+    &:last-child {
+      .wizardTopnavItemContent {
+        &:before {
+          @media only screen and (max-width: $screen-xs-max) {
+            height: 0;
+          }
+          @media only screen and (min-width: $screen-sm) {
+            width: 0;
+          }
         }
       }
     }

package/dist/components/WizardNavigation.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Step = _interopRequireDefault(require("./WizardNavigation/Step"));
+var _helpers = require("../functions/helpers");
 var _WizardNavigationModule = _interopRequireDefault(require("./WizardNavigation.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const WizardNavigation = props => {
@@ -16,6 +17,7 @@ const WizardNavigation = props => {
     return hasSteps ? Object.keys(steps).map((stepKey, stepIndex) => {
       const step = steps[stepKey];
       return _react.default.createElement(_Step.default, {
+        direction: props.direction,
         step: step,
         activeStepId: activeStepId,
         index: stepIndex,
@@ -27,7 +29,8 @@ const WizardNavigation = props => {
   const defaultAriaLabel = "I dette skjemaet er det totalt ".concat(amountOfSteps, " steg som du skal g\xE5 igjennom");
   const ariaLabel = (_props$ariaLabel = props["aria-label"]) !== null && _props$ariaLabel !== void 0 && _props$ariaLabel.length ? props["aria-label"] : defaultAriaLabel;
   return _react.default.createElement("nav", {
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    className: (0, _helpers.classNameArrayToClassNameString)([_WizardNavigationModule.default.wizardTopnavContainer, _WizardNavigationModule.default[props.direction]])
   }, _react.default.createElement("ol", {
     className: _WizardNavigationModule.default.wizardTopnav
   }, renderSteps(props.steps, props.activeStepId)));
@@ -44,6 +47,10 @@ WizardNavigation.propTypes = {
     })
   }).isRequired,
   activeStepId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  "aria-label": _propTypes.default.string
+  "aria-label": _propTypes.default.string,
+  direction: _propTypes.default.oneOf(["vertical", "horizontal"])
+};
+WizardNavigation.defaultProps = {
+  direction: "vertical"
 };
 var _default = exports.default = WizardNavigation;

package/dist/components/WizardNavigation.module.scss

@@ -1,12 +1,24 @@
 @import "../style/global.scss";
 
-.wizardTopnav {
-    display: flex;
-    margin: 20px;
-    flex-direction: column;
-    list-style: none;
-    padding: 0;
-    @media only screen and (min-width: $screen-sm) {
-        flex-direction: row;
+.wizardTopnavContainer {
+    .wizardTopnav {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    &.vertical {
+        background-color: #fff;
+        padding: 12px;
+        overflow: hidden;
+    }
+    &.horizontal {
+        .wizardTopnav {
+            display: flex;
+            margin: 20px;
+            flex-direction: column;
+            @media only screen and (min-width: $screen-sm) {
+                flex-direction: row;
+            }
+        }
     }
 }

package/dist/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "ContentBox", {
     return _ContentBox.default;
   }
 });
+Object.defineProperty(exports, "DescriptionList", {
+  enumerable: true,
+  get: function () {
+    return _DescriptionList.default;
+  }
+});
 Object.defineProperty(exports, "Dialog", {
   enumerable: true,
   get: function () {
@@ -201,6 +207,12 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeProvider.default;
   }
 });
+Object.defineProperty(exports, "ToggleNavigationButton", {
+  enumerable: true,
+  get: function () {
+    return _ToggleNavigationButton.default;
+  }
+});
 Object.defineProperty(exports, "WizardNavigation", {
   enumerable: true,
   get: function () {
@@ -221,6 +233,7 @@ var _CheckBoxList = _interopRequireDefault(require("./components/CheckBoxList"))
 var _CheckBoxListItem = _interopRequireDefault(require("./components/CheckBoxListItem"));
 var _Container = _interopRequireDefault(require("./components/Container"));
 var _ContentBox = _interopRequireDefault(require("./components/ContentBox"));
+var _DescriptionList = _interopRequireDefault(require("./components/DescriptionList"));
 var _Dialog = _interopRequireDefault(require("./components/Dialog"));
 var _DragAndDropFileInput = _interopRequireDefault(require("./components/DragAndDropFileInput"));
 var _ErrorBox = _interopRequireDefault(require("./components/ErrorBox"));
@@ -246,6 +259,7 @@ var _Select = _interopRequireDefault(require("./components/Select"));
 var _Table = _interopRequireDefault(require("./components/Table"));
 var _Textarea = _interopRequireDefault(require("./components/Textarea"));
 var _ThemeProvider = _interopRequireDefault(require("./components/ThemeProvider"));
+var _ToggleNavigationButton = _interopRequireDefault(require("./components/ToggleNavigationButton"));
 var _WizardNavigation = _interopRequireDefault(require("./components/WizardNavigation"));
 var _Step = _interopRequireDefault(require("./components/WizardNavigation/Step"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/style/abstracts/variables/_transitions.scss

@@ -1 +1,2 @@
 $default-transition: 200ms cubic-bezier(0.22, 1, 0.36, 1) 0s;
+$long-transition: 400ms cubic-bezier(0.22, 1, 0.36, 1) 0s;

package/dist/style/abstracts/variables/_viewports.scss

@@ -2,7 +2,7 @@ $screen-xs: 320px !default;
 $screen-xs-min: $screen-xs !default;
 $screen-sm: 640px !default;
 $screen-sm-min: $screen-sm !default;
-$screen-md: 960px !default;
+$screen-md: 900px !default;
 $screen-md-min: $screen-md !default;
 $screen-lg: 1280px !default;
 $screen-lg-min: $screen-lg !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "6.2.3",
+  "version": "6.4.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [