@megafon/ui-lk-vas 0.10.9 → 0.10.11

package/dist/es/components/Charts/Chart/components/_ChartBase/ChartBase.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import { ArcElement, BarController, BarElement, CategoryScale, Chart, DoughnutController, LinearScale, LineController, LineElement, PointElement, Tooltip } from 'chart.js';
+import setChartDefaultSettings from "./helpers";
+Chart.register(ArcElement, BarController, BarElement, CategoryScale, DoughnutController, LinearScale, LineController, LineElement, PointElement, Tooltip);
+setChartDefaultSettings();
+var cn = cnCreate('mfui-lkvas-chart-base');
+var ChartBase = function ChartBase(_ref) {
+  var data = _ref.data,
+    options = _ref.options,
+    type = _ref.type,
+    updateMode = _ref.updateMode,
+    height = _ref.height,
+    width = _ref.width;
+  var chartInstance = useRef(null);
+  useEffect(function () {
+    if (chartInstance.current) {
+      chartInstance.current.data = data;
+      chartInstance.current.options = options;
+      chartInstance.current.update(updateMode);
+    }
+  }, [data, options, updateMode]);
+  var nodeRef = useCallback(function (node) {
+    var _a;
+    (_a = chartInstance.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    if (node) {
+      chartInstance.current = new Chart(node, {
+        type: type,
+        data: data,
+        options: options
+      });
+    }
+  }, [data, options, type]);
+  return /*#__PURE__*/React.createElement("canvas", {
+    className: cn(),
+    ref: nodeRef,
+    height: height,
+    width: width
+  });
+};
+export default ChartBase;

package/dist/es/components/Charts/Chart/components/_ChartBase/helpers.d.ts

@@ -0,0 +1,2 @@
+declare const setChartDefaultSettings: () => void;
+export default setChartDefaultSettings;

package/dist/es/components/Charts/Chart/components/_ChartBase/helpers.js

@@ -0,0 +1,49 @@
+import { Chart } from 'chart.js';
+import { TOOLTIP_COLORS } from "../chartColors";
+var FONT_FAMILY = 'Graphik, Arial, sans-serif';
+var setChartDefaultSettings = function setChartDefaultSettings() {
+  Chart.defaults.responsive = true;
+  Chart.defaults.font.family = FONT_FAMILY;
+  Chart.defaults.scales.category.ticks.autoSkip = true;
+  Chart.defaults.scales.category.ticks.maxRotation = 0;
+  Chart.defaults.scales.category.ticks.font = {
+    size: 12
+  };
+  Chart.defaults.scales.linear.type = 'linear';
+  Chart.defaults.scales.linear.position = 'left';
+  Chart.defaults.scales.linear.beginAtZero = true;
+  Chart.defaults.scales.linear.ticks.autoSkip = true;
+  Chart.defaults.scales.linear.ticks.maxRotation = 0;
+  Chart.defaults.scales.linear.ticks.font = {
+    size: 12
+  };
+  Chart.defaults.plugins.tooltip.enabled = true;
+  Chart.defaults.plugins.tooltip.backgroundColor = TOOLTIP_COLORS.background;
+  Chart.defaults.plugins.tooltip.titleColor = TOOLTIP_COLORS.titleColor;
+  Chart.defaults.plugins.tooltip.titleFont = {
+    weight: '400'
+  };
+  Chart.defaults.plugins.tooltip.bodyFont = {
+    weight: '500'
+  };
+  Chart.defaults.plugins.tooltip.bodyAlign = 'left';
+  Chart.defaults.plugins.tooltip.padding = {
+    top: 8,
+    left: 12,
+    bottom: 6,
+    right: 12
+  };
+  Chart.defaults.plugins.tooltip.cornerRadius = 8;
+  Chart.defaults.plugins.tooltip.displayColors = true;
+  Chart.defaults.plugins.tooltip.boxWidth = 8;
+  Chart.defaults.plugins.tooltip.boxHeight = 8;
+  Chart.defaults.plugins.tooltip.boxPadding = 4;
+  Chart.defaults.plugins.tooltip.usePointStyle = true;
+  Chart.defaults.plugins.tooltip.callbacks.labelPointStyle = function () {
+    return {
+      pointStyle: 'circle',
+      rotation: 0
+    };
+  };
+};
+export default setChartDefaultSettings;

package/dist/es/components/Charts/Chart/components/_ChartDoughnut/ChartDoughnut.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-chart-doughnut{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mfui-lkvas-chart-doughnut__chart{margin:-4px;pointer-events:none}

package/dist/es/components/Charts/Chart/components/_ChartDoughnut/ChartDoughnut.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IChart } from '../../types';
+import './ChartDoughnut.scss';
+interface IChartDoughnut extends Pick<IChart, 'datasets' | 'labels' | 'hideLegend'> {
+    type: 'doughnut';
+    bgColor?: string;
+}
+declare const ChartDoughnut: React.FC<IChartDoughnut>;
+export default ChartDoughnut;

package/dist/es/components/Charts/Chart/components/_ChartDoughnut/ChartDoughnut.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import ChartBase from "../_ChartBase/ChartBase";
+import ChartLegend from "../_ChartLegend/ChartLegend";
+import CHART_COLORS, { DOUGHNUT_BORDER_COLOR } from "../chartColors";
+import "./ChartDoughnut.css";
+var DOUGHNUT_SIZE = 220;
+var cn = cnCreate('mfui-lkvas-chart-doughnut');
+var ChartDoughnut = function ChartDoughnut(_ref) {
+  var type = _ref.type,
+    datasets = _ref.datasets,
+    labels = _ref.labels,
+    _ref$hideLegend = _ref.hideLegend,
+    hideLegend = _ref$hideLegend === void 0 ? false : _ref$hideLegend,
+    _ref$bgColor = _ref.bgColor,
+    bgColor = _ref$bgColor === void 0 ? DOUGHNUT_BORDER_COLOR : _ref$bgColor;
+  var _datasets = _slicedToArray(datasets, 1),
+    _datasets$ = _datasets[0],
+    data = _datasets$.data,
+    unit = _datasets$.unit;
+  var legendItems = data.map(function (value, index) {
+    return {
+      title: labels[index],
+      value: unit ? value + unit : value,
+      color: CHART_COLORS[index]
+    };
+  });
+  var chartData = {
+    labels: labels,
+    datasets: datasets.map(function (dataset) {
+      return _extends(_extends({}, dataset), {
+        backgroundColor: CHART_COLORS,
+        borderColor: bgColor,
+        borderWidth: 4
+      });
+    })
+  };
+  var chartOptions = {
+    events: [],
+    responsive: false,
+    cutout: 70,
+    plugins: {
+      tooltip: {
+        enabled: false
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('chart')
+  }, /*#__PURE__*/React.createElement(ChartBase, {
+    type: type,
+    data: chartData,
+    options: chartOptions,
+    height: DOUGHNUT_SIZE,
+    width: DOUGHNUT_SIZE
+  })), !hideLegend && /*#__PURE__*/React.createElement(ChartLegend, {
+    items: legendItems
+  }));
+};
+export default ChartDoughnut;

package/dist/es/components/Charts/Chart/components/_ChartLegend/ChartLegend.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-chart-legend{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;border:1px solid var(--spbSky1);border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:space-evenly;padding:12px;width:100%}.mfui-lkvas-chart-legend,.mfui-lkvas-chart-legend__item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}.mfui-lkvas-chart-legend__item-point{-ms-flex-negative:0;border-radius:50%;flex-shrink:0;height:12px;margin-top:6px;width:12px}.mfui-lkvas-chart-legend__item-title{display:block;font-size:15px;font-weight:400;line-height:24px}.mfui-lkvas-chart-legend__item-value{display:block;font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-lkvas-chart-legend__item-value{font-size:20px;line-height:28px}}

