feat(changelogDialog): change style, add link

gravity-ui · Sep 29, 2023 · 26417c2 · 26417c2
1 parent 56dce92
commit 26417c2
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 23 deletions.
diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
-import {Dialog, Icon, Link} from '@gravity-ui/uikit';
+import {Dialog} from '@gravity-ui/uikit';
 import type {DialogProps} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
@@ -17,7 +16,6 @@ const b = block('changelog-dialog');
 export interface ChangelogDialogProps {
     open: boolean;
     title?: string;
-    fullListLink?: string;
     items: ChangelogItem[];
     disableBodyScrollLock?: boolean;
     disableOutsideClick?: boolean;
@@ -33,7 +31,6 @@ function getNextId() {
 export function ChangelogDialog({
     open,
     title = i18n('title'),
-    fullListLink,
     items,
     disableBodyScrollLock = true,
     disableOutsideClick,
@@ -54,16 +51,6 @@ export function ChangelogDialog({
             aria-labelledby={dialogCaptionId}
         >
             <Dialog.Header caption={title} id={dialogCaptionId} />
-            {fullListLink ? (
-                <Dialog.Body key="full-list-link">
-                    <Link href={fullListLink} target="_blank">
-                        <span>{i18n('link_full_list')}</span>
-                        <span className={b('full-list-link-icon')}>
-                            <Icon data={ArrowUpRightFromSquare} size={14} />
-                        </span>
-                    </Link>
-                </Dialog.Body>
-            ) : null}
             <Dialog.Body key="items" className={b('items-container')}>
                 {items.length > 0 ? (
                     items.map((item, index) => (

diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/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',
@@ -108,8 +111,8 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {
     open: false,
     items,
-    fullListLink: 'https://github.com/gravity-ui/uikit',
     onStoryClick: (storyId) => {
+        // eslint-disable-next-line no-console
         console.log(storyId);
     },
 };
diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/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,18 @@ $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();
+        font-weight: 500;
     }
 
     &__image {
@@ -40,7 +41,11 @@ $metaWidth: 124px;
         margin-top: 12px;
     }
 
-    &__story-button {
+    &__button {
         margin-top: 16px;
     }
+
+    &__button + &__button {
+        margin-left: 16px;
+    }
 }
diff --git a/src/components/ChangelogDialog/components/Item/Item.tsx b/src/components/ChangelogDialog/components/Item/Item.tsx
@@ -42,9 +42,19 @@ 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'}
+                    >
+                        {i18n('action_read-more')}
+                    </Button>
+                ) : null}
                 {data.storyId && onStoryClick ? (
                     <Button
-                        className={b('story-button')}
+                        className={b('button')}
                         view="outlined-action"
                         onClick={() => {
                             if (data.storyId) {

diff --git a/src/components/ChangelogDialog/i18n/en.json b/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"
 }
diff --git a/src/components/ChangelogDialog/i18n/ru.json b/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": "Читать далее"
 }
diff --git a/src/components/ChangelogDialog/types.ts b/src/components/ChangelogDialog/types.ts
@@ -11,4 +11,5 @@ export interface ChangelogItem {
     image?: ImageData;
     description: string;
     storyId?: string;
+    link?: string;
 }