@alfalab/core-components-product-cover 3.1.8 → 3.2.0

package/moderncssm/single/index.module.css

@@ -38,6 +38,88 @@
         border-radius: var(--border-radius-2);
     }
 
+.component .state {
+        position: absolute;
+        inset: var(--gap-0);
+        z-index: 2;
+        border-radius: inherit;
+        opacity: 0;
+        transition: opacity 0.2s;
+        will-change: opacity;
+    }
+
+.component.darkening .hover {
+                    background-color: var(--color-light-neutral-translucent-200);
+                }
+
+.component.darkening .active {
+                    background-color: var(--color-light-neutral-translucent-400);
+                }
+
+@media (hover: hover) {
+                    .component.darkening:hover:not(:active) .hover {
+                        opacity: 1;
+                    }
+    }
+
+.component.darkening:active .active {
+                        opacity: 1;
+                    }
+
+.component.lightening .hover {
+                    background-color: var(--color-light-neutral-translucent-200-inverted);
+                }
+
+.component.lightening .active {
+                    background-color: var(--color-light-neutral-translucent-400-inverted);
+                }
+
+@media (hover: hover) {
+                    .component.lightening:hover:not(:active) .hover {
+                        opacity: 1;
+                    }
+    }
+
+.component.lightening:active .active {
+                        opacity: 1;
+                    }
+
+.component.static-darkening .hover {
+                    background-color: rgba(0, 0, 0, 0.07);
+                }
+
+.component.static-darkening .active {
+                    background-color: rgba(0, 0, 0, 0.15);
+                }
+
+@media (hover: hover) {
+                    .component.static-darkening:hover:not(:active) .hover {
+                        opacity: 1;
+                    }
+    }
+
+.component.static-darkening:active .active {
+                        opacity: 1;
+                    }
+
+.component.static-lightening .hover {
+                    background-color: rgba(255, 255, 255, 0.07);
+                }
+
+.component.static-lightening .active {
+                    background-color: rgba(255, 255, 255, 0.15);
+                }
+
+@media (hover: hover) {
+                    .component.static-lightening:hover:not(:active) .hover {
+                        opacity: 1;
+                    }
+    }
+
+.component.static-lightening:active .active {
+                        opacity: 1;
+                    }
+
 .icon {
     position: absolute;
     top: 50%;

package/moderncssm/typings.d.ts

@@ -107,6 +107,12 @@ export type SingleCommonProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Задает различные эффекты при наведении на компонент (затемнение, осветление)
+     *
+     * @default false
+     */
+    stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening' | false;
 };
 export type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'numberOfCards' | 'align'>;
 export type BankCardImageProps = Omit<SingleCommonProps, 'size' | 'numberOfСards' | 'numberOfCards' | 'className' | 'dataTestId' | 'align'>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-product-cover",
-    "version": "3.1.8",
+    "version": "3.2.0",
     "description": "ProductCover component",
     "keywords": [],
     "license": "MIT",

package/single/Component.js

@@ -18,10 +18,10 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var Single = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, textColor = _a.textColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId;
+    var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, textColor = _a.textColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId, _e = _a.stateType, stateType = _e === void 0 ? false : _e;
     var hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
     var showContent = hasContent && size !== 16 && !contentAddons;
