dibk-design 7.7.1 → 8.0.0

package/dist/components/DragAndDropFileInput.js

@@ -1,142 +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 _Button = _interopRequireDefault(require("./Button"));
-var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
-var _Label = _interopRequireDefault(require("./Label"));
-var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
-var _DragAndDropFileInputModule = _interopRequireDefault(require("./DragAndDropFileInput.module.scss"));
-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; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const DragAndDropFileInput = props => {
-  var _props$errorMessage, _props$ariaDescribed;
-  const [highlight, setHighlight] = (0, _react.useState)(false);
-  const containerElementRef = (0, _react.useRef)();
-  const fileInputElementRef = (0, _react.useRef)();
-  const preventDefaults = e => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const renderValueAsText = (value, defaultContent) => {
-    return value ? value : defaultContent;
-  };
-  const handleAddButtonOnClick = () => {
-    fileInputElementRef.current.click();
-  };
-  const getErrorElementId = () => {
-    return "".concat(props.id, "-errorMessage");
-  };
-  const inputElementProps = {
-    id: props.id,
-    "aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
-    "aria-invalid": props.hasErrors ? "true" : null,
-    name: props.name,
-    required: props.required
-  };
-  let buttonContent;
-  if (props.selectedFileName) {
-    buttonContent = props.buttonContentWhenSelectedFile ? props.buttonContentWhenSelectedFile : props.buttonContent;
-  } else {
-    buttonContent = props.buttonContent;
-  }
-  (0, _react.useEffect)(() => {
-    const handleFiles = files => {
-      props.onDragAndDropChange(files);
-    };
-    const handleDrop = e => {
-      const files = e.dataTransfer.files;
-      handleFiles(files);
-    };
-    if (containerElementRef !== null && containerElementRef !== void 0 && containerElementRef.current) {
-      containerElementRef.current.addEventListener("dragenter", preventDefaults, false);
-      containerElementRef.current.addEventListener("dragover", preventDefaults, false);
-      containerElementRef.current.addEventListener("dragleave", preventDefaults, false);
-      containerElementRef.current.addEventListener("drop", preventDefaults, false);
-      containerElementRef.current.addEventListener("dragenter", () => {
-        setHighlight(true);
-      }, false);
-      containerElementRef.current.addEventListener("dragover", () => {
-        setHighlight(true);
-      }, false);
-      containerElementRef.current.addEventListener("dragleave", () => {
-        setHighlight(false);
-      }, false);
-      containerElementRef.current.addEventListener("drop", () => {
-        setHighlight(false);
-      }, false);
-      containerElementRef.current.addEventListener("drop", handleDrop, false);
-      return () => {
-        containerElementRef.current.removeEventListener("dragenter", preventDefaults, false);
-        containerElementRef.current.removeEventListener("dragover", preventDefaults, false);
-        containerElementRef.current.removeEventListener("dragleave", preventDefaults, false);
-        containerElementRef.current.removeEventListener("drop", preventDefaults, false);
-        containerElementRef.current.removeEventListener("dragenter", () => setHighlight(true), false);
-        containerElementRef.current.removeEventListener("dragover", () => setHighlight(true), false);
-        containerElementRef.current.removeEventListener("dragleave", () => setHighlight(false), false);
-        containerElementRef.current.removeEventListener("drop", () => setHighlight(false), false);
-        containerElementRef.current.removeEventListener("drop", handleDrop, false);
-      };
-    }
-  }, [props]);
-  return _react.default.createElement("div", {
-    className: _DragAndDropFileInputModule.default.dragAndDropFileInput
-  }, _react.default.createElement(_Label.default, {
-    htmlFor: props.id
-  }, props.label, props.required && _react.default.createElement("img", {
-    src: _asterisk.default,
-    alt: "",
-    className: _DragAndDropFileInputModule.default.requiredSymbol
-  })), _react.default.createElement("div", null, props.children), !props.contentOnly ? _react.default.createElement("div", {
-    ref: containerElementRef,
-    className: "".concat(_DragAndDropFileInputModule.default.dragAndDropContainer, " ").concat(highlight ? _DragAndDropFileInputModule.default.highlighted : "")
-  }, props.selectedFileName ? _react.default.createElement("div", null, _react.default.createElement("span", null, _react.default.createElement("b", null, "Valgt fil:"), " ", props.selectedFileName)) : _react.default.createElement("div", null, "Slipp fil her"), _react.default.createElement("input", _extends({}, inputElementProps, {
-    ref: fileInputElementRef,
-    type: "file",
-    onChange: props.onSelectChange
-  })), props.buttonContent ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", null, props.selectedFileName ? "" : "eller klikk på knappen for å velge fil"), _react.default.createElement(_Button.default, {
-    size: "small",
-    type: "button",
-    color: props.buttonColor,
-    onClick: () => handleAddButtonOnClick(),
-    content: buttonContent,
-    hasErrors: props.hasErrors,
-    "data-transaction-name": props["data-transaction-name"]
-  })) : null) : null, props.contentOnly ? _react.default.createElement("span", null, renderValueAsText(props.selectedFileName, props.defaultContent)) : "", _react.default.createElement(_ErrorMessage.default, {
-    id: getErrorElementId(),
-    content: props.errorMessage
-  }));
-};
-DragAndDropFileInput.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string,
-  onSelectChange: _propTypes.default.func.isRequired,
-  onDragAndDropChange: _propTypes.default.func.isRequired,
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  contentOnly: _propTypes.default.bool,
-  buttonColor: _propTypes.default.string,
-  buttonContent: _propTypes.default.string,
-  buttonContentWhenSelectedFile: _propTypes.default.string,
-  selectedFileName: _propTypes.default.string,
-  defaultContent: _propTypes.default.string,
-  hasErrors: _propTypes.default.bool,
-  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  required: _propTypes.default.bool,
-  "data-transaction-name": _propTypes.default.string
-};
-DragAndDropFileInput.defaultProps = {
-  label: "",
-  contentOnly: false,
-  buttonColor: "primary",
-  defaultContent: "",
-  hasErrors: false,
-  errorMessage: "",
-  required: false
-};
-var _default = exports.default = DragAndDropFileInput;

