@epam/uui 5.5.0 → 5.5.2

package/components/tables/columnsConfigurationModal/index.ts

@@ -0,0 +1 @@
+export * from './ColumnsConfigurationModal';

package/components/tables/index.ts

@@ -0,0 +1,9 @@
+export * from './DataTableCell';
+export * from './DataTableRow';
+export * from './DataTableHeaderRow';
+export * from './DataTableHeaderCell';
+export * from './DataTable';
+export * from './DataRowsContainer';
+export * from './columnsConfigurationModal';
+export * from './ColumnHeaderDropdown';
+export * from './types';

package/components/tables/types.ts

@@ -0,0 +1,33 @@
+import { ControlSize } from '../types';
+
+interface BaseRowMods {
+    size?: ControlSize | '60';
+}
+
+export interface DataTableMods {
+    size?: ControlSize;
+    border?: boolean;
+    headerTextCase?: 'upper' | 'normal';
+}
+
+interface TableSizesAndPositionMods {
+    size?: ControlSize | '60';
+    padding?: '0' | '12' | '24';
+    alignActions?: 'top' | 'center';
+}
+
+export interface DataTableRowMods extends TableSizesAndPositionMods {
+    borderBottom?: any;
+}
+
+export interface DataTableCellMods extends TableSizesAndPositionMods {
+    border?: boolean;
+}
+
+export interface DataTableHeaderCellMods extends BaseRowMods {
+    textCase?: 'upper' | 'normal';
+}
+
+export interface DataTableHeaderRowMods extends BaseRowMods {
+    textCase?: 'upper' | 'normal';
+}

package/components/tables/variables.scss

@@ -0,0 +1,25 @@
+.uui-dt-vars {
+    --uui-dt-border: var(--uui-divider-light);
+
+    --uui-dt-cell-bg: transparent;
+    --uui-dt-cell-bg-resize: #EF55331F;
+    --uui-dt-cell-bg-invalid: var(--uui-error-10);
+    --uui-dt-cell-border-hover: var(--uui-control-border-hover);
+    --uui-dt-cell-border-focus: var(--uui-control-border-focus);
+
+    --uui-dt-row-bg: var(--uui-surface-main);
+    --uui-dt-row-bg-hover: var(--uui-surface-higher);
+    --uui-dt-row-bg-invalid: var(--uui-error-5);
+    --uui-dt-row-bg-selected: var(--uui-info-5);
+
+    --uui-dt-header-row-bg: var(--uui-surface-sunken);
+    --uui-dt-header-row-bg-hover: var(--uui-surface-highest);
+    --uui-dt-header-drop_marker: var(--uui-primary-50);
+
+    --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
+    --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
+    --uui-dt-right-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
+
+    --uui-dt-header-cell-font: var(--uui-font);
+    --uui-dt-header-cell-font-weight: 600;
+}

package/components/types.ts

@@ -0,0 +1,34 @@
+/**
+ * Defines the size of a control.
+ */
+export type ControlSize = '24' | '30' | '36' | '42' | '48';
+
+export interface SizeMod {
+    /**
+     * Defines component size.
+     */
+    size?: ControlSize;
+}
+
+/** Component can adjust visuals for different contexts: forms, tables cells, on in WYSIWYG UX */
+export interface IHasEditMode {
+    /**
+     * Visual mode for component:
+     * - form: default visuals, to use in forms.
+     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)
+     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover.
+     */
+    mode?: 'form' | 'cell' | 'inline';
+}
+
+/**
+ * Defines the different edit modes.
+ */
+export enum EditMode {
+    /** Defines edit mode for form */
+    FORM = 'form',
+    /** Defines edit mode for cell in tables */
+    CELL = 'cell',
+    /** Defines edit mode for inline elements */
+    INLINE = 'inline'
+}

package/components/typography/RichTextView.tsx

