From 0e0bad0d748341f3eb84f9ba96a1558d0f44d1ed Mon Sep 17 00:00:00 2001
From: Luis Igreja <lfsigreja@gmail.com>
Date: Wed, 4 Sep 2024 13:56:03 -0300
Subject: [PATCH] feat: Content Logo ui refactor

---
 .../components-group/ContentLogo.stories.js   |  6 --
 src/templates/contentlogo/ContentLogo.vue     | 92 +++++++++++--------
 2 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/src/stories/components-group/ContentLogo.stories.js b/src/stories/components-group/ContentLogo.stories.js
index 6fbca996..c0cc8180 100644
--- a/src/stories/components-group/ContentLogo.stories.js
+++ b/src/stories/components-group/ContentLogo.stories.js
@@ -4,12 +4,6 @@ export default {
   title: 'Components Group/Content Logo',
   component: ContentLogo,
   tags: ['autodocs'],
-  argTypes: {
-    size: {
-      options: ["small", "default", "large"],
-      control: { type: 'radio' },
-    }
-  },
 }
 
 const logos = Array(4).fill({
diff --git a/src/templates/contentlogo/ContentLogo.vue b/src/templates/contentlogo/ContentLogo.vue
index f4347741..69618162 100644
--- a/src/templates/contentlogo/ContentLogo.vue
+++ b/src/templates/contentlogo/ContentLogo.vue
@@ -1,27 +1,46 @@
 <template>
   <div
     class="flex"
-    :class="{'justify-center': isCentralized}">
-
-    <div class="flex flex-col gap-4 max-w-2xl">
-      <p
-        v-if="title"
-        class="text-color-secondary text-xs"
-        :class="{ 'text-center': isCentralized }">
-
-        {{ title }}
-      </p>
+    :class="{ 'justify-center': isCentralized }"
+  >
+    <div
+      class="flex flex-col"
+      :class="[
+        { 'max-w-lg gap-5': !isCentralized },
+        { 'max-w-sm md:max-w-xl lg:max-w-4xl gap-10': isCentralized }
+      ]"
+    >
+    <template v-if="title">
+      <template v-if="!isCentralized">
+        <p
+          v-if="title"
+          class="text-color-secondary text-xs"
+          :class="{ 'text-center': isCentralized }"
+        >
+          {{ title }}
+        </p>
+      </template>
+      <template v-else-if="isCentralized">
+        <Overline class="text-center" :label="title" />
+      </template>
+    </template>
       <div
-        class="flex flex-wrap m-0 gap-y-6 gap-x-8 text-color-secondary"
-        :class="{ 'justify-center': isCentralized }">
+        class="flex items-center flex-wrap m-0 text-color-secondary"
+        :class="[{ 'justify-center gap-y-8 md:gap-y-16 ': isCentralized }, { 'gap-5': !isCentralized }]"
+      >
         <div
+          :class="[{ 'w-28 ': !isCentralized }, { 'w-36 lg:w-56': isCentralized }]"
           :key="logo.imageSrc"
-          v-for="logo in logos">
-          <span class="block  *:h-auto  *:w-full *:aspect-[9/6] " :class="[
-            { '*:max-h-8 max-h-8 w-20 *:max-w-20' : size === 'small'},
-            { '*:max-h-12 max-h-12 w-24 *:max-w-24' : size === 'default'},
-            { '*:max-h-16 max-h-16 w-28 *:max-w-28' : size === 'large'}
-          ]" v-html="logo.imageSrc"></span>
+          v-for="logo in logos"
+        >
+          <span
+            class="*:h-10 max-h-10 flex justify-center"
+            :class="[
+              { '*:max-w-28 ': !isCentralized },
+              { '*:max-w-36 *:lg:max-w-56': isCentralized }
+            ]"
+            v-html="logo.imageSrc"
+          ></span>
         </div>
       </div>
     </div>
@@ -29,25 +48,20 @@
 </template>
 
 <script setup>
-defineProps({
-  isCentralized: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  title: {
-    type: String,
-    required: false
-  },
-  logos: {
-    type: Array,
-    required: true,
-  },
-  size: {
-    type: String,
-    required: false,
-    options: ["small", "default", "large"],
-    default: "default"
-  }
-})
+  import Overline from '../overline'
+  defineProps({
+    isCentralized: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    logos: {
+      type: Array,
+      required: true
+    }
+  })
 </script>