From 3c119c7783e622ed6bc56be2e6625a13c29a4914 Mon Sep 17 00:00:00 2001 From: Anton Date: Mon, 23 Oct 2023 23:29:29 +0500 Subject: [PATCH] feat(ChangelogDialog): change style, add link, events (#105) --- .../ChangelogDialog/ChangelogDialog.scss | 6 ++-- .../ChangelogDialog/ChangelogDialog.tsx | 5 ++- .../__stories__/ChangelogDialog.stories.tsx | 18 ++++++++-- .../ChangelogDialog/components/Item/Item.scss | 20 ++++++----- .../ChangelogDialog/components/Item/Item.tsx | 36 ++++++++++++++----- src/components/ChangelogDialog/i18n/en.json | 3 +- src/components/ChangelogDialog/i18n/ru.json | 3 +- src/components/ChangelogDialog/types.ts | 1 + 8 files changed, 67 insertions(+), 25 deletions(-) diff --git a/src/components/ChangelogDialog/ChangelogDialog.scss b/src/components/ChangelogDialog/ChangelogDialog.scss index 22b81a8f..3a39178f 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.scss +++ b/src/components/ChangelogDialog/ChangelogDialog.scss @@ -8,14 +8,14 @@ $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; @@ -23,7 +23,7 @@ $maxItemsHeight: 70vh; } &__item { - margin-bottom: 32px; + margin-bottom: var(--g-spacing-8); } &__empty-placeholder { diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx index 9bf778ad..bd1a7448 100644 --- a/src/components/ChangelogDialog/ChangelogDialog.tsx +++ b/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(); idRef.current = idRef.current || getNextId(); @@ -72,6 +74,7 @@ export function ChangelogDialog({ className={b('item')} data={item} onStoryClick={onStoryClick} + onLinkClick={onLinkClick} /> )) ) : ( diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx index 278e6e78..64975335 100644 --- a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx +++ b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx @@ -30,6 +30,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: 'someStoryId1', + link: 'https://github.com/gravity-ui/uikit', }, { date: '23 Jun 2022', @@ -37,6 +38,7 @@ const items: ChangelogItem[] = [ 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 = (props: ChangelogDialogPr { + onClose={(event, reason) => { setVisible(false); + props.onClose?.(event, reason); }} /> @@ -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'); }, }; diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss index d14e046f..78b2b805 100644 --- 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,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); } } diff --git a/src/components/ChangelogDialog/components/Item/Item.tsx b/src/components/ChangelogDialog/components/Item/Item.tsx index cb224be6..e9bbf000 100644 --- a/src/components/ChangelogDialog/components/Item/Item.tsx +++ b/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 (
@@ -42,15 +55,22 @@ export function Item({className, data, onStoryClick}: ItemProps) { {data.description ? (
{data.description}
) : null} + {data.link ? ( + + ) : null} {data.storyId && onStoryClick ? (