dibk-design 7.7.1 → 8.0.1

package/dist/components/CheckBoxIcon.module.scss

@@ -1,69 +0,0 @@
-// Mixins
-@use "../style/abstracts/mixins/border-radius";
-@use "../style/abstracts/mixins/box-shadow";
-@use "../style/abstracts/mixins/box-sizing";
-@use "../style/abstracts/mixins/transition";
-
-// Variables
-@use "../style/abstracts/variables/colors";
-
-.checkBoxIcon {
-    @include border-radius.border-radius(0);
-    @include transition.transition(all 0.1s ease-in-out);
-    @include box-sizing.box-sizing(content-box);
-    display: inline-block;
-    vertical-align: middle;
-    min-width: 10px;
-    width: 10px;
-    height: 10px;
-    min-width: 20px;
-    margin-right: 0.2em;
-    line-height: 1;
-    text-align: center;
-    cursor: pointer;
-
-    &.showBox {
-        margin-right: 0.4em;
-        margin-top: 2px;
-        background: white;
-        &:not(.hasErrors) {
-            @include box-shadow.box-shadow(0 0 0 1px var(--color-form-element, colors.$color-form-element));
-        }
-        &.hasErrors {
-            @include box-shadow.box-shadow(0 0 0 1px var(--color-error, colors.$color-error));
-        }
-    }
-
-    &.checked {
-        color: var(--color-primary, colors.$color-primary);
-        &.hasErrors {
-            span {
-                color: var(--color-error, colors.$color-error);
-            }
-        }
-        &.showBox {
-            &:not(.hasErrors) {
-                @include box-shadow.box-shadow(0 0 0 1px var(--color-form-element, colors.$color-form-element));
-            }
-            &.hasErrors {
-                @include box-shadow.box-shadow(0 0 0 1px var(--color-error, colors.$color-error));
-            }
-        }
-    }
-
-    &.disabled {
-        opacity: 0.4;
-        background: rgba(0, 0, 0, 0.25);
-        cursor: default;
-    }
-
-    .checkmark {
-        font-size: 1em;
-        line-height: 0.75em;
-    }
-    :not(.showBox) {
-        &.checkmark {
-            line-height: 1.05em;
-        }
-    }
-}

package/dist/components/CheckBoxInput.js

@@ -1,70 +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 _CheckBoxIcon = _interopRequireDefault(require("./CheckBoxIcon"));
-var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
-var _CheckBoxInputModule = _interopRequireDefault(require("./CheckBoxInput.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CheckBoxInput = props => {
-  const labelProps = {
-    className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(props.contentOnly ? _CheckBoxInputModule.default.contentOnly : "", " ").concat(props.disabled ? _CheckBoxInputModule.default.disabled : "", " ").concat(props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ""),
-    htmlFor: props.id
-  };
-  const iconProps = {
-    checked: props.checked,
-    disabled: props.disabled,
-    showBox: !props.contentOnly,
-    hasErrors: props.contentOnly && props.hasErrors,
-    checkmarkCharacter: props.checkmarkCharacter
-  };
-  const inputProps = {
-    id: props.id,
-    name: props.name || null,
-    type: "checkbox",
-    checked: props.checked,
-    disabled: props.disabled,
-    required: props.required || props.requiredGroup,
-    onChange: props.onChange,
-    tabIndex: props.tabIndex || null,
-    "aria-controls": props["aria-controls"],
-    "aria-invalid": props.hasErrors ? "true" : null,
-    "aria-describedby": props["aria-describedby"]
-  };
-  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", {
-    className: _CheckBoxInputModule.default.labelText
-  }, props.children, props.required && _react.default.createElement("img", {
-    src: _asterisk.default,
-    alt: "",
-    className: _CheckBoxInputModule.default.requiredSymbol
-  })));
-};
-CheckBoxInput.propTypes = {
-  checked: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  required: _propTypes.default.bool,
-  requiredGroup: _propTypes.default.bool,
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string,
-  onChange: _propTypes.default.func.isRequired,
-  contentOnly: _propTypes.default.bool,
-  hasErrors: _propTypes.default.bool,
-  checkmarkCharacter: _propTypes.default.string,
-  "aria-controls": _propTypes.default.string,
-  "aria-describedby": _propTypes.default.string
-};
-CheckBoxInput.defaultProps = {
-  checked: false,
-  disabled: false,
-  required: false,
-  requiredGroup: false,
-  name: "",
-  contentOnly: false,
-  hasErrors: false,
-  checkmarkCharacter: "✔"
-};
-var _default = exports.default = CheckBoxInput;

package/dist/components/CheckBoxInput.module.scss

