fix: progress

Author: astandrik

src/components/HelpCenter/FooterItemComponent.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {Link} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+
+import type {DisplayFooterItem} from './types';
+
+const b = cn('help-center');
+
+export function FooterItemComponent({
+    item,
+    footerItemClassName,
+    children,
+}: {
+    item: DisplayFooterItem;
+    footerItemClassName?: string;
+    children?: React.ReactNode;
+}) {
+    const {text, url, content} = item;
+
+    return url ? (
+        <Link
+            className={b('contact-item', {url: true}, footerItemClassName)}
+            rel="noopener"
+            target="_blank"
+            href={url}
+        >
+            {children}
+            {text}
+            {content}
+        </Link>
+    ) : (
+        <span className={b('contact-item', footerItemClassName)}>
+            {children}
+            {text}
+            {content}
+        </span>
+    );
+}

src/components/HelpCenter/HelpCenter.scss

@@ -0,0 +1,156 @@
+@import '../../styles/mixins.scss';
+
+// $icons: (
+//     'circle-exclamation': '@gravity-ui/icons/svgs/circle-exclamation.svg',
+//     'comments': '@gravity-ui/icons/svgs/comments.svg',
+//     'logo-telegram': '@gravity-ui/icons/svgs/logo-telegram.svg',
+//     'pencil-to-square': '@gravity-ui/icons/svgs/pencil-to-square.svg',
+//     'gear-play': '@gravity-ui/icons/svgs/gear-play.svg',
+//     'graduation-cap': '@gravity-ui/icons/svgs/graduation-cap.svg',
+//     'keyboard': '@gravity-ui/icons/svgs/keyboard.svg',
+//     'code': '@gravity-ui/icons/svgs/code.svg',
+//     'logo-yandex-tracker': '@gravity-ui/icons/svgs/logo-yandex-tracker.svg',
+//     'suitcase': '@gravity-ui/icons/svgs/suitcase.svg',
+//     'persons': '@gravity-ui/icons/svgs/persons.svg',
+//     'life-ring': '@gravity-ui/icons/svgs/life-ring.svg',
+//     'file-text': '@gravity-ui/icons/svgs/file-text.svg',
+//     'curly-brackets': '@gravity-ui/icons/svgs/curly-brackets.svg',
+// );
+
+:root {
+    --help-center-padding: 16px;
+    --help-center-header-padding: 16px;
+}
+
+.help-center {
+    &__content {
+        box-sizing: border-box;
+        width: 280px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        padding: var(--help-center-header-padding) 0 0 0;
+    }
+
+    &__docs,
+    &__footer {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__docs {
+        padding-bottom: 8px;
+    }
+
+    &__footer {
+        position: relative;
+        border-top: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-generic);
+        border-radius: 0 0 4px 4px;
+        padding: 12px 0 8px;
+
+        &_with-extra-footer {
+            border-bottom: 1px solid var(--g-color-line-generic);
+            border-radius: 0;
+        }
+    }
+
+    &__title {
+        margin-bottom: 4px;
+        flex-shrink: 0;
+        padding: 4px var(--help-center-padding);
+    }
+
+    &__title-link {
+        display: inline-flex;
+        align-self: flex-start;
+        align-items: center;
+    }
+
+    &__docs-category-title {
+        margin-bottom: 4px;
+        font-weight: 500;
+        flex-shrink: 0;
+        padding: 4px var(--help-center-padding);
+    }
+
+    &__docs-list-wrap {
+        display: flex;
+        flex-shrink: 0;
+        margin-bottom: 12px;
+        flex-direction: column;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &__item {
+        min-height: 32px;
+        display: flex;
+        cursor: pointer;
+    }
+
+    &__docs-divider {
+        width: 100%;
+        height: 1px;
+        background-color: var(--g-color-line-generic);
+        margin: 8px 0;
+    }
+
+    &__docs-link,
+    &__contact-item {
+        box-sizing: border-box;
+        flex-grow: 1;
+        display: flex;
+        height: 100%;
+        width: 100%;
+        align-items: center;
+        padding: 8px var(--help-center-padding);
+        line-height: var(--g-text-body-1-line-height);
+    }
+
+    &__contact-item_url,
+    &__docs-link {
+        &,
+        &:hover,
+        &:active,
+        &:visited,
+        &:focus {
+            text-decoration: none;
+            outline: none;
+            color: inherit;
+        }
+    }
+
+    &_align_vertical {
+        display: inline-flex;
+        flex-direction: column;
+    }
+
+    &__item-icon-wrap {
+        width: 16px;
+        height: 16px;
+        margin-right: 10px;
+    }
+
+    // &__icon {
+    //     width: 16px;
+    //     height: 16px;
+    //     background-color: currentColor;
+    //     mask-size: contain;
+    //     mask-repeat: no-repeat;
+    //     background-repeat: no-repeat;
+
+    //     @each $name, $path in $icons {
+    //         &.#{$name} {
+    //             mask-image: url(#{$path});
+    //         }
+    //     }
+    // }
+
+    &__extra-footer-wrap {
+        padding: var(--g-spacing-2) 0;
+    }
+}