@epam/uui 5.3.0-rc.1 → 5.3.0

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,24 @@
+import { ProgressBar as uuiProgressBar, IProgressBarProps } from '@epam/uui-components';
+import { withMods } from '@epam/uui-core';
+import css from './ProgressBar.module.scss';
+
+const defaultSize = '12';
+
+export interface ProgressBarMods {
+    size?: '12' | '18' | '24';
+    striped?: boolean;
+}
+
+export function applyProgressBarMods(mods: ProgressBarMods) {
+    const size = mods.size || defaultSize;
+
+    return [
+        css.root,
+        css[`size-${size}`],
+        mods.striped && css.striped,
+    ];
+}
+
+export const ProgressBar = withMods<IProgressBarProps, 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;
+
+export 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,36 @@
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { IHasCX } from '@epam/uui-core';
+import css from './StatusIndicator.module.scss';
+
+export type StatusIndicatorColors = 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+
+export interface StatusIndicatorProps extends IHasCX {
+    /** Component size. If omitted, 24 size will be used. */
+    size?: '24' | '18' | '12';
+    /** Component color. */
+    color?: StatusIndicatorColors;
+    /** Fill mode, solid is used by default */
+    fill?: 'solid' | 'outline';
+    /** Component caption. */
+    caption: string;
+}
+
+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,121 @@
+@use  '../../assets/styles/index' as *;
+
+.root {
+    --uui-tag-bg: var(--uui-color-10);
+    --uui-tag-bg-hover: var(--uui-color-20);
+    --uui-tag-caption: var(--uui-text-primary);
+    --uui-tag-fill: var(--uui-icon);
+    --uui-tag-fill-hover: var(--uui-icon-hover);
+
+    --uui-tag-border-radius: 30px;
+
+    --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: 0;
+
+        :global(.uui-count_indicator):not(:last-child) {
+            margin-right: 6px;
+        }
+
+        &:global(.-clickable) {
+            &:hover, &:active {
+                background-color: var(--uui-tag-bg-hover);
+                fill: var(--uui-tag-fill-hover);
+                cursor: pointer;
+            }
+
+            &:focus-visible {
+                @include focus-visible-effect(2px, null);
+            }
+        }
+
+        :global(.uui-caption) {
+            text-transform: none;
+            font-family: var(--uui-tag-font);
+            font-weight: var(--uui-tag-font-weight);
+            color: var(--uui-tag-caption);
+        }
+    }
+
+    &.size-18 {
+        min-height: 18px;
+        min-width: 18px;
+        padding-left: 3px;
+        padding-right: 3px;
+
+        :global(.uui-count_indicator):not(:last-child) {
+            margin-right: 3px;
+        }
+
+        :global(.uui-caption), :global(.uui-input) {
+            padding: 3px 3px;
+            line-height: 12px;
+            font-size: 12px;
+        }
+    }
+
+    &.size-24 {
+        @include button-horizontal-layout(24px, 0);
+        min-height: 24px;
+
+        :global(.uui-caption), :global(.uui-input) {
+            padding-top: 3px;
+            padding-bottom: 3px;
+            line-height: 18px;
+            font-size: 14px;
+        }
+    }
+
+    &.size-30 {
+        @include button-horizontal-layout(30px, 0);
+        min-height: 30px;
+
+        :global(.uui-caption), :global(.uui-input) {
+            padding-top: 6px;
+            padding-bottom: 6px;
+            line-height: 18px;
+            font-size: 14px;
+        }
+    }
+
+    &.size-36 {
+        @include button-horizontal-layout(36px, 0);
+        min-height: 36px;
+
+        :global(.uui-caption), :global(.uui-input) {
+            padding-top: 6px;
+            padding-bottom: 6px;
+            line-height: 24px;
+            font-size: 14px;
+        }
+    }
+
+    &.size-42 {
+        @include button-horizontal-layout(42px, 0);
+        min-height: 42px;
+
+        :global(.uui-caption), :global(.uui-input) {
+            padding-top: 9px;
+            padding-bottom: 9px;
+            line-height: 24px;
+            font-size: 16px;
+        }
+    }
+
+    &.size-48 {
+        @include button-horizontal-layout(48px, 0);
+        min-height: 48px;
+
+        :global(.uui-caption), :global(.uui-input) {
+            padding-top: 12px;
+            padding-bottom: 12px;
+            line-height: 24px;
+            font-size: 16px;
+        }
+    }
+}

package/components/widgets/Tag.tsx

@@ -0,0 +1,55 @@
+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 defaultSize = '36';
+
+const mapSize = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+
+export type TagSize = '18' | '24' | '30' | '36' | '42' | '48';
+
+const mapCountIndicatorSizes: Record<TagSize, CountIndicatorProps['size']> = {
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+
+export interface TagMods {
+    size?: TagSize;
+}
+
+export function applyTagMods(mods: TagMods) {
+    return [
+        css['size-' + (mods.size || defaultSize)],
+        css.root,
+        'uui-color-neutral',
+        'uui-tag',
+    ];
+}
+
+export type TagProps = ButtonProps & TagMods;
+
+export const Tag = withMods<ButtonProps, TagMods>(Button, applyTagMods, (props) => ({
+    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize].foldingArrow,
+    clearIcon: systemIcons[mapSize[props.size] || defaultSize].clear,
+    countIndicator: (countIndicatorProps) => (
+        <CountIndicator
+            { ...countIndicatorProps }
+            color="white"
+            size={ mapCountIndicatorSizes[props.size || defaultSize] }
+        />
+    ),
+}));

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();
+    });
+});

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Paginator } from '../Paginator';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('Paginator', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Paginator value={ null } onValueChange={ () => {} } totalPages={ 10 } size="24" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ProgressBar } from '../ProgressBar';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('ProgressBar', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<ProgressBar progress={ 20 } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly without label', () => {
+        const tree = renderer.create(<ProgressBar size="18" progress={ 56 } hideLabel />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly with custom label', () => {
+        const tree = renderer.create(<ProgressBar size="18" progress={ 56 } label="5/10" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly with striped animation', () => {
+        const tree = renderer.create(<ProgressBar size="18" progress={ 56 } striped />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Spinner } from '../Spinner';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('Spinner', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Spinner />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { StatusIndicator } from '../StatusIndicator';
+
+describe('StatusIndicator', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<StatusIndicator caption="Indicator" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly with props', () => {
+        const tree = renderer.create(
+            <StatusIndicator caption="Indicator" color="info" fill="outline" size="12" />,
+        ).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

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

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

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

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarStack should be rendered correctly 1`] = `
+<div
+  className="uui-flex-row root container align-items-center"
+  style={
+    Object {
+      "columnGap": undefined,
+      "rowGap": undefined,
+    }
+  }
+>
+  <div
+    className="uui-flex-row avatars container avatar-right container align-items-center"
+    role="group"
+    style={
+      Object {
+        "--overlap": "-9px",
+        "columnGap": undefined,
+        "rowGap": undefined,
+      }
+    }
+  >
+    <img
+      alt="avatar"
+      className="avatar"
+      height="36"
+      onError={[Function]}
+      src="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4"
+      width="36"
+    />
+    <img
+      alt="avatar"
+      className="avatar"
+      height="36"
+      onError={[Function]}
+      src="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4"
+      width="36"
+    />
+    <img
+      alt="avatar"
+      className="avatar"
+      height="36"
+      onError={[Function]}
+      src="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4"
+      width="36"
+    />
+  </div>
+  <div
+    className="avatarsCount"
+  >
+    +2
+  </div>
+</div>
+`;