Merge pull request #1787 from epam/themes/update-site

Site update
epam · Nov 30, 2023 · e37a5de · e37a5de
2 parents a6eeca2 + 3439493
commit e37a5de
Show file tree

Hide file tree

Showing 255 changed files with 6,508 additions and 9,613 deletions.
diff --git a/app/src/common/AppFooter.tsx b/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>

diff --git a/app/src/common/AppHeader.module.scss b/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,8 @@
         min-width: 320px;
     }
 
-    .git-icon {
-        fill: #FFFFFF;
+    .git-icon, .logo-icon {
+        fill: var(--uui-main_menu-text);
     }
 
     .theme-switcher-button:hover {

diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { BurgerButton, MainMenu, FlexSpacer, GlobalMenu, MainMenuButton, Text, IconContainer, Burger, DropdownMenuBody, Dropdown, DropdownMenuButton, Button } from '@epam/uui';
-import { Anchor, MainMenuLogo } from '@epam/uui-components';
-import { TSkin } from '@epam/uui-docs';
+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 css from './AppHeader.module.scss';
+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 Light' | 'Loveship Dark' | 'Electric' | 'Vanilla Thunder'> = {
@@ -50,7 +51,7 @@ export function AppHeader() {
                     link={ {
                         pathname: '/documents',
                         query: {
-                            id: 'accordion', mode: 'doc', skin: TSkin.UUI, category: 'components',
+                            category: 'components', id: 'accordion', mode: TMode.doc,
                         },
                     } }
                     isLinkActive={ pathName === '/documents' && category === 'components' }
@@ -95,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',
@@ -134,7 +141,7 @@ export function AppHeader() {
                         link={ {
                             pathname: '/documents',
                             query: {
-                                id: 'accordion', mode: 'doc', skin: TSkin.UUI, category: 'components',
+                                category: 'components', id: 'accordion', mode: 'doc',
                             },
                         } }
                         isLinkActive={ pathName === '/documents' && category === 'components' }

diff --git a/app/src/common/Page.module.scss b/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;

diff --git a/app/src/common/apiReference/TypeRefSection.module.scss b/app/src/common/apiReference/TypeRefSection.module.scss
@@ -1,7 +1,4 @@
-@use '~@epam/assets/theme/theme_promo' as *;
-
 .root {
-    @include theme-promo();
     max-width: 100%;
     width: 960px;
 

diff --git a/app/src/common/apiReference/TypeRefTable.module.scss b/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);
 }
diff --git a/app/src/common/apiReference/TypeRefTable.tsx b/app/src/common/apiReference/TypeRefTable.tsx
@@ -136,7 +136,7 @@ function getColumns(summaries: TDocsGenTypeSummary): DataColumnProps<TApiRefProp
                     return null;
                 }
                 return (
-                    <Code codeAsHtml={ item.typeValue.html } isCompact={ true } />
+                    <Code cx={ css.codeBg } codeAsHtml={ item.typeValue.html } isCompact={ true } />
                 );
             },
             width: WIDTH.typeValue,

diff --git a/app/src/common/apiReference/components/CodeExpandable.module.scss b/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;

diff --git a/app/src/common/docs/BaseDocsBlock.module.scss b/app/src/common/docs/BaseDocsBlock.module.scss
@@ -1,28 +1,7 @@
-@use '~@epam/assets/theme/theme_promo' as *;
-@use '~@epam/assets/theme/theme_loveship' as *;
-@use '~@epam/promo/assets/styles/index.scss' as *;
-
-:global {
-    .uui-theme-loveship_important.uui-theme-loveship_important.uui-theme-loveship_important.uui-theme-loveship_important {
-        @include theme-loveship();
-    }
-
-    .uui-theme-promo_important.uui-theme-promo_important.uui-theme-promo_important.uui-theme-promo_important {
-        @include theme-promo();
-    }
-}
-
-
 .secondary-navigation {
     box-sizing: border-box;
     min-height: 60px;
     background-color: var(--uui-surface-main);
-
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
 }
 
 .container {
@@ -32,6 +11,9 @@
     min-width: 0;
     height: calc(100vh - 60px);
     overflow: hidden;
+    background-color: var(--uui-surface-main);
+    border-top: 1px solid var(--uui-divider);
+    box-sizing: border-box;
 }
 
 .content-container {
@@ -54,16 +36,7 @@
     margin: auto;
 }
 
-.api-block {
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
-}
-
-.theme-promo {
-    :global {
-        @include theme-promo();
-    }
+.info-icon {
+    padding-left: 9px;
+    fill: var(--uui-icon);
 }
diff --git a/app/src/common/docs/BaseDocsBlock.tsx b/app/src/common/docs/BaseDocsBlock.tsx
@@ -1,32 +1,35 @@
 import * as React from 'react';
+import cx from 'classnames';
+import { TDocConfig, TSkin } from '@epam/uui-docs';
 import { UuiContext, UuiContexts } from '@epam/uui-core';
-import { FlexRow, FlexSpacer, MultiSwitch, RichTextView, ScrollBars, TabButton } from '@epam/promo';
+import { Checkbox, FlexRow, FlexSpacer, RichTextView, ScrollBars, TabButton, Tooltip, IconContainer } from '@epam/uui';
 import { svc } from '../../services';
 import { getQuery } from '../../helpers';
 import { analyticsEvents } from '../../analyticsEvents';
 import { TypeRefSection } from '../apiReference/TypeRefSection';
 import { ComponentEditorWrapper } from './componentEditor/ComponentEditor';
-import cx from 'classnames';
+import { ReactComponent as InfoIcon } from '@epam/assets/icons/common/notification-help-fill-18.svg';
 import css from './BaseDocsBlock.module.scss';
-import { TDocConfig, TSkin } from '@epam/uui-docs';
 
-enum TMode {
+export enum TMode {
     doc = 'doc',
     propsEditor = 'propsEditor'
 }
 
-const DEFAULT_SKIN = TSkin.UUI;
-const DEFAULT_MODE = TMode.doc;
+export enum TTheme {
+    electric = 'electric',
+    loveship = 'loveship',
+    loveship_dark = 'loveship_dark',
+    promo = 'promo',
+    vanilla_thunder = 'vanilla_thunder'
+}
 
-const themeName: Record<TSkin, string> = {
-    [TSkin.UUI4_promo]: 'uui-theme-promo_important',
-    [TSkin.UUI3_loveship]: 'uui-theme-loveship_important',
-    [TSkin.UUI]: '',
-};
+export type TUUITheme = `uui-theme-${TTheme}`;
 
-const items: { id: TSkin; caption: string }[] = [
-    { caption: 'UUI [Themeable]', id: TSkin.UUI }, { caption: 'UUI3 [Loveship]', id: TSkin.UUI3_loveship }, { caption: 'UUI4 [Promo]', id: TSkin.UUI4_promo },
-];
+const DEFAULT_MODE = TMode.doc;
+const DEFAULT_THEME: TUUITheme = 'uui-theme-loveship';
+
+const CONTROL_DESCRIPTION = 'If checked, a component from the skin-specific package will be used, according to the selected theme (for example, "@epam/loveship"). If unchecked, it will use a component from the "@epam/uui" package, only with semantic props.';
 
 interface BaseDocsBlockState {}
 
@@ -41,14 +44,22 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
         svc.uuiAnalytics.sendEvent(analyticsEvents.document.pv(id, category));
     }
 
-    private getSkin(): TSkin {
-        return getQuery('skin') || DEFAULT_SKIN;
+    private isSkin(): boolean {
+        return getQuery('isSkin') ?? JSON.parse(localStorage.getItem('app-theme-context'))?.isSkin ?? true;
     }
 
     private getMode(): TMode {
         return getQuery('mode') || DEFAULT_MODE;
     }
 
+    private getTheme(): TUUITheme {
+        return getQuery('theme') ?? (localStorage.getItem('app-theme') as TUUITheme) ?? DEFAULT_THEME;
+    }
+
+    private hasSkin(): boolean {
+        return ['electric', 'loveship', 'loveship_dark', 'promo'].includes(this.getTheme().split('-').pop());
+    }
+
     abstract title: string;
     abstract renderContent(): React.ReactNode;
 
@@ -89,13 +100,16 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
     };
 
     protected renderSkinSwitcher() {
+        if (this.getMode() !== TMode.propsEditor || !this.hasSkin()) return;
+
         return (
-            <MultiSwitch<TSkin>
-                size="36"
-                items={ items }
-                value={ this.getSkin() }
-                onValueChange={ (newValue: TSkin) => this.handleChangeSkin(newValue) }
-            />
+            <>
+                <FlexSpacer />
+                <Checkbox label="Show theme specific props" value={ this.isSkin() } onValueChange={ this.handleChangeSkin } />
+                <Tooltip content={ CONTROL_DESCRIPTION } color="inverted">
+                    <IconContainer icon={ InfoIcon } cx={ css.infoIcon } />
+                </Tooltip>
+            </>
         );
     }
 
@@ -104,7 +118,7 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
             <FlexRow
                 rawProps={ { role: 'tablist' } }
                 padding="12"
-                cx={ [css.uuiThemePromo, css.secondaryNavigation] }
+                cx={ [css.secondaryNavigation] }
                 borderBottom
             >
                 <TabButton
@@ -119,8 +133,7 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
                     isLinkActive={ this.getMode() === TMode.propsEditor }
                     onClick={ () => this.handleChangeMode(TMode.propsEditor) }
                 />
-                <FlexSpacer />
-                {this.getMode() === TMode.propsEditor && this.renderSkinSwitcher()}
+                {this.renderSkinSwitcher()}
             </FlexRow>
         );
     }
