Figma

Header

import { Header } from '@megafon/ui-lk-vas';
Примеры и код
Свойства и методы

Демо данные
const logo = {
    href: '#',
};
const lkSelect = {
    title: 'МегаФон Таргет',
    items: [
        {
            id: 1,
            title: 'Корпоративный ЛК 1',
            href: '#',
            target: '_blank',
            rel: 'noreferrer',
        },
        {
            id: 2,
            title: 'Корпоративный ЛК 2',
            renderWrapper: (element: React.ReactNode) => <div className="router-link">{element}</div>,
        },
        {
            id: 3,
            title: 'Корпоративный ЛК 3',
            onClick: () => undefined,
        },
    ],
    actions: [
        {
            id: 4,
            title: 'Редактировать список',
            onClick: () => undefined,
        },
    ],
};
const finance = {
    balance: {
        title: 'Баланс',
        value: '11 783 ₽',
    },
    bonuses: {
        title: 'Бонусы',
        value: '10 000',
    },
};
const favorites = {
    title: 'Избранные действия',
    items: [
        {
            id: 1,
            title: 'Создать кампанию',
            renderWrapper: (element: React.ReactNode) => <div className="router-link">{element}</div>,
        },
        {
            id: 2,
            title: 'Создать группу клиентов',
            onClick: () => undefined,
        },
        {
            id: 3,
            title: 'Создать имя отправителя',
            href: '#',
        },
    ],
    actions: [
        {
            id: 4,
            title: 'Редактировать список',
            onClick: () => undefined,
        },
    ],
};
const support = {
    items: [
        {
            id: 1,
            title: 'Чат с поддержкой',
            renderWrapper: (element: React.ReactNode) => <div className="router-link">{element}</div>,
        },
        {
            id: 2,
            title: 'Оцените личный кабинет',
            href: '#',
        },
    ],
    info: [
        {
            title: 'Клиентская служба ',
            subtitle: '8 800 550-08-03',
        },
    ],
};
const account = {
    title: 'Татьяна Восьмиглазова',
    subtitle: 'ООО «Трудовые резервы»',
    items: [
        {
            id: 1,
            title: 'Профиль',
            onClick: () => undefined,
        },
        {
            id: 2,
            title: 'Баланс',
            renderWrapper: (element: React.ReactNode) => <div className="router-link">{element}</div>,
        },
        {
            id: 3,
            title: 'Сервисы МегаФона',
            href: '#',
        },
    ],
    actions: [
        {
            id: 4,
            title: 'Выйти',
            onClick: () => undefined,
        },
    ],
};

Базовое использование


      <Header 
          logo={logo}
          lkSelect={lkSelect}
          account={account}
      />

Полный набор виджетов


      <Header 
          logo={logo}
          lkSelect={lkSelect}
          finance={finance}
          support={support}
          favorites={favorites}
          account={account}
      />
Prop nameTypeDefaultDescription
logoLogoTypeВиджет логотипа
lkSelect*LkSelectTypeВиджет выбора личного кабинета
financeFinanceTypeВиджет баланса и бонусов
supportSupportTypeВиджет поддержки
favoritesFavoritesTypeВиджет избранных действий
account*AccountTypeВиджет аккаунта
dataAttrs{ logo?: Record<string, string>; lkSelect?: Record<string, string>; finance?: Record<string, string>; support?: Record<string, string>; favorites?: Record<string, string>; account?: Record<...>; }Дополнительные data атрибуты к внутренним элементам
export type ClickParamsType = {
    /** id */
    id: string | number;
    /** Заголовок */
    title: string;
};


export type ItemType = {
    /** id */
    id: string | number;
    /** Заголовок */
    title: string;
    /** Ссылка */
    href?: string;
    /** Атрибут ссылки target */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /** Атрибут ссылки rel */
    rel?: string;
    /** Обработчик клика */
    onClick?: (params: ClickParamsType) => void;
    /** Функция рендера компонента-обертки */
    renderWrapper?: (node: React.ReactNode) => React.ReactNode;
};


export type LogoType = {
    /** Ссылка */
    href?: string;
    /** Обработчик клика */
    onClick?: () => void;
    /** Функция рендера компонента-обертки */
    renderWrapper?: (node: React.ReactNode) => React.ReactNode;
};


export type LkSelectType = {
    /** Заголовок */
    title: string;
    /** Элементы основного списка */
    items: ItemType[];
    /** Элементы списка действий */
    actions: ItemType[];
};


export type FinanceType = {
    /** Баланс */
    balance?: {
        /** Заголовок */
        title: string;
        /** Значение */
        value: string;
    };
    /** Бонусы */
    bonuses?: {
        /** Заголовок */
        title: string;
        /** Значение */
        value: string;
    };
};


export type SupportType = {
    /** Элементы основного списка */
    items: ItemType[];
    /** Элементы информационного списка */
    info: {
        title: string;
        subtitle: string;
    }[];
};


export type FavoritesType = {
    /** Заголовок */
    title: string;
    /** Элементы основного списка */
    items: ItemType[];
    /** Элементы списка действий */
    actions: ItemType[];
};


export type AccountType = {
    /** Заголовок */
    title: string;
    /** Подзаголовок */
    subtitle: string;
    /** Элементы основного списка */
    items: ItemType[];
    /** Элементы списка действий */
    actions: ItemType[];
};