Add button component (twig) (#188)

* Add button component

* Replace old buttons with the new ones

* Update icons and border radius

* Update add page button

* Set size small to add page btn

* Update button indentation

* Cleanup

* icons and button component updated

* upd secondary colour, page button call

* Update small button padding right

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

src/backend/views/components/button.twig

@@ -0,0 +1,37 @@
+{#
+  Reusable button component.
+  Available props:
+    - label
+    - icon
+    - name
+    - style: primary, secondary or warning
+    - size: small, default
+    - url: URL to navigate in case if button is the navigation link
+    - class: additional class for the button
+
+  Usage example:
+    {% include 'components/button.twig' with {label: 'Label', icon: 'check', style: 'secondary', size: 'default'} %}
+#}
+
+{% set mainClass = 'docs-button' %}
+
+
+{% set tag = 'button' %}
+
+{% if url is not empty %}
+  {% set tag = 'a' %}
+{% endif %}
+
+<{{tag}}
+  {{ name is not empty ? 'name="' ~ name ~ '"': '' }}
+  class="{{ mainClass }} {{ mainClass }}--{{ style|default('primary') }} {{ mainClass }}--{{ size|default('default') }} {{ icon ? mainClass ~ '--with-icon' : '' }} {{ class ?? '' }}"
+  {{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
+>
+  {% if icon %}
+    <div class="{{mainClass}}__icon">
+      {{ svg(icon) }}
+    </div>
+  {% endif %}
+
+  {{ label }}
+</{{tag}}>

src/backend/views/components/header.twig

@@ -5,15 +5,12 @@
   <ul class="docs-header__menu">
     {% if isAuthorized == true %}
       <li class="docs-header__menu-add">
-          <a class="docs-header__button" href="/page/new">
-            {{ svg('plus') }}
-            Add Page
-          </a>
+        {% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small', url: '/page/new'} %}
       </li>
     {% endif %}
     {% for option in config.menu %}
       <li>
-        <a
+        <a class="docs-header__menu-link"
           {% if option.uri %}
             href="{{ option.uri }}"
           {% else %}

src/backend/views/pages/form.twig

@@ -2,7 +2,7 @@
 
 {% block body %}
   <style>
-    .docs-header__button {
+    .docs-header__menu-add {
       visibility: hidden;
     }
   </style>
@@ -56,12 +56,13 @@
     <div class="writing-editor">
       <div id="editorjs"></div>
     </div>
-    <div class="writing-buttons">
-      <span class="writing-header__save" name="js-submit-save">Save</span>
 
+    <div class="writing-buttons">
+      {% include 'components/button.twig' with {label: 'Save changes', name: 'js-submit-save', icon: 'check'} %}
       {% if page._id is not empty %}
-        <span class="writing-buttons__remove" name="js-submit-remove">Remove</span>
+          {% include 'components/button.twig' with {label: 'Delete doc', name: 'js-submit-remove', icon: 'trash', style: 'warning'} %}
       {% endif %}
     </div>
+
   </section>
 {% endblock %}

src/backend/views/pages/page.twig

@@ -18,12 +18,10 @@
       {% endif %}
       <time class="page__header-time">
         Last edit {{ (page.body.time / 1000)  | date("M d Y") }}
-        {% if isAuthorized == true %}
-          <a href="/page/edit/{{ page._id }}" class="page__header-button">
-            Edit
-          </a>
-        {% endif %}
       </time>
+      {% if isAuthorized == true %}
+        {% include 'components/button.twig' with {label: 'Edit', icon: 'pencil', size: 'small', url: '/page/edit/' ~ page._id, class: 'page__header-button'} %}
+      {% endif %}
     </header>
     <h1 class="page__title">
       {{ page.title }}