package/dist/components/DragAndDropFileInput.module.scss

@@ -1,38 +0,0 @@
-// Mixins
-@use "../style/abstracts/mixins/transition";
-
-// Variables
-@use "../style/abstracts/variables/colors";
-
-.dragAndDropFileInput {
-    .requiredSymbol {
-        width: 1em;
-        height: 1em;
-        font-size: 0.4em;
-        vertical-align: top;
-        margin-top: 2px;
-    }
-
-    .dragAndDropContainer {
-        @include transition.transition(all 0.1s ease-in-out);
-        border: 2px dashed var(--color-secondary-light, colors.$color-secondary-light);
-        border-radius: 20px;
-        width: 100%;
-        padding: 20px;
-        text-align: center;
-        background-color: #fff;
-
-        input {
-            display: none;
-        }
-
-        button {
-            margin: 14px 0 0;
-        }
-
-        &.highlighted {
-            background: var(--color-secondary-x-light, colors.$color-secondary-x-light);
-            border-color: var(--color-primary, colors.$color-primary);
-        }
-    }
-}

package/dist/components/ErrorBox.js

@@ -1,33 +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 _ErrorBoxModule = _interopRequireDefault(require("./ErrorBox.module.scss"));
-var _infoSign = _interopRequireDefault(require("../assets/svg/info-sign.svg?url"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ErrorBox = props => {
-  return _react.default.createElement("div", {
-    className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBoxContainer, _ErrorBoxModule.default[props.type], props.fullScreen && _ErrorBoxModule.default.fullScreen])
-  }, _react.default.createElement("div", {
-    className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBox, props.fullScreen && _ErrorBoxModule.default.fullScreen])
-  }, _react.default.createElement("img", {
-    src: _infoSign.default,
-    alt: "",
-    className: _ErrorBoxModule.default.infoSign
-  }), props.children));
-};
-ErrorBox.propTypes = {
-  type: _propTypes.default.oneOf(["warning", "error"]),
-  fullScreen: _propTypes.default.bool
-};
-ErrorBox.defaultProps = {
-  children: "",
-  type: "warning",
-  fullScreen: false
-};
-var _default = exports.default = ErrorBox;

package/dist/components/ErrorBox.module.scss

