[Stat] Hover fix (#957)

* Added possible fix for smoothing out the stat hover. * Removed transforms and update template with missing class. * Added grid for testing. * Converting to max-height transition so we don`t have a chrome only css rule. * Added support for interpolate-size for smoother hover. * Added missing control whether to turn on/off hover effect. * Set a max-height value that works. --------- Co-authored-by: Alan Way <[email protected]>
uiowa · Dec 20, 2024 · 0edba94 · 0edba94
1 parent 04419e7
commit 0edba94
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 20 deletions.
diff --git a/src/components/stat/Stat.stories.js b/src/components/stat/Stat.stories.js
@@ -1,5 +1,7 @@
 import UidsStat from './Stat.vue';
 import Background from "../shared/background";
+import UidsGrid from '../grid/Grid.vue';
+import UidsGridItem from '../grid/GridItem.vue';
 
 export default {
   title: 'Components/Stat',
@@ -31,6 +33,9 @@ export default {
       control: 'text',
       name: 'Suffix',
     },
+    stat_hover: {
+      name: 'Hover',
+    },
     ...Background.argTypes,
   },
 };
@@ -51,6 +56,7 @@ Default.args = {
   stat_content: 'Among the top 2% of universities worldwide.',
   stat_prefix: '',
   stat_suffix: '+',
+  stat_hover: true,
 };
 
 export const Horizontal = Template.bind({});
@@ -59,4 +65,45 @@ Horizontal.args = {
   stat_title: '15:1',
   stat_summary: 'student-to-faculty<br /> ratio',
   stat_content: 'Among the top 2% of universities worldwide.',
+  stat_hover: true,
 };
+
+const GridTemplate = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { UidsGrid, UidsGridItem, UidsStat },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return { args }
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+    <div style="padding-top: 2rem; padding-bottom: 2rem;">
+      <uids-grid :type="args.grid_type">
+        <uids-grid-item v-for="item in args.record_count" :key="item">
+          <uids-stat
+            :display="args.display || 'default'"
+            :stat_title="args.stat_title"
+            :stat_summary="args.stat_summary"
+            :stat_content="args.stat_content"
+            :stat_prefix="args.stat_prefix"
+            :stat_suffix="args.stat_suffix"
+            :stat_hover="args.stat_hover"
+          />
+        </uids-grid-item>
+      </uids-grid>
+    </div>
+  `,
+})
+
+export const Grid = GridTemplate.bind({})
+Grid.args = {
+  display: 'default',
+  grid_type: 'threecol--33-34-33',
+  record_count: 6,
+  stat_title: '15:1',
+  stat_summary: 'student-to-faculty ratio',
+  stat_content: 'Among the top 2% of universities worldwide.',
+  stat_prefix: '',
+  stat_suffix: '+',
+  stat_hover: true,
+}
diff --git a/src/components/stat/Stat.vue b/src/components/stat/Stat.vue
@@ -26,6 +26,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  stat_hover: {
+    type: Boolean,
+    default: true,
+  },
   display: {
     type: String,
     default: 'default',
@@ -39,17 +43,21 @@ const classes = computed(() => {
   Background.addBackgroundClass(classes, props);
 
   if (props.display === 'horizontal') {
-    classes.push('stat--horizontal', 'stat--transform', 'stat__grid');
+    classes.push('stat--horizontal', 'stat__grid');
   } else {
-    classes.push('element--flex-center', 'stat--transform');
+    classes.push('element--flex-center');
+  }
+
+  if (!props.stat_hover) {
+    classes.push('stat--static');
   }
 
   return classes;
 });
 </script>
 
 <template>
-  <div :class="classes">
+  <div :class="['stat', 'stat__grid', 'stat--transform', ...classes]">
     <div v-if="stat_title">
       <h2 class="stat__title">
         <span v-if="stat_prefix" class="headline__prefix">{{ stat_prefix }}</span>

diff --git a/src/scss/components/stat.scss b/src/scss/components/stat.scss
@@ -1,23 +1,39 @@
 @import '../abstracts/variables';
 @import '../abstracts/utilities';
 
+// https://drafts.csswg.org/css-values-5/#interpolate-size.
+:root {
+  interpolate-size: allow-keywords;
+}
+
 .stat__grid {
   margin: 0;
   width: 100%;
   transition: all .55s cubic-bezier(.95, 1.25, .375, 1.15);
 
-  &.stat--transform {
-    &:hover {
+  &.stat--static {
+    &:hover .stat__content {
       @include breakpoint(md) {
-        transform: translateY(-10px);
+        max-height: 100vh;
+      }
+      @include breakpoint(md) {
+        @supports (interpolate-size: allow-keywords) {
+          max-height: max-content;
+          overflow: hidden;
+        }
       }
     }
   }
 
   &:hover .stat__content {
     @include breakpoint(md) {
-      @include element-invisible-off;
-      opacity: 1;
+      max-height: 100vh;
+    }
+    @include breakpoint(md) {
+      @supports (interpolate-size: allow-keywords) {
+        max-height: max-content;
+        overflow: hidden;
+      }
     }
   }
 }
@@ -82,9 +98,17 @@
     line-height: 1.4;
 
     @include breakpoint(md) {
-      opacity: 0;
-      transition: 1s;
-      @include element-invisible;
+      max-height: 0;
+      transition: max-height 0.4s ease-in-out;
+      overflow: hidden;
+    }
+
+    .stat--static & {
+      @include breakpoint(md) {
+        max-height: max-content;
+        transition: none;
+        overflow: unset;
+      }
     }
 
     [class*="bg--black"] &,
@@ -102,7 +126,6 @@
         margin: 0 10%;
       }
     }
-
   }
 
   &__description {
@@ -229,14 +252,10 @@
   margin-bottom: 0rem;
   display: flex;
   flex-wrap: wrap;
-  cursor: pointer;
+  cursor: inherit;
   transition: all .55s cubic-bezier(.95, 1.25, .375, 1.15);
+}
 
-  &.stat--transform {
-    &:hover {
-      @include breakpoint(md) {
-        transform: translateY(-10px) scale(1.02);
-      }
-    }
-  }
+.stat:not(.stat--static) {
+  cursor: pointer;
 }