From 14bd1db5c1dbe12b76066d6829c0b4a1e7590845 Mon Sep 17 00:00:00 2001
From: Robson Junior <robson.ga.junior@gmail.com>
Date: Wed, 2 Oct 2024 10:16:04 -0300
Subject: [PATCH] feat: Available reused SectionCardCarousel

---
 .../sections/section-card-carousel.stories.js | 174 +++++++-----------
 .../SectionCardCarousel.d.ts                  |  60 ++++++
 .../SectionCardCarousel.vue                   |  67 +++++++
 .../sectioncardcarousel/package.json          |   7 +
 .../sectioncardcarousel.js                    |   2 +
 5 files changed, 205 insertions(+), 105 deletions(-)
 create mode 100644 src/templates/sectioncardcarousel/SectionCardCarousel.d.ts
 create mode 100644 src/templates/sectioncardcarousel/SectionCardCarousel.vue
 create mode 100644 src/templates/sectioncardcarousel/package.json
 create mode 100644 src/templates/sectioncardcarousel/sectioncardcarousel.js

diff --git a/src/stories/templates/sections/section-card-carousel.stories.js b/src/stories/templates/sections/section-card-carousel.stories.js
index 43c0b68f..8ac85d77 100644
--- a/src/stories/templates/sections/section-card-carousel.stories.js
+++ b/src/stories/templates/sections/section-card-carousel.stories.js
@@ -1,33 +1,9 @@
-
-import ContentSection from '../../../templates/contentsection'
-import LinkButton from "../../../templates/linkbutton"
-import Carousel from 'primevue/carousel'
-import CardBase from '../../../templates/cardbase'
-import CardTitle from '../../../templates/cardtitle'
-import CardDescription from '../../../templates/carddescription'
 import Container from '../../../templates/container'
+import SectionCardCarousel from '../../../templates/sectioncardcarousel'
 import Rules from '../../rules'
 
-
-export default {
-  title: 'Blocks/Sections/section-card-carousel',
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-### Content rules
-${Rules.section.overline}
-${Rules.section.title}
-${Rules.section.cards}
-        `,
-      },
-    },
-  },
-}
-
 const MOCK = {
-  responsiveOptions: [
+  "responsiveOptions": [
     {
       breakpoint: '1400px',
       numVisible: 3,
@@ -55,110 +31,98 @@ const MOCK = {
     {
       "title": "Engineering",
       "description": "Improve your skills while building the future of computing and delivering mission-critical services to global customers.",
-      "buttons": [
-        {
-          "link": "/en/careers/jobs/?area=Engineering",
-          "label": "See jobs"
-        }
-      ]
+      "link": "/en/careers/jobs/?area=Engineering",
+      "action": {
+        "label": "See jobs"
+      }
     },
     {
       "title": "Revenue",
       "description": "Create amazing stories with global customers.",
-      "buttons": [
-        {
-          "link": "/en/careers/jobs/?area=Revenue",
-          "label": "See jobs"
-        }
-      ]
+      "link": "/en/careers/jobs/?area=Revenue",
+      "action": {
+        "label": "See jobs"
+      }
     },
     {
       "title": "Products",
       "description": "Build products to power the hyper-connected economy while improving methodologies and strategies.",
-      "buttons": [
-        {
-          "link": "/en/careers/jobs/?area=Products",
-          "label": "See jobs"
-        }
-      ]
+      "link": "/en/careers/jobs/?area=Products",
+      "action": {
+        "label": "See jobs"
+      }
     },
     {
       "title": "Operations",
       "description": "Drive our business initiatives to successful outcomes on a global scale.",
-      "buttons": [
-        {
-          "link": "/en/careers/jobs/?area=Operations",
-          "label": "See jobs"
-        }
-      ]
+      "link": "/en/careers/jobs/?area=Operations",
+      "action": {
+        "label": "See jobs"
+      }
     },
     {
       "title": "Security",
       "description": "Help us secure our applications, infrastructure, networks, devices, and data.",
-      "buttons": [
-        {
-          "link": "/en/careers/jobs/?area=Security",
-          "label": "See jobs"
-        }
-      ]
+      "link": "/en/careers/jobs/?area=Security",
+      "action": {
+        "label": "See jobs"
+      }
     },
     {
       "title": "DevEx",
       "description": "Ensure a great developer experience with our products",
-      "buttons": [
-        {
-          "link": "/en/careers/jobs/?area=Developer+Experience",
-          "label": "See jobs"
-        }
-      ]
+      "link": "/en/careers/jobs/?area=Developer+Experience",
+      "action": {
+        "label": "See jobs"
+      }
     }
   ]
 }
 
-const template = `
-<Container class="surface-ground">
-  <ContentSection :title="args.title" :overline="args.overline" position="center" titleTag="h2" isContentCentralized>
-    <template #main>
-      <Carousel :value="args.cards" :numVisible="4" :numScroll="1" :circular="true" :autoplayInterval="5000"
-        :responsiveOptions="args.responsiveOptions" :showIndicators="false">
-        <template #item="slotProps">
-          <div class="px-3 h-full">
-            <CardBase :spacing="args.sspacing" grid>
-              <template #content>
-                <CardTitle>{{ slotProps.data.title }}</CardTitle>
-                <template v-if="slotProps.data.description">
-                  <CardDescription> {{ slotProps.data.description }} </CardDescription>
-                </template>
-              </template>
-              <template #actions>
-                <template v-for="({ label, link }) in slotProps.data.buttons">
-                  <LinkButton :label="label" :link="link" outlined />
-                </template>
-              </template>
-            </CardBase>
-          </div>
-        </template>
-      </Carousel>
-    </template>
-  </ContentSection>
-</Container>`
-
-const Template = (args) => ({
-  components: { ContentSection, Carousel, CardBase, CardTitle, CardDescription, LinkButton, Container },
-  setup() {
-    return { args }
-  },
-  template: template
-})
+const config= (args) => {
+  return {
+    components: {
+      Container,
+      SectionCardCarousel
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Container class="surface-ground">
+        <SectionCardCarousel v-bind="args" />
+      </Container>
+    `
+  }
+}
 
