@epam/uui 5.3.0-rc.0 → 5.3.0

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

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

package/components/overlays/Alert.module.scss

@@ -0,0 +1,77 @@
+.root {
+    --uui-alert-text: var(--uui-text-primary);
+    --uui-alert-bg: var(--uui-color-10);
+    --uui-alert-border: var(--uui-color-50);
+    --uui-alert-icon: var(--uui-color-50);
+    --uui-alert-border-radius: var(--uui-border-radius);
+    //
+    background-color: var(--uui-alert-bg);
+    border-left: 6px solid var(--uui-alert-border);
+
+    :global(.uui-text) {
+        color: var(--uui-alert-text);
+    }
+
+    .icon-wrapper {
+        :global(.uui-icon) {
+            fill: var(--uui-alert-icon);
+        }
+    }
+}
+
+.alert-wrapper {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    min-width: 170px;
+    border-radius: var(--uui-alert-border-radius);
+}
+
+.size-48 {
+    padding: 9px 18px 9px 12px;
+    min-height: 48px;
+}
+
+.size-36 {
+    padding: 3px 9px;
+    min-height: 36px;
+    border-left-width: 3px;
+}
+
+.icon-wrapper {
+    height: 100%;
+    margin-right: 12px;
+}
+
+.action-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.action-icon {
+    min-height: 30px;
+}
+
+.action-link:not(:last-child) {
+    margin-right: 12px;
+}
+
+.close-icon {
+    margin-left: 17px;
+    min-height: 30px;
+    min-width: fit-content;
+    align-self: flex-start;
+}
+
+.main-path {
+    width: 100%;
+    display: flex;
+}
+
+.content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100%;
+}

package/components/overlays/Alert.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { IHasChildren, IHasCX, Icon, IHasRawProps } from '@epam/uui-core';
+import { IconContainer } from '@epam/uui-components';
+import { IconButton, LinkButton } from '../buttons';
+import { SemanticColor } from '../types';
+import { ReactComponent as SuccessIcon } from '../../icons/notification-check_circle-fill-24.svg';
+import { ReactComponent as WarningIcon } from '../../icons/notification-warning-fill-24.svg';
+import { ReactComponent as ErrorIcon } from '../../icons/notification-error-fill-24.svg';
+import { ReactComponent as HintIcon } from '../../icons/notification-help-fill-24.svg';
+import { ReactComponent as CrossIcon } from '../../icons/navigation-close-24.svg';
+import css from './Alert.module.scss';
+
+type notificationAction = {
+    name: string;
+    action: () => void;
+};
+
+export interface AlertProps extends IHasChildren, IHasCX, IHasRawProps<React.HTMLAttributes<HTMLDivElement>> {
+    /** List of actions to display in the alert. Each action has name and 'action' callback */
+    actions?: notificationAction[];
+    /** Alert color */
+    color: SemanticColor;
+    /** When specified, a close icon is rendered. onClose callback will be called on clicking the close icon */
+    onClose?(): void;
+    /** An optional icon to show on the left of the alert */
+    icon?: Icon;
+    /** Component size. If omitted, 48 size will be used. */
+    size?: '36' | '48';
+}
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) => (
+    <div
+        role="alert"
+        ref={ ref }
+        className={
+            cx(
+                'uui-alert',
+                css.root,
+                css.alertWrapper,
+                props.color && `uui-color-${props.color}`,
+                props.cx,
+                (props.size === '36' ? css.size36 : css.size48),
+            )
+        }
+        { ...props.rawProps }
+    >
+        <div className={ css.mainPath }>
+            {props.icon && (
+                <div className={ css.iconWrapper }>
+                    <IconContainer icon={ props.icon } cx={ css.actionIcon } />
+                </div>
+            )}
+            <div className={ css.content }>
+                {props.children}
+                {props.actions && (
+                    <div className={ css.actionWrapper }>
+                        {props.actions.map((action) => (
+                            <LinkButton caption={ action.name } onClick={ action.action } key={ action.name } cx={ css.actionLink } size={ props?.size === '36' ? '24' : '30' } />
+                        ))}
+                    </div>
+                )}
+            </div>
+            {props.onClose && <IconButton icon={ CrossIcon } color="neutral" onClick={ props.onClose } cx={ css.closeIcon } />}
+        </div>
+    </div>
+));
+
+export const WarningAlert = React.forwardRef<HTMLDivElement, Omit<AlertProps, 'color'>>((props, ref) => <Alert icon={ WarningIcon } color="warning" ref={ ref } { ...props } />);
+
+export const SuccessAlert = React.forwardRef<HTMLDivElement, Omit<AlertProps, 'color'>>((props, ref) => <Alert icon={ SuccessIcon } color="success" ref={ ref } { ...props } />);
+
+export const HintAlert = React.forwardRef<HTMLDivElement, Omit<AlertProps, 'color'>>((props, ref) => <Alert icon={ HintIcon } color="info" ref={ ref } { ...props } />);
+
+export const ErrorAlert = React.forwardRef<HTMLDivElement, Omit<AlertProps, 'color'>>((props, ref) => <Alert icon={ ErrorIcon } color="error" ref={ ref } { ...props } />);

