@megafon/ui-shared 5.0.1 → 5.2.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.2.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.1.0...@megafon/ui-shared@5.2.0) (2023-09-21)
+
+
+### Features
+
+* **property:** add type ReactNode to props item.value ([5f59136](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/5f59136ffdc6fc863a6910bd45f17c6783be19c8))
+* **table:** add vAlign and disableHeightLimit props ([813b1ce](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/813b1ceef71576104d8c397cf372c52192daa258))
+
+
+
+
+
+# [5.1.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.0.1...@megafon/ui-shared@5.1.0) (2023-09-14)
+
+
+### Bug Fixes
+
+* **benefitpictures:** rename helpers ([282fcfe](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/282fcfec6f6fc8f0bec325c52f7ec5ada955e4ff))
+* **dulpfile:** fix ignore rule ([525138b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/525138bafeaa3836fa37997691da544419efd7fa))
+
+
+### Features
+
+* **card:** add minor features ([e80582c](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/e80582c863f7baeaf17effe7566531f2f9a2c695))
+
+
+
+
+
 ## [5.0.1](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-shared@5.0.0...@megafon/ui-shared@5.0.1) (2023-08-31)
 
 

package/dist/es/components/BenefitsIcons/BenefitsIcons.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.values.js";
 import * as React from 'react';
@@ -9,120 +9,10 @@ import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
 import BenefitsIconsTile from "./BenefitsIconsTile";
+import getMultiColumnConfig, { getOneColumnConfig } from "./helpers";
 import { IconPositionEnum, ItemsAlignEnum } from "./types";
