fix: use WRoundedIcon for WCard

witnet · Sep 4, 2024 · b0ca7b2 · b0ca7b2
1 parent ff5e4d4
commit b0ca7b2
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 80 deletions.
diff --git a/src/components/AnimatedArrow.vue → ...omponents/AnimatedArrow/AnimatedArrow.vue b/src/components/AnimatedArrow.vue → ...omponents/AnimatedArrow/AnimatedArrow.vue
@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import { gsap } from 'gsap'
 import { computed, ref, watch } from 'vue'
-import WIcon from './icon/WIcon.vue'
-import { IconName } from './icon/WIcon'
+import WIcon from '../icon/WIcon.vue'
+import { IconName } from '../icon/WIcon'
 
 const arrow = ref(null)
 

diff --git a/src/components/Button/WButton.spec.ts b/src/components/Button/WButton.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest'
 
 import { mount } from '@vue/test-utils'
 import WBtn from './WButton.vue'
-import AnimatedArrow from '../AnimatedArrow.vue'
+import AnimatedArrow from '../AnimatedArrow/AnimatedArrow.vue'
 
 describe('WBtn', () => {
   it('renders properly', () => {

diff --git a/src/components/Button/WButton.vue b/src/components/Button/WButton.vue
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import AnimatedArrow from '../AnimatedArrow.vue'
+import AnimatedArrow from '../AnimatedArrow/AnimatedArrow.vue'
 import { ButtonType, buttonTypes } from './WButton'
 
 const props = defineProps({

diff --git a/src/components/Card/BaseCard.vue b/src/components/Card/BaseCard.vue
@@ -0,0 +1,38 @@
+<template>
+  <div
+  class="card border rounded-lg px-xl py-xl mr-sm mb-sm max-w-md h-full"
+>
+  <div class="flex justify-between items-center">
+    <h3 class="text-xl text-black-950 font-semibold leading-4">
+      {{ title }}
+    </h3>
+    <AnimatedArrow v-if="link" :hover="hover" color="#C6C6C6" />
+  </div>
+  <hr class="hr my-md" />
+  <slot name="description" class="text-sm text-black-950"></slot>
+</div>
+</template>
+<script setup lang="ts">
+import AnimatedArrow from '../AnimatedArrow/AnimatedArrow.vue'
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  hover: {
+    type: Boolean,
+    required: true,
+  },
+  link: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+<style lang="scss" scoped>
+.hr {
+  height: 3px; /* Modern Browsers */
+  @apply bg-black-950;
+}
+
+</style>
diff --git a/src/components/Card/WCard.spec.ts b/src/components/Card/WCard.spec.ts
@@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import WCard from './WCard.vue'
 import { CardType } from './WCard'
-import AnimatedArrow from '../AnimatedArrow.vue'
+import AnimatedArrow from '../AnimatedArrow/AnimatedArrow.vue'
 
 describe('WCard', () => {
   it('base', () => {

diff --git a/src/components/Card/WCard.stories.ts b/src/components/Card/WCard.stories.ts
@@ -23,10 +23,11 @@ export const Base: Story = {
     setup() {
       return { args }
     },
-    template: `<WCard v-bind="args"><template #content>Link description</template></WCard>`
+    template: `<WCard v-bind="args"><template #description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</template></WCard>`
   }),
   args: {
-    type: 'base'
+    type: 'base',
+    title: 'Lorem ipsum'
   }
 }
 
@@ -39,7 +40,20 @@ export const Icon: Story = {
     setup() {
       return { args }
     },
-    template: `<WCard v-bind="args" />`
+    template: `<WCard v-bind="args"><template #icon><svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="61"
+          height="56"
+          fill="none"
+          viewBox="0 0 61 56"
+          class="icon"
+          data-v-0d0885e7=""
+        >
+          <path
+            fill="#1D1D1B"
+            d="M28.59 46.94c-.43.43-.91.83-1.42 1.18a23 23 0 0 1-3.12 1.97c-2.17 1.1-4.46 1.93-6.87 2.41-.59.12-1.18.24-1.78.32l-.91.12-.43.04-.43.04-.91.08-.91.04c-.59.04-1.22.04-1.82.08-1.78 0-3.55-.08-5.33-.24.2-.28.39-.59.59-.91.55-.87 1.07-1.82 1.54-2.76.87-1.89 1.54-3.87 2.09-5.84.51-1.93 1.14-3.79 1.85-5.68s1.54-3.71 2.49-5.48c-.67.75-1.26 1.58-1.82 2.45-.55.83-1.1 1.74-1.58 2.6-.99 1.78-1.85 3.67-2.53 5.56-.71 1.85-1.46 3.71-2.37 5.41s-2.01 3.28-3.28 4.77l-1.3 1.58 2.05.28c2.53.36 5.09.55 7.66.47.63-.04 1.3-.04 1.93-.12l.95-.08.95-.12c.63-.08 1.26-.24 1.89-.32.63-.16 1.26-.28 1.89-.47.63-.16 1.22-.39 1.85-.59.59-.24 1.22-.47 1.82-.75 1.18-.51 2.33-1.18 3.39-1.89s2.05-1.54 2.96-2.49c.87-.95 1.66-1.93 2.21-3.08-.43.55-.87 1.03-1.34 1.42m14.16-34.06c.71-.71 1.66-1.1 2.68-1.1s1.93.36 2.68 1.1a3.84 3.84 0 0 1 0 5.37c-1.46 1.46-3.87 1.46-5.37 0-.71-.71-1.1-1.66-1.1-2.68s.39-1.97 1.1-2.68m2.7 8.75c1.58 0 3.12-.59 4.3-1.78a6.14 6.14 0 0 0 0-8.64 6.09 6.09 0 0 0-8.6 0 6.07 6.07 0 0 0-1.78 4.3c0 1.62.63 3.16 1.78 4.3a5.95 5.95 0 0 0 4.3 1.82m1.77 8.76c-8.72 7.69-12.35 8.4-15.98 6.75l3.95-4.97c.59-.71.99-1.58 1.22-2.49l1.58-6.67-6.63 1.58c-.91.24-1.78.63-2.49 1.22l-4.97 3.95c-1.7-3.63-.95-7.26 6.71-15.98C37.82 5.54 53.13 3.65 57.67 3.25c-.36 4.54-2.25 19.89-10.5 27.15m-5.8 11.92c-.08.36-.28.71-.59.91-.91.63-2.33 1.5-3.59 2.29l.08-.24c.59-2.41.59-4.26 0-5.52 1.66-.51 3.43-1.42 5.45-2.8-.51 1.85-1.07 4.06-1.34 5.37zm-13.77-4.3c-.51.67-1.34 1.03-2.17.99h-2.01l6.87-8.29L22 37.59v-2.01c-.04-.83.32-1.66.99-2.17l7.26-5.76c.47-.36 1.03-.63 1.58-.79l2.96-.71-.71 2.96c-.16.59-.39 1.14-.79 1.62l-5.68 7.3zM15.76 23.74l-.24.08c.75-1.26 1.62-2.68 2.25-3.59.2-.32.55-.51.91-.59 1.3-.28 3.51-.83 5.37-1.3-1.38 2.01-2.29 3.83-2.8 5.48-1.22-.71-3.08-.71-5.48-.08zM58.89.85c-.83.04-20.87.95-30.07 11.4-.87.99-1.7 2.01-2.53 3.04-1.34.36-6 1.62-8.05 2.05-.95.2-1.82.75-2.37 1.58-1.42 2.05-3.87 6.27-3.95 6.43l-1.78 3.04 3.24-1.42c2.13-.91 5.68-1.85 6.94-1.1.2.12.43.36.47.95.04 1.5.43 2.96 1.18 4.42l-.43.36c-1.22.99-1.93 2.49-1.85 4.06v5.64h5.64c1.58.08 3.08-.63 4.06-1.85l.36-.43c1.46.75 2.92 1.18 4.42 1.18.59.04.79.24.95.47.79 1.26-.16 4.85-1.1 6.98l-1.42 3.24 3.04-1.78c.2-.12 4.38-2.56 6.43-3.99.79-.55 1.34-1.38 1.54-2.37.43-2.05 1.7-6.75 2.05-8.09.95-.75 1.93-1.62 3-2.56 10.42-9.19 11.36-29.28 11.4-30.11L60.1.73l-1.22.12z"
+          ></path>
+        </svg></template></template></WCard>`
   }),
   args: {
     type: 'icon',
@@ -56,10 +70,10 @@ export const Link: Story = {
     setup() {
       return { args }
     },
-    template: `<WCard v-bind="args"><template #description>Link description</template></WCard>`
+    template: `<WCard v-bind="args"><template #description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</template></WCard>`
   }),
   args: {
     type: 'link',
-    title: 'Custom link title',
+    title: 'Lorem ipsum',
   }
 }
diff --git a/src/components/Card/WCard.vue b/src/components/Card/WCard.vue
@@ -8,30 +8,26 @@
       @mouseenter="toggleHover"
       @mouseleave="toggleHover"
     >
-      <div
-        class="card border rounded-lg px-xl py-xl mr-sm mb-sm max-w-md h-full"
-      >
-        <div class="flex justify-between items-center">
-          <h3 class="text-xl text-black-950 font-semibold leading-4">
-            {{ title }}
-          </h3>
-          <AnimatedArrow :hover="hover" color="#C6C6C6" />
-        </div>
-        <hr class="hr my-md" />
-        <slot name="description" class="text-sm text-black-950"></slot>
-      </div>
+      <BaseCard :title="title" :hover="hover" :link="true">
+        <template #description>
+          <slot name="description" class="text-sm text-black-950"></slot>
+        </template>
+      </BaseCard>
     </a>
   </div>
-  <div
-    v-else class="h-full w-auto out-of-boundaries card border-2 border-black-950 bg-white-50 rounded-lg px-xl py-xl max-w-sm"
-  >
   <div v-if="isBaseCard">
-    <slot name="content"></slot>
+    <BaseCard :title="title" :hover="hover">
+      <template #description>
+        <slot name="description" class="text-sm text-black-950"></slot>
+      </template>
+    </BaseCard>
   </div>
-  <div v-if="isIconCard">
-    <RoundedIcon class="rounded-icon" icon-size="60px">
+  <div
+    v-if="isIconCard" class="h-full w-auto out-of-boundaries card border-2 border-black-950 bg-white-50 rounded-lg px-xl py-xl max-w-sm"
+  >
+    <WIconRounded class="rounded-icon" :size="90" :disableHoverEffect="true">
       <slot name="icon">Icon</slot>
-    </RoundedIcon>
+    </WIconRounded>
     <div class="ml-xl px-sm">
       <h3 class="text-2xl text-black-950 font-semibold leading-4 pl-14">
         {{ title }}
@@ -47,16 +43,16 @@
       <WButton class="action" type="arrow">{{ urlLabel }}</WButton>
     </a>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { cardTypes, CardType } from './WCard.ts'
 import { PropType, computed, ref } from 'vue'
-import AnimatedArrow from '../AnimatedArrow.vue'
+
 import SlashesIcon from '@/assets/svg/slashes.svg?component'
 import WButton from '../Button/WButton.vue'
-import RoundedIcon from '../RoundedIcon.vue'
+import WIconRounded from '../IconRounded/WIconRounded.vue'
+import BaseCard from './BaseCard.vue'
 const hover = ref(false)
 const props = defineProps({
   type: {
@@ -92,11 +88,6 @@ function toggleHover() {
 </script>
 
 <style scoped lang="scss">
-:slotted(svg) {
-  width: 60px;
-  height: 60px;
-}
-
 .out-of-boundaries {
   // add margin equal to out of boundaries
   margin: 15px 30px 25px 15px;

diff --git a/src/components/Card/__snapshots__/WCard.spec.ts.snap b/src/components/Card/__snapshots__/WCard.spec.ts.snap
@@ -2,41 +2,64 @@
 
 exports[`WCard > base 1`] = `
 <div
-  class="h-full w-auto out-of-boundaries card border-2 border-black-950 bg-white-50 rounded-lg px-xl py-xl max-w-sm"
-  data-v-47e965dc=""
+  data-v-app=""
 >
+  
+  <!--v-if-->
   <div
     data-v-47e965dc=""
   >
-    
-    
+    <div
+      class="card border rounded-lg px-xl py-xl mr-sm mb-sm max-w-md h-full"
+      data-v-42578349=""
+      data-v-47e965dc=""
+    >
+      <div
+        class="flex justify-between items-center"
+        data-v-42578349=""
+      >
+        <h3
+          class="text-xl text-black-950 font-semibold leading-4"
+          data-v-42578349=""
+        >
+          Title
+        </h3>
+        <!--v-if-->
+      </div>
+      <hr
+        class="hr my-md"
+        data-v-42578349=""
+      />
+      
+      
+    </div>
   </div>
   <!--v-if-->
+  
 </div>
 `;
 
 exports[`WCard > icon 1`] = `
 <div
-  class="h-full w-auto out-of-boundaries card border-2 border-black-950 bg-white-50 rounded-lg px-xl py-xl max-w-sm"
-  data-v-47e965dc=""
+  data-v-app=""
 >
+  
+  <!--v-if-->
   <!--v-if-->
   <div
+    class="h-full w-auto out-of-boundaries card border-2 border-black-950 bg-white-50 rounded-lg px-xl py-xl max-w-sm"
     data-v-47e965dc=""
   >
     <div
-      class="border border-black-950 w-min rounded-full p-md bg-wit-blue-500 rounded-icon"
+      class="icon-container border border-black-950 w-min rounded-full bg-wit-blue-500 transition-colors flex justify-center items-center rounded-icon"
+      data-v-1216bb64=""
       data-v-47e965dc=""
     >
-      <div
-        class="icon-container flex justify-center items-center"
-      >
-        
-        
-        WIcon
-        
-        
-      </div>
+      
+      
+      WIcon
+      
+      
     </div>
     <div
       class="ml-xl px-sm"
@@ -108,5 +131,6 @@ exports[`WCard > icon 1`] = `
       </button>
     </a>
   </div>
+  
 </div>
 `;
diff --git a/src/components/IconRounded/WIconRounded.stories.ts b/src/components/IconRounded/WIconRounded.stories.ts
@@ -36,6 +36,7 @@ export const Default: Story = {
     }
   }),
   args: {
-    size: 70
+    size: 70,
+    disableHoverEffect: false,
   }
 }
diff --git a/src/components/IconRounded/WIconRounded.vue b/src/components/IconRounded/WIconRounded.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border border-black-950 w-min rounded-full bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors icon-container flex justify-center items-center"
+    class="icon-container border border-black-950 w-min rounded-full bg-wit-blue-500 transition-colors flex justify-center items-center"
   >
     <slot></slot>
   </div>
@@ -13,9 +13,13 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 70
+  },
+  disableHoverEffect: {
+    type: Boolean,
+    default: false
   }
 })
-
+const hoverBgColor = computed(() => props.disableHoverEffect ? 'wit-blue-500' : 'wit-blue-300')
 const iconSize = computed(() => `${props.size - props.size * 0.4}px`)
 const containerSize = computed(() => `${props.size}px`)
 </script>
@@ -29,6 +33,6 @@ const containerSize = computed(() => `${props.size}px`)
 }
 
 .icon-container {
-  @apply min-h-[v-bind(containerSize)] min-w-[v-bind(containerSize)];
+  @apply min-h-[v-bind(containerSize)] min-w-[v-bind(containerSize)] hover:bg-[v-bind(hoverBgColor)];
 }
 </style>
diff --git a/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap b/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`WIconRounded > renders properly 1`] = `
 <div
-  class="border border-black-950 w-min rounded-full bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors icon-container flex justify-center items-center"
+  class="icon-container border border-black-950 w-min rounded-full bg-wit-blue-500 transition-colors flex justify-center items-center"
   data-v-1216bb64=""
 >
   

diff --git a/src/components/IconText/__snapshots__/WIconText.spec.ts.snap b/src/components/IconText/__snapshots__/WIconText.spec.ts.snap
@@ -40,7 +40,7 @@ exports[`WIconText > renders properly ROUNDED RIGHT 1`] = `
   target="_blank"
 >
   <div
-    class="border border-black-950 w-min rounded-full bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors icon-container flex justify-center items-center rounded-icon mr-md"
+    class="icon-container border border-black-950 w-min rounded-full bg-wit-blue-500 transition-colors flex justify-center items-center rounded-icon mr-md"
     data-v-1216bb64=""
   >
     

diff --git a/src/components/RoundedIcon.vue b/src/components/RoundedIcon.vue