@epam/uui 5.5.1 → 5.5.2

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,19 @@
+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"
+            rawProps={ {
+                id: '123',
+                'data-my_attr': 'value',
+            } }
+        />).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>
+`;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge should be rendered correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled uui-badge root size-36 uui-fill-solid uui-color-info"
+  onClick={[Function]}
+  tabIndex={-1}
+  type="button"
+/>
+`;
+
+exports[`Badge should be rendered correctly with props 1`] = `
+<button
+  className="container uui-button-box uui-enabled -clickable uui-badge root size-36 uui-fill-semitransparent uui-color-success"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled -clickable"
+    onClick={[Function]}
+    style={Object {}}
+  >
+    <SvgrURL
+      className=""
+    />
+  </div>
+  <div
+    className="uui-caption"
+  >
+    Test badge
+  </div>
+  <div
+    className="root uui-count_indicator size-18"
+  >
+    12
+  </div>
+  <div
+    className="container uui-icon uui-enabled -clickable -clickable"
+    onClick={[Function]}
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar should be rendered correctly 1`] = `
+<div
+  className="uui-indeterminate_bar root size-12"
+>
+  <div
+    className="progressBar"
+  />
+</div>
+`;
+
+exports[`ProgressBar should be rendered correctly with props 1`] = `
+<div
+  className="uui-indeterminate_bar root size-24"
+>
+  <div
+    className="progressBar"
+  />
+</div>
+`;

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IndicatorBar should be rendered correctly 1`] = `
+<div
+  className="uui-indeterminate_bar root root size-12"
+>
+  <div
+    className="progressBar"
+  />
+</div>
+`;
+
+exports[`IndicatorBar should be rendered correctly with props 1`] = `
+<div
+  className="uui-progress_bar root size-12 root container"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={20}
+    className="bar bar"
+    role="progressbar"
+    style={
+      Object {
+        "width": "20%",
+      }
+    }
+  />
+</div>
+`;

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

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paginator should be rendered correctly 1`] = `
+<nav
+  className="root uui-paginator"
+  data-my_attr="value"
+  id="123"
+  role="navigation"
+>
+  <button
+    aria-disabled={true}
+    className="container uui-button-box uui-disabled -clickable root uui-button uui-fill-outline uui-color-secondary uui-size-24 navigation-size-24"
+    onClick={[Function]}
+    tabIndex={-1}
+    type="button"
+  >
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </button>
+  <button
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-24 size-24 mode-ghost"
+    onClick={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      1
+    </div>
+  </button>
+  <button
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-24 size-24 mode-ghost"
+    onClick={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      2
+    </div>
+  </button>
+  <button
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-24 size-24 mode-ghost"
+    onClick={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      3
+    </div>
+  </button>
+  <button
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-24 size-24 mode-ghost"
+    onClick={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      4
+    </div>
+  </button>
+  <button
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-24 size-24 mode-ghost"
+    onClick={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      5
+    </div>
+  </button>
+  <button
+    className="container uui-button-box uui-enabled root uui-button uui-fill-ghost uui-color-secondary uui-size-24 size-24 spacer"
+    onClick={[Function]}
+    tabIndex={-1}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      ...
+    </div>
+  </button>
+  <button
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-24 size-24 mode-ghost"
+    onClick={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      10
+    </div>
+  </button>
+  <button
+    aria-disabled={false}
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-secondary uui-size-24 navigation-size-24"
+    onClick={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </button>
+</nav>
+`;

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

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar should be rendered correctly 1`] = `
+<div
+  className="uui-progress_bar root size-12 container"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={20}
+    className="bar bar"
+    role="progressbar"
+    style={
+      Object {
+        "width": "20%",
+      }
+    }
+  />
+  <div
+    className="label label"
+  >
+    20%
+  </div>
+  <div
+    className="label topLabel"
+    style={
+      Object {
+        "clipPath": "inset(0 0 0 20%)",
+      }
+    }
+  >
+    20%
+  </div>
+</div>
+`;
+
+exports[`ProgressBar should be rendered correctly with custom label 1`] = `
+<div
+  className="uui-progress_bar root size-18 container"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={56}
+    className="bar bar"
+    role="progressbar"
+    style={
+      Object {
+        "width": "56%",
+      }
+    }
+  />
+  <div
+    className="label label"
+  >
+    5/10
+  </div>
+  <div
+    className="label topLabel"
+    style={
+      Object {
+        "clipPath": "inset(0 0 0 56%)",
+      }
+    }
+  >
+    5/10
+  </div>
+</div>
+`;
+
+exports[`ProgressBar should be rendered correctly with striped animation 1`] = `
+<div
+  className="uui-progress_bar root size-18 striped container"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={56}
+    className="bar bar"
+    role="progressbar"
+    style={
+      Object {
+        "width": "56%",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`ProgressBar should be rendered correctly without label 1`] = `
+<div
+  className="uui-progress_bar root size-18 container"
+>
+  <div
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={56}
+    className="bar bar"
+    role="progressbar"
+    style={
+      Object {
+        "width": "56%",
+      }
+    }
+  />
+</div>
+`;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner should be rendered correctly 1`] = `
+<div
+  className="container uui-spinner-container root uui-spinner"
+>
+  <div
+    className="uui-spinner-animation"
+  >
+    <div
+      className="uui-spinner-dot uui-spinner-dot-1"
+    />
+    <div
+      className="uui-spinner-dot uui-spinner-dot-2"
+    />
+    <div
+      className="uui-spinner-dot uui-spinner-dot-3"
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusIndicator should be rendered correctly 1`] = `
+<div
+  className="root size-24 uui-status_indicator uui-color-neutral uui-fill-solid"
+>
+  <div
+    className="uui-status_indicator_dot"
+  />
+  <p
+    className="uui-status_indicator_caption"
+  >
+    Indicator
+  </p>
+</div>
+`;
+
+exports[`StatusIndicator should be rendered correctly with props 1`] = `
+<div
+  className="root size-12 uui-status_indicator uui-color-info uui-fill-outline"
+>
+  <div
+    className="uui-status_indicator_dot"
+  />
+  <p
+    className="uui-status_indicator_caption"
+  >
+    Indicator
+  </p>
+</div>
+`;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag should be rendered correctly 1`] = `
+<button
+  className="container uui-button-box uui-enabled size-36 root uui-color-neutral uui-fill-solid uui-tag"
+  onClick={[Function]}
+  tabIndex={-1}
+  type="button"
+/>
+`;
+
+exports[`Tag should be rendered correctly with props 1`] = `
+<button
+  className="container uui-button-box uui-enabled -clickable size-36 root uui-color-neutral uui-fill-solid uui-tag"
+  onClick={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <div
+    className="container uui-icon uui-enabled -clickable"
+    onClick={[Function]}
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+  <div
+    className="uui-caption"
+  >
+    Test badge
+  </div>
+  <div
+    className="root uui-count_indicator size-18 uui-color-white"
+  >
+    12
+  </div>
+  <div
+    className="container uui-icon uui-enabled -clickable -clickable"
+    onClick={[Function]}
+    style={Object {}}
+  >
+    <svg
+      className=""
+    />
+  </div>
+</button>
+`;

package/components/widgets/index.ts

@@ -0,0 +1,12 @@
+export { Avatar } from '@epam/uui-components';
+export * from './AvatarStack';
+export * from './Badge';
+export * from './Tag';
+export * from './Spinner';
+export * from './Paginator';
+export * from './IndeterminateBar';
+export * from './IndicatorBar';
+export * from './ProgressBar';
+export * from './CountIndicator';
+export * from './StatusIndicator';
+export * from './DataRowAddons';

package/globals.d.ts

@@ -0,0 +1,12 @@
+/// <reference path="../uui_globals.d.ts" />
+
+declare module 'jsurl';
+declare module 'query-string';
+declare module 'draft-js-plugins-editor';
+declare module 'draft-js-clear-formatting';
+declare module 'draft-convert';
+declare module 'draft-js-plugins-utils';
+declare module 'draft-js/lib/*';
+declare module 'slate-soft-break';
+declare module 'slate-mark-hotkeys';
+declare module 'markdown-draft-js';

package/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './useColumnsWithFilters';
+export * from './textLayout';