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

src/components/ChangelogDialog/ChangelogDialog.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, {useEffect} 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';
 
@@ -21,7 +21,9 @@ export interface ChangelogDialogProps {
     items: ChangelogItem[];
     disableBodyScrollLock?: boolean;
     disableOutsideClick?: boolean;
+    onOpen: () => void;
     onClose: DialogProps['onClose'];
+    onLinkClick?: (link: string) => void;
     onStoryClick?: (storyId: string) => void;
 }
 
@@ -38,12 +40,19 @@ export function ChangelogDialog({
     disableBodyScrollLock = true,
     disableOutsideClick,
     onClose,
+    onOpen,
     onStoryClick,
+    onLinkClick,
 }: ChangelogDialogProps) {
     const idRef = React.useRef<number>();
     idRef.current = idRef.current || getNextId();
     const dialogCaptionId = `changelog-dialog-title-${idRef.current}`;
 
+    useEffect(() => {
+        if (!open) return;
+        onOpen();
+    }, [open, onOpen]);
+
     return (
         <Dialog
             className={b()}
@@ -72,6 +81,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,20 @@ 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);
+    },
+    onOpen: () => {
+        // eslint-disable-next-line no-console
+        console.log('open');
+    },
+    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,17 +17,17 @@ $metaWidth: 124px;
     }
 
     &__label-new {
-        margin-top: 4px;
+        margin-top: 8px;
     }
 
     &__content {
         flex: 1;
-        margin-left: 16px;
+        margin-left: 20px;
     }
 
     &__title {
         margin: 0;
-        @include mixins.text-subheader-3();
+        @include mixins.text-subheader-2();
     }
 
     &__image {
@@ -40,7 +40,11 @@ $metaWidth: 124px;
         margin-top: 12px;
     }
 
-    &__story-button {
+    &__button {
         margin-top: 16px;
     }
+
+    &__button + &__button {
+        margin-left: 16px;
+    }
 }

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