@epam/uui 5.3.0 → 5.4.0

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

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

@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button should render with maximum props 1`] = `
-<button
-  aria-disabled={false}
-  aria-expanded={true}
-  aria-haspopup={true}
-  className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-accent uui-size-36"
-  onClick={[Function]}
-  tabIndex={0}
-  type="button"
->
-  <div
-    className="uui-caption"
-  >
-    Click me
-  </div>
-  <div
-    className="root uui-count_indicator size-24 uui-color-white"
-  >
-    10
-  </div>
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className="flipY"
-    />
-  </div>
-  <div
-    className="container uui-icon uui-enabled -clickable -clickable"
-    onClick={[Function]}
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;
-
-exports[`Button should render with minimum props 1`] = `
-<button
-  className="container uui-button-box uui-enabled root uui-button uui-fill-solid uui-color-primary uui-size-36"
-  onClick={[Function]}
-  tabIndex={-1}
-  type="button"
-/>
-`;

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

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconButton should be rendered correctly 1`] = `
-<button
-  className="container uui-button-box uui-enabled uui-icon_button uui-color-neutral root"
-  onClick={[Function]}
-  tabIndex={-1}
-  type="button"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  />
-</button>
-`;
-
-exports[`IconButton should be rendered correctly with props 1`] = `
-<button
-  aria-disabled={false}
-  className="container uui-button-box uui-enabled -clickable uui-icon_button uui-color-info root"
-  onClick={[Function]}
-  tabIndex={0}
-  type="button"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;

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

@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LinkButton should be rendered correctly 1`] = `
-<button
-  className="container uui-button-box uui-enabled uui-link_button root uui-size-36 uui-no-left-icon uui-no-right-icon uui-color-primary"
-  onClick={[Function]}
-  tabIndex={-1}
-  type="button"
-/>
-`;
-
-exports[`LinkButton should be rendered correctly with props 1`] = `
-<button
-  aria-disabled={false}
-  aria-haspopup={true}
-  className="container uui-button-box uui-enabled -clickable uui-link_button root uui-size-30 uui-has-left-icon uui-has-right-icon uui-color-primary"
-  onClick={[Function]}
-  tabIndex={0}
-  type="button"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-  <div
-    className="container uui-icon uui-enabled -clickable -clickable"
-    onClick={[Function]}
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;

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

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TabButton should be rendered correctly 1`] = `
-<button
-  className="container uui-button-box uui-enabled root uui-tab-button size-48 uui-no-left-icon uui-no-right-icon"
-  onClick={[Function]}
-  role="tab"
-  tabIndex={-1}
-  type="button"
-/>
-`;
-
-exports[`TabButton should be rendered correctly with props 1`] = `
-<button
-  aria-disabled={false}
-  className="container uui-button-box uui-enabled -clickable root uui-tab-button size-48 withNotify uui-has-left-icon uui-no-right-icon"
-  onClick={[Function]}
-  role="tab"
-  tabIndex={0}
-  type="button"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;

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

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VerticalTabButton should be rendered correctly 1`] = `
-<button
-  className="container uui-button-box uui-enabled root uui-tab-button size-48 uui-no-left-icon uui-no-right-icon root"
-  onClick={[Function]}
-  role="tab"
-  tabIndex={-1}
-  type="button"
-/>
-`;
-
-exports[`VerticalTabButton should be rendered correctly with props 1`] = `
-<button
-  aria-disabled={false}
-  className="container uui-button-box uui-enabled -clickable root uui-tab-button size-48 withNotify uui-has-left-icon uui-no-right-icon root"
-  onClick={[Function]}
-  role="tab"
-  tabIndex={0}
-  type="button"
->
-  <div
-    className="container uui-icon uui-enabled"
-    style={Object {}}
-  >
-    <svg
-      className=""
-    />
-  </div>
-</button>
-`;

package/components/buttons/helper.ts

@@ -1,22 +0,0 @@
-import { ButtonProps } from '@epam/uui-components';
-
-export function getIconClass(props: ButtonProps) {
-    const classList = {
-        'has-left-icon': false,
-        'has-right-icon': false,
-    };
-
-    if (props.onClear) {
-        classList['has-right-icon'] = true;
-    }
-
-    if (props.isDropdown) {
-        classList[props.dropdownIconPosition === 'left' ? 'has-left-icon' : 'has-right-icon'] = true;
-    }
-
-    if (props.icon) {
-        classList[props.iconPosition !== 'right' ? 'has-left-icon' : 'has-right-icon'] = true;
-    }
-
-    return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
-}

package/components/buttons/index.ts

@@ -1,5 +0,0 @@
-export * from './Button';
-export * from './IconButton';
-export * from './LinkButton';
-export * from './TabButton';
-export * from './VerticalTabButton';