@epam/uui 5.3.0 → 5.4.1

package/components/buttons/Button.module.scss

@@ -1,157 +0,0 @@
-@use '../../assets/styles/index' as *;
-
-@mixin button-disables-styles($bg-color, $border-color) {
-    background-color: $bg-color;
-    color: var(--uui-btn-caption-disabled);
-    fill: var(--uui-btn-caption-disabled);
-    border-color: $border-color;
-}
-
-.root {
-    --uui-btn-bg: var(--uui-color-50);
-    --uui-btn-bg-hover: var(--uui-color-60);
-    --uui-btn-bg-active: var(--uui-color-70);
-    --uui-btn-bg-disabled: var(--uui-neutral-30);
-    --uui-btn-border: var(--uui-color-50);
-    --uui-btn-border-hover: var(--uui-color-60);
-    --uui-btn-border-active: var(--uui-color-70);
-    --uui-btn-border-disabled: var(--uui-neutral-30);
-    --uui-btn-caption: var(--uui-color-contrast);
-    --uui-btn-caption-disabled: var(--uui-text-disabled);
-
-    --uui-btn-border-radius: var(--uui-border-radius);
-
-    --uui-btn-font: var(--uui-font);
-    --uui-btn-font-weight: var(--uui-font-weight, 600);
-    //
-    background-color: var(--uui-btn-bg);
-    color: var(--uui-btn-caption);
-    fill: var(--uui-btn-caption);
-    border-color: var(--uui-btn-border);
-
-    &:global(.-clickable) {
-        &:hover {
-            background-color: var(--uui-btn-bg-hover);
-            border-color: var(--uui-btn-border-hover);
-        }
-
-        &:active {
-            background-color: var(--uui-btn-bg-active);
-            border-color: var(--uui-btn-border-active);
-        }
-    }
-
-    &:global(.uui-button-box) {
-        border-style: solid;
-        justify-content: center;
-        border-radius: var(--uui-btn-border-radius);
-    }
-
-    &:focus-visible {
-        @include focus-visible-effect();
-    }
-
-    :global(.uui-caption) {
-        @include overflow-ellipsis();
-        min-width: 0;
-        text-align: center;
-        flex: 1 1 auto;
-        font-family: var(--uui-btn-font);
-        font-weight: var(--uui-btn-font-weight, normal);
-        user-select: none;
-    }
-
-    &:is(:global(.-clickable), :hover, :active, :focus):global(.uui-disabled),
-    &:global(.uui-disabled) {
-        &:global(.uui-fill-solid) {
-            @include button-disables-styles(var(--uui-btn-bg-disabled), var(--uui-btn-border-disabled));
-        }
-
-        &:global(.uui-fill-outline) {
-            @include button-disables-styles(var(--uui-surface-main), var(--uui-btn-border-disabled));
-        }
-
-        &:global(.uui-fill-none) {
-            @include button-disables-styles(transparent, var(--uui-btn-border-disabled));
-        }
-
-        &:global(.uui-fill-ghost) {
-            @include button-disables-styles(transparent, transparent);
-        }
-    }
-
-    &:global(.uui-fill-solid) {
-        --uui-btn-bg: var(--uui-color-50);
-        --uui-btn-bg-hover: var(--uui-color-60);
-        --uui-btn-bg-active: var(--uui-color-70);
-        --uui-btn-border: var(--uui-color-50);
-        --uui-btn-border-hover: var(--uui-color-60);
-        --uui-btn-border-active: var(--uui-color-70);
-        --uui-btn-caption: var(--uui-color-contrast);
-        --uui-btn-caption-disabled: var(--uui-text-disabled);
-    }
-
-    &:global(.uui-fill-outline) {
-        --uui-btn-bg: var(--uui-surface-main);
-        --uui-btn-bg-hover: var(--uui-color-10);
-        --uui-btn-bg-active: var(--uui-color-20);
-        --uui-btn-bg-disabled: transparent;
-        --uui-btn-border: var(--uui-color-50);
-        --uui-btn-border-hover: var(--uui-color-50);
-        --uui-btn-border-active: var(--uui-color-50);
-        --uui-btn-caption: var(--uui-color-50);
-        --uui-btn-caption-disabled: var(--uui-text-disabled);
-    }
-
-    &:global(.uui-fill-none) {
-        --uui-btn-bg: transparent;
-        --uui-btn-bg-hover: var(--uui-color-10);
-        --uui-btn-bg-active: var(--uui-color-20);
-        --uui-btn-bg-disabled: transparent;
-        --uui-btn-border: var(--uui-color-50);
-        --uui-btn-border-hover: var(--uui-color-50);
-        --uui-btn-border-active: var(--uui-color-50);
-        --uui-btn-caption: var(--uui-color-50);
-        --uui-btn-caption-disabled: var(--uui-text-disabled);
-    }
-
-    &:global(.uui-fill-ghost) {
-        --uui-btn-bg: transparent;
-        --uui-btn-bg-hover: var(--uui-color-10);
-        --uui-btn-bg-active: var(--uui-color-20);
-        --uui-btn-bg-disabled: transparent;
-        --uui-btn-border: transparent;
-        --uui-btn-border-hover: var(--uui-color-10);
-        --uui-btn-border-active: var(--uui-color-20);
-        --uui-btn-border-disabled: transparent;
-        --uui-btn-caption: var(--uui-color-50);
-        --uui-btn-caption-disabled: var(--uui-text-disabled);
-    }
-
-    &:global {
-        &.uui-size-18 {
-            @include button-layout(18px, 1px);
-        }
-
-        &.uui-size-24 {
-            @include button-layout(24px, 1px);
-        }
-
-        &.uui-size-30 {
-            @include button-layout(30px, 1px);
-        }
-
-        &.uui-size-36 {
-            @include button-layout(36px, 1px);
-        }
-
-        &.uui-size-42 {
-            @include button-layout(42px, 1px);
-        }
-
-        &.uui-size-48 {
-            @include button-layout(48px, 1px);
-        }
-    }
-}
-