package/dist/es/components/Charts/Chart/components/_ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './ChartLegend.scss';
+export type ChartLegendItemType = {
+    title: string;
+    value: number | string;
+    color: string;
+};
+export interface IChartLegend {
+    items: ChartLegendItemType[];
+}
+declare const ChartLegend: React.FC<IChartLegend>;
+export default ChartLegend;

package/dist/es/components/Charts/Chart/components/_ChartLegend/ChartLegend.js

@@ -0,0 +1,29 @@
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./ChartLegend.css";
+var cn = cnCreate('mfui-lkvas-chart-legend');
+var ChartLegend = function ChartLegend(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, items.map(function (_ref2, index) {
+    var title = _ref2.title,
+      value = _ref2.value,
+      color = _ref2.color;
+    return /*#__PURE__*/React.createElement("div", {
+      key: title + index,
+      className: cn('item')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('item-point'),
+      style: {
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: cn('item-title')
+    }, title), !!value && /*#__PURE__*/React.createElement("span", {
+      className: cn('item-value')
+    }, value)));
+  }));
+};
+export default ChartLegend;

package/dist/es/components/Charts/Chart/components/_ChartLine/ChartLine.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-chart-line{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.mfui-lkvas-chart-line__chart{cursor:pointer;height:230px;width:100%}

package/dist/es/components/Charts/Chart/components/_ChartLine/ChartLine.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IScalesColors, IChart } from '../../types';
+import './ChartLine.scss';
+interface IChartLine extends Pick<IChart, 'datasets' | 'labels' | 'hideLegend' | 'scales'> {
+    type: 'line';
+    scalesColors: IScalesColors;
+}
+declare const ChartLine: React.FC<IChartLine>;
+export default ChartLine;

