@epam/uui 5.3.0-rc.1 → 5.3.0

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

@@ -0,0 +1,31 @@
+.root {
+    --uui-burger_group-text: var(--uui-text-disabled);
+    --uui-burger_group-bg: var(--uui-neutral-90);
+    --uui-burger_group-line: var(--uui-text-secondary);
+
+    --uui-burger_group-font: var(--uui-font);
+    --uui-burger_group-font-weight: 400;
+}
+
+.group-header {
+    padding: 17px 0 0 0;
+}
+
+.group-name {
+    font-family: var(--uui-burger_group-font);
+    font-weight: var(--uui-burger_group-font-weight);
+    font-size: 12px;
+    color: var(--uui-burger_group-text);
+    background: var(--uui-burger_group-bg);
+    padding: 0 14px 0 18px;
+}
+
+.line {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    border: 0;
+    background-color: var(--uui-burger_group-line);
+    z-index: -1;
+    margin-top: 11px;
+}

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import cx from 'classnames';
+import css from './BurgerGroupHeader.module.scss';
+
+export interface BurgerGroupHeaderProps {
+    caption: string;
+}
+
+export function BurgerGroupHeader(props: BurgerGroupHeaderProps) {
+    return (
+        <div className={ cx(css.root, css.groupHeader, 'uui-burger-group-header') }>
+            <hr className={ css.line } />
+            <span className={ css.groupName }>{props.caption}</span>
+        </div>
+    );
+}

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

@@ -0,0 +1,51 @@
+.search-input {
+    --uui-burger_search: var(--uui-neutral-5);
+    --uui-burger_search-fill: var(--uui-text-disabled);
+    --uui-burger_search-bg: var(--uui-neutral-80);
+    --uui-burger_search-placeholder: var(--uui-text-disabled);
+
+    --uui-burger_search-font: var(--uui-font);
+    --uui-burger_search-font-weight: 400;
+    //
+    height: 60px;
+    background-color: var(--uui-burger_search-bg);
+    fill: var(--uui-burger_search-fill);
+    padding: 0 24px;
+    flex-shrink: 0;
+    width: auto;
+
+    :global(.uui-input) {
+        color: var(--uui-burger_search);
+        font-family: var(--uui-burger_search-font);
+        font-weight: var(--uui-burger_search-font-weight);
+
+        &::placeholder {
+            color: var(--uui-burger_search-placeholder);
+        }
+    }
+
+    :global(.uui-caption),
+    :global(.uui-input) {
+        padding: 18px 16px;
+        line-height: 24px;
+        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;
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { TextInput, TextInputProps } from '@epam/uui-components';
+import { ReactComponent as LensIcon } from '../../../../icons/search-18.svg';
+import { ReactComponent as CancelIcon } from '../../../../icons/menu_input_cancel.svg';
+import css from './BurgerSearch.module.scss';
+import cx from 'classnames';
+
+export interface BurgerSearchProps extends TextInputProps {}
+
+export function BurgerSearch(props: BurgerSearchProps) {
+    return (
+        <TextInput
+            cx={ cx(css.searchInput, 'uui-main_menu-burger-search') }
+            iconPosition="left"
+            icon={ LensIcon }
+            placeholder={ props.placeholder }
+            value={ props.value }
+            onValueChange={ props.onValueChange }
+            onCancel={ props.onCancel }
+            cancelIcon={ props.value && CancelIcon }
+        />
+    );
+}

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,53 @@
+// 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"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  tabIndex={-1}
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+  <input
+    className="uui-input"
+    onChange={[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"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  tabIndex={-1}
+>
+  <div
+    className="container uui-icon uui-enabled"
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+  <input
+    className="uui-input"
+    onChange={[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,14 @@
+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';
+
+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,21 @@
+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';
+
+export interface MainMenuMods {}
+
+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,30 @@
+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';
+
+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,58 @@
+@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);
+        color: var(--uui-main_menu-text-active);
+        fill: var(--uui-main_menu-icon-active);
+    }
+}

package/components/navigation/MainMenu/MainMenuButton.tsx

@@ -0,0 +1,14 @@
+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';
+
+export interface MainMenuButtonMods {
+    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);
+        }
+    }
+}