+const Template = (args) => (config(args))
 export const Default = Template.bind({})
 Default.args = MOCK
 
-Default.parameters = {
-  docs: {
-    description: {
-      story: ''
-    },
-    source: { code: template }
-  },
-};
+// Default.parameters = {
+//   docs: {
+//     description: {
+//       story: ''
+//     },
+//     source: { code: template }
+//   },
+// };
+
+export default {
+  title: 'Blocks/Sections/section-card-carousel',
+  component: SectionCardCarousel,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.section.overline}
+${Rules.section.title}
+${Rules.section.cards}
+        `
+      }
+    }
+  }
+}
diff --git a/src/templates/sectioncardcarousel/SectionCardCarousel.d.ts b/src/templates/sectioncardcarousel/SectionCardCarousel.d.ts
new file mode 100644
index 00000000..f319ac57
--- /dev/null
+++ b/src/templates/sectioncardcarousel/SectionCardCarousel.d.ts
@@ -0,0 +1,60 @@
+/**
+ *
+ * SectionCardCarousel
+ *
+ *
+ * @module `sectioncardcarousel`
+ */
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+// type BigNumbers = {
+//   justify: "center" | "start"
+//   items: Array<{
+//     icon: string,
+//     title: string,
+//     description: string
+//    }>
+// }
+
+/**
+ * Defines valid properties in SectionCardCarousel component.
+ */
+export interface SSectionCardCarouselProps {
+  // data: BigNumbers;
+  // title: string;
+  // overline: string;
+}
+
+/**
+ * Defines valid slots in SSectionCardCarousel component.
+ */
+export interface SSectionCardCarouselSlots {
+  /**
+   * Content can easily be customized with the default slot instead of using the built-in modes.
+   */
+  default(): VNode[];
+}
+
+/**
+ * Defines valid emits in SSectionCardCarousel component.
+ */
+export interface SSectionCardCarouselEmits {
+  /**
+   * Triggered when an error occurs
+   */
+  error(event: Event): void;
+}
+
+/**
+ * @group Component
+ */
+declare class SSectionCardCarousel extends ClassComponent<SSectionCardCarouselProps, SSectionCardCarouselSlots, SSectionCardCarouselEmits> { }
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    SSectionCardCarousel: GlobalComponentConstructor<SSectionCardCarousel>;
+  }
+}
+
+export default SSectionCardCarousel;
diff --git a/src/templates/sectioncardcarousel/SectionCardCarousel.vue b/src/templates/sectioncardcarousel/SectionCardCarousel.vue
new file mode 100644
index 00000000..f59cc146
--- /dev/null
+++ b/src/templates/sectioncardcarousel/SectionCardCarousel.vue
@@ -0,0 +1,67 @@
+<template>
+  <ContentSection
+    :title="title"
+    :overline="overline"
+    position="center"
+    titleTag="h2"
+    isContentCentralized
+  >
+    <template #main>
+      <Carousel
+        :value="cards"
+        :numVisible="4"
+        :numScroll="1"
+        :circular="true"
+        :autoplayInterval="5000"
+        :responsiveOptions="responsiveOptions"
+        :showIndicators="false"
+      >
+        <template #item="slotProps">
+          <div class="px-3 h-full">
+            <CardBaseClickable
+              grid
+              :spacing="spacing"
+              :link="slotProps.data.link"
+              :action="slotProps.data.action"
+            >
+              <template #content>
+                <CardTitle>
+                  {{ slotProps.data.title }}
+                </CardTitle>
+                <template v-if="slotProps.data.description">
+                  <CardDescription>
+                    {{ slotProps.data.description }}
+                  </CardDescription>
+                </template>
+              </template>
+            </CardBaseClickable>
+          </div>
+        </template>
+      </Carousel>
+    </template>
+  </ContentSection>
+</template>
+
+<script setup>
+  import Carousel from 'primevue/carousel'
+  import ContentSection from '../contentsection'
+  import CardBaseClickable from '../cardbaseclickable'
+  import CardTitle from '../cardtitle'
+  import CardDescription from '../carddescription'
+
+  defineProps({
+    overline: {
+      type: String
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    cards: {
+      type: Array
+    },
+    responsiveOptions: {
+      type: Array
+    }
+  })
+</script>
diff --git a/src/templates/sectioncardcarousel/package.json b/src/templates/sectioncardcarousel/package.json
new file mode 100644
index 00000000..bb1c3c51
--- /dev/null
+++ b/src/templates/sectioncardcarousel/package.json
@@ -0,0 +1,7 @@
+{
+  "main": "./sectioncardcarousel.js",
+  "types": "./SectionCardCarousel.d.ts",
+  "browser": {
+    "./sfc": "./SectionCardCarousel.vue"
+  }
+}
diff --git a/src/templates/sectioncardcarousel/sectioncardcarousel.js b/src/templates/sectioncardcarousel/sectioncardcarousel.js
new file mode 100644
index 00000000..b4565ab5
--- /dev/null
+++ b/src/templates/sectioncardcarousel/sectioncardcarousel.js
@@ -0,0 +1,2 @@
+import SectionCardCarousel from './SectionCardCarousel.vue';
+export default SectionCardCarousel;