package/dist/es/components/Charts/Chart/components/_ChartLine/ChartLine.js

@@ -0,0 +1,112 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.object.to-string.js";
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import ChartBase from "../_ChartBase/ChartBase";
+import ChartLegend from "../_ChartLegend/ChartLegend";
+import CHART_COLORS, { SCALES_COLORS, POINT_BORDER_COLOR } from "../chartColors";
+import "./ChartLine.css";
+var cn = cnCreate('mfui-lkvas-chart-line');
+var ChartLine = function ChartLine(_ref) {
+  var type = _ref.type,
+    datasets = _ref.datasets,
+    labels = _ref.labels,
+    _ref$scales = _ref.scales,
+    _ref$scales2 = _ref$scales === void 0 ? {} : _ref$scales,
+    _ref$scales2$skipTick = _ref$scales2.skipTicksX,
+    skipTicksX = _ref$scales2$skipTick === void 0 ? 1 : _ref$scales2$skipTick,
+    _ref$scales2$skipTick2 = _ref$scales2.skipTicksY,
+    skipTicksY = _ref$scales2$skipTick2 === void 0 ? 1 : _ref$scales2$skipTick2,
+    _ref$hideLegend = _ref.hideLegend,
+    hideLegend = _ref$hideLegend === void 0 ? false : _ref$hideLegend,
+    _ref$scalesColors = _ref.scalesColors,
+    _ref$scalesColors$tic = _ref$scalesColors.ticksColor,
+    ticksColor = _ref$scalesColors$tic === void 0 ? SCALES_COLORS.ticks : _ref$scalesColors$tic,
+    _ref$scalesColors$sca = _ref$scalesColors.scaleColor,
+    scaleColor = _ref$scalesColors$sca === void 0 ? SCALES_COLORS.scale : _ref$scalesColors$sca;
+  var chartData = {
+    labels: labels,
+    datasets: datasets.map(function (dataset, index) {
+      return _extends(_extends({}, dataset), {
+        backgroundColor: CHART_COLORS[index],
+        borderColor: CHART_COLORS[index],
+        borderWidth: 2,
+        tension: 0,
+        pointRadius: 0,
+        hitRadius: 5,
+        hoverRadius: 0,
+        pointBorderColor: POINT_BORDER_COLOR
+      });
+    })
+  };
+  var chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        display: true,
+        beginAtZero: true,
+        type: 'linear',
+        position: 'left',
+        grid: {
+          color: scaleColor
+        },
+        border: {
+          color: scaleColor
+        },
+        ticks: {
+          color: ticksColor,
+          autoSkip: true,
+          maxRotation: 0,
+          callback: function callback(value, index) {
+            return index % skipTicksY === 0 ? value : '';
+          }
+        }
+      },
+      x: {
+        grid: {
+          color: scaleColor
+        },
+        border: {
+          color: scaleColor
+        },
+        ticks: {
+          color: ticksColor,
+          autoSkip: true,
+          maxRotation: 0,
+          callback: function callback(_value, index) {
+            return index % skipTicksX === 0 ? labels[index] : '';
+          }
+        }
+      }
+    }
+  };
+  var legendItems = datasets.map(function (_ref2, index) {
+    var _ref2$label = _ref2.label,
+      label = _ref2$label === void 0 ? '' : _ref2$label,
+      data = _ref2.data,
+      unit = _ref2.unit;
+    var sumValue = data.reduce(function (sum, current) {
+      return sum + current;
+    }, 0);
+    return {
+      title: label,
+      value: unit ? sumValue + unit : sumValue,
+      color: CHART_COLORS[index]
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('chart')
+  }, /*#__PURE__*/React.createElement(ChartBase, {
+    type: type,
+    data: chartData,
+    options: chartOptions
+  })), !hideLegend && /*#__PURE__*/React.createElement(ChartLegend, {
+    items: legendItems
+  }));
+};
+export default ChartLine;