@@ -1,68 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/sizes";
-@use "../style/abstracts/variables/typography";
-@use "../style/abstracts/variables/viewports";
-
-@keyframes messageIn {
-    0% {
-        opacity: 0;
-        transform: translateY(2em);
-    }
-}
-
-.errorBoxContainer {
-    font-family: typography.$default-font;
-    margin: 0;
-    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
-    position: relative;
-    line-height: 24px;
-    &.warning {
-        background-color: var(--color-warning-x-light, colors.$color-warning-x-light);
-        border-color: var(--color-warning, colors.$color-warning);
-    }
-    &.error {
-        background-color: var(--color-error-x-light, colors.$color-error-x-light);
-        border-color: var(--color-error, colors.$color-error);
-    }
-    &.fullScreen {
-        border-bottom-width: 4px;
-        border-bottom-style: solid;
-    }
-    &:not(.fullScreen) {
-        border-left-width: 4px;
-        border-left-style: solid;
-    }
-    .errorBox {
-        padding: 24px 24px 24px calc(1.2em + 48px);
-        &.fullScreen {
-            max-width: sizes.$content-width;
-            margin: auto;
-            position: relative;
-        }
-        .infoSign {
-            position: absolute;
-            top: 24px;
-            left: 24px;
-            width: 24px;
-            height: 24px;
-            display: inline-block;
-            vertical-align: middle;
-        }
-        h1,
-        h2,
-        h3,
-        h4 {
-            font-size: 20px;
-            font-weight: 500;
-            line-height: 1.3;
-            margin: 0;
-            @media only screen and (min-width: viewports.$screen-sm) {
-                font-size: 24px;
-            }
-        }
-        ul {
-            padding-left: 20px;
-        }
-    }
-}

package/dist/components/ErrorMessage.js

@@ -1,37 +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 _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.module.scss"));
-var _errorSign = _interopRequireDefault(require("../assets/svg/error-sign.svg?url"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const ErrorMessage = props => {
-  var _props$content;
-  const getErrorElementProps = () => {
-    var _props$id;
-    return {
-      id: !!((_props$id = props.id) !== null && _props$id !== void 0 && _props$id.length) ? props.id : null,
-      className: _ErrorMessageModule.default.errorMessage
-    };
-  };
-  return props !== null && props !== void 0 && (_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length ? _react.default.createElement("span", _extends({
-    "aria-live": "polite"
-  }, getErrorElementProps()), _react.default.createElement("img", {
-    src: _errorSign.default,
-    alt: "",
-    className: _ErrorMessageModule.default.errorSign
-  }), props.content) : null;
-};
-ErrorMessage.propTypes = {
-  id: _propTypes.default.string,
-  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))])
-};
-ErrorMessage.defaultProps = {
-  content: ""
-};
-var _default = exports.default = ErrorMessage;

package/dist/components/ErrorMessage.module.scss

@@ -1,30 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/typography";
-
-@keyframes messageIn {
-    0% {
-        opacity: 0;
-        transform: translateX(2em);
-    }
-}
-
-.errorMessage {
-    display: flex;
-    align-items: center;
-    font-family: typography.$default-font;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
-    letter-spacing: 0.01em;
-    color: colors.$color-error;
-    margin: 4px 0 0;
-    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
-    .errorSign {
-        width: 20px;
-        height: 20px;
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 0.5em;
-    }
-}

