dibk-design 7.7.1 → 8.0.1

package/dist/components/Accordion.module.scss

@@ -1,190 +0,0 @@
-// Mixins
-@use "../style/abstracts/mixins/appearance";
-@use "../style/abstracts/mixins/border-radius";
-
-// Variables
-@use "../style/abstracts/variables/colors";
-@use "../style/abstracts/variables/viewports";
-@use "../style/abstracts/variables/typography";
-
-@keyframes show {
-    0% {
-        opacity: 0;
-        margin-top: 0px;
-        padding: 0 15px 0;
-        line-height: 0;
-        max-height: 0;
-    }
-    100% {
-        opacity: 1;
-        margin-top: 0px;
-        padding: 8px 15px 15px;
-        line-height: inherit;
-        max-height: 1000px;
-    }
-}
-
-@keyframes hide {
-    100% {
-        opacity: 0;
-        margin-top: 0px;
-        padding: 0 15px 0;
-        line-height: 0;
-        max-height: 0;
-    }
-    0% {
-        opacity: 1;
-        margin-top: 0px;
-        padding: 8px 15px 15px;
-        line-height: inherit;
-        max-height: 1000px;
-    }
-}
-
-@media only screen and (min-width: viewports.$screen-sm) {
-    @keyframes show {
-        0% {
-            opacity: 0;
-            margin-top: 0px;
-            padding: 0 30px 0;
-            line-height: 0;
-            max-height: 0;
-        }
-        100% {
-            opacity: 1;
-            margin-top: 0px;
-            padding: 8px 30px 15px;
-            line-height: inherit;
-            max-height: 1000px;
-        }
-    }
-    @keyframes hide {
-        100% {
-            opacity: 0;
-            margin-top: 0px;
-            padding: 0 30px 0;
-            line-height: 0;
-            max-height: 0;
-        }
-        0% {
-            opacity: 1;
-            margin-top: 0px;
-            padding: 8px 30px 15px;
-            line-height: inherit;
-            max-height: 1000px;
-        }
-    }
-}
-
-.accordion {
-    font-family: typography.$default-font;
-    text-decoration: none;
-    width: 100%;
-    display: block;
-    &.default {
-        background-color: var(--color-default-background, colors.$color-default-background);
-        .panel span,
-        .content {
-            color: var(--color-default-text, colors.$color-default-text);
-        }
-    }
-    &.secondary {
-        background-color: var(--color-secondary-background, colors.$color-secondary-background);
-        color: var(--color-default-text, colors.$color-default-text);
-        .panel span,
-        .content {
-            color: var(--color-default-text, colors.$color-default-text);
-        }
-    }
-    &.margin {
-        margin-bottom: 8px;
-    }
-
-    .panel {
-        @include appearance.appearance(none);
-        @include border-radius.border-radius(0);
-        font-family: typography.$default-font;
-        padding: 15px 15px;
-        display: flex;
-        align-items: center;
-        position: relative;
-        text-decoration: none;
-        overflow-wrap: break-word;
-        line-height: 1.7;
-        cursor: pointer;
-        border: none;
-        width: 100%;
-        background: none;
-        text-align: left;
-        @media only screen and (min-width: viewports.$screen-sm) {
-            padding: 15px 30px;
-        }
-        &:focus-visible {
-            outline-color: var(--color-primary, colors.$color-primary);
-            outline-style: auto;
-            outline-width: 2px;
-            outline-offset: 0px;
-        }
-        .panelText {
-            font-family: typography.$default-font;
-            font-weight: bold;
-            font-size: 18px;
-            flex: 1;
-        }
-        .panelChevron {
-            @include border-radius.border-radius(100px);
-            box-sizing: border-box;
-            position: relative;
-            display: block;
-            width: 18px;
-            height: 18px;
-            margin-right: 6px;
-            @media only screen and (min-width: viewports.$screen-sm) {
-                margin-right: 0;
-            }
-            &::after {
-                content: "";
-                display: block;
-                box-sizing: border-box;
-                position: absolute;
-                width: 18px;
-                height: 18px;
-                border-bottom: 2px solid;
-                border-right: 2px solid;
-                transform: translateY(-30%) rotate(45deg);
-                transition: transform 0.3s ease-in-out;
-            }
-            &.expanded {
-                &::after {
-                    transform: translateY(30%) rotate(225deg);
-                }
-            }
-        }
-    }
-    .content {
-        opacity: 0;
-        margin-top: 0px;
-        line-height: 0;
-        max-height: 0;
-        overflow: hidden;
-        padding: 0 15px 0;
-        @media only screen and (min-width: viewports.$screen-sm) {
-            padding: 0 30px 0;
-        }
-        &.initialized {
-            animation: hide 0.3s ease-in-out;
-        }
-
-        &.expanded {
-            animation: show 0.3s ease-in-out;
-            opacity: 1;
-            margin-top: 0px;
-            padding: 8px 15px 15px;
-            line-height: inherit;
-            max-height: 10000px;
-            @media only screen and (min-width: viewports.$screen-sm) {
-                padding: 8px 30px 15px;
-            }
-        }
-    }
-}