package/components/overlays/ConfirmationModal.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { IModal } from '@epam/uui-core';
+import { Button } from '../buttons';
+import { FlexSpacer, Panel, ScrollBars } from '../layout';
+import { ModalBlocker, ModalWindow, ModalHeader, ModalFooter } from './Modals';
+import { i18n } from '../../i18n';
+
+export interface ConfirmationModalWindowProps extends IModal<any> {
+    caption: any;
+    bodyContent?: any;
+    hideCancelButton?: boolean;
+}
+
+export class ConfirmationModal extends React.Component<ConfirmationModalWindowProps> {
+    render() {
+        let bodyContent;
+
+        if (this.props.bodyContent) {
+            bodyContent = <Panel background="surface" margin="24">{this.props.bodyContent}</Panel>;
+        }
+
+        return (
+            <ModalBlocker { ...this.props }>
+                <ModalWindow width={ 420 }>
+                    <ModalHeader borderBottom title={ this.props.caption } onClose={ () => this.props.abort() } />
+                    <ScrollBars>{bodyContent}</ScrollBars>
+                    <ModalFooter>
+                        <FlexSpacer />
+                        {this.props.hideCancelButton || (
+                            <Button caption={ i18n.form.modals.discardButton } onClick={ () => this.props.success(false) } fill="outline" color="secondary" />
+                        )}
+                        <Button caption={ i18n.form.modals.saveButton } onClick={ () => this.props.success(true) } color="accent" />
+                    </ModalFooter>
+                </ModalWindow>
+            </ModalBlocker>
+        );
+    }
+}

package/components/overlays/Dropdown.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Dropdown as UuiDropdown } from '@epam/uui-components';
+import { DropdownProps } from '@epam/uui-core';
+
+export function Dropdown(props: DropdownProps) {
+    return <UuiDropdown { ...props } />;
+}

package/components/overlays/DropdownContainer.module.scss

