@pinuts/bsr-uikit-relaunch 0.0.10 → 0.0.13

package/dist/shared/Modal/SmallModal.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactI18next = require("react-i18next");
+var _uuid = require("uuid");
+var _ModalModule = _interopRequireDefault(require("./Modal.module.scss"));
+var _Close = _interopRequireDefault(require("../../icons/Close.jsx"));
+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; }
+const SmallModal = _ref => {
+  let {
+    show,
+    onClose,
+    children,
+    id,
+    className,
+    modalLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const divRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const currentId = (0, _uuid.v4)();
+  const modalLabelId = `small-modal-label-${currentId}`;
+  const modalDescriptionId = `small-modal-description-${currentId}`;
+  (0, _react.useEffect)(() => {
+    if (show) {
+      const handleEscapeKeyPress = event => {
+        if (event.key === 'Escape') {
+          onClose();
+        }
+      };
+      const handleClickOutside = event => {
+        if (contentRef.current && !contentRef.current.contains(event.target)) {
+          onClose();
+        }
+      };
+      document.addEventListener('keydown', handleEscapeKeyPress);
+      document.addEventListener('mousedown', handleClickOutside);
+
+      // Set focus to the modal content when it opens
+      if (contentRef.current) {
+        contentRef.current.focus();
+      }
+      return () => {
+        document.removeEventListener('keydown', handleEscapeKeyPress);
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [show, onClose]);
+  if (!show) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: divRef,
+    id: id,
+    className: [className, _ModalModule.default.smallModal].join(' '),
+    "aria-labelledby": ariaLabelledBy || modalLabelId,
+    "aria-describedby": ariaDescribedBy || modalDescriptionId
+  }, modalLabel && /*#__PURE__*/_react.default.createElement("div", {
+    "aria-hidden": true,
+    id: modalLabelId,
+    className: "d-none"
+  }, modalLabel), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: _ModalModule.default.closeButton,
+    "aria-label": t('modal.aria.close'),
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
+    className: _ModalModule.default.closeButtonText
+  }, t('general.close')), /*#__PURE__*/_react.default.createElement(_Close.default, {
+    width: 20,
+    height: 20,
+    stroke: "black",
+    fill: "black"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentRef,
+    className: _ModalModule.default.content,
+    id: ariaDescribedBy || modalDescriptionId,
+    tabIndex: -1
+  }, children));
+};
+
+// add prop types
+SmallModal.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  children: _propTypes.default.node.isRequired,
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  modalLabel: _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string
+};
+var _default = exports.default = SmallModal;

package/dist/styles/variables/_buttons.scss

@@ -2,7 +2,7 @@ $btn-border-radius: $border-radius-lg;
 $btn-padding-x: $base-gap * 6;
 $btn-padding-y: calc($base-gap * 2 - 1px);
 
-.btn {
+.btn, .pi-form-button button {
     text-decoration: underline;
     text-decoration-color: transparent;
     transition-duration: 0.15s;
@@ -18,11 +18,14 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
             border-color: $bsr-white-100;
         }
     }
-    &[class*="btn-outline-light"]:hover {
+    &.btn-outline-light:hover {
         background-color: $bsr-white-100;;
         color: $text-secondary;
         border-color: $bsr-white-100;
     }
+    &.btn-outline-light:focus-visible {
+        color: $bsr-white-100;
+    }
 
     &:hover {
         text-decoration-color: currentColor;
@@ -48,7 +51,7 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
     }
 
     &:active {
-            text-decoration: none;
+        text-decoration: none;
     }
 
     &[aria-disabled="true"], .disabled, &:disabled {
@@ -75,7 +78,7 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
                 &.btn-#{$color} {
                     background-color: shade-color($value, 100%) !important;
                     border-color: shade-color($value, 100%);
-                    color: color-contrast(shade-color($value, 100%), $bsr-black-90, $bsr-white-100);
+                    color: $bsr-black-90;
                     opacity: .4;
                     cursor: not-allowed;
                 }
@@ -101,6 +104,11 @@ $btn-padding-y: calc($base-gap * 2 - 1px);
             border-color: $bsr-brick-100 !important;
         }
     }