package/dist/components/Button.js

@@ -1,118 +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 _reactRouterDom = require("react-router-dom");
-var _helpers = require("../functions/helpers");
-var _ButtonModule = _interopRequireDefault(require("./Button.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); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const Button = props => {
-  var _props$href, _props$href2, _props$children;
-  const getArrowClass = arrow => {
-    switch (arrow) {
-      case "left":
-        return _ButtonModule.default.hasArrowLeft;
-      case "right":
-        return _ButtonModule.default.hasArrowRight;
-      default:
-        return "";
-    }
-  };
-  let buttonProps = _objectSpread(_objectSpread({}, props), {}, {
-    "aria-invalid": props.hasErrors || null,
-    href: !props.disabled && (_props$href = props.href) !== null && _props$href !== void 0 && _props$href.length ? props.href : null
-  });
-  delete buttonProps.noHover;
-  delete buttonProps.hasErrors;
-  delete buttonProps.rounded;
-  delete buttonProps.inputType;
-  delete buttonProps.color;
-  delete buttonProps.content;
-  delete buttonProps.arrow;
-  delete buttonProps.noMargin;
-  const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "secondary" : props.color;
-  const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled, props.noMargin && _ButtonModule.default.noMargin]);
-  const renderReactLinkElements = childElements => {
-    const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
-    return childElementsthroughFragments.map((childElement, index) => {
-      var _childElement$props;
-      if (!buttonProps.disabled && !!(childElement !== null && childElement !== void 0 && (_childElement$props = childElement.props) !== null && _childElement$props !== void 0 && _childElement$props.to)) {
-        var _childElement$props2, _childElement$props3;
-        const childElementCopy = _react.default.cloneElement(childElement, {
-          className: className,
-          key: "button-".concat(index),
-          to: !buttonProps.disabled && childElement !== null && childElement !== void 0 && (_childElement$props2 = childElement.props) !== null && _childElement$props2 !== void 0 && _childElement$props2.to ? childElement === null || childElement === void 0 || (_childElement$props3 = childElement.props) === null || _childElement$props3 === void 0 ? void 0 : _childElement$props3.to : null
-        });
-        return childElementCopy;
-      } else {
-        return _react.default.createElement("button", _extends({}, buttonProps, {
-          key: "button-".concat(index),
-          className: className
-        }), props.content || childElement.props.children);
-      }
-    });
-  };
-  if (props.inputType === "button") {
-    return _react.default.createElement("input", _extends({}, buttonProps, {
-      className: className,
-      type: "button",
-      value: props.content
-    }));
-  } else if (props.inputType === "radio") {
-    return _react.default.createElement("label", {
-      className: className
-    }, _react.default.createElement("input", _extends({}, buttonProps, {
-      type: "radio"
-    })), props.content);
-  } else if ((_props$href2 = props.href) !== null && _props$href2 !== void 0 && _props$href2.length && !props.disabled) {
-    return _react.default.createElement("a", _extends({}, buttonProps, {
-      className: className
-    }), props.content || props.children);
-  } else if ((props === null || props === void 0 || (_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === _reactRouterDom.Link) {
-    return _react.default.createElement(_react.Fragment, null, renderReactLinkElements(_react.default.Children.toArray(props.children)));
-  } else {
-    return _react.default.createElement("button", _extends({}, buttonProps, {
-      className: className
-    }), props.content || props.children);
-  }
-};
-Button.propTypes = {
-  content: _propTypes.default.string,
-  color: _propTypes.default.oneOf(["primary", "secondary"]),
-  size: _propTypes.default.oneOf(["small", "regular"]),
-  arrow: _propTypes.default.oneOf(["none", "left", "right"]),
-  disabled: _propTypes.default.bool,
-  inputType: _propTypes.default.oneOf(["button", "radio"]),
-  name: _propTypes.default.string,
-  defaultChecked: _propTypes.default.bool,
-  required: _propTypes.default.bool,
-  hasErrors: _propTypes.default.bool,
-  "aria-describedby": _propTypes.default.string,
-  noHover: _propTypes.default.bool,
-  rounded: _propTypes.default.bool,
-  href: _propTypes.default.string,
-  onClick: _propTypes.default.func,
-  noMargin: _propTypes.default.bool
-};
-Button.defaultProps = {
-  color: "primary",
-  size: "regular",
-  disabled: false,
-  hasErrors: false,
-  noHover: false,
-  arrow: "none",
-  noMargin: false
-};
-var _default = exports.default = Button;

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;