fix: icon props

Author: berdysheva

src/components/navigation/components/Logo/Logo.scss

@@ -5,11 +5,12 @@
     display: flex;
     align-items: center;
 
-    font-weight: 500;
-    @include text-size(header-2);
+    font-weight: var(--yc-text-accent-font-weight);
+
+    @include heading4();
 
     &__icon {
-        width: 178px;
+        display: flex;
         height: 36px;
         margin-right: $indentXXXS;
 

src/components/navigation/components/Logo/Logo.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import block from 'bem-cn-lite';
 
-import {NavigationLogo} from '../../../../models/navigation';
-import {Image} from '../../../index';
+import {NavigationLogo} from '../../../../models';
 import RouterLink from '../../../RouterLink/RouterLink';
+import {getMediaImage} from '../../../Media/Image/utils';
+import {Image} from '../../../index';
 
 import './Logo.scss';
 
@@ -13,13 +14,17 @@ export interface LogoProps extends NavigationLogo {
     className?: string;
 }
 
-const Logo: React.FC<LogoProps> = ({icon, text, className}) => (
-    <RouterLink href="/" passHref>
-        <div className={b(null, className)}>
-            {icon && <Image className={b('icon')} src={icon} />}
-            <span className={b('text')}>{text}</span>
-        </div>
-    </RouterLink>
-);
+const Logo: React.FC<LogoProps> = ({icon, text, className}) => {
+    const imageData = getMediaImage(icon);
+
+    return (
+        <RouterLink href="/" passHref>
+            <div className={b(null, className)}>
+                {imageData && <Image {...imageData} />}
+                <span className={b('text')}>{text}</span>
+            </div>
+        </RouterLink>
+    );
+};
 
 export default Logo;

src/components/navigation/components/NavigationItem/NavigationItem.tsx

@@ -13,8 +13,10 @@ import {
 } from '../../../../models/navigation';
 import {NavigationArrow} from '../../../../icons';
 import SocialIcon from '../SocialIcon/SocialIcon';
+import {getMediaImage} from '../../../Media/Image/utils';
 
 import './NavigationItem.scss';
+import {ImageProps} from '../../../../models';
 
 const b = block('navigation-item');
 
@@ -33,9 +35,9 @@ export interface NavigationItemProps {
     isOpened?: boolean;
 }
 
-const Content: React.FC<{text: string; icon?: string}> = ({text, icon}) => (
+const Content: React.FC<{text: string; icon?: ImageProps}> = ({text, icon}) => (
     <Fragment>
-        {icon && <img className={b('icon')} src={icon} />}
+        {icon && <img className={b('icon')} {...icon} />}
         <span className={b('text')}>{text}</span>
     </Fragment>
 );
@@ -47,29 +49,34 @@ const NavigationDropdown: React.FC<NavigationDropdownProps> = ({
     icon,
     isOpened,
     ...props
-}) => (
-    <span {...props}>
-        <Content text={text} icon={icon} />
-        <ToggleArrow
-            className={b('dropdown')}
-            size={12}
-            type={'vertical'}
-            iconType="navigation"
-            open={isOpened}
-        />
-    </span>
-);
+}) => {
+    const iconData = icon && getMediaImage(icon);
+
+    return (
+        <span {...props}>
+            <Content text={text} icon={iconData} />
+            <ToggleArrow
+                className={b('dropdown')}
+                size={12}
+                type={'vertical'}
+                iconType="navigation"
+                open={isOpened}
+            />
+        </span>
+    );
+};
 
 type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
 
 const NavigationLink: React.FC<NavigationLinkProps> = (props) => {
     const {hostname} = useContext(LocationContext);
     const {url, text, icon, arrow, target, ...rest} = props;
     const linkExtraProps = getLinkProps(url, hostname, target);
+    const iconData = icon && getMediaImage(icon);
 
     const content = (
         <Fragment>
-            <Content text={text} icon={icon} />
+            <Content text={text} icon={iconData} />
             {arrow && <NavigationArrow className={b('arrow')} />}
         </Fragment>
     );

src/components/navigation/components/SocialIcon/SocialIcon.tsx

@@ -3,6 +3,7 @@ import block from 'bem-cn-lite';
 
 import {NavigationSocialItem} from '../../../../models/navigation';
 import {Image} from '../../../index';
+import {getMediaImage} from '../../../Media/Image/utils';
 
 import './SocialIcon.scss';
 
@@ -12,10 +13,14 @@ export interface NavigationSocialItemProps extends NavigationSocialItem {
     className?: string;
 }
 
-const SocialIcon: React.FC<NavigationSocialItemProps> = ({icon, url, className}) => (
-    <a href={url} target="_blank" rel="noopener noreferrer" className={b(null, className)}>
-        <Image className={b('icon')} src={icon} />
-    </a>
-);
+const SocialIcon: React.FC<NavigationSocialItemProps> = ({icon, url, className}) => {
+    const iconData = getMediaImage(icon);
+
+    return (
+        <a href={url} target="_blank" rel="noopener noreferrer" className={b(null, className)}>
+            <Image className={b('icon')} {...iconData} />
+        </a>
+    );
+};
 
 export default SocialIcon;

src/models/index.ts

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

src/models/navigation.ts

@@ -1,4 +1,4 @@
-import {ButtonProps} from '../components/Button/Button';
+import {ImageProps, ButtonProps} from './constructor-items';
 
 export enum NavigationItemType {
     Link = 'link',
@@ -9,7 +9,7 @@ export enum NavigationItemType {
 
 export interface NavigationItemBase {
     text: string;
-    icon?: string;
+    icon?: ImageProps;
     url?: string;
 }
 
@@ -33,14 +33,14 @@ export interface NavigationDropdownItem extends NavigationItemBase {
 
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
-    icon: string;
+    icon: ImageProps;
     url: string;
 }
 
 export type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
 
 export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
-    icon: string;
+    icon: ImageProps;
     text?: string;
 }