@megafon/ui-shared 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { BackgroundColorType, CardDataType } from './types';
+import './CardsOnBackground.scss';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface ICardsOnBackground {
+    /** Карточки. Минимальное количество 2 карточки */
+    items: CardDataType[];
+    /** Цвет фона карточек */
+    background?: BackgroundColorType;
+    /** Выстраивать карточки в карусель */
+    hasCarousel?: boolean;
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+        itemTitle?: string;
+        itemButton?: string;
+        itemExtraButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+    };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const CardsOnBackground: React.FC<ICardsOnBackground>;
+export default CardsOnBackground;

package/dist/es/components/CardsOnBackground/CardsOnBackground.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useResolutions from "../../hooks/useResolutions";
+import CardOnBackground from "./components/CardOnBackground";
+import useUniformHeights from "./useUniformHeights";
+import "./CardsOnBackground.css";
+var getSlidesSettings = function getSlidesSettings(count) {
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+    slidesPerView: 1,
+    spaceBetween: 16
+  }), breakpoints.MOBILE_BIG_START, {
+    slidesPerView: 2,
+    spaceBetween: 20
+  }), breakpoints.DESKTOP_MIDDLE_START, {
+    slidesPerView: count < 3 ? count : 3,
+    spaceBetween: 20
+  }), breakpoints.DESKTOP_BIG_START, {
+    slidesPerView: count < 4 ? count : 4,
+    spaceBetween: 20
+  });
+};
+var MIN_ITEMS_COUNT = 2;
+var cn = cnCreate('mfui-9-cards-on-background');
+var CardsOnBackground = function CardsOnBackground(_ref2) {
+  var items = _ref2.items,
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? 'gray' : _ref2$background,
+    _ref2$hasCarousel = _ref2.hasCarousel,
+    hasCarousel = _ref2$hasCarousel === void 0 ? false : _ref2$hasCarousel,
+    className = _ref2.className,
+    _ref2$classes = _ref2.classes,
+    classes = _ref2$classes === void 0 ? {} : _ref2$classes,
+    dataAttrs = _ref2.dataAttrs,
+    onCarouselChange = _ref2.onCarouselChange,
+    rootRef = _ref2.rootRef;
+  var cardsCount = items.length;
+  var _useResolutions = useResolutions(),
+    isMobile = _useResolutions.isMobile;
+  var _useUniformHeights = useUniformHeights(cardsCount, {
+      disabled: isMobile
+    }),
+    maxHeight = _useUniformHeights.maxHeight,
+    getRef = _useUniformHeights.getRef;
+  if (cardsCount < MIN_ITEMS_COUNT) {
+    return null;
+  }
+  var renderCard = function renderCard(item, index) {
+    return /*#__PURE__*/React.createElement(CardOnBackground, _extends({}, item, !!maxHeight && {
+      headerHeight: maxHeight
+    }, {
+      headerRef: getRef(index),
+      classes: {
+        root: classes.item,
+        title: classes.itemTitle,
+        button: classes.itemButton,
+        extraButton: classes.itemExtraButton
+      },
+      dataAttrs: {
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
+      }
+    }));
+  };
+  var renderContent = function renderContent() {
+    if (hasCarousel) {
+      return /*#__PURE__*/React.createElement(Carousel, {
+        slidesSettings: getSlidesSettings(cardsCount),
+        arrowPosition: "inside",
+        onChange: onCarouselChange
+      }, items.map(function (item, i) {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: item.title + i
+        }, renderCard(item, i));
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('grid', {
+        count: "".concat(cardsCount)
+      })
+    }, items.map(function (item, i) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cn('grid-item'),
+        key: item.title + i
+      }, renderCard(item, i));
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      background: background,
+      carousel: hasCarousel
+    }, [className, classes.root])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), renderContent());
+};
+export default CardsOnBackground;

