@epam/uui 5.5.2 → 5.5.3

package/components/widgets/IndicatorBar.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { IHasCX, IHasRawProps } from '@epam/uui-core';
-import { ProgressBar } from './ProgressBar';
-import { IndeterminateBar } from './IndeterminateBar';
-import css from './IndicatorBar.module.scss';
-
-interface IIndicatorProps extends IHasCX, IHasRawProps<HTMLDivElement> {
-    progress?: number;
-}
-
-export const IndicatorBar = React.forwardRef<HTMLDivElement, IIndicatorProps>((props, ref) => {
-    const { progress } = props;
-
-    return progress || progress === 0 ? (
-        <ProgressBar ref={ ref } progress={ progress } cx={ cx(css.root, props.cx) } hideLabel />
-    ) : (
-        <IndeterminateBar ref={ ref } cx={ cx(css.root, props.cx) } />
-    );
-});

package/components/widgets/Paginator.module.scss

@@ -1,66 +0,0 @@
-@mixin set-size($padding-left, $padding-right, $min-width) {
-    &:global(.uui-button-box) {
-        min-width: $min-width;
-    }
-
-    :global(.uui-caption) {
-        font-family: var(--uui-pagination-font);
-        font-weight: var(--uui-pagination-font-weight, normal);
-        font-size: 14px;
-        padding-left: $padding-left;
-        padding-right: $padding-right;
-    }
-
-    &:first-of-type {
-        margin-right: 6px;
-    }
-
-    &:last-of-type {
-        margin-left: 6px;
-    }
-}
-
-.root {
-    --uui-pagination-font: var(--uui-font);
-    --uui-pagination-font-weight: 400;
-    //
-    display: flex;
-    flex-direction: row;
-
-    .spacer {
-        color: var(--uui-text-primary);
-    }
-
-    .mode-ghost {
-        color: var(--uui-text-primary);
-
-        &:hover {
-            color: var(--uui-primary-50);
-        }
-    }
-
-    .size-24 {
-        @include set-size(2px, 2px, 24px);
-
-        &.spacer {
-            min-width: 28px;
-        }
-    }
-
-    .size-30 {
-        @include set-size(5px, 5px, 30px);
-
-        &.spacer {
-            min-width: 34px;
-        }
-    }
-
-    .navigation-size-24 {
-        @include set-size(0, 0, 24px);
-    }
-
-    .navigation-size-30 {
-        @include set-size(0, 0, 30px);
-    }
-}
-

package/components/widgets/Paginator.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { Paginator as UuiPaginator, PaginatorRenderParams, PaginatorProps } from '@epam/uui-components';
-import { Button } from '../buttons/Button';
-import css from './Paginator.module.scss';
-import { ReactComponent as ArrowLeftIcon_24 } from '@epam/assets/icons/common/navigation-chevron-left-12.svg';
-import { ReactComponent as ArrowRightIcon_24 } from '@epam/assets/icons/common/navigation-chevron-right-12.svg';
-import { ReactComponent as ArrowLeftIcon_30 } from '@epam/assets/icons/common/navigation-chevron-left-18.svg';
-import { ReactComponent as ArrowRightIcon_30 } from '@epam/assets/icons/common/navigation-chevron-right-18.svg';
-
-export function Paginator(props: PaginatorProps) {
-    const renderPaginator = (params: PaginatorRenderParams) => (
-        <nav role="navigation" className={ cx(css.root, 'uui-paginator') } { ...params.rawProps }>
-            <Button
-                cx={ css[`navigation-size-${params.size ?? '30'}`] }
-                size={ params.size }
-                icon={ params.size === '30' ? ArrowLeftIcon_30 : ArrowLeftIcon_24 }
-                onClick={ params.goToPrev }
-                isDisabled={ params.isFirst }
-                fill="outline"
-                color="secondary"
-            />
-            {params.pages.map((page, index) => {
-                if (page.type === 'spacer') {
-                    return (
-                        <Button
-                            cx={ cx(css[`size-${params.size ?? '30'}`], css.spacer) }
-                            size={ params.size }
-                            key={ `${index}_spacer` }
-                            caption="..."
-                            fill="ghost"
-                            color="secondary"
-                            tabIndex={ -1 }
-                        />
-                    );
-                } else {
-                    return (
-                        <Button
-                            cx={ cx(css[`size-${params.size ?? '30'}`], css[`mode-${!page.isActive && 'ghost'}`]) }
-                            size={ params.size }
-                            key={ page.pageNumber }
-                            caption={ page.pageNumber }
-                            onClick={ () => page.onClick?.() }
-                            rawProps={ { 'aria-current': page.isActive } }
-                            fill={ (page.isActive && 'outline') || 'ghost' }
-                            color="primary"
-                        />
-                    );
-                }
-            })}
-            <Button
-                cx={ css[`navigation-size-${params.size ?? '30'}`] }
-                size={ params.size }
-                icon={ params.size === '30' ? ArrowRightIcon_30 : ArrowRightIcon_24 }
-                onClick={ params.goToNext }
-                isDisabled={ params.isLast }
-                fill="outline"
-                color="secondary"
-            />
-        </nav>
-    );
-
-    return <UuiPaginator { ...props } render={ renderPaginator } />;
-}

