feat(ChangelogDialog): change style, add link, events

src/components/ChangelogDialog/ChangelogDialog.scss

@@ -8,22 +8,22 @@ $maxItemsHeight: 70vh;
     width: $width;
 
     &__full-list-link-icon {
-        margin-left: 4px;
+        margin-left: var(--g-spacing-1);
         vertical-align: middle;
     }
 
     &__items-container {
         max-height: $maxItemsHeight;
         overflow-y: auto;
-        margin-bottom: 20px;
+        margin-bottom: var(--g-spacing-5);
 
         #{$block}__item:last-child {
             margin-bottom: 0;
         }
     }
 
     &__item {
-        margin-bottom: 32px;
+        margin-bottom: var(--g-spacing-8);
     }
 
     &__empty-placeholder {

src/components/ChangelogDialog/ChangelogDialog.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
-import {Dialog, Icon, Link} from '@gravity-ui/uikit';
 import type {DialogProps} from '@gravity-ui/uikit';
+import {Dialog, Icon, Link} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
 
@@ -22,6 +22,7 @@ export interface ChangelogDialogProps {
     disableBodyScrollLock?: boolean;
     disableOutsideClick?: boolean;
     onClose: DialogProps['onClose'];
+    onLinkClick?: (link: string) => void;
     onStoryClick?: (storyId: string) => void;
 }
 
@@ -39,6 +40,7 @@ export function ChangelogDialog({
     disableOutsideClick,
     onClose,
     onStoryClick,
+    onLinkClick,
 }: ChangelogDialogProps) {
     const idRef = React.useRef<number>();
     idRef.current = idRef.current || getNextId();
@@ -72,6 +74,7 @@ export function ChangelogDialog({
                             className={b('item')}
                             data={item}
                             onStoryClick={onStoryClick}
+                            onLinkClick={onLinkClick}
                         />
                     ))
                 ) : (

src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx

@@ -30,13 +30,15 @@ const items: ChangelogItem[] = [
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',
         storyId: 'someStoryId1',
+        link: 'https://github.com/gravity-ui/uikit',
     },
     {
         date: '23 Jun 2022',
         isNew: true,
         title: 'New components',
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',
+        link: 'https://github.com/gravity-ui/uikit',
     },
     {
         date: '15 Jun 2022',
@@ -65,6 +67,7 @@ const items: ChangelogItem[] = [
         description:
             'At the top of the panel is the service navigation for each service. Below are common navigation elements: a component for switching between accounts and organizations, settings, help center, search, notifications, favorites.',
         storyId: 'someStoryId3',
+        link: 'https://github.com/gravity-ui/uikit',
     },
     {
         date: '10 May 2022',
@@ -95,8 +98,9 @@ const DefaultTemplate: StoryFn<ChangelogDialogProps> = (props: ChangelogDialogPr
             <ChangelogDialog
                 {...props}
                 open={visible}
-                onClose={() => {
+                onClose={(event, reason) => {
                     setVisible(false);
+                    props.onClose?.(event, reason);
                 }}
             />
         </React.Fragment>
@@ -108,8 +112,16 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {
     open: false,
     items,
-    fullListLink: 'https://github.com/gravity-ui/uikit',
     onStoryClick: (storyId) => {
-        console.log(storyId);
+        // eslint-disable-next-line no-console
+        console.log('story click', storyId);
+    },
+    onLinkClick: (link) => {
+        // eslint-disable-next-line no-console
+        console.log('link click', link);
+    },
+    onClose: () => {
+        // eslint-disable-next-line no-console
+        console.log('close');
     },
 };

src/components/ChangelogDialog/components/Item/Item.scss

@@ -2,7 +2,7 @@
 @use '../../../variables';
 
 $block: '.#{variables.$ns}changelog-dialog-item';
-$metaWidth: 124px;
+$metaWidth: 80px;
 
 #{$block} {
     display: flex;
@@ -17,30 +17,34 @@ $metaWidth: 124px;
     }
 
     &__label-new {
-        margin-top: 4px;
+        margin-top: var(--g-spacing-2);
     }
 
     &__content {
         flex: 1;
-        margin-left: 16px;
+        margin-left: var(--g-spacing-5);
     }
 
     &__title {
         margin: 0;
-        @include mixins.text-subheader-3();
+        @include mixins.text-subheader-2();
     }
 
     &__image {
-        margin-top: 12px;
+        margin-top: var(--g-spacing-3);
         border-radius: 16px;
         overflow: hidden;
     }
 
     &__description {
-        margin-top: 12px;
+        margin-top: var(--g-spacing-3);
     }
 
-    &__story-button {
-        margin-top: 16px;
+    &__button {
+        margin-top: var(--g-spacing-4);
+    }
+
+    &__button + &__button {
+        margin-left: var(--g-spacing-4);
     }
 }

src/components/ChangelogDialog/components/Item/Item.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 
 import {CirclePlay} from '@gravity-ui/icons';
 import {Button, Icon, Label} from '@gravity-ui/uikit';
@@ -16,9 +16,22 @@ export interface ItemProps {
     className?: string;
     data: ChangelogItem;
     onStoryClick?: (storyId: string) => void;
+    onLinkClick?: (link: string) => void;
 }
 
-export function Item({className, data, onStoryClick}: ItemProps) {
+export function Item({className, data, onStoryClick, onLinkClick}: ItemProps) {
+    const handleLinkClick = useCallback(() => {
+        if (onLinkClick && data.link) {
+            onLinkClick(data.link);
+        }
+    }, [data.link, onLinkClick]);
+
+    const handleStoryClick = useCallback(() => {
+        if (onStoryClick && data.storyId) {
+            onStoryClick(data.storyId);
+        }
+    }, [data.storyId, onStoryClick]);
+
     return (
         <article className={b(null, className)}>
             <div className={b('meta')}>
@@ -42,15 +55,22 @@ export function Item({className, data, onStoryClick}: ItemProps) {
                 {data.description ? (
                     <div className={b('description')}>{data.description}</div>
                 ) : null}
+                {data.link ? (
+                    <Button
+                        className={b('button')}
+                        view="outlined"
+                        href={data.link}
+                        target={'_blank'}
+                        onClick={handleLinkClick}
+                    >
+                        {i18n('action_read-more')}
+                    </Button>
+                ) : null}
                 {data.storyId && onStoryClick ? (
                     <Button
-                        className={b('story-button')}
+                        className={b('button')}
                         view="outlined-action"
-                        onClick={() => {
-                            if (data.storyId) {
-                                onStoryClick(data.storyId);
-                            }
-                        }}
+                        onClick={handleStoryClick}
                     >
                         {i18n('button_view_story')}
                         <Icon data={CirclePlay} size={14} />

src/components/ChangelogDialog/i18n/en.json

@@ -3,5 +3,6 @@
   "link_full_list": "View full changelog",
   "label_new": "New",
   "button_view_story": "View story",
-  "label_empty": "No data"
+  "label_empty": "No data",
+  "action_read-more": "Read more"
 }

src/components/ChangelogDialog/i18n/ru.json

@@ -3,5 +3,6 @@
   "link_full_list": "Открыть полный список изменений",
   "label_new": "New",
   "button_view_story": "Посмотреть сториз",
-  "label_empty": "Нет данных"
+  "label_empty": "Нет данных",
+  "action_read-more": "Читать далее"
 }

src/components/ChangelogDialog/types.ts

@@ -11,4 +11,5 @@ export interface ChangelogItem {
     image?: ImageData;
     description: string;
     storyId?: string;
+    link?: string;
 }