From df42b66bb1916273dd659fa316d6272d028ec42f Mon Sep 17 00:00:00 2001
From: Zh3nyaZh3nya <129783207+Zh3nyaZh3nya@users.noreply.github.com>
Date: Wed, 4 Oct 2023 17:32:50 +0600
Subject: [PATCH 1/2] added file downloads

---
 src/module.ts                                 |  5 +++
 src/runtime/components/Pages/testVuetify.vue  | 22 ++++++++-----
 .../components/Parts/files/downloadFiles.vue  | 33 +++++++++++++++++++
 3 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 src/runtime/components/Parts/files/downloadFiles.vue

diff --git a/src/module.ts b/src/module.ts
index 277d722..bc58f68 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -46,5 +46,10 @@ export default defineNuxtModule<ModuleOptions>({
       name: 'News',
       filePath: resolver.resolve('runtime/components/Parts/News.vue')
     })
+
+    addComponent({
+      name: 'downloadFiles',
+      filePath: resolver.resolve('runtime/components/Parts/files/downloadFiles.vue')
+    })
   }
 })
diff --git a/src/runtime/components/Pages/testVuetify.vue b/src/runtime/components/Pages/testVuetify.vue
index 20e172c..51f502e 100644
--- a/src/runtime/components/Pages/testVuetify.vue
+++ b/src/runtime/components/Pages/testVuetify.vue
@@ -22,15 +22,18 @@
 <!--          <v-btn class="mt-4">press me to ripple</v-btn>-->
 <!--        </v-sheet>-->
 <!--      </v-container>-->
-      <News
-        :cards="cards"
-        :settingsButton="settingsButton"
-        :settingsCol="settingsCol"
-      >
-        <template v-slot:buttonNews>
-          <v-btn>Все новости</v-btn>
-        </template>
-      </News>
+<!--      <News-->
+<!--        :cards="cards"-->
+<!--        :settingsButton="settingsButton"-->
+<!--        :settingsCol="settingsCol"-->
+<!--      >-->
+<!--        <template v-slot:buttonNews>-->
+<!--          <v-btn>Все новости</v-btn>-->
+<!--        </template>-->
+<!--      </News>-->
+      <downloadFiles
+        :title="'О нас'"
+        :files="[{title: 'Политика обработки персональных данных ',download: '../Parts/Card.vue',img: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',alt: '',date: '20.02.22'}]"/>
     </v-main>
 
     <v-footer app elevation="5">
@@ -53,6 +56,7 @@ import Card from "../Parts/Card.vue"
 import footerOne from "../Parts/footer/footer.vue";
 import HeaderOne from '../Parts/header/HeaderOne.vue'
 import partsNews from "../Parts/News.vue";
+import downloadFiles from "../Parts/files/downloadFiles.vue"
 const showDrawer = ref(false);
 
 
diff --git a/src/runtime/components/Parts/files/downloadFiles.vue b/src/runtime/components/Parts/files/downloadFiles.vue
new file mode 100644
index 0000000..6e8e38f
--- /dev/null
+++ b/src/runtime/components/Parts/files/downloadFiles.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-container>
+    <h2 class="d-flex text-primary mb-6" :class="`justify-${positionTitle}`">{{ title }}</h2>
+    <div v-for="(file, index) in files" :key="`file-${index}`" class="d-flex align-center" @click="downloadFile(file)" style="cursor: pointer">
+      <v-img max-width="60" cover :src="file.img" class="mr-4" />
+      <div>
+        <p class="text-18 text-black mb-1">{{ file.title }}</p>
+        <p class="text-body-2 text-primary-gray">{{ getFileExtension(file.download) }}, {{ file.date }}</p>
+      </div>
+    </div>
+    <slot name="button"></slot>
+  </v-container>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String, default: 'О нас' },
+  positionTitle: { type: String, default: 'center'},
+  files: { type: Array, default: () => [] }
+})
+
+const downloadFile = (file) => {
+  const link = document.createElement('a');
+  link.href = file.url;
+  link.download = file.download;
+  link.click();
+};
+
+const getFileExtension = (fileName) => {
+  return fileName.split('.').pop().toUpperCase();
+};
+
+</script>

