fix: fix logo router link rendering (#669)

gravity-ui · Oct 30, 2023 · f59ae1a · f59ae1a
1 parent 1a8bf2c
commit f59ae1a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/src/models/navigation.ts b/src/models/navigation.ts
@@ -82,6 +82,7 @@ export interface NavigationLogoData {
     icon: ImageProps;
     text?: string;
     url?: string;
+    urlTitle?: string;
 }
 
 export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<NavigationLogoData>;

diff --git a/src/navigation/__stories__/data.json b/src/navigation/__stories__/data.json
@@ -3,6 +3,7 @@
     "logo": {
       "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
       "text": "Logo",
+      "urlTitle": "Title",
       "dark": {
         "text": "Logo Dark",
         "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_dark.svg"

diff --git a/src/navigation/components/Logo/Logo.scss b/src/navigation/components/Logo/Logo.scss
@@ -6,6 +6,7 @@ $block: '.#{$ns}logo';
 #{$block} {
     display: flex;
     align-items: center;
+    text-decoration: none;
 
     &__icon {
         display: flex;

diff --git a/src/navigation/components/Logo/Logo.tsx b/src/navigation/components/Logo/Logo.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, {Fragment, useContext} from 'react';
 
 import {Image} from '../../../components';
 import {getMediaImage} from '../../../components/Media/Image/utils';
 import RouterLink from '../../../components/RouterLink/RouterLink';
+import {LocationContext} from '../../../context/locationContext';
 import {useTheme} from '../../../context/theme';
 import {ThemedNavigationLogoData} from '../../../models';
-import {block, getThemedValue} from '../../../utils';
+import {block, getLinkProps, getThemedValue} from '../../../utils';
 
 import './Logo.scss';
 
@@ -16,17 +17,35 @@ export type LogoProps = ThemedNavigationLogoData & {
 };
 
 const Logo: React.FC<LogoProps> = (props) => {
+    const {hostname, Link} = useContext(LocationContext);
     const theme = useTheme();
     const themedLogoProps = getThemedValue(props, theme) || props;
     const imageData = getMediaImage(themedLogoProps.icon || props.icon);
     const textData = themedLogoProps.text || props.text;
+    const url = themedLogoProps.url || props.url || '/';
+    const urlTitle = themedLogoProps.urlTitle || props.urlTitle || textData;
+    const linkExtraProps = getLinkProps(url, hostname);
+    const content = (
+        <Fragment>
+            {imageData && <Image className={b('icon')} {...imageData} />}
+            <span className={b('text')}>{textData}</span>
+        </Fragment>
+    );
 
     return (
-        <RouterLink href={themedLogoProps.url || props.url || '/'} passHref>
-            <div className={b(null, props.className)}>
-                {imageData && <Image className={b('icon')} {...imageData} />}
-                <span className={b('text')}>{textData}</span>
-            </div>
+        <RouterLink href={url} passHref>
+            {Link ? (
+                <span className={b(null, props.className)}>{content}</span>
+            ) : (
+                <a
+                    className={b(null, props.className)}
+                    href={url}
+                    title={urlTitle}
+                    {...linkExtraProps}
+                >
+                    {content}
+                </a>
+            )}
         </RouterLink>
     );
 };