Merge branch 'develop'

# Conflicts:
#	changelog.md
#	uui-docs/package.json

app/src/common/AppFooter.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import css from './AppFooter.module.scss';
 import {
     FlexRow, Text, Anchor, IconContainer,
-} from '@epam/promo';
+} from '@epam/uui';
 import { ReactComponent as EPAMIcon } from '../icons/EPAM.svg';
 
 const EPAM_LINK = 'https://www.epam.com';
@@ -15,7 +15,7 @@ export class AppFooter extends React.Component {
                     <Anchor rawProps={ { tabIndex: -1, 'aria-label': 'EPAM' } } href={ EPAM_LINK } target="_blank">
                         <IconContainer icon={ EPAMIcon } />
                     </Anchor>
-                    <Text color="gray60" font="sans" fontSize="14" lineHeight="24" cx={ css.copyright }>
+                    <Text color="secondary" fontSize="14" lineHeight="24" cx={ css.copyright }>
                         {`© ${new Date().getFullYear()} EPAM Systems. All Rights reserved`}
                     </Text>
                 </FlexRow>

app/src/common/AppHeader.module.scss

@@ -8,7 +8,7 @@
 
         .link-caption {
             padding-left: 6px;
-            color: #FFFFFF;
+            color: var(--uui-main_menu-text);
             white-space: nowrap;
         }
     }
@@ -21,8 +21,12 @@
         min-width: 320px;
     }
 
-    .git-icon {
-        fill: #FFFFFF;
+    .git-icon, .logo-icon {
+        fill: var(--uui-main_menu-text);
+    }
+
+    .theme-switcher-button:hover {
+        background-color: color-mix(in srgb, var(--white) 5%, transparent);
     }
 }
 

app/src/common/AppHeader.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import { BurgerButton, MainMenu, FlexSpacer, GlobalMenu, MainMenuButton, Text, IconContainer, Burger, MainMenuDropdown } from '@epam/promo';
-import { Anchor, MainMenuLogo } from '@epam/uui-components';
-import { UUI } from './docs';
+import { BurgerButton, MainMenu, FlexSpacer, GlobalMenu, MainMenuButton, Text, IconContainer, Burger, DropdownMenuBody, Dropdown, DropdownMenuButton, Button } from '@epam/uui';
+import { Anchor, MainMenuCustomElement } from '@epam/uui-components';
 import { svc } from '../services';
 import { analyticsEvents } from '../analyticsEvents';
-import { ReactComponent as GitIcon } from '../icons/git-branch-18.svg';
 import { useTheme } from '../helpers/useTheme';
+import { TMode } from './docs';
+import { ReactComponent as GitIcon } from '../icons/git-branch-18.svg';
+import { ReactComponent as LogoIcon } from '../icons/logo.svg';
+import { ReactComponent as DoneIcon } from '@epam/assets/icons/common/notification-done-18.svg';
 import css from './AppHeader.module.scss';
 
 export type Theme = 'uui-theme-promo' | 'uui-theme-loveship' | 'uui-theme-loveship_dark' | 'uui-theme-electric' | 'uui-theme-vanilla_thunder';
