dibk-design 7.7.0 → 8.0.0

package/dist/components/CheckBoxListItem.module.scss

@@ -1,84 +0,0 @@
-// Mixins
-@use "../style/abstracts/mixins/border-radius";
-@use "../style/abstracts/mixins/box-sizing";
-@use "../style/abstracts/mixins/transition";
-
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/transitions";
-@use "../style/abstracts/variables/typography";
-
-.checkBoxListItem {
-    @include box-sizing.box-sizing(content-box);
-    @include border-radius.border-radius(0);
-    @include transition.transition(all transitions.$default-transition);
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-align-items: flex-start;
-    -webkit-box-align: flex-start;
-    -ms-flex-align: flex-start;
-    align-items: flex-start;
-    cursor: pointer;
-    font-family: typography.$default-font;
-    position: relative;
-    font-size: 16px;
-    line-height: 24px;
-    color: #000;
-
-    &:not(.contentOnly):not(.compact) {
-        border: 1px solid var(--color-secondary-light, colors.$color-secondary-light);
-        background: white;
-        margin-bottom: 8px;
-        label {
-            padding: 20px;
-        }
-    }
-
-    &.contentOnly {
-        cursor: auto;
-        label {
-            cursor: auto;
-            padding: 5px 10px;
-        }
-    }
-
-    &.disabled {
-        label {
-            cursor: auto;
-        }
-    }
-
-    &.checked:not(.contentOnly):not(.compact):not(.disabled) {
-        background-color: var(--color-secondary-light, colors.$color-secondary-light);
-    }
-
-    &:not(.checked):not(.contentOnly):not(.compact):not(.disabled) {
-        &:hover {
-            background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
-        }
-        &:focus-within {
-            background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
-        }
-    }
-
-    label {
-        width: 100%;
-        padding: 10px;
-        margin: 0;
-        cursor: pointer;
-    }
-
-    &.compact {
-        display: table;
-        label {
-            padding: 6px 4px;
-        }
-    }
-
-    input[type="checkbox"] {
-        opacity: 0;
-        position: absolute;
-    }
-}

