Merge pull request #97 from gravity-ui/feat/navigation-logo-dark-light-theme

feat(navigation): add themed logo support in navigation

Author: goshander

src/containers/PageConstructor/__stories__/PageConstructor.stories.tsx

@@ -13,6 +13,7 @@ export default {
 
 interface TemplateProps {
     items: HeaderBlockModel[];
+    navigation?: NavigationData;
 }
 
 const DefaultTemplate: Story<TemplateProps> = (args) => (
@@ -39,7 +40,7 @@ const NavigationTemplate: Story<TemplateProps> = (args) => (
         content={{
             blocks: args.items,
         }}
-        navigation={data.navigation as NavigationData}
+        navigation={args.navigation}
     />
 );
 
@@ -49,8 +50,12 @@ export const Navigation = NavigationTemplate.bind({});
 
 interface PageConstructorStoryProps {
     items: HeaderBlockModel[];
+    navigation?: NavigationData;
 }
 
 Default.args = data.default.content as PageConstructorStoryProps;
 WithFootnotes.args = data.default.content as PageConstructorStoryProps;
-Navigation.args = data.default.content as PageConstructorStoryProps;
+Navigation.args = {
+    items: data.default.content.items,
+    navigation: data.navigation,
+} as PageConstructorStoryProps;

src/containers/PageConstructor/__stories__/data.json

@@ -128,7 +128,14 @@
   "navigation": {
     "logo": {
       "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
-      "text": "Logo"
+      "text": "Logo",
+      "dark": {
+        "text": "Logo Dark",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_dark.svg"
+      },
+      "light": {
+        "text": "Logo Light"
+      }
     },
     "header": {
       "leftItems": [
@@ -138,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 {
@@ -56,6 +57,8 @@ export interface NavigationLogoData {
     url?: string;
 }
 
+export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<NavigationLogoData>;
+
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
@@ -78,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,27 +1,31 @@
-import React from 'react';
+import React, {useContext} from 'react';
 
-import {block} from '../../../utils';
-import {NavigationLogoData} from '../../../models';
+import {block, getThemedValue} from '../../../utils';
+import {ThemedNavigationLogoData} from '../../../models';
 import RouterLink from '../../../components/RouterLink/RouterLink';
 import {getMediaImage} from '../../../components/Media/Image/utils';
+import {ThemeValueContext} from '../../../context/theme/ThemeValueContext';
 import {Image} from '../../../components';
 
 import './Logo.scss';
 
 const b = block('logo');
 
-export interface LogoProps extends NavigationLogoData {
+export type LogoProps = ThemedNavigationLogoData & {
     className?: string;
-}
+};
 
-const Logo: React.FC<LogoProps> = ({icon, text, className}) => {
-    const imageData = getMediaImage(icon);
+const Logo: React.FC<LogoProps> = (props) => {
+    const {themeValue: theme} = useContext(ThemeValueContext);
+    const themedLogoProps = getThemedValue(props, theme) || props;
+    const imageData = getMediaImage(themedLogoProps.icon || props.icon);
+    const textData = themedLogoProps.text || props.text;
 
     return (
-        <RouterLink href="/" passHref>
-            <div className={b(null, className)}>
+        <RouterLink href={themedLogoProps.url || props.url || '/'} passHref>
+            <div className={b(null, props.className)}>
                 {imageData && <Image className={b('icon')} {...imageData} />}
-                <span className={b('text')}>{text}</span>
+                <span className={b('text')}>{textData}</span>
             </div>
         </RouterLink>
     );