From 99f6c2d48831fe43b47aea9709d7d42a372e63a4 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 22 Jan 2021 14:54:17 +0300
Subject: [PATCH] Add size animation to dots, move stories to component folder

---
 src/Dot/Dot.stories.js                        | 13 +++++
 src/Dot/Dot.svelte                            | 54 +++++++++++++++++++
 src/Dot/DotView.svelte                        | 17 ++++++
 src/{stories => Dots}/Dots.stories.js         |  0
 src/{ => Dots}/Dots.svelte                    | 29 +++-------
 src/{stories => Dots}/DotsView.svelte         |  2 +-
 .../ImageCarousel.stories.js                  |  0
 src/{ => ImageCarousel}/ImageCarousel.svelte  |  6 +--
 .../ImageCarouselView.svelte                  |  2 +-
 9 files changed, 95 insertions(+), 28 deletions(-)
 create mode 100644 src/Dot/Dot.stories.js
 create mode 100644 src/Dot/Dot.svelte
 create mode 100644 src/Dot/DotView.svelte
 rename src/{stories => Dots}/Dots.stories.js (100%)
 rename src/{ => Dots}/Dots.svelte (61%)
 rename src/{stories => Dots}/DotsView.svelte (90%)
 rename src/{stories => ImageCarousel}/ImageCarousel.stories.js (100%)
 rename src/{ => ImageCarousel}/ImageCarousel.svelte (97%)
 rename src/{stories => ImageCarousel}/ImageCarouselView.svelte (96%)

diff --git a/src/Dot/Dot.stories.js b/src/Dot/Dot.stories.js
new file mode 100644
index 0000000..1b828d0
--- /dev/null
+++ b/src/Dot/Dot.stories.js
@@ -0,0 +1,13 @@
+import DotView from './DotView.svelte';
+
+export default {
+  title: 'Dot',
+  component: DotView
+};
+
+const Template = ({ ...args }) => ({
+  Component: DotView,
+  props: args
+});
+
+export const Primary = Template.bind({});
diff --git a/src/Dot/Dot.svelte b/src/Dot/Dot.svelte
new file mode 100644
index 0000000..edb2f48
--- /dev/null
+++ b/src/Dot/Dot.svelte
@@ -0,0 +1,54 @@
+<script>
+	import { tweened } from 'svelte/motion';
+	import { cubicInOut } from 'svelte/easing';
+
+	const size = tweened(10, {
+		duration: 100,
+		easing: cubicInOut
+	});
+
+  /**
+   * Indicates if dot is active
+   */
+  export let active = false
+
+  $: {
+    size.set(active ? 13 : 10)
+  }
+</script>
+
+<div class="main-container">
+  <div
+    class="dot"
+    class:current="{active}"
+    style="
+      height: {$size}px;
+      width: {$size}px;
+    "
+    on:click
+  ></div>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 16px;
+    width: 16px;
+  }
+  .dot {
+    background-color: #5d5d5d;
+    border-radius: 50%;
+    display: inline-block;
+    opacity: 0.5;
+    cursor: pointer;
+    transition: opacity 100ms ease;
+  }
+  .dot:hover {
+    opacity: 0.9;
+  }
+  .current {
+    opacity: 0.7;
+  }
+</style>
\ No newline at end of file
diff --git a/src/Dot/DotView.svelte b/src/Dot/DotView.svelte
new file mode 100644
index 0000000..100ea7a
--- /dev/null
+++ b/src/Dot/DotView.svelte
@@ -0,0 +1,17 @@
+<script>
+  import Dot from './Dot.svelte'
+
+  /**
+   * Indicates if dot is active
+   */
+  export let active = false
+
+  function handleDotClick() {
+    active = !active
+  }
+</script>
+
+<Dot
+  {active}
+  on:click={handleDotClick}
+/>
diff --git a/src/stories/Dots.stories.js b/src/Dots/Dots.stories.js
similarity index 100%
rename from src/stories/Dots.stories.js
rename to src/Dots/Dots.stories.js
diff --git a/src/Dots.svelte b/src/Dots/Dots.svelte
similarity index 61%
rename from src/Dots.svelte
rename to src/Dots/Dots.svelte
index c3993a1..394c75a 100644
--- a/src/Dots.svelte
+++ b/src/Dots/Dots.svelte
@@ -1,5 +1,7 @@
 <script>
   import { createEventDispatcher } from 'svelte'