@@ -130,28 +143,31 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
     };
 
     private renderPropsEditor() {
-        const skin = this.getSkin();
+        const isSkin = this.isSkin();
+        const theme = this.getTheme();
+
         return (
             <ComponentEditorWrapper
                 onRedirectBackToDocs={ () => this.handleChangeMode(TMode.doc) }
                 config={ this.config }
                 title={ this.title }
-                skin={ skin }
+                isSkin={ isSkin }
+                theme={ theme }
             />
         );
     }
 
     protected renderSectionTitle(title: string) {
         return (
-            <RichTextView cx={ css.themePromo }>
+            <RichTextView>
                 <h2>{title}</h2>
             </RichTextView>
         );
     }
 
     protected renderDocTitle() {
         return (
-            <RichTextView cx={ css.themePromo }>
+            <RichTextView>
                 <h1>{this.title}</h1>
             </RichTextView>
         );
@@ -169,39 +185,30 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
         );
     }
 
-    handlePortalTheme(prop: 'clear' | TSkin) {
-        // TODO: remove this when all our site will use one 'theme-color-picker' with PropertyExplorer
-        const portalId = this.context.uuiLayout.getPortalRootId();
-        const rootPortal = document.getElementById(portalId);
+    private handleChangeSkin = () => {
+        const isSkin = this.isSkin();
 
-        if (prop === 'clear') {
-            rootPortal.className = '';
-        } else {
-            rootPortal.className = themeName[prop];
-        }
-    }
-
-    private handleChangeSkin(skin: TSkin) {
-        this.handlePortalTheme(skin);
-        this.handleNav({ skin });
-    }
+        localStorage.setItem('app-theme-context', JSON.stringify({ isSkin: !isSkin }));
+        this.handleNav({ isSkin: !isSkin });
+    };
 
     private handleChangeMode(mode: TMode) {
-        this.handlePortalTheme('clear');
-        this.handleNav({ mode, skin: DEFAULT_SKIN });
+        this.handleNav({ mode });
     }
 
-    private handleNav = (params: { mode?: TMode, skin?: TSkin }) => {
+    private handleNav = (params: { mode?: TMode, isSkin?: boolean, theme?: TUUITheme }) => {
         const mode: TMode = params.mode ? params.mode : this.getMode();
-        const skin: TSkin = params.skin ? params.skin : this.getSkin();
+        const isSkin: boolean = params.isSkin ?? this.isSkin();
+        const theme: TUUITheme = params.theme ? params.theme : this.getTheme();
 
         svc.uuiRouter.redirect({
             pathname: '/documents',
             query: {
                 category: 'components',
                 id: getQuery('id'),
                 mode,
-                skin,
+                isSkin: isSkin,
+                theme,
             },
         });
     };