From f4b5ccd471a6d1dc02cf6e4f2b34a94689bd50c8 Mon Sep 17 00:00:00 2001
From: Sven <sven@nimiq.com>
Date: Sun, 26 Jul 2020 21:29:32 +0200
Subject: [PATCH 1/3] Nimiq button: small, big, arrow, back

---
 src/components/NimiqButton.vue | 117 +++++++++++++++++++++++++++++++++
 src/stories/index.stories.js   |  21 ++++++
 2 files changed, 138 insertions(+)
 create mode 100644 src/components/NimiqButton.vue

diff --git a/src/components/NimiqButton.vue b/src/components/NimiqButton.vue
new file mode 100644
index 00000000..c50dbd5a
--- /dev/null
+++ b/src/components/NimiqButton.vue
@@ -0,0 +1,117 @@
+<template>
+  <a
+    :href="link ? link : null"
+    :class="[color, {
+        'nq-button': !small,
+        'big-label': !small,
+        'nq-button-s': small && color === 'gray',
+        'nq-button-pill': small && color != 'gray',
+        'go-back': back,
+        'has-arrow': arrow || back,
+        small, inverse, }]"
+    :target="(link && link.startsWith('http')) ? '_blank' : '_self'">
+
+    <span>{{ $t(text) }}</span>
+    <template v-if="arrow || back">
+      <template v-if="small">
+        <svg class="arrow desktop" fill="currentColor" width="11" height="9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 9">
+          <path d="M10.78,3.72,7.28.22A.75.75,0,0,0,6.22,1.28L8.44,3.5H.75A.75.75,0,0,0,.75,5H8.44L6.22,7.22a.75.75,0,0,0,0,1.06.75.75,0,0,0,1.06,0l3.5-3.5A.75.75,0,0,0,10.78,3.72Z"/>
+        </svg>
+        <svg class="arrow mobile" fill="currentColor" width="10" height="8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8">
+          <path d="M9.8,3.2l-3-3C6.5-0.1,6,0,5.7,0.3c-0.3,0.3-0.3,0.7,0,1L7.4,3H0.8C0.3,3,0,3.3,0,3.8s0.3,0.8,0.8,0.8h6.7 L5.7,6.2C5.4,6.5,5.4,7,5.7,7.3c0.3,0.3,0.8,0.3,1.1,0l3-3C10.1,4,10.1,3.5,9.8,3.2z"/>
+        </svg>
+      </template>
+
+      <template v-else>
+        <ArrowRightSmallIcon class="arrow desktop"/>
+        <svg class="arrow mobile" fill="currentColor" width="13" height="10" viewBox="0 0 13 10">
+          <path d="M12.78,4.22l-4-4A.75.75,0,0,0,7.72,1.28L10.44,4H.75a.75.75,0,0,0,0,1.5h9.69L7.72,8.22a.75.75,0,0,0,0,1.06.75.75,0,0,0,1.06,0l4-4a.75.75,0,0,0,0-1.06Z"/>
+        </svg>
+      </template>
+    </template>
+
+  </a>
+</template>
+
+<script lang="ts">
+import {Component, Mixins, Emit, Prop} from 'vue-property-decorator';
+import { ArrowRightSmallIcon } from './Icons';
+import I18nMixin from '../i18n/I18nMixin';
+
+@Component({
+    name: 'AccountList',
+    components: {
+        ArrowRightSmallIcon,
+    },
+})
+export default class NimiqButton extends Mixins(I18nMixin) {
+    @Prop(String) private text?: string;
+    @Prop(String) private link?: string;
+    @Prop({ type: String, default: 'light-blue' }) private color!: string;
+    @Prop(Boolean) private arrow?: boolean;
+    @Prop(Boolean) private small?: boolean;
+    @Prop(Boolean) private inverse?: boolean;
+    @Prop(Boolean) private back?: boolean;
+}
+</script>
+
+<style scoped>
+
+  a.has-arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  a .arrow {
+    margin-left: 8px;
+    transition: transform .4s cubic-bezier(.25,0,0,1);
+    fill: #fff;
+  }
+
+  a:hover .arrow {
+    transform: translate3D(2px,0,0);
+  }
+
+  a.go-back {
+    flex-direction: row-reverse;
+  }
+
+  a.go-back .arrow {
+    margin-left: 0;
+    margin-right: 8px;
+    transform: rotate(180deg);
+  }
+
+  a.go-back:hover .arrow {
+    transform: rotate(180deg) translate3D(2px,0,0);
+  }
+
+  .arrow.mobile {
+      display: none;
+  }
+
+  @media (max-width: 850px) {
+    .nq-button {
+      padding: 0 24px;
+      height: 50px;
+    }
+
+    .small .arrow {
+      margin-left: 6px;
+    }
+
+    .small.go-back .arrow {
+      margin-left: 0;
+      margin-right: 6px;
+    }
+
+    .arrow.desktop {
+        display: none;
+    }
+
+    .arrow.mobile {
+        display: block;
+    }
+  }
+</style>
diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index 30f65c75..187ac302 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -29,6 +29,7 @@ import LabelInput from '../components/LabelInput.vue';
 import Wallet from '../components/Wallet.vue';
 import WalletList from '../components/WalletList.vue';
 import WalletMenu from '../components/WalletMenu.vue';