package/components/buttons/Button.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Button as uuiButton, ButtonProps as uuiButtonProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import { ControlSize, ButtonFill } from '../types';
-import { systemIcons } from '../../icons/icons';
-import { CountIndicator } from '../widgets';
-import css from './Button.module.scss';
-
-export type ButtonColor = 'accent' | 'primary' | 'critical' | 'secondary' | 'neutral';
-export const allButtonColors: ButtonColor[] = [
-    'accent', 'primary', 'critical', 'secondary', 'neutral',
-];
-
-const defaultSize = '36';
-
-export interface ButtonMods {
-    size?: ControlSize | '18';
-    fill?: ButtonFill;
-    color?: ButtonColor;
-}
-
-export type ButtonProps = ButtonMods & Omit<uuiButtonProps, 'count' | 'indicator'>;
-
-export function applyButtonMods(mods: ButtonProps) {
-    return [
-        css.root,
-        'uui-button',
-        `uui-fill-${mods.fill || 'solid'}`,
-        `uui-color-${mods.color || 'primary'}`,
-        `uui-size-${mods.size || defaultSize}`,
-    ];
-}
-
-export const Button = withMods<Omit<uuiButtonProps, 'count' | 'indicator'>, ButtonMods>(
-    uuiButton,
-    applyButtonMods,
-    (props) => ({
-        dropdownIcon: systemIcons[props.size || defaultSize].foldingArrow,
-        clearIcon: systemIcons[props.size || defaultSize].clear,
-        countIndicator: (countIndicatorProps) => <CountIndicator { ...countIndicatorProps } color="white" />,
-    }),
-);

package/components/buttons/IconButton.module.scss

