@epam/uui 5.3.0-rc.0 → 5.3.0

package/components/layout/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxGroup should be rendered correctly 1`] = `
+<fieldset
+  className="uui-vertical-direction root container"
+>
+  <label
+    className="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
+    tabIndex={-1}
+  >
+    <div
+      className="uui-checkbox"
+    >
+      <input
+        aria-checked={false}
+        checked={false}
+        onChange={[Function]}
+        tabIndex={0}
+        type="checkbox"
+      />
+    </div>
+    <div
+      className="uui-input-label"
+    >
+      Test1
+    </div>
+  </label>
+  <label
+    className="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
+    tabIndex={-1}
+  >
+    <div
+      className="uui-checkbox"
+    >
+      <input
+        aria-checked={false}
+        checked={false}
+        onChange={[Function]}
+        tabIndex={0}
+        type="checkbox"
+      />
+    </div>
+    <div
+      className="uui-input-label"
+    >
+      Test2
+    </div>
+  </label>
+</fieldset>
+`;
+
+exports[`CheckboxGroup should be rendered correctly with props 1`] = `
+<fieldset
+  className="uui-horizontal-direction root container"
+>
+  <label
+    className="container uui-checkbox-container root size-18 mode-form uui-color-primary uui-disabled"
+    tabIndex={-1}
+  >
+    <div
+      className="uui-checkbox"
+    >
+      <input
+        aria-checked={false}
+        aria-disabled={true}
+        checked={false}
+        disabled={true}
+        onChange={[Function]}
+        tabIndex={-1}
+        type="checkbox"
+      />
+    </div>
+    <div
+      className="uui-input-label"
+    >
+      Test1
+    </div>
+  </label>
+  <label
+    className="container uui-checkbox-container root size-18 mode-form uui-color-primary uui-disabled"
+    tabIndex={-1}
+  >
+    <div
+      className="uui-checkbox"
+    >
+      <input
+        aria-checked={false}
+        aria-disabled={true}
+        checked={false}
+        disabled={true}
+        onChange={[Function]}
+        tabIndex={-1}
+        type="checkbox"
+      />
+    </div>
+    <div
+      className="uui-input-label"
+    >
+      Test2
+    </div>
+  </label>
+</fieldset>
+`;

package/components/layout/__tests__/__snapshots__/ControlGroup.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ControlGroup should be rendered correctly 1`] = `
+<div
+  className="container root"
+  role="group"
+>
+  <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"
+  >
+    <div
+      className="uui-caption"
+    >
+      On
+    </div>
+  </button>
+  <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"
+  >
+    <div
+      className="uui-caption"
+    >
+      Off
+    </div>
+  </button>
+</div>
+`;

