feat(navigation): pass the PageConstructor's navigation prop

gravity-ui · Feb 16, 2023 · cb875ff · cb875ff
1 parent 35f367b
commit cb875ff
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 21 deletions.
diff --git a/.mocks/navigation.json b/.mocks/navigation.json
@@ -0,0 +1,101 @@
+{
+  "logo": {
+    "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
+    "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": [
+      {
+        "text": "Dropdown 1",
+        "type": "dropdown",
+        "items": [
+          {
+            "text": "Lorem ipsum",
+            "url": "https://example.com",
+            "type": "link"
+          },
+          {
+            "text": "Dolor sit amet",
+            "url": "https://example.com",
+            "type": "link"
+          },
+          {
+            "text": "Consectetur adipiscing",
+            "url": "https://example.com",
+            "type": "link"
+          },
+          {
+            "text": "Ut enim ad minim ",
+            "url": "https://example.com",
+            "type": "link"
+          }
+        ]
+      },
+      {
+        "text": "Dropdown2",
+        "type": "dropdown",
+        "items": [
+          {
+            "text": "Lorem ipsum ",
+            "url": "https://example.com"
+          },
+          {
+            "text": "Dolor sit amet",
+            "url": "https://example.com"
+          },
+          {
+            "text": "Consectetur adipiscing",
+            "url": "https://example.com"
+          },
+          {
+            "text": "Ut enim ad minim ",
+            "url": "https://example.com"
+          }
+        ]
+      },
+      {
+        "type": "link",
+        "text": "Link with spaces",
+        "url": "https://example.com",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg"
+      },
+      {
+        "type": "link",
+        "text": "Link with arrow",
+        "url": "https://example.com",
+        "arrow": true
+      },
+      {
+        "type": "link",
+        "text": "Link3",
+        "url": "https://example.com"
+      },
+      {
+        "type": "link",
+        "text": "Link4",
+        "url": "https://example.com"
+      }
+    ],
+    "rightItems": [
+      {
+        "type": "link",
+        "text": "Link",
+        "url": "https://example.com",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg"
+      },
+      {
+        "type": "button",
+        "text": "Button",
+        "url": "https://example.com",
+        "theme": "pseudo"
+      }
+    ]
+  }
+}
diff --git a/src/containers/BlogPage/BlogPage.tsx b/src/containers/BlogPage/BlogPage.tsx
@@ -5,6 +5,7 @@ import {
     PageContent,
     PageConstructorProvider,
     PageConstructorProviderProps,
+    NavigationData,
 } from '@gravity-ui/page-constructor';
 
 import {FeedContext} from '../../contexts/FeedContext';
