Minor updates

src/components/Arrow/Arrow.stories.js

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

src/components/Arrow/Arrow.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { NEXT, PREV } from '../../direction'
+  /**
+   * Indicates direction of the arrow ('next', 'prev')
+   */
+  export let direction = NEXT
+
+  /**
+   * Indicates if button disabled
+   */
+  export let disabled = false
+</script>
+
+<div
+  class="circle"
+  class:disabled
+  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;
+    cursor: pointer;
+  }
+  .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);
+  }
+  .disabled,
+  .disabled:hover {
+    opacity: 0.5;
+  }
+</style>