@@ -1,44 +0,0 @@
-@use '../../assets/styles/effects' as *;
-
-.root {
-    --uui-icon_btn: var(--uui-color-50);
-    --uui-icon_btn-hover: var(--uui-color-60);
-    --uui-icon_btn-active: var(--uui-color-70);
-    --uui-icon_btn-disabled: var(--uui-icon-disabled); // from core or color class? Current - from core
-    //
-    fill: var(--uui-icon_btn);
-
-    &:global(.uui-icon_button.uui-color-neutral) {
-        --uui-icon_btn: var(--uui-icon);
-        --uui-icon_btn-hover: var(--uui-icon-hover);
-        --uui-icon_btn-active: var(--uui-icon-active);
-    }
-
-    &:global(.-clickable) {
-        &:hover {
-            fill: var(--uui-icon_btn-hover);
-        }
-
-        &:active {
-            fill: var(--uui-icon_btn-active);
-        }
-
-        &:focus-visible {
-            @include focus-visible-effect();
-        }
-    }
-
-    &:global(.uui-disabled) {
-        fill: var(--uui-icon_btn-disabled);
-
-        &:global(.-clickable) {
-            &:hover, &:focus {
-                fill: var(--uui-icon_btn-disabled);
-            }
-
-            &:active {
-                fill: var(--uui-icon_btn-disabled);
-            }
-        }
-    }
-}

package/components/buttons/IconButton.tsx

@@ -1,20 +0,0 @@
-import { IconButtonBaseProps, IconButton as uuiIconButton } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import css from './IconButton.module.scss';
-
-export type IconColor = 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'neutral';
-export const allIconColors: IconColor[] = [
-    'info', 'success', 'warning', 'error', 'secondary', 'neutral',
-];
-
-export interface IconButtonMods {
-    color?: IconColor;
-}
-
-export interface IconButtonProps extends IconButtonBaseProps, IconButtonMods {}
-
-function applyIconButtonMods(mods: IconButtonProps & IconButtonMods) {
-    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css.root];
-}
-
-export const IconButton = withMods<IconButtonProps, IconButtonMods>(uuiIconButton, applyIconButtonMods);

package/components/buttons/LinkButton.module.scss

@@ -1,85 +0,0 @@
-@use  '../../assets/styles/buttonLayout' as *;
-
-.root {
-    --uui-link_btn-text: var(--uui-color-50);
-    --uui-link_btn-text-hover: var(--uui-color-60);
-    --uui-link_btn-text-active: var(--uui-color-70);
-    --uui-link_btn-text-disabled: var(--uui-text-disabled);
-
-    --uui-link-button-font: var(--uui-font);
-    --uui-link-button-font-weight: 600;
-
-    &:global(.uui-button-box) {
-        background-color: transparent;
-        color: var(--uui-link_btn-text);
-        fill: var(--uui-link_btn-text);
-        min-width: auto;
-
-        &:global(.-clickable:not(.uui-disabled)) {
-            &:hover {
-                color: var(--uui-link_btn-text-hover);
-                fill: var(--uui-link_btn-text-hover);
-            }
-
-            &:active {
-                color: var(--uui-link_btn-text-active);
-                fill: var(--uui-link_btn-text-active);
-            }
-
-            &:focus {
-                box-shadow: none;
-            }
-
-            &:focus-visible {
-                border-radius: 2px;
-                box-shadow:
-                    inset 0 -2px 0 0 var(--uui-outline-focus),
-                    inset 0 2px 0 0 var(--uui-outline-focus),
-                    2px 0 0 0 var(--uui-outline-focus),
-                    -2px 0 0 0 var(--uui-outline-focus);
-            }
-        }
-
-        &:global(.uui-disabled) {
-            color: var(--uui-link_btn-text-disabled);
-            fill: var(--uui-link_btn-text-disabled);
-            background-color: transparent;
-
-            &:hover {
-                background-color: transparent;
-            }
-        }
-    }
-
-    :global(.uui-caption) {
-        font-family: var(--uui-link-button-font);
-        font-weight: var(--uui-link-button-font-weight, normal);
-    }
-
-    // Sizes
-    &:global {
-        &.uui-size-18 {
-            @include link-button-layout(18px);
-        }
-
-        &.uui-size-24 {
-            @include link-button-layout(24px);
-        }
-
-        &.uui-size-30 {
-            @include link-button-layout(30px);
-        }
-
-        &.uui-size-36 {
-            @include link-button-layout(36px);
-        }
-
-        &.uui-size-42 {
-            @include link-button-layout(42px);
-        }
-
-        &.uui-size-48 {
-            @include link-button-layout(48px);
-        }
-    }
-}

package/components/buttons/LinkButton.tsx

