@epam/uui 5.5.1 → 5.5.2

package/components/navigation/MainMenu/MainMenuSearch.module.scss

@@ -0,0 +1,51 @@
+.search-input {
+    flex-basis: 200px;
+    max-width: 500px;
+    height: 36px;
+    min-width: 36px;
+    border-radius: 18px;
+    background-color: var(--uui-main_menu-search-bg);
+    fill: var(--uui-main_menu-search-icon);
+    padding: 0 6px;
+    margin: 0 12px;
+    transition: background-color 0.3s ease-out, flex-basis 0.3s ease-in-out;
+
+    :global(.uui-input) {
+        color: var(--uui-main_menu-search-text);
+        font-family: var(--uui-main_menu-search-font);
+        font-weight: var(--uui-main_menu-search-font-weight, normal);
+
+        &::placeholder {
+            color: var(--uui-main_menu-search-placeholder);
+        }
+    }
+
+    :global(.uui-caption),
+    :global(.uui-input) {
+        padding: 8px 6px;
+        line-height: 18px;
+        font-size: 14px;
+    }
+
+    :global(.uui-icon) {
+        svg {
+            height: 16px;
+            max-width: 16px;
+        }
+    }
+
+    :global(.uui-icon-cancel) {
+        svg {
+            height: 24px;
+            max-width: 24px;
+        }
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    &:global(.uui-input-box) {
+        min-height: 36px;
+    }
+}

package/components/navigation/MainMenu/MainMenuSearch.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TextInputProps, TextInput } from '@epam/uui-components';
+import { ReactComponent as LensIcon } from '../../../icons/search-18.svg';
+import { ReactComponent as CancelIcon } from '../../../icons/menu_input_cancel.svg';
+import { cx, IAdaptiveItem, IEditableDebouncer } from '@epam/uui-core';
+import css from './MainMenuSearch.module.scss';
+
+/** Represents the properties of the MainMenuSearch component. */
+export interface MainMenuSearchProps extends TextInputProps, IAdaptiveItem {}
+
+export const MainMenuSearch = React.forwardRef<HTMLInputElement, MainMenuSearchProps>((props, ref) => (
+    <IEditableDebouncer
+        { ...props }
+        render={ (iEditable) => (
+            <TextInput
+                iconPosition="left"
+                icon={ LensIcon }
+                cancelIcon={ props.value?.length > 0 && CancelIcon }
+                { ...props }
+                { ...iEditable }
+                ref={ ref }
+                cx={ cx(css.searchInput, props.cx) }
+                { ...props.rawProps }
+            />
+        ) }
+    />
+));