package/dist/es/components/CardsOnBackground/components/CardOnBackground.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-card-on-background{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--base);border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);height:100%;justify-content:center;min-width:240px;padding:16px 16px 0;text-decoration:none}.mfui-9-card-on-background:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-card-on-background:focus{outline:none}@media screen and (min-width:768px){.mfui-9-card-on-background{padding:24px 24px 0}}.mfui-9-card-on-background:hover{text-decoration:none}.mfui-9-card-on-background_active:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-9-card-on-background__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:520px;width:100%}.mfui-9-card-on-background__description{font-size:15px;font-weight:400;line-height:24px;margin-top:8px;text-align:center}.mfui-9-card-on-background__image-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:118px;justify-content:center;margin:16px 0;overflow:hidden;width:118px}@media screen and (min-width:1024px){.mfui-9-card-on-background__image-wrapper{height:168px;width:168px}}.mfui-9-card-on-background__image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.mfui-9-card-on-background__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-bottom:16px;width:100%}@media screen and (min-width:768px){.mfui-9-card-on-background__buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:24px}}.mfui-9-card-on-background__button{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%}

package/dist/es/components/CardsOnBackground/components/CardOnBackground.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CardDataType } from '../types';
+import './CardOnBackground.scss';
+export type CardOnBackgroundType = CardDataType & {
+    headerHeight?: number;
+    headerRef: (node: HTMLDivElement) => void;
+    classes?: {
+        root?: string;
+        title?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        title?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+        header?: Record<string, string>;
+    };
+};
+declare const CardOnBackground: React.FC<CardOnBackgroundType>;
+export default CardOnBackground;

package/dist/es/components/CardsOnBackground/components/CardOnBackground.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import React from 'react';
+import { Button, Header } from '@megafon/ui-core';
+import { cnCreate, convert, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../helpers/setRelAttribute";
+import "./CardOnBackground.css";
+var cn = cnCreate('mfui-9-card-on-background');
+var CardOnBackground = function CardOnBackground(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    imageSrc = _ref.imageSrc,
+    _ref$imageAlt = _ref.imageAlt,
+    imageAlt = _ref$imageAlt === void 0 ? '' : _ref$imageAlt,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel,
+    headerHeight = _ref.headerHeight,
+    headerRef = _ref.headerRef,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var showButtons = !!(button === null || button === void 0 ? void 0 : button.title) || !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title);
+  var isLink = !!href && !showButtons;
+  var ElementType = isLink ? 'a' : 'div';
+  var currentRel = setRelAttribute(rel, target);
+  return /*#__PURE__*/React.createElement(ElementType, _extends({
+    className: cn({
+      active: isLink
+    }, [classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, isLink && {
+    href: href,
+    target: target,
+    rel: currentRel
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('header-wrapper')
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header, {
+    style: {
+      minHeight: headerHeight
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header'),
+    ref: headerRef
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    },
+    as: "h3",
+    align: "center"
+  }, convert(title, titleConvertConfig)), !!description && /*#__PURE__*/React.createElement("div", {
+    className: cn('description')
+  }, convert(description, textConvertConfig)))), /*#__PURE__*/React.createElement("div", {
+    className: cn('image-wrapper')
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: imageSrc,
+    alt: imageAlt
+  })), showButtons && /*#__PURE__*/React.createElement("div", {
+    className: cn('buttons')
+  }, !!(button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/React.createElement("div", {
+    className: cn('button')
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classes.button,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    theme: "green",
+    fullWidth: true,
+    href: button.href,
+    target: button.target,
+    rel: setRelAttribute(button.rel, button.target),
+    onClick: button.onClick
+  }, button.title)), !!(extraButton === null || extraButton === void 0 ? void 0 : extraButton.title) && /*#__PURE__*/React.createElement("div", {
+    className: cn('button')
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classes.extraButton,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+    },
+    theme: "gray",
+    fullWidth: true,
+    href: extraButton.href,
+    target: extraButton.target,
+    rel: setRelAttribute(extraButton.rel, extraButton.target),
+    onClick: extraButton.onClick
+  }, extraButton.title)))));
+};
+export default CardOnBackground;