package/components/layout/__tests__/__snapshots__/LabeledInput.test.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LabeledInput should be rendered correctly 1`] = `
+<div
+  className="container root size-36"
+>
+  <div
+    className="uui-label-top"
+  >
+    <div>
+      <div
+        className="container uui-input-box -clickable root size-36 mode-form"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        tabIndex={-1}
+      >
+        <input
+          className="uui-input"
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          tabIndex={0}
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LabeledInput should be rendered correctly with props 1`] = `
+<div
+  className="container root size-36"
+>
+  <div
+    className="uui-label-left"
+  >
+    <div
+      className="labelWrapper"
+    >
+      <label
+        className="uui-label"
+      >
+        Test label
+        <svg
+          className="uui-labeled-input-info-icon"
+        />
+      </label>
+    </div>
+    <div
+      className="rightChildrenPosition"
+    >
+      <div
+        className="container uui-input-box -clickable root size-36 mode-form"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        tabIndex={-1}
+      >
+        <input
+          className="uui-input"
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          tabIndex={0}
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="uui-flex-row container align-items-top"
+    style={
+      Object {
+        "columnGap": "12px",
+        "rowGap": undefined,
+      }
+    }
+  >
+    <div
+      className="uui-invalid-message"
+      role="alert"
+    >
+      Test invalid message
+    </div>
+  </div>
+</div>
+`;

package/components/layout/__tests__/__snapshots__/RadioGroup.test.tsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RadioGroup should be rendered correctly 1`] = `
+<fieldset
+  className="uui-vertical-direction root container"
+>
+  <label
+    className="container root size-18 uui-color-primary -clickable"
+  >
+    <div
+      className="uui-radioinput"
+    >
+      <input
+        aria-checked={false}
+        checked={false}
+        onChange={[Function]}
+        type="radio"
+      />
+    </div>
+    <div
+      className="uui-input-label"
+    >
+      Test1
+    </div>
+  </label>
+  <label
+    className="container root size-18 uui-color-primary -clickable"
+  >
+    <div
+      className="uui-radioinput"
+    >
+      <input
+        aria-checked={false}
+        checked={false}
+        onChange={[Function]}
+        type="radio"
+      />
+    </div>
+    <div
+      className="uui-input-label"
+    >
+      Test2
+    </div>
+  </label>
+</fieldset>
+`;
+
+exports[`RadioGroup should be rendered correctly with props 1`] = `
+<fieldset
+  className="uui-horizontal-direction root container"
+>
+  <label
+    className="container uui-disabled root size-18 uui-color-primary"
+  >
+    <div
+      className="uui-radioinput"
+    >
+      <input
+        aria-checked={false}
+        aria-disabled={true}
+        checked={false}
+        disabled={true}
+        onChange={[Function]}
+        type="radio"
+      />
+    </div>
+    <div
+      className="uui-input-label"
+    >
+      Test1
+    </div>
+  </label>
+  <label
+    className="container uui-disabled root size-18 uui-color-primary"
+  >
+    <div
+      className="uui-radioinput"
+    >
+      <input
+        aria-checked={false}
+        aria-disabled={true}
+        checked={false}
+        disabled={true}
+        onChange={[Function]}
+        type="radio"
+      />
+    </div>
+    <div
+      className="uui-input-label"
+    >
+      Test2
+    </div>
+  </label>
+</fieldset>
+`;