@@ -31,6 +32,7 @@ export type BlogPageProps = {
     posts: PostsProps;
     tags: Tag[];
     services?: Service[];
+    navigation?: NavigationData;
     getPosts: GetPostsType;
     toggleLike?: ToggleLikeCallbackType;
     metaData?: MetaProps;
@@ -47,6 +49,7 @@ export const BlogPage = ({
     getPosts,
     metaData,
     toggleLike,
+    navigation,
     settings,
     pageCountForShowSupportButtons,
 }: BlogPageProps) => (
@@ -70,7 +73,11 @@ export const BlogPage = ({
             >
                 <PageConstructorProvider {...settings}>
                     {metaData ? <MetaWrapper {...metaData} /> : null}
-                    <PageConstructor content={content} custom={componentMap} />
+                    <PageConstructor
+                        content={content}
+                        custom={componentMap}
+                        navigation={navigation}
+                    />
                 </PageConstructorProvider>
             </FeedContext.Provider>
         </LikesContext.Provider>

diff --git a/src/containers/BlogPage/__stories__/BlogPage.stories.tsx b/src/containers/BlogPage/__stories__/BlogPage.stories.tsx
@@ -8,35 +8,37 @@ import page from '../../../../.mocks/blogPage.json';
 import services from '../../../../.mocks/services.json';
 import tags from '../../../../.mocks/tags.json';
 import posts from '../../../../.mocks/posts.json';
+import navigation from '../../../../.mocks/navigation.json';
 
 import {BlogPage, BlogPageProps} from '../BlogPage';
 
+const mockMetaComponent = <title>Blog page</title>;
+
 export default {
     title: `${CONTAINERS}/BlogPage`,
     component: BlogPage,
     args: {
         theme: 'light',
+        content: page.content,
+        posts,
+        services,
+        tags,
+        metaData: {
+            needHelmetWrapper: true,
+            metaComponent: mockMetaComponent,
+        },
+        getPosts: (props) => {
+            // eslint-disable-next-line no-console
+            console.log('get posts', props);
+        },
+        toggleLike: null,
     },
 } as Meta;
 
 const DefaultTemplate: Story<BlogPageProps> = (args) => <BlogPage {...args} />;
-
 export const Default = DefaultTemplate.bind({});
 
-const mockMetaComponent = <title>Blog page</title>;
-
-Default.args = {
-    content: page.content,
-    posts,
-    services,
-    tags,
-    metaData: {
-        needHelmetWrapper: true,
-        metaComponent: mockMetaComponent,
-    },
-    getPosts: (props) => {
-        // eslint-disable-next-line no-console
-        console.log('get posts', props);
-    },
-    toggleLike: null,
+export const WithNavigation = DefaultTemplate.bind({});
+WithNavigation.args = {
+    navigation,
 };
diff --git a/src/containers/BlogPostPage/BlogPostPage.tsx b/src/containers/BlogPostPage/BlogPostPage.tsx
@@ -5,6 +5,7 @@ import {
     PageContent,
     PageConstructorProvider,
     PageConstructorProviderProps,
+    NavigationData,
 } from '@gravity-ui/page-constructor';
 import {ShareOptions} from '@gravity-ui/uikit';
 
@@ -32,6 +33,7 @@ export interface BlogPostPageProps {
     content: PageContent;
     post: PostData;
     settings?: PageConstructorProviderProps;
+    navigation?: NavigationData;
     shareOptions?: ShareOptions[];
 }
 
@@ -42,6 +44,7 @@ export const BlogPostPage: React.FC<BlogPostPageProps> = ({
     content,
     post,
     settings,
+    navigation,
     shareOptions,
 }) => {
     const {hasUserLike, likesCount, handleLike} = useLikes({
@@ -75,7 +78,11 @@ export const BlogPostPage: React.FC<BlogPostPageProps> = ({
                 >
                     <PageConstructorProvider {...settings}>
                         {metaData ? <MetaWrapper {...metaData} /> : null}
-                        <PageConstructor content={content} custom={componentMap} />
+                        <PageConstructor
+                            content={content}
+                            custom={componentMap}
+                            navigation={navigation}
+                        />
                     </PageConstructorProvider>
                 </PostPageContext.Provider>
             </LikesContext.Provider>

diff --git a/src/containers/BlogPostPage/__stories__/BlogPostPage.stories.tsx b/src/containers/BlogPostPage/__stories__/BlogPostPage.stories.tsx
@@ -5,6 +5,7 @@ import {Meta, Story} from '@storybook/react/types-6-0';
 import {CONTAINERS} from '../../../demo/constants';
 
 import {generatePostPageData} from '../../../../.mocks/utils';
+import navigation from '../../../../.mocks/navigation.json';
 
 import {BlogPostPage, BlogPostPageProps} from '../BlogPostPage';
 
@@ -13,13 +14,15 @@ export default {
     component: BlogPostPage,
     args: {
         theme: 'light',
+        ...generatePostPageData(),
     },
 } as Meta;
 
 const DefaultTemplate: Story<BlogPostPageProps> = (args) => <BlogPostPage {...args} />;
 
 export const Default = DefaultTemplate.bind({});
 
-Default.args = {
-    ...generatePostPageData(),
+export const WithNavigation = DefaultTemplate.bind({});
+WithNavigation.args = {
+    navigation,
 };