Code cleanup

src/Arrow/Arrow.stories.js

@@ -1,7 +1,7 @@
 import Arrow from './Arrow.svelte';
 
 export default {
-  title: 'Arrow',
+  title: 'Default Components/Arrow',
   component: Arrow,
   argTypes: {
     onClick: { action: 'onClick' }

src/Arrow/Arrow.svelte

@@ -1,8 +1,9 @@
 <script>
+  import { NEXT, PREV } from '../direction'
   /**
    * Indicates direction of the arrow ('next', 'prev')
    */
-  export let direction = 'next'
+  export let direction = NEXT
 </script>
 
 <div
@@ -11,8 +12,8 @@
 >
   <i
     class="arrow"
-    class:next={direction === 'next'}
+    class:next={direction === NEXT}
-    class:prev={direction === 'prev'}
+    class:prev={direction === PREV}
   ></i>
 </div>
 

src/Carousel/Carousel.svelte

@@ -11,6 +11,7 @@
   } from '../utils/size'
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
+  import { NEXT, PREV } from '../direction'
 
   /**
    * Enable Next/Prev arrows
@@ -50,7 +51,7 @@
   /**
    * Auto play change direction ('next', 'prev')
    */
-  export let autoplayDirection = 'next'
+  export let autoplayDirection = NEXT
 
   /**
    * Current page indicator dots
@@ -61,16 +62,16 @@
   let pagesCount = 0
   let pageWidth = 0
   let offset
-  let contentContainerElement
+  let pageWindow
-  let innerContentContainerElement
+  let pagesElement
 
   const unsubscribe = store.subscribe(value => {
     currentPageIndex = value.currentPageIndex
   })
 
   function applySlideSizes() {
-    const children = innerContentContainerElement ? innerContentContainerElement.children : []
+    const children = pagesElement ? pagesElement.children : []
-    pageWidth = contentContainerElement.clientWidth
+    pageWidth = pageWindow.clientWidth
 
     const slidesCount = children.length
     pagesCount = getPagesCount({ slidesCount, slidesToShow })
@@ -87,8 +88,8 @@
 
   function applyAutoplay() {
     const autoplayDirectionFnDescription = {
-      'next': showNextPage,
+      [NEXT]: showNextPage,
-      'prev': showPrevPage
+      [PREV]: showPrevPage
     }
     let interval
     if (autoplay) {
@@ -146,28 +147,28 @@
   <div class="carousel-container">
     {#if arrows}
       <slot name="prev" {showPrevPage}>
-        <div class="side-container">
+        <div class="arrow-container">
           <Arrow direction="prev" on:click={showPrevPage} />
         </div>
       </slot>
     {/if}
     <div
       class="content-container"
-      bind:this={contentContainerElement}
+      bind:this={pageWindow}
     >
       <div
         style="
           transform: translateX({offset}px);
           transition-duration: {speed}ms;
         "
-        bind:this={innerContentContainerElement}
+        bind:this={pagesElement}
       >
         <slot></slot>
       </div>
     </div>
     {#if arrows}
       <slot name="next" {showNextPage}>
-        <div class="side-container">
+        <div class="arrow-container">
           <Arrow direction="next" on:click={showNextPage} />
         </div>
       </slot>
@@ -212,7 +213,7 @@
     transition-timing-function: ease-in-out;
     transition-property: transform;
   }
-  .side-container {
+  .arrow-container {
     height: 100%;
     padding: 5px;
     box-sizing: border-box;

src/Carousel/CarouselView.svelte

@@ -1,5 +1,6 @@
 <script>
   import Carousel from './Carousel.svelte'
+  import { NEXT } from '../direction'
 
   /**
    * Enable Next/Previos arrows
@@ -39,7 +40,7 @@
   /**
    * Auto play change direction ('next', 'prev')
    */
-  export let autoplayDirection = 'next'
+  export let autoplayDirection = NEXT
 
   /**
    * Current page indicator dots

src/Carousel/CarouselViewCustomArrows.svelte

@@ -1,5 +1,6 @@
 <script>
   import Carousel from './Carousel.svelte'
+  import { NEXT } from '../direction'
 
   /**
    * Enable Next/Previos arrows
@@ -39,7 +40,7 @@
   /**
    * Auto play change direction ('next', 'prev')
    */
-  export let autoplayDirection = 'next'
+  export let autoplayDirection = NEXT
 
   /**
    * Current page indicator dots

src/Carousel/CarouselViewCustomDots.svelte

@@ -1,5 +1,6 @@
 <script>
   import Carousel from './Carousel.svelte'
+  import { NEXT } from '../direction'
 
   /**
    * Enable Next/Previos arrows
@@ -39,7 +40,7 @@
   /**
    * Auto play change direction ('next', 'prev')
    */
-  export let autoplayDirection = 'next'
+  export let autoplayDirection = NEXT
 
   /**
    * Current page indicator dots

src/Dot/Dot.stories.js

@@ -1,7 +1,7 @@
 import DotView from './DotView.svelte';
 
 export default {
-  title: 'Dot',
+  title: 'Default Components/Dot',
   component: DotView
 };
 

src/Dots/Dots.stories.js

@@ -1,7 +1,7 @@
 import DotsView from './DotsView.svelte';
 
 export default {
-  title: 'Dots',
+  title: 'Default Components/Dots',
   component: DotsView
 };
 

src/direction.js

@@ -0,0 +1,2 @@
+export const PREV = 'prev'
+export const NEXT = 'next'

src/stories/Button.stories.js

@@ -1,29 +0,0 @@
-import Button from './Button.svelte';
-
-export default {
-  title: 'Example/Button',
-  component: Button,
-  argTypes: {
-    label: { control: 'text' },
-    primary: { control: 'boolean' },
-    backgroundColor: { control: 'color' },
-    size: {
-      control: { type: 'select', options: ['small', 'medium', 'large'] },
-    },
-    onClick: { action: 'onClick' },
-  },
-};
-
-const Template = ({ onClick, ...args }) => ({
-  Component: Button,
-  props: args,
-  on: {
-    click: onClick,
-  },
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};

src/stories/Button.svelte

@@ -1,42 +0,0 @@
-<script>
-  import './button.css';
-  import { createEventDispatcher } from 'svelte';
-  /**
-   * Is this the principal call to action on the page?
-   */
-  export let primary = false;
-
-  /**
-   * What background color to use
-   */
-  export let backgroundColor;
-  /**
-   * How large should the button be?
-   */
-  export let size = 'medium';
-  /**
-   * Button contents
-   */
-  export let label = '';
-
-  let mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-
-  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
-
-  const dispatch = createEventDispatcher();
-
-  /**
-   * Optional click handler
-   */
-  function onClick(event) {
-    dispatch('click', event);
-  }
-</script>
-
-<button
-  type="button"
-  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-  {style}
-  on:click={onClick}>
-  {label}
-</button>

src/stories/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}