diff --git a/src/components/OnboardingGuide/Guide/Guide.scss b/src/components/OnboardingGuide/Guide/Guide.scss deleted file mode 100644 index 5273adca..00000000 --- a/src/components/OnboardingGuide/Guide/Guide.scss +++ /dev/null @@ -1,112 +0,0 @@ -@use '../../variables'; - -$block: '.#{variables.$ns}guide'; - -$layer-popup: 1000; -$header-height-s: 26px; -$space-2-xs: 4px; -$space-xs: 8px; -$space-m: 16px; -$space-s: 12px; -$space-l: 20px; - -#{$block} { - z-index: $layer-popup; - max-width: 280px; - - background: none; - width: fit-content; - - &__content { - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04); - - width: 280px; - display: flex; - flex-direction: column; - overflow: hidden; - - box-sizing: border-box; - height: 62px; - - background-color: var(--g-color-base-info-heavy); - border-radius: 20px; - - transition: height 300ms ease-out; - } - - &__content_expanded { - height: fit-content; - max-height: 684px; - min-height: 300px; - } - - &__titl-text { - font-family: var(--typography-font-family); - line-height: var(--g-text-subheader-3-line-height-rel); - font-size: var(--g-text-subheader-2-font-size); - letter-spacing: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - &__title { - display: flex; - align-items: center; - justify-content: center; - - margin-block-end: $space-2-xs; - - color: var(--g-color-text-light-primary); - background: none; - border: none; - cursor: pointer; - width: 100%; - } - - &__graduationCap { - flex-shrink: 0; - - margin-inline-start: $space-xs; - } - - &__header { - padding: $space-s $space-m $space-m $space-m; - - cursor: pointer; - } - - &__lining { - overflow-y: scroll; - - box-sizing: border-box; - - flex: 1 1 auto; - - padding: $space-xs 0px; - - margin-inline: 1px; - - margin-block-end: $space-m; - - margin-inline-start: 1px; - - background-color: var(--g-color-base-float); - - border-radius: 20px; - } - - &__lining::-webkit-scrollbar { - display: none; - } - - &__buttons { - display: flex; - gap: $space-xs; - justify-content: space-between; - - max-width: 100%; - padding-inline: $space-l; - margin-block-end: $space-l; - } -} diff --git a/src/components/OnboardingGuide/Guide/Guide.tsx b/src/components/OnboardingGuide/Guide/Guide.tsx deleted file mode 100644 index ce3d9130..00000000 --- a/src/components/OnboardingGuide/Guide/Guide.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import React from 'react'; - -import {Button, Icon, Progress} from '@gravity-ui/uikit'; -import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types'; - -import {block} from '../../utils/cn'; -import i18n from '../i18n'; - -import './Guide.scss'; - -const cnGuide = block('guide'); - -export type GuideProps = { - title: string | React.ReactNode; - progressBarCurrentValue: number; - icon?: SVGIconData; - - defaultExpand: boolean; - - isLoading?: boolean; - - children?: React.ReactNode; - - rollUpbuttonText?: string; - completeButtontext?: string; - - onHeaderClick?: (newExpand: boolean) => void; - onCompleteClick: () => void; - onRollUpClick?: () => void; -}; - -export const Guide = ({ - title, - progressBarCurrentValue, - icon, - defaultExpand, - onHeaderClick, - onRollUpClick, - onCompleteClick, - rollUpbuttonText, - completeButtontext, - children, -}: GuideProps) => { - const [expand, setExpand] = React.useState(defaultExpand); - - const onHeaderClickCallback = () => { - const newExpand = !expand; - - setExpand(newExpand); - if (onHeaderClick) { - onHeaderClick(newExpand); - } - }; - - const onRollUpClickCallback = () => { - const newExpand = !expand; - - setExpand(newExpand); - if (onRollUpClick) { - onRollUpClick(); - } - }; - - const onCompleteCallback = () => { - onCompleteClick(); - }; - - return ( -
-
-
- -
- -
-
- - {expand && ( - -
- {children} -
-
- - -
- - )} -
-
- ); -}; diff --git a/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.scss b/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.scss deleted file mode 100644 index ff766b2e..00000000 --- a/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.scss +++ /dev/null @@ -1,150 +0,0 @@ -@use '../../variables'; - -$block: '.#{variables.$ns}guide-menu-item'; - -$space-2-xs: 4px; -$space-xs: 8px; -$space-s: 12px; -$space-l: 20px; -$header-height-s: 26px; - -#{$block} { - &__collapse { - padding: $space-s $header-height-s $space-s $header-height-s; - } - - &__collapse-header { - display: flex; - align-items: center; - width: 100%; - - padding: $space-2-xs 0px; - - color: var(--g-color-text-dark-primary); - } - - &__collapse-header .yc-collapse__panel { - justify-content: space-between; - - width: 100%; - - padding-inline-end: $space-s; - } - - &__collapse-header_isExpand { - color: var(--g-color-text-dark-primary); - } - - &__collapse-title { - display: flex; - align-items: center; - - min-width: 0; - - font-size: var(--g-text-subheader-2-font-size); - line-height: var(--g-text-subheader-3-line-height); - - letter-spacing: 0; - text-align: start; - } - - &__collapse-text { - overflow: hidden; - - text-overflow: ellipsis; - } - - &__icon { - margin-inline-end: $space-xs; - - align-self: flex-start; - display: flex; - align-items: center; - height: $space-l; - } - - &__time-icon { - color: var(--g-color-text-info); - } - - &__checkbox .g-checkbox__indicator::before { - border: none; - border-radius: 100px; - background-color: var(--g-color-text-hint); - } - - &__checkbox_isChecked .g-checkbox__indicator::before { - background-color: var(--g-color-base-positive-heavy); - } - - &__checkbox .g-checkbox__icon { - color: var(--g-color-base-background); - } - - &__node { - display: flex; - flex-direction: column; - gap: $space-xs; - - margin-block: $space-s; - margin-block-start: $space-s; - } - - &__text { - margin-block-end: $space-s; - } - - &__buttons { - display: flex; - flex-wrap: wrap; - gap: $space-xs; - - max-width: 100%; - } - - &__divider { - border-block-start: 1px solid var(--yc-color-line-generic); - } - - &__skeleton { - height: 26px; - display: flex; - align-items: center; - justify-content: space-between; - margin: $space-s $header-height-s $space-s $header-height-s; - } - - &__avatar { - flex-shrink: 0; - height: 17px; - width: 17px; - - border-radius: 50%; - margin-inline-end: 8px; - } - - &__person { - height: 17px; - - width: 100%; - } - - &__test { - width: 100%; - overflow: hidden; - } - - .g-disclosure__trigger { - text-align: start; - width: 100%; - justify-content: space-between; - } - - &:not(&_hasArrow) .g-disclosure__trigger { - cursor: auto; - } - - &:not(&_hasArrow) .yc-arrow-toggle { - visibility: hidden; - } -} diff --git a/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.tsx b/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.tsx deleted file mode 100644 index bf9e74ea..00000000 --- a/src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; - -import {Clock} from '@gravity-ui/icons'; -import {Checkbox, Disclosure, Icon, Skeleton} from '@gravity-ui/uikit'; - -import {block} from '../../utils/cn'; - -import './GuideMenuItem.scss'; - -export type GuideMenuItemProps = { - title: string; - status?: 'finished' | 'inProgress'; - children?: React.ReactNode; - buttons?: React.ReactNode[]; - showDivider?: boolean; - hasArrow?: boolean; - isLoading?: boolean; - - onClick?: () => void; -}; -const noopFunc = () => {}; - -const cnGuideMenuItem = block('guide-menu-item'); - -export const GuideMenuItem = ({ - title, - status, - children, - buttons, - showDivider = true, - onClick = noopFunc, - hasArrow = true, - isLoading = false, -}: GuideMenuItemProps) => { - const [isExpand, setIsExpand] = React.useState(false); - const header = React.useMemo( - () => ( -
setIsExpand((isExpand) => !isExpand)} - onKeyDown={() => setIsExpand((isExpand) => !isExpand)} - role="button" - tabIndex={0} - > -
- {status === 'inProgress' ? ( - - ) : ( - - )} -
- - {hasArrow && ( - -
{children}
-
{buttons}
- - )} - -
- ), - [status, onClick, title, isExpand], - ); - - if (isLoading) { - return ( - -
- - -
- {showDivider &&
} - - ); - } - - return ( -
-
{header}
- {showDivider &&
} -
- ); -}; diff --git a/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemImage/GuideMenuItemImage.tsx b/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemImage/GuideMenuItemImage.tsx deleted file mode 100644 index 025db48a..00000000 --- a/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemImage/GuideMenuItemImage.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import {block} from '../../../../utils/cn'; - -import './GuideMenuItemImage.scss'; - -const cnGuideMenuItemImage = block('guide-menu-item-image'); - -export type GuideMenuItemImageProps = { - link: string; - alt: string; -}; - -export const GuideMenuItemImage = ({link, alt}: GuideMenuItemImageProps) => ( - {alt} -); - -export const addImage = (link: string, alt: string) => ; diff --git a/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemText/GuideMenuItemText.scss b/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemText/GuideMenuItemText.scss deleted file mode 100644 index bfd9c5ba..00000000 --- a/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemText/GuideMenuItemText.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use '../../../../variables.scss'; -$block: '.#{variables.$ns}guide-menu-item-text'; - -#{$block} { - font-size: var(--g-text-subheader-1-font-size); - letter-spacing: 0; - text-align: start; -} diff --git a/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemText/GuideMenuItemText.tsx b/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemText/GuideMenuItemText.tsx deleted file mode 100644 index 88c5f048..00000000 --- a/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemText/GuideMenuItemText.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import {block} from '../../../../utils/cn'; - -import './GuideMenuItemText.scss'; - -const cnGuideMenuItemText = block('guide-menu-item-text'); - -export type GuideMenuItemTextProps = { - text: string; -}; - -const GuideMenuItemText = ({text}: GuideMenuItemTextProps) => ( - {text} -); - -export const addText = (text: string) => ; diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss new file mode 100644 index 00000000..c4d1301c --- /dev/null +++ b/src/components/OnboardingMenu/OnboardingMenu.scss @@ -0,0 +1,121 @@ +@use '../variables.scss'; + +$block: '.#{variables.$ns}guide'; + +$layer-popup: 1000; + +#{$block} { + z-index: $layer-popup; + max-width: 280px; + + background: none; + width: fit-content; + + &__content { + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04); + display: flex; + flex-direction: column; + overflow: hidden; + + box-sizing: border-box; + width: 210px; + + background-color: var(--g-color-base-brand); + border-radius: 16px; + + &_expand { + width: 280px; + border-radius: 20px; + height: fit-content; + max-height: 684px; + min-height: 300px; + } + } + + &__title-text { + color: var(--g-color-text-brand-contrast); + + font-family: 'YS Text'; + font-style: normal; + font-weight: 500; + font-size: 15px; + line-height: 20px; + + overflow: hidden; + text-overflow: ellipsis; + text-wrap: nowrap; + + &_expand { + font-size: 17px; + line-height: 24px; + } + } + + &__title { + display: flex; + align-items: center; + justify-content: center; + + margin-block-end: var(--g-spacing-1); + + color: var(--g-color-text-light-primary); + background: none; + border: none; + cursor: pointer; + width: 100%; + + padding: 0; + + &_expand { + margin-block-end: var(--g-spacing-2); + } + } + + &__graduationCap { + flex-shrink: 0; + margin-inline: var(--g-spacing-2) var(--g-spacing-2); + color: var(--g-color-text-brand-contrast); + } + + &__header { + padding: var(--g-spacing-2) var(--g-spacing-4) var(--g-spacing-3) var(--g-spacing-4); + + &_expand { + padding: var(--g-spacing-3) var(--g-spacing-4) var(--g-spacing-4) var(--g-spacing-4); + } + } + + &__lining { + overflow-y: scroll; + + box-sizing: border-box; + + flex: 1 1 auto; + + padding: var(--g-spacing-2) 0px; + + margin-inline: 1px; + + margin-block-end: var(--g-spacing-4); + + margin-inline-start: 1px; + + background-color: var(--g-color-base-float); + + border-radius: var(--g-border-radius-xl); + } + + &__lining::-webkit-scrollbar { + display: none; + } + + &__buttons { + display: flex; + gap: var(--g-spacing-2); + justify-content: space-between; + + max-width: 100%; + padding-inline: var(--g-spacing-5); + margin-block-end: var(--g-spacing-5); + } +} diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx new file mode 100644 index 00000000..e2b50e8b --- /dev/null +++ b/src/components/OnboardingMenu/OnboardingMenu.tsx @@ -0,0 +1,133 @@ +import React from 'react'; + +import {Button, Icon, IconData, Progress} from '@gravity-ui/uikit'; + +import {block} from '../utils/cn'; + +import i18n from './i18n'; + +import './OnboardingMenu.scss'; + +const cnOnboardingMenu = block('guide'); + +export type OnboardingMenuProps = { + title: React.ReactNode; + progress: number; + icon?: IconData; + + defaultExpanded: boolean; + children?: React.ReactNode; + + rollUpButtonText?: string; + completeButtonText?: string; + + onExpand?: (expanded: boolean) => void; + onCompleteClick: () => void; + onRollUpClick?: (event: React.MouseEvent) => void; +}; + +export const OnboardingMenu = ({ + title, + progress, + icon, + defaultExpanded, + onExpand, + onRollUpClick, + onCompleteClick, + rollUpButtonText, + completeButtonText, + children, +}: OnboardingMenuProps) => { + const [expand, setExpand] = React.useState(defaultExpanded); + + const onExpandCallback = () => { + const newExpand = !expand; + + setExpand(newExpand); + if (onExpand) { + onExpand(newExpand); + } + }; + + const onRollUpClickCallback = (event: React.MouseEvent) => { + const newExpand = !expand; + + setExpand(newExpand); + if (onRollUpClick) { + onRollUpClick(event); + } + if (onExpand) { + onExpand(newExpand); + } + }; + + return ( +
+
+
+ + +
+ + {expand && ( + +
+ {children} +
+
+ + +
+ + )} +
+
+ ); +}; diff --git a/src/components/OnboardingGuide/Guide/__stories__/Guide.stories.tsx b/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx similarity index 65% rename from src/components/OnboardingGuide/Guide/__stories__/Guide.stories.tsx rename to src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx index bbbf873e..98031b8d 100644 --- a/src/components/OnboardingGuide/Guide/__stories__/Guide.stories.tsx +++ b/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx @@ -1,36 +1,37 @@ import React from 'react'; -import {PencilToSquare} from '@gravity-ui/icons'; +import {GraduationCap} from '@gravity-ui/icons'; import {Button} from '@gravity-ui/uikit'; import {actions} from '@storybook/addon-actions'; import type {Meta, Story} from '@storybook/react'; -import {GuideMenuItem} from '../../GuideMenuItem/GuideMenuItem'; -import {addImage} from '../../GuideMenuItem/frequentFunctions/GuideMenuItemImage/GuideMenuItemImage'; -import {addText} from '../../GuideMenuItem/frequentFunctions/GuideMenuItemText/GuideMenuItemText'; -import type {GuideProps} from '../Guide'; -import {Guide} from '../Guide'; +import type {OnboardingMenuProps} from '../OnboardingMenu'; +import {OnboardingMenu} from '../OnboardingMenu'; +import {OnboardingMenuItem} from '../components/OnboardingMenuItem/OnboardingMenuItem'; +import {addText} from '../components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText'; +import {addImage} from '../components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage'; export default { - title: 'Components/Guide', - component: Guide, + title: 'Components/OnboardingMenu', + component: OnboardingMenu, } as Meta; const actionsButtonHandlers = () => actions('onClick').onClick('Click on the button'); const actionsButtonComplete = () => actions('onClick').onClick('Click on the end button'); -const DefaultTemplate: Story = (args) => { - const actionsGuideHandlers = () => { +const DefaultTemplate: Story = (args) => { + const actionsOnboardingMenuHandlers = () => { actions('onHeaderClick').onHeaderClick('Click on the header'); }; return (
-
); @@ -41,11 +42,12 @@ export const WithItems = DefaultTemplate.bind({}); export const SomeIcons = DefaultTemplate.bind({}); export const LongHeader = DefaultTemplate.bind({}); export const WithLoader = DefaultTemplate.bind({}); +export const WithoutArrow = DefaultTemplate.bind({}); export const CustomButtonText = DefaultTemplate.bind({}); export const Custom = DefaultTemplate.bind({}); Default.args = { - title: 'Test header', + title: 'Header text', }; LongHeader.args = { @@ -53,14 +55,13 @@ LongHeader.args = { }; WithLoader.args = { - isLoading: true, - title: 'Test header', - defaultExpand: true, + title: 'Header text', + defaultExpanded: true, children: [ - Button 3 @@ -71,12 +72,12 @@ WithLoader.args = { ]} > {[addText('Test text')]} - , - , + Button 5 @@ -87,16 +88,16 @@ WithLoader.args = { ]} > {[addText('Test text')]} - , + , ], }; WithItems.args = { - title: 'Test header header text', - progressBarCurrentValue: 30, - defaultExpand: true, + title: 'Header text', + progress: 30, + defaultExpanded: true, children: [ - {[addText('Test text')]} - , - , + , - , + Button 11 @@ -142,45 +143,52 @@ WithItems.args = { , ]} > - {[addText('Test text')]} {[ addImage( 'https://storage.yandexcloud.net/uikit-storybook-assets/changelog-dialog-picture-1.png', '2019', ), ]} - , + {[addText('Test text')]} + , ], }; SomeIcons.args = { - title: 'Different icons', - progressBarCurrentValue: 30, - defaultExpand: true, + title: 'Header text', + progress: 30, + defaultExpanded: true, children: [ - + {[addText('Test text')]} - , - + , + {[addText('Test text')]} - , - + , + {[addText('Test text')]} - , + , ], }; +WithoutArrow.args = { + title: 'Header text', + progress: 30, + defaultExpanded: true, + children: [], +}; + CustomButtonText.args = { - title: 'Custom button Text', - defaultExpand: true, - rollUpbuttonText: 'left button', - completeButtontext: 'right button', + title: 'Header text', + defaultExpanded: true, + rollUpButtonText: 'left button', + completeButtonText: 'right button', }; Custom.args = { title: 'Different icons', - progressBarCurrentValue: 30, - defaultExpand: true, + progress: 30, + defaultExpanded: true, children: [ 'Custom reaction node', , diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.scss b/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.scss new file mode 100644 index 00000000..ef2a3d95 --- /dev/null +++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.scss @@ -0,0 +1,126 @@ +@use '../../../variables.scss'; + +$block: '.#{variables.$ns}guide-menu-item'; + +#{$block} { + &__collapse { + padding: var(--g-spacing-3) var(--g-spacing-6); + } + + &__collapse-header { + display: flex; + align-items: center; + width: 100%; + } + + &__collapse-title { + display: flex; + align-items: center; + + min-width: 0; + + font-size: var(--g-text-subheader-2-font-size); + line-height: var(--g-text-subheader-3-line-height); + + letter-spacing: 0; + text-align: start; + } + + &__collapse-text { + overflow: hidden; + + text-overflow: ellipsis; + } + + &__icon { + margin-inline-end: var(--g-spacing-2); + + align-self: flex-start; + display: flex; + align-items: center; + height: --g-spacing-5; + } + + &__time-icon { + color: var(--g-color-base-brand); + + &__disable { + color: var(--g-color-text-hint); + } + } + + &__node { + display: flex; + flex-direction: column; + gap: var(--g-spacing-2); + + margin-block: var(--g-spacing-3); + margin-block-start: var(--g-spacing-3); + } + + &__text { + margin-block-end: var(--g-spacing-3); + } + + &__buttons { + display: flex; + flex-wrap: wrap; + gap: var(--g-spacing-2); + + max-width: 100%; + } + + &__divider { + border-block-start: 1px solid var(--g-color-line-generic); + margin-inline: var(--g-spacing-1); + } + + &__skeleton { + height: 26px; + display: flex; + align-items: center; + justify-content: space-between; + margin: var(--g-spacing-3) var(--g-spacing-6); + } + + &__avatar { + flex-shrink: 0; + height: 20px; + width: 20px; + + border-radius: 50%; + margin-inline-end: 8px; + } + + &__person { + height: 17px; + + width: 100%; + } + + &__title-header { + width: 100%; + overflow: hidden; + } + + &__title-summary { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + } + + &__title { + color: var(--g-color-text-complementary); + + font-family: 'YS Text'; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 20px; + + overflow: hidden; + text-overflow: ellipsis; + } +} diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.tsx b/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.tsx new file mode 100644 index 00000000..986b9391 --- /dev/null +++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/OnboardingMenuItem.tsx @@ -0,0 +1,113 @@ +import React from 'react'; + +import {CircleCheckFill, Clock} from '@gravity-ui/icons'; +import {ArrowToggle, Disclosure, Icon, Skeleton} from '@gravity-ui/uikit'; + +import {block} from '../../../utils/cn'; + +import './OnboardingMenuItem.scss'; + +export type OnboardingMenuItemProps = { + title: string; + status?: 'completed' | 'pending'; + children?: React.ReactNode; + buttons?: React.ReactNode; + hasDivider?: boolean; + loading?: boolean; + + onClick?: () => void; +}; +const noopFunc = () => {}; + +const ICON_SIZE = 20; + +const cnOnboardingMenuItem = block('guide-menu-item'); + +export const OnboardingMenuItem = ({ + title, + status, + children, + buttons, + hasDivider = true, + onClick = noopFunc, + loading = false, +}: OnboardingMenuItemProps) => { + const icon = React.useMemo(() => { + if (status === 'pending') { + return ( + + ); + } + + if (status === 'completed') { + return ( + + ); + } + + return ( + + ); + }, []); + + const summary = React.useMemo(() => { + return {title}; + }, []); + + const header = React.useMemo( + () => ( +
+
{icon}
+ {children ? ( + + + {(props) => ( +
+ {summary} + +
+ )} + +
{children}
+ {buttons && ( +
{buttons}
+ )} + + ) : ( + summary + )} +
+ ), + [status, onClick, title], + ); + + if (loading) { + return ( + +
+ + +
+ {hasDivider &&
} + + ); + } + + return ( +
+
{header}
+ {hasDivider &&
} +
+ ); +}; diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx b/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx new file mode 100644 index 00000000..645b4a58 --- /dev/null +++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import {block} from '../../../../../utils/cn'; + +import './OnboardingMenutemText.scss'; + +const cnOnboardingMenuItemText = block('guide-menu-item-text'); + +export type OnboardingMenuItemTextProps = { + text: string; +}; + +const OnboardingMenuItemText = ({text}: OnboardingMenuItemTextProps) => ( + {text} +); + +export const addText = (text: string) => ; diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss b/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss new file mode 100644 index 00000000..75dc68d8 --- /dev/null +++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss @@ -0,0 +1,14 @@ +@use '../../../../../variables.scss'; +$block: '.#{variables.$ns}guide-menu-item-text'; + +#{$block} { + overflow: hidden; + color: var(--g-color-text-complementary); + text-overflow: ellipsis; + + font-family: 'YS Text'; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 138.462% */ +} diff --git a/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemImage/GuideMenuItemImage.scss b/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss similarity index 55% rename from src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemImage/GuideMenuItemImage.scss rename to src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss index 8a9bf733..c08b6b88 100644 --- a/src/components/OnboardingGuide/GuideMenuItem/frequentFunctions/GuideMenuItemImage/GuideMenuItemImage.scss +++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss @@ -1,11 +1,11 @@ -@use '../../../../variables.scss'; +@use '../../../../../variables.scss'; $block: '.#{variables.$ns}guide-menu-item-image'; #{$block} { max-width: 242px; max-height: 118px; - border: 1px solid var(--colors-line-generic, rgba(0, 0, 0, 0.1)); + border: 1px solid var(--g-color-line-generic, rgba(0, 0, 0, 0.1)); border-radius: 8px; } diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx b/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx new file mode 100644 index 00000000..bf812aa6 --- /dev/null +++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import {block} from '../../../../../utils/cn'; + +import './OnboardingMenuItemImage.scss'; + +const cnOnboardingMenuItemImage = block('guide-menu-item-image'); + +export type OnboardingMenuItemImageProps = { + src: string; + alt: string; +}; + +export const OnboardingMenuItemImage = ({src, alt}: OnboardingMenuItemImageProps) => ( + {alt} +); + +export const addImage = (src: string, alt: string) => ( + +); diff --git a/src/components/OnboardingGuide/i18n/en.json b/src/components/OnboardingMenu/i18n/en.json similarity index 52% rename from src/components/OnboardingGuide/i18n/en.json rename to src/components/OnboardingMenu/i18n/en.json index 8d31c5fb..49857e4f 100644 --- a/src/components/OnboardingGuide/i18n/en.json +++ b/src/components/OnboardingMenu/i18n/en.json @@ -1,4 +1,4 @@ { - "roll-up": "Roll up", + "collapse": "Minimize", "complete": "Complete" } diff --git a/src/components/OnboardingGuide/i18n/index.ts b/src/components/OnboardingMenu/i18n/index.ts similarity index 100% rename from src/components/OnboardingGuide/i18n/index.ts rename to src/components/OnboardingMenu/i18n/index.ts diff --git a/src/components/OnboardingGuide/i18n/ru.json b/src/components/OnboardingMenu/i18n/ru.json similarity index 53% rename from src/components/OnboardingGuide/i18n/ru.json rename to src/components/OnboardingMenu/i18n/ru.json index 0af30b82..79ac0352 100644 --- a/src/components/OnboardingGuide/i18n/ru.json +++ b/src/components/OnboardingMenu/i18n/ru.json @@ -1,4 +1,4 @@ { - "roll-up": "Свернуть", + "collapse": "Свернуть", "complete": "Завершить" }