feat: add link animation for cards without shadow (#513)

Author: NikitaCG

src/sub-blocks/BackgroundCard/BackgroundCard.tsx

@@ -27,13 +27,12 @@ const BackgroundCard = (props: BackgroundCardProps) => {
 
     const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
-    const link = hasBackgroundColor || border === 'line' ? undefined : url;
     const borderType = hasBackgroundColor ? 'none' : border;
 
     return (
         <CardBase
             className={b({padding: paddingBottom, theme: cardTheme})}
-            url={link}
+            url={url}
             border={borderType}
         >
             <CardBase.Content>

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

@@ -85,12 +85,23 @@ const BackgroundColorTemplate: StoryFn<BackgroundCardProps> = (args) => (
     </div>
 );
 
+const WithUrlTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
+    <div style={{display: 'flex'}}>
+        {args.items.map((item, i) => (
+            <div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
+                <BackgroundCard {...item} />
+            </div>
+        ))}
+    </div>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const WithBackgroundImage = DefaultTemplate.bind({});
 export const Paddings = PaddingsTemplate.bind({});
 export const CardThemes = CardThemesTemplate.bind([]);
 export const BorderLine = DefaultTemplate.bind({});
 export const BackgroundColor = BackgroundColorTemplate.bind({});
+export const WithUrl = WithUrlTemplate.bind({});
 
 const DefaultArgs = {
     title: data.common.title,
@@ -128,3 +139,17 @@ BackgroundColor.args = {
     ...DefaultArgs,
     ...data.backgroundColor.content,
 } as BackgroundCardProps;
+
+WithUrl.args = {
+    items: [
+        data.cardThemes.content[1],
+        data.withBackgroundImage.content,
+        data.borderLine.content,
+        data.backgroundColor.content,
+        data.borderNone.content,
+    ].map((item) => ({
+        ...DefaultArgs,
+        ...item,
+        url: data.url,
+    })) as BackgroundCardProps[],
+};

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

@@ -55,6 +55,12 @@
       "border": "line"
     }
   },
+  "borderNone": {
+    "content": {
+      "border": "none"
+    }
+  },
+  "url": "https://example.com",
   "paddings": {
     "title": "Padding Bottom = {{padding}}"
   },

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

@@ -60,9 +60,24 @@ const WithBorderTemplate: StoryFn<BasicCardProps> = (args) => (
     </div>
 );
 
+const WithUrlTemplate: StoryFn<BasicCardProps> = (args) => (
+    <div style={{display: 'flex', padding: '40px 0'}}>
+        <div style={{maxWidth: '400px', padding: '0 8px'}}>
+            <BasicCard {...args} title={getCardWithBorderTitle('shadow')} />
+        </div>
+        <div style={{maxWidth: '400px', padding: '0 8px'}}>
+            <BasicCard {...args} border="line" title={getCardWithBorderTitle('line')} />
+        </div>
+        <div style={{maxWidth: '400px', padding: '0 8px'}}>
+            <BasicCard {...args} border="none" title={getCardWithBorderTitle('none')} />
+        </div>
+    </div>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const WithIcon = WithIconTemplate.bind({});
 export const WithBorder = WithBorderTemplate.bind({});
+export const WithUrl = WithUrlTemplate.bind({});
 
 const DefaultArgs = {
     ...data.default.content,
@@ -75,3 +90,7 @@ Default.args = {
 } as BasicCardProps;
 WithIcon.args = DefaultArgs as BasicCardProps;
 WithBorder.args = DefaultArgs as BasicCardProps;
+WithUrl.args = {
+    url: data.url,
+    ...DefaultArgs,
+} as BasicCardProps;

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

@@ -10,9 +10,9 @@
   "withBorder": {
     "title": "Card with border {{border}}"
   },
+  "url": "https://example.com",
   "default": {
     "content": {
-      "url": "https://example.com",
       "title": "Lorem ipsum",
       "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
     }

styles/mixins.scss

@@ -246,7 +246,9 @@
 
     &_border_line,
     &_border_none {
-        cursor: default;
+        @if $hover {
+            @include card-hover();
+        }
     }
 
     &_border_shadow {