Add size animation to dots, move stories to component folder

src/Dots/Dots.stories.js

@@ -0,0 +1,13 @@
+import DotsView from './DotsView.svelte';
+
+export default {
+  title: 'Dots',
+  component: DotsView
+};
+
+const Template = ({ ...args }) => ({
+  Component: DotsView,
+  props: args
+});
+
+export const Primary = Template.bind({});

src/Dots/Dots.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+  import Dot from '../Dot/Dot.svelte'
+
+  const dispatch = createEventDispatcher()
+
+  /**
+   * Amount of pages (amount of dots)
+   */
+  export let pagesCount = 1
+
+  /**
+   * Index of the current page
+   */
+  export let currentPageIndex = 0
+
+  function handleDotClick(pageIndex) {
+    dispatch('pageChange', pageIndex)
+  }
+</script>
+
+<div class="main-container">
+  {#each Array(pagesCount) as _, pageIndex (pageIndex)}
+    <div class="dot-container">
+      <Dot
+        active={currentPageIndex === pageIndex}
+        on:click={() => handleDotClick(pageIndex)}
+      ></Dot>
+    </div>
+  {/each}  
+</div>
+
+<style>
+  :root {
+    --dot-size: 10px; 
+  }
+  .main-container {
+    display: flex;
+    align-items: center;
+  }
+  .dot-container {
+    height: calc(var(--dot-size) + 10px);
+    width: calc(var(--dot-size) + 10x);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

src/Dots/DotsView.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Dots from './Dots.svelte'
+
+  /**
+   * Amount of pages (amount of dots)
+   */
+  export let pagesCount = 5
+
+  /**
+   * Index of the current page
+   */
+  export let currentPageIndex = 3
+
+  function handlePageChange(event) {
+    currentPageIndex = event.detail
+  }
+</script>
+
+<Dots
+  {pagesCount}
+  {currentPageIndex}
+  on:pageChange={handlePageChange}
+>
+</Dots>