feat(card): add interactive 3D tilt effect on hover

Lundalogik · Nov 28, 2024 · 6f3549d · 6f3549d
1 parent 52632d1
commit 6f3549d
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 24 deletions.
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
@@ -38,21 +38,12 @@ section {
     padding: 0.25rem;
     background-color: var(--card-background-color, rgb(var(--contrast-300)));
 
-    :host(limel-card[clickable]) & {
-        @include mixins.visualize-keyboard-focus;
-        @include mixins.is-flat-clickable(
-            $background-color:
-                var(--card-background-color, rgb(var(--contrast-200))),
-            $background-color--hovered:
-                var(
-                    --card-background-color--hovered,
-                    var(--card-background-color, rgb(var(--contrast-200)))
-                )
-        );
-    }
-
-    :host(limel-card[clickable]:hover) & {
+    &:hover {
         border-color: transparent;
+        background-color: var(
+            --card-background-color--hovered,
+            var(--card-background-color, rgb(var(--contrast-200)))
+        );
     }
 }
 
@@ -143,3 +134,21 @@ limel-action-bar {
     padding: 0.5rem;
     margin-left: auto;
 }
+
+// The 3D effect
+@include mixins.limel-3d-hover-effect-glow(
+    section,
+    var(--card-border-radius, $default-border-radius)
+);
+
+:host(limel-card) {
+    @include mixins.parent-of-the-3d-element;
+}
+
+section {
+    @include mixins.the-3d-element;
+
+    :host(limel-card[clickable]) & {
+        @include mixins.the-3d-element--clickable;
+    }
+}
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
@@ -1,10 +1,19 @@
-import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';
+import {
+    Component,
+    h,
+    Prop,
+    Event,
+    EventEmitter,
+    Element,
+    Host,
+} from '@stencil/core';
 import { Image } from '../../global/shared-types/image.types';
 import { Icon } from '../../global/shared-types/icon.types';
 import { isItem } from '../action-bar/isItem';
 import { getIconName } from '../icon/get-icon-props';
 import { ListSeparator } from '../../global/shared-types/separator.types';
 import { ActionBarItem } from '../action-bar/action-bar.types';
+import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
 
 /**
  * Card is a component that displays content about a single topic,
@@ -87,17 +96,37 @@ export class Card {
     @Event()
     public actionSelected: EventEmitter<ActionBarItem>;
 
+    @Element()
+    private host: HTMLElement;
+
+    private handleMouseEnter: () => void;
+    private handleMouseLeave: () => void;
+
+    public componentWillLoad() {
+        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(
+            this.host,
+        );
+        this.handleMouseEnter = handleMouseEnter;
+        this.handleMouseLeave = handleMouseLeave;
+    }
+
     public render() {
         return (
-            <section tabindex={this.clickable ? 0 : ''}>
-                {this.renderImage()}
-                <div class="body">
-                    {this.renderHeader()}
-                    {this.renderSlot()}
-                    {this.renderValue()}
-                    {this.renderActionBar()}
-                </div>
-            </section>
+            <Host
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+            >
+                <section tabindex={this.clickable ? 0 : ''}>
+                    {this.renderImage()}
+                    <div class="body">
+                        {this.renderHeader()}
+                        {this.renderSlot()}
+                        {this.renderValue()}
+                        {this.renderActionBar()}
+                    </div>
+                    <div class="limel-3d-hover-effect-glow" />
+                </section>
+            </Host>
         );
     }