From 93209c086458d3fe8fc5abb0ab06eb13ec85cebf Mon Sep 17 00:00:00 2001
From: Zh3nyaZh3nya <129783207+Zh3nyaZh3nya@users.noreply.github.com>
Date: Fri, 20 Oct 2023 15:37:28 +0600
Subject: [PATCH 2/2] added auto image selection based on the file extension,
 storybook docs

---
 playground/public/exel.svg                    |  5 ++
 playground/public/img.svg                     |  6 +++
 playground/public/mp3-4.svg                   |  5 ++
 playground/public/pdf.svg                     |  5 ++
 playground/public/word.svg                    |  5 ++
 playground/public/zip.svg                     | 21 ++++++++
 src/runtime/components/Pages/testVuetify.vue  |  6 ++-
 .../components/Parts/files/downloadFiles.vue  | 40 ++++++++++++--
 src/stories/downloadFiles.stories.js          | 52 +++++++++++++++++++
 9 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 playground/public/exel.svg
 create mode 100644 playground/public/img.svg
 create mode 100644 playground/public/mp3-4.svg
 create mode 100644 playground/public/pdf.svg
 create mode 100644 playground/public/word.svg
 create mode 100644 playground/public/zip.svg
 create mode 100644 src/stories/downloadFiles.stories.js

