From 6f608b0602b56e37570a66e5c9f01bfbee2bff3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 4 Feb 2021 23:41:41 +0100
Subject: [PATCH] add buttons

---
 docs/src/assets/icons/arrow-right.svg |  3 ++
 docs/src/components/Btn/index.vue     | 73 +++++++++++++++++++++++++++
 docs/src/components/Btn/style.scss    | 58 +++++++++++++++++++++
 docs/src/components/Icon/style.scss   |  4 +-
 docs/src/pages/index.vue              | 67 +++++++++++++-----------
 5 files changed, 173 insertions(+), 32 deletions(-)
 create mode 100644 docs/src/assets/icons/arrow-right.svg
 create mode 100644 docs/src/components/Btn/index.vue
 create mode 100644 docs/src/components/Btn/style.scss

diff --git a/docs/src/assets/icons/arrow-right.svg b/docs/src/assets/icons/arrow-right.svg
new file mode 100644
index 00000000..0a748a12
--- /dev/null
+++ b/docs/src/assets/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9393 3.93934C13.5251 3.35355 14.4749 3.35355 15.0607 3.93934L22.0607 10.9393C22.6464 11.5251 22.6464 12.4749 22.0607 13.0607L15.0607 20.0607C14.4749 20.6464 13.5251 20.6464 12.9393 20.0607C12.3536 19.4749 12.3536 18.5251 12.9393 17.9393L17.3787 13.5H3C2.17157 13.5 1.5 12.8284 1.5 12C1.5 11.1716 2.17157 10.5 3 10.5H17.3787L12.9393 6.06066C12.3536 5.47487 12.3536 4.52513 12.9393 3.93934Z" fill="black"/>
+</svg>
diff --git a/docs/src/components/Btn/index.vue b/docs/src/components/Btn/index.vue
new file mode 100644
index 00000000..b94196ff
--- /dev/null
+++ b/docs/src/components/Btn/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <component :is="tag" v-bind="props" :class="`btn btn--${type}`">
+    <icon
+      class="btn__icon"
+      :name="icon"
+      v-if="icon && iconPosition === 'before'"
+    />
+    <span class="btn__text">
+      <slot />
+    </span>
+    <icon
+      class="btn__icon"
+      :name="icon"
+      v-if="icon && iconPosition === 'after'"
+    />
+  </component>
+</template>
+
+<script>
+import Icon from '~/components/Icon'
+
+export default {
+  components: {
+    Icon,
+  },
+
+  props: {
+    to: {
+      default: null,
+      type: String,
+    },
+
+    type: {
+      default: 'primary',
+      type: String,
+    },
+
+    icon: {
+      type: String,
+      default: null,
+    },
+
+    iconPosition: {
+      type: String,
+      default: 'after',
+    },
+  },
+
+  computed: {
+    tag() {
+      if (this.to) {
+        return 'g-link'
+      }
+
+      return 'button'
+    },
+
+    props() {
+      if (this.to) {
+        return {
+          to: this.to,
+        }
+      }
+
+      return {
+        type: 'button',
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>
diff --git a/docs/src/components/Btn/style.scss b/docs/src/components/Btn/style.scss
new file mode 100644
index 00000000..c2d0494c
--- /dev/null
+++ b/docs/src/components/Btn/style.scss
@@ -0,0 +1,58 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  font-weight: 700;
+  margin-left: 0.75rem;
+  padding: 0.8rem 1rem;
+  font-size: 1rem;
+  text-align: center;
+  line-height: 1;
+  text-decoration: none;
+
+  white-space: nowrap;
+
+  &--primary {
+    background-color: $colorBlack;
+    color: $colorWhite;
+    border: 3px solid $colorBlack;
+
+    &:hover {
+      color: $colorWhite;
+    }
+  }
+
+  &--secondary {
+    background-color: $colorWhite;
+    color: $colorBlack;
+    border: 3px solid $colorBlack;
+
+    &:hover {
+      color: $colorBlack;
+    }
+  }
+
+  &--tertiary {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &--tertiary &__icon {
+    opacity: 0.5;
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &__icon {
+    &:first-child {
+      margin-right: 0.5rem;
+    }
+
+    &:last-child {
+      margin-left: 0.5rem;
+    }
+  }
+}
diff --git a/docs/src/components/Icon/style.scss b/docs/src/components/Icon/style.scss
index 45d0ef45..44a905fe 100644
--- a/docs/src/components/Icon/style.scss
+++ b/docs/src/components/Icon/style.scss
@@ -1,7 +1,7 @@
 .icon {
   display: inline-flex;
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 1rem;
+  height: 1rem;
 
   &::v-deep > svg {
     width: 100%;
diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue
index 605d81fa..146b329b 100644
--- a/docs/src/pages/index.vue
+++ b/docs/src/pages/index.vue
@@ -8,14 +8,19 @@
         <p class="is-large">
           tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open-source, has an extensive documentation, and is simply a joy to use. Join our welcoming community and start building cool things! It’s free.
         </p>
-        <p>
-          <g-link to="/overview/installation">
+        <div>
+          <btn type="primary" icon="arrow-right" to="/overview/installation">
             Get Started
-          </g-link>
-          <g-link to="https://github.com/ueberdosis/tiptap-next">
+          </btn>
+          <btn
+            type="secondary"
+            icon="github"
+            icon-position="before"
+            to="https://github.com/ueberdosis/tiptap-next"
+          >
             View on GitHub
-          </g-link>
-        </p>
+          </btn>
+        </div>
       </div>
     </app-section>
 
@@ -32,11 +37,11 @@
           <p>
             We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.
           </p>
-          <p>
-            <g-link to="/guide/styling">
+          <div>
+            <btn type="tertiary" icon="arrow-right" to="/guide/styling">
               Styling
-            </g-link>
-          </p>
+            </btn>
+          </div>
         </feature-item>
 
         <feature-item>
@@ -48,11 +53,11 @@
               React
             </g-link>, Svelte and others.
           </p>
-          <p>
-            <g-link to="/overview/installation">
+          <div>
+            <btn type="tertiary" icon="arrow-right" to="/overview/installation">
               Installation
-            </g-link>
-          </p>
+            </btn>
+          </div>
         </feature-item>
 
         <feature-item>
@@ -62,11 +67,11 @@
           <p>
             tiptap 2 is written in TypeScript. That helps us to find bugs early and gives you a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
           </p>
-          <p>
-            <g-link to="/guide/typescript">
+          <div>
+            <btn type="tertiary" icon="arrow-right" to="/guide/typescript">
               TypeScript
-            </g-link>
-          </p>
+            </btn>
+          </div>
         </feature-item>
 
         <feature-item>
@@ -78,11 +83,11 @@
               Y.js
             </g-link>. Our production-grade setup requires less than 20 lines of code.
           </p>
-          <p>
-            <g-link to="/guide/collaborative-editing">
+          <div>
+            <btn type="tertiary" icon="arrow-right" to="/guide/collaborative-editing">
               Collaborative editing
-            </g-link>
-          </p>
+            </btn>
+          </div>
         </feature-item>
 
         <feature-item>
@@ -126,11 +131,11 @@
 &lt;/body&gt;
 &lt;/html&gt;</prism>
         <!-- eslint-enable -->
-        <p>
-          <g-link to="/overview/installation">
+        <div>
+          <btn type="secondary" icon="arrow-right" to="/overview/installation">
             Learn More
-          </g-link>
-        </p>
+          </btn>
+        </div>
       </div>
     </app-section>
 
@@ -186,11 +191,11 @@
             to="https://www.scrumpy.io"
           /> -->
         </logo-list>
-        <p>
-          <g-link to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
+        <div>
+          <btn type="secondary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
             And Many More
-          </g-link>
-        </p>
+          </btn>
+        </div>
       </div>
     </app-section>
 
@@ -216,6 +221,7 @@ import FeatureItem from '@/components/FeatureItem'
 import LogoList from '@/components/LogoList'
 import LogoItem from '@/components/LogoItem'
 import Prism from '~/components/Prism'
+import Btn from '~/components/Btn'
 
 export default {
   components: {
@@ -225,6 +231,7 @@ export default {
     LogoList,
     LogoItem,
     Prism,
+    Btn,
   },
 
   metaInfo() {