+    &:focus {
+        background-color: $bsr-white-100 !important;
+        color: $bsr-black-90!important;
+        box-shadow: 0 0 0 0.25rem rgba($bsr-white-100, .5)!important;
+    }
 }
 
 .btn.btn-outline-light {

package/dist/styles/variables/_colors.scss

@@ -10,6 +10,7 @@ $bsr-orange-80: #F68234;
 $bsr-orange-70: #F6914D;
 $bsr-orange-60: #F69F64;
 $bsr-orange-50: #F5AC7C;
+$bsr-orange-40: #F4BA94;
 
 // Secondary
 $bsr-brick-100: #D74116;
@@ -87,12 +88,13 @@ $theme-colors: (
     "light-green":$bsr-light-green-100,
     "green":      $bsr-green-100,
     "yellow":     $bsr-yellow-100,
-    "orange":    $bsr-orange-100,
+    "orange":     $bsr-orange-100,
     "sun-orange": $bsr-sun-orange-100,
     "rust-orange":$bsr-rust-orange-100,
     "brown":      $bsr-brown-100,
     "light-brown":$bsr-light-brown-100,
     "grey":       $bsr-grey-100,
+    "black-10":   $bsr-black-10,
 );
 
 // Text colors
@@ -106,4 +108,5 @@ $text-secondary: $bsr-brick-100;
     white: $bsr-white-100;
 }
 // Background-shadow (Modal)
-$modal-bg-color: rgb(30, 30, 30, 0.8); // #1E1E1ECC
+// $modal-bg-color: rgb(30, 30, 30, 0.8); // #1E1E1ECC
+$modal-bg-color: $bsr-white-100

package/dist/styles/variables/_focus.scss

@@ -3,7 +3,7 @@ FOCUS
 *********/
 
 @mixin buttonFocus {
-  outline: solid 2px #000!important;
+  outline: solid 2px currentColor!important;
   border: none;
   box-shadow: none;
 }

package/dist/styles/variables/_fonts.scss

@@ -1,5 +1,8 @@
 $fontsize-base: 18px;
 
+$fontfamily-base: "TradeGothicNextLT", sans-serif;
+$fontfamily-heading: "TradeGothicNextSR", sans-serif;
+
 // Font sizes
 $h1-fontsize: 48px;
 $h2-fontsize: 36px;
@@ -32,8 +35,12 @@ $nav-e2-font-size-sm: 18px;
 $nav-e3-font-size: 16px;
 
 $navigation-navLinks-font-size: 20px;
+$navigation-navLinks-font-size-sm: 18px;
+$navigation-linkList-font-size: 16px;
+$navigation-teaserText-font-size: 16px;
 $navigation-additionalLinks-font-size: 14px;
 
+
 $inputField-font-size: 18px;
 $input-label-font-size: 14px;
 $editingBtn-font-size: 14px;
@@ -79,6 +86,7 @@ $nav-e3-line-height-sm: 22px;
 $button-text-line-height: 24px;
 
 $navigation-navLinks-line-height: 24px;
+$navigation-linkList-line-height: 20px;
 $navigation-additionalLinks-line-height: 20px;
 
 $inputField-line-height: 26px;

package/dist/styles/variables/_variables.scss

@@ -12,3 +12,4 @@
 $font-family-main: 'Manrope';
 $base-transition: all 0.2s ease-in;
 $transition-duration-base: 0.2s;
+$transition-duration-short: 0.1s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinuts/bsr-uikit-relaunch",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "private": false,
   "description": "BSR UI-KIT Relaunch",
   "main": "dist/index.js",
@@ -53,6 +53,8 @@
     "dayjs": "^1.11.10",
     "html-react-parser": "^5.1.10",
     "i18next": "^22.4.14",
+    "luxon": "^3.5.0",
+    "react-big-calendar": "^1.5",
     "react-bootstrap": "^2.7.4",
     "react-dropzone": "^14.2.3",
     "react-i18next": "^15.1.1",