-import "./style/BenefitsIcons.css"; // left-aligned column with left side icon,
-
-var getLeftSideConfig = function getLeftSideConfig(count, index) {
-  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
-  var columnSize = {
-    wide: '4',
-    desktop: '5',
-    tablet: '10'
-  };
-
-  switch (count) {
-    case 2:
-    case 4:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetWide: everySecondWithoutOffset,
-        leftOffsetDesktop: everySecondWithoutOffset
-      });
-
-    default:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetDesktop: everySecondWithoutOffset
-      });
-  }
-}; // left-aligned column with left-aligned icon on top
-
-
-var getLeftTopConfig = function getLeftTopConfig(count, index) {
-  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
-  var everyThirdWithoutOffset = index % 3 ? '1' : undefined;
-
-  switch (count) {
-    case 2:
-      return {
-        wide: '4',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetWide: everySecondWithoutOffset,
-        leftOffsetDesktop: everySecondWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-
-    case 4:
-      return {
-        wide: '3',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetDesktop: everySecondWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-
-    default:
-      return {
-        wide: '3',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetWide: everyThirdWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-  }
-}; // center-aligned column with center-aligned icon on top
-
-
-var getCenterTopConfig = function getCenterTopConfig(count, index) {
-  var isEvenIndex = !(index % 2);
-  var everyEvenWithLeftOffset = isEvenIndex ? '1' : undefined;
-  var everyOddWithRightOffset = isEvenIndex ? undefined : '1';
-
-  switch (count) {
-    case 4:
-      return {
-        wide: '3',
-        desktop: '5',
-        tablet: '5',
-        leftOffsetDesktop: everyEvenWithLeftOffset,
-        leftOffsetTablet: everyEvenWithLeftOffset,
-        rightOffsetTablet: everyOddWithRightOffset,
-        rightOffsetDesktop: everyOddWithRightOffset
-      };
-
-    default:
-      return {
-        wide: '4',
-        desktop: '4',
-        tablet: '4'
-      };
-  }
-};
-
-var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
-  return iconPosition !== IconPositionEnum.CENTER_TOP ? {
-    wide: '10',
-    desktop: '10',
-    tablet: '10'
-  } : {
-    wide: '12',
-    desktop: '12',
-    tablet: '12'
-  };
-};
-
-var getMultiColumnConfig = function getMultiColumnConfig(iconPosition, count, index) {
-  switch (iconPosition) {
-    case IconPositionEnum.LEFT_TOP:
-      return getLeftTopConfig(count, index);
-
-    case IconPositionEnum.CENTER_TOP:
-      return getCenterTopConfig(count, index);
-
-    default:
-      return getLeftSideConfig(count, index);
-  }
-};
-
+import "./style/BenefitsIcons.css";
+var testIdPrefix = 'BenefitsIcons';
 var cn = cnCreate('mfui-benefits-icons');
 
 var BenefitsIcons = function BenefitsIcons(_ref) {
@@ -177,7 +67,15 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
   }, /*#__PURE__*/React.createElement(Grid, {
     className: classes.grid,
     guttersLeft: "medium",
-    hAlign: itemsAlign
+    hAlign: itemsAlign,
+    dataAttrs: {
+      root: {
+        'data-testid': "".concat(testIdPrefix, "-grid-root")
+      },
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
   }, items.map(function (_ref2, i) {
     var title = _ref2.title,
         text = _ref2.text,
@@ -185,7 +83,12 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
     var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
     return /*#__PURE__*/React.createElement(GridColumn, _extends({
       className: classes.gridColumn,
-      key: i
+      key: i,
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-grid-column")
+        }
+      }
     }, columnConfig), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
       className: cn('tile', [classes.item]),
       title: title,

package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js

@@ -5,6 +5,7 @@ import { cnCreate } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { IconPositionEnum } from "./types";
 import "./style/BenefitsIconsTile.css";
+var testIdPrefix = 'BenefitsIconsTile';
 var cn = cnCreate('mfui-benefits-icons-tile');
 
 var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
@@ -17,7 +18,8 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'icon-position': iconPosition
-    }, [className])
+    }, [className]),
+    "data-testid": "".concat(testIdPrefix, "-root")
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon')
   }, icon), /*#__PURE__*/React.createElement("div", {

package/dist/es/components/BenefitsIcons/helpers.d.ts

@@ -0,0 +1,8 @@
+import { GridConfig } from './types';
+declare const getLeftSideConfig: (count: number, index: number) => GridConfig;
+declare const getLeftTopConfig: (count: number, index: number) => GridConfig;
+declare const getCenterTopConfig: (count: number, index: number) => GridConfig;
+declare const getOneColumnConfig: (iconPosition: "left-top" | "center-top" | "left-side") => GridConfig;
+declare const getMultiColumnConfig: (iconPosition: "left-top" | "center-top" | "left-side", count: number, index: number) => GridConfig;
+export default getMultiColumnConfig;
+export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };

package/dist/es/components/BenefitsIcons/helpers.js

@@ -0,0 +1,116 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { IconPositionEnum } from "./types"; // left-aligned column with left side icon
+
+var getLeftSideConfig = function getLeftSideConfig(count, index) {
+  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
+  var columnSize = {
+    wide: '4',
+    desktop: '5',
+    tablet: '10'
+  };
+
+  switch (count) {
+    case 2:
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: everySecondWithoutOffset,
+        leftOffsetDesktop: everySecondWithoutOffset
+      });
+
+    default:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetDesktop: everySecondWithoutOffset
+      });
+  }
+}; // left-aligned column with left-aligned icon on top
+
+
+var getLeftTopConfig = function getLeftTopConfig(count, index) {
+  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
+  var everyThirdWithoutOffset = index % 3 ? '1' : undefined;
+
+  switch (count) {
+    case 2:
+      return {
+        wide: '4',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetWide: everySecondWithoutOffset,
+        leftOffsetDesktop: everySecondWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+
+    case 4:
+      return {
+        wide: '3',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetDesktop: everySecondWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+
+    default:
+      return {
+        wide: '3',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetWide: everyThirdWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+  }
+}; // center-aligned column with center-aligned icon on top
+
+
+var getCenterTopConfig = function getCenterTopConfig(count, index) {
+  var isEvenIndex = !(index % 2);
+  var everyEvenWithLeftOffset = isEvenIndex ? '1' : undefined;
+  var everyOddWithRightOffset = isEvenIndex ? undefined : '1';
+
+  switch (count) {
+    case 4:
+      return {
+        wide: '3',
+        desktop: '5',
+        tablet: '5',
+        leftOffsetDesktop: everyEvenWithLeftOffset,
+        leftOffsetTablet: everyEvenWithLeftOffset,
+        rightOffsetTablet: everyOddWithRightOffset,
+        rightOffsetDesktop: everyOddWithRightOffset
+      };
+
+    default:
+      return {
+        wide: '4',
+        desktop: '4',
+        tablet: '4'
+      };
+  }
+};
+
+var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
+  return iconPosition !== IconPositionEnum.CENTER_TOP ? {
+    wide: '10',
+    desktop: '10',
+    tablet: '10'
+  } : {
+    wide: '12',
+    desktop: '12',
+    tablet: '12'
+  };
+};
+
+var getMultiColumnConfig = function getMultiColumnConfig(iconPosition, count, index) {
+  switch (iconPosition) {
+    case IconPositionEnum.LEFT_TOP:
+      return getLeftTopConfig(count, index);
+
+    case IconPositionEnum.CENTER_TOP:
+      return getCenterTopConfig(count, index);
+
+    default:
+      return getLeftSideConfig(count, index);
+  }
+};
+
+export default getMultiColumnConfig;
+export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IBenefit, GridGutterSize } from './types';
 import './BenfitsPictures.less';
+export declare const ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
 export interface IBenefitsPicturesProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;

package/dist/es/components/BenefitsPictures/BenefitsPictures.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 { useCallback } from 'react';
@@ -9,106 +9,10 @@ import convert from 'htmr';
 import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
+import getCenterConfig, { getLeftConfig } from "./helpers";
 import "./BenfitsPictures.css";
-var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
-var columnSize = {
-  wide: '4',
-  desktop: '4',
-  tablet: '5'
-};
-
-var isEvenIndex = function isEvenIndex(index) {
-  return !((index + 1) % 2);
-};
-
-var getEvenOffset = function getEvenOffset(index) {
-  return isEvenIndex(index) ? '1' : undefined;
-};
-
-var getOddOffset = function getOddOffset(index) {
-  return isEvenIndex(index) ? undefined : '1';
-};
-
-var getLeftConfig = function getLeftConfig(count, index) {
-  switch (count) {
-    case 2:
-    case 4:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetWide: getEvenOffset(index),
-        leftOffsetDesktop: getEvenOffset(index),
-        leftOffsetTablet: getEvenOffset(index)
-      });
-
-    default:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetTablet: getEvenOffset(index)
-      });
-  }
-};
-
-var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
-  switch (count) {
-    case 3:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetTablet: getOddOffset(index)
-      });
-
-    case 4:
-      return _extends(_extends({}, columnSize), {
-        rightOffsetWide: getOddOffset(index),
-        leftOffsetWide: getEvenOffset(index),
-        rightOffsetDesktop: getEvenOffset(index),
-        leftOffsetDesktop: getOddOffset(index),
-        rightOffsetTablet: getEvenOffset(index),
-        leftOffsetTablet: getOddOffset(index)
-      });
-
-    default:
-      return _extends(_extends({}, columnSize), {
-        rightOffsetWide: getOddOffset(index),
-        leftOffsetWide: getEvenOffset(index)
-      });
-  }
-};
-
-var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
-  switch (count) {
-    case 4:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetWide: getOddOffset(index),
-        rightOffsetWide: getEvenOffset(index),
-        leftOffsetDesktop: getOddOffset(index),
-        rightOffsetDesktop: getEvenOffset(index),
-        leftOffsetTablet: getOddOffset(index),
-        rightOffsetTablet: getEvenOffset(index)
-      });
-
-    case 3:
-      {
-        return _extends(_extends({}, columnSize), {
-          leftOffsetTablet: getOddOffset(index)
-        });
-      }
-
-    default:
-      return _extends({}, columnSize);
-  }
-};
-
-var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
-  switch (gutterSize) {
-    case 'medium':
-      {
-        return getCenterMediumConfig(count, index);
-      }
-
-    default:
-      {
-        return getCenterLargeConfig(count, index);
-      }
-  }
-};
-
+export var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
+var testIdPrefix = 'BenefitsPictures';
 var cn = cnCreate('mfui-benefits-pictures');
 
 var BenefitsPictures = function BenefitsPictures(_ref) {
@@ -153,7 +57,12 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     ref: rootRef
   }, /*#__PURE__*/React.createElement(Grid, {
     guttersLeft: currentGutter,
-    hAlign: isGridCenterAlign ? 'center' : 'left'
+    hAlign: isGridCenterAlign ? 'center' : 'left',
+    dataAttrs: {
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
   }, items.map(function (_ref2, index) {
     var img = _ref2.img,
         title = _ref2.title,
@@ -162,7 +71,8 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     return /*#__PURE__*/React.createElement(GridColumn, _extends({}, align === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(items.length, index, gridGap), {
       key: index
     }), /*#__PURE__*/React.createElement("div", {
-      className: cn('item', [classes.item])
+      className: cn('item', [classes.item]),
+      "data-testid": "".concat(testIdPrefix, "-item")
     }, /*#__PURE__*/React.createElement("img", {
       className: cn('img', {
         'h-align': align

package/dist/es/components/BenefitsPictures/helpers.d.ts

@@ -0,0 +1,11 @@
+import { GridConfig } from './types';
+declare const columnSize: GridConfig;
+declare const isOddIndex: (index: number) => boolean;
+declare const getEvenOffset: (index: number) => "1" | undefined;
+declare const getOddOffset: (index: number) => "1" | undefined;
+declare const getLeftConfig: (count: number, index: number) => GridConfig;
+declare const getCenterMediumConfig: (count: number, index: number) => GridConfig;
+declare const getCenterLargeConfig: (count: number, index: number) => GridConfig;
+declare const getCenterConfig: (count: number, index: number, gutterSize: string) => GridConfig;
+export default getCenterConfig;
+export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig, };

package/dist/es/components/BenefitsPictures/helpers.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/extends";
+var columnSize = {
+  wide: '4',
+  desktop: '4',
+  tablet: '5'
+};
+
+var isOddIndex = function isOddIndex(index) {
+  return !((index + 1) % 2);
+};
+
+var getEvenOffset = function getEvenOffset(index) {
+  return isOddIndex(index) ? '1' : undefined;
+};
+
+var getOddOffset = function getOddOffset(index) {
+  return isOddIndex(index) ? undefined : '1';
+};
+
+var getLeftConfig = function getLeftConfig(count, index) {
+  switch (count) {
+    case 2:
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: getEvenOffset(index),
+        leftOffsetDesktop: getEvenOffset(index),
+        leftOffsetTablet: getEvenOffset(index)
+      });
+
+    default:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getEvenOffset(index)
+      });
+  }
+};
+
+var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
+  switch (count) {
+    case 3:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getOddOffset(index)
+      });
+
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        rightOffsetWide: getOddOffset(index),
+        leftOffsetWide: getEvenOffset(index),
+        rightOffsetDesktop: getEvenOffset(index),
+        leftOffsetDesktop: getOddOffset(index),
+        rightOffsetTablet: getEvenOffset(index),
+        leftOffsetTablet: getOddOffset(index)
+      });
+
+    default:
+      return _extends(_extends({}, columnSize), {
+        rightOffsetWide: getOddOffset(index),
+        leftOffsetWide: getEvenOffset(index)
+      });
+  }
+};
+
+var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
+  switch (count) {
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: getOddOffset(index),
+        rightOffsetWide: getEvenOffset(index),
+        leftOffsetDesktop: getOddOffset(index),
+        rightOffsetDesktop: getEvenOffset(index),
+        leftOffsetTablet: getOddOffset(index),
+        rightOffsetTablet: getEvenOffset(index)
+      });
+
+    case 3:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getOddOffset(index)
+      });
+
+    default:
+      return _extends({}, columnSize);
+  }
+};
+
+var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
+  switch (gutterSize) {
+    case 'medium':
+      {
+        return getCenterMediumConfig(count, index);
+      }
+
+    default:
+      {
+        return getCenterLargeConfig(count, index);
+      }
+  }
+};
+
+export default getCenterConfig;
+export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig };

