dibk-design 7.7.1 → 8.0.0

package/dist/components/Button.module.scss

@@ -1,290 +0,0 @@
-// Mixins
-@use "../style/abstracts/mixins/animation";
-@use "../style/abstracts/mixins/appearance";
-@use "../style/abstracts/mixins/border-radius";
-@use "../style/abstracts/mixins/box-shadow";
-@use "../style/abstracts/mixins/keyframes";
-@use "../style/abstracts/mixins/transform";
-@use "../style/abstracts/mixins/transition";
-
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/transitions";
-@use "../style/abstracts/variables/typography";
-@use "../style/abstracts/variables/viewports";
-
-@include keyframes.keyframes(pushnext) {
-  0% {
-    @include transform.transform(rotate(45deg) translate3d(0, 0, 0));
-  }
-
-  50% {
-    @include transform.transform(rotate(45deg) translate3d(2px, -2px, 0));
-  }
-
-  100% {
-    @include transform.transform(rotate(45deg) translate3d(0, 0, 0));
-  }
-}
-@include keyframes.keyframes(pushprev) {
-  0% {
-    @include transform.transform(rotate(-135deg) translate3d(0, 0, 0));
-  }
-
-  50% {
-    @include transform.transform(rotate(-135deg) translate3d(-2px, 2px, 0));
-  }
-
-  100% {
-    @include transform.transform(rotate(-135deg) translate3d(0, 0, 0));
-  }
-}
-
-.button {
-  @include appearance.appearance(none);
-  @include border-radius.border-radius(0);
-  @include transition.transition(
-    filter transitions.$default-transition,
-    background-color transitions.$default-transition,
-    color transitions.$default-transition,
-    border-color transitions.$default-transition
-  );
-  font-family: typography.$default-font;
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--color-primary, colors.$color-primary);
-  cursor: pointer;
-  line-height: 1;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-
-  font-size: 17px;
-  font-weight: 500;
-  @media only screen and (min-width: viewports.$screen-sm) {
-    font-size: 20px;
-  }
-  &:not(.noMargin) {
-    margin-right: 5px;
-    margin-bottom: 8px;
-  }
-
-  &:focus {
-    outline-offset: 3px;
-  }
-
-  &:focus-visible,
-  &:focus-within {
-    outline-color: var(--color-primary, colors.$color-primary);
-  }
-
-  &.regular {
-    padding: 16px 24px;
-  }
-
-  &.small {
-    padding: 6px 24px;
-    min-width: 80px;
-    line-height: 18px;
-    @media only screen and (min-width: viewports.$screen-sm) {
-      line-height: 21px;
-      padding: 6px 32px;
-    }
-  }
-
-  &.primary {
-    background-color: var(--color-primary, colors.$color-primary);
-    color: var(--color-primary-contrast, colors.$color-primary-contrast);
-    &:hover:not(.noHover),
-    &:focus-visible {
-      background-color: var(--color-primary-light, colors.$color-primary-light);
-      border-color: var(--color-primary-light, colors.$color-primary-light);
-      color: var(--color-primary-contrast, colors.$color-primary-contrast);
-      &:after,
-      &:before {
-        border-color: var(--color-primary-light, colors.$color-primary-light);
-      }
-    }
-    &:active:not(.noHover),
-    &:active:hover:not(.noHover) {
-      background-color: var(--color-primary-x-light, colors.$color-primary-x-light);
-      border-color: var(--color-primary-x-light, colors.$color-primary-x-light);
-      color: var(--color-primary-contrast, colors.$color-primary-contrast);
-      &:after,
-      &:before {
-        border-color: var(--color-primary-x-light, colors.$color-primary-x-light);
-      }
-    }
-  }
-
-  &.secondary {
-    background-color: var(--color-secondary, colors.$color-secondary);
-    color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-    border-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
-    &:hover:not(.noHover),
-    &:focus-visible {
-      background-color: var(--color-secondary-light, colors.$color-secondary-x-light);
-      color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-      &:after,
-      &:before {
-        border-color: var(--color-secondary-light, colors.$color-secondary-x-light);
-      }
-    }
-    &:active:not(.noHover),
-    &:active:hover:not(.noHover) {
-      background-color: var(--color-secondary-x-light, colors.$color-secondary-light);
-      color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-      &:after,
-      &:before {
-        border-color: var(--color-secondary-x-light, colors.$color-secondary-light);
-      }
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    &.primary,
-    &.secondary {
-      background-color: var(--color-primary, colors.$color-primary);
-      cursor: default;
-      color: var(--color-primary-contrast, colors.$color-primary-contrast);
-      border: 1px solid var(--color-primary, colors.$color-primary);
-      opacity: 0.2;
-      filter: saturate(3);
-      &:hover:not(.noHover),
-      &:focus-visible,
-      &:active:not(.noHover),
-      &:active:hover:not(.noHover) {
-        background-color: var(--color-primary, colors.$color-primary);
-        cursor: default;
-        color: var(--color-primary-contrast, colors.$color-primary-contrast);
-        border: 1px solid var(--color-primary, colors.$color-primary);
-        &:before,
-        &:after {
-          border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
-        }
-      }
-      &:before,
-      &:after {
-        border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
-      }
-    }
-  }
-
-  &.hasErrors {
-    @include box-shadow.box-shadow(0 0 2px 1px var(--color-error, colors.$color-error));
-    border-color: var(--color-error, colors.$color-error);
-  }
-
-  &.rounded {
-    @include border-radius.border-radius(20px);
-  }
-
-  &.hasArrowLeft {
-    &:before {
-      @include transform.transform(rotate(-135deg));
-      content: " ";
-      display: inline-block;
-      margin-right: 1em;
-      width: 0.5rem;
-      height: 0.5rem;
-      vertical-align: middle;
-      border-style: solid;
-      border-width: 2px 2px 0 0;
-      margin-right: 1em;
-      @media only screen and (min-width: viewports.$screen-sm) {
-        left: 1em;
-      }
-    }
-    &:not(:disabled),
-    &:not(.disabled) {
-      &.primary {
-        &:before {
-          border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
-        }
-      }
-      &.secondary {
-        &:before {
-          border-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-        }
-      }
-      &:hover:not(.noHover),
-      &:focus-visible,
-      &:active:not(.noHover),
-      &:active:hover:not(.noHover) {
-        &:before {
-          @include animation.animation(pushprev 0.8s linear infinite);
-        }
-        &.primary {
-          &:before {
-            border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
-          }
-        }
-        &.secondary {
-          &:before {
-            border-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-          }
-        }
-      }
-    }
-  }
-
-  &.hasArrowRight {
-    &:after {
-      @include transform.transform(rotate(45deg));
-      content: " ";
-      display: inline-block;
-      margin-left: 1em;
-      width: 0.5rem;
-      height: 0.5rem;
-      vertical-align: middle;
-      border-style: solid;
-      border-width: 2px 2px 0 0;
-      margin-left: 1em;
-      @media only screen and (min-width: viewports.$screen-sm) {
-        right: 1em;
-      }
-    }
-
-    &:not(:disabled),
-    &:not(.disabled) {
-      &.primary {
-        &:after {
-          border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
-        }
-      }
-      &.secondary {
-        &:after {
-          border-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-        }
-      }
-
-      &:hover:not(.noHover),
-      &:focus-visible,
-      &:active:not(.noHover),
-      &:active:hover:not(.noHover) {
-        &:after {
-          @include animation.animation(pushnext 0.8s linear infinite);
-        }
-        &.primary {
-          &:after {
-            border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
-          }
-        }
-        &.secondary {
-          &:after {
-            border-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
-          }
-        }
-      }
-    }
-  }
-}
-
-label.button {
-  input[type="radio"] {
-    @include appearance.appearance(none);
-    margin: 0;
-  }
-}

