feat: blog post header extra buttons (#266)

* feat: blog post header extra buttons

* fix: tests

* fix: tests

* fix: requested changes

Author: PahaN47

package-lock.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",

package.json

@@ -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/blocks/Feed/__snapshots__/Feed.visual.test.tsx-snapshots/Feed-render-stories-Default-light-chromium-linux.png

@@ -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>
     );
 };