@epam/uui 5.5.1 → 5.5.2

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { renderer, mockReactPortalsForSnapshots } from '@epam/uui-test-utils';
+import { Burger } from '../Burger';
+import { BurgerButton } from '../BurgerButton';
+
+describe('Burger', () => {
+    it('should render with maximum props', () => {
+        const { mockClear } = mockReactPortalsForSnapshots();
+        const tree = renderer.create(<Burger width={ 160 } renderBurgerContent={ () => <BurgerButton caption="Home" link={ { pathname: '/' } } /> } />).toJSON();
+        mockClear();
+        expect(tree).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BurgerButton } from '../BurgerButton';
+import { renderer } from '@epam/uui-test-utils';
+import { ReactComponent as CalendarIcon } from '../../../../../icons/calendar-18.svg';
+
+describe('BurgerButton', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<BurgerButton />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(<BurgerButton caption="Test button" icon={ CalendarIcon } href="#" target="_blank" type="secondary" isDropdown isOpen={ false } />)
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BurgerSearch } from '../BurgerSearch';
+import { ReactComponent as CalendarIcon } from '../../../../../icons/calendar-18.svg';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+
+describe('BurgerSearch', () => {
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(<BurgerSearch value={ null } onValueChange={ () => {} } />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <BurgerSearch value={ null } onValueChange={ () => {} } onAccept={ () => {} } onCancel={ () => {} } icon={ CalendarIcon } iconPosition="right" isDropdown isOpen />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Burger should render with maximum props 1`] = `
+<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>
+`;

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

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

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BurgerSearch should be rendered correctly 1`] = `
+<div
+  className="root groupHeader uui-burger-group-header"
+>
+  <hr
+    className="line"
+  />
+  <span
+    className="groupName"
+  >
+    Test
+  </span>
+</div>
+`;

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

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BurgerSearch should be rendered correctly 1`] = `
+<div
+  className="container uui-input-box -clickable searchInput uui-main_menu-burger-search"
+  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[`BurgerSearch should be rendered correctly 2`] = `
+<div
+  className="container uui-input-box -clickable searchInput uui-main_menu-burger-search"
+  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>
+`;

package/components/navigation/MainMenu/Burger/index.ts

@@ -0,0 +1,4 @@
+export * from './Burger';
+export * from './BurgerButton';
+export * from './BurgerSearch';
+export * from './BurgerGroupHeader';

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

@@ -0,0 +1,32 @@
+
+@use  '../../../assets/styles/effects' as *;
+
+.global-menu-btn {
+    display: block;
+    height: 60px;
+    width: 60px;
+    fill: var(--uui-main_menu-icon);
+    flex-shrink: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0 none;
+    padding: 0;
+
+    &:focus, &:hover {
+        background-color: var(--uui-main_menu-hover);
+        outline: none;
+    }
+
+    &:active {
+        background-color: var(--uui-main_menu-active);
+    }
+
+    &:focus-visible {
+        @include focus-visible-effect(-2px, 0);
+    }
+}
+
+.globalMenuIcon svg {
+    width: 60px;
+    height: 60px;
+}

package/components/navigation/MainMenu/GlobalMenu.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { IAdaptiveItem, IHasCX, IHasRawProps } from '@epam/uui-core';
+import { IconContainer } from '@epam/uui-components';
+import { ReactComponent as GlobalMenuIcon } from '../../../icons/global_menu.svg';
+import css from './GlobalMenu.module.scss';
+
+/** Represents the properties of the GlobalMenu component. */
+export interface GlobalMenuProps extends IAdaptiveItem, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLButtonElement>> {}
+
+export const GlobalMenu = React.forwardRef<HTMLButtonElement, GlobalMenuProps>((props, ref) => (
+    <button ref={ ref } id="global_menu_toggle" className={ cx(css.globalMenuBtn, props.cx) } { ...props.rawProps }>
+        <IconContainer icon={ GlobalMenuIcon } cx={ css.globalMenuIcon } />
+    </button>
+));

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

@@ -0,0 +1,53 @@
+@use  '../../../assets/styles/effects' as *;
+
+.root {
+    --uui-main_menu-text: var(--uui-neutral-5);
+    --uui-main_menu-text-active: var(--uui-neutral-5);
+    --uui-main_menu-bg: var(--uui-neutral-80);
+    --uui-main_menu-hover: var(--uui-neutral-90);
+    --uui-main_menu-active: var(--uui-neutral-90);
+    --uui-main_menu-border-active: var(--uui-primary-50);
+
+    --uui-main_menu-search-bg: var(--uui-neutral-70);
+    --uui-main_menu-search-border: var(--uui-neutral-70);
+    --uui-main_menu-search-placeholder: var(--uui-text-disabled);
+    --uui-main_menu-search-text: var(--uui-text-disabled);
+    --uui-main_menu-search-icon: var(--uui-icon-disabled);
+
+    --uui-main_menu-icon: var(--uui-neutral-5);
+    --uui-main_menu-icon-hover: var(--uui-neutral-5);
+    --uui-main_menu-icon-active: var(--uui-neutral-5);
+
+    --uui-main_menu-font: var(--uui-font);
+    --uui-main_menu-font-weight: 600;
+    --uui-main_menu-search-font: var(--uui-font);
+    --uui-main_menu-search-font-weight: 400;
+    //
+    height: 60px;
+    min-height: 60px;
+    min-width: 360px;
+    background-color: var(--uui-main_menu-bg);
+    color: var(--uui-main_menu-text);
+    fill: var(--uui-main_menu-icon);
+
+    :global(.uui-mainmenu-server-badge) {
+        position: absolute;
+        left: 80px;
+        bottom: 0;
+    }
+
+    :global(.uui-mainmenu-server-badge-label) {
+        padding: 0 5px;
+        border: 2px solid var(--uui-neutral-0); /* for CI/CD, not themeable  */
+        border-radius: 5px 5px 0 0;
+        border-bottom: 0;
+        font-family: var(--uui-main_menu-font);
+        font-weight: var(--uui-main_menu-font-weight);
+        font-size: 9px;
+        text-transform: uppercase;
+    }
+
+    :global(.-clickable):focus-visible {
+        @include focus-visible-effect(-2px, 0);
+    }
+}

package/components/navigation/MainMenu/MainMenu.tsx

@@ -0,0 +1,22 @@
+import css from './MainMenu.module.scss';
+import { withMods } from '@epam/uui-core';
+import * as uuiComponents from '@epam/uui-components';
+import { Burger } from './Burger';
+import { MainMenuDropdown } from './MainMenuDropdown';
+
+interface MainMenuMods {}
+
+/** Represents the properties of the MainMenu component. */
+export type MainMenuProps = uuiComponents.MainMenuProps & MainMenuMods;
+
+function applyMainMenuMods() {
+    return [
+        css.root,
+        'uui-main_menu',
+    ];
+}
+
+export const MainMenu = withMods<uuiComponents.MainMenuProps, MainMenuMods>(uuiComponents.MainMenu, applyMainMenuMods, () => ({
+    Burger,
+    MainMenuDropdown,
+}));

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

@@ -0,0 +1,41 @@
+@use  '../../../assets/styles/effects' as *;
+
+.container {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    height: 60px;
+    padding-left: 18px;
+    padding-right: 6px;
+    background-color: transparent;
+    border: 0 none;
+
+    :global(.uui-caption), :global(.uui-input) {
+        padding-top: 21px;
+        padding-bottom: 21px;
+        min-width: 60px;
+        line-height: 18px;
+        font-size: 18px;
+    }
+
+    &:global(.-clickable) {
+        cursor: pointer;
+
+        &:focus, &:hover {
+            background: var(--uui-main_menu-dropdown-bg);
+            outline: none;
+        }
+
+        &:active {
+            background-color: var(--uui-main_menu-dropdown-bg);
+        }
+
+        &:focus-visible {
+            @include focus-visible-effect(-2px, 0);
+        }
+    }
+}
+
+.open {
+    background: var(--uui-main_menu-dropdown-bg);
+}

package/components/navigation/MainMenu/MainMenuAvatar.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import css from './MainMenuAvatar.module.scss';
+import cx from 'classnames';
+import {
+    IAdaptiveItem, IDropdownToggler, Icon, IHasCX, uuiMarkers,
+} from '@epam/uui-core';
+import { IconContainer } from '@epam/uui-components';
+import { ReactComponent as FoldingArrow } from '../../../icons/folding-arrow-18.svg';
+import { Avatar } from '@epam/uui-components';
+
+/** Represents the properties of the MainMenuAvatar component. */
+export interface MainMenuAvatarProps extends IAdaptiveItem, IDropdownToggler, IHasCX {
+    avatarUrl?: string;
+    icon?: Icon;
+}
+
+export const MainMenuAvatar = React.forwardRef<HTMLButtonElement, MainMenuAvatarProps>((props, ref) => (
+    <button
+        ref={ ref }
+        className={ cx(css.container, props.isDropdown && css.dropdown, props.isOpen && css.open, props.onClick && uuiMarkers.clickable, props.cx) }
+        onClick={ props.onClick }
+    >
+        <Avatar size="36" img={ props.avatarUrl } />
+        {props.icon && <IconContainer icon={ props.icon } />}
+        {props.isDropdown && (
+            <div>
+                <IconContainer icon={ FoldingArrow } flipY={ props.isOpen } />
+            </div>
+        )}
+    </button>
+));

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

@@ -0,0 +1,60 @@
+@use  '../../../assets/styles/index' as *;
+
+.root {
+    --uui-main_menu-button-font: var(--uui-font);
+    --uui-main_menu-button-font-weight: 600;
+    //
+    flex-shrink: 0;
+    color: var(--uui-main_menu-text);
+    fill: var(--uui-main_menu-icon);
+
+    :global(.uui-caption), :global(.uui-input) {
+        padding: 22px 6px;
+        line-height: 16px;
+        margin-bottom: -3px;
+        font-family: var(--uui-main_menu-button-font);
+        font-weight: var(--uui-main_menu-button-font-weight);
+    }
+
+    &:global(.uui-button-box), &:global(.uui-input-box) {
+        min-height: 60px;
+        padding-right: 6px;
+        padding-left: 6px;
+    }
+
+    :global(.uui-caption) {
+        white-space: nowrap;
+        font-size: 16px;
+    }
+
+    :global(.uui-icon) {
+        svg {
+            width: 18px;
+        }
+    }
+
+    &.type-primary {
+        @include icon-layout(36px);
+    }
+
+    &.type-secondary {
+        @include icon-layout(36px);
+    }
+
+    &:global(.-clickable) {
+        &:hover, &:focus {
+            background-color: var(--uui-main_menu-hover);
+            color: var(--uui-main_menu-text);
+            fill: var(--uui-main_menu-icon-hover);
+        }
+    }
+
+    &:global(.uui-active) {
+        background-color: var(--uui-main_menu-hover);
+        border-bottom: 3px solid var(--uui-main_menu-border-active);
+        border-image: var(--uui-main_menu-border-active-gradient, none);
+        border-image-slice: 3;
+        color: var(--uui-main_menu-text-active);
+        fill: var(--uui-main_menu-icon-active);
+    }
+}

package/components/navigation/MainMenu/MainMenuButton.tsx

@@ -0,0 +1,17 @@
+import css from './MainMenuButton.module.scss';
+import { Button, ButtonProps } from '@epam/uui-components';
+import { IAdaptiveItem, withMods } from '@epam/uui-core';
+import { ReactComponent as SvgTriangle } from '../../../icons/chevron-down-24.svg';
+
+interface MainMenuButtonMods {
+    /*
+    * Defines component type. The primary button leads to the main pages of the site, and the secondary to the others.
+    */
+    type?: 'primary' | 'secondary';
+}
+
+export const MainMenuButton = withMods<ButtonProps, MainMenuButtonMods & IAdaptiveItem>(
+    Button,
+    (mods) => [css.root, css['type-' + (mods.type || 'primary')]],
+    () => ({ dropdownIcon: SvgTriangle, role: 'menuitem' }),
+);

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

@@ -0,0 +1,44 @@
+@use  '../../../assets/styles/effects' as *;
+
+.dropdown-body {
+    --uui-main_menu-text: var(--uui-neutral-5);
+    --uui-main_menu-text-active: var(--uui-neutral-5);
+    --uui-main_menu-active: var(--uui-neutral-90);
+    --uui-main_menu-border-active: var(--uui-primary-50);
+
+    --uui-main_menu-dropdown-bg: var(--uui-neutral-90);
+    --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-80);
+    --uui-main_menu-dropdown-shadow: none;
+    --uui-main_menu-dropdown-border-radius: none;
+
+    --uui-main_menu-icon: var(--uui-neutral-5);
+    --uui-main_menu-icon-hover: var(--uui-neutral-5);
+    --uui-main_menu-icon-active: var(--uui-neutral-5);
+
+    //
+    display: flex;
+    flex-direction: column;
+    min-width: 200px;
+    background-color: var(--uui-main_menu-dropdown-bg);
+    box-shadow: var(--uui-main_menu-dropdown-shadow);
+    border-radius: var(--uui-main_menu-dropdown-border-radius);
+    overflow: hidden; // to hide children border radius on dropdown body
+
+    :global(.-clickable) {
+        &:global(.uui-button-box):hover {
+            background-color: var(--uui-main_menu-dropdown-bg-hover);
+        }
+
+        &:focus-visible {
+            @include focus-visible-effect(-2px, null);
+        }
+    }
+
+    :global(.uui-button-box) {
+        &:global(.uui-active) {
+            border: 0 none;
+            border-left: 3px solid var(--uui-main_menu-border-active);
+            background-color: var(--uui-main_menu-hover);
+        }
+    }
+}

package/components/navigation/MainMenu/MainMenuDropdown.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import FocusLock from 'react-focus-lock';
+import cx from 'classnames';
+import { Dropdown, MainMenuDropdownProps } from '@epam/uui-components';
+import { MainMenuButton } from './MainMenuButton';
+import css from './MainMenuDropdown.module.scss';
+
+export class MainMenuDropdown extends React.Component<MainMenuDropdownProps> {
+    render() {
+        return (
+            <Dropdown
+                renderTarget={ (props) => (
+                    <MainMenuButton caption={ this.props.caption } { ...props } rawProps={ this.props.rawProps } isLinkActive={ this.props.isLinkActive } isDropdown />
+                ) }
+                renderBody={ (props) => {
+                    const handleEscape = (e: React.KeyboardEvent<HTMLElement>) => {
+                        if (e.key === 'Escape' && props.isOpen) {
+                            props.onClose();
+                        }
+                    };
+
+                    return (
+                        <FocusLock returnFocus persistentFocus lockProps={ { onKeyDown: handleEscape } }>
+                            <div className={ cx(css.dropdownBody, 'uui-main_menu-dropdown') }>
+                                {this.props.renderBody
+                                    ? this.props.renderBody({ ...props })
+                                    : React.Children.map<React.ReactElement, React.ReactElement>(this.props.children as React.ReactElement[], (item) => {
+                                        if (!item) return item;
+                                        return React.createElement(item.type, {
+                                            ...item.props,
+                                            onClick: item.props.onClick
+                                                ? () => {
+                                                    item.props.onClick();
+                                                    props.onClose();
+                                                }
+                                                : null,
+                                        });
+                                    })}
+                            </div>
+                        </FocusLock>
+                    );
+                } }
+                placement="bottom-start"
+            />
+        );
+    }
+}

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

@@ -0,0 +1,25 @@
+.container {
+    height: 60px;
+    min-width: 48px;
+    padding-left: 12px;
+    padding-right: 12px;
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    fill: var(--uui-main_menu-icon);
+
+    &:global(.-clickable) {
+        &:hover {
+            background: var(--uui-main_menu-hover);
+            fill: var(--uui-main_menu-icon-hover);
+        }
+
+        &:active {
+            background-color: var(--uui-main_menu-active);
+            fill: var(--uui-main_menu-icon-active);
+        }
+    }
+}
+
+

package/components/navigation/MainMenu/MainMenuIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Icon, IAdaptiveItem, cx } from '@epam/uui-core';
+import { ButtonProps } from '@epam/uui-components';
+import { IconButton } from '../../buttons';
+import css from './MainMenuIcon.module.scss';
+
+/** Represents the properties of the MainMenuIcon component. */
+export type MainMenuIconProps = ButtonProps & IAdaptiveItem & {
+    /*
+    * Defines component icon.
+    */
+    icon: Icon;
+};
+
+export const MainMenuIcon = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, MainMenuIconProps>((props, ref) => (
+    <IconButton ref={ ref } icon={ props.icon } cx={ cx(props.cx, css.container) } { ...props } />
+));