Skip to content

Commit

Permalink
draft
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikita-jpg
nikita-jpg committed Feb 21, 2024
1 parent 771d8c3 commit e6e27ba
Show file tree
Hide file tree
Showing 11 changed files with 82 additions and 153 deletions.
58 changes: 0 additions & 58 deletions src/components/OnboardingGuide/Guide/Guide.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,23 @@ $space-l: 20px;

#{$block} {
z-index: $layer-popup;

// min-width: min-content;

max-width: 280px;

background: none;
width: fit-content;

// box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);

&__content {
// width:min-content;
// max-width: 100%;
// width:fit-content;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);

// max-width: 285px;
width: 280px;
display: flex;
flex-direction: column;
overflow: hidden;

box-sizing: border-box;
// width: 100%;
height: 62px;

background-color:var(--g-color-base-info-heavy);
// background-color: var(--g-color-base-positive-heavy);
border-radius: 20px;

transition: height 300ms ease-out;
Expand All @@ -49,7 +38,6 @@ $space-l: 20px;
height: fit-content;
max-height: 684px;
min-height: 300px;
// width: 285px;
}

&__titl-text {
Expand All @@ -76,10 +64,6 @@ $space-l: 20px;
width: 100%;
}

&__title_state_expanded {
// margin-bottom: $space-s;
}

&__graduationCap {
flex-shrink: 0;

Expand All @@ -93,52 +77,10 @@ $space-l: 20px;
}

&__loading{
// width: 100%;
padding-left: 8px;
padding-right: 8px;
}

&__header_state_expanded {
// padding: $space-m $header-height-s $space-l $header-height-s;
}

// &__progressBar .yc-progress{
// padding: 1px;
// background-color: var(--g-color-infographics-tooltip-bg);

// border-radius: var(--g-my-border-radius-l);
// }

// &__progressBar .yc-progress__item{
// border-radius: 8px;
// }

// &__progressBar .cc-progress-bar {
// box-sizing: border-box;
// height: 10px;

// padding: 1px;

// background-color: var(--g-color-infographics-tooltip-bg);
// border-radius: 8px;
// }

// &__progressBar_state_closed .cc-progress-bar {
// height: 6px;
// }

// &__progressBar .cc-progress-bar__bar {
// min-width: 0;
// height: 8px;

// background-color: var(--g-color-base-positive-heavy);
// border-radius: var(--g-my-border-radius-l);
// }

// &__progressBar_state_closed .cc-progress-bar__bar {
// height: 4px;
// }