+  import Dot from '../Dot/Dot.svelte'
+
   const dispatch = createEventDispatcher()
 
   /**
@@ -18,13 +20,12 @@
 </script>
 
 <div class="main-container">
-  {#each Array(pagesCount) as _, pageIndex}
+  {#each Array(pagesCount) as _, pageIndex (pageIndex)}
     <div class="dot-container">
-      <div
-        class="dot"
-        class:current="{currentPageIndex === pageIndex}"
+      <Dot
+        active={currentPageIndex === pageIndex}
         on:click={() => handleDotClick(pageIndex)}
-      ></div>
+      ></Dot>
     </div>
   {/each}  
 </div>
@@ -44,22 +45,4 @@
     align-items: center;
     justify-content: center;
   }
-  .dot {
-    height: var(--dot-size);
-    width: var(--dot-size);
-    background-color: #aaa;
-    border-radius: 50%;
-    display: inline-block;
-    opacity: 0.5;
-    margin: 3px;
-    cursor: pointer;
-  }
-  .dot:hover {
-    opacity: 0.9;
-  }
-  .current {
-    height: calc(var(--dot-size) + 3px);
-    width: calc(var(--dot-size) + 3px);
-    opacity: 0.7;
-  }
 </style>
\ No newline at end of file
diff --git a/src/stories/DotsView.svelte b/src/Dots/DotsView.svelte
similarity index 90%
rename from src/stories/DotsView.svelte
rename to src/Dots/DotsView.svelte
index 86f88e9..dd8cd7c 100644
--- a/src/stories/DotsView.svelte
+++ b/src/Dots/DotsView.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Dots from '../Dots.svelte'
+  import Dots from './Dots.svelte'
 
   /**
    * Amount of pages (amount of dots)
diff --git a/src/stories/ImageCarousel.stories.js b/src/ImageCarousel/ImageCarousel.stories.js
similarity index 100%
rename from src/stories/ImageCarousel.stories.js
rename to src/ImageCarousel/ImageCarousel.stories.js
diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel/ImageCarousel.svelte
similarity index 97%
rename from src/ImageCarousel.svelte
rename to src/ImageCarousel/ImageCarousel.svelte
index ff3ddb6..b1aec5e 100644
--- a/src/ImageCarousel.svelte
+++ b/src/ImageCarousel/ImageCarousel.svelte
@@ -2,15 +2,15 @@
   // TODO: rename image carousel to just carousel
   // TODO: seems CarouselChild component can be removed
   import { onMount } from 'svelte'
-  import { store } from './store'
+  import { store } from '../store'
   import {
     getPageIndex,
     getPagesCount,
     getSlidesToShowTail,
     getSlideSize,
     getIsNotCompletePage
-  } from './utils/size'
-  import Dots from './Dots.svelte'
+  } from '../utils/size'
+  import Dots from '../Dots/Dots.svelte'
 
   /**
    * Enable Next/Prev arrows
diff --git a/src/stories/ImageCarouselView.svelte b/src/ImageCarousel/ImageCarouselView.svelte
similarity index 96%
rename from src/stories/ImageCarouselView.svelte
rename to src/ImageCarousel/ImageCarouselView.svelte
index e8e0d2f..79f5b33 100644
--- a/src/stories/ImageCarouselView.svelte
+++ b/src/ImageCarousel/ImageCarouselView.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ImageCarousel from '../ImageCarousel.svelte'
+  import ImageCarousel from './ImageCarousel.svelte'
 
   /**
    * Enable Next/Previos arrows