feat/tokenized-gradients: fix doc style

VKCOM · Sep 25, 2024 · 01ee134 · 01ee134
1 parent b1f3779
commit 01ee134
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 6 deletions.
diff --git a/docs/src/App.tsx b/docs/src/App.tsx
@@ -52,6 +52,10 @@ const router = createBrowserRouter([
 		)),
 ]);
 
+router.subscribe(() => {
+	window.scrollTo(0, 0);
+});
+
 const App: FC = () => (
 	<Main>
 		<RouterProvider router={router} />

diff --git a/docs/src/components/layouts/shared/AsideMenu/AsideMenu.tsx b/docs/src/components/layouts/shared/AsideMenu/AsideMenu.tsx
@@ -25,17 +25,17 @@ export function AsideMenu(props: AsideMenuProps) {
                 {items.map((item) => {
                     if (item.slug) {
                         return (
-                            <div className="aside-menu-item">
+                            <div className="aside-menu-item" key={item.title}>
                                 <Link to={`/articles/${item.slug}`}>{item.title}</Link>
                             </div>
                         );
                     } else {
                         return (
-                            <>
+                            <React.Fragment key={item.title}>
                                 <Spacing size={20}/>
                                 <Title level="3">{item.title}</Title>
                                 <Spacing size={8}/>
-                            </>
+                            </React.Fragment>
                         )
                     }
                 })}

diff --git a/docs/src/components/pages/Tokens/TokensHeader.tsx b/docs/src/components/pages/Tokens/TokensHeader.tsx
@@ -1,5 +1,6 @@
-import { Icon16Linked } from '@vkontakte/icons';
+import { Icon16Linked, Icon16HelpOutline } from '@vkontakte/icons';
 import { Link, Title, useAdaptivityWithJSMediaQueries } from '@vkontakte/vkui';
+import { Link as RouterLink } from 'react-router-dom';
 import clsx from 'clsx';
 import React, { FC } from 'react';
 
@@ -42,6 +43,14 @@ const TokensHeader: FC = () => {
 						{version.text}
 					</Link>
 				</div>
+				<div className="flex items-center" style={styles.linkContainer}>
+					<Icon16HelpOutline  style={{ color: '#99A2AD', marginRight: 6 }}/>
+					<RouterLink to="/articles/new-theme" style={{textDecoration: 'none'}}>
+						<Link>
+							Документация
+						</Link>
+					</RouterLink>
+				</div>
 				<div className="flex items-center" style={styles.linkContainer}>
 					<Icon16Linked style={{ color: '#99A2AD', marginRight: 6 }} />
 					<Link href="https://github.com/VKCOM/vkui-tokens" target="_blank">

diff --git a/docs/src/pages/Articles.tsx b/docs/src/pages/Articles.tsx
@@ -152,7 +152,7 @@ export function Articles(props: ArticlesProps) {
             const link = links[i] as HTMLElement;
             link.setAttribute("target", "_blank");
         }
-    }, [ref.current]);
+    }, [ref.current, articleContent]);
 
     return (
         <div className={`articles ${isMobile ? 'articles__mobile' : ''}`}>

diff --git a/docs/src/styles/articles.css b/docs/src/styles/articles.css
@@ -77,14 +77,17 @@
 
 .articles a, .articles a:visited {
     color: var(--vkui--color_text_link);
+    text-decoration: none;
 }
 
 .articles a:hover {
     color: var(--vkui--color_text_link--hover);
+    text-decoration: underline;
 }
 
 .articles a:active {
     color: var(--vkui--color_text_link--active);
+    text-decoration: underline;
 }
 
 .articles-container code {

diff --git a/src/build/helpers/tokenHelpers.ts b/src/build/helpers/tokenHelpers.ts
@@ -62,7 +62,7 @@ function makeOpacityPoints(count: number): OpacityPoints {
 	return result;
 }
 
-export function gradient<T extends ThemeDescription> (
+export function gradient<T extends ThemeDescription>(
 	...stops: (Property.Color | NamedTokenFunction<T>)[]
 ): TokenFunction<T> {
 	const opacityPoints = stops.length > 1 ? makeOpacityPoints(stops.length) : defaultOpacityPoints;