&__lining {
overflow-y: scroll;

Expand Down
17 changes: 0 additions & 17 deletions src/components/OnboardingGuide/Guide/Guide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
import {block} from '../../utils/cn';
import i18n from '../i18n';


import './Guide.scss';
import { GuideMenuItemSkeleton } from '../GuideMenuItem/GuideMenuItemSkeleton/GuideMenuItemSkeleton';

const cnGuide = block('guide');

Expand Down Expand Up @@ -41,7 +39,6 @@ export const Guide = ({
onCompleteClick,
rollUpbuttonText,
completeButtontext,
isLoading,
children,
}: GuideProps) => {

Expand Down Expand Up @@ -103,20 +100,6 @@ export const Guide = ({
state: expand ? 'expanded' : 'closed',
})}
>
{/* <div className={cnGuide('loading')}>
<GuideMenuItemSkeleton />
<GuideMenuItemSkeleton />
<GuideMenuItemSkeleton />
</div> */}
{/* {isLoading ? (
<div className={cnGuide('loading')}>
<GuideMenuItemSkeleton />
<GuideMenuItemSkeleton />
<GuideMenuItemSkeleton />
</div>
) : (
children
)} */}
{children}
</div>
<div className={cnGuide('buttons')}>
Expand Down
61 changes: 40 additions & 21 deletions src/components/OnboardingGuide/Guide/__stories__/Guide.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,19 @@ import {actions} from '@storybook/addon-actions';
import type {Meta, Story} from '@storybook/react';

import {GuideMenuItem} from '../../GuideMenuItem/GuideMenuItem';
import {addText} from '../../GuideMenuItem/GuideMenuItemText/GuideMenuItemText';
import {addText} from '../../GuideMenuItem/frequentFunctions/GuideMenuItemText/GuideMenuItemText';
import type {GuideProps} from '../Guide';
import {Guide} from '../Guide';
import { addImage } from '../../GuideMenuItem/frequentFunctions/GuideMenuItemImage/GuideMenuItemImage';

export default {
title: 'Components/Guide',
component: Guide,
} as Meta;

const actionsButtonHandlers = () => actions('onClick').onClick('Клик по кнопке');
const actionsButtonHandlers = () => actions('onClick').onClick('Click on the button');
const actionsButtonComplete = () => actions('onClick').onClick('Click on the end button');


const DefaultTemplate: Story<GuideProps> = (args) => {

Expand All @@ -29,6 +32,7 @@ const DefaultTemplate: Story<GuideProps> = (args) => {
{...args}
icon={PencilToSquare}
onHeaderClick={actionsGuideHandlers}
onCompleteClick={actionsButtonComplete}
/>
</div>
);
Expand Down Expand Up @@ -59,10 +63,10 @@ WithLoader.args = {
title="Test element"
isLoading
buttons={[
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'rollUp'}>
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_3'}>
Button 3
</Button>,
<Button view="normal" size="m" key={'сomplete'} onClick={actionsButtonHandlers}>
<Button view="normal" size="m" onClick={actionsButtonHandlers}key={'button_4'}>
Button 4
</Button>,
]}
Expand All @@ -75,11 +79,11 @@ WithLoader.args = {
showDivider={false}
isLoading
buttons={[
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'rollUp'}>
Button 3
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_5'}>
Button 5
</Button>,
<Button view="normal" size="m" key={'сomplete'} onClick={actionsButtonHandlers}>
Button 4
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_6'}>
Button 6
</Button>,
]}
>
Expand All @@ -95,32 +99,47 @@ WithItems.args = {
children: [
<GuideMenuItem
key={'testItem'}
title="Test element"
title="Text"
buttons={[
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'rollUp'}>
Button 3
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_7'}>
Button 7
</Button>,
<Button view="normal" size="m" key={'сomplete'} onClick={actionsButtonHandlers}>
Button 4
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_8'}>
Button 8
</Button>,
]}
>
{[addText('Test text')]}
</GuideMenuItem>,
<GuideMenuItem
key={'testItem'}
title="The test element"
showDivider={false}
title="Image"
buttons={[
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'rollUp'}>
Button 3
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_9'}>
Button 9
</Button>,
<Button view="normal" size="m" key={'сomplete'} onClick={actionsButtonHandlers}>
Button 4
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_10'}>
Button 10
</Button>,
]}
>
{[addText('Test text')]}
{[addImage('https://storage.yandexcloud.net/uikit-storybook-assets/changelog-dialog-picture-1.png')]}
</GuideMenuItem>,
<GuideMenuItem
key={'testItem'}
title="Image and text"
showDivider={false}
buttons={[
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_11'}>
Button 11
</Button>,
<Button view="normal" size="m" onClick={actionsButtonHandlers} key={'button_12'}>
Button 12
</Button>,
]}
>
{[addText('Test text')]}
{[addImage('https://storage.yandexcloud.net/uikit-storybook-assets/changelog-dialog-picture-1.png')]}
</GuideMenuItem>,
],
};
Expand Down Expand Up @@ -158,5 +177,5 @@ Custom.args = {
title: 'Different icons',
progressBarCurrentValue: 30,
defaultExpand:true,
children: ["Кастомная реакт нода",<Button>Кастомная реакт нода (кнопка)</Button>],
children: ["Custom reaction node",<Button>Custom reaction node (button)</Button>],
};
25 changes: 10 additions & 15 deletions src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ $header-height-s: 26px;
padding: $space-2-xs 0px;

color: var(--g-color-text-dark-primary);
// margin-bottom: 12px;
}

&__collapse-header .yc-collapse__panel {
Expand Down Expand Up @@ -59,6 +58,9 @@ $header-height-s: 26px;
margin-right: $space-xs;

align-self: flex-start;
display: flex;
align-items: center;
height: $space-l;
}

&__time-icon {
Expand All @@ -82,7 +84,7 @@ $header-height-s: 26px;
&__node {
display: flex;
flex-direction: column;
gap: var$space-xs;
gap: $space-xs;

margin-bottom: $space-s;
margin-top: $space-s;
Expand All @@ -104,39 +106,32 @@ $header-height-s: 26px;
border-top: 1px solid var(--yc-color-line-generic);
}

// loading
&__loading{
// height: 26px;
// display: flex;
// justify-content: space-between;
// padding: $space-s $header-height-s $space-s $header-height-s;

}

&__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: 26px;
width: 26px;
height: 17px;
width: 17px;

border-radius: 50%;
margin-right: 8px;
}

&__person{
height: 26px;
height: 17px;

width: 100%;
}

.g-disclosure {
&__test {
width: 100%;
overflow: hidden;
}

.g-disclosure__trigger {
Expand Down
2 changes: 1 addition & 1 deletion src/components/OnboardingGuide/GuideMenuItem/GuideMenuItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const GuideMenuItem = ({
)}

</div>
<Disclosure arrowPosition="right" size="l" summary={title}>
<Disclosure arrowPosition="right" size="l" summary={title} className={cnGuideMenuItem('test')}>
{hasArrow && (
<React.Fragment>
<div className={cnGuideMenuItem('node')}>{children}</div>
Expand Down
26 changes: 0 additions & 26 deletions ...components/OnboardingGuide/GuideMenuItem/GuideMenuItemSkeleton/GuideMenuItemSkeleton.scss
View file

This file was deleted.

13 changes: 0 additions & 13 deletions src/components/OnboardingGuide/GuideMenuItem/GuideMenuItemSkeleton/GuideMenuItemSkeleton.tsx
View file

This file was deleted.

Loading

0 comments on commit e6e27ba

Please sign in to comment.