-const themeName: Record<Theme, 'Promo' | 'Loveship' | 'Loveship Dark' | 'Electric' | 'Vanilla Thunder'> = {
+const themeName: Record<Theme, 'Promo' | 'Loveship Light' | 'Loveship Dark' | 'Electric' | 'Vanilla Thunder'> = {
     'uui-theme-promo': 'Promo',
-    'uui-theme-loveship': 'Loveship',
+    'uui-theme-loveship': 'Loveship Light',
     'uui-theme-loveship_dark': 'Loveship Dark',
     'uui-theme-electric': 'Electric',
     'uui-theme-vanilla_thunder': 'Vanilla Thunder',
@@ -49,7 +51,7 @@ export function AppHeader() {
                     link={ {
                         pathname: '/documents',
                         query: {
-                            id: 'accordion', mode: 'doc', skin: UUI, category: 'components',
+                            category: 'components', id: 'accordion', mode: TMode.doc,
                         },
                     } }
                     isLinkActive={ pathName === '/documents' && category === 'components' }
@@ -61,22 +63,22 @@ export function AppHeader() {
     };
 
     const renderThemeSwitcher = () => {
-        const bodyItems = [
-            <MainMenuButton caption="Promo" isLinkActive={ theme === 'uui-theme-promo' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-promo') } />,
-            <MainMenuButton caption="Loveship" isLinkActive={ theme === 'uui-theme-loveship' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-loveship') } />,
-            <MainMenuButton caption="Loveship Dark" isLinkActive={ theme === 'uui-theme-loveship_dark' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-loveship_dark') } />,
-            <MainMenuButton caption="Electric" isLinkActive={ theme === 'uui-theme-electric' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-electric') } />,
-        ];
-        if (!window.location.host.includes('uui.epam.com')) {
-            bodyItems.push(
-                <MainMenuButton caption="Vanilla Thunder" isLinkActive={ theme === 'uui-theme-vanilla_thunder' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-vanilla_thunder') } />,
-            );
-        }
-
         return (
-            <MainMenuDropdown key="theme-switcher" caption={ `Theme: ${themeName[theme as Theme]}` }>
-                { bodyItems }
-            </MainMenuDropdown>
+            <Dropdown
+                renderBody={ (props) => (
+                    <DropdownMenuBody { ...props } rawProps={ { style: { width: '180px', padding: '6px 0', marginTop: '3px' } } }>
+                        <DropdownMenuButton caption="Promo" icon={ theme === 'uui-theme-promo' && DoneIcon } isActive={ theme === 'uui-theme-promo' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-promo') } />
+                        <DropdownMenuButton caption="Loveship Light" icon={ theme === 'uui-theme-loveship' && DoneIcon } isActive={ theme === 'uui-theme-loveship' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-loveship') } />
+                        <DropdownMenuButton caption="Loveship Dark" icon={ theme === 'uui-theme-loveship_dark' && DoneIcon } isActive={ theme === 'uui-theme-loveship_dark' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-loveship_dark') } />
+                        <DropdownMenuButton caption="Electric" icon={ theme === 'uui-theme-electric' && DoneIcon } isActive={ theme === 'uui-theme-electric' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-electric') } />
+                        <DropdownMenuButton caption="Vanilla Thunder" icon={ theme === 'uui-theme-vanilla_thunder' && DoneIcon } isActive={ theme === 'uui-theme-vanilla_thunder' } iconPosition="right" onClick={ () => toggleTheme('uui-theme-vanilla_thunder') } />
+                    </DropdownMenuBody>
+                ) }
+                renderTarget={ (props) => (
+                    <Button { ...props } cx={ css.themeSwitcherButton } caption={ themeName[theme as Theme] } fill="none" size="36" isDropdown={ true } />
+                ) }
+                placement="bottom-end"
+            />
         );
     };
 
@@ -94,7 +96,13 @@ export function AppHeader() {
             {
                 id: 'logo',
                 priority: 100499,
-                render: () => <MainMenuLogo link={ { pathname: '/' } } onClick={ () => sendEvent('Welcome') } logoUrl="/static/logo.svg" key="logo" />,
+                render: () => (
+                    <MainMenuCustomElement key="logo">
+                        <Anchor link={ { pathname: '/' } } href={ GIT_LINK } target="_blank" onClick={ () => sendEvent('Welcome') } key="logo">
+                            <IconContainer icon={ LogoIcon } cx={ css.logoIcon } />
+                        </Anchor>
+                    </MainMenuCustomElement>
+                ),
             },
             {
                 id: 'documents',
@@ -133,7 +141,7 @@ export function AppHeader() {
                         link={ {
                             pathname: '/documents',
                             query: {
-                                id: 'accordion', mode: 'doc', skin: UUI, category: 'components',
+                                category: 'components', id: 'accordion', mode: 'doc',
                             },
                         } }
                         isLinkActive={ pathName === '/documents' && category === 'components' }
@@ -163,14 +171,25 @@ export function AppHeader() {
                 render: () => <MainMenuButton caption="Sandbox" link={ { pathname: '/sandbox' } } isLinkActive={ pathName === '/sandbox' } key="sandbox" />,
             },
             { id: 'flexSpacer', priority: 100500, render: () => <FlexSpacer priority={ 100500 } key="spacer" /> },
+            {
+                id: 'themeCaption',
+                priority: 2,
+                render: () => (
+                    <MainMenuButton
+                        caption="Theme:"
+                        showInBurgerMenu
+                        key="themeCaption"
+                    />
+                ),
+            },
             { id: 'theme', priority: 3, render: renderThemeSwitcher },
             {
                 id: 'git',
                 priority: 0,
                 render: () => (
                     <Anchor cx={ css.linkContainer } href={ GIT_LINK } target="_blank" onClick={ () => sendEvent(GIT_LINK) } key="git">
                         <IconContainer icon={ GitIcon } cx={ css.gitIcon } />
-                        <Text font="sans-semibold" fontSize="14" lineHeight="24" cx={ css.linkCaption }>
+                        <Text fontWeight="600" fontSize="14" lineHeight="24" cx={ css.linkCaption }>
                             Open Git
                         </Text>
                     </Anchor>

app/src/common/MainMenuAppMultiSwitch.tsx

@@ -7,9 +7,9 @@ import {
 } from '@epam/promo';
 import { svc } from '../services';
 
-interface MainMenuAppMultiSwitchPropsItem<TValue> extends ButtonProps, ButtonMods {
+type MainMenuAppMultiSwitchPropsItem<TValue> = ButtonProps & ButtonMods & {
     id: TValue;
-}
+};
 
 export interface MainMenuAppMultiSwitchProps<TValue> extends IEditable<TValue>, SizeMod, IAnalyticableOnChange<TValue> {
     items: MainMenuAppMultiSwitchPropsItem<TValue>[];

app/src/common/Page.module.scss

@@ -1,7 +1,8 @@
 @use '~@epam/promo/assets/styles/colors.scss' as *;
 
 .root {
-    background: $gray10;
+    background: var(--uui-app-bg);
+    color: var(--uui-text-primary);
     min-height: 100%;
     display: flex;
     flex-direction: column;

app/src/common/apiReference/TypeRefPage.tsx

@@ -4,7 +4,7 @@ import { Code } from '../docs/Code';
 import { TsComment } from './components/TsComment';
 import { Layout } from './components/Layout';
 import { useSearchParams } from 'react-router-dom';
-import { TDocsGenExportedType } from './types';
+import { TDocsGenExportedType } from '@epam/uui-docs';
 import { TTypeRef } from './sharedTypes';
 import { TypeRefSection } from './TypeRefSection';
 
@@ -15,10 +15,10 @@ export function TypeRefPage() {
 
     const items: { title?: string, node: React.ReactNode }[] = [];
     const comment = docsGenType?.summary?.comment;
-    if (comment?.length) {
+    if (comment?.raw?.length) {
         items.push({
             title: 'Description',
-            node: <TsComment text={ comment } keepBreaks={ true } />,
+            node: <TsComment comment={ comment } keepBreaks={ true } />,
         });
     }
 

app/src/common/apiReference/TypeRefSection.module.scss

@@ -1,12 +1,9 @@
-@use '~@epam/assets/theme/theme_promo' as *;
-
 .root {
-    @include theme-promo();
     max-width: 100%;
     width: 960px;
 
     :global(.asterisk) {
-        color: var(--uui-labeled_input-asterisk);
-        font-family: var(--font-semibold);
+        color: var(--uui-error-50);
+        font-weight: 600;
     }
 }

app/src/common/apiReference/TypeRefSection.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo, useState } from 'react';
 import { Checkbox, FlexRow, FlexSpacer, IconContainer, RichTextView, Text, Tooltip } from '@epam/uui';
-import { TDocsGenExportedType } from './types';
+import { TDocsGenExportedType } from '@epam/uui-docs';
 import { useDocsGenForType, useDocsGenSummaries } from './dataHooks';
 import { TType } from './sharedTypes';
 import css from './TypeRefSection.module.scss';
 import { CodeExpandable } from './components/CodeExpandable';
-import { ReactComponent as InfoIcon } from '@epam/assets/icons/common/table-info-fill-18.svg';
+import { ReactComponent as InfoIcon } from '@epam/assets/icons/common/notification-info-outline-18.svg';
 import { TypeRefTable } from './TypeRefTable';
 
 interface TypeRefSectionProps {

app/src/common/apiReference/TypeRefTable.module.scss

@@ -3,4 +3,8 @@
     top: 0;
     isolation: isolate;
     z-index: 5;
+}
+
+.code-bg {
+    --code-bg: var(--uui-surface-main);
 }

app/src/common/apiReference/TypeRefTable.tsx

@@ -136,7 +136,7 @@ function getColumns(summaries: TDocsGenTypeSummary): DataColumnProps<TApiRefProp
                     return null;
                 }
                 return (
-                    <Code codeAsHtml={ item.typeValue.raw } isCompact={ true } />
+                    <Code cx={ css.codeBg } codeAsHtml={ item.typeValue.html } isCompact={ true } />
                 );
             },
             width: WIDTH.typeValue,
@@ -146,7 +146,7 @@ function getColumns(summaries: TDocsGenTypeSummary): DataColumnProps<TApiRefProp
             key: 'comment',
             caption: 'Comment',
             render: (item) => {
-                return <TsComment text={ item.comment } keepBreaks={ true } isCompact={ true } />;
+                return <TsComment comment={ item.comment } keepBreaks={ true } isCompact={ true } />;
             },
             width: WIDTH.comment,
             grow: 1,

app/src/common/apiReference/components/CodeExpandable.module.scss

@@ -1,8 +1,7 @@
 .root {
-    background-color: #FFFFFF;
+    background-color: var(--uui-surface-main);
     display: flex;
     flex-direction: column;
-    border-top: 1px solid var(--uui-divider);
     flex-grow: 1;
     flex-shrink: 0;
     flex-basis: 0;

app/src/common/apiReference/components/TsComment.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { RichTextView } from '@epam/promo';
 import css from './TsComment.module.scss';
+import { TComment } from '../sharedTypes';
 
 function formatComment(commentInput: string) {
     // Playground to modify and debug https://regex101.com/r/dd4hyi/1
@@ -11,25 +12,26 @@ function formatComment(commentInput: string) {
 }
 
 function escapeArr(htmlStr: string[]) {
-    return htmlStr.map(escapeLine);
+    return htmlStr.map(escapeLineForHtml);
 }
-function escapeLine(htmlStr: string) {
+function escapeLineForHtml(htmlStr: string) {
     return htmlStr.replace(/&/g, '&')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
         .replace(/"/g, '&quot;')
         .replace(/'/g, '&#39;');
 }
 
-export function TsComment(props: { text?: string[], keepBreaks: boolean, isCompact?: boolean }) {
-    const { text, keepBreaks, isCompact } = props;
+export function TsComment(props: { comment?: TComment, keepBreaks: boolean, isCompact?: boolean }) {
+    const { comment, keepBreaks, isCompact } = props;
+    const text = comment?.raw;
 
     const textStr = useMemo(() => {
         if (text && text.length > 0) {
             if (keepBreaks) {
                 return `<p>${formatComment(escapeArr(text).join('<br />'))}</p>`;
             }
-            return `<p>${formatComment(escapeLine(text.join(' ')))}</p>`;
+            return `<p>${formatComment(escapeLineForHtml(text.join(' ')))}</p>`;
         }
     }, [text, keepBreaks]);
 

app/src/common/apiReference/dataHooks.tsx

@@ -4,7 +4,7 @@ import { TType, TTypeRef } from './sharedTypes';
 import { TDocsGenTypeSummary } from './types';
 
 const cache: Map<TTypeRef, Promise<{ content: TType }>> = new Map();
-function load(ref: TTypeRef) {
+export function loadDocsGenType(ref: TTypeRef) {
     if (!svc.api) {
         throw new Error('svc.api not available');
     }
@@ -17,7 +17,7 @@ export function useDocsGenForType(ref: TTypeRef): TType | undefined {
     const [response, setResponse] = useState<TType>();
     useEffect(() => {
         setResponse(undefined);
-        load(ref).then((res) => {
+        loadDocsGenType(ref).then((res) => {
             setResponse(() => res.content);
         });
     }, [ref]);