feat: card composition

package.json

@@ -4,6 +4,10 @@
   "type": "module",
   "main": "./src/index.js",
   "author": "aziontech",
+  "exports": {
+    ".": "./src/index.js",
+    "./fragments": "./src/fragments.js"
+  },
   "contributors": [
     {
       "name": "Robson Junior",

src/fragments.js

@@ -0,0 +1,13 @@
+import UnorderedList from './fragments/list/unordered-list.vue';
+import CardTitle from './fragments/text/card-title.vue';
+import CardDescription from './fragments/text/card-description.vue';
+import Overline from './fragments/text/overline.vue';
+import Tile from './fragments/tile/index.vue';
+
+export {
+  UnorderedList,
+  CardTitle,
+  CardDescription,
+  Overline,
+  Tile,
+}

src/fragments/text/card-description.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="text-sm text-color-secondary"> <slot /> </p>
+</template>

src/fragments/text/card-title.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="text-base"> <slot /> </p>
+</template>

src/templates/overline/index.vue → src/fragments/text/overline.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class=" text-xs text-color-secondary font-mono uppercase leading-none tracking-widest">
+  <span class="text-xs text-color-secondary font-mono uppercase leading-none tracking-widest">
     {{ label }}
   </span>
 </template>

src/fragments/tile/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="bg-[--surface-400] rounded h-6 w-6 flex justify-center items-center">
+    <p class="text-sm"> <slot /> </p>
+  </div>
+</template>

src/index.js

@@ -3,10 +3,11 @@ import AlgoliaSearch from './templates/algolia/index.vue';
 import ArticleHero from './templates/post/hero/index.vue';
 import Button from './templates/button/index.vue';
 import ButtonBlockList from './templates/button-block-list/index.vue';
+import CardBase from './templates/card/base.vue'
+import CardBaseClickable from './templates/card/base-clickable.vue'
 import CardGridBlock from './templates/card-grid-block/index.vue';
 import CardGridList from './templates/card-grid-list/index.vue';
 import CardGridListWithLoadMore from './templates/card-grid-list/withLoadMore.vue';
-import CardProduct from "./templates/card/products.vue"
 import ContentLogoBlock from './templates/content-logo-block/index.vue';
 import ContentQuoteBlock from './templates/content-quote-block/index.vue';
 import ContentSection from "./templates/content-section-block/index.vue";
@@ -30,15 +31,13 @@ import MobileRightSidebar from './templates/header/mobile.vue';
 import NewsletterCard from './templates/newsletter/card/index.vue';
 import NewsletterSingleLine from './templates/newsletter/single-line/index.vue';
 import NewsletterWide from './templates/newsletter/wide/index.vue';
-import Overline from './templates/overline/index.vue';
 import ReadableContent from './templates/post/readable-content/index.vue';
 import Sharer from './templates/sharer-block/index.vue';
 import TabMenuSearch from './templates/tab-menu/with-search.vue';
 import TabMenuSearchLink from './templates/tab-menu/with-search-link.vue'
 import TagListBlock from './templates/tag-block-list/index.vue';
 import TitleFlexList from './templates/title-grid-list/index.vue';
 import TitleVerticalList from './templates/title-list/index.vue';
-import UnorderedList from './fragments/list/unordered-list.vue';
 
 export {
   AlgoliaDialog,
@@ -51,7 +50,8 @@ export {
   CardGridBlock,
   CardGridListWithLoadMore,
   CardGridList,
-  CardProduct,
+  CardBase,
+  CardBaseClickable,
 
   ContentLogoBlock,
   ContentQuoteBlock,
@@ -87,8 +87,6 @@ export {
   NewsletterSingleLine,
   NewsletterWide,
 
-  Overline,
-
   ReadableContent,
 
   Sharer,
@@ -98,7 +96,4 @@ export {
   TagListBlock,
   TitleFlexList,
   TitleVerticalList,
-
-  UnorderedList
 }
-

src/templates/card/base-clickable.vue

@@ -0,0 +1,51 @@
+<template>
+  <a :href="link" :title="title" class="no-underline flex group border-radius md:max-w-sm group">
+    <Card :pt="{
+      root: { class: 'w-full shadow-none bg-transparent flex flex-col rounded-md border surface-border border surface-border overflow-hidden group-hover:border-current h-full' }
+    }">
+      <template v-if="$slots.header" #header>
+        <div class="flex flex-col gap-8" :class="[
+          { 'p-4 md:p-6': spacing === 'compact' },
+          { 'p-5 md:p-8': spacing === 'base' },
+          { 'p-6 md:p-10': spacing === 'relaxed' },
+        ]">
+          <slot name="header" />
+        </div>
+      </template>
+      <template #content>
+        <template v-if="$slots.content || $slots.actions">
+          <div class="flex flex-col gap-8" :class="[
+            { 'p-4 md:p-6': spacing === 'compact' },
+            { 'p-5 md:p-8': spacing === 'base' },
+            { 'p-6 md:p-10': spacing === 'relaxed' },
+          ]">
+            <div class="flex flex-col gap-3">
+              <slot name="content" />
+            </div>
+            <template v-if="$slots.actions">
+              <div class="flex flex-col md:flex-row flex-wrap gap-2">
+                <slot name="actions" />
+              </div>
+            </template>
+          </div>
+        </template>
+        <template v-if="$slots['content-raw']">
+          <slot name="content-raw" />
+        </template>
+      </template>
+    </Card>
+  </a>
+</template>
+
+<script setup>
+import Card from "primevue/card"
+
+defineProps({
+  spacing: {
+    type: String,
+    required: false,
+    options: ['compact', 'relaxed', 'base'],
+    default: 'base'
+  },
+})
+</script>

src/templates/card/base.vue

@@ -0,0 +1,49 @@
+<template>
+  <Card :pt="{
+    root: { class: 'w-full shadow-none bg-transparent flex flex-col rounded-md border surface-border overflow-hidden h-full' }
+  }">
+    <template v-if="$slots.header" #header>
+      <div class="flex flex-col gap-8" :class="[
+          {'p-4 md:p-6' : spacing === 'compact'},
+          {'p-5 md:p-8' : spacing === 'base'},
+          {'p-6 md:p-10' : spacing === 'relaxed'},
+        ]">
+        <slot name="header" />
+      </div>
+    </template>
+    <template #content>
+      <template v-if="$slots.content || $slots.actions">
+        <div class="flex flex-col gap-8" :class="[
+          {'p-4 md:p-6' : spacing === 'compact'},
+          {'p-5 md:p-8' : spacing === 'base'},
+          {'p-6 md:p-10' : spacing === 'relaxed'},
+        ]">
+          <div class="flex flex-col gap-3">
+            <slot name="content"/>
+          </div>
+          <template v-if="$slots.actions">
+            <div class="flex flex-col md:flex-row flex-wrap gap-2">
+              <slot name="actions" />
+            </div>
+          </template>
+        </div>
+      </template>
+      <template v-if="$slots['content-raw']">
+        <slot name="content-raw" />
+      </template>
+    </template>
+  </Card>
+</template>
+
+<script setup>
+import Card from "primevue/card"
+
+defineProps({
+  spacing: {
+    type: String,
+    required: false,
+    options: ['compact', 'relaxed', 'base'],
+    default: 'base'
+  },
+})
+</script>

src/templates/content-section-block/index.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import Overline from "../../templates/overline/index.vue";
+import Overline from "../../fragments/text/overline.vue";
 
 defineProps({
   overline: {

src/templates/footer/index.vue

@@ -53,7 +53,7 @@
 <script setup>
 import AzionLogo from '../../assets/icons/azion-logo-default.vue';
 import Divider from 'primevue/divider';
-import Overline from '../overline/index.vue';
+import Overline from '../../fragments/text/overline.vue';
 import LinkIcon from '../button/link-icon.vue';
 import LinkButton from '../button/link.vue';
 

src/templates/hero-block-base/index.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-  import Overline from "../../templates/overline/index.vue"
+  import Overline from "../../fragments/text/overline.vue"
 
   defineProps({
     overline: {