package/dist/es/components/Charts/Chart/components/chartColors.d.ts

@@ -0,0 +1,16 @@
+declare const CHART_COLORS: string[];
+export declare const CHART_BAR_COLORS: {
+    main: string;
+    hover: string;
+}[];
+export declare const POINT_BORDER_COLOR = "rgba(255, 255, 255, 0.5)";
+export declare const DOUGHNUT_BORDER_COLOR = "rgba(255, 255, 255, 0.1)";
+export declare const TOOLTIP_COLORS: {
+    background: string;
+    titleColor: string;
+};
+export declare const SCALES_COLORS: {
+    ticks: string;
+    scale: string;
+};
+export default CHART_COLORS;

package/dist/es/components/Charts/Chart/components/chartColors.js

@@ -0,0 +1,42 @@
+var CHART_COLORS = ['#00B956',
+// brandGreen
+'#731982',
+// brandPurple
+'#3CB9FF',
+// sky
+'#AA5AFF',
+// berry
+'#1E64AA',
+// night
+'#E64DE6',
+// flamingo
+'#AA67C1',
+// brandPurple80
+'#999999' // spbSky3
+];
+export var CHART_BAR_COLORS = [{
+  main: '#3CB9FF',
+  // sky
+  hover: '#63C7FF' // sky80
+}, {
+  main: '#AA5AFF',
+  // berry
+  hover: '#BB7BFF' // berry80
+}, {
+  main: '#E64DE6',
+  // flamingo
+  hover: '#EB70EB' // flamingo80
+}];
+export var POINT_BORDER_COLOR = 'rgba(255, 255, 255, 0.5)';
+export var DOUGHNUT_BORDER_COLOR = 'rgba(255, 255, 255, 0.1)';
+export var TOOLTIP_COLORS = {
+  background: '#1E64AA',
+  // night
+  titleColor: '#D2E0EE' // night20
+};
+export var SCALES_COLORS = {
+  ticks: '#999999',
+  // spbSky3
+  scale: '#999999' // spbSky3
+};
+export default CHART_COLORS;

package/dist/es/components/Charts/Chart/types.d.ts

@@ -0,0 +1,40 @@
+import { ChartTypeRegistry } from 'chart.js';
+export interface IChart {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Тип диаграммы */
+    type: keyof Pick<ChartTypeRegistry, 'doughnut' | 'line' | 'bar'>;
+    /** Заголовок */
+    title: string;
+    /** Данные для построения графика */
+    datasets: {
+        /** Название набора данных */
+        label?: string;
+        /** Значение (по оси Y) */
+        data: number[];
+        /** единицы измерения */
+        unit?: string;
+    }[];
+    /** Метки (по оси X) */
+    labels: string[];
+    /** Параметры шкалы измерений */
+    scales?: {
+        /** пропуски подписей значений по шкале Х */
+        skipTicksX?: 1 | 2 | 3 | 4 | 5;
+        /** пропуски подписей значений по шкале Y */
+        skipTicksY?: 1 | 2 | 3 | 4 | 5;
+    };
+    /** Ссылка для скачивания */
+    downloadLink?: string;
+    /** Отключить легенду */
+    hideLegend?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        downloadButton?: Record<string, string>;
+    };
+}
+export interface IScalesColors {
+    ticksColor?: string;
+    scaleColor?: string;
+}

