intelicoreact 1.5.40 → 1.6.0

package/dist/Atomic/UI/NavLine/NavLine.scss

@@ -1,222 +1,269 @@
-.nav-line {
-  &__inner {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-
-    background-color: #f7fafc;
-  }
+.nav-line-wrapper {
+  // Colors
+  --nav-line-bg: #f7fafc;
+  --nav-line-text: #1e1e2d;
+  --nav-line-active: #6b81dd;
+  --nav-line-border: #cfcfcf;
+  --nav-line-arrow: #424242;
+  --nav-line-arrow-shadow: #ddd;
+  --nav-line-white: #fff;
+
+  // Sizes
+  --nav-line-font-size: 13px;
+  --nav-line-icon-size: 17px;
+  --nav-line-arrow-size: 24px;
+  --nav-line-arrow-width: 36px;
+  --nav-line-arrow-height: 39px;
+
+  // Spacing
+  --nav-line-padding: 10px;
+  --nav-line-body-padding: 24px 32px;
+  --nav-line-margin: -32px;
+
+  // Animation
+  --nav-line-transition-duration: 0.3s;
+  --nav-line-transition-timing: ease;
+
+  .nav-line {
+    &__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &__inner {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: center;
 
-  &__item {
-    margin-bottom: -1px;
-    padding: 10px;
+      background-color: var(--nav-line-bg, #f7fafc);
 
-    font-size: 13px;
-    cursor: pointer;
-    user-select: none;
+      transition: transform var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
+    }
 
-    color: #1e1e2d;
-    border-top: 2px solid transparent;
-    border-right: 1px solid transparent;
-    border-left: 1px solid transparent;
+    &__item {
+      margin-bottom: -1px;
+      padding: var(--nav-line-padding, 10px);
 
-    &--label {
-      text-transform: uppercase;
-    }
+      font-size: var(--nav-line-font-size, 13px);
+      cursor: pointer;
+      user-select: none;
 
-    &--icon {
-      display: flex;
-      align-items: center;
+      color: var(--nav-line-text, #1e1e2d);
+      border-top: 2px solid transparent;
+      border-right: 1px solid transparent;
+      border-left: 1px solid transparent;
 
-      margin-right: 5px;
+      transition: all var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
 
-      svg {
-        width: 17px;
-        height: 17px;
+      &--label {
+        text-transform: uppercase;
       }
-    }
 
-    &.active {
-      font-weight: 500;
-      cursor: default;
-      text-decoration: none;
+      &--icon {
+        display: flex;
+        align-items: center;
+
+        margin-right: 5px;
+
+        svg {
+          width: var(--nav-line-icon-size, 17px);
+          height: var(--nav-line-icon-size, 17px);
+        }
+      }
+
+      &.active {
+        font-weight: 500;
+        cursor: default;
+        text-decoration: none;
+
+        color: var(--nav-line-active, #6b81dd);
+        border-top: 2px solid var(--nav-line-active, #6b81dd);
+        border-right: 1px solid var(--nav-line-border, #cfcfcf);
+        border-left: 1px solid var(--nav-line-border, #cfcfcf);
+        background: var(--nav-line-white, #fff);
 
-      color: #6b81dd;
-      border-top: 2px solid #6b81dd;
-      border-right: 1px solid #cfcfcf;
-      border-left: 1px solid #cfcfcf;
-      background: #fff;
+        transition: all var(--nav-line-transition-duration, 0.3s)
+          var(--nav-line-transition-timing, ease);
+      }
     }
-  }
 
-  &__body {
-    position: relative;
-    bottom: 0;
+    &__body {
+      position: relative;
+      bottom: 0;
 
-    display: flex;
-    flex-wrap: wrap;
+      display: flex;
+      flex-wrap: wrap;
 
-    margin-right: -32px;
-    margin-left: -32px;
-    padding: 24px 32px;
+      margin-right: var(--nav-line-margin, -32px);
+      margin-left: var(--nav-line-margin, -32px);
+      padding: var(--nav-line-body-padding, 24px 32px);
 
-    font-size: 13px;
+      font-size: var(--nav-line-font-size, 13px);
 
-    border-top: 1px solid #cfcfcf;
-    background-color: #f7fafc;
+      border-top: 1px solid var(--nav-line-border, #cfcfcf);
+      background-color: var(--nav-line-bg, #f7fafc);
 
-    &:empty {
-      padding: 0 32px;
+      &:empty {
+        padding: 0 32px;
+      }
     }
-  }
 
-  &--scroll-mode {
-    position: relative;
+    &--scroll-mode {
+      position: relative;
 
-    .nav-line--simple__inner {
-      overflow: hidden;
-      flex-wrap: nowrap;
-    }
+      .nav-line--simple__inner {
+        overflow: hidden;
+        flex-wrap: nowrap;
+      }
 
-    .nav-line--simple__item {
-      flex-wrap: nowrap;
+      .nav-line--simple__item {
+        flex-wrap: nowrap;
 
-      white-space: nowrap;
+        white-space: nowrap;
+      }
     }
   }
-}
-
-.nav-line--simple {
-  &__inner {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
 
-    padding-left: 8px;
-  }
+  .nav-line--simple {
+    &__inner {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: center;
 
-  &__item {
-    position: relative;
+      padding-left: 8px;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+      transition: transform var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
+    }
 
-    margin-bottom: -1px;
-    padding: 10px 10px 14px;
+    &__item {
+      position: relative;
 
-    font-size: 13px;
-    cursor: pointer;
-    user-select: none;
-    text-decoration: none !important;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-    color: #1e1e2d;
-    border-bottom: 1px solid #cfcfcf;
+      margin-bottom: -1px;
+      padding: var(--nav-line-padding, 10px) var(--nav-line-padding, 10px) 14px;
 
-    transition: all 0.2s ease-out;
+      font-size: var(--nav-line-font-size, 13px);
+      cursor: pointer;
+      user-select: none;
+      text-decoration: none !important;
 
-    &::after {
-      position: absolute;
-      bottom: 0;
+      color: var(--nav-line-text, #1e1e2d);
+      border-bottom: 1px solid var(--nav-line-border, #cfcfcf);
 
-      width: 0;
-      height: 2px;
+      transition: all var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
 
-      content: "";
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 50%; // Центрируем полоску
 
-      background-color: #6b81dd;
+        width: 0;
+        height: 2px;
 
-      transition: all 0.2s ease-out;
-    }
+        content: "";
 
-    &:hover {
-      &::after {
-        width: 50%;
+        background-color: var(--nav-line-active, #6b81dd);
 
-        opacity: 0.6;
+        transition: all var(--nav-line-transition-duration, 0.3s)
+          var(--nav-line-transition-timing, ease);
+        transform: translateX(-50%); // Выравниваем относительно центра
       }
-    }
 
-    &.active {
-      font-weight: 500;
-      cursor: default;
+      &:hover {
+        &::after {
+          width: 50%;
 
-      opacity: 1;
-
-      &::after {
-        left: 0;
+          opacity: 0.6;
+        }
+      }
 
-        width: 100%;
+      &.active {
+        font-weight: 500;
+        cursor: default;
 
         opacity: 1;
+
+        &::after {
+          width: 100%;
+
+          opacity: 1;
+        }
       }
     }
-  }
 
-  &__arrow {
-    position: absolute;
-    z-index: 2;
+    &__arrow {
+      position: absolute;
+      z-index: 2;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-    box-sizing: border-box;
-    width: 36px;
-    height: 39px;
+      box-sizing: border-box;
+      width: var(--nav-line-arrow-width, 36px);
+      height: var(--nav-line-arrow-height, 39px);
 
-    color: #424242;
-    background: #fff;
+      color: var(--nav-line-arrow, #424242);
+      background: var(--nav-line-white, #fff);
 
-    transition: all 0.5s;
+      transition: all var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
 
-    &:hover {
-      cursor: pointer;
-    }
+      &:hover {
+        cursor: pointer;
+      }
 
-    &--prev {
-      top: 0;
-      left: 0;
+      &--prev {
+        top: 0;
+        left: 0;
 
-      border-radius: 8px 0 0 8px;
-      box-shadow: 10px 0 10px -5px #ddd;
+        border-radius: 8px 0 0 8px;
+        box-shadow: 10px 0 10px -5px var(--nav-line-arrow-shadow, #ddd);
 
-      transform: translate(-100%, -2px);
-    }
+        transform: translate(-100%, -2px);
+      }
 
-    &--next {
-      top: 0;
-      right: 0;
+      &--next {
+        top: 0;
+        right: 0;
 
-      border-radius: 0 8px 8px 0;
-      box-shadow: -10px 0 10px -5px #ddd;
+        border-radius: 0 8px 8px 0;
+        box-shadow: -10px 0 10px -5px var(--nav-line-arrow-shadow, #ddd);
 
-      transform: translate(100%, -2px);
-    }
+        transform: translate(100%, -2px);
+      }
 
-    svg {
-      width: 24px;
-      height: 24px;
+      svg {
+        width: var(--nav-line-arrow-size, 24px);
+        height: var(--nav-line-arrow-size, 24px);
+      }
     }
-  }
 
-  &__body {
-    padding: 15px 10px;
+    &__body {
+      padding: 15px 10px;
 
-    font-size: 13px;
+      font-size: var(--nav-line-font-size, 13px);
+    }
   }
-}
 
-.nav-line-count {
-  margin-left: 5px;
-}
+  .nav-line-count {
+    margin-left: 5px;
+  }
 
-.post-log-tab__body {
-  background-color: #f7fafc;
-}
+  .post-log-tab__body {
+    background-color: var(--nav-line-bg, #f7fafc);
+  }
 
-.nav-line__item--hidden {
-  display: none;
+  .nav-line__item--hidden {
+    display: none;
+  }
 }

package/dist/Atomic/UI/NavLine/NavLine.test.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 const _jsxruntime = require("react/jsx-runtime");
 const _reactrouterdom = require("react-router-dom");
 const _react = require("@testing-library/react");
-const _indexconstants = require("../../../Constants/index.constants");
+const _indexconstants = require("@/Constants/index.constants");
 const _NavLine = /*#__PURE__*/ _interop_require_default(require("./NavLine"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {

package/dist/Atomic/UI/PageTitle/PageTitle.js

@@ -1,56 +1,77 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactFeather = require("react-feather");
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _reactfeather = require("react-feather");
 require("./PageTitle.scss");
-// TODO: change when there will be routes
-// import { Link } from 'react-router-dom';
-
-const RC = "page-title";
-const PageTitle = _ref => {
-  let {
-    title,
-    pages,
-    children,
-    testId = RC
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId,
-    className: RC
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${RC}__wrap`
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `${RC}__title`
-  }, title), pages.length && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${RC}__pages`
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    className: `${RC}__link`,
-    href: "/"
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Home, null)), pages.map((_ref2, index) => {
-    let {
-      name,
-      path
-    } = _ref2;
-    return pages.length - 1 === index ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: index
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `${RC}__delimiter`
-    }, "/"), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(`${RC}__link`, `${RC}__link_last`)
-    }, name)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: index
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: `${RC}__delimiter`
-    }, "/"), /*#__PURE__*/_react.default.createElement("a", {
-      className: `${RC}__link`,
-      href: path
-    }, name));
-  }))), children);
-};
-var _default = exports.default = PageTitle;
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const RC = 'page-title';
+const PageTitle = ({ title, pages, children, testId = RC })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-testid": testId,
+        className: RC,
+        role: "region",
+        "aria-label": title,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: `${RC}__wrap`,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h1", {
+                        className: `${RC}__title`,
+                        children: title
+                    }),
+                    pages.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)("nav", {
+                        className: `${RC}__pages`,
+                        "aria-label": "Breadcrumb",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("ol", {
+                            className: `${RC}__list`,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                                        className: `${RC}__link`,
+                                        href: "/",
+                                        "aria-label": "Home page",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Home, {
+                                            "aria-hidden": "true"
+                                        })
+                                    })
+                                }),
+                                pages.map(({ name, path }, index)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: `${RC}__delimiter`,
+                                                "aria-hidden": "true",
+                                                children: "/"
+                                            }),
+                                            pages.length - 1 === index ? /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: (0, _classnames.default)(`${RC}__link`, `${RC}__link_last`),
+                                                "aria-current": "page",
+                                                children: name
+                                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+                                                className: `${RC}__link`,
+                                                href: path,
+                                                children: name
+                                            })
+                                        ]
+                                    }, path))
+                            ]
+                        })
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+const _default = PageTitle;

package/dist/Atomic/UI/PageTitle/PageTitle.scss

@@ -1,6 +1,24 @@
-@import "../../../scss/vars";
+@use "../../../scss/vars";
 
 .page-title {
+  // settings
+  --pt-font-size-title: 16px;
+  --pt-font-size-text: 13px;
+  --pt-font-size-delimiter: 12px;
+  --pt-line-height: 20px;
+  --pt-spacing-small: 4px;
+  --pt-spacing-medium: 8px;
+  --pt-outline-width: 2px;
+  --pt-border-radius: 2px;
+  --pt-outline-offset: 2px;
+
+  // colors
+  --pt-color-text: #{vars.$color--dark};
+  --pt-color-primary: #{vars.$color--primary};
+  --pt-color-gray: #{vars.$color--gray--dark};
+  --pt-color-hover: #{vars.$color--blue--dark};
+  --pt-color-focus: #0366d6;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -8,49 +26,69 @@
   &__title {
     display: block;
 
-    font-size: 16px;
-    line-height: 20px;
+    margin: 0;
+    padding: 0;
+
+    font-size: var(--pt-font-size-title, 16px);
+    font-weight: normal;
+    line-height: var(--pt-line-height, 20px);
 
-    color: $color--dark;
+    color: var(--pt-color-text, #{vars.$color--dark});
   }
 
   &__pages {
     display: flex;
     align-items: center;
 
-    margin-top: 4px;
+    margin-top: var(--pt-spacing-small, 4px);
+  }
+
+  &__list {
+    display: flex;
+    align-items: center;
+
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
   }
 
   &__delimiter {
-    margin: 0 8px;
+    margin: 0 var(--pt-spacing-medium, 8px);
 
-    font-size: 12px;
+    font-size: var(--pt-font-size-delimiter, 12px);
     font-weight: 500;
 
-    color: $color--dark;
+    color: var(--pt-color-text, #{vars.$color--dark});
   }
 
   &__link {
-    font-size: 13px;
+    font-size: var(--pt-font-size-text, 13px);
 
-    color: $color--primary;
+    color: var(--pt-color-primary, #{vars.$color--primary});
 
     &_last {
       cursor: default;
 
-      color: $color--gray--dark;
+      color: var(--pt-color-gray, #{vars.$color--gray--dark});
     }
 
     svg path {
-      stroke: $color--primary;
+      stroke: var(--pt-color-primary, #{vars.$color--primary});
     }
 
     &:hover:not(.page-title__link_last) {
-      color: $color--blue--dark;
+      color: var(--pt-color-hover, #{vars.$color--blue--dark});
 
       svg path {
-        stroke: $color--blue--dark;
+        stroke: var(--pt-color-hover, #{vars.$color--blue--dark});
       }
     }
+
+    &:focus-visible {
+      border-radius: var(--pt-border-radius, 2px);
+      outline: var(--pt-outline-width, 2px) solid var(--pt-color-focus, #0366d6);
+      outline-offset: var(--pt-outline-offset, 2px);
+    }
   }
 }