@@ -1,32 +0,0 @@
-import * as types from '../types';
-import { withMods } from '@epam/uui-core';
-import { Button, ButtonProps } from '@epam/uui-components';
-import css from './LinkButton.module.scss';
-import { systemIcons } from '../../icons/icons';
-import { getIconClass } from './helper';
-
-const defaultSize = '36';
-export type LinkButtonColorType = 'primary' | 'secondary' | 'contrast';
-export const allLinkButtonColors: LinkButtonColorType[] = ['primary', 'secondary', 'contrast'];
-
-export interface LinkButtonMods {
-    size?: types.ControlSize | '42';
-    color?: LinkButtonColorType;
-}
-
-export type LinkButtonProps = LinkButtonMods & ButtonProps;
-
-function applyLinkButtonMods(mods: LinkButtonProps) {
-    return [
-        'uui-link_button',
-        css.root,
-        `uui-size-${mods.size || defaultSize}`,
-        ...getIconClass(mods),
-        `uui-color-${mods.color || 'primary'}`,
-    ];
-}
-
-export const LinkButton = withMods<ButtonProps, LinkButtonMods>(Button, applyLinkButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize].clear,
-}));

package/components/buttons/TabButton.module.scss

@@ -1,94 +0,0 @@
-@use 'sass:math';
-@use  '../../assets/styles/index' as *;
-
-@mixin tab-button-color($color, $activeColor, $backgroundColor) {
-    color: $color;
-    fill: $color;
-    background-color: $backgroundColor;
-
-    &:hover {
-        color: $activeColor;
-        fill: $activeColor;
-    }
-
-    &:global(.uui-active) {
-        color: $activeColor;
-        fill: $activeColor;
-        border-color: $activeColor;
-    }
-}
-
-$text-size-caption: 36px;
-$text-size-count: 24px;
-
-.root {
-    --uui-tab_btn-text: var(--uui-text-primary);
-    --uui-tab_btn-text-hover: var(--uui-primary-50);
-    --uui-tab_btn-text-active: var(--uui-primary-50);
-    --uui-tab_btn-text-disabled: var(--uui-text-disabled);
-    --uui-tab_btn-font: var(--uui-font);
-    --uui-tab_btn-font-weight: 600;
-
-    @include link-button-horizontal-layout(36px);
-    @include tab-button-color(var(--uui-tab_btn-text), var(--uui-tab_btn-text-active), transparent);
-    cursor: pointer;
-    padding-left: 12px;
-    padding-right: 12px;
-    position: relative;
-    bottom: -1px;
-    display: flex;
-    align-items: center;
-    font-family: var(--uui-tab_btn-font);
-    font-weight: var(--uui-tab_btn-font-weight);
-    border-bottom: 3px solid transparent;
-
-    &:global(.-clickable):focus-visible {
-        @include focus-visible-effect(-2px, 0);
-    }
-
-    &:global(.uui-disabled) {
-        @include tab-button-color(var(--uui-tab_btn-text-disabled), var(--uui-tab_btn-text-disabled), transparent);
-    }
-
-    &.withNotify {
-        :global(.uui-caption) {
-            &::after {
-                content: '';
-                position: absolute;
-                margin-bottom: math.div($text-size-caption, 2);
-                height: 6px;
-                width: 6px;
-                background: var(--uui-critical-50);
-                box-shadow: 0 1px 8px 0 var(--uui-critical-50);
-                border-radius: 50%;
-            }
-        }
-    }
-
-    &:global(.uui-button-box) {
-        min-width: min-content;
-    }
-
-    :global(.uui-count_indicator) {
-        padding: 0 6px;
-        margin-left: 3px;
-        margin-right: 3px;
-    }
-
-    :global(.uui-caption) {
-        @include text-size($text-size-caption, 0);
-    }
-
-    // Sizes
-    &.size-36 {
-        height: 36px;
-    }
-
-    &.size-48 {
-        height: 48px;
-    }
-
-    &.size-60 {
-        height: 60px;
-    }
-}