package/dist/components/Footer.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Container = _interopRequireDefault(require("./Container"));
-var _FooterModule = _interopRequireDefault(require("./Footer.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Footer = props => {
-  return _react.default.createElement("footer", {
-    className: _FooterModule.default.footer
-  }, _react.default.createElement(_Container.default, null, props.children));
-};
-var _default = exports.default = Footer;

package/dist/components/Footer.module.scss

@@ -1,21 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-
-.footer {
-  background-color: var(--color-primary, colors.$color-primary);
-  padding: 16px 0;
-  text-align: right;
-  * {
-    color: #fff;
-  }
-  a,
-  .link {
-    color: #fff;
-    text-decoration: underline;
-    cursor: pointer;
-    display: block;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}

package/dist/components/Header.js

@@ -1,42 +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 _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
-var _helpers = require("../functions/helpers");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Header = props => {
-  var _props$htmlTag, _props$label, _props$content;
-  const bigClass = props.big ? _HeaderModule.default.bigHeader : "";
-  const htmlTag = (_props$htmlTag = props.htmlTag) !== null && _props$htmlTag !== void 0 && _props$htmlTag.length ? props.htmlTag : "h".concat(props.size);
-  const headerClass = _HeaderModule.default.header;
-  const headerSizeClass = _HeaderModule.default["size-".concat(props.size)];
-  let headerElement = _react.default.createElement(htmlTag, {
-    className: (0, _helpers.classNameArrayToClassNameString)([headerClass, headerSizeClass, bigClass]),
-    id: props.id || null,
-    htmlFor: props.htmlFor || null,
-    style: props !== null && props !== void 0 && (_props$label = props.label) !== null && _props$label !== void 0 && _props$label.length ? {
-      "--label": "\"".concat(props.label, "\"")
-    } : null
-  }, !!((_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length) ? props.content : props.children);
-  return _react.default.createElement("div", {
-    className: _HeaderModule.default.headerContainer
-  }, " ", headerElement, " ");
-};
-Header.propTypes = {
-  id: _propTypes.default.string,
-  content: _propTypes.default.string,
-  size: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
-  big: _propTypes.default.bool,
-  label: _propTypes.default.string,
-  htmlTag: _propTypes.default.string,
-  htmlFor: _propTypes.default.string
-};
-Header.defaultProps = {
-  size: 1
-};
-var _default = exports.default = Header;

package/dist/components/Header.module.scss

@@ -1,79 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/typography";
-@use "../style/abstracts/variables/viewports";
-
-.headerContainer {
-	.header {
-		margin: 0;
-		font-weight: normal;
-		line-height: 1.4;
-		font-style: normal;
-		color: var(--color-heading-text, colors.$color-heading-text);
-		&.size-1 {
-			font-family: typography.$default-font;
-			font-style: normal;
-			font-size: 28px;
-			font-weight: 600;
-			line-height: 36px;
-			letter-spacing: 0px;
-			&.bigHeader {
-				font-family: typography.$default-font;
-				font-size: 40px;
-				line-height: 1.2;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				@media only screen and (min-width: viewports.$screen-sm) {
-					font-size: 50px;
-				}
-			}
-		}
-		&.size-2 {
-			font-family: typography.$default-font;
-			font-style: normal;
-			font-size: 22px;
-			font-weight: 600;
-			line-height: 30px;
-			letter-spacing: 0px;
-		}
-		&.size-3 {
-			font-family: typography.$default-font;
-			font-style: normal;
-			font-size: 18px;
-			font-weight: 600;
-			line-height: 24px;
-			letter-spacing: 0px;
-		}
-		&.size-4 {
-			font-family: typography.$default-font;
-			font-style: italic;
-			font-size: 17px;
-			font-weight: normal;
-			line-height: 1;
-			letter-spacing: 0px;
-		}
-		&.size-5 {
-			font-family: typography.$default-font;
-			font-style: normal;
-			font-size: 15px;
-			font-weight: 600;
-			line-height: 1;
-			letter-spacing: 0px;
-		}
-		&[style*="--label"] {
-			&::before {
-				content: var(--label);
-				display: block;
-				font-family: typography.$default-font;
-				font-size: 12px;
-				font-weight: 600;
-				line-height: 18px;
-				letter-spacing: 0px;
-				text-transform: uppercase;
-				color: var(--color-heading-text, colors.$color-heading-text);
-				opacity: 0.75;
-				margin-bottom: 0.3em;
-			}
-		}
-	}
-}

package/dist/components/InfoBox.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _InfoBoxModule = _interopRequireDefault(require("./InfoBox.module.scss"));
-var _infoSign = _interopRequireDefault(require("../assets/svg/info-sign.svg?url"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const InfoBox = props => {
-  return _react.default.createElement("div", {
-    className: _InfoBoxModule.default.infoBox
-  }, _react.default.createElement("img", {
-    src: _infoSign.default,
-    alt: "",
-    className: _InfoBoxModule.default.infoSign
-  }), props.children);
-};
-InfoBox.defaultProps = {
-  children: ""
-};
-var _default = exports.default = InfoBox;

package/dist/components/InfoBox.module.scss

@@ -1,44 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/typography";
-@use "../style/abstracts/variables/viewports";
-
-@keyframes messageIn {
-    0% {
-        opacity: 0;
-        transform: translateY(2em);
-    }
-}
-
-.infoBox {
-    background-color: #fff;
-    border: 1px solid var(--color-secondary-light, colors.$color-secondary-light);
-    padding: 24px 24px 24px calc(1.2em + 48px);
-    font-family: typography.$default-font;
-    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
-    position: relative;
-    .infoSign {
-        position: absolute;
-        top: 24px;
-        left: 24px;
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-        vertical-align: middle;
-    }
-    h1,
-    h2,
-    h3,
-    h4 {
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 1.3;
-        margin: 0;
-        @media only screen and (min-width: viewports.$screen-sm) {
-            font-size: 24px;
-        }
-    }
-    ul {
-        padding-left: 20px;
-    }
-}