Merge pull request #7 from vadimkorr/feature/#5_Add-stylish-arrows

Feature/#5 Add stylish arrows

src/Arrow/Arrow.stories.js

@@ -0,0 +1,19 @@
+import Arrow from './Arrow.svelte';
+
+export default {
+  title: 'Arrow',
+  component: Arrow,
+  argTypes: {
+    onClick: { action: 'onClick' }
+  }
+};
+
+const Template = ({ onClick, ...args }) => ({
+  Component: Arrow,
+  props: args,
+  on: {
+    click: onClick,
+  },
+});
+
+export const Primary = Template.bind({});

src/Arrow/Arrow.svelte

@@ -0,0 +1,50 @@
+<script>
+  /**
+   * Indicates direction of the arrow ('next', 'prev')
+   */
+  export let direction = 'next'
+</script>
+
+<div
+  class="circle"
+  on:click
+>
+  <i
+    class="arrow"
+    class:next={direction === 'next'}
+    class:prev={direction === 'prev'}
+  ></i>
+</div>
+
+<style>
+  :root {
+    --size: 2px
+  }
+  .circle {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: rgba(93, 93, 93, 0.5); /* #5d5d5d */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 100ms ease;
+  }
+  .circle:hover {
+    opacity: 0.9;
+  }
+  .arrow {
+    border: solid #1e1e1e;
+    border-width: 0 var(--size) var(--size) 0;
+    padding: var(--size);
+    position: relative;
+  }
+  .next {
+    transform: rotate(-45deg);
+    left: calc(var(--size) / -2);
+  }
+  .prev {
+    transform: rotate(135deg);
+    right: calc(var(--size) / -2);
+  }
+</style>

src/Dot/Dot.svelte

@@ -2,8 +2,11 @@
   import { tweened } from 'svelte/motion';
   import { cubicInOut } from 'svelte/easing';
 
-	const size = tweened(10, {
-		duration: 100,
+  const sizePx = 5
+  const sizeCurrentPx = 8
+
+  const size = tweened(sizePx, {
+    duration: 250,
     easing: cubicInOut
   });
 
@@ -13,7 +16,7 @@
   export let active = false
 
   $: {
-    size.set(active ? 13 : 10)
+    size.set(active ? sizeCurrentPx : sizePx)
   }
 </script>
 

src/ImageCarousel/ImageCarousel.stories.js

@@ -1,5 +1,6 @@
 import ImageCarouselView from './ImageCarouselView.svelte';
 import ImageCarouselViewCustomDots from './ImageCarouselViewCustomDots.svelte';
+import ImageCarouselViewCustomArrows from './ImageCarouselViewCustomArrows.svelte';
 
 export default {
   title: 'ImageCarousel',
@@ -10,13 +11,17 @@ const Template = ({ ...args }) => ({
   Component: ImageCarouselView,
   props: args
 });
+export const Primary = Template.bind({});
 
 const TemplateCustomDots = ({ ...args }) => ({
   Component: ImageCarouselViewCustomDots,
   props: args
 });
-
-export const Primary = Template.bind({});
-
 export const WithCustomDots = TemplateCustomDots.bind({});
 
+const TemplateCustomArrows = ({ ...args }) => ({
+  Component: ImageCarouselViewCustomArrows,
+  props: args
+});
+export const WithCustomArrows = TemplateCustomArrows.bind({});
+

src/ImageCarousel/ImageCarousel.svelte

@@ -13,6 +13,7 @@
     getIsNotCompletePage
   } from '../utils/size'
   import Dots from '../Dots/Dots.svelte'
+  import Arrow from '../Arrow/Arrow.svelte'
 
   /**
    * Enable Next/Prev arrows
@@ -139,12 +140,11 @@
 <div class="main-container">
   <div class="carousel-container">
     {#if arrows}
+      <slot name="prev" {showPrevPage}>
         <div class="side-container">
-      <span
-        class="clickable"
-        on:click={showPrevPage}
-      >&lt;</span>
+          <Arrow direction="prev" on:click={showPrevPage} />
         </div>
+      </slot>
     {/if}
     <div
       class="content-container"
@@ -161,12 +161,11 @@
       </div>
     </div>
     {#if arrows}
+      <slot name="next" {showNextPage}>
         <div class="side-container">
-      <span
-        class="clickable"
-        on:click={showNextPage}
-      >&gt;</span>
+          <Arrow direction="next" on:click={showNextPage} />
         </div>
+      </slot>
     {/if}
   </div>
   {#if dots}
@@ -209,7 +208,6 @@
     transition-property: transform;
   }
   .side-container {
-    background-color: cornflowerblue;
     height: 100%;
     padding: 5px;
     box-sizing: border-box;
@@ -217,7 +215,4 @@
     align-items: center;
     justify-content: center;
   }
-  .clickable {
-    cursor: pointer;
-  }
 </style>

src/ImageCarousel/ImageCarouselViewCustomArrows.svelte

@@ -0,0 +1,133 @@
+<script>
+  import ImageCarousel from './ImageCarousel.svelte'
+
+  /**
+   * Enable Next/Previos arrows
+   */
+  export let arrows = true;
+  
+  /**
+   * Infinite looping
+   */
+  export let infinite = true;
+
+  /**
+   * Number of slides to show at a time
+   */
+  export let slidesToShow = 1;
+
+  /**
+   * Page to start on
+   */
+  export let initialPage = 1
+
+  /**
+   * Transition speed (ms)
+   */
+  export let speed = 500
+
+  /**
+   * Enables auto play of slides
+   */
+  export let autoplay = false
+
+  /**
+   * Auto play change interval
+   */
+  export let autoplaySpeed = 3000
+
+  /**
+   * Auto play change direction ('next', 'prev')
+   */
+  export let autoplayDirection = 'next'
+
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
+  function onPageChange(event, showPage) {
+    showPage(event.target.value)
+  }
+
+  const colors = [
+    '#e5f9f0',
+    '#ccf3e2',
+    '#b2edd3',
+    '#99e7c5',
+    '#7fe1b7',
+    '#66dba8',
+    '#4cd59a',
+    '#32cf8b',
+    '#19c97d',
+    '#00c36f'
+  ]
+</script>
+
+<div class="main-container">
+  <ImageCarousel
+    {arrows}
+    {infinite}
+    {slidesToShow}
+    {initialPage}
+    {speed}
+    {autoplay}
+    {autoplaySpeed}
+    {autoplayDirection}
+    {dots}
+    let:showPrevPage
+    let:showNextPage
+  >
+    {#each colors as color (color)}
+      <div
+        class="color-container"
+        style="background-color: {color};"
+      >
+        <p>{color}</p>
+      </div>
+    {/each}
+    <div slot="prev" class="arrow-container">
+      <div class="arrow" on:click={showPrevPage}>
+        <span>&lt;&lt;&lt;</span>
+      </div>
+    </div>
+    <div slot="next" class="arrow-container">
+      <div class="arrow" on:click={showNextPage}>
+        <span>&gt;&gt;&gt;</span>
+      </div>
+    </div>
+  </ImageCarousel>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+  .color-container {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .color-container > p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    font-size: 18px;
+  }
+
+  .arrow-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+  }
+  .arrow {
+    background-color: darkgray;
+    border-radius: 5px;
+    padding: 5px;
+    font-weight: bold;
+    cursor: pointer;
+    user-select: none;
+  }
+</style>