Add size animation to dots, move stories to component folder

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({});

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>

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}
+/>

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
+      <Dot
-        class="dot"
+        active={currentPageIndex === pageIndex}
-        class:current="{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>

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)

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'
+  } from '../utils/size'
-  import Dots from './Dots.svelte'
+  import Dots from '../Dots/Dots.svelte'
 
   /**
    * Enable Next/Prev arrows

src/ImageCarousel/ImageCarouselView.svelte

@@ -1,5 +1,5 @@
 <script>
-  import ImageCarousel from '../ImageCarousel.svelte'
+  import ImageCarousel from './ImageCarousel.svelte'
 
   /**
    * Enable Next/Previos arrows