+import NimiqButton from '../components/NimiqButton.vue';
 import PaymentInfoLine from '../components/PaymentInfoLine.vue';
 import QrCode from '../components/QrCode.vue';
 import QrScanner from '../components/QrScanner.vue';
@@ -45,6 +46,7 @@ import MigrationWelcome from '../components/MigrationWelcome.vue';
 import * as Icons from '../components/Icons';
 
 import '@nimiq/style/nimiq-style.min.css';
+import { getNodeMajorVersion } from 'typescript';
 
 function windowTemplate(slot) {
     return `
@@ -641,6 +643,25 @@ storiesOf('Components', module)
             template: `<CloseButton class="top-right" @click="click"/>`,
         };
     })
+    .add('NimiqButton', () => {
+        const label = text('label', 'Nimiq Button');
+        const link = text('link', '');
+        const color = select('color', ['gray', 'blue', 'light-blue', 'green', 'orange', 'red', 'gold'], 'light-blue');
+        const small = boolean('small', false);
+        const inverse = boolean('inverse', false);
+        const arrow = boolean('arrow', true);
+        const back = boolean('back', false);
+        return {
+            components: {NimiqButton},
+            methods: {
+                click: action('click'),
+            },
+            data() {
+                return { label, link, color, small, inverse, arrow, back }
+            },
+            template: `<NimiqButton :text="label" :link="link" :color="color" :small="small" :inverse="inverse" :arrow="arrow" :back="back" @click="click"/>`,
+        };
+    })
     .add('Contact (deprecated)', () => {
         const label = text('label', 'Burn address');
         const address = text('address', 'NQ07 0000 00000000 0000 0000 0000 0000 0000');

From eb2aca7c82e5808ef6a03eaa43f06c6eae8df689 Mon Sep 17 00:00:00 2001
From: Sven <sven@nimiq.com>
Date: Tue, 28 Jul 2020 12:31:45 +0200
Subject: [PATCH 2/3] switching to SASS

---
 src/components/NimiqButton.vue | 100 +++++++++++++++++++++------------
 1 file changed, 64 insertions(+), 36 deletions(-)

diff --git a/src/components/NimiqButton.vue b/src/components/NimiqButton.vue
index c50dbd5a..8e67f660 100644
--- a/src/components/NimiqButton.vue
+++ b/src/components/NimiqButton.vue
@@ -8,7 +8,7 @@
         'nq-button-pill': small && color != 'gray',
         'go-back': back,
         'has-arrow': arrow || back,
-        small, inverse, }]"
+        small, medium, inverse, }]"
     :target="(link && link.startsWith('http')) ? '_blank' : '_self'">
 
     <span>{{ $t(text) }}</span>
@@ -29,7 +29,7 @@
         </svg>
       </template>
     </template>
-
+    <ArrowRightSmallIcon v-if="arrow || back" class="arrow"/>
   </a>
 </template>
 
@@ -49,69 +49,97 @@ export default class NimiqButton extends Mixins(I18nMixin) {
     @Prop(String) private link?: string;
     @Prop({ type: String, default: 'light-blue' }) private color!: string;
     @Prop(Boolean) private arrow?: boolean;
-    @Prop(Boolean) private small?: boolean;
+    @Prop(Boolean) private small?: boolean; // "big" is default
+    @Prop(Boolean) private medium?: boolean;
     @Prop(Boolean) private inverse?: boolean;
     @Prop(Boolean) private back?: boolean;
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+a {
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
-  a.has-arrow {
+  &.has-arrow {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
 
-  a .arrow {
+  .arrow {
     margin-left: 8px;
     transition: transform .4s cubic-bezier(.25,0,0,1);
     fill: #fff;
   }
 
-  a:hover .arrow {
-    transform: translate3D(2px,0,0);
-  }
+//   &.small .nq-icon {
+//       height: 9px;
+//   }
 
-  a.go-back {
-    flex-direction: row-reverse;
-  }
+  &.medium {
+    margin: 0;
+    justify-content: center;
+    align-items: center;
 
-  a.go-back .arrow {
-    margin-left: 0;
-    margin-right: 8px;
-    transform: rotate(180deg);
-  }
+    padding: 1.5rem 0;
+    flex-grow: 1;
+    height: unset;
+    line-height: 1;
+    border-radius: 500px;
+    font-size: 2rem;
 
-  a.go-back:hover .arrow {
-    transform: rotate(180deg) translate3D(2px,0,0);
+    .nq-icon {
+        font-size: 1.75rem;
+        margin-right: 1rem;
+    }
   }
 
-  .arrow.mobile {
-      display: none;
-  }
 
-  @media (max-width: 850px) {
-    .nq-button {
-      padding: 0 24px;
-      height: 50px;
-    }
+  &:hover .arrow {
+    transform: translate3D(2px,0,0);
+  }
 
-    .small .arrow {
-      margin-left: 6px;
-    }
+  &.go-back {
+    flex-direction: row-reverse;
 
-    .small.go-back .arrow {
+    .arrow {
       margin-left: 0;
-      margin-right: 6px;
+      margin-right: 8px;
+      transform: rotate(180deg);
     }
 
-    .arrow.desktop {
-        display: none;
+    &:hover .arrow {
+      transform: rotate(180deg) translate3D(2px,0,0);
     }
+  }
+}
+
+@media (max-width: 850px) {
+  .nq-button {
+    padding: 0 24px;
+    height: 50px;
+  }
 
-    .arrow.mobile {
-        display: block;
+  .small .arrow {
+    margin-left: 6px;
+  }
+
+  .small.go-back .arrow {
+    margin-left: 0;
+    margin-right: 6px;
+  }
+
+  .arrow {
+    &.desktop {
+      display: none;
+    }
+    &.mobile {
+      display: block;
     }
   }
+}
 </style>

From 642c4bc8ccd9479c37db30f15a37c1e5823d527e Mon Sep 17 00:00:00 2001
From: Sven <sven@nimiq.com>
Date: Tue, 28 Jul 2020 14:47:48 +0200
Subject: [PATCH 3/3] back to CSS + style single icon for small and normal

---
 src/components/NimiqButton.vue | 130 ++++++++++++++-------------------
 1 file changed, 56 insertions(+), 74 deletions(-)

diff --git a/src/components/NimiqButton.vue b/src/components/NimiqButton.vue
index 8e67f660..fecf8bda 100644
--- a/src/components/NimiqButton.vue
+++ b/src/components/NimiqButton.vue
@@ -12,23 +12,6 @@
     :target="(link && link.startsWith('http')) ? '_blank' : '_self'">
 
     <span>{{ $t(text) }}</span>
-    <template v-if="arrow || back">
-      <template v-if="small">
-        <svg class="arrow desktop" fill="currentColor" width="11" height="9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 9">
-          <path d="M10.78,3.72,7.28.22A.75.75,0,0,0,6.22,1.28L8.44,3.5H.75A.75.75,0,0,0,.75,5H8.44L6.22,7.22a.75.75,0,0,0,0,1.06.75.75,0,0,0,1.06,0l3.5-3.5A.75.75,0,0,0,10.78,3.72Z"/>
-        </svg>
-        <svg class="arrow mobile" fill="currentColor" width="10" height="8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8">
-          <path d="M9.8,3.2l-3-3C6.5-0.1,6,0,5.7,0.3c-0.3,0.3-0.3,0.7,0,1L7.4,3H0.8C0.3,3,0,3.3,0,3.8s0.3,0.8,0.8,0.8h6.7 L5.7,6.2C5.4,6.5,5.4,7,5.7,7.3c0.3,0.3,0.8,0.3,1.1,0l3-3C10.1,4,10.1,3.5,9.8,3.2z"/>
-        </svg>
-      </template>
-
-      <template v-else>
-        <ArrowRightSmallIcon class="arrow desktop"/>
-        <svg class="arrow mobile" fill="currentColor" width="13" height="10" viewBox="0 0 13 10">
-          <path d="M12.78,4.22l-4-4A.75.75,0,0,0,7.72,1.28L10.44,4H.75a.75.75,0,0,0,0,1.5h9.69L7.72,8.22a.75.75,0,0,0,0,1.06.75.75,0,0,0,1.06,0l4-4a.75.75,0,0,0,0-1.06Z"/>
-        </svg>
-      </template>
-    </template>
     <ArrowRightSmallIcon v-if="arrow || back" class="arrow"/>
   </a>
 </template>
@@ -56,66 +39,66 @@ export default class NimiqButton extends Mixins(I18nMixin) {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 
-a {
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
+a.disabled {
+opacity: 0.5;
+pointer-events: none;
+}
 
-  &.has-arrow {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
+a.has-arrow {
+display: inline-flex;
+align-items: center;
+justify-content: center;
+}
 
-  .arrow {
+a .arrow {
+    font-size: 2.125rem;
     margin-left: 8px;
     transition: transform .4s cubic-bezier(.25,0,0,1);
     fill: #fff;
-  }
+}
 
-//   &.small .nq-icon {
-//       height: 9px;
-//   }
-
-  &.medium {
-    margin: 0;
-    justify-content: center;
-    align-items: center;
-
-    padding: 1.5rem 0;
-    flex-grow: 1;
-    height: unset;
-    line-height: 1;
-    border-radius: 500px;
-    font-size: 2rem;
-
-    .nq-icon {
-        font-size: 1.75rem;
-        margin-right: 1rem;
-    }
-  }
+a.small .arrow {
+  font-size: 1.4375rem;
+}
 
+a.medium {
+  margin: 0;
+  justify-content: center;
+  align-items: center;
+
+  padding: 1.5rem 0;
+  flex-grow: 1;
+  height: unset;
+  line-height: 1;
+  border-radius: 500px;
+  font-size: 2rem;
+}
 
-  &:hover .arrow {
-    transform: translate3D(2px,0,0);
-  }
+a.medium .nq-icon {
+  font-size: 1.75rem;
+  margin-right: 1rem;
+}
 
-  &.go-back {
-    flex-direction: row-reverse;
 
-    .arrow {
-      margin-left: 0;
-      margin-right: 8px;
-      transform: rotate(180deg);
-    }
+a:hover .arrow {
+  transform: translate3D(2px,0,0);
+}
 
-    &:hover .arrow {
-      transform: rotate(180deg) translate3D(2px,0,0);
-    }
-  }
+a.go-back {
+  flex-direction: row-reverse;
+
+}
+
+a.go-back .arrow {
+  margin-left: 0;
+  margin-right: 8px;
+  transform: rotate(180deg);
+}
+
+a.go-back:hover .arrow {
+  transform: rotate(180deg) translate3D(2px,0,0);
 }
 
 @media (max-width: 850px) {
@@ -124,22 +107,21 @@ a {
     height: 50px;
   }
 
-  .small .arrow {
+  a.small .arrow {
     margin-left: 6px;
   }
 
-  .small.go-back .arrow {
+  a.small.go-back .arrow {
     margin-left: 0;
     margin-right: 6px;
   }
 
-  .arrow {
-    &.desktop {
-      display: none;
-    }
-    &.mobile {
-      display: block;
-    }
+  a .arrow {
+    font-size: 1.625rem;
+  }
+
+  a.small .arrow {
+    font-size: 1.3125rem;
   }
 }
 </style>