feat: blog post header extra buttons

package.json

@@ -98,6 +98,7 @@
     "@commitlint/config-conventional": "^17.4.3",
     "@diplodoc/transform": "^4.10.8",
     "@gravity-ui/eslint-config": "^3.2.0",
+    "@gravity-ui/icons": "^2.13.0",
     "@gravity-ui/page-constructor": "^6.6.1",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",

src/components/PostInfo/PostInfo.scss

@@ -8,10 +8,13 @@ $block: '.#{$namespace}post-info';
         @include text-size(body-2);
 
         display: flex;
-        padding-right: $indentSM;
-        padding-top: $indentXXS;
         flex-wrap: nowrap;
         align-items: center;
+        margin-top: $indentXXS;
+
+        &:not(:last-child) {
+            margin-right: $indentSM;
+        }
 
         &_size {
             &_s {
@@ -24,23 +27,20 @@ $block: '.#{$namespace}post-info';
         }
 
         &_save {
+            padding: 0;
             background: none;
             color: inherit;
             border: none;
-            padding: 0;
-            font: inherit;
+            font-family: inherit;
+            font-weight: inherit;
             cursor: pointer;
         }
-    }
-
-    &__item:last-child {
-        @include text-size(body-2);
 
-        display: flex;
-        padding-right: 0px;
-        padding-top: $indentXXS;
-        flex-wrap: nowrap;
-        align-items: center;
+        &_extra {
+            &:hover {
+                color: var(--g-color-text-primary);
+            }
+        }
     }
 
     &__switcher {
@@ -71,6 +71,7 @@ $block: '.#{$namespace}post-info';
         }
     }
 
+    $block: &;
     &__container {
         display: flex;
         align-items: flex-start;
@@ -81,6 +82,10 @@ $block: '.#{$namespace}post-info';
         &_theme {
             &_dark {
                 color: var(--g-color-text-light-secondary);
+
+                #{$block}__item_extra:hover {
+                    color: var(--g-color-text-light-primary);
+                }
             }
         }
     }

src/components/PostInfo/PostInfo.tsx

@@ -12,9 +12,12 @@ import {Sharing} from './components/Sharing';
 import {getQaAttributes} from '../../utils/common';
 
 import './PostInfo.scss';
+import {SettingsContext} from '../../contexts/SettingsContext';
 
 const b = block('post-info');
 
+export type CustomInfoItemComponent = React.ComponentType<{post: PostData}>;
+
 type PostInfoProps = QAProps & {
     postId: PostData['id'];
     readingTime: PostData['readingTime'];
@@ -43,7 +46,8 @@ export const PostInfo = ({
     qa,
     analyticsEventsContainer,
 }: PostInfoProps) => {
-    const {likes} = React.useContext(PostPageContext);
+    const {post, likes} = React.useContext(PostPageContext);
+    const {extraInfoItems} = React.useContext(SettingsContext);
     const qaAttributes = getQaAttributes(qa, 'date', 'reading-time', 'save');
 
     return (
@@ -62,6 +66,11 @@ export const PostInfo = ({
                     qa={qaAttributes.save}
                 />
             )}
+            {extraInfoItems?.map((Component, index) => (
+                <div key={index} className={b('item', {extra: true})}>
+                    <Component post={post} />
+                </div>
+            ))}
         </div>
     );
 };

src/containers/BlogPostPage/__stories__/BlogPostPage.stories.tsx

@@ -4,6 +4,10 @@ import {postPageMockData} from '../../../../.mocks/utils';
 import {BlogPostPage, BlogPostPageProps} from '../BlogPostPage';
 
 import navigation from '../../../../.mocks/navigation.json';
+import {BlogConstructorProvider} from '../../../constructor/BlogConstructorProvider';
+import {CircleInfo} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import {CustomInfoItemComponent} from '../../../components/PostInfo/PostInfo';
 
 export default {
     title: 'Containers/BlogPostPage',
@@ -16,9 +20,33 @@ export default {
 
 const DefaultTemplate: StoryFn<BlogPostPageProps> = (args) => <BlogPostPage {...args} />;
 
+const ExtraInfoItem: CustomInfoItemComponent = ({post}) => (
+    <Button
+        view="flat"
+        size="xs"
+        onClick={() => alert(`Post id is ${post.id}`)}
+        style={{font: 'inherit', color: 'inherit'}}
+    >
+        <Icon data={CircleInfo} />
+        Extra Info Item
+    </Button>
+);
+
+const ExtraItemsTemplate: StoryFn<BlogPostPageProps> = (args) => (
+    <BlogConstructorProvider
+        settings={{
+            extraInfoItems: [ExtraInfoItem],
+        }}
+    >
+        <BlogPostPage {...args} />
+    </BlogConstructorProvider>
+);
+
 export const Default = DefaultTemplate.bind({});
 
 export const WithNavigation = DefaultTemplate.bind({});
 WithNavigation.args = {
     navigation,
 } as unknown as BlogPostPageProps;
+
+export const WithExtraInfoItems = ExtraItemsTemplate.bind({});

src/contexts/SettingsContext.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import {CustomInfoItemComponent} from '../components/PostInfo/PostInfo';
 
 export interface SettingsContextProps {
     addNavigationLinkForPages?: boolean;
     isAnimationEnabled?: boolean;
 
     getBlogPath?: (pathPrefix: string) => string;
+    extraInfoItems?: CustomInfoItemComponent[];
 }
 
 export const SettingsContext = React.createContext<SettingsContextProps>({});