@epam/uui 5.5.0 → 5.5.2

package/components/widgets/IndicatorBar.tsx

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,66 @@
+@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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,52 @@
+@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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,38 @@
+@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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,72 @@
+.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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,142 @@
+@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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,15 @@
+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();
+    });
+});