package/components/navigation/MainMenu/__tests__/GlobalMenu.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { GlobalMenu } from '../GlobalMenu';
+
+describe('GlobalMenu', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<GlobalMenu />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/navigation/MainMenu/__tests__/MainMenu.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MainMenu } from '../MainMenu';
+import { MainMenuButton } from '../MainMenuButton';
+import { BurgerButton } from '../Burger';
+import ReactDOM from 'react-dom';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+
+describe('MainMenu', () => {
+    const oldPortal = ReactDOM.createPortal;
+
+    beforeAll(() => {
+        ReactDOM.createPortal = (node) => node as any;
+    });
+
+    afterAll(() => {
+        ReactDOM.createPortal = oldPortal;
+    });
+
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <MainMenu>
+                <MainMenuButton />
+            </MainMenu>,
+        );
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <MainMenu
+                renderBurger={ () => <BurgerButton /> }
+                logoLink={ { pathname: '/' } }
+                appLogoUrl=""
+                logoWidth={ 120 }
+                isTransparent
+                serverBadge="Dev"
+                tooltipTechInfo="Tech Info"
+            >
+                <MainMenuButton />
+            </MainMenu>,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/navigation/MainMenu/__tests__/MainMenuAvatar.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { MainMenuAvatar } from '../MainMenuAvatar';
+
+describe('MainMenuAvatar', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<MainMenuAvatar />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <MainMenuAvatar
+                    avatarUrl="https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/avatar_placeholder.jpg"
+                    isDropdown
+                    isOpen={ false }
+                    collapseToMore
+                    estimatedWidth={ 120 }
+                    showInBurgerMenu
+                    priority={ 6 }
+                />,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/navigation/MainMenu/__tests__/MainMenuButton.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { MainMenuButton } from '../MainMenuButton';
+
+describe('MainMenuButton', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<MainMenuButton />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <MainMenuButton
+                    caption="Test button"
+                    type="primary"
+                    target="_blank"
+                    link={ { pathname: '/' } }
+                    isDropdown
+                    isOpen={ false }
+                    collapseToMore
+                    estimatedWidth={ 120 }
+                    showInBurgerMenu
+                    priority={ 6 }
+                />,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/navigation/MainMenu/__tests__/MainMenuDropdown.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { MainMenuDropdown } from '../MainMenuDropdown';
+import { MainMenuButton } from '../MainMenuButton';
+
+describe('MainMenuDropdown', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<MainMenuDropdown />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <MainMenuDropdown caption="Test button" estimatedWidth={ 120 } priority={ 6 }>
+                    <MainMenuButton collapseToMore caption="Impact" />
+                    <MainMenuButton collapseToMore caption="ENGX" />
+                    <MainMenuButton collapseToMore caption="Cloud" />
+                </MainMenuDropdown>,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/navigation/MainMenu/__tests__/MainMenuIcon.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { MainMenuIcon } from '../MainMenuIcon';
+import { ReactComponent as CalendarIcon } from '../../../../icons/calendar-18.svg';
+
+describe('MainMenuIcon', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<MainMenuIcon icon={ CalendarIcon } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(<MainMenuIcon icon={ CalendarIcon } target="_blank" link={ { pathname: '/' } } collapseToMore estimatedWidth={ 120 } priority={ 6 } />)
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/navigation/MainMenu/__tests__/MainMenuSearch.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { MainMenuSearch } from '../MainMenuSearch';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+
+describe('MainMenuSearch', () => {
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(<MainMenuSearch value={ null } onValueChange={ jest.fn } />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <MainMenuSearch
+                value="test"
+                onValueChange={ jest.fn }
+                caption="Test button"
+                type="primary"
+                collapseToMore
+                estimatedWidth={ 120 }
+                showInBurgerMenu
+                priority={ 6 }
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/navigation/MainMenu/__tests__/__snapshots__/GlobalMenu.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalMenu should be rendered correctly 1`] = `
+<button
+  className="globalMenuBtn"
+  id="global_menu_toggle"
+>
+  <div
+    className="container uui-icon uui-enabled globalMenuIcon"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/navigation/MainMenu/__tests__/__snapshots__/MainMenu.test.tsx.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MainMenu should be rendered correctly 1`] = `
+<nav
+  className="root uui-main_menu uui-mainmenu-container container"
+>
+  <div
+    className="itemsContainer mainWrapper"
+  >
+    <div
+      className="uui-flex-row container align-items-center"
+      style={
+        Object {
+          "columnGap": undefined,
+          "rowGap": undefined,
+        }
+      }
+    >
+      <div
+        className="root uui-burger uui-burger-menu container"
+      >
+        <button
+          className="uui-burger-button"
+          onClick={[Function]}
+        >
+          <div
+            className="container uui-icon uui-enabled"
+            style={Object {}}
+          >
+            <svg
+              className=""
+            />
+          </div>
+        </button>
+      </div>
+      <button
+        className="container uui-button-box uui-enabled root type-primary"
+        onClick={[Function]}
+        tabIndex={-1}
+        type="button"
+      />
+    </div>
+  </div>
+</nav>
+`;
+
+exports[`MainMenu should be rendered correctly 2`] = `
+<nav
+  className="root uui-main_menu uui-mainmenu-container container uui-mainmenu-transparent"
+>
+  <div
+    className="itemsContainer mainWrapper"
+  >
+    <div
+      className="uui-flex-row container align-items-center"
+      style={
+        Object {
+          "columnGap": undefined,
+          "rowGap": undefined,
+        }
+      }
+    >
+      <div
+        className="root uui-burger uui-burger-menu container"
+      >
+        <button
+          className="uui-burger-button"
+          onClick={[Function]}
+        >
+          <div
+            className="container uui-icon uui-enabled"
+            style={Object {}}
+          >
+            <svg
+              className=""
+            />
+          </div>
+        </button>
+      </div>
+      <button
+        className="container uui-button-box uui-enabled root type-primary"
+        onClick={[Function]}
+        tabIndex={-1}
+        type="button"
+      />
+    </div>
+  </div>
+  <div
+    className="uui-mainmenu-server-badge"
+  >
+    <div
+      className="uui-mainmenu-server-badge-label"
+      style={
+        Object {
+          "background": "#39b7ac",
+        }
+      }
+    >
+      Dev
+    </div>
+  </div>
+</nav>
+`;

package/components/navigation/MainMenu/__tests__/__snapshots__/MainMenuAvatar.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MainMenuAvatar should be rendered correctly 1`] = `
+<button
+  className="container"
+>
+  <img
+    className="avatar"
+    height="36"
+    onError={[Function]}
+    src="https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/avatar_placeholder.jpg"
+    width="36"
+  />
+</button>
+`;
+
+exports[`MainMenuAvatar should be rendered correctly 2`] = `
+<button
+  className="container dropdown"
+>
+  <img
+    className="avatar"
+    height="36"
+    onError={[Function]}
+    src="https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/avatar_placeholder.jpg"
+    width="36"
+  />
+  <div>
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</button>
+`;

package/components/navigation/MainMenu/__tests__/__snapshots__/MainMenuButton.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MainMenuButton should be rendered correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled root type-primary"
+  onClick={[Function]}
+  tabIndex={-1}
+  type="button"
+/>
+`;
+
+exports[`MainMenuButton should be rendered correctly 2`] = `
+<a
+  aria-expanded={false}
+  aria-haspopup={true}
+  className="container uui-button-box uui-enabled -clickable root type-primary"
+  onClick={[Function]}
+  rel="noopener noreferrer"
+  role="link"
+  tabIndex={0}
+  target="_blank"
+>
+  <div
+    className="uui-caption"
+  >
+    Test button
+  </div>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</a>
+`;

package/components/navigation/MainMenu/__tests__/__snapshots__/MainMenuDropdown.test.tsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MainMenuDropdown should be rendered correctly 1`] = `
+<button
+  aria-expanded={false}
+  aria-haspopup={true}
+  className="container uui-button-box uui-enabled -clickable root type-primary"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;
+
+exports[`MainMenuDropdown should be rendered correctly 2`] = `
+<button
+  aria-expanded={false}
+  aria-haspopup={true}
+  className="container uui-button-box uui-enabled -clickable root type-primary"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="uui-caption"
+  >
+    Test button
+  </div>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/navigation/MainMenu/__tests__/__snapshots__/MainMenuIcon.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MainMenuIcon should be rendered correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled uui-icon_button uui-color-neutral root container"
+  onClick={[Function]}
+  tabIndex={-1}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;
+
+exports[`MainMenuIcon should be rendered correctly 2`] = `
+<a
+  className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-neutral root container"
+  onClick={[Function]}
+  rel="noopener noreferrer"
+  role="link"
+  tabIndex={0}
+  target="_blank"
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</a>
+`;

package/components/navigation/MainMenu/__tests__/__snapshots__/MainMenuSearch.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MainMenuSearch should be rendered correctly 1`] = `
+<div
+  className="container uui-input-box -clickable searchInput"
+  onFocus={[Function]}
+  tabIndex={-1}
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+  <input
+    className="uui-input"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`MainMenuSearch should be rendered correctly 2`] = `
+<div
+  className="container uui-input-box -clickable searchInput"
+  onFocus={[Function]}
+  tabIndex={-1}
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+  <input
+    className="uui-input"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    tabIndex={0}
+    type="primary"
+    value="test"
+  />
+</div>
+`;

package/components/navigation/MainMenu/index.ts

@@ -0,0 +1,8 @@
+export * from './MainMenu';
+export * from './GlobalMenu';
+export * from './Burger';
+export * from './MainMenuAvatar';
+export * from './MainMenuSearch';
+export * from './MainMenuIcon';
+export * from './MainMenuDropdown';
+export * from './MainMenuButton';

package/components/navigation/__tests__/Anchor.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { Anchor } from '../Anchor';
+
+describe('Anchor', () => {
+    it('should rendered correctly', () => {
+        const tree = renderer.create(<Anchor>Test Anchor</Anchor>).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should rendered with props correctly', () => {
+        const tree = renderer
+            .create(
+                <Anchor href="https://uui.epam.com" isDisabled={ true }>
+                    Test Anchor
+                </Anchor>,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/navigation/__tests__/__snapshots__/Anchor.test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Anchor should rendered correctly 1`] = `
+<a
+  className="container uui-anchor uui-enabled -clickable root"
+  href={null}
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  role="link"
+  tabIndex={0}
+>
+  Test Anchor
+</a>
+`;
+
+exports[`Anchor should rendered with props correctly 1`] = `
+<a
+  aria-disabled={true}
+  className="container uui-anchor uui-disabled -clickable root"
+  disabled={true}
+  href="https://uui.epam.com"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  role="link"
+  tabIndex={-1}
+>
+  Test Anchor
+</a>
+`;

package/components/navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './MainMenu';
+export * from './Anchor';