package/dist/es/components/Charts/Chart/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es/components/Header/Header.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-header{display:-webkit-box;display:-ms-flexbox;display:flex;gap:16px;position:relative;z-index:100;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:400;height:72px;padding:0 32px}

package/dist/es/components/Header/Header.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { AccountType } from './components/_HeaderAccount/HeaderAccount';
+import { FavoritesType } from './components/_HeaderFavorites/HeaderFavorites';
+import { FinanceType } from './components/_HeaderFinance/HeaderFinance';
+import { LkSelectType } from './components/_HeaderLkSelect/HeaderLkSelect';
+import { LogoType } from './components/_HeaderLogo/HeaderLogo';
+import { SupportType } from './components/_HeaderSupport/HeaderSupport';
+import './Header.scss';
+export interface IHeaderProps {
+    /** Виджет логотипа */
+    logo?: LogoType;
+    /** Виджет выбора личного кабинета */
+    lkSelect: LkSelectType;
+    /** Виджет баланса и бонусов */
+    finance?: FinanceType;
+    /** Виджет поддержки */
+    support?: SupportType;
+    /** Виджет избранных действий */
+    favorites?: FavoritesType;
+    /** Виджет аккаунта */
+    account: AccountType;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        logo?: Record<string, string>;
+        lkSelect?: Record<string, string>;
+        finance?: Record<string, string>;
+        support?: Record<string, string>;
+        favorites?: Record<string, string>;
+        account?: Record<string, string>;
+    };
+}
+declare const Header: React.FC<IHeaderProps>;
+export default Header;

package/dist/es/components/Header/Header.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import HeaderAccount from "./components/_HeaderAccount/HeaderAccount";
+import HeaderFavorites from "./components/_HeaderFavorites/HeaderFavorites";
+import HeaderFinance from "./components/_HeaderFinance/HeaderFinance";
+import HeaderLkSelect from "./components/_HeaderLkSelect/HeaderLkSelect";
+import HeaderLogo from "./components/_HeaderLogo/HeaderLogo";
+import HeaderSupport from "./components/_HeaderSupport/HeaderSupport";
+import "./Header.css";
+var cn = cnCreate('mfui-lkvas-header');
+var Header = function Header(_ref) {
+  var logo = _ref.logo,
+    lkSelect = _ref.lkSelect,
+    finance = _ref.finance,
+    favorites = _ref.favorites,
+    account = _ref.account,
+    support = _ref.support,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("header", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(HeaderLogo, _extends({}, logo, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.logo
+    }
+  })), /*#__PURE__*/React.createElement(HeaderLkSelect, _extends({}, lkSelect, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.lkSelect
+    }
+  })), !!finance && /*#__PURE__*/React.createElement(HeaderFinance, _extends({}, finance, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.finance
+    }
+  })), !!support && /*#__PURE__*/React.createElement(HeaderSupport, _extends({}, support, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.support
+    }
+  })), !!favorites && /*#__PURE__*/React.createElement(HeaderFavorites, _extends({}, favorites, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.favorites
+    }
+  })), /*#__PURE__*/React.createElement(HeaderAccount, _extends({}, account, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.account
+    }
+  })));
+};
+export default Header;

package/dist/es/components/Header/components/_HeaderAccount/HeaderAccount.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-account{max-width:256px;min-width:130px}