package/dist/es/components/CardsOnBackground/types.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export type CardDataType = {
+    /** Заголовок */
+    title: string;
+    /** Текст-описание */
+    description?: string;
+    /** Изображение */
+    imageSrc: string;
+    /** Значение тега alt для изображения */
+    imageAlt?: string;
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export declare const BackgroundColor: {
+    readonly GRAY: "gray";
+    readonly GREEN: "green";
+    readonly BLUE: "blue";
+    readonly VIOLET: "violet";
+};
+export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
+export {};

package/dist/es/components/CardsOnBackground/types.js

@@ -0,0 +1,6 @@
+export var BackgroundColor = {
+  GRAY: 'gray',
+  GREEN: 'green',
+  BLUE: 'blue',
+  VIOLET: 'violet'
+};

package/dist/es/components/CardsOnBackground/useUniformHeights.d.ts

@@ -0,0 +1,9 @@
+type UseUniformHeightsOptions = {
+    disabled?: boolean;
+};
+type UseUniformHeightsReturnType = {
+    maxHeight: number;
+    getRef: (index: number) => (element: HTMLElement | null) => void;
+};
+declare const useUniformHeights: (itemsCount: number, options?: UseUniformHeightsOptions) => UseUniformHeightsReturnType;
+export default useUniformHeights;

package/dist/es/components/CardsOnBackground/useUniformHeights.js

@@ -0,0 +1,88 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import React from 'react';
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+var useUniformHeights = function useUniformHeights(itemsCount) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$disabled = options.disabled,
+    disabled = _options$disabled === void 0 ? false : _options$disabled;
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    maxHeight = _React$useState2[0],
+    setMaxHeight = _React$useState2[1];
+  var refs = React.useRef([]);
+  var observerRef = React.useRef(null);
+  var maxHeightRef = React.useRef(maxHeight);
+  var updateMaxHeight = React.useCallback(function () {
+    if (disabled) {
+      return;
+    }
+    var heights = refs.current.map(function (ref) {
+      return (ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0;
+    });
+    var newMaxHeight = Math.ceil(Math.max.apply(Math, _toConsumableArray(heights).concat([0])));
+    if (newMaxHeight !== maxHeightRef.current) {
+      maxHeightRef.current = newMaxHeight;
+      setMaxHeight(newMaxHeight);
+    }
+  }, [disabled]);
+  useIsomorphicLayoutEffect(function () {
+    if (disabled) {
+      return undefined;
+    }
+    if (!observerRef.current) {
+      observerRef.current = new ResizeObserver(function () {
+        requestAnimationFrame(function () {
+          updateMaxHeight();
+        });
+      });
+    }
+    return function () {
+      var _a;
+      (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+    };
+  }, [disabled, updateMaxHeight]);
+  useIsomorphicLayoutEffect(function () {
+    var _a;
+    if (disabled) {
+      (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+      maxHeightRef.current = 0;
+      setMaxHeight(0);
+      return;
+    }
+    var observer = observerRef.current;
+    if (!observer) {
+      return;
+    }
+    observer.disconnect();
+    refs.current.forEach(function (ref) {
+      if (ref) {
+        observer.observe(ref);
+      }
+    });
+    updateMaxHeight();
+  }, [itemsCount, disabled, updateMaxHeight]);
+  var getRef = React.useCallback(function (index) {
+    return function (element) {
+      var observer = observerRef.current;
+      var oldElement = refs.current[index];
+      if (oldElement && observer) {
+        observer.unobserve(oldElement);
+      }
+      refs.current[index] = element;
+      if (element && observer && !disabled) {
+        observer.observe(element);
+      }
+    };
+  }, [disabled]);
+  return {
+    maxHeight: maxHeight,
+    getRef: getRef
+  };
+};
+export default useUniformHeights;