feat(Guide): add Guide

src/components/OnboardingGuide/Guide/Guide.scss

@@ -0,0 +1,118 @@
+@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-bottom: $space-2-xs;
+
+        color: var(--g-color-text-light-primary);
+        background: none;
+        border: none;
+        cursor: pointer;
+        width: 100%;
+    }
+
+    &__graduationCap {
+        flex-shrink: 0;
+
+        margin-right: $space-xs;
+    }
+
+    &__header {
+        padding: $space-s $space-m $space-m $space-m;
+
+        cursor: pointer;
+    }
+
+    &__loading{
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+
+    &__lining {
+        overflow-y: scroll;
+
+        box-sizing: border-box;
+
+        flex: 1 1 auto;
+
+        padding: $space-xs 0px;
+
+        margin-right: 1px;
+
+        margin-bottom: $space-m;
+
+        margin-left: 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-right: $space-l;
+        padding-left: $space-l;
+        margin-bottom: $space-l;
+    }
+}

src/components/OnboardingGuide/Guide/Guide.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import {Icon, Progress,Button} 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 (
+        <div className={cnGuide({expanded: expand})}>
+            <div className={cnGuide('content', {expanded: expand})}>
+                <div
+                    className={cnGuide('header', {state: expand && 'expanded'})}
+                    onClick={onHeaderClickCallback}
+                    onKeyDown={onHeaderClickCallback}
+                    role="button"
+                    tabIndex={0}
+                >
+                    <button className={cnGuide('title')}>
+                        {icon ? (
+                            <Icon
+                                data={icon}
+                                width={20}
+                                height={20}
+                                className={cnGuide('graduationCap')}
+                            />
+                        ) : null}
+
+                        <span className={cnGuide('titl-text')}>{title}</span>
+                    </button>
+                    <div className={cnGuide('progressBar', {state: !expand && 'closed'})}>
+                        <Progress size={"xs"} stack={[{value:progressBarCurrentValue,color:"var(--g-color-base-positive-heavy)"},{value:100-progressBarCurrentValue,color:"var(--g-color-base-background)"}]}/>
+                    </div>
+                </div>
+
+                {expand && (
+                    <React.Fragment>
+                        <div
+                            className={cnGuide('lining', {
+                                state: expand ? 'expanded' : 'closed',
+                            })}
+                        >
+                            {children}                    
+                            </div>
+                        <div className={cnGuide('buttons')}>
+                            <Button
+                                view="normal-contrast"
+                                size="m"
+                                onClick={onRollUpClickCallback}
+                                key={'rollUp'}
+                                width="max"
+                            >
+                                {rollUpbuttonText ?? i18n('roll-up')}
+                            </Button>
+                            <Button
+                                view="outlined-contrast"
+                                onClick={onCompleteCallback}
+                                size="m"
+                                width="max"
+                            >
+                             { completeButtontext ?? i18n('complete')}
+                            </Button>
+                        </div>
+                    </React.Fragment>
+                )}
+            </div>
+        </div>
+    );
+};