feat: add background color hover property for BasicCard (#1324)

Co-authored-by: Maksim Malofeev <[email protected]>

Author: Valent1325

src/components/CardBase/CardBase.scss

@@ -60,4 +60,5 @@ a#{$block} {
     @include reset-link-style();
     @include reset-link-hover();
     @include card($hover: true);
+    @include background-hover();
 }

src/models/constructor-items/sub-blocks.ts

@@ -166,6 +166,7 @@ export interface BasicCardProps
     gravityIcon?: ThemeSupporting<GravityIconProps>;
     target?: string;
     iconPosition?: IconPosition;
+    hoverBackgroundColor?: string;
 }
 
 export interface BannerCardProps {

src/sub-blocks/BasicCard/BasicCard.tsx

@@ -24,6 +24,7 @@ const BasicCard = (props: BasicCardProps) => {
         controlPosition = 'content',
         size = 's',
         gravityIcon,
+        hoverBackgroundColor,
         ...cardParams
     } = props;
     const titleId = useUniqId();
@@ -38,7 +39,15 @@ const BasicCard = (props: BasicCardProps) => {
             className={b()}
             contentClassName={b('content')}
             {...cardParams}
-            extraProps={{'aria-describedby': descriptionId, 'aria-labelledby': titleId}}
+            extraProps={{
+                'aria-describedby': descriptionId,
+                'aria-labelledby': titleId,
+                ...(hoverBackgroundColor && {
+                    style: {
+                        '--hover-background-color': hoverBackgroundColor,
+                    } as React.CSSProperties,
+                }),
+            }}
         >
             <CardBase.Content>
                 <IconWrapper

src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx

@@ -123,6 +123,7 @@ export const WithContentList = WithContentListTemplate.bind({});
 export const ControlPosition = ControlPositionTemplate.bind({});
 export const Sizes = VariousTemplate.bind([]);
 export const GravityIcons = VariousTemplate.bind([]);
+export const HoverEffects = ListTemplate.bind({});
 
 const DefaultArgs = data.default as BasicCardModel;
 
@@ -254,3 +255,10 @@ GravityIcons.parameters = {
         include: Object.keys(GravityIcons.args),
     },
 };
+
+HoverEffects.args = data.hoverEffects as BasicCardModel[];
+HoverEffects.parameters = {
+    controls: {
+        include: Object.keys(HoverEffects.args),
+    },
+};

src/sub-blocks/BasicCard/__stories__/data.json

@@ -382,5 +382,30 @@
         }
       ]
     }
+  ],
+  "hoverEffects": [
+    {
+      "type": "basic-card",
+      "title": "Hover: Gradient Background",
+      "text": "Hover over this card to see gradient background effect",
+      "url": "/test",
+      "urlTitle": "Opens in a new tab",
+      "hoverBackgroundColor": "linear-gradient(180deg, rgba(255, 255, 255, 0.00) 36%, #DCC7FF 100%)"
+    },
+    {
+      "type": "basic-card",
+      "title": "Hover: Solid Color",
+      "text": "Hover over this card to see solid color background effect",
+      "url": "/test",
+      "urlTitle": "Opens in a new tab",
+      "hoverBackgroundColor": "#DCC7FF"
+    },
+    {
+      "type": "basic-card",
+      "title": "No Hover Effect",
+      "text": "This card has no hover background effect",
+      "url": "/test",
+      "urlTitle": "Opens in a new tab"
+    }
   ]
 }

styles/mixins.scss

@@ -247,6 +247,12 @@
     }
 }
 
+@mixin background-hover($property: background) {
+    &:hover {
+        #{$property}: var(--hover-background-color);
+    }
+}
+
 @mixin image-shadow() {
     box-shadow:
         0 2px 8px var(--pc-color-sfx-shadow),