package/components/buttons/TabButton.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Button, ButtonProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import { getIconClass } from './helper';
-import { CountIndicator } from '../widgets';
-import { systemIcons } from '../../icons/icons';
-import css from './TabButton.module.scss';
-
-export interface TabButtonMods {
-    size?: '36' | '48' | '60';
-    withNotify?: boolean;
-}
-
-export type TabButtonProps = TabButtonMods & ButtonProps;
-
-function applyTabButtonMods(mods: TabButtonProps) {
-    return [
-        css.root,
-        'uui-tab-button',
-        css['size-' + (mods.size || '48')],
-        mods.withNotify && css.withNotify,
-        ...getIconClass(mods),
-    ];
-}
-
-export const TabButton = withMods<ButtonProps, TabButtonMods>(Button, applyTabButtonMods, (props) => ({
-    dropdownIcon: systemIcons['36'].foldingArrow,
-    clearIcon: systemIcons['36'].clear,
-    ...props,
-    rawProps: { role: 'tab', ...props.rawProps },
-    countIndicator: (countIndicatorProps) => (
-        <CountIndicator
-            { ...countIndicatorProps }
-            color={ props.isLinkActive ? 'info' : 'neutral' }
-            size="18"
-        />
-    ),
-}));

package/components/buttons/VerticalTabButton.module.scss

@@ -1,7 +0,0 @@
-@use '../../assets/styles/index' as *;
-
-.root {
-    border-bottom: 0 none;
-    border-left: 3px solid transparent;
-    text-align: left;
-}

package/components/buttons/VerticalTabButton.tsx

@@ -1,12 +0,0 @@
-import css from './VerticalTabButton.module.scss';
-import { withMods } from '@epam/uui-core';
-import { ButtonProps } from '@epam/uui-components';
-import { TabButton, TabButtonMods } from './TabButton';
-
-function applyVerticalTabButtonMods() {
-    return [css.root];
-}
-
-export type VerticalTabButtonProps = ButtonProps & TabButtonMods;
-
-export const VerticalTabButton = withMods<VerticalTabButtonProps>(TabButton, applyVerticalTabButtonMods);

package/components/buttons/__tests__/Button.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Button } from '../Button';
-import { renderSnapshotWithContextAsync, SvgMock } from '@epam/uui-test-utils';
-
-describe('Button', () => {
-    it('should render with minimum props', async () => {
-        const tree = await renderSnapshotWithContextAsync(<Button />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should render with maximum props', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <Button
-                color="accent"
-                fill="outline"
-                caption="Click me"
-                onClick={ jest.fn }
-                icon={ SvgMock }
-                isDisabled={ false }
-                isDropdown={ true }
-                count={ 10 }
-                iconPosition="right"
-                onClear={ jest.fn }
-                isOpen
-                clearIcon={ SvgMock }
-            />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/buttons/__tests__/IconButton.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { IconButton } from '../IconButton';
-import { renderer } from '@epam/uui-test-utils';
-import { ReactComponent as CalendarIcon } from '../../../icons/calendar-18.svg';
-
-describe('IconButton', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<IconButton />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<IconButton color="info" onClick={ jest.fn } icon={ CalendarIcon } isDisabled={ false } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/buttons/__tests__/LinkButton.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { LinkButton } from '../LinkButton';
-import { renderer } from '@epam/uui-test-utils';
-import { ReactComponent as CalendarIcon } from '../../../icons/calendar-18.svg';
-
-describe('LinkButton', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<LinkButton />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<LinkButton onClick={ jest.fn } icon={ CalendarIcon } isDisabled={ false } isDropdown onClear={ jest.fn } size="30" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/buttons/__tests__/TabButton.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { TabButton } from '../TabButton';
-import { renderer } from '@epam/uui-test-utils';
-import { ReactComponent as calendarIcon } from '../../../icons/calendar-18.svg';
-
-describe('TabButton', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<TabButton />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<TabButton onClick={ jest.fn } icon={ calendarIcon } isDisabled={ false } withNotify={ true } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/buttons/__tests__/VerticalTabButton.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { VerticalTabButton } from '../VerticalTabButton';
-import { renderer } from '@epam/uui-test-utils';
-import { ReactComponent as calendarIcon } from '../../../icons/calendar-18.svg';
-
-describe('VerticalTabButton', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<VerticalTabButton />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<VerticalTabButton onClick={ jest.fn } icon={ calendarIcon } isDisabled={ false } withNotify={ true } />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});