Merge pull request #73 from Holo-Host/feature/enable-details-link

Feature/enable details link
Holo-Host · Oct 23, 2023 · ca3e781 · ca3e781
2 parents 538bdb5 + 1f5e93d
commit ca3e781
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/components/HAppCard.vue b/src/components/HAppCard.vue
@@ -32,7 +32,11 @@
           </slot>
 
           <slot name="link-icon">
-            <ArrowIcon class="happ-card__name-arrow-icon" />
+            <ArrowIcon
+              class="happ-card__name-arrow-icon"
+              :class="[areDetailsAvailable ? 'pointer' : 'disabled']"
+              @click="areDetailsAvailable ? emit('details-link-click') : () => {}"
+            />
           </slot>
         </div>
 
@@ -63,6 +67,11 @@ const props = defineProps({
     default: () => {}
   },
 
+  areDetailsAvailable: {
+    type: Boolean,
+    default: false
+  },
+
   isEmpty: {
     type: Boolean,
     default: false
@@ -74,12 +83,13 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits(['details-link-click'])
+
 const earnings = computed(() =>
   props.happ.last7daysEarnings && Number(props.happ.last7daysEarnings)
     ? formatCurrency(Number(props.happ.last7daysEarnings))
     : '--'
 )
-
 </script>
 
 <style lang="scss" scoped>
@@ -135,7 +145,6 @@ const earnings = computed(() =>
 
     &-arrow-icon {
       margin-left: auto;
-      opacity: 0.2;
     }
   }
 
@@ -152,6 +161,10 @@ const earnings = computed(() =>
   opacity: 0.2;
 }
 
+.pointer {
+  cursor: pointer;
+}
+
 .bold {
   font-weight: 700;
 }

diff --git a/src/stories/HAppCard.stories.js b/src/stories/HAppCard.stories.js
@@ -9,7 +9,8 @@ export default {
   argTypes: {
     happ: hAppMock,
     isEmpty: false,
-    emptyCardLabel: ''
+    emptyCardLabel: '',
+    areDetailsAvailable: false
   }
 }
 
@@ -25,14 +26,24 @@ export const Default = kTemplate.bind({})
 Default.args = {
   happ: hAppMock,
   isEmpty: false,
-  emptyCardLabel: ''
+  emptyCardLabel: '',
+  areDetailsAvailable: false
 }
 
 export const EmptyWithLabel = kTemplate.bind({})
 EmptyWithLabel.args = {
   happ: null,
   isEmpty: true,
-  emptyCardLabel: '$.errors.no_data'
+  emptyCardLabel: '$.errors.no_data',
+  areDetailsAvailable: false
+}
+
+export const WithEnabledLink = kTemplate.bind({})
+WithEnabledLink.args = {
+  happ: hAppMock,
+  isEmpty: false,
+  emptyCardLabel: '',
+  areDetailsAvailable: true
 }
 
 const kEmptyWithCustomContentTemplate = (args) => ({