package/components/layout/__tests__/__snapshots__/ScrollBars.test.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScrollBars should be rendered correctly 1`] = `
+<div
+  className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom"
+  style={
+    Object {
+      "display": "flex",
+      "height": "100%",
+      "overflow": "hidden",
+      "position": "relative",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "WebkitOverflowScrolling": "touch",
+        "bottom": 0,
+        "flex": "1 1 auto",
+        "left": 0,
+        "marginBottom": 0,
+        "marginRight": 0,
+        "overflow": "scroll",
+        "position": "relative",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <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"
+    />
+  </div>
+  <div
+    className="uui-track-horizontal"
+    style={
+      Object {
+        "display": "none",
+        "height": 6,
+        "position": "absolute",
+      }
+    }
+  >
+    <div
+      className="uui-thumb-horizontal"
+    />
+  </div>
+  <div
+    className="uui-track-vertical"
+    style={
+      Object {
+        "display": "none",
+        "position": "absolute",
+        "width": 6,
+      }
+    }
+  >
+    <div
+      className="uui-thumb-vertical"
+    />
+  </div>
+</div>
+`;

package/components/layout/__tests__/__snapshots__/VirtualList.test.tsx.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VirtualList should be rendered correctly 1`] = `
+<div
+  className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom scrollContainer"
+  style={
+    Object {
+      "display": "flex",
+      "height": "100%",
+      "overflow": "hidden",
+      "position": "relative",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "WebkitOverflowScrolling": "touch",
+        "bottom": 0,
+        "display": "flex",
+        "flex": "1 1 auto",
+        "flexDirection": "column",
+        "left": 0,
+        "marginBottom": 0,
+        "marginRight": 0,
+        "overflow": "scroll",
+        "position": "relative",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <div
+      className="listContainer"
+      style={
+        Object {
+          "minHeight": "0px",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "marginTop": 0,
+          }
+        }
+      />
+    </div>
+  </div>
+  <div
+    className="container uui-blocker-container root"
+    style={
+      Object {
+        "minHeight": undefined,
+      }
+    }
+  >
+    <div />
+  </div>
+  <div
+    className="uui-track-horizontal"
+    style={
+      Object {
+        "display": "none",
+        "height": 6,
+        "position": "absolute",
+      }
+    }
+  >
+    <div
+      className="uui-thumb-horizontal"
+    />
+  </div>
+  <div
+    className="uui-track-vertical"
+    style={
+      Object {
+        "display": "none",
+        "position": "absolute",
+        "width": 6,
+      }
+    }
+  >
+    <div
+      className="uui-thumb-vertical"
+    />
+  </div>
+</div>
+`;

package/components/layout/index.ts

@@ -0,0 +1,10 @@
+export * from './Accordion';
+export * from './ControlGroup';
+export * from './FlexItems';
+export { IconContainer } from '@epam/uui-components';
+export * from './LabeledInput';
+export * from './RadioGroup';
+export * from './ScrollBars';
+export * from './VirtualList';
+export * from './Blocker';
+export * from './CheckboxGroup';

package/components/navigation/Anchor.module.scss

@@ -0,0 +1,7 @@
+@use  '../../assets/styles/effects' as *;
+
+.root {
+    &:global(.-clickable):focus-visible {
+        @include focus-visible-effect();
+    }
+}

package/components/navigation/Anchor.tsx

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

package/components/navigation/MainMenu/Burger/Burger.module.scss

@@ -0,0 +1,81 @@
+@use  '../../../../assets/styles/effects' as *;
+
+.root {
+    --uui-burger_menu-bg: var(--uui-neutral-90);
+    --uui-burger_menu-bg-hover: var(--uui-neutral-90);
+    --uui-burger_menu-overlay: var(--uui-overlay);
+    --uui-burger_menu-icon: var(--uui-neutral-5);
+    --uui-burger_menu-item: var(--uui-text-brand);
+    //
+    position: relative;
+    display: flex;
+
+    &:global(.uui-burger-menu-open) {
+        z-index: 1001;
+    }
+
+    :global(.uui-burger-button) {
+        width: 60px;
+        cursor: pointer;
+        fill: var(--uui-burger_menu-icon);
+        background: transparent;
+        padding: 0;
+        border: 0 none;
+
+        &:hover {
+            background-color: var(--uui-burger_menu-bg-hover);
+        }
+
+        &:active {
+            background-color: var(--uui-burger_menu-bg-hover);
+        }
+
+        &:focus-visible {
+            @include focus-visible-effect(-2px, 0);
+        }
+
+        :global(.uui-icon) svg {
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+    :global(.uui-burger-logo-container) {
+        position: absolute;
+        left: 60px;
+        top: 0;
+    }
+
+    :global(.uui-burger-logo) {
+        display: block;
+        height: 60px;
+    }
+}
+
+.burger-content {
+    &:global(.uui-burger-overlay) {
+        &:global(.uui-burger-overlay-visible) {
+            position: fixed;
+            z-index: 1000;
+            top: 60px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: var(--uui-burger_menu-overlay);
+        }
+    }
+
+    :global(.uui-burger-items) {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        top: 0;
+        width: 300px;
+        background: var(--uui-burger_menu-item);
+        transform: translateX(-100px);
+
+        &:global(.uui-burger-items-visible) {
+            transform: translateX(0);
+        }
+    }
+}

package/components/navigation/MainMenu/Burger/Burger.tsx

@@ -0,0 +1,18 @@
+import { withMods } from '@epam/uui-core';
+import cx from 'classnames';
+import { Burger as uuiBurger, BurgerProps } from '@epam/uui-components';
+import css from './Burger.module.scss';
+import { ReactComponent as BurgerIcon } from '../../../../icons/burger.svg';
+import { ReactComponent as CrossIcon } from '../../../../icons/burger-close.svg';
+
+export interface BurgerMods {}
+
+function applyBurgerMods() {
+    return [cx(css.root, 'uui-burger')];
+}
+
+export const Burger = withMods<BurgerProps, BurgerMods>(uuiBurger, applyBurgerMods, () => ({
+    burgerIcon: BurgerIcon,
+    crossIcon: CrossIcon,
+    burgerContentCx: css.burgerContent,
+}));

package/components/navigation/MainMenu/Burger/BurgerButton.module.scss

@@ -0,0 +1,69 @@
+@use  '../../../../assets/styles/index' as *;
+
+.root {
+    --uui-burger_btn_caption: var(--uui-neutral-5);
+    --uui-burger_btn_caption-hover: var(--uui-primary-50);
+    --uui-burger_btn_caption-active: var(--uui-primary-50);
+    --uui-burger_btn-border: var(--uui-neutral-30);
+
+    --uui-burger_btn-font: var(--uui-font);
+    --uui-burger_btn-font-weight: 400;
+    //
+    padding: 0 24px;
+    background: none;
+    border: 0;
+    outline: none;
+    font-family: var(--uui-burger_btn-font);
+    font-weight: var(--uui-burger_btn-font-weight);
+    line-height: 48px;
+    flex-shrink: 0;
+
+    &:global(.uui-enabled) {
+        color: var(--uui-burger_btn_caption);
+        fill: var(--uui-burger_btn_caption);
+
+        &:global(.-clickable) {
+            &:hover {
+                color: var(--uui-burger_btn_caption-hover);
+                fill: var(--uui-burger_btn_caption-hover);
+            }
+
+            &:focus-visible {
+                @include focus-visible-effect(-2px, null);
+            }
+        }
+    }
+
+    &:global(.uui-active) {
+        color: var(--uui-burger_btn_caption-active);
+        fill: var(--uui-burger_btn_caption-active);
+    }
+
+    :global(.uui-icon) {
+        padding: 0 12px 0 24px;
+    }
+
+    &.button-primary {
+        font-size: 18px;
+    }
+
+    &.button-secondary {
+        font-size: 14px;
+        padding-left: 18px;
+        margin-left: 48px;
+        border-left: 1px var(--uui-burger_btn-border) solid;
+    }
+
+    &.hasIcon,
+    &.dropdown {
+        padding-left: 0;
+    }
+
+    &.hasIcon {
+        @include icon-layout(24px);
+
+        :global(.uui-icon) {
+            padding: 0 12px 0 20px;
+        }
+    }
+}

package/components/navigation/MainMenu/Burger/BurgerButton.tsx

@@ -0,0 +1,22 @@
+import { withMods, IHasIcon, IDropdownToggler } from '@epam/uui-core';
+import { Button, ButtonProps } from '@epam/uui-components';
+import { ReactComponent as SvgTriangle } from '../../../../icons/triangle.svg';
+import css from './BurgerButton.module.scss';
+
+export interface BurgerButtonMods extends IHasIcon, IDropdownToggler {
+    type?: 'primary' | 'secondary';
+    indentLevel?: number;
+}
+
+export const BurgerButton = withMods<ButtonProps, BurgerButtonMods>(
+    Button,
+    (props) => [
+        css.root,
+        'uui-main_menu-burger-button',
+        css['button-' + (props.type || 'primary')],
+        css['indent-' + (props.indentLevel || 0)],
+        props.isDropdown && css.dropdown,
+        props.icon && css.hasIcon,
+    ],
+    () => ({ dropdownIcon: SvgTriangle, dropdownIconPosition: 'left', role: 'menuitem' }),
+);