package/components/widgets/ProgressBar.module.scss

@@ -1,52 +0,0 @@
-@mixin barSizes($height, $fontSize) {
-    height: $height + px;
-    font-size: $fontSize + px;
-    line-height: $height + px;
-}
-
-.root {
-    --uui-progress_bar-bg: var(--uui-secondary-20);
-    --uui-progress_bar-progress-bg: var(--uui-primary-50);
-    --uui-progress_bar-label: var(--uui-neutral-0);
-    --uui-progress_bar-top-label: var(--uui-neutral-80);
-    --uui-progress_bar-border-radius: var(--uui-border-radius);
-
-    --uui-progress_bar-font: var(--uui-font);
-    --uui-progress_bar-font-weight: 400;
-    //
-    background-color: var(--uui-progress_bar-bg);
-    font-family: var(--uui-progress_bar-font);
-    font-weight: var(--uui-progress_bar-font-weight);
-    color: var(--uui-progress_bar-label);
-    border-radius: var(--uui-progress_bar-border-radius);
-
-    :global(.bar) {
-        background-color: var(--uui-progress_bar-progress-bg);
-    }
-
-    :global(.topLabel) {
-        color: var(--uui-progress_bar-top-label);
-    }
-
-    &.striped :global(.bar) {
-        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
-        background-size: 1rem 1rem;
-        animation: animate-stripes 1s linear infinite;
-    }
-}
-
-@keyframes animate-stripes {
-    0% { background-position-x: 1rem;}
-}
-
-.size-12 {
-    @include barSizes(12, 12);
-}
-
-.size-18 {
-    @include barSizes(18, 14);
-}
-
-.size-24 {
-    @include barSizes(24, 16);
-}

package/components/widgets/ProgressBar.tsx

