diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss index 6e3bcaed..6c943b99 100644 --- a/src/components/OnboardingMenu/OnboardingMenu.scss +++ b/src/components/OnboardingMenu/OnboardingMenu.scss @@ -1,9 +1,7 @@ @use '../variables.scss'; @use '@gravity-ui/uikit/styles/mixins'; -$block: '.#{variables.$ns}guide'; - -$layer-popup: 1000; +$block: '.#{variables.$ns}onboarding-menu'; #{$block} { max-width: 280px; @@ -12,7 +10,7 @@ $layer-popup: 1000; width: fit-content; &__content { - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04); + box-shadow: 0 2px 8px 0 var(--g-color-sfx-shadow-light); display: flex; flex-direction: column; overflow: hidden; @@ -31,19 +29,6 @@ $layer-popup: 1000; } } - &__title-text { - color: var(--g-color-text-brand-contrast); - @include mixins.text-subheader-2(); - - overflow: hidden; - text-overflow: ellipsis; - text-wrap: nowrap; - - &_expand { - @include mixins.text-subheader-3(); - } - } - &__title { display: flex; align-items: center; @@ -51,7 +36,6 @@ $layer-popup: 1000; margin-block-end: var(--g-spacing-1); - color: var(--g-color-text-light-primary); background: none; border: none; cursor: pointer; @@ -59,15 +43,21 @@ $layer-popup: 1000; padding: 0; + color: var(--g-color-text-brand-contrast); + @include mixins.text-subheader-2(); + overflow: hidden; + text-overflow: ellipsis; + text-wrap: nowrap; + &_expand { margin-block-end: var(--g-spacing-2); + @include mixins.text-subheader-3(); } } &__title-icon { flex-shrink: 0; margin-inline: var(--g-spacing-2) var(--g-spacing-2); - color: var(--g-color-text-brand-contrast); } &__header { diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx index 55df8edc..70ed6be0 100644 --- a/src/components/OnboardingMenu/OnboardingMenu.tsx +++ b/src/components/OnboardingMenu/OnboardingMenu.tsx @@ -8,7 +8,7 @@ import i18n from './i18n'; import './OnboardingMenu.scss'; -const cnOnboardingMenu = block('guide'); +const cnOnboardingMenu = block('onboarding-menu'); export type OnboardingMenuProps = { title: React.ReactNode; @@ -23,8 +23,8 @@ export type OnboardingMenuProps = { className?: string; onExpand?: (expanded: boolean) => void; - onCompleteClick: () => void; - onRollUpClick?: (event: React.MouseEvent) => void; + onCompleteClick: (event: React.MouseEvent) => void; + onCollapseClick?: (event: React.MouseEvent) => void; }; export const OnboardingMenu = ({ @@ -33,7 +33,7 @@ export const OnboardingMenu = ({ icon, defaultExpanded, onExpand, - onRollUpClick, + onCollapseClick, onCompleteClick, collapseButtonText, completeButtonText, @@ -51,12 +51,12 @@ export const OnboardingMenu = ({ } }; - const onRollUpClickCallback = (event: React.MouseEvent) => { + const onCollapseClickCallback = (event: React.MouseEvent) => { const newExpand = !expand; setExpand(newExpand); - if (onRollUpClick) { - onRollUpClick(event); + if (onCollapseClick) { + onCollapseClick(event); } if (onExpand) { onExpand(newExpand); @@ -81,9 +81,10 @@ export const OnboardingMenu = ({ /> ) : null} - + {/* {title} - + */} + {title} {collapseButtonText ?? i18n('collapse')} diff --git a/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx b/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx index 64297cc1..ae006491 100644 --- a/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx +++ b/src/components/OnboardingMenu/__stories__/OnboardingMenu.stories.tsx @@ -8,8 +8,8 @@ import type {Meta, Story} from '@storybook/react'; import type {OnboardingMenuProps} from '../OnboardingMenu'; import {OnboardingMenu} from '../OnboardingMenu'; import {OnboardingMenuItem} from '../components/OnboardingMenuItem/OnboardingMenuItem'; -import {OnboardingMenuItemText} from '../components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText'; -import {OnboardingMenuItemImage} from '../components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage'; +import {OnboardingMenuItemText} from '../components/OnboardingMenuItemText/OnboardingMenuItemText'; +import {OnboardingMenuItemImage} from '../components/OnboardingMenutemImage/OnboardingMenuItemImage'; export default { title: 'Components/OnboardingMenu', @@ -57,6 +57,7 @@ LongHeader.args = { WithLoader.args = { title: 'Header text', defaultExpanded: true, + progress: 30, children: [ , + , ]} - {[]} , ); } @@ -87,10 +87,10 @@ export const OnboardingMenuItem = ({
- +
{hasDivider &&
}
diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/index.ts b/src/components/OnboardingMenu/components/OnboardingMenuItem/index.ts new file mode 100644 index 00000000..2f030606 --- /dev/null +++ b/src/components/OnboardingMenu/components/OnboardingMenuItem/index.ts @@ -0,0 +1 @@ +export * from './OnboardingMenuItem'; diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx b/src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenuItemText.tsx similarity index 88% rename from src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx rename to src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenuItemText.tsx index 17f4d87d..72922cdd 100644 --- a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenuItemText.tsx +++ b/src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenuItemText.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {block} from '../../../../../utils/cn'; +import {block} from '../../../utils/cn'; import './OnboardingMenutemText.scss'; diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss b/src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenutemText.scss similarity index 86% rename from src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss rename to src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenutemText.scss index a4295758..0f4efce3 100644 --- a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenuItemText/OnboardingMenutemText.scss +++ b/src/components/OnboardingMenu/components/OnboardingMenuItemText/OnboardingMenutemText.scss @@ -1,4 +1,4 @@ -@use '../../../../../variables.scss'; +@use '../../../variables.scss'; @use '@gravity-ui/uikit/styles/mixins'; $block: '.#{variables.$ns}guide-menu-item-text'; diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItemText/index.ts b/src/components/OnboardingMenu/components/OnboardingMenuItemText/index.ts new file mode 100644 index 00000000..426ef89e --- /dev/null +++ b/src/components/OnboardingMenu/components/OnboardingMenuItemText/index.ts @@ -0,0 +1 @@ +export * from './OnboardingMenuItemText'; diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss b/src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.scss similarity index 83% rename from src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss rename to src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.scss index 66e941f6..05afa42f 100644 --- a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.scss +++ b/src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.scss @@ -1,4 +1,4 @@ -@use '../../../../../variables.scss'; +@use '../../../variables.scss'; $block: '.#{variables.$ns}guide-menu-item-image'; #{$block} { diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx b/src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.tsx similarity index 89% rename from src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx rename to src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.tsx index 64462a80..4acf8834 100644 --- a/src/components/OnboardingMenu/components/OnboardingMenuItem/frequentFunctions/OnboardingMenutemImage/OnboardingMenuItemImage.tsx +++ b/src/components/OnboardingMenu/components/OnboardingMenutemImage/OnboardingMenuItemImage.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {block} from '../../../../../utils/cn'; +import {block} from '../../../utils/cn'; import './OnboardingMenuItemImage.scss'; diff --git a/src/components/OnboardingMenu/components/OnboardingMenutemImage/index.ts b/src/components/OnboardingMenu/components/OnboardingMenutemImage/index.ts new file mode 100644 index 00000000..6a227bbc --- /dev/null +++ b/src/components/OnboardingMenu/components/OnboardingMenutemImage/index.ts @@ -0,0 +1 @@ +export * from './OnboardingMenuItemImage'; diff --git a/src/components/OnboardingMenu/index.ts b/src/components/OnboardingMenu/index.ts new file mode 100644 index 00000000..6ae78466 --- /dev/null +++ b/src/components/OnboardingMenu/index.ts @@ -0,0 +1,4 @@ +export * from './OnboardingMenu'; +export * from './components/OnboardingMenuItem'; +export * from './components/OnboardingMenuItemText'; +export * from './components/OnboardingMenutemImage';