diff --git a/playground/public/exel.svg b/playground/public/exel.svg
new file mode 100644
index 0000000..f4dc7ee
--- /dev/null
+++ b/playground/public/exel.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.332 0L25.6654 9.33333V24.7333C25.6654 26.5375 24.2028 28 22.3987 28H5.5987C3.79457 28 2.33203 26.5375 2.33203 24.7333V3.26667C2.33203 1.46254 3.79457 0 5.5987 0H16.332Z" fill="#4DD138"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.668 9.33398H19.7663C17.9622 9.33398 16.3346 7.70646 16.3346 5.90233V0.00065136L25.668 9.33398Z" fill="white" fill-opacity="0.4"/>
+<path d="M9.90158 20L13.2056 15.4528V16.5504L10.0584 12.16H11.7048L14.0456 15.408L13.3736 15.4192L15.692 12.16H17.2712L14.1464 16.472V15.4192L17.4728 20H15.7928L13.3288 16.5504H13.9896L11.5592 20H9.90158Z" fill="white"/>
+</svg>
diff --git a/playground/public/img.svg b/playground/public/img.svg
new file mode 100644
index 0000000..6b78749
--- /dev/null
+++ b/playground/public/img.svg
@@ -0,0 +1,6 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.332 0L25.6654 9.33333V24.7333C25.6654 26.5375 24.2028 28 22.3987 28H5.5987C3.79457 28 2.33203 26.5375 2.33203 24.7333V3.26667C2.33203 1.46254 3.79457 0 5.5987 0H16.332Z" fill="#525357"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.668 9.33398H19.7663C17.9622 9.33398 16.3346 7.70646 16.3346 5.90233V0.00065136L25.668 9.33398Z" fill="white" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0376 9.74121C9.0999 9.74121 8.33984 10.5013 8.33984 11.4389C8.33984 12.3766 9.0999 13.1366 10.0376 13.1366C10.9752 13.1366 11.7353 12.3766 11.7353 11.4389C11.7353 10.5013 10.9752 9.74121 10.0376 9.74121ZM9.47166 11.4389C9.47166 11.1264 9.72505 10.873 10.0376 10.873C10.3501 10.873 10.6035 11.1264 10.6035 11.4389C10.6035 11.7514 10.3501 12.0048 10.0376 12.0048C9.72505 12.0048 9.47166 11.7514 9.47166 11.4389Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1949 13.2116L12.8175 16.4778L12.2465 15.3992C11.6677 14.306 10.197 14.1684 9.43656 15.1363L5.68995 19.9046C5.58902 20.033 5.54974 20.1922 5.5683 20.3441C5.5654 20.368 5.56388 20.3925 5.56388 20.4172C5.56388 20.7392 5.81727 21.0003 6.12979 21.0003H10.6506H10.6628H21.9751C22.1847 21.0003 22.377 20.881 22.4752 20.6903C22.5732 20.4995 22.5611 20.2685 22.4434 20.0898L17.9578 13.2787C17.3035 12.2852 15.8942 12.2507 15.1949 13.2114L15.1949 13.2116ZM16.1004 13.9113C16.3335 13.591 16.8032 13.6025 17.0213 13.9337L20.9073 19.8341H11.7888L16.1004 13.9113ZM10.3744 19.8344L12.0712 17.5033L11.253 15.9578C11.0602 15.5934 10.5699 15.5475 10.3164 15.8701L7.20179 19.8344L10.3744 19.8344Z" fill="white"/>
+</svg>
diff --git a/playground/public/mp3-4.svg b/playground/public/mp3-4.svg
new file mode 100644
index 0000000..e157ce5
--- /dev/null
+++ b/playground/public/mp3-4.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.332 0L25.6654 9.33333V24.7333C25.6654 26.5375 24.2028 28 22.3987 28H5.5987C3.79457 28 2.33203 26.5375 2.33203 24.7333V3.26667C2.33203 1.46254 3.79457 0 5.5987 0H16.332Z" fill="#525357"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.668 9.33398H19.7663C17.9622 9.33398 16.3346 7.70646 16.3346 5.90233V0.00065136L25.668 9.33398Z" fill="white" fill-opacity="0.4"/>
+<path d="M18.225 15.6103C18.525 15.7835 18.525 16.2165 18.225 16.3897L10.725 20.7198C10.425 20.893 10.05 20.6765 10.05 20.3301L10.05 11.6699C10.05 11.3235 10.425 11.107 10.725 11.2802L18.225 15.6103Z" stroke="white" stroke-width="1.1"/>
+</svg>
diff --git a/playground/public/pdf.svg b/playground/public/pdf.svg
new file mode 100644
index 0000000..b1b00b4
--- /dev/null
+++ b/playground/public/pdf.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.332 0L25.6654 9.33333V24.7333C25.6654 26.5375 24.2028 28 22.3987 28H5.5987C3.79457 28 2.33203 26.5375 2.33203 24.7333V3.26667C2.33203 1.46254 3.79457 0 5.5987 0H16.332Z" fill="#F8403B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.668 9.33398H19.7663C17.9622 9.33398 16.3346 7.70646 16.3346 5.90233V0.00065136L25.668 9.33398Z" fill="white" fill-opacity="0.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9076 14.8574C13.6567 15.3773 13.3867 15.904 13.1221 16.4075C12.8416 16.941 12.5002 17.4757 12.1275 17.9875C12.7822 17.8882 13.5042 17.797 14.2949 17.7134C14.8232 17.6576 15.3465 17.6243 15.8538 17.613C15.631 17.3382 15.4116 17.0556 15.1987 16.7696C14.7313 16.142 14.2887 15.4895 13.9075 14.8574L13.9076 14.8574ZM13.3093 13.7788C12.9939 14.4789 12.6098 15.2393 12.221 15.979C11.8141 16.7532 11.2609 17.5397 10.6725 18.2444C9.7587 18.4329 9.02802 18.6457 8.47287 18.8854C7.89819 19.1334 7.43835 19.4407 7.19128 19.8454C6.92074 20.2884 6.95447 20.7619 7.18412 21.1987C7.25481 21.3333 7.36654 21.4476 7.51748 21.5202C7.66223 21.5897 7.81135 21.6056 7.93911 21.599C8.18112 21.5867 8.42438 21.4902 8.63691 21.3799C9.07484 21.1524 9.59426 20.7515 10.1204 20.2624C10.4819 19.9263 10.8588 19.537 11.2286 19.1131C12.0977 18.9482 13.1511 18.7984 14.4062 18.6658C15.2025 18.5816 15.9719 18.5529 16.6747 18.5731C17.1336 19.0799 17.5896 19.5329 18.0159 19.8946C18.4555 20.2677 18.8989 20.575 19.3053 20.7281C19.5102 20.8052 19.7439 20.858 19.9821 20.8302C20.2396 20.8003 20.4674 20.6794 20.6299 20.4733C20.8237 20.2276 20.9568 19.9621 20.9912 19.6807C21.0268 19.3904 20.9527 19.12 20.7959 18.8862C20.5013 18.4473 19.9382 18.1666 19.3303 17.9825C18.7295 17.8007 17.9859 17.6842 17.1609 17.6353C16.777 17.1933 16.3908 16.7125 16.0208 16.2157C15.4004 15.3826 14.8383 14.5213 14.4159 13.7439C14.6239 13.2545 14.7958 12.7932 14.9076 12.3892C14.9853 12.1083 15.0392 11.8374 15.052 11.5927C15.0643 11.3569 15.0416 11.0919 14.9121 10.8631C14.7642 10.6018 14.5083 10.4426 14.1954 10.4079C13.9173 10.3768 13.6192 10.4456 13.3239 10.5578C12.7768 10.766 12.6315 11.268 12.6417 11.7028C12.6521 12.1357 12.8067 12.6487 13.0306 13.1779C13.1124 13.3712 13.2059 13.5722 13.3093 13.7788ZM13.8311 12.478C13.8698 12.3623 13.9041 12.2512 13.9333 12.1452C14.0015 11.8991 14.0379 11.6987 14.0459 11.5453C14.0498 11.4693 14.0463 11.4126 14.0398 11.3724C14.039 11.3676 14.0381 11.3633 14.0374 11.3593C13.9795 11.3628 13.8717 11.3815 13.698 11.4477L13.6969 11.4481C13.6869 11.4518 13.6861 11.4522 13.6796 11.4646C13.6668 11.4898 13.646 11.5541 13.649 11.6813C13.6536 11.8776 13.7125 12.1456 13.8311 12.478ZM18.1658 18.7045C18.3447 18.878 18.519 19.0372 18.6867 19.1796C19.0997 19.5301 19.4367 19.7468 19.6762 19.8371C19.7598 19.8686 19.8121 19.877 19.8391 19.879C19.9483 19.7356 19.9829 19.6333 19.9907 19.5697C19.9978 19.5121 19.9867 19.4613 19.9467 19.4018C19.8478 19.2543 19.5713 19.061 19.0249 18.8957C18.7727 18.8193 18.4841 18.7552 18.1658 18.7045ZM9.44464 19.5506C9.23805 19.618 9.05324 19.6871 8.88935 19.7579C8.38623 19.975 8.15363 20.1772 8.06243 20.3267C8.01507 20.4041 7.99202 20.4882 8.019 20.602C8.05596 20.587 8.1008 20.5666 8.15406 20.5389C8.47379 20.3727 8.91648 20.0416 9.4164 19.5769C9.42581 19.5682 9.43523 19.5594 9.44464 19.5506Z" fill="white"/>
+</svg>
diff --git a/playground/public/word.svg b/playground/public/word.svg
new file mode 100644
index 0000000..1506d9d
--- /dev/null
+++ b/playground/public/word.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3324 -0.000162125L25.6658 9.33317V24.7332C25.6658 26.5373 24.2032 27.9998 22.3991 27.9998H5.59909C3.79496 27.9998 2.33242 26.5373 2.33242 24.7332V3.2665C2.33242 1.46237 3.79496 -0.000162125 5.59909 -0.000162125H16.3324Z" fill="#1F92EF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.6676 9.33363H19.7659C17.9618 9.33363 16.3342 7.7061 16.3342 5.90197V0.000293732L25.6676 9.33363Z" fill="white" fill-opacity="0.4"/>
+<path d="M9.9008 20L7.3024 12.16H8.8144L11.1328 19.2496H10.3824L12.7904 12.16H14.1344L16.4752 19.2496H15.7472L18.1216 12.16H19.5104L16.912 20H15.3664L13.2272 13.6048H13.6304L11.4576 20H9.9008Z" fill="white"/>
+</svg>
diff --git a/playground/public/zip.svg b/playground/public/zip.svg
new file mode 100644
index 0000000..4cb3b14
--- /dev/null
+++ b/playground/public/zip.svg
@@ -0,0 +1,21 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 28571">
+<g id="PDF">
+<path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd" d="M16.332 0L25.6654 9.33326V24.7331C25.6654 26.5372 24.2028 27.9998 22.3987 27.9998H5.5987C3.79457 27.9998 2.33203 26.5372 2.33203 24.7331V3.26664C2.33203 1.46252 3.79457 0 5.5987 0H16.332Z" fill="#525357"/>
+<path id="Path" fill-rule="evenodd" clip-rule="evenodd" d="M25.668 9.33398H19.7663C17.9622 9.33398 16.3346 7.70647 16.3346 5.90235V0.0007267L25.668 9.33398Z" fill="white" fill-opacity="0.4"/>
+</g>
+<g id="Group">
+<path id="Vector" d="M5.60856 21.5596C5.54973 21.9797 5.78491 22.3996 6.1963 22.3996H10.6043C10.957 22.3996 11.2509 21.9795 11.1921 21.5596L10.2516 16.6596C10.1928 16.3097 9.95774 16.0996 9.66388 16.0996H7.0779C6.78404 16.0996 6.54901 16.3096 6.49017 16.6596L5.60856 21.5596ZM8.37089 18.1996C9.01747 18.1996 9.54636 18.8295 9.54636 19.5996C9.54636 20.3697 9.01747 20.9996 8.37089 20.9996C7.72431 20.9996 7.19541 20.3697 7.19541 19.5996C7.19541 18.8295 7.72431 18.1996 8.37089 18.1996Z" fill="white"/>
+<path id="Vector_2" d="M6.60938 13.2998H10.1358V14.6998H6.60938V13.2998Z" fill="white"/>
+<path id="Vector_3" d="M8.37109 11.2002H10.1343V12.6002H8.37109V11.2002Z" fill="white"/>
+<path id="Vector_4" d="M6.60938 9.7998H8.37259V11.1998H6.60938V9.7998Z" fill="white"/>
+<path id="Vector_5" d="M8.37109 8.40039H10.1343V9.80038H8.37109V8.40039Z" fill="white"/>
+<path id="Vector_6" d="M6.60938 7H8.37259V8.39999H6.60938V7Z" fill="white"/>
+<path id="Vector_7" d="M8.37109 5.59961H10.1343V6.9996H8.37109V5.59961Z" fill="white"/>
+<path id="Vector_8" d="M6.60938 4.2002H8.37259V5.60019H6.60938V4.2002Z" fill="white"/>
+<path id="Vector_9" d="M8.37109 2.7998H10.1343V4.1998H8.37109V2.7998Z" fill="white"/>
+<path id="Vector_10" d="M6.60938 1.40039H8.37259V2.80038H6.60938V1.40039Z" fill="white"/>
+<path id="Vector_11" d="M8.37109 0H10.1343V1.39999H8.37109V0Z" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/runtime/components/Pages/testVuetify.vue b/src/runtime/components/Pages/testVuetify.vue
index cd5fe2e..95550d6 100644
--- a/src/runtime/components/Pages/testVuetify.vue
+++ b/src/runtime/components/Pages/testVuetify.vue
@@ -38,7 +38,11 @@
     <v-main class="d-flex align-center">
       <downloadFiles
         :title="'О нас'"
