dibk-design 7.7.0 → 8.0.0

package/dist/components/Paper.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 _PaperModule = _interopRequireDefault(require("./Paper.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Paper = props => {
-  return _react.default.createElement("div", {
-    className: "".concat(_PaperModule.default.paper, " ").concat(props.noMargin ? _PaperModule.default.noMargin : "", " ").concat(props.noPadding ? _PaperModule.default.noPadding : "")
-  }, props.children);
-};
-Paper.propTypes = {
-  noMargin: _propTypes.default.bool,
-  noPadding: _propTypes.default.bool
-};
-Paper.defaultProps = {
-  noMargin: false,
-  noPadding: false
-};
-var _default = exports.default = Paper;

package/dist/components/Paper.module.scss

@@ -1,17 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/viewports";
-
-.paper {
-    position: relative;
-    width: 100%;
-    background: white;
-    &:not(.noMargin) {
-        margin: 0 0 20px;
-    }
-    &:not(.noPadding) {
-        padding: 48px 20px;
-        @media only screen and (min-width: viewports.$screen-sm) {
-            padding: 48px;
-        }
-    }
-}

package/dist/components/ProgressBar.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 _ProgressBarModule = _interopRequireDefault(require("./ProgressBar.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ProgressBar = props => {
-  const scssValueProperty = "--value";
-  return _react.default.createElement("div", {
-    className: "".concat(_ProgressBarModule.default.progressBar, " ").concat(props.hasErrors ? _ProgressBarModule.default.hasErrors : ""),
-    role: "progressbar",
-    "aria-valuenow": props.progress || 0,
-    "aria-valuemin": "0",
-    "aria-valuemax": "100",
-    style: {
-      [scssValueProperty]: props.progress || 0
-    }
-  });
-};
-ProgressBar.propTypes = {
-  progress: _propTypes.default.number,
-  hasErrors: _propTypes.default.bool
-};
-ProgressBar.defaultProps = {
-  progress: 0,
-  hasErrors: false
-};
-var _default = exports.default = ProgressBar;

package/dist/components/ProgressBar.module.scss

@@ -1,30 +0,0 @@
-// Mixins
-@use "../style/abstracts/mixins/calc";
-
-// Variables
-@use "../style/abstracts/variables/colors";
-
-.progressBar {
-    --size: 4rem;
-    --fg: #{var(--color-primary, colors.$color-primary)};
-    --bg: #e2e1e0;
-    --pgPercentage: var(--value);
-    width: var(--size);
-    height: var(--size);
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
-        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
-    font-family: Helvetica, Arial, sans-serif;
-    @include calc.calc("font-size", var(--size) / 4);
-    color: var(--fg);
-    flex-shrink: 0;
-    &::before {
-        counter-reset: percentage var(--value);
-        content: counter(percentage) "%";
-    }
-    &.hasErrors {
-        --fg: #{var(--color-error, colors.$color-error)};
-    }
-}

package/dist/components/RadioButtonIcon.js

@@ -1,34 +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 _RadioButtonIconModule = _interopRequireDefault(require("./RadioButtonIcon.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const RadioButtonIcon = props => {
-  let inlineStyle = {
-    height: props.size,
-    width: props.size
-  };
-  const radioButtonIconProps = {
-    className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(props.checked ? _RadioButtonIconModule.default.checked : "", " ").concat(props.disabled ? _RadioButtonIconModule.default.disabled : "", " ").concat(props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ""),
-    style: inlineStyle
-  };
-  return _react.default.createElement("span", radioButtonIconProps);
-};
-RadioButtonIcon.propTypes = {
-  size: _propTypes.default.string,
-  checked: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  hasErrors: _propTypes.default.bool
-};
-RadioButtonIcon.defaultProps = {
-  size: "10px",
-  checked: false,
-  disabled: false,
-  hasErrors: false
-};
-var _default = exports.default = RadioButtonIcon;

package/dist/components/RadioButtonIcon.module.scss

@@ -1,49 +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";
-@use "../style/abstracts/variables/transitions";
-
-.radioButtonIcon {
-    @include border-radius.border-radius(50%);
-    @include transition.transition(all transitions.$default-transition);
-    @include box-sizing.box-sizing(content-box);
-    display: inline-block;
-    vertical-align: middle;
-    min-width: 10px;
-    width: 10px;
-    height: 10px;
-    background: white;
-    margin-right: 0.4em;
-    margin-top: 2px;
-    border: 0.3em solid white;
-    cursor: pointer;
-
-    &: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 {
-        background: var(--color-primary, colors.$color-primary);
-        &.hasErrors {
-            background: var(--color-error, colors.$color-error);
-        }
-        &: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 {
-        border-color: #fff;
-        opacity: 0.4;
-    }
-}

package/dist/components/RadioButtonInput.js

@@ -1,68 +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 _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
-var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
-var _RadioButtonInputModule = _interopRequireDefault(require("./RadioButtonInput.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const RadioButtonInput = props => {
-  const labelProps = {
-    className: "".concat(_RadioButtonInputModule.default.radioButtonInput, " ").concat(props.checked ? _RadioButtonInputModule.default.checked : "", " ").concat(props.disabled ? _RadioButtonInputModule.default.disabled : "", " ").concat(props.hasErrors ? _RadioButtonInputModule.default.hasErrors : ""),
-    htmlFor: props.id
-  };
-  const iconProps = {
-    checked: props.checked,
-    disabled: props.disabled,
-    hasErrors: !props.contentOnly && props.hasErrors
-  };
-  const inputProps = {
-    id: props.id,
-    name: props.name || null,
-    type: "radio",
-    value: props.inputValue,
-    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(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", {
-    className: _RadioButtonInputModule.default.labelText
-  }, props.children, props.required && _react.default.createElement("img", {
-    src: _asterisk.default,
-    alt: "",
-    className: _RadioButtonInputModule.default.requiredSymbol
-  })));
-};
-RadioButtonInput.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,
-  contentOnly: _propTypes.default.bool,
-  hasErrors: _propTypes.default.bool,
-  inputValue: _propTypes.default.string.isRequired,
-  "aria-controls": _propTypes.default.string,
-  "aria-describedby": _propTypes.default.string
-};
-RadioButtonInput.defaultProps = {
-  name: "",
-  checked: false,
-  disabled: false,
-  required: false,
-  requiredGroup: false,
-  contentOnly: false,
-  hasErrors: false
-};
-var _default = exports.default = RadioButtonInput;

package/dist/components/RadioButtonInput.module.scss

@@ -1,53 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/colors";
-
-.radioButtonInput {
-    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="radio"] {
-        opacity: 0;
-        position: absolute;
-    }
-}

package/dist/components/RadioButtonList.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 _RadioButtonListModule = _interopRequireDefault(require("./RadioButtonList.module.scss"));
-var _Header = _interopRequireDefault(require("./Header"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const RadioButtonList = _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 isRadioButtonListItem = (childElement === null || childElement === void 0 || (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.type) === "RadioButtonListItem";
-      if (isRadioButtonListItem) {
-        const childElementCopy = _react.default.cloneElement(childElement, {
-          requiredGroup: required,
-          compact: compact,
-          key: "radioButtonListItem-".concat(index)
-        });
-        return childElementCopy;
-      } else {
-        return childElement;
-      }
-    });
-  };
-  return _react.default.createElement("fieldset", {
-    className: _RadioButtonListModule.default.radioButtonList
-  }, !!(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: _RadioButtonListModule.default.requiredSymbol
-  })) : null, renderChildElements(_react.default.Children.toArray(children)));
-};
-RadioButtonList.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 = RadioButtonList;

package/dist/components/RadioButtonList.module.scss

@@ -1,25 +0,0 @@
-// Variables
-@use "../style/abstracts/variables/typography";
-
-fieldset.radioButtonList {
-    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/RadioButtonListItem.js

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

package/dist/components/RadioButtonListItem.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";
-
-.radioButtonListItem {
-  @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="radio"] {
-    opacity: 0;
-    position: absolute;
-  }
-}