@@ -1,33 +0,0 @@
-import { ProgressBar as uuiProgressBar, IProgressBarProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import css from './ProgressBar.module.scss';
-
-const DEFAULT_SIZE = '12';
-
-interface ProgressBarMods {
-    /**
-     * Defines component size.
-     * @default '12'
-     */
-    size?: '12' | '18' | '24';
-    /**
-     * To show ProgressBar with striped animation. The striped progress bar has no label.
-     */
-    striped?: boolean;
-}
-
-export type ProgressBarProps = IProgressBarProps & ProgressBarMods;
-
-function applyProgressBarMods(mods: ProgressBarMods) {
-    const size = mods.size || DEFAULT_SIZE;
-
-    return [
-        css.root,
-        css[`size-${size}`],
-        mods.striped && css.striped,
-    ];
-}
-
-export const ProgressBar = withMods<ProgressBarProps, ProgressBarMods>(uuiProgressBar, applyProgressBarMods, (props) => ({
-    hideLabel: props.hideLabel || props.striped,
-}));

package/components/widgets/Spinner.module.scss

@@ -1,38 +0,0 @@
-@keyframes uui-spinner {
-    0% { transform: translateY(0); }
-    66% { transform: translateY(15px); }
-    100% { transform: translateY(0); }
-}
-
-.root {
-    --uui-spinner: var(--uui-primary-50);
-    //
-    &:global(.uui-spinner-container) {
-        transition: all 0.3s;
-
-        :global(.uui-spinner-animation) {
-            width: 90px;
-            height: 30px;
-        }
-
-        :global(.uui-spinner-dot) {
-            width: 10px;
-            height: 10px;
-            margin: 0 3px;
-            border-radius: 100%;
-            animation: uui-spinner 0.8s infinite ease-in-out both;
-        }
-
-        :global(.uui-spinner-dot-1) {
-            animation-delay: -0.2s;
-        }
-
-        :global(.uui-spinner-dot-2) {
-            animation-delay: -0.1s;
-        }
-    }
-
-    :global(.uui-spinner-dot) {
-        background-color: var(--uui-spinner);
-    }
-}

package/components/widgets/Spinner.tsx

@@ -1,11 +0,0 @@
-import { Spinner as uuiSpinner, SpinnerProps as uuiSpinnerProps } from '@epam/uui-components';
-import { withMods } from '@epam/uui-core';
-import css from './Spinner.module.scss';
-
-export type SpinnerProps = uuiSpinnerProps;
-
-function applySpinnerMods() {
-    return [css.root, 'uui-spinner'];
-}
-
-export const Spinner = withMods<uuiSpinnerProps>(uuiSpinner, applySpinnerMods);

package/components/widgets/StatusIndicator.module.scss

@@ -1,72 +0,0 @@
-.root {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: left;
-    font-family: var(--uui-font);
-    font-weight: normal;
-    color: var(--uui-text-primary);
-
-    :global(.uui-status_indicator_dot) {
-        box-sizing: border-box;
-        border-radius: 50%;
-        background-color: var(--uui-color-50);
-        margin-right: 6px;
-    }
-
-    :global(.uui-status_indicator_caption) {
-        padding: 0;
-        margin: 0;
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 18px;
-    }
-
-    &:global(.uui-color-neutral) {
-        :global(.uui-status_indicator_dot) {
-            background-color: var(--uui-neutral-60);
-        }
-    }
-
-    &:global(.uui-fill-outline) {
-        :global(.uui-status_indicator_dot) {
-            background-color: color-mix(in srgb, var(--uui-color-50) 20%, transparent);
-            border: 1px solid var(--uui-color-50);
-        }
-
-        &:global(.uui-color-neutral) {
-            :global(.uui-status_indicator_dot) {
-                background-color: color-mix(in srgb, var(--uui-neutral-60) 20%, transparent);
-                border: 1px solid var(--uui-neutral-60);
-            }
-        }
-    }
-
-    &.size-12 {
-        :global(.uui-status_indicator_dot) {
-            margin-right: 4px;
-            width: 4px;
-            height: 4px;
-        }
-
-        :global(.uui-status_indicator_caption) {
-            font-size: 12px;
-            line-height: 12px;
-        }
-    }
-
-    &.size-18 {
-        :global(.uui-status_indicator_dot) {
-            width: 8px;
-            height: 8px;
-        }
-    }
-
-    &.size-24 {
-        :global(.uui-status_indicator_dot) {
-            width: 12px;
-            height: 12px;
-        }
-    }
-}

package/components/widgets/StatusIndicator.tsx

@@ -1,50 +0,0 @@
-import React, { forwardRef } from 'react';
-import cx from 'classnames';
-import { IHasCX } from '@epam/uui-core';
-import css from './StatusIndicator.module.scss';
-
-type StatusIndicatorColor = 'neutral' | 'info' | 'success' | 'warning' | 'critical';
-
-type StatusIndicatorMods = {
-    /**
-     * Component color.
-     * @default 'neutral'
-     */
-    color?: StatusIndicatorColor;
-};
-
-export type StatusIndicatorCoreProps = IHasCX & {
-    /**
-     * Component size. If omitted, 24 size will be used.
-     * @default '24'
-     */
-    size?: '24' | '18' | '12';
-    /**
-     * Fill mode, solid is used by default
-     * @default 'solid'
-     */
-    fill?: 'solid' | 'outline';
-    /** Component caption. */
-    caption: string;
-};
-
-export type StatusIndicatorProps = StatusIndicatorCoreProps & StatusIndicatorMods;
-
-export const StatusIndicator = forwardRef<HTMLDivElement, StatusIndicatorProps>((props, ref) => {
-    return (
-        <div
-            ref={ ref }
-            className={ cx([
-                css.root,
-                css[`size-${props.size || 24}`],
-                'uui-status_indicator',
-                `uui-color-${props.color || 'neutral'}`,
-                `uui-fill-${props.fill || 'solid'}`,
-                props.cx,
-            ]) }
-        >
-            <div className="uui-status_indicator_dot"></div>
-            <p className="uui-status_indicator_caption">{props.caption}</p>
-        </div>
-    );
-});

package/components/widgets/Tag.module.scss

@@ -1,142 +0,0 @@
-@use '../../assets/styles/index' as *;
-
-.root {
-    --uui-tag-bg: var(--uui-color-50);
-    --uui-tag-bg-hover: var(--uui-color-60);
-    --uui-tag-border: var(--uui-color-50);
-    --uui-tag-border-hover: var(--uui-color-60);
-    --uui-tag-caption: var(--uui-color-contrast);
-    --uui-tag-fill: var(--uui-color-contrast);
-
-    --uui-tag-border-radius: var(--uui-border-radius);
-
-    --uui-tag-font: var(--uui-font);
-    --uui-tag-font-weight: 400;
-    //
-    &:global(.uui-button-box) {
-        border-radius: var(--uui-tag-border-radius);
-        background-color: var(--uui-tag-bg);
-        fill: var(--uui-tag-fill);
-        border: 1px solid var(--uui-tag-border);
-
-        :global(.uui-count_indicator):not(:last-child) {
-            margin-right: 6px;
-        }
-
-        &:global(.-clickable) {
-            &:hover, &:active {
-                background-color: var(--uui-tag-bg-hover);
-                border-color: var(--uui-tag-border-hover);
-                cursor: pointer;
-            }
-
-            &:focus-visible {
-                @include focus-visible-effect(2px, null);
-            }
-        }
-
-        :global(.uui-caption) {
-            font-family: var(--uui-tag-font);
-            font-weight: var(--uui-tag-font-weight);
-            color: var(--uui-tag-caption);
-        }
-    }
-
-    &:global(.uui-fill-solid) {
-        :global(.uui-count_indicator) {
-            --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
-            --uui-count_indicator-border: var(--uui-neutral-30);
-        }
-    }
-
-    &:global(.uui-fill-outline) {
-        --uui-tag-bg: var(--uui-color-5);
-        --uui-tag-bg-hover: var(--uui-color-10);
-        --uui-tag-border: var(--uui-color-20);
-        --uui-tag-border-hover: var(--uui-color-20);
-        --uui-tag-caption: var(--uui-neutral-80);
-        --uui-tag-fill: var(--uui-neutral-60);
-
-        :global(.uui-count_indicator) {
-            --uui-count_indicator-bg: var(--uui-neutral-0);
-            --uui-count_indicator-border: var(--uui-neutral-40);
-            --uui-count_indicator-caption: var(--uui-neutral-70);
-        }
-    }
-
-    &.size-18 {
-        min-height: 18px;
-        min-width: 18px;
-        padding: 1px 2px;
-
-        :global(.uui-count_indicator):not(:last-child) {
-            margin-right: 3px;
-        }
-
-        :global(.uui-caption) {
-            padding: 0 3px;
-            line-height: 14px;
-            font-size: 12px;
-        }
-    }
-
-    &.size-24 {
-        min-width: 24px;
-        min-height: 24px;
-        padding: 2px;
-
-        :global(.uui-caption) {
-            padding: 0 3px;
-            line-height: 18px;
-            font-size: 12px;
-        }
-    }
-
-    &.size-30 {
-        min-width: 30px;
-        min-height: 30px;
-        padding: 5px 2px;
-
-        :global(.uui-caption) {
-            padding: 0 3px;
-            line-height: 18px;
-            font-size: 14px;
-        }
-    }
-
-    &.size-36 {
-        min-width: 36px;
-        min-height: 36px;
-        padding: 8px 5px;
-
-        :global(.uui-caption) {
-            padding: 0 3px;
-            line-height: 18px;
-            font-size: 14px;
-        }
-    }
-
-    &.size-42 {
-        min-width: 42px;
-        min-height: 42px;
-        padding: 8px 5px;
-
-        :global(.uui-caption) {
-            padding: 0 6px;
-            line-height: 24px;
-            font-size: 16px;
-        }
-    }
-
-    &.size-48 {
-        min-width: 48px;
-        min-height: 48px;
-        padding: 11px 5px;
-
-        :global(.uui-caption) {
-            padding: 0 6px;
-            line-height: 24px;
-            font-size: 16px;
-        }
-    }
-}

package/components/widgets/Tag.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { withMods } from '@epam/uui-core';
-import { Button, ButtonProps } from '@epam/uui-components';
-import { CountIndicator, CountIndicatorProps } from './CountIndicator';
-import { systemIcons } from '../../icons/icons';
-import css from './Tag.module.scss';
-
-const DEFAULT_SIZE = '36';
-
-const mapSize = {
-    48: '48',
-    42: '48',
-    36: '36',
-    30: '30',
-    24: '30',
-    18: '18',
-};
-
-const mapCountIndicatorSizes: Record<TagCoreProps['size'], CountIndicatorProps['size']> = {
-    18: '12',
-    24: '18',
-    30: '18',
-    36: '18',
-    42: '24',
-    48: '24',
-};
-
-interface TagMods {
-    /**
-     * Defines component color.
-     * @default 'neutral'
-     */
-    color?: 'info' | 'success' | 'warning' | 'critical' | 'neutral';
-}
-
-/** Represents the Core properties of the Tag component. */
-export type TagCoreProps = ButtonProps & {
-    /**
-     * Defines component size.
-     * @default '36'
-     */
-    size?: '18' | '24' | '30' | '36' | '42' | '48';
-    /**
-     * Defines component fill style.
-     * @default 'solid'
-     */
-    fill?: 'solid' | 'outline';
-};
-
-/** Represents the properties of the Tag component. */
-export type TagProps = TagCoreProps & TagMods;
-
-function applyTagMods(props: TagProps) {
-    return [
-        css['size-' + (props.size || DEFAULT_SIZE)],
-        css.root,
-        `uui-color-${props.color || 'neutral'}`,
-        `uui-fill-${props.fill || 'solid'}`,
-        'uui-tag',
-    ];
-}
-
-export const Tag = withMods<TagCoreProps, TagMods>(Button, applyTagMods, (props) => ({
-    dropdownIcon: systemIcons[mapSize[props.size] || DEFAULT_SIZE].foldingArrow,
-    clearIcon: systemIcons[mapSize[props.size] || DEFAULT_SIZE].clear,
-    countIndicator: (countIndicatorProps) => (
-        <CountIndicator
-            { ...countIndicatorProps }
-            color={ (!props.color || props.color === 'neutral') ? 'white' : props.color }
-            size={ mapCountIndicatorSizes[props.size || DEFAULT_SIZE] }
-        />
-    ),
-}));

package/components/widgets/__tests__/AvatarStack.test.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { AvatarStack } from '../AvatarStack';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('AvatarStack', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer
-            .create(
-                <AvatarStack
-                    avatarsCount={ 3 }
-                    urlArray={ Array(5).fill('https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4') }
-                    avatarSize="36"
-                    direction="right"
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/widgets/__tests__/Badge.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Badge } from '../Badge';
-import { renderer } from '@epam/uui-test-utils';
-import CalendarIcon from '../../../icons/calendar-18.svg';
-
-describe('Badge', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<Badge />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer
-            .create(
-                <Badge
-                    caption="Test badge"
-                    fill="semitransparent"
-                    color="success"
-                    icon={ CalendarIcon }
-                    count={ 12 }
-                    onIconClick={ () => {} }
-                    onClick={ () => {} }
-                    onClear={ () => {} }
-                    size="36"
-                />,
-            )
-            .toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/components/widgets/__tests__/IndeterminateBar.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { IndeterminateBar } from '../IndeterminateBar';
-import { renderer } from '@epam/uui-test-utils';
-
-describe('ProgressBar', () => {
-    it('should be rendered correctly', () => {
-        const tree = renderer.create(<IndeterminateBar />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should be rendered correctly with props', () => {
-        const tree = renderer.create(<IndeterminateBar size="24" />).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});