@@ -1,53 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-
-.checkBoxInput {
-    display: flex;
-    margin-right: 1em;
-    border: 1px solid transparent;
-
-    .requiredSymbol {
-        width: 1em;
-        height: 1em;
-        font-size: 0.4em;
-        vertical-align: top;
-        margin-top: 2px;
-    }
-
-    &:not(.contentOnly):not(.disabled) {
-        cursor: pointer;
-        input {
-            cursor: pointer;
-        }
-    }
-
-    .labelText {
-        font-size: 16px;
-        line-height: 24px;
-        color: var(--color-form-element, colors.$color-form-element);
-    }
-
-    &.disabled {
-        .labelText {
-            opacity: 0.4;
-        }
-    }
-
-    &.hasErrors {
-        span {
-            color: var(--color-error, colors.$color-error);
-        }
-    }
-
-    &:focus-within {
-        outline-width: 2px;
-        outline-color: var(--color-focus, colors.$color-focus);
-        outline-style: auto;
-        outline-offset: 1px;
-    }
-
-    input[type="checkbox"] {
-        opacity: 0;
-        position: absolute;
-    }
-}

package/dist/components/CheckBoxList.js

@@ -1,55 +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 _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
-var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
-var _Header = _interopRequireDefault(require("./Header"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CheckBoxList = _ref => {
-  let {
-    required,
-    compact,
-    legend,
-    legendSize,
-    children
-  } = _ref;
-  const renderChildElements = childElements => {
-    const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
-    return childElementsthroughFragments.map((childElement, index) => {
-      var _childElement$props;
-      const isCheckBoxListItem = (childElement === null || childElement === void 0 || (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.type) === "CheckBoxListItem";
-      if (isCheckBoxListItem) {
-        const childElementCopy = _react.default.cloneElement(childElement, {
-          requiredGroup: required,
-          compact: compact,
-          key: "checkboxListItem-".concat(index)
-        });
-        return childElementCopy;
-      } else {
-        return childElement;
-      }
-    });
-  };
-  return _react.default.createElement("fieldset", {
-    className: _CheckBoxListModule.default.checkBoxList
-  }, !!(legend !== null && legend !== void 0 && legend.length) ? _react.default.createElement("legend", null, legendSize ? _react.default.createElement(_Header.default, {
-    size: legendSize
-  }, legend) : legend, required && _react.default.createElement("img", {
-    src: _asterisk.default,
-    alt: "",
-    className: _CheckBoxListModule.default.requiredSymbol
-  })) : null, renderChildElements(_react.default.Children.toArray(children)));
-};
-CheckBoxList.propTypes = {
-  legend: _propTypes.default.string,
-  legendSize: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
-  required: _propTypes.default.bool,
-  compact: _propTypes.default.bool
-};
-var _default = exports.default = CheckBoxList;

package/dist/components/CheckBoxList.module.scss

@@ -1,25 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/typography";
-
-fieldset.checkBoxList {
-    margin: 0;
-    padding: 0;
-    border: none;
-    legend {
-        color: #000;
-        display: block;
-        font-size: 1rem;
-        font-weight: bold;
-        line-height: 1.2;
-        margin-bottom: 2px;
-        font-family: typography.$default-font;
-        overflow-wrap: break-word;
-        .requiredSymbol {
-            width: 1em;
-            height: 1em;
-            font-size: 0.4em;
-            vertical-align: top;
-            margin-top: 2px;
-        }
-    }
-}

package/dist/components/CheckBoxListItem.js

@@ -1,61 +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 _CheckBoxInput = _interopRequireDefault(require("./CheckBoxInput"));
-var _helpers = require("../functions/helpers");
-var _CheckBoxListItemModule = _interopRequireDefault(require("./CheckBoxListItem.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CheckBoxListItem = props => {
-  const listItemClassNameArray = [_CheckBoxListItemModule.default.checkBoxListItem, props.checked ? _CheckBoxListItemModule.default.checked : null, props.disabled ? _CheckBoxListItemModule.default.disabled : null, props.compact ? _CheckBoxListItemModule.default.compact : null, props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : null, props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : null];
-  const listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);
-  const inputProps = {
-    onChange: props.onChange,
-    checked: props.checked,
-    disabled: props.disabled,
-    required: props.required,
-    requiredGroup: props.requiredGroup,
-    contentOnly: props.contentOnly,
-    hasErrors: props.hasErrors,
-    "aria-controls": props["aria-controls"],
-    "aria-describedby": props["aria-describedby"],
-    id: props.id,
-    name: props.name,
-    checkmarkCharacter: props.checkmarkCharacter
-  };
-  return _react.default.createElement("div", {
-    className: listItemClassNameString
-  }, _react.default.createElement(_CheckBoxInput.default, inputProps, props.children));
-};
-CheckBoxListItem.propTypes = {
-  checked: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  required: _propTypes.default.bool,
-  requiredGroup: _propTypes.default.bool,
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string,
-  onChange: _propTypes.default.func.isRequired,
-  contentOnly: _propTypes.default.bool,
-  compact: _propTypes.default.bool,
-  hasErrors: _propTypes.default.bool,
-  checkmarkCharacter: _propTypes.default.string,
-  "aria-controls": _propTypes.default.string,
-  "aria-describedby": _propTypes.default.string
-};
-CheckBoxListItem.defaultProps = {
-  checked: false,
-  disabled: false,
-  required: false,
-  requiredGroup: false,
-  id: "",
-  name: "",
-  contentOnly: false,
-  hasErrors: false,
-  checkmarkCharacter: "✔",
-  type: "CheckBoxListItem"
-};
-var _default = exports.default = CheckBoxListItem;

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;