-    return (React__default.default.createElement("div", { className: cn__default.default(index_module.component, index_module["size-".concat(size)], className), style: {
+    return (React__default.default.createElement("div", { className: cn__default.default(index_module.component, index_module["size-".concat(size)], stateType && index_module[stateType], className), style: {
             width: consts.WIDTH_TO_SIZE[size],
             height: size,
             boxShadow: shadow,
@@ -32,7 +32,9 @@ var Single = function (_a) {
         borderColor && (React__default.default.createElement("div", { className: cn__default.default(index_module.border), style: { boxShadow: "inset 0 0 0 1px ".concat(borderColor) } })),
         React__default.default.createElement(Component$1.ImageCard, { width: consts.WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, numberOfCards: numberOfCards }),
         showContent && (React__default.default.createElement(Component$2.Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, numberOfCards: numberOfCards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'user-info'), textColor: textColor })),
-        contentAddons && (React__default.default.createElement("div", tslib.__assign({}, contentAddonsProps, { className: cn__default.default(index_module.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons))));
+        contentAddons && (React__default.default.createElement("div", tslib.__assign({}, contentAddonsProps, { className: cn__default.default(index_module.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons)),
+        stateType && React__default.default.createElement("div", { className: cn__default.default(index_module.state, index_module.hover) }),
+        stateType && React__default.default.createElement("div", { className: cn__default.default(index_module.state, index_module.active) })));
 };
 
 exports.Single = Single;

package/single/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/single/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ImageCard, Overlay, Text } from '../components';\nimport { WIDTH_TO_SIZE } from '../consts';\nimport { type SingleCommonProps } from '../typings';\n\nimport styles from './index.module.css';\n\nexport const Single: FC<SingleCommonProps> = ({\n    size = 164,\n    icon: Icon,\n    cardId,\n    layers,\n    baseUrl,\n    shadow,\n    iconColor,\n    backgroundColor,\n    borderColor,\n    textColor,\n    overlayProps = { colors: 'default', visible: false },\n    eyeButton,\n    cardholderNameUppercase,\n    cardholderName,\n    numberOfСards,\n    numberOfCards = numberOfСards,\n    align,\n    cardNumber,\n    className,\n    contentAddons,\n    contentAddonsProps,\n    onEyeIconClick,\n    dataTestId,\n}) => {\n    const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n    const showContent = hasContent && size !== 16 && !contentAddons;\n\n    return (\n        <div\n            className={cn(styles.component, styles[`size-${size}`], className)}\n            style={{\n                width: WIDTH_TO_SIZE[size],\n                height: size,\n                boxShadow: shadow,\n                backgroundColor,\n            }}\n            data-test-id={dataTestId}\n        >\n            {Icon && <Icon color={iconColor} className={styles.icon} />}\n            <Overlay colors={overlayProps.colors} visible={overlayProps.visible} />\n\n            {borderColor && (\n                <div\n                    className={cn(styles.border)}\n                    style={{ boxShadow: `inset 0 0 0 1px ${borderColor}` }}\n                />\n            )}\n\n            <ImageCard\n                width={WIDTH_TO_SIZE[size]}\n                height={size}\n                cardId={cardId}\n                layers={layers}\n                baseUrl={baseUrl}\n                numberOfCards={numberOfCards}\n            />\n\n            {showContent && (\n                <Text\n                    cardNumber={cardNumber}\n                    eyeButton={eyeButton}\n                    cardholderNameUppercase={cardholderNameUppercase}\n                    cardholderName={cardholderName}\n                    numberOfCards={numberOfCards}\n                    align={align}\n                    size={size}\n                    onEyeIconClick={onEyeIconClick}\n                    dataTestId={getDataTestId(dataTestId, 'user-info')}\n                    textColor={textColor}\n                />\n            )}\n\n            {contentAddons && (\n                <div\n                    {...contentAddonsProps}\n                    className={cn(styles.contentAddons, contentAddonsProps?.className)}\n                >\n                    {contentAddons}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["React","cn","styles","WIDTH_TO_SIZE","Overlay","ImageCard","Text","getDataTestId","__assign"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/single/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ImageCard, Overlay, Text } from '../components';\nimport { WIDTH_TO_SIZE } from '../consts';\nimport { type SingleCommonProps } from '../typings';\n\nimport styles from './index.module.css';\n\nexport const Single: FC<SingleCommonProps> = ({\n    size = 164,\n    icon: Icon,\n    cardId,\n    layers,\n    baseUrl,\n    shadow,\n    iconColor,\n    backgroundColor,\n    borderColor,\n    textColor,\n    overlayProps = { colors: 'default', visible: false },\n    eyeButton,\n    cardholderNameUppercase,\n    cardholderName,\n    numberOfСards,\n    numberOfCards = numberOfСards,\n    align,\n    cardNumber,\n    className,\n    contentAddons,\n    contentAddonsProps,\n    onEyeIconClick,\n    dataTestId,\n    stateType = false,\n}) => {\n    const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n    const showContent = hasContent && size !== 16 && !contentAddons;\n\n    return (\n        <div\n            className={cn(\n                styles.component,\n                styles[`size-${size}`],\n                stateType && styles[stateType],\n                className,\n            )}\n            style={{\n                width: WIDTH_TO_SIZE[size],\n                height: size,\n                boxShadow: shadow,\n                backgroundColor,\n            }}\n            data-test-id={dataTestId}\n        >\n            {Icon && <Icon color={iconColor} className={styles.icon} />}\n            <Overlay colors={overlayProps.colors} visible={overlayProps.visible} />\n\n            {borderColor && (\n                <div\n                    className={cn(styles.border)}\n                    style={{ boxShadow: `inset 0 0 0 1px ${borderColor}` }}\n                />\n            )}\n\n            <ImageCard\n                width={WIDTH_TO_SIZE[size]}\n                height={size}\n                cardId={cardId}\n                layers={layers}\n                baseUrl={baseUrl}\n                numberOfCards={numberOfCards}\n            />\n\n            {showContent && (\n                <Text\n                    cardNumber={cardNumber}\n                    eyeButton={eyeButton}\n                    cardholderNameUppercase={cardholderNameUppercase}\n                    cardholderName={cardholderName}\n                    numberOfCards={numberOfCards}\n                    align={align}\n                    size={size}\n                    onEyeIconClick={onEyeIconClick}\n                    dataTestId={getDataTestId(dataTestId, 'user-info')}\n                    textColor={textColor}\n                />\n            )}\n\n            {contentAddons && (\n                <div\n                    {...contentAddonsProps}\n                    className={cn(styles.contentAddons, contentAddonsProps?.className)}\n                >\n                    {contentAddons}\n                </div>\n            )}\n            {stateType && <div className={cn(styles.state, styles.hover)} />}\n            {stateType && <div className={cn(styles.state, styles.active)} />}\n        </div>\n    );\n};\n"],"names":["React","cn","styles","WIDTH_TO_SIZE","Overlay","ImageCard","Text","getDataTestId","__assign"],"mappings":"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"}

package/single/index.css

@@ -1,5 +1,9 @@
 :root {
     --color-light-neutral-500: #babbc2;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
+    --color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
+    --color-light-neutral-translucent-400: rgba(5, 11, 44, 0.18);
+    --color-light-neutral-translucent-400-inverted: rgba(231, 231, 248, 0.18);
 }
 :root {
     --border-radius-xs: 2px;
@@ -28,45 +32,110 @@
     --gap-12: var(--gap-s);
     --gap-16: var(--gap-m);
 }
-.product-cover__component_ut4z3 {
+.product-cover__component_14a7f {
     display: flex;
     align-items: flex-end;
     position: relative;
     background-color: var(--color-light-neutral-500);
     box-sizing: border-box;
 }
-.product-cover__component_ut4z3.product-cover__size-164_ut4z3 {
+.product-cover__component_14a7f.product-cover__size-164_14a7f {
         border-radius: var(--border-radius-20);
         padding: var(--gap-12) var(--gap-16);
     }
-.product-cover__component_ut4z3.product-cover__size-128_ut4z3 {
+.product-cover__component_14a7f.product-cover__size-128_14a7f {
         border-radius: var(--border-radius-16);
         padding: var(--gap-8) var(--gap-12);
     }
-.product-cover__component_ut4z3.product-cover__size-96_ut4z3 {
+.product-cover__component_14a7f.product-cover__size-96_14a7f {
         border-radius: var(--border-radius-12);
         padding: var(--gap-6) var(--gap-12);
     }
-.product-cover__component_ut4z3.product-cover__size-48_ut4z3,
-    .product-cover__component_ut4z3.product-cover__size-40_ut4z3 {
+.product-cover__component_14a7f.product-cover__size-48_14a7f,
+    .product-cover__component_14a7f.product-cover__size-40_14a7f {
         border-radius: var(--border-radius-6);
         padding: var(--gap-2) var(--gap-4);
     }
-.product-cover__component_ut4z3.product-cover__size-32_ut4z3 {
+.product-cover__component_14a7f.product-cover__size-32_14a7f {
         border-radius: var(--border-radius-4);
         padding: var(--gap-0) var(--gap-2);
     }
-.product-cover__component_ut4z3.product-cover__size-16_ut4z3 {
+.product-cover__component_14a7f.product-cover__size-16_14a7f {
         border-radius: var(--border-radius-2);
     }
-.product-cover__icon_ut4z3 {
+.product-cover__component_14a7f .product-cover__state_14a7f {
+        position: absolute;
+        inset: var(--gap-0);
+        z-index: 2;
+        border-radius: inherit;
+        opacity: 0;
+        transition: opacity 0.2s;
+        will-change: opacity;
+    }
+.product-cover__component_14a7f.product-cover__darkening_14a7f .product-cover__hover_14a7f {
+                    background-color: var(--color-light-neutral-translucent-200);
+                }
+.product-cover__component_14a7f.product-cover__darkening_14a7f .product-cover__active_14a7f {
+                    background-color: var(--color-light-neutral-translucent-400);
+                }
+@media (hover: hover) {
+                    .product-cover__component_14a7f.product-cover__darkening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
+                        opacity: 1;
+                    }
+    }
+.product-cover__component_14a7f.product-cover__darkening_14a7f:active .product-cover__active_14a7f {
+                        opacity: 1;
+                    }
+.product-cover__component_14a7f.product-cover__lightening_14a7f .product-cover__hover_14a7f {
+                    background-color: var(--color-light-neutral-translucent-200-inverted);
+                }
+.product-cover__component_14a7f.product-cover__lightening_14a7f .product-cover__active_14a7f {
+                    background-color: var(--color-light-neutral-translucent-400-inverted);
+                }
+@media (hover: hover) {
+                    .product-cover__component_14a7f.product-cover__lightening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
+                        opacity: 1;
+                    }
+    }
+.product-cover__component_14a7f.product-cover__lightening_14a7f:active .product-cover__active_14a7f {
+                        opacity: 1;
+                    }
+.product-cover__component_14a7f.product-cover__static-darkening_14a7f .product-cover__hover_14a7f {
+                    background-color: rgba(0, 0, 0, 0.07);
+                }
+.product-cover__component_14a7f.product-cover__static-darkening_14a7f .product-cover__active_14a7f {
+                    background-color: rgba(0, 0, 0, 0.15);
+                }
+@media (hover: hover) {
+                    .product-cover__component_14a7f.product-cover__static-darkening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
+                        opacity: 1;
+                    }
+    }
+.product-cover__component_14a7f.product-cover__static-darkening_14a7f:active .product-cover__active_14a7f {
+                        opacity: 1;
+                    }
+.product-cover__component_14a7f.product-cover__static-lightening_14a7f .product-cover__hover_14a7f {
+                    background-color: rgba(255, 255, 255, 0.07);
+                }
+.product-cover__component_14a7f.product-cover__static-lightening_14a7f .product-cover__active_14a7f {
+                    background-color: rgba(255, 255, 255, 0.15);
+                }
+@media (hover: hover) {
+                    .product-cover__component_14a7f.product-cover__static-lightening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
+                        opacity: 1;
+                    }
+    }
+.product-cover__component_14a7f.product-cover__static-lightening_14a7f:active .product-cover__active_14a7f {
+                        opacity: 1;
+                    }
+.product-cover__icon_14a7f {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 4;
 }
-.product-cover__border_ut4z3 {
+.product-cover__border_14a7f {
     position: absolute;
     top: var(--gap-0);
     bottom: var(--gap-0);
@@ -76,7 +145,7 @@
     pointer-events: none;
     z-index: 3;
 }
-.product-cover__contentAddons_ut4z3 {
+.product-cover__contentAddons_14a7f {
     width: 100%;
     height: 100%;
     z-index: 2;

package/single/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"product-cover__component_ut4z3","size-164":"product-cover__size-164_ut4z3","size-128":"product-cover__size-128_ut4z3","size-96":"product-cover__size-96_ut4z3","size-48":"product-cover__size-48_ut4z3","size-40":"product-cover__size-40_ut4z3","size-32":"product-cover__size-32_ut4z3","size-16":"product-cover__size-16_ut4z3","icon":"product-cover__icon_ut4z3","border":"product-cover__border_ut4z3","contentAddons":"product-cover__contentAddons_ut4z3"};
+var styles = {"component":"product-cover__component_14a7f","size-164":"product-cover__size-164_14a7f","size-128":"product-cover__size-128_14a7f","size-96":"product-cover__size-96_14a7f","size-48":"product-cover__size-48_14a7f","size-40":"product-cover__size-40_14a7f","size-32":"product-cover__size-32_14a7f","size-16":"product-cover__size-16_14a7f","state":"product-cover__state_14a7f","darkening":"product-cover__darkening_14a7f","hover":"product-cover__hover_14a7f","active":"product-cover__active_14a7f","lightening":"product-cover__lightening_14a7f","static-darkening":"product-cover__static-darkening_14a7f","static-lightening":"product-cover__static-lightening_14a7f","icon":"product-cover__icon_14a7f","border":"product-cover__border_14a7f","contentAddons":"product-cover__contentAddons_14a7f"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/single/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../src/single/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    align-items: flex-end;\n    position: relative;\n    background-color: var(--color-light-neutral-500);\n    box-sizing: border-box;\n\n    &.size-164 {\n        border-radius: var(--border-radius-20);\n        padding: var(--gap-12) var(--gap-16);\n    }\n    &.size-128 {\n        border-radius: var(--border-radius-16);\n        padding: var(--gap-8) var(--gap-12);\n    }\n    &.size-96 {\n        border-radius: var(--border-radius-12);\n        padding: var(--gap-6) var(--gap-12);\n    }\n    &.size-48,\n    &.size-40 {\n        border-radius: var(--border-radius-6);\n        padding: var(--gap-2) var(--gap-4);\n    }\n    &.size-32 {\n        border-radius: var(--border-radius-4);\n        padding: var(--gap-0) var(--gap-2);\n    }\n    &.size-16 {\n        border-radius: var(--border-radius-2);\n    }\n}\n\n.icon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 4;\n}\n\n.border {\n    position: absolute;\n    top: var(--gap-0);\n    bottom: var(--gap-0);\n    left: var(--gap-0);\n    right: var(--gap-0);\n    border-radius: inherit;\n    pointer-events: none;\n    z-index: 3;\n}\n\n.contentAddons {\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    overflow: hidden;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,gCAAgC,CAAC,UAAU,CAAC,+BAA+B,CAAC,UAAU,CAAC,+BAA+B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,MAAM,CAAC,2BAA2B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,eAAe,CAAC,oCAAoC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../src/single/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    align-items: flex-end;\n    position: relative;\n    background-color: var(--color-light-neutral-500);\n    box-sizing: border-box;\n\n    &.size-164 {\n        border-radius: var(--border-radius-20);\n        padding: var(--gap-12) var(--gap-16);\n    }\n    &.size-128 {\n        border-radius: var(--border-radius-16);\n        padding: var(--gap-8) var(--gap-12);\n    }\n    &.size-96 {\n        border-radius: var(--border-radius-12);\n        padding: var(--gap-6) var(--gap-12);\n    }\n    &.size-48,\n    &.size-40 {\n        border-radius: var(--border-radius-6);\n        padding: var(--gap-2) var(--gap-4);\n    }\n    &.size-32 {\n        border-radius: var(--border-radius-4);\n        padding: var(--gap-0) var(--gap-2);\n    }\n    &.size-16 {\n        border-radius: var(--border-radius-2);\n    }\n\n    & .state {\n        position: absolute;\n        inset: var(--gap-0);\n        z-index: 2;\n        border-radius: inherit;\n        opacity: 0;\n        transition: opacity 0.2s;\n        will-change: opacity;\n    }\n\n    /* prettier-ignore */\n    @each $state, $hover, $active in\n        (darkening, var(--color-light-neutral-translucent-200), var(--color-light-neutral-translucent-400)),\n        (lightening, var(--color-light-neutral-translucent-200-inverted), var(--color-light-neutral-translucent-400-inverted)),\n        (static-darkening, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.15)),\n        (static-lightening, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15)) {\n            &.$(state) {\n                & .hover {\n                    background-color: $hover;\n                }\n                & .active {\n                    background-color: $active;\n                }\n                @mixin hover {\n                    &:not(:active) .hover {\n                        opacity: 1;\n                    }\n                }\n                &:active {\n                    & .active {\n                        opacity: 1;\n                    }\n                }\n            }\n        }\n}\n\n.icon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 4;\n}\n\n.border {\n    position: absolute;\n    top: var(--gap-0);\n    bottom: var(--gap-0);\n    left: var(--gap-0);\n    right: var(--gap-0);\n    border-radius: inherit;\n    pointer-events: none;\n    z-index: 3;\n}\n\n.contentAddons {\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    overflow: hidden;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,gCAAgC,CAAC,UAAU,CAAC,+BAA+B,CAAC,UAAU,CAAC,+BAA+B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,OAAO,CAAC,4BAA4B,CAAC,WAAW,CAAC,gCAAgC,CAAC,OAAO,CAAC,4BAA4B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,YAAY,CAAC,iCAAiC,CAAC,kBAAkB,CAAC,uCAAuC,CAAC,mBAAmB,CAAC,wCAAwC,CAAC,MAAM,CAAC,2BAA2B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,eAAe,CAAC,oCAAoC,CAAC;;;;"}

package/src/single/Component.tsx

@@ -33,13 +33,19 @@ export const Single: FC<SingleCommonProps> = ({
     contentAddonsProps,
     onEyeIconClick,
     dataTestId,
+    stateType = false,
 }) => {
     const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
     const showContent = hasContent && size !== 16 && !contentAddons;
 
     return (
         <div
-            className={cn(styles.component, styles[`size-${size}`], className)}
+            className={cn(
+                styles.component,
+                styles[`size-${size}`],
+                stateType && styles[stateType],
+                className,
+            )}
             style={{
                 width: WIDTH_TO_SIZE[size],
                 height: size,
@@ -90,6 +96,8 @@ export const Single: FC<SingleCommonProps> = ({
                     {contentAddons}
                 </div>
             )}
+            {stateType && <div className={cn(styles.state, styles.hover)} />}
+            {stateType && <div className={cn(styles.state, styles.active)} />}
         </div>
     );
 };

package/src/single/index.module.css

@@ -31,6 +31,42 @@
     &.size-16 {
         border-radius: var(--border-radius-2);
     }
+
+    & .state {
+        position: absolute;
+        inset: var(--gap-0);
+        z-index: 2;
+        border-radius: inherit;
+        opacity: 0;
+        transition: opacity 0.2s;
+        will-change: opacity;
+    }
+
+    /* prettier-ignore */
+    @each $state, $hover, $active in
+        (darkening, var(--color-light-neutral-translucent-200), var(--color-light-neutral-translucent-400)),
+        (lightening, var(--color-light-neutral-translucent-200-inverted), var(--color-light-neutral-translucent-400-inverted)),
+        (static-darkening, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.15)),
+        (static-lightening, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15)) {
+            &.$(state) {
+                & .hover {
+                    background-color: $hover;
+                }
+                & .active {
+                    background-color: $active;
+                }
+                @mixin hover {
+                    &:not(:active) .hover {
+                        opacity: 1;
+                    }
+                }
+                &:active {
+                    & .active {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
 }
 
 .icon {

package/src/typings.ts

@@ -134,6 +134,13 @@ export type SingleCommonProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+
+    /**
+     * Задает различные эффекты при наведении на компонент (затемнение, осветление)
+     *
+     * @default false
+     */
+    stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening' | false;
 };
 
 // eslint-disable-next-line no-restricted-syntax

package/stack/index.css

@@ -10,66 +10,66 @@
     --gap-16: var(--gap-m);
     --gap-20-neg: var(--gap-l-neg);
 }
-.product-cover__wrapper_1dq1z {
+.product-cover__wrapper_vbqzd {
     display: flex;
     justify-content: center;
     box-sizing: border-box;
 }
-.product-cover__wrapper_1dq1z.product-cover__size-128_1dq1z {
+.product-cover__wrapper_vbqzd.product-cover__size-128_vbqzd {
         width: 213px;
         height: 128px;
     }
-.product-cover__wrapper_1dq1z.product-cover__size-40_1dq1z {
+.product-cover__wrapper_vbqzd.product-cover__size-40_vbqzd {
         width: 76px;
         height: 56px;
     }
-.product-cover__wrapper_1dq1z.product-cover__size-32_1dq1z {
+.product-cover__wrapper_vbqzd.product-cover__size-32_vbqzd {
         width: 55px;
         height: 48px;
     }
-.product-cover__wrapper_1dq1z.product-cover__size-16_1dq1z {
+.product-cover__wrapper_vbqzd.product-cover__size-16_vbqzd {
         width: 28px;
         height: 20px;
     }
-.product-cover__wrapper_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
+.product-cover__wrapper_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
         width: 65px;
         height: 48px;
     }
-.product-cover__componentImage_1dq1z {
+.product-cover__componentImage_vbqzd {
     align-items: center;
 }
-.product-cover__componentStack_1dq1z.product-cover__size-128_1dq1z {
+.product-cover__componentStack_vbqzd.product-cover__size-128_vbqzd {
         padding-left: var(--gap-8);
     }
-.product-cover__firstCard_1dq1z {
+.product-cover__firstCard_vbqzd {
     z-index: 4;
 }
-.product-cover__firstCard_1dq1z.product-cover__size-32_1dq1z {
+.product-cover__firstCard_vbqzd.product-cover__size-32_vbqzd {
         margin-top: var(--gap-4);
     }
-.product-cover__firstCard_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
+.product-cover__firstCard_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
         margin-left: -7px;
         margin-top: var(--gap-4);
     }
-.product-cover__wrapperSecondCard_1dq1z.product-cover__size-128_1dq1z {
+.product-cover__wrapperSecondCard_vbqzd.product-cover__size-128_vbqzd {
         width: 213px;
         padding-left: var(--gap-8);
         margin-top: 18px;
         margin-left: -221px;
     }
-.product-cover__wrapperSecondCard_1dq1z.product-cover__size-40_1dq1z {
+.product-cover__wrapperSecondCard_vbqzd.product-cover__size-40_vbqzd {
         margin-top: var(--gap-16);
         margin-left: -54px;
     }
-.product-cover__wrapperSecondCard_1dq1z.product-cover__size-32_1dq1z {
+.product-cover__wrapperSecondCard_vbqzd.product-cover__size-32_vbqzd {
         margin-top: var(--gap-12);
         margin-left: -47px;
     }
-.product-cover__wrapperSecondCard_1dq1z.product-cover__size-16_1dq1z {
+.product-cover__wrapperSecondCard_vbqzd.product-cover__size-16_vbqzd {
         margin-top: var(--gap-4);
         margin-left: var(--gap-20-neg);
     }
-.product-cover__wrapperSecondCard_1dq1z.product-cover__size-40_1dq1z.product-cover__bottom_1dq1z {
+.product-cover__wrapperSecondCard_vbqzd.product-cover__size-40_vbqzd.product-cover__bottom_vbqzd {
         margin-top: var(--gap-16);
         margin-left: -58px;
     }

package/stack/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"wrapper":"product-cover__wrapper_1dq1z","size-128":"product-cover__size-128_1dq1z","size-40":"product-cover__size-40_1dq1z","size-32":"product-cover__size-32_1dq1z","size-16":"product-cover__size-16_1dq1z","bottom":"product-cover__bottom_1dq1z","componentImage":"product-cover__componentImage_1dq1z","componentStack":"product-cover__componentStack_1dq1z","firstCard":"product-cover__firstCard_1dq1z","wrapperSecondCard":"product-cover__wrapperSecondCard_1dq1z"};
+var styles = {"wrapper":"product-cover__wrapper_vbqzd","size-128":"product-cover__size-128_vbqzd","size-40":"product-cover__size-40_vbqzd","size-32":"product-cover__size-32_vbqzd","size-16":"product-cover__size-16_vbqzd","bottom":"product-cover__bottom_vbqzd","componentImage":"product-cover__componentImage_vbqzd","componentStack":"product-cover__componentStack_vbqzd","firstCard":"product-cover__firstCard_vbqzd","wrapperSecondCard":"product-cover__wrapperSecondCard_vbqzd"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/typings.d.ts

@@ -107,6 +107,12 @@ export type SingleCommonProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Задает различные эффекты при наведении на компонент (затемнение, осветление)
+     *
+     * @default false
+     */
+    stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening' | false;
 };
 export type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'numberOfCards' | 'align'>;
 export type BankCardImageProps = Omit<SingleCommonProps, 'size' | 'numberOfСards' | 'numberOfCards' | 'className' | 'dataTestId' | 'align'>;