@@ -0,0 +1,17 @@
+import * as uuiComponents from '@epam/uui-components';
+import { withMods } from '@epam/uui-core';
+
+interface RichTextViewMods {
+    /**
+     * Defines component size.
+     * @default '14'
+     */
+    size?: '12' | '14' | '16';
+}
+
+export type RichTextViewProps = uuiComponents.RichTextViewProps & RichTextViewMods;
+
+export const RichTextView = withMods<uuiComponents.RichTextViewProps, RichTextViewMods>(
+    uuiComponents.RichTextView,
+    (mods: RichTextViewMods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`],
+);

package/components/typography/Text.module.scss

@@ -0,0 +1,54 @@
+@mixin text-color($color) {
+    &.uui-text.uui-color-#{$color} {
+        --uui-text: var(--uui-text-#{$color});
+    }
+}
+
+@mixin font-weight($weight) {
+    &.uui-font-weight-#{$weight} {
+        --uui-text-font-weight: #{$weight};
+    }
+}
+
+@mixin font-style($style) {
+    &.uui-font-style-#{$style} {
+        --uui-text-font-style: #{$style};
+    }
+}
+
+.root {
+    --uui-text: var(--uui-color-50);
+    --uui-text-font: var(--uui-font);
+    --uui-text-font-weight: 400;
+    --uui-text-font-style: normal;
+    //
+    font-family: var(--uui-text-font);
+    font-weight: var(--uui-text-font-weight);
+    font-style: var(--uui-text-font-style);
+    color: var(--uui-text);
+
+    &:global {
+        &.uui-text.uui-color-white {
+            --uui-text: var(--uui-neutral-0);
+        }
+
+        @include text-color('brand');
+        @include text-color('primary');
+        @include text-color('secondary');
+        @include text-color('disabled');
+        @include text-color('info');
+        @include text-color('warning');
+        @include text-color('critical');
+        @include text-color('success');
+
+        @include font-weight(200);
+        @include font-weight(300);
+        @include font-weight(400);
+        @include font-weight(600);
+        @include font-weight(700);
+        @include font-weight(900);
+
+        @include font-style('normal');
+        @include font-style('italic');
+    }
+}

package/components/typography/Text.tsx

@@ -0,0 +1,59 @@
+import { withMods } from '@epam/uui-core';
+import { getTextClasses, TextSettings } from '../../helpers';
+import * as uuiComponents from '@epam/uui-components';
+import css from './Text.module.scss';
+
+type TextColor = 'info' | 'warning' | 'critical' | 'success' | 'brand' | 'primary' | 'secondary' | 'disabled' | 'white';
+type TextSize = 'none' | '18' | '24' | '30' | '36' | '42' | '48';
+type TextFontStyle = 'normal' | 'italic';
+type TextFontWeight = '200' | '300' | '400' | '600' | '700' | '900';
+
+interface TextMods {
+    /**
+     * Defines text color.
+     * @default 'primary'
+     */
+    color?: TextColor;
+}
+
+export interface TextCoreProps extends uuiComponents.TextProps, TextSettings {
+    /**
+     * Defines text font weight value
+     * @default '400'
+     */
+    fontWeight?: TextFontWeight;
+    /**
+     * Determines the style of the text font.
+     * @default 'normal'
+     */
+    fontStyle?: TextFontStyle;
+    /**
+     * Defines text size
+     * @default '36'
+     */
+    size?: TextSize;
+}
+
+export interface TextProps extends TextCoreProps, TextMods {}
+
+function applyTextMods(mods: TextProps) {
+    const textClasses = getTextClasses(
+        {
+            size: mods.size || '36',
+            lineHeight: mods.lineHeight,
+            fontSize: mods.fontSize,
+        },
+        false,
+    );
+
+    return [
+        css.root,
+        'uui-text',
+        `uui-color-${mods.color || 'primary'}`,
+        `uui-font-weight-${mods.fontWeight || '400'}`,
+        `uui-font-style-${mods.fontStyle || 'normal'}`,
+        'uui-typography',
+    ].concat(textClasses);
+}
+
+export const Text = withMods<uuiComponents.TextProps, TextProps>(uuiComponents.Text, applyTextMods);

package/components/typography/TextPlaceholder.module.scss

@@ -0,0 +1,46 @@
+@keyframes skeleton_loading {
+    0% { transform: translateX(-300px); }
+    100% { transform: translateX(0); }
+}
+
+.root {
+    --uui-text_placeholder: var(--uui-skeleton);
+    --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-40) 0, var(--uui-neutral-30) 50%, var(--uui-neutral-40) 100%);
+    //
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.loading-word {
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+    font-family: 'Redacted', cursive; // https://fonts.google.com/specimen/Redacted
+    letter-spacing: -1px;
+    margin: 0 3px 3px 0;
+    color: var(--uui-text_placeholder);
+    vertical-align: 1px; // to fix vertical over-sizing of line
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &.animated-loading {
+        color: transparent;
+        background-clip: border-box;
+        -webkit-background-clip: text;
+        
+        &::before {
+            content: '';
+            position: absolute;
+            width: 400px;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background-image: var(--uui-text_placeholder-gradient);
+            background-repeat: repeat;
+            background-attachment: fixed;
+            animation: skeleton_loading 2s ease infinite;
+        }
+    }
+}

package/components/typography/TextPlaceholder.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { IHasCX, IHasRawProps } from '@epam/uui-core';
+import css from './TextPlaceholder.module.scss';
+import { PropsWithChildren } from 'react';
+
+export interface ITextPlaceholderProps extends IHasRawProps<React.HTMLAttributes<HTMLDivElement>>, IHasCX {
+    wordsCount?: number;
+    isNotAnimated?: boolean;
+}
+
+export type TextPlaceholderProps = PropsWithChildren<ITextPlaceholderProps>;
+
+export const TextPlaceholder: React.FunctionComponent<PropsWithChildren<ITextPlaceholderProps>> = (props) => {
+    const pattern = '&nbsp;';
+    const text = React.useMemo(() => {
+        const words = [];
+        for (let i = 0; i < (props.wordsCount || 1); i++) {
+            const lengthWord = Math.floor(Math.random() * 10 + 8);
+            words.push(pattern.repeat(lengthWord));
+        }
+        return words;
+    }, [props.wordsCount]);
+
+    return (
+        <div aria-busy={ true } className={ cx(css.root, 'uui-text-placeholder') } { ...props.rawProps }>
+            {text.map((it: string, index: number) => (
+                <span
+                    key={ index }
+                    className={ cx([
+                        props.cx, css.loadingWord, !props.isNotAnimated && css.animatedLoading,
+                    ]) }
+                    dangerouslySetInnerHTML={ { __html: it } }
+                />
+            ))}
+        </div>
+    );
+};

package/components/typography/__tests__/RichTextView.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { RichTextView } from '../RichTextView';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('RichTextView', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <RichTextView>
+                    <p>Test</p>
+                </RichTextView>,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <RichTextView size="16">
+                    <div>Test</div>
+                </RichTextView>,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/typography/__tests__/Text.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text } from '../Text';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('Text', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Text>Test</Text>).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer
+            .create(
+                <Text color="primary" size="48" fontSize="24" lineHeight="30" onClick={ jest.fn }>
+                    Test
+                </Text>,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/typography/__tests__/TextPlaceholder.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TextPlaceholder } from '../TextPlaceholder';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('TextPlaceholder', () => {
+    beforeEach(() => {
+        jest.spyOn(global.Math, 'random').mockReturnValue(0.5);
+    });
+
+    afterEach(() => {
+        jest.spyOn(global.Math, 'random').mockRestore();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<TextPlaceholder />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<TextPlaceholder wordsCount={ 5 } isNotAnimated />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/typography/__tests__/__snapshots__/RichTextView.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RichTextView should be rendered correctly 1`] = `
+<div
+  className="uui-typography uui-typography-size-14"
+>
+  <p>
+    Test
+  </p>
+</div>
+`;
+
+exports[`RichTextView should be rendered correctly 2`] = `
+<div
+  className="uui-typography uui-typography-size-16"
+>
+  <div>
+    Test
+  </div>
+</div>
+`;

package/components/typography/__tests__/__snapshots__/Text.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text should be rendered correctly 1`] = `
+<div
+  className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 container"
+>
+  Test
+</div>
+`;
+
+exports[`Text should be rendered correctly 2`] = `
+<div
+  className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-30 font-size-24 v-padding-9 container"
+  onClick={[Function]}
+>
+  Test
+</div>
+`;

package/components/typography/__tests__/__snapshots__/TextPlaceholder.test.tsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextPlaceholder should be rendered correctly 1`] = `
+<div
+  aria-busy={true}
+  className="root uui-text-placeholder"
+>
+  <span
+    className="loadingWord animatedLoading"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`TextPlaceholder should be rendered correctly 2`] = `
+<div
+  aria-busy={true}
+  className="root uui-text-placeholder"
+>
+  <span
+    className="loadingWord"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
+      }
+    }
+  />
+  <span
+    className="loadingWord"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
+      }
+    }
+  />
+  <span
+    className="loadingWord"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
+      }
+    }
+  />
+  <span
+    className="loadingWord"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
+      }
+    }
+  />
+  <span
+    className="loadingWord"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
+      }
+    }
+  />
+</div>
+`;

package/components/typography/index.ts

@@ -0,0 +1,3 @@
+export * from './Text';
+export * from './TextPlaceholder';
+export * from './RichTextView';

package/components/widgets/AvatarStack.module.scss

@@ -0,0 +1,36 @@
+@use  '../../assets/styles/effects' as *;
+
+.root {
+    --uui-avatar_stack-font: var(--uui-font);
+    --uui-avatar_stack-font-weight: 600;
+    //
+    :global(.avatars) {
+        padding-right: 12px;
+
+        &>* {
+            border-radius: 50%;
+            border: 1px solid white;
+        }
+
+        :global(.-clickable) {
+            &:focus-visible {
+                @include focus-visible-effect(2px, 50%);
+            }
+
+            &:focus-visible, &:hover {
+                position: relative;
+                z-index: 1;
+
+            }
+        }
+    }
+
+    :global(.avatarsCount) {
+        color: var(--uui-text-primary);
+        margin-left: 3px;
+        line-height: 1;
+        font-family: var(--uui-avatar_stack-font);
+        font-weight: var(--uui-avatar_stack-font-weight);
+        font-size: 14px;
+    }
+}

package/components/widgets/AvatarStack.tsx

@@ -0,0 +1,5 @@
+import { AvatarStack as uuiAvatarStack, AvatarStackProps } from '@epam/uui-components';
+import { withMods } from '@epam/uui-core';
+import css from './AvatarStack.module.scss';
+
+export const AvatarStack = withMods<AvatarStackProps>(uuiAvatarStack, () => [css.root]);