-        :files="[{title: 'Политика обработки персональных данных ',download: '../Parts/Card.vue',img: 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg',alt: '',date: '20.02.22'}]"/>
+        :files="[
+          {title: 'Политика обработки персональных данных ', img: 'logo.svg', download: '1.png', size: '123 KB', alt: '', date: '20.02.22'},
+          {title: 'Политика обработки персональных данных ', download: '2.docx', alt: '', date: '20.02.22'}
+        ]"
+      />
     </v-main>
 
     <NuxtPage />
diff --git a/src/runtime/components/Parts/files/downloadFiles.vue b/src/runtime/components/Parts/files/downloadFiles.vue
index 6e8e38f..ada865e 100644
--- a/src/runtime/components/Parts/files/downloadFiles.vue
+++ b/src/runtime/components/Parts/files/downloadFiles.vue
@@ -1,11 +1,21 @@
 <template>
   <v-container>
     <h2 class="d-flex text-primary mb-6" :class="`justify-${positionTitle}`">{{ title }}</h2>
-    <div v-for="(file, index) in files" :key="`file-${index}`" class="d-flex align-center" @click="downloadFile(file)" style="cursor: pointer">
-      <v-img max-width="60" cover :src="file.img" class="mr-4" />
+    <div v-for="(file, index) in files" :key="`file-${index}`" class="d-flex align-center py-3" @click="downloadFile(file)" style="cursor: pointer; column-gap: 12px">
+      <v-img
+        max-width="44"
+        class="w-100"
+        cover
+        :src="file.img || fileExtensionImage[getFileExtension(file.download)]"
+        :alt="file.alt || getFileExtension(file.download)"
+      />
       <div>
