diff --git a/demo/package-lock.json b/demo/package-lock.json index d2072b94..b1af6af8 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -38,20 +38,17 @@ } }, "..": { - "name": "@diplodoc/components", - "version": "4.7.0", + "version": "3.10.0-beta.0", "license": "MIT", "dependencies": { - "@gravity-ui/components": "^3.6.0", "@gravity-ui/icons": "^2.5.0", - "@gravity-ui/uikit": "^6.2.0", + "@gravity-ui/uikit": "^6.0.0", "@popperjs/core": "^2.11.2", "bem-cn-lite": "4.1.0", "i18next": "^19.9.2", "langs": "^2.0.0", "lodash": "^4.17.21", "mark.ts": "^1.0.5", - "react-gtm-module": "^2.0.11", "react-hotkeys-hook": "^3.3.1", "react-i18next": "11.15.6", "react-popper": "^2.2.5", @@ -67,13 +64,12 @@ "@types/lodash": "4.14.179", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "@types/react-gtm-module": "^2.0.3", "autoprefixer": "^10.4.15", "esbuild": "^0.19.2", "esbuild-sass-plugin": "^2.13.0", "eslint": "^8.48.0", "husky": "^8.0.3", - "lint-staged": "^12.5.0", + "lint-staged": "^14.0.1", "npm-run-all": "^4.1.5", "postcss": "^8.4.28", "postcss-preset-env": "^9.1.2", @@ -81,6 +77,7 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "rimraf": "^5.0.1", "sass": "^1.66.1", "stylelint": "^15.10.3", "svgo": "2.8.0", @@ -18711,19 +18708,17 @@ "@diplodoc/components": { "version": "file:..", "requires": { - "@gravity-ui/components": "^3.6.0", "@gravity-ui/eslint-config": "^2.2.0", "@gravity-ui/icons": "^2.5.0", "@gravity-ui/prettier-config": "^1.0.1", "@gravity-ui/stylelint-config": "^3.0.0", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^6.2.0", + "@gravity-ui/uikit": "^6.0.0", "@popperjs/core": "^2.11.2", "@types/langs": "^2.0.1", "@types/lodash": "4.14.179", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "@types/react-gtm-module": "^2.0.3", "autoprefixer": "^10.4.15", "bem-cn-lite": "4.1.0", "esbuild": "^0.19.2", @@ -18732,7 +18727,7 @@ "husky": "^8.0.3", "i18next": "^19.9.2", "langs": "^2.0.0", - "lint-staged": "^12.5.0", + "lint-staged": "^14.0.1", "lodash": "^4.17.21", "mark.ts": "^1.0.5", "npm-run-all": "^4.1.5", @@ -18742,10 +18737,10 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-gtm-module": "^2.0.11", "react-hotkeys-hook": "^3.3.1", "react-i18next": "11.15.6", "react-popper": "^2.2.5", + "rimraf": "^5.0.1", "sass": "^1.66.1", "scroll-into-view-if-needed": "2.2.29", "stylelint": "^15.10.3", diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss index 7690e681..d623134d 100644 --- a/src/components/DocLayout/DocLayout.scss +++ b/src/components/DocLayout/DocLayout.scss @@ -81,19 +81,8 @@ @media (max-width: map-get($screenBreakpoints, 'md') - 1) { flex-direction: column-reverse; - &__center + &__right:has(> .dc-subnavigation_invisible) { - margin-top: calc(0px - var(--dc-subheader-height, 52px)); - } - &__right { - position: sticky; - top: calc(var(--dc-header-height) - 1px); - left: 0; - z-index: 119; - - height: fit-content; - width: 100%; - padding: 0; + display: none; } &__left { @@ -104,7 +93,6 @@ position: static; width: auto; height: auto; - padding: 0 20px; .dc-toc { /* stylelint-disable-next-line declaration-no-important */ diff --git a/src/components/DocLeadingPage/DocLeadingPage.scss b/src/components/DocLeadingPage/DocLeadingPage.scss index cb602e78..60845b62 100644 --- a/src/components/DocLeadingPage/DocLeadingPage.scss +++ b/src/components/DocLeadingPage/DocLeadingPage.scss @@ -20,10 +20,6 @@ margin: 40px 0 $normalOffset; @include text-size(display-2); - - @media (max-width: map-get($screenBreakpoints, 'md') - 1) { - margin-top: 20px; - } } &__description { @@ -47,10 +43,6 @@ flex-direction: row; margin-top: 70px; margin-bottom: -$blockMarginBottomLarge; - - @media (max-width: map-get($screenBreakpoints, 'md') - 1) { - margin-top: 20px; - } } } diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss index c631c417..5aff0a1c 100644 --- a/src/components/DocPage/DocPage.scss +++ b/src/components/DocPage/DocPage.scss @@ -27,41 +27,6 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); @include text-size(body-1); - @media (max-width: map-get($screenBreakpoints, 'md') - 1) { - position: absolute; - top: var(--dc-subheader-height); - z-index: 117; - - display: flex; - flex-direction: column; - align-items: flex-start; - - box-sizing: border-box; - max-height: 0px; - width: 100%; - padding: 0 16px 0 16px; - - background: var(--g-color-base-background, #FFF); - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15); - - transition: max-height 300ms 0s;; - - overflow-y: hidden; - - &_open-mini-toc { - max-height: 80vh; - } - - &_hidden-mini-toc { - padding: 0; - } - - &-mini-toc { - width: 100%; - padding: 16px 0 16px 0; - } - } - @media screen and (min-width: 1280px) { & { width: 200px; @@ -92,11 +57,11 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } &__controls { - display: none; + display: flex; top: 0; align-items: center; height: 40px; - z-index: 121; + z-index: 102; position: absolute; right: 7px; @@ -115,8 +80,6 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } @media (min-width: map-get($screenBreakpoints, 'md')) { - display: flex; - &_vertical { top: calc(6px + var(--dc-header-height, #{$headerHeight})); justify-content: center; @@ -182,13 +145,9 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } &__title { - margin-top: 20px; + margin-bottom: 12px; @include text-size(display-2); - - @media (min-width: map-get($screenBreakpoints, 'md')) { - margin-bottom: 12px; - } } &__content { @@ -263,16 +222,15 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); @media (max-width: map-get($screenBreakpoints, 'md') - 1) { &__main { - margin-top: var(--dc-subheader-height); padding: 0 20px; } &__breadcrumbs { padding: 0 20px; } - /* CHECK display: block; temporarily hidden */ + &__content-mini-toc { - display: none; + display: block; } &__toc-nav-panel { @@ -369,7 +327,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } & > p { - margin: 0 0 10px; + margin: 0 0 10px 0; &:first-child { &::before { @@ -390,10 +348,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } $colors: ( - dc-accent-info: $infoColor, - dc-accent-tip: $tipColor, - dc-accent-alert: $importantColor, - dc-accent-warning: $warningColor, + dc-accent-info: $infoColor, + dc-accent-tip: $tipColor, + dc-accent-alert: $importantColor, + dc-accent-warning: $warningColor ); @each $type, $color in $colors { @@ -407,10 +365,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } $backgroundColors: ( - dc-accent-info: $infoBackgroundColor, - dc-accent-tip: $tipBackgroundColor, - dc-accent-alert: $importantBackgroundColor, - dc-accent-warning: $warningBackgroundColor, + dc-accent-info: $infoBackgroundColor, + dc-accent-tip: $tipBackgroundColor, + dc-accent-alert: $importantBackgroundColor, + dc-accent-warning: $warningBackgroundColor ); @each $type, $color in $backgroundColors { diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx index 1c363aff..fd7bf48e 100644 --- a/src/components/DocPage/DocPage.tsx +++ b/src/components/DocPage/DocPage.tsx @@ -28,7 +28,6 @@ import {Feedback, FeedbackView} from '../Feedback'; import {HTML} from '../HTML'; import {MiniToc} from '../MiniToc'; import {SearchBar, withHighlightedSearchWords} from '../SearchBar'; -import {SubNavigation} from '../SubNavigation'; import {TocNavPanel} from '../TocNavPanel'; import UpdatedAtDate from '../UpdatedAtDate/UpdatedAtDate'; @@ -85,7 +84,6 @@ export interface DocPageProps extends DocPageData, DocSettings { type DocPageInnerProps = InnerProps; type DocPageState = { - mobileMiniTocOpen: boolean; loading: boolean; keyDOM: number; showNotification: boolean; @@ -102,7 +100,6 @@ class DocPage extends React.Component { super(props); this.state = { - mobileMiniTocOpen: false, loading: props.singlePage, keyDOM: getRandomKey(), showNotification: true, @@ -158,7 +155,6 @@ class DocPage extends React.Component { 'full-screen': fullScreen, 'hidden-mini-toc': hideMiniToc, 'single-page': singlePage, - 'open-mini-toc': this.state.mobileMiniTocOpen, }; return ( @@ -168,6 +164,7 @@ class DocPage extends React.Component { headerHeight={headerHeight} className={b(modes)} fullScreen={fullScreen} + hideRight={hideMiniToc} tocTitleIcon={tocTitleIcon} wideFormat={wideFormat} hideTocHeader={hideTocHeader} @@ -197,18 +194,9 @@ class DocPage extends React.Component { {this.renderSinglePageControls()} - - this.setState({mobileMiniTocOpen: !this.state.mobileMiniTocOpen}) - } - closeMiniToc={() => this.setState({mobileMiniTocOpen: false})} - /> {/* This key allows recalculating the offset for the mini-toc for Safari */}
{hideMiniToc ? null : this.renderAsideMiniToc()} diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss index 203dee03..121813d4 100644 --- a/src/components/MiniToc/MiniToc.scss +++ b/src/components/MiniToc/MiniToc.scss @@ -10,10 +10,6 @@ color: var(--g-color-text-primary); margin-bottom: 12px; margin-top: 0; - - @media (max-width: map-get($screenBreakpoints, 'md') - 1) { - margin-bottom: 8px; - } } &__sections { @@ -22,14 +18,8 @@ height: calc( 100vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height) ); - overflow: hidden auto; - - @media (max-width: map-get($screenBreakpoints, 'md') - 1) { - height: fit-content; - max-height: calc( - 80vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height) - ); - } + overflow-y: auto; + overflow-x: hidden; } &__section { diff --git a/src/components/SubNavigation/SubNavigation.scss b/src/components/SubNavigation/SubNavigation.scss deleted file mode 100644 index e16d011b..00000000 --- a/src/components/SubNavigation/SubNavigation.scss +++ /dev/null @@ -1,98 +0,0 @@ -@import '../../styles/variables'; -@import '../../styles/mixins'; - -.dc-subnavigation { - position: absolute; - z-index: 119; - - display: flex; - - width: calc(100% - 12px - 12px); - height: 44px; - padding: 4px 12px; - - gap: 4px; - - background: var(--g-color-base-background, #fff); - border-bottom: 1px solid var(--g-color-line-generic, #0000001a); - - @media (min-width: map-get($screenBreakpoints, 'md')) { - display: none; - } - - &__left { - display: flex; - align-items: center; - justify-content: flex-start; - flex: 1 0 0; - - width: 100%; - padding: 0; - gap: 4px; - - text-decoration: none; - - color: var(--g-color-text-primary, rgba(0, 0, 0, 0.85)); - background: none; - border-radius: var(--g-border-radius-xs, 3px); - border: none; - outline: none; - - transition: transform 0.1s ease-out, color 0.15s linear; - transform: scale(1); - - touch-action: manipulation; - - &:hover { - background: var(--g-color-base-simple-hover, rgba(0, 0, 0, 0.05)); - } - - &:active { - transition: none; - transform: scale(0.98); - } - - &:focus-visible { - outline: var(--g-color-line-focus, rgb(78, 121, 235)); - outline-width: 2px; - outline-style: solid; - } - - &_hidden { - visibility: hidden; - } - } - - &__icon { - display: flex; - justify-content: center; - align-items: center; - - padding: 12px; - } - - &__title { - @include text-size(subheader-2); - font-weight: 400; - } - - transition: margin-top 300ms 0s; - - &_hidden { - --dc-header-height: 64px; - margin-top: calc(0px - var(--dc-header-height, 64px)); - } - - &_visible { - margin-top: 0; - } - - &_invisible { - border: none; - background: none; - } - - &_invisible &__button { - margin-top: 8px; - } -} diff --git a/src/components/SubNavigation/SubNavigation.tsx b/src/components/SubNavigation/SubNavigation.tsx deleted file mode 100644 index f3a24ae4..00000000 --- a/src/components/SubNavigation/SubNavigation.tsx +++ /dev/null @@ -1,203 +0,0 @@ -import React, {useCallback, useEffect, useMemo, useState} from 'react'; - -import {ArrowShapeTurnUpRight, SquareListUl} from '@gravity-ui/icons'; -import {Button} from '@gravity-ui/uikit'; -import block from 'bem-cn-lite'; - -import './SubNavigation.scss'; - -const b = block('dc-subnavigation'); - -export type ShareData = { - title: string | undefined; - url?: string; -}; - -const useVisibility = (miniTocOpened: boolean, closeMiniToc: () => void) => { - const [visibility, setVisibility] = useState(true); - const [hiddingTimeout, setHiddingTimeout] = useState(undefined); - const [lastScrollY, setLastScrollY] = useState( - typeof window === 'undefined' ? null : window.screenY, - ); - - const clickOutsideMiniToc = useCallback( - (event: MouseEvent) => { - /* - * func "composedPath" returns an array in which the last two elements are "HTML" and "#document", - * which do not have the classList property, so they are subtracted before checking by slice() - */ - const isOutside = !event - .composedPath() - .slice(0, -2) - .some((item) => { - const el = item as HTMLElement; - const classes = el.classList ?? []; - - return classes?.contains('dc-doc-layout__right'); - }); - - if (isOutside) { - closeMiniToc(); - } - }, - [closeMiniToc], - ); - - const controlVisibility = useCallback(() => { - if (typeof window === 'undefined') { - return; - } - - if (miniTocOpened) { - setVisibility(true); - return; - } - - if (lastScrollY && lastScrollY === 0) { - setVisibility(true); - } - - if (lastScrollY && window.scrollY > lastScrollY) { - if (hiddingTimeout) { - return; - } - - setVisibility(false); - - setHiddingTimeout( - window.setTimeout(() => { - window.clearTimeout(hiddingTimeout); - setHiddingTimeout(undefined); - }, 300), - ); - } else if (lastScrollY && window.scrollY < lastScrollY) { - setVisibility(true); - } - - setLastScrollY(window.scrollY); - }, [ - miniTocOpened, - lastScrollY, - hiddingTimeout, - setLastScrollY, - setVisibility, - setHiddingTimeout, - ]); - - useEffect(() => { - if (typeof window === 'undefined') { - return; - } - - if (window.scrollY === 0) { - return; - } - - setHiddingTimeout( - window.setTimeout(() => { - setLastScrollY(window.scrollY); - setHiddingTimeout(undefined); - }, 100), - ); - }, []); - - useEffect(() => { - if (typeof window === 'undefined') { - return () => {}; - } - - window.addEventListener('scroll', controlVisibility); - - return () => { - window.removeEventListener('scroll', controlVisibility); - }; - }, [controlVisibility]); - - useEffect(() => { - document.addEventListener('click', clickOutsideMiniToc, true); - - return () => { - document.removeEventListener('click', clickOutsideMiniToc, true); - }; - }, [clickOutsideMiniToc]); - - return visibility; -}; - -const useShareHandler = (title: string | undefined) => { - const shareData = useMemo(() => { - return { - title, - url: typeof window === 'undefined' ? undefined : window.location.href, - }; - }, [title]); - - const shareHandler = useCallback(() => { - if (navigator && navigator.share) { - navigator - .share(shareData) - .then(() => {}) - .catch((error) => console.error('Error sharing', error)); - } else { - console.log('Share not supported', shareData); - } - }, [shareData]); - - return shareHandler; -}; - -export interface SubNavigationProps { - title: string | undefined; - hideMiniToc: boolean; - miniTocOpened: boolean; - toggleMiniTocOpen: () => void; - closeMiniToc: () => void; -} - -export const SubNavigation = ({ - title, - hideMiniToc, - miniTocOpened, - toggleMiniTocOpen, - closeMiniToc, -}: SubNavigationProps) => { - const visibility = useVisibility(miniTocOpened, closeMiniToc); - const shareHandler = useShareHandler(title); - - return ( -
- - -
- ); -}; - -export default SubNavigation; diff --git a/src/components/SubNavigation/index.ts b/src/components/SubNavigation/index.ts deleted file mode 100644 index 49a548a7..00000000 --- a/src/components/SubNavigation/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './SubNavigation'; -export {default as SubNavigation} from './SubNavigation'; diff --git a/src/index.ts b/src/index.ts index 91d68ac7..c152200e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -25,7 +25,6 @@ export * from './components/Paginator'; export * from './components/SearchItem'; export * from './components/SearchPage'; export * from './components/DocContentPage'; -export * from './components/SubNavigation'; export * from './config'; export * from './models'; diff --git a/src/themes/common/index.scss b/src/themes/common/index.scss index e8a3c139..d8cc549a 100644 --- a/src/themes/common/index.scss +++ b/src/themes/common/index.scss @@ -16,7 +16,7 @@ --dc-text-highlight: var(--g-color-base-warning-heavy); --dc-text-highlight-selected: #ffab3b; --dc-header-height: 0px; - --dc-subheader-height: 52px; + --dc-subheader-height: 40px; --dc-error-image-403: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); --dc-error-image-404: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');