package/dist/components/CheckBoxIcon.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 _CheckBoxIconModule = _interopRequireDefault(require("./CheckBoxIcon.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CheckBoxIcon = props => {
-  let inlineStyle = {
-    height: props.size,
-    width: props.size,
-    fontSize: props.size
-  };
-  const checkBoxIconProps = {
-    className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(props.checked ? _CheckBoxIconModule.default.checked : "", " ").concat(props.disabled ? _CheckBoxIconModule.default.disabled : "", " ").concat(props.showBox ? _CheckBoxIconModule.default.showBox : "", " ").concat(props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ""),
-    style: inlineStyle
-  };
-  return _react.default.createElement("span", checkBoxIconProps, _react.default.createElement("span", {
-    "aria-hidden": true,
-    className: _CheckBoxIconModule.default.checkmark
-  }, props.checked ? props.checkmarkCharacter : ""));
-};
-CheckBoxIcon.propTypes = {
-  size: _propTypes.default.string,
-  checked: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  showBox: _propTypes.default.bool,
-  hasErrors: _propTypes.default.bool,
-  checkmarkCharacter: _propTypes.default.string
-};
-CheckBoxIcon.defaultProps = {
-  size: "20px",
-  checked: false,
-  disabled: false,
-  showBox: true,
-  hasErrors: false,
-  checkmarkCharacter: "✔"
-};
-var _default = exports.default = CheckBoxIcon;

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;