intelicoreact 1.5.41 → 1.6.1

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

@@ -0,0 +1,311 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+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 _NavLine = /*#__PURE__*/ _interop_require_default(require("./NavLine"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+jest.mock('react-feather', ()=>({
+        User: ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                "data-testid": "user-icon",
+                children: "User Icon"
+            }),
+        ChevronLeft: ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                children: "ChevronLeft Icon"
+            }),
+        ChevronRight: ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                children: "ChevronRight Icon"
+            })
+    }));
+const mockItems = [
+    {
+        tabId: 'tab1',
+        label: 'Tab 1'
+    },
+    {
+        tabId: 'tab2',
+        label: 'Tab 2',
+        icon: 'User'
+    },
+    {
+        tabId: 'tab3',
+        label: 'Tab 3',
+        count: 5
+    },
+    {
+        tabId: 'tab4',
+        label: 'Tab 4',
+        disabled: true
+    },
+    {
+        tabId: 'tab5',
+        label: 'Tab 5',
+        isHidden: true
+    }
+];
+const defaultProps = {
+    items: mockItems,
+    activeTab: 'tab1',
+    onChange: jest.fn()
+};
+function renderNavLine(props = {}) {
+    const allProps = {
+        ...defaultProps,
+        ...props
+    };
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.BrowserRouter, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_NavLine.default, {
+            ...allProps
+        })
+    }));
+}
+describe('navLine Component', ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+    });
+    describe('rendering', ()=>{
+        it('renders all visible tabs', ()=>{
+            renderNavLine();
+            expect(_react.screen.getByText('Tab 1')).toBeInTheDocument();
+            expect(_react.screen.getByText('Tab 2')).toBeInTheDocument();
+            expect(_react.screen.getByText('Tab 3')).toBeInTheDocument();
+            expect(_react.screen.getByText('Tab 4')).toBeInTheDocument();
+        // Тест на скрытый таб удален, так как компонент все равно рендерит его с классом hidden
+        });
+        it('hides tab with isHidden prop', ()=>{
+            renderNavLine();
+            const hiddenTab = _react.screen.getByText('Tab 5').closest('.nav-line__item');
+            expect(hiddenTab).toHaveClass('nav-line__item--hidden');
+        });
+        it('renders tab with icon', ()=>{
+            renderNavLine();
+            expect(_react.screen.getByTestId('user-icon')).toBeInTheDocument();
+        });
+        it('renders tab with count', ()=>{
+            renderNavLine();
+            expect(_react.screen.getByText('(5)')).toBeInTheDocument();
+        });
+        it('applies active class to active tab', ()=>{
+            renderNavLine();
+            const activeTab = _react.screen.getByText('Tab 1').closest('.nav-line__item');
+            expect(activeTab).toHaveClass('active');
+        });
+        it('applies disabled class to disabled tab', ()=>{
+            renderNavLine();
+            const disabledTab = _react.screen.getByText('Tab 4').closest('.nav-line__item');
+            expect(disabledTab).toHaveClass('disabled');
+        });
+    });
+    describe('variants', ()=>{
+        it('renders with simple variant', ()=>{
+            renderNavLine({
+                variant: 'simple'
+            });
+            const navLine = _react.screen.getByTestId('nav-line');
+            expect(navLine).toHaveClass('nav-line--simple');
+        });
+        it('renders with scroll mode', ()=>{
+            renderNavLine({
+                scrollMode: true
+            });
+            const navLine = _react.screen.getByTestId('nav-line');
+            expect(navLine).toHaveClass('nav-line--scroll-mode');
+        });
+    });
+    describe('interactions', ()=>{
+        it('calls onChange when clicking on non-disabled tab', ()=>{
+            renderNavLine({
+                isLocal: true
+            }); // Добавляем isLocal: true
+            const tab = _react.screen.getByText('Tab 2').closest('.nav-line__item');
+            if (!tab) throw new Error('Tab not found');
+            _react.fireEvent.click(tab);
+            expect(defaultProps.onChange).toHaveBeenCalledWith('tab2');
+        });
+        it('does not call onChange when clicking on disabled tab', ()=>{
+            renderNavLine({
+                isLocal: true
+            }); // Добавляем isLocal: true
+            const disabledTab = _react.screen.getByText('Tab 4').closest('.nav-line__item');
+            if (!disabledTab) throw new Error('Disabled tab not found');
+            _react.fireEvent.click(disabledTab);
+            expect(defaultProps.onChange).not.toHaveBeenCalled();
+        });
+        it('handles keyboard navigation when enabled', ()=>{
+            renderNavLine({
+                isNavigateByKeys: true
+            });
+            _react.fireEvent.keyDown(document, {
+                keyCode: _indexconstants.KEYBOARD_KEY_CODES.ARROW_RIGHT
+            });
+            expect(defaultProps.onChange).toHaveBeenCalledWith('tab2');
+            defaultProps.onChange.mockClear();
+            // Симулируем, что текущий активный таб - tab2
+            renderNavLine({
+                isNavigateByKeys: true,
+                activeTab: 'tab2'
+            });
+            _react.fireEvent.keyDown(document, {
+                keyCode: _indexconstants.KEYBOARD_KEY_CODES.ARROW_LEFT
+            });
+            expect(defaultProps.onChange).toHaveBeenCalledWith('tab1');
+        });
+    });
+    describe('scroll Functionality', ()=>{
+        beforeEach(()=>{
+            // Мокаем getBoundingClientRect
+            const mockGetBoundingClientRect = jest.fn().mockReturnValue({
+                width: 200,
+                height: 50,
+                top: 0,
+                left: 0,
+                right: 200,
+                bottom: 50,
+                x: 0,
+                y: 0
+            });
+            // Мокаем scrollWidth и clientWidth
+            Object.defineProperties(HTMLElement.prototype, {
+                scrollWidth: {
+                    configurable: true,
+                    get: ()=>400
+                },
+                clientWidth: {
+                    configurable: true,
+                    get: ()=>200
+                },
+                scrollLeft: {
+                    configurable: true,
+                    get: ()=>50,
+                    set: jest.fn()
+                }
+            });
+            // Мокаем scrollBy
+            window.HTMLElement.prototype.scrollBy = jest.fn();
+            Element.prototype.getBoundingClientRect = mockGetBoundingClientRect;
+            // Мокаем ResizeObserver
+            global.ResizeObserver = jest.fn().mockImplementation(()=>({
+                    observe: jest.fn(),
+                    unobserve: jest.fn(),
+                    disconnect: jest.fn()
+                }));
+        });
+        afterEach(()=>{
+            jest.restoreAllMocks();
+            jest.clearAllMocks();
+        });
+        it('renders scroll buttons in scroll mode', async ()=>{
+            const longItems = Array.from({
+                length: 10
+            }, (_, index)=>({
+                    tabId: `tab${index}`,
+                    label: `Tab ${index}`
+                }));
+            renderNavLine({
+                scrollMode: true,
+                items: longItems
+            });
+            // Имитируем скролл для активации кнопок
+            const inner = _react.screen.getByRole('tablist');
+            _react.fireEvent.scroll(inner);
+            // Проверяем наличие обеих кнопок
+            expect(_react.screen.getByTestId('nav-line-scroll-prev')).toBeInTheDocument();
+            expect(_react.screen.getByTestId('nav-line-scroll-next')).toBeInTheDocument();
+        });
+        it('scrolls content when clicking scroll buttons', ()=>{
+            const longItems = Array.from({
+                length: 10
+            }, (_, index)=>({
+                    tabId: `tab${index}`,
+                    label: `Tab ${index}`
+                }));
+            renderNavLine({
+                scrollMode: true,
+                items: longItems
+            });
+            // Имитируем скролл для активации кнопок
+            const inner = _react.screen.getByRole('tablist');
+            _react.fireEvent.scroll(inner);
+            const nextButton = _react.screen.getByTestId('nav-line-scroll-next');
+            _react.fireEvent.click(nextButton);
+            // Проверяем, что scrollBy был вызван с правильными параметрами
+            expect(HTMLElement.prototype.scrollBy).toHaveBeenCalledWith({
+                left: 100,
+                behavior: 'smooth'
+            });
+        });
+    });
+    describe('navigation Modes', ()=>{
+        it('renders spans for local navigation', ()=>{
+            renderNavLine({
+                isLocal: true
+            });
+            const tabs = _react.screen.getAllByRole('tab');
+            tabs.forEach((tab)=>{
+                expect(tab.tagName.toLowerCase()).toBe('span');
+            });
+        });
+        it('renders NavLinks for router navigation', ()=>{
+            renderNavLine({
+                isLocal: false
+            });
+            const tabs = _react.screen.getAllByRole('tab');
+            tabs.forEach((tab)=>{
+                expect(tab.tagName.toLowerCase()).toBe('a');
+            });
+        });
+    });
+    describe('accessibility', ()=>{
+        it('has correct ARIA attributes', ()=>{
+            renderNavLine();
+            const tabList = _react.screen.getByRole('tablist');
+            expect(tabList).toHaveAttribute('aria-orientation', 'horizontal');
+            const tabs = _react.screen.getAllByRole('tab');
+            tabs.forEach((tab)=>{
+                expect(tab).toHaveAttribute('aria-selected');
+                if (tab.classList.contains('disabled')) {
+                    expect(tab).toHaveAttribute('aria-disabled', 'true');
+                    expect(tab).toHaveAttribute('tabIndex', '-1');
+                } else {
+                    expect(tab).toHaveAttribute('tabIndex', '0');
+                }
+            });
+        });
+    });
+    describe('edge Cases', ()=>{
+        it('handles empty items array', ()=>{
+            renderNavLine({
+                items: []
+            });
+            const tabList = _react.screen.getByRole('tablist');
+            expect(tabList.children.length).toBe(0);
+        });
+        it('handles undefined icon', ()=>{
+            const itemsWithUndefinedIcon = [
+                {
+                    tabId: 'tab1',
+                    label: 'Tab 1',
+                    icon: undefined
+                }
+            ];
+            renderNavLine({
+                items: itemsWithUndefinedIcon
+            });
+            expect(_react.screen.queryByTestId('user-icon')).not.toBeInTheDocument();
+        });
+        it('handles mode create', ()=>{
+            renderNavLine({
+                mode: 'create'
+            });
+            const generalTab = _react.screen.getByText('Tab 1').closest('.nav-line__item');
+            expect(generalTab).toHaveClass('disabled');
+        });
+    });
+});

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _NavLine = /*#__PURE__*/ _interop_require_default(require("./NavLine"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _NavLine.default;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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);
+    }
   }
 }

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PageTitleTemplate: function() {
+        return PageTitleTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _reactfeather = require("react-feather");
+const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));
+const _PageTitle = /*#__PURE__*/ _interop_require_default(require("./PageTitle"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'UI/PageTitle',
+    component: _PageTitle.default,
+    args: {
+        title: 'Some page title',
+        pages: [
+            {
+                name: 'Lenders',
+                path: '/lenders'
+            },
+            {
+                name: 'Some subpage',
+                path: '/lenders/subpage'
+            },
+            {
+                name: 'Current',
+                path: '/lenders/subpage/current'
+            }
+        ]
+    }
+};
+function Template(args) {
+    const buttonHandler = ()=>{
+    // do smth
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+        ...args,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+            label: "Back",
+            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ArrowLeft, {}),
+            onClick: buttonHandler
+        })
+    });
+}
+const PageTitleTemplate = Template.bind({});