package/dist/es/components/Header/components/_HeaderAccount/HeaderAccount.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ItemType } from '../../../_DropdownItem/DropdownItem';
+import './HeaderAccount.scss';
+export type AccountType = {
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    subtitle: string;
+    /** Элементы основного списка */
+    items: ItemType[];
+    /** Элементы списка действий */
+    actions: ItemType[];
+};
+export interface IHeaderAccountProps extends AccountType {
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const HeaderAccount: React.FC<IHeaderAccountProps>;
+export default HeaderAccount;

package/dist/es/components/Header/components/_HeaderAccount/HeaderAccount.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Dropdown from "../../../_Dropdown/Dropdown";
+import DropdownItem from "../../../_DropdownItem/DropdownItem";
+import HeaderButton from "../_HeaderButton/HeaderButton";
+import "./HeaderAccount.css";
+var cn = cnCreate('mfui-lkvas-account');
+var HeaderAccount = function HeaderAccount(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    items = _ref.items,
+    actions = _ref.actions;
+  var renderTrigger = function renderTrigger(isOpened) {
+    return /*#__PURE__*/React.createElement(HeaderButton, {
+      title: title,
+      subtitle: subtitle,
+      icon: "profile",
+      color: "green-soft",
+      isOpened: isOpened
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className])
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    className: cn('dropdown'),
+    renderTrigger: renderTrigger
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(DropdownItem, _extends({}, item, {
+      key: item.id + item.title
+    }));
+  }), actions.map(function (action, i) {
+    return /*#__PURE__*/React.createElement(DropdownItem, _extends({}, action, {
+      hasTopBorder: i === 0,
+      key: action.id + action.title,
+      color: "red"
+    }));
+  })));
+};
+export default HeaderAccount;

package/dist/es/components/Header/components/_HeaderButton/HeaderButton.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-lkvas-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:52px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;display:inline-block;font-weight:400;height:40px;max-width:100%;min-width:100%;outline:none;overflow:hidden;padding:0;text-align:left;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-lkvas-button_color_green{background-color:var(--brandGreen);color:var(--stcWhite)}@media (pointer:fine){.mfui-lkvas-button_color_green:hover{background-color:var(--buttonHoverGreen)}}.mfui-lkvas-button_color_green:active{background-color:var(--brandGreen)}.mfui-lkvas-button_color_green-soft{background-color:var(--brandGreen20)}@media (pointer:fine){.mfui-lkvas-button_color_green-soft:hover{background-color:var(--buttonHoverGreenSoft)}}.mfui-lkvas-button_color_green-soft:active{background-color:var(--brandGreen20)}.mfui-lkvas-button__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:inherit;padding:0 8px;width:100%}.mfui-lkvas-button__support-svg{-ms-flex-negative:0;flex-shrink:0;height:32px;width:32px;fill:currentColor}.mfui-lkvas-button__profile-svg{-ms-flex-negative:0;flex-shrink:0;height:20px;width:20px;fill:currentColor}.mfui-lkvas-button__text{margin:0 4px 0 8px;overflow:hidden}.mfui-lkvas-button_has-icon .mfui-lkvas-button__text{margin-left:4px}.mfui-lkvas-button__title{font-size:15px;font-weight:500;line-height:18px}.mfui-lkvas-button__subtitle,.mfui-lkvas-button__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-lkvas-button__subtitle{font-size:12px;line-height:14px}.mfui-lkvas-button__arrow{-ms-flex-negative:0;background-color:var(--stcWhite);border-radius:50%;flex-shrink:0;height:24px;-webkit-transition:rotate .3s;transition:rotate .3s;width:24px}.mfui-lkvas-button_opened .mfui-lkvas-button__arrow{rotate:-180deg}.mfui-lkvas-button__arrow-svg{height:100%;width:100%;fill:var(--stcBlack)}

package/dist/es/components/Header/components/_HeaderButton/HeaderButton.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import './HeaderButton.scss';
+export interface IHeaderButtonProps {
+    className?: string;
+    title?: string;
+    subtitle?: string;
+    icon?: 'support' | 'profile';
+    color?: 'green' | 'green-soft';
+    isOpened: boolean;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        supportIcon?: Record<string, string>;
+        profileIcon?: Record<string, string>;
+        text?: Record<string, string>;
+        title?: Record<string, string>;
+        subtitle?: Record<string, string>;
+    };
+}
+declare const HeaderButton: React.FC<IHeaderButtonProps>;
+export default HeaderButton;