feat: add VersionsSelect component

demo/src/Components/DocPage/index.stories.tsx

@@ -72,6 +72,18 @@ const useDirection = (lang: string) => {
     }, [lang, dir]);
 };
 
+const useVersions = () => {
+    const versions = ['v4.23.1', 'v4.23.0', 'v4.22.0'];
+    const version = versions[0];
+    const onChangeVersion = () => {};
+
+    return {
+        version,
+        versions,
+        onChangeVersion,
+    };
+};
+
 const useLangs = () => {
     const langs = ['ru', 'en', 'cs', 'he'];
     const [lang, onChangeLang] = useState(DEFAULT_SETTINGS.lang);
@@ -216,6 +228,7 @@ const DocPageDemo = (
     const vcsType = args['VCS'];
     const router = {pathname: '/docs/overview/security-and-compliance/'};
 
+    const versions = useVersions();
     const settings = useSettings();
     const langs = useLangs();
     const fullscreen = useFullscreen();
@@ -251,6 +264,7 @@ const DocPageDemo = (
     Object.assign(
         props,
         ...[
+            args['Versions'] && versions,
             args['Search'] && search,
             args['Settings'] && settings,
             args['Langs'] && langs,
@@ -289,6 +303,9 @@ export default {
     title: 'Pages/Document',
     component: DocPageDemo,
     argTypes: {
+        Versions: {
+            control: 'boolean',
+        },
         Settings: {
             control: 'boolean',
         },
@@ -332,6 +349,7 @@ export default {
 
 export const Document = {
     args: {
+        Versions: true,
         Settings: true,
         Langs: true,
         Fullscreen: true,

src/components/Controls/Controls.tsx

@@ -15,6 +15,7 @@ import {
     PdfControl,
     SettingsControl,
     SinglePageControl,
+    VersionControl,
 } from './';
 
 // eslint-disable-next-line import/order
@@ -35,6 +36,7 @@ export interface ControlsProps {
     vcsType?: string;
     isLiked?: boolean;
     isDisliked?: boolean;
+    onChangeVersion?: (version: string) => void;
     onChangeLang?: (lang: `${Lang}` | Lang) => void;
     onChangeFullScreen?: (value: boolean) => void;
     onChangeSinglePage?: (value: boolean) => void;
@@ -45,6 +47,8 @@ export interface ControlsProps {
     onSendFeedback?: (data: FeedbackSendData) => void;
     onSubscribe?: (data: SubscribeData) => void;
     onEditClick?: () => void;
+    versions?: string[];
+    version?: string;
     pdfLink?: string;
     className?: string;
     hideEditControl?: boolean;
@@ -59,18 +63,16 @@ function hasLangs(langs?: (`${Lang}` | Lang)[]) {
     return langs?.length && langs.length > 1;
 }
 
-const Controls = memo<ControlsProps>((props) => {
-    const {isVerticalView} = useContext(ControlsLayoutContext);
+function hasVersions(versions?: string[]) {
+    return versions?.length && versions.length > 1;
+}
+
+function getControlFlags(props: ControlsProps) {
     const {
-        className,
-        fullScreen,
         singlePage,
-        theme,
-        wideFormat,
-        showMiniToc,
         hideEditControl,
         hideFeedbackControls,
-        textSize,
+        onChangeVersion,
         onChangeFullScreen,
         onChangeTheme,
         onChangeShowMiniToc,
@@ -80,16 +82,15 @@ const Controls = memo<ControlsProps>((props) => {
         onChangeSinglePage,
         onSendFeedback,
         onSubscribe,
-        onEditClick,
+        version,
+        versions,
         lang,
         langs,
         pdfLink,
         vcsUrl,
-        vcsType,
-        isLiked,
-        isDisliked,
     } = props;
 
+    const withVersionControl = Boolean(version && hasVersions(versions) && onChangeVersion);
     const withFullscreenControl = Boolean(onChangeFullScreen);
     const withSettingsControl = Boolean(
         onChangeWideFormat || onChangeTheme || onChangeShowMiniToc || onChangeTextSize,
@@ -101,15 +102,70 @@ const Controls = memo<ControlsProps>((props) => {
     const withFeedbackControl = Boolean(!singlePage && !hideFeedbackControls && onSendFeedback);
     const withSubscribeControls = Boolean(!singlePage && onSubscribe);
 
+    return {
+        withVersionControl,
+        withFullscreenControl,
+        withSettingsControl,
+        withLangControl,
+        withSinglePageControl,
+        withPdfControl,
+        withEditControl,
+        withFeedbackControl,
+        withSubscribeControls,
+    };
+}
+
+const Controls = memo<ControlsProps>((props) => {
+    const {isVerticalView} = useContext(ControlsLayoutContext);
+    const {
+        className,
+        fullScreen,
+        singlePage,
+        theme,
+        wideFormat,
+        showMiniToc,
+        textSize,
+        onChangeVersion,
+        onChangeFullScreen,
+        onChangeTheme,
+        onChangeShowMiniToc,
+        onChangeTextSize,
+        onChangeWideFormat,
+        onChangeLang,
+        onChangeSinglePage,
+        onSendFeedback,
+        onSubscribe,
+        onEditClick,
+        version,
+        versions,
+        lang,
+        langs,
+        pdfLink,
+        vcsUrl,
+        vcsType,
+        isLiked,
+        isDisliked,
+    } = props;
+
+    const controlFlags = getControlFlags(props);
+
     const controls = [
-        withFullscreenControl && (
+        controlFlags.withVersionControl && (
+            <VersionControl
+                version={version ?? ''}
+                versions={versions ?? []}
+                onChange={onChangeVersion ?? ((_version: string) => {})}
+            />
+        ),
+        controlFlags.withVersionControl && '---',
+        controlFlags.withFullscreenControl && (
             <FullScreenControl
                 key="fullscreen-control"
                 value={fullScreen}
                 onChange={onChangeFullScreen}
             />
         ),
-        withSettingsControl && (
+        controlFlags.withSettingsControl && (
             <SettingsControl
                 key="settings-control"
                 theme={theme}
@@ -122,24 +178,26 @@ const Controls = memo<ControlsProps>((props) => {
                 onChangeWideFormat={onChangeWideFormat}
             />
         ),
-        withLangControl && (
+        controlFlags.withLangControl && (
             <LangControl
                 key="lang-control"
                 lang={lang as Lang}
                 langs={langs}
                 onChangeLang={onChangeLang as Defined['onChangeLang']}
             />
         ),
-        withSinglePageControl && (
+        controlFlags.withSinglePageControl && (
             <SinglePageControl
                 key="single-page-control"
                 value={singlePage}
                 onChange={onChangeSinglePage as Defined['onChangeSinglePage']}
             />
         ),
-        withPdfControl && <PdfControl key="pdf-control" pdfLink={pdfLink as Defined['pdfLink']} />,
+        controlFlags.withPdfControl && (
+            <PdfControl key="pdf-control" pdfLink={pdfLink as Defined['pdfLink']} />
+        ),
         '---',
-        withEditControl && (
+        controlFlags.withEditControl && (
             <EditControl
                 key="edit-control"
                 vcsUrl={vcsUrl as Defined['vcsUrl']}
@@ -148,7 +206,7 @@ const Controls = memo<ControlsProps>((props) => {
             />
         ),
         '---',
-        withFeedbackControl && (
+        controlFlags.withFeedbackControl && (
             <Feedback
                 key="feedback-control"
                 isLiked={isLiked}
@@ -158,7 +216,7 @@ const Controls = memo<ControlsProps>((props) => {
             />
         ),
         '---',
-        withSubscribeControls && (
+        controlFlags.withSubscribeControls && (
             <Subscribe
                 key="subscribe-control"
                 onSubscribe={onSubscribe as Defined['onSubscribe']}

src/components/Controls/single-controls/VersionControl/VersionControl.scss

@@ -0,0 +1,3 @@
+.dc-version-control {
+    margin-left: 12px;
+}

src/components/Controls/single-controls/VersionControl/VersionControl.tsx

@@ -0,0 +1,43 @@
+import React, {useCallback, useState} from 'react';
+import {Select} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import {useTranslation} from '../../../../hooks';
+
+import './VersionControl.scss';
+
+export interface VersionControlProps {
+    version: string;
+    versions: string[];
+    onChange: (version: string) => void;
+    className?: string;
+}
+
+const b = cn('dc-version-control');
+
+const VersionControl: React.FC<VersionControlProps> = (props) => {
+    const {version: defaultVersion, versions, className, onChange} = props;
+    const [version, setVersion] = useState<string>(defaultVersion);
+
+    const {t} = useTranslation('header');
+
+    const onUpdate = useCallback(
+        (selected: string[]) => {
+            onChange(selected[0]);
+            setVersion(selected[0]);
+        },
+        [onChange, setVersion],
+    );
+
+    return (
+        <Select
+            placeholder={t('versions-select-placeholder')}
+            value={[version]}
+            options={versions.map((value) => ({value, content: value}))}
+            onUpdate={onUpdate}
+            className={b(null, className)}
+        />
+    );
+};
+
+export default VersionControl;

src/components/Controls/single-controls/index.ts

@@ -5,3 +5,4 @@ export {default as LangControl} from './LangControl/LangControl';
 export {default as DividerControl} from './DividerControl/DividerControl';
 export {default as PdfControl} from './PdfControl';
 export {default as EditControl} from './EditControl';
+export {default as VersionControl} from './VersionControl/VersionControl';

src/components/DocPage/DocPage.scss

@@ -83,6 +83,9 @@
         }
 
         & > .dc-controls {
+            width: 196px;
+            padding-bottom: 6px;
+            overflow-x: auto;
             position: fixed;
             top: calc(6px + var(--dc-header-height, #{variables.$headerHeight}));
 

src/components/DocPage/DocPage.tsx

@@ -62,6 +62,7 @@ export interface DocPageProps extends DocPageData, DocSettings, NotificationProp
     renderLoader?: () => React.ReactNode;
     convertPathToOriginalArticle?: (path: string) => string;
     generatePathToVcs?: (path: string) => string;
+    onChangeVersion?: (version: string) => void;
     onChangeLang?: (lang: `${Lang}` | Lang) => void;
     onChangeFullScreen?: (value: boolean) => void;
     onChangeSinglePage?: (value: boolean) => void;
@@ -77,6 +78,8 @@ export interface DocPageProps extends DocPageData, DocSettings, NotificationProp
     pdfLink?: string;
     onMiniTocItemClick?: (event: MouseEvent) => void;
     useMainTag?: boolean;
+    versions?: string[];
+    version?: string;
 }
 
 type DocPageInnerProps = InnerProps<DocPageProps, DocSettings>;
@@ -625,6 +628,8 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
 
     private renderControls() {
         const {
+            version,
+            versions,
             lang,
             langs,
             textSize,
@@ -634,6 +639,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
             singlePage,
             vcsUrl,
             vcsType,
+            onChangeVersion,
             onChangeLang,
             onChangeFullScreen,
             onChangeWideFormat,
@@ -659,6 +665,8 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
             <div className={b('controls', {vertical: isVerticalView})}>
                 <ControlsLayout isVerticalView={isVerticalView}>
                     <Controls
+                        version={version}
+                        versions={versions}
                         lang={lang}
                         langs={langs}
                         textSize={textSize}
@@ -671,6 +679,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
                         vcsType={vcsType as VcsType}
                         isLiked={isLiked}
                         isDisliked={isDisliked}
+                        onChangeVersion={onChangeVersion}
                         onChangeLang={onChangeLang}
                         onChangeFullScreen={onChangeFullScreen}
                         onChangeWideFormat={onChangeWideFormat}

src/i18n/ar.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "الصفحة التالية",
     "prev": "الصفحة السابقة"
+  },
+  "header": {
+    "versions-select-placeholder": "الإصدارات"
   }
 }

src/i18n/bg.json

@@ -129,5 +129,8 @@
   "paginator": {
     "next": "Следваща страница",
     "prev": "Предходна страница"
+  },
+  "header": {
+    "versions-select-placeholder": "Версии"
   }
 }

src/i18n/cs.json

@@ -133,5 +133,8 @@
   },
   "updated-at-date": {
     "title": "Aktualizováno na"
+  },
+  "header": {
+    "versions-select-placeholder": "Verze"
   }
 }

src/i18n/el.json

@@ -130,5 +130,8 @@
   "paginator": {
     "next": "Επόμενη σελίδα",
     "prev": "Προηγούμενη σελίδα"
+  },
+  "header": {
+    "versions-select-placeholder": "Εκδόσεις"
   }
 }