fix: wrap component in ContentWrapper to avoid double main tag & show…

… mini toc description (#278) * fix: show mini toc description * fix: wrap component in ContentWrapper to avoid doulbe main tag * lint * change description for navigation
diplodoc-platform · Aug 21, 2024 · ba90684 · ba90684
1 parent 3dfab00
commit ba90684
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 8 deletions.
diff --git a/src/components/ContentWrapper/ContentWrapper.tsx b/src/components/ContentWrapper/ContentWrapper.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export interface ContentWrapperProps extends React.HTMLAttributes<HTMLElement> {
+    useMainTag?: boolean;
+}
+
+export const ContentWrapper: React.FC<ContentWrapperProps> = ({
+    useMainTag = true,
+    children,
+    ...rest
+}) => {
+    const Tag = useMainTag ? 'main' : 'div';
+
+    return <Tag {...rest}>{children}</Tag>;
+};
diff --git a/src/components/ContentWrapper/index.ts b/src/components/ContentWrapper/index.ts
@@ -0,0 +1 @@
+export * from './ContentWrapper';
diff --git a/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx b/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
@@ -98,7 +98,10 @@ const SettingsControl = (props: ControlProps) => {
             onChangeShowMiniToc
                 ? {
                       text: t('label_show_mini_toc'),
-                      description: t('description_show_mini_toc'),
+                      description: t(
+                          `description_show_mini_toc_${showMiniToc ? 'enabled' : 'disabled'}`,
+                          t(`description_show_mini_toc`),
+                      ),
                       control: (
                           <Switch
                               disabled={showMiniTocDisabled}

diff --git a/src/components/DocContentPage/DocContentPage.tsx b/src/components/DocContentPage/DocContentPage.tsx
@@ -3,6 +3,7 @@ import block from 'bem-cn-lite';
 
 import {DEFAULT_SETTINGS} from '../../constants';
 import {DocContentPageData, Router} from '../../models';
+import {ContentWrapper} from '../ContentWrapper';
 import {DocLayout} from '../DocLayout';
 
 const b = block('dc-doc-page');
@@ -16,6 +17,7 @@ export interface DocContentPageProps extends DocContentPageData {
     hideTocHeader?: boolean;
     hideToc?: boolean;
     tocTitleIcon?: React.ReactNode;
+    useMainTag?: boolean;
 }
 
 export const DocContentPage: React.FC<DocContentPageProps> = ({
@@ -29,6 +31,7 @@ export const DocContentPage: React.FC<DocContentPageProps> = ({
     tocTitleIcon,
     footer,
     children,
+    useMainTag,
 }) => {
     const modes = {
         'regular-page-width': !wideFormat,
@@ -50,7 +53,9 @@ export const DocContentPage: React.FC<DocContentPageProps> = ({
         >
             <DocLayout.Center>
                 <div className={b('main')}>
-                    <main className={b('content')}>{children}</main>
+                    <ContentWrapper className={b('content')} useMainTag={useMainTag}>
+                        {children}
+                    </ContentWrapper>
                 </div>
             </DocLayout.Center>
         </DocLayout>

diff --git a/src/components/DocLeadingPage/DocLeadingPage.tsx b/src/components/DocLeadingPage/DocLeadingPage.tsx
@@ -3,6 +3,7 @@ import block from 'bem-cn-lite';
 
 import {DEFAULT_SETTINGS} from '../../constants';
 import {DocLeadingLinks, DocLeadingPageData, Router} from '../../models';
+import {ContentWrapper} from '../ContentWrapper';
 import {DocLayout} from '../DocLayout';
 import {DocPageTitle} from '../DocPageTitle';
 import {HTML} from '../HTML';
@@ -21,6 +22,7 @@ export interface DocLeadingPageProps extends DocLeadingPageData {
     hideTocHeader?: boolean;
     hideToc?: boolean;
     tocTitleIcon?: React.ReactNode;
+    useMainTag?: boolean;
 }
 
 export interface DocLinkProps {
@@ -110,6 +112,7 @@ export const DocLeadingPage: React.FC<DocLeadingPageProps> = ({
     hideToc,
     tocTitleIcon,
     footer,
+    useMainTag,
 }) => {
     const modes = {
         'regular-page-width': !wideFormat,
@@ -128,15 +131,15 @@ export const DocLeadingPage: React.FC<DocLeadingPageProps> = ({
         >
             <span />
             <DocLayout.Center>
-                <main className={b('main')}>
+                <ContentWrapper className={b('main')} useMainTag={useMainTag}>
                     <DocPageTitle stage={toc.stage} className={b('title')}>
                         <HTML>{title}</HTML>
                     </DocPageTitle>
                     <div className={b('description')}>
                         <Text data={description} html block />
                     </div>
                     <Links links={links} isRoot />
-                </main>
+                </ContentWrapper>
             </DocLayout.Center>
         </DocLayout>
     );

diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx
@@ -19,6 +19,7 @@ import {
 import {InnerProps, callSafe, getRandomKey, getStateKey, isContributor} from '../../utils';
 import {BookmarkButton} from '../BookmarkButton';
 import {Breadcrumbs} from '../Breadcrumbs';
+import {ContentWrapper} from '../ContentWrapper';
 import Contributors from '../Contributors/Contributors';
 import {Controls, ControlsLayout, EditControl} from '../Controls';
 import {DocLayout} from '../DocLayout';
@@ -79,6 +80,7 @@ export interface DocPageProps extends DocPageData, DocSettings {
         type?: string;
     };
     notificationCb?: () => void;
+    useMainTag?: boolean;
 }
 
 type DocPageInnerProps = InnerProps<DocPageProps, DocSettings>;
@@ -146,6 +148,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
             footer,
             onChangeSinglePage,
             pdfLink,
+            useMainTag,
         } = this.props;
 
         const hideMiniToc = !this.showMiniToc;
@@ -180,13 +183,13 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
                     {this.renderBreadcrumbs()}
                     {this.renderControls()}
                     <div className={b('main')}>
-                        <main className={b('content')}>
+                        <ContentWrapper className={b('content')} useMainTag={useMainTag}>
                             {this.renderTitle()}
                             {this.renderPageContributors()}
                             {hideMiniToc ? null : this.renderContentMiniToc()}
                             {this.renderBody()}
                             {this.renderFeedback()}
-                        </main>
+                        </ContentWrapper>
                         {this.renderTocNavPanel()}
                     </div>
                     {this.renderLoader()}

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -4,7 +4,8 @@
     "description_wide_format_enabled": "Enabled",
     "description_wide_format_disabled": "Disabled",
     "label_show_mini_toc": "Navigation for the article",
-    "description_show_mini_toc": "Show navigation",
+    "description_show_mini_toc_enabled": "Enabled",
+    "description_show_mini_toc_disabled": "Disabled",
     "label_dark_theme": "Dark theme",
     "description_enabled_dark_theme": "Enabled",
     "description_disabled_dark_theme": "Disabled",

diff --git a/src/i18n/ru.json b/src/i18n/ru.json
@@ -4,7 +4,8 @@
     "description_wide_format_enabled": "Включен",
     "description_wide_format_disabled": "Выключен",
     "label_show_mini_toc": "Навигация по текущей статье",
-    "description_show_mini_toc": "Показывать навигацию",
+    "description_show_mini_toc_enabled": "Включена",
+    "description_show_mini_toc_disabled": "Выключена",
     "label_dark_theme": "Темная тема",
     "description_enabled_dark_theme": "Включена",
     "description_disabled_dark_theme": "Выключена",