@@ -0,0 +1,93 @@
+.root {
+    --uui-dropdown_container-bg: var(--uui-surface-main);
+    --uui-dropdown_container-shadow: var(--uui-shadow-level-2);
+
+    --uui-dropdown_container-border-radius: 6px;
+
+    &:global(.uui-dropdown-body) {
+        display: flex;
+        flex-direction: column;
+        min-width: 150px;
+        box-sizing: border-box;
+        box-shadow: var(--uui-dropdown_container-shadow);
+        background-color: var(--uui-dropdown_container-bg);
+        border: 0;
+        border-radius: var(--uui-dropdown_container-border-radius);
+        overflow: hidden;
+
+        &:focus-visible {
+            outline: none;
+        }
+    }
+
+    :global(.uui-popover-arrow) {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        overflow: hidden;
+    }
+
+    :global(.uui-popover-arrow)::after {
+        content: '';
+        position: absolute;
+        background: var(--uui-dropdown_container-bg);
+        width: 8px;
+        height: 8px;
+        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+    }
+
+    &:global(.padding-6) {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+
+    &:global(.padding-12) {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+
+    &:global(.padding-18) {
+        padding-left: 18px;
+        padding-right: 18px;
+    }
+
+    &:global(.padding-24) {
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+
+    &:global(.padding-30) {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+
+    &:global(.vPadding-6) {
+        padding-top: 3px;
+        padding-bottom: 3px;
+    }
+
+    &:global(.vPadding-12) {
+        padding-top: 6px;
+        padding-bottom: 6px;
+    }
+
+    &:global(.vPadding-18) {
+        padding-top: 9px;
+        padding-bottom: 9px;
+    }
+
+    &:global(.vPadding-24) {
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+
+    &:global(.vPadding-30) {
+        padding-top: 15px;
+        padding-bottom: 15px;
+    }
+
+    &:global(.vPadding-48) {
+        padding-top: 24px;
+        padding-bottom: 24px;
+    }
+}

package/components/overlays/DropdownContainer.tsx

@@ -0,0 +1,20 @@
+import { withMods } from '@epam/uui-core';
+import * as uuiComponents from '@epam/uui-components';
+import css from './DropdownContainer.module.scss';
+
+export interface DropdownContainerMods {
+    vPadding?: '6' | '12' | '18' | '24' | '30' | '48';
+    padding?: '6' | '12' | '18' | '24' | '30';
+}
+
+export interface DropdownContainerProps extends uuiComponents.DropdownContainerProps, DropdownContainerMods {}
+
+function applyDropdownContainerMods(mods: DropdownContainerMods) {
+    return [
+        css.root,
+        mods.vPadding && `vPadding-${mods.vPadding}`,
+        mods.padding && `padding-${mods.padding}`,
+    ];
+}
+
+export const DropdownContainer = withMods<uuiComponents.DropdownContainerProps, DropdownContainerMods>(uuiComponents.DropdownContainer, applyDropdownContainerMods);

package/components/overlays/DropdownMenu.module.scss

@@ -0,0 +1,181 @@
+@use 'sass:math';
+@use '../../assets/styles/index' as *;
+
+.root {
+    --uui-dropdown_menu-bg: var(--uui-surface-main);
+    --uui-dropdown_menu-shadow: var(--uui-shadow-level-2);
+    --uui-dropdown_menu-splitter: var(--uui-divider);
+    --uui-dropdown_menu-item-hover: var(--uui-surface-highest);
+    --uui-dropdown_menu-item-active: var(--uui-surface-highest);
+    --uui-dropdown_menu-item-text: var(--uui-text-primary);
+
+    --uui-dropdown_menu-body-font: var(--uui-font);
+    --uui-dropdown_menu-body-font-weight: 400;
+    --uui-dropdown_menu-item-font: var(--uui-font);
+    --uui-dropdown_menu-item-font-weight: 400;
+}
+
+// TODO: need to revamp
+
+@mixin icon-sizes($size, $font-size, $line-height) {
+    $vpadding: math.div(($line-height - $size), 2);
+
+    :global(.uui-checkbox) {
+        width: $size;
+        height: $size;
+        margin: $vpadding 0;
+    }
+
+    :global(.uui-input-label) {
+        font-size: $font-size;
+        line-height: $line-height;
+    }
+
+    :global(.uui-icon) {
+        svg {
+            width: $size;
+        }
+    }
+}
+
+@mixin fillColor($fill, $color: null) {
+    @if ($color) {
+        color: $color;
+        fill: $fill;
+    } @else {
+        color: $fill;
+        fill: $fill;
+    }
+}
+
+@mixin withActive {
+    &:global(.uui-active) {
+        @include fillColor(var(--uui-primary-50));
+
+        &:hover,
+        &:focus {
+            @include fillColor(var(--uui-primary-50) !important);
+        }
+
+        .icon-check {
+            @include fillColor(var(--uui-primary-50));
+        }
+    }
+}
+
+@mixin itemRoot {
+    padding: 9px 12px;
+    line-height: 18px;
+    font-size: 14px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 36px;
+    font-family: var(--uui-dropdown_menu-item-font);
+    font-weight: var(--uui-dropdown_menu-item-font-weight);
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.body-root {
+    @include icon-layout(36px);
+    @include fillColor(var(--uui-icon), var(--uui-text-primary));
+    font-family: var(--uui-dropdown_menu-body-font);
+    font-weight: var(--uui-dropdown_menu-body-font-weight);
+    font-size: 14px;
+    padding: 6px 0;
+    background-color: var(--uui-dropdown_menu-bg);
+    box-shadow: var(--uui-shadow-level-1);
+    border-radius: var(--uui-dropdown_container-border-radius);
+}
+
+.submenu-root-item {
+    .icon-after {
+        transform: rotate(-90deg);
+    }
+}
+
+.icon-check {
+    @include fillColor(transparent);
+}
+
+.splitter-root {
+    display: flex;
+    width: 100%;
+
+    .splitter {
+        width: 100%;
+        border: 0;
+        border-top: 1px solid var(--uui-dropdown_menu-splitter);
+        height: 0;
+    }
+}
+
+.header-root {
+    @include fillColor(var(--uui-text-secondary));
+    @include itemRoot;
+    cursor: default;
+    height: auto;
+    font-size: 12px;
+    padding: 3px 12px;
+}
+
+.item-root {
+    @include icon-layout(36px);
+    @include withActive;
+    @include itemRoot;
+    @include fillColor(var(--uui-icon), var(--uui-text-primary));
+
+    .icon {
+        @include withActive;
+        justify-content: flex-start;
+        width: 18px;
+        height: 18px;
+    }
+
+    &.link {
+        @include withActive;
+        display: flex;
+        align-items: center;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &:global(.-clickable:not(.uui-disabled)) {
+        &:hover {
+            background-color: var(--uui-dropdown_menu-item-hover);
+            fill: var(--uui-icon-active);
+            cursor: pointer;
+        }
+
+        &:focus-visible {
+            @include focus-visible-effect(-2px, null);
+        }
+    }
+
+    &:global(.uui-disabled) {
+        @include fillColor(var(--uui-text-disabled)); // TODO: need possibility to override - in dark theme neutral 40
+
+        &:hover,
+        &:focus {
+            background-color: transparent;
+            cursor: default;
+        }
+    }
+
+    &:global(.uui-opened) {
+        background-color: var(--uui-dropdown_menu-item-active);
+        fill: var(--uui-text-primary);
+    }
+
+    & > *:not(:last-child) {
+        margin: 0 7px 0 0;
+    }
+}
+
+.indent {
+    padding-left: 24px;
+}