feat(info-tile): add interactive 3D tilt effect on hover

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

Hide file tree

Showing 2 changed files with 69 additions and 46 deletions.
diff --git a/src/components/info-tile/info-tile.scss b/src/components/info-tile/info-tile.scss
@@ -53,7 +53,6 @@
     --icon-preferred-size: 60cqh;
     --icon-max-size: calc(100cqw - 0.5rem);
 
-    isolation: isolate;
     container-type: size;
     position: relative;
     display: flex;
@@ -92,22 +91,6 @@ a {
         --info-tile-background-color,
         var(--lime-elevated-surface-background-color)
     );
-
-    &.is-clickable {
-        @include mixins.is-elevated-clickable(
-            $background-color:
-                var(
-                    --info-tile-background-color,
-                    var(--lime-elevated-surface-background-color)
-                ),
-            $background-color--hovered:
-                var(
-                    --info-tile-background-color,
-                    var(--lime-elevated-surface-background-color)
-                )
-        );
-        @include mixins.visualize-keyboard-focus;
-    }
 }
 
 .icon {
@@ -349,3 +332,21 @@ $l: 62.5rem; //1000px
         }
     }
 }
+
+// The 3D effect
+@include mixins.limel-3d-hover-effect-glow(
+    a,
+    var(--info-tile-border-radius, 1rem)
+);
+
+:host(limel-info-tile) {
+    @include mixins.parent-of-the-3d-element;
+}
+
+a {
+    @include mixins.the-3d-element;
+
+    &.is-clickable {
+        @include mixins.the-3d-element--clickable;
+    }
+}
diff --git a/src/components/info-tile/info-tile.tsx b/src/components/info-tile/info-tile.tsx
@@ -1,6 +1,7 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Prop, h, Element, Host } from '@stencil/core';
 import { InfoTileProgress } from '../info-tile/info-tile.types';
 import { Link } from '../../global/shared-types/link.types';
+import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
 
 /**
  * This component can be used on places such as a start page or a dashboard.
@@ -101,6 +102,20 @@ export class InfoTile {
     @Prop()
     public progress?: InfoTileProgress;
 
+    @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() {
         const extendedAriaLabel =
             this.checkProps(this?.prefix) +
@@ -116,36 +131,43 @@ export class InfoTile {
 
         const link = !this.disabled ? this.link?.href : '#';
 
-        return [
-            <a
-                title={this.link?.title}
-                href={link}
-                target={this.link?.target}
-                tabindex="0"
-                aria-label={extendedAriaLabel}
-                aria-disabled={this.disabled}
-                aria-busy={this.loading ? 'true' : 'false'}
-                aria-live="polite"
-                class={{
-                    'is-clickable': !!this.link?.href && !this.disabled,
-                    'has-circular-progress':
-                        !!this.progress?.value || this.progress?.value === 0,
-                }}
+        return (
+            <Host
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
             >
-                {this.renderIcon()}
-                {this.renderProgress()}
-                <div class="value-group">
-                    {this.renderPrefix()}
-                    <div class="value-and-suffix">
-                        {this.renderValue()}
-                        {this.renderSuffix()}
+                <a
+                    title={this.link?.title}
+                    href={link}
+                    target={this.link?.target}
+                    tabindex="0"
+                    aria-label={extendedAriaLabel}
+                    aria-disabled={this.disabled}
+                    aria-busy={this.loading ? 'true' : 'false'}
+                    aria-live="polite"
+                    class={{
+                        'is-clickable': !!this.link?.href && !this.disabled,
+                        'has-circular-progress':
+                            !!this.progress?.value ||
+                            this.progress?.value === 0,
+                    }}
+                >
+                    {this.renderIcon()}
+                    {this.renderProgress()}
+                    <div class="value-group">
+                        {this.renderPrefix()}
+                        <div class="value-and-suffix">
+                            {this.renderValue()}
+                            {this.renderSuffix()}
+                        </div>
+                        {this.renderSpinner()}
                     </div>
-                    {this.renderSpinner()}
-                </div>
-                {this.renderLabel()}
-            </a>,
-            this.renderNotification(),
-        ];
+                    {this.renderLabel()}
+                </a>
+                {this.renderNotification()}
+                <div class="limel-3d-hover-effect-glow" />
+            </Host>
+        );
     }
 
     private checkProps(propValue) {