fix: use ThemeSupporting generic type for navigation logo

Author: goshander

src/containers/PageConstructor/__stories__/data.json

@@ -145,19 +145,23 @@
           "items": [
             {
               "text": "Lorem ipsum ",
-              "url": "https://example.com"
+              "url": "https://example.com",
+              "type": "link"
             },
             {
               "text": "Dolor sit amet",
-              "url": "https://example.com"
+              "url": "https://example.com",
+              "type": "link"
             },
             {
               "text": "Consectetur adipiscing",
-              "url": "https://example.com"
+              "url": "https://example.com",
+              "type": "link"
             },
             {
               "text": "Ut enim ad minim ",
-              "url": "https://example.com"
+              "url": "https://example.com",
+              "type": "link"
             }
           ]
         },

src/models/navigation.ts

@@ -1,3 +1,4 @@
+import {ThemeSupporting} from '../utils';
 import {ImageProps, ButtonProps} from './constructor-items';
 
 export enum NavigationItemType {
@@ -50,16 +51,13 @@ export type NavigationItemData =
 
 export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 
-export interface NavigationLogoThemedData {
+export interface NavigationLogoData {
     icon: ImageProps;
     text?: string;
     url?: string;
 }
 
-export interface NavigationLogoData extends NavigationLogoThemedData {
-    dark?: NavigationLogoThemedData;
-    light?: NavigationLogoThemedData;
-}
+export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<NavigationLogoData>;
 
 export interface HeaderData {
     leftItems: NavigationItemModel[];
@@ -83,7 +81,7 @@ export interface FooterData {
 }
 
 export interface NavigationData {
-    logo: NavigationLogoData;
+    logo: ThemedNavigationLogoData;
     header: HeaderData;
     footer?: FooterData;
 }

src/navigation/components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import React, {MouseEvent, useCallback, useState} from 'react';
 
 import {block} from '../../../utils';
-import {HeaderData, NavigationLogoData} from '../../../models';
+import {HeaderData, ThemedNavigationLogoData} from '../../../models';
 import {Col, Grid, Row} from '../../../grid';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import Control from '../../../components/Control/Control';
@@ -19,7 +19,7 @@ const b = block('header');
 const ICON_SIZE = 36;
 
 export interface HeaderProps {
-    logo: NavigationLogoData;
+    logo: ThemedNavigationLogoData;
     data: HeaderData;
 }
 

src/navigation/components/Logo/Logo.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 
 import {block, getThemedValue} from '../../../utils';
-import {NavigationLogoData} from '../../../models';
+import {ThemedNavigationLogoData} from '../../../models';
 import RouterLink from '../../../components/RouterLink/RouterLink';
 import {getMediaImage} from '../../../components/Media/Image/utils';
 import {ThemeValueContext} from '../../../context/theme/ThemeValueContext';
@@ -11,9 +11,9 @@ import './Logo.scss';
 
 const b = block('logo');
 
-export interface LogoProps extends NavigationLogoData {
+export type LogoProps = ThemedNavigationLogoData & {
     className?: string;
-}
+};
 
 const Logo: React.FC<LogoProps> = (props) => {
     const {themeValue: theme} = useContext(ThemeValueContext);