-        <p class="text-18 text-black mb-1">{{ file.title }}</p>
-        <p class="text-body-2 text-primary-gray">{{ getFileExtension(file.download) }}, {{ file.date }}</p>
+        <p class="text-body-1 text-sm-18 text-black mb-1">{{ file.title }}</p>
+        <p class="text-body-2 text-primary-gray">
+          {{ getFileExtension(file.download).toUpperCase() }}<span v-if="file.size || file.date">,</span>
+          {{ file.size }}<span v-if="file.size && file.date">,</span>
+          {{ file.date }}
+        </p>
       </div>
     </div>
     <slot name="button"></slot>
@@ -19,6 +29,26 @@ const props = defineProps({
   files: { type: Array, default: () => [] }
 })
 
+const fileExtensionImage = {
+  xlsx: "/exel.svg",
+
+  zip: "/zip.svg",
+  rar: "/zip.svg",
+  '7z': "/zip.svg",
+
+  pdf: "/pdf.svg",
+  docx: "/word.svg",
+
+  mp3: "/mp3-4.svg",
+  mp4: "/mp3-4.svg",
+
+  jpg: "/img.svg",
+  jpeg: "/img.svg",
+  png: "/img.svg",
+  svg: "/img.svg",
+  webp: "/img.svg"
+}
+
 const downloadFile = (file) => {
   const link = document.createElement('a');
   link.href = file.url;
@@ -27,7 +57,7 @@ const downloadFile = (file) => {
 };
 
 const getFileExtension = (fileName) => {
-  return fileName.split('.').pop().toUpperCase();
+  return fileName.split('.').pop()
 };
 
 </script>
diff --git a/src/stories/downloadFiles.stories.js b/src/stories/downloadFiles.stories.js
new file mode 100644
index 0000000..8998b47
--- /dev/null
+++ b/src/stories/downloadFiles.stories.js
@@ -0,0 +1,52 @@
+import downloadFile from '../runtime/components/Parts/files/downloadFiles.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Parts/files/downloadFiles',
+  component: downloadFile,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'String' },
+    positionTitle: {
+      control: 'radio',
+      options: ['start', 'center', 'end']
+    },
+    files: { type: Array }
+  },
+};
+
+export const Download = {
+  render: (args) => ({
+    components: { downloadFile },
+    setup() {
+      console.log(args)
+      return { args };
+    },
+    template:`<downloadFile v-bind="args">
+      <template v-if="${'buttonSlot' in args}" v-slot:button>
+        ${args.buttonSlot}
+      </template>
+      </downloadFile>`
+  }),
+  args: {
+    title: "Наши отчеты",
+    positionTitle: 'center',
+    buttonSlot: `<v-btn size="large" class="mt-12">MEDIUM BUTTON</v-btn>`,
+    files: [
+      {title: 'Картинка указана', img: 'logo.svg', download: '15сабақ.png', size: '123 KB', alt: '', date: '20.02.22'},
+      {title: 'Картинка не указана ', download: '2.png', size: '123 KB', alt: '', date: '20.02.22'},
+      {title: 'Картинка не указана ', download: '3.mp3', size: '123 Kb', alt: ''},
+      {title: 'Картинка не указана ', download: '4.zip', date: '20.02.22', alt: ''},
+      {title: 'Картинка не указана ', download: '4.docx', alt: ''},
+      {title: 'Картинка не указана ', download: '5.xlsx', alt: ''},
+      {title: 'Картинка не указана ', download: '6.pdf', alt: ''},
+    ]
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=1%3A166&mode=dev",
+    },
+  },
+}
+