package/dist/components/Container.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ContainerModule = _interopRequireDefault(require("./Container.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Container = props => {
-  var _props$maxWidth;
-  const styleProps = {
-    "--max-width": (props === null || props === void 0 || (_props$maxWidth = props.maxWidth) === null || _props$maxWidth === void 0 ? void 0 : _props$maxWidth.length) && props.maxWidth
-  };
-  return _react.default.createElement("div", {
-    className: _ContainerModule.default.container,
-    style: styleProps
-  }, props.children);
-};
-Container.propTypes = {
-  maxWidth: _propTypes.default.string
-};
-var _default = exports.default = Container;

package/dist/components/Container.module.scss

@@ -1,15 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/sizes";
-@use "../style/abstracts/variables/viewports";
-
-.container {
-    margin: auto;
-    padding: 8px;
-    @media (min-width: viewports.$screen-sm) {
-        padding: 20px;
-        max-width: sizes.$content-width;
-        &[style*="--max-width"] {
-            max-width: var(--max-width);
-        }
-    }
-}

package/dist/components/ContentBox.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ContentBoxModule = _interopRequireDefault(require("./ContentBox.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ContentBox = props => {
-  var _props$content;
-  const renderTitle = () => {
-    let className = _ContentBoxModule.default.title + " " + _ContentBoxModule.default[props.titleSize];
-    if (props.title) {
-      return _react.default.createElement("h2", {
-        className: className
-      }, props.title);
-    } else {
-      return;
-    }
-  };
-  let colorClass = " " + _ContentBoxModule.default[props.color];
-  let linkClass = props.href ? " " + _ContentBoxModule.default.link : "";
-  let className = _ContentBoxModule.default.contentBox + colorClass + linkClass;
-  const bodyContent = (_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length ? props.content : props.children;
-  if (props.href) {
-    return _react.default.createElement("a", {
-      href: props.href,
-      className: className
-    }, renderTitle(), _react.default.createElement("div", {
-      className: _ContentBoxModule.default.content
-    }, bodyContent));
-  } else {
-    return _react.default.createElement("div", {
-      className: className
-    }, renderTitle(), _react.default.createElement("div", {
-      className: _ContentBoxModule.default.content
-    }, bodyContent));
-  }
-};
-ContentBox.propTypes = {
-  title: _propTypes.default.string,
-  titleSize: _propTypes.default.oneOf(["regular", "large"]),
-  content: _propTypes.default.string,
-  children: _propTypes.default.any,
-  color: _propTypes.default.oneOf(["default", "secondary"])
-};
-ContentBox.defaultProps = {
-  title: null,
-  titleSize: "regular",
-  href: null,
-  content: "",
-  color: "default"
-};
-var _default = exports.default = ContentBox;

package/dist/components/ContentBox.module.scss

@@ -1,60 +0,0 @@
-// Mixins
-@use "../style/abstracts/mixins/transition";
-
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/typography";
-
-.contentBox {
-    font-family: typography.$default-font;
-    text-decoration: none;
-    padding: 20px;
-    width: 100%;
-    display: block;
-    &.link {
-        color: var(--color-primary, colors.$color-primary);
-        @include transition.transition(filter 0.3s);
-        &:hover,
-        &:focus {
-            filter: brightness(90%);
-        }
-        &:active {
-            filter: brightness(85%);
-        }
-    }
-    &.default {
-        background-color: var(--color-default-background, colors.$color-default-background);
-        .content,
-        .title {
-            color: colors.$color-default-text;
-        }
-    }
-    &.secondary {
-        background-color: var(--color-secondary-background, colors.$color-secondary-background);
-        color: var(--color-default-text, colors.$color-default-text);
-        .content,
-        .title {
-            color: var(--color-default-text, colors.$color-default-text);
-        }
-    }
-
-    .title {
-        &.regular {
-            font-family: typography.$default-font;
-            font-weight: bold;
-            font-size: 21px;
-            font-style: normal;
-            line-height: 1.4;
-            padding-bottom: 10px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-        }
-        &.large {
-            font-family: typography.$default-font;
-            font-weight: normal;
-            font-size: 24px;
-            margin: 0;
-            margin-bottom: 20px;
-            font-style: normal;
-        }
-    }
-}

package/dist/components/DescriptionDetails.js

@@ -1,32 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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

@@ -1,22 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-
-.descriptionDetails {
-    font-size: 16px;
-    list-style: var(--listStyle);
-    color: var(--color-primary, colors.$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

@@ -1,47 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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

@@ -1,15 +0,0 @@
-.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

@@ -1,32 +0,0 @@
-"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(e) { return e && e.__esModule ? e : { default: e }; }
-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

@@ -1,30 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-
-.descriptionTerm {
-    font-size: 16px;
-    list-style: var(--listStyle);
-    color: var(--color-primary, colors.$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/Dialog.js

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _xSymbol = _interopRequireDefault(require("../assets/svg/x-symbol.svg?url"));
-var _DialogModule = _interopRequireDefault(require("./Dialog.module.scss"));
-var _helpers = require("../functions/helpers");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
-const Dialog = props => {
-  var _props$attachTo, _props$maxWidth;
-  const dialogRef = (0, _react.useRef)();
-  const dialogContainerRef = (0, _react.useRef)();
-  const dialogContentRef = (0, _react.useCallback)(element => {
-    if (!!element) {
-      (0, _helpers.addFocusTrapInsideElement)(element);
-    }
-    return element;
-  }, []);
-  (0, _react.useEffect)(() => {
-    const keyDownFunction = event => {
-      switch (event.keyCode) {
-        case 27:
-          if (props.onClickOutside) props.onClickOutside();
-          break;
-        default:
-          return null;
-      }
-    };
-    const handleClickOutside = event => {
-      if (dialogContainerRef !== null && dialogContainerRef !== void 0 && dialogContainerRef.current && !dialogContainerRef.current.contains(event.target)) {
-        props.onClickOutside();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", keyDownFunction, false);
-  }, [props, dialogContainerRef]);
-  (0, _react.useEffect)(() => {
-    dialogRef.current.close();
-    if (!props.hidden) {
-      props.modal ? dialogRef.current.showModal() : dialogRef.current.show();
-    }
-  }, [dialogRef, props.hidden, props.modal]);
-  const sideBarClassNames = ((_props$attachTo = props.attachTo) === null || _props$attachTo === void 0 ? void 0 : _props$attachTo.length) && (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.isSidebar, _DialogModule.default[props.attachTo]]);
-  const dialogContentStyleProps = {
-    "--max-width": (props === null || props === void 0 || (_props$maxWidth = props.maxWidth) === null || _props$maxWidth === void 0 ? void 0 : _props$maxWidth.length) && props.maxWidth
-  };
-  return _react.default.createElement("dialog", {
-    className: (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.dialog, sideBarClassNames]),
-    ref: dialogRef
-  }, _react.default.createElement("div", {
-    ref: dialogContainerRef,
-    className: _DialogModule.default.dialogContainer,
-    style: dialogContentStyleProps
-  }, _react.default.createElement("div", {
-    ref: dialogContentRef,
-    className: (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.dialogContent, props.noPadding && _DialogModule.default.noPadding])
-  }, props.closeButton ? _react.default.createElement("button", {
-    "aria-label": "Lukk dialog",
-    onClick: props.onClickOutside,
-    className: (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.closeButton, props.noPadding && _DialogModule.default.noPadding])
-  }, _react.default.createElement("img", {
-    src: _xSymbol.default,
-    alt: ""
-  })) : null, _react.default.createElement("div", {
-    "aria-live": "assertive",
-    role: "dialog"
-  }, props.children))));
-};
-Dialog.propTypes = {
-  maxWidth: _propTypes.default.string,
-  noPadding: _propTypes.default.bool,
-  closeButton: _propTypes.default.bool,
-  onClickOutside: _propTypes.default.func.isRequired,
-  modal: _propTypes.default.bool
-};
-Dialog.defaultProps = {
-  maxWidth: "none",
-  modal: false
-};
-var _default = exports.default = Dialog;

package/dist/components/Dialog.module.scss

@@ -1,178 +0,0 @@
-// Mixins
-@use "../style/abstracts/mixins/calc";
-
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/viewports";
-
-@keyframes modalInVertical {
-    0% {
-        opacity: 0;
-        transform: translateY(2em);
-    }
-}
-
-@keyframes modalInHorizontalRight {
-    0% {
-        opacity: 0;
-        transform: translateX(2em);
-    }
-}
-
-@keyframes modalInHorizontalLeft {
-    0% {
-        opacity: 0;
-        transform: translateX(-2em);
-    }
-}
-
-.dialog {
-    &::backdrop {
-        background: color-mix(in srgb, var(--color-primary, colors.$color-primary), transparent 60%);
-    }
-    &[open] {
-        border: none;
-        background: none;
-        display: flex;
-        max-height: none;
-        max-width: none;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        position: fixed;
-        .dialogContainer {
-            display: flex;
-            flex-wrap: wrap;
-            overflow: auto;
-            .dialogContent {
-                background-color: #fff;
-                width: 100%;
-            }
-            .dialogContent {
-                position: relative;
-            }
-            .closeButton {
-                background: none;
-                border: none;
-                color: var(--color-primary, colors.$color-primary);
-                display: inline-block;
-                position: absolute;
-                cursor: pointer;
-                &:hover {
-                    text-decoration: none;
-                }
-                img {
-                    width: 17px;
-                    height: 17px;
-                }
-            }
-        }
-        &:not(.isSidebar) {
-            align-items: center;
-            justify-content: center;
-            padding: 8px 28px;
-            @media (min-width: viewports.$screen-md) {
-                padding: 36px;
-            }
-            .dialogContainer {
-                animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalInVertical;
-                max-height: 90vh;
-                .dialogContent {
-                    &:not(.noPadding) {
-                        padding: 30px 15px;
-                        @media only screen and (min-width: viewports.$screen-sm) {
-                            padding: 60px 40px;
-                        }
-                    }
-                }
-            }
-            .closeButton {
-                &:not(.noPadding) {
-                    right: 5px;
-                    top: 8px;
-                    @media only screen and (min-width: viewports.$screen-sm) {
-                        right: 10px;
-                        top: 13px;
-                    }
-                }
-                &.noPadding {
-                    right: 0;
-                    top: 0;
-                }
-            }
-        }
-        &.isSidebar {
-            padding: 0;
-            height: 100vh;
-            .dialogContainer {
-                height: 100%;
-                width: var(--max-width, auto);
-                max-width: 100vw;
-                .dialogContent {
-                    &:not(.noPadding) {
-                        padding: 24px;
-                    }
-                }
-            }
-            .closeButton {
-                z-index: 2;
-                right: 10px;
-                top: 13px;
-            }
-            &.left {
-                margin: 0 auto 0 0;
-                .dialogContainer {
-                    justify-content: left;
-                    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalInHorizontalLeft;
-                }
-            }
-            &.right {
-                margin: 0 0 0 auto;
-                .dialogContainer {
-                    justify-content: right;
-                    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalInHorizontalRight;
-                }
-            }
-        }
-    }
-}
-
-.dialogOverlay {
-    width: 0;
-    height: 0;
-    border: none;
-    position: absolute;
-    padding: 0;
-    overflow: hidden;
-
-    &[open] {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        z-index: 2;
-    }
-
-    &:not(.isSidebar) {
-        align-content: center;
-        justify-content: center;
-
-        .dialogContent {
-            @include calc.calc("max-height", "100% - 128px");
-            width: 100%;
-            max-width: var(--max-width, 540px);
-        }
-    }
-
-    .dialogContent {
-        background-color: #fff;
-        overflow: auto;
-        position: relative;
-
-        @media (min-width: viewports.$screen-md) {
-            @include calc.calc("width", "100% - 128px");
-            max-height: 100%;
-        }
-    }
-}