package/dist/es/components/Card/Card.css

@@ -20,8 +20,12 @@ h5 {
   padding: 16px 16px 24px;
   border-radius: 12px;
   color: var(--content);
-  text-decoration: none;
+  text-decoration: none !important;
   background-color: var(--base);
+  -webkit-transition: background-color 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color 0.3s, box-shadow, 0.3s;
+  transition: background-color 0.3s, box-shadow, 0.3s, -webkit-box-shadow;
 }
 @media screen and (min-width: 1280px) {
   .mfui-card {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import './Card.less';
 import { ButtonType, FeaturesList, IconsList, Image, Link, Price, TextsList, Title } from './types';
 export interface ICard {
@@ -12,6 +12,14 @@ export interface ICard {
     };
     /** Дополнительный класс для компонента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement | HTMLAnchorElement>;
     isFullHeight?: boolean;
     /** Вид */
     view?: 'shadow' | 'background';

package/dist/es/components/Card/Card.js

@@ -37,6 +37,8 @@ var cn = cnCreate('mfui-card');
 var Card = function Card(_ref5) {
   var dataAttrs = _ref5.dataAttrs,
       className = _ref5.className,
+      classes = _ref5.classes,
+      rootRef = _ref5.rootRef,
       _ref5$isFullHeight = _ref5.isFullHeight,
       isFullHeight = _ref5$isFullHeight === void 0 ? false : _ref5$isFullHeight,
       link = _ref5.link,
@@ -169,7 +171,7 @@ var Card = function Card(_ref5) {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
       },
-      className: cn('button'),
+      className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
       href: button.href,
       target: button.target,
       onClick: button === null || button === void 0 ? void 0 : button.onClick
@@ -177,7 +179,7 @@ var Card = function Card(_ref5) {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
       },
-      className: cn('button'),
+      className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.extraButton]),
       href: extraButton.href,
       target: extraButton.target,
       type: "outline",
@@ -201,10 +203,11 @@ var Card = function Card(_ref5) {
       view: view,
       link: isLink,
       'full-height': isFullHeight
-    }, [className]),
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
     href: isLink ? link === null || link === void 0 ? void 0 : link.href : undefined,
     target: isLink ? link === null || link === void 0 ? void 0 : link.target : undefined,
-    onClick: isLink ? onClick : undefined
+    onClick: isLink ? onClick : undefined,
+    ref: rootRef
   }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement(Header, {
     className: cn('title'),
     as: "h3",
@@ -221,6 +224,14 @@ Card.propTypes = {
     extraButton: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    extraButton: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   view: PropTypes.oneOf(['shadow', 'background']),
   link: PropTypes.shape({
     href: PropTypes.string,