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">
+        {% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small', url: '/page/new'} %}
-            {{ svg('plus') }}
-            Add Page
-          </a>
       </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 }}

src/frontend/styles/components/button.pcss

@@ -0,0 +1,83 @@
+.docs-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--height);
+  padding-left: 12px;
+  padding-right: 12px;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition-property: background-color;
+  transition-duration: 0.1s;
+  border-radius: 8px;
+
+  @supports(-webkit-mask-box-image: url('')){
+    border-radius: 0;
+    -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 4px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+  }
+
+  &--default {
+    --height: 40px;
+  }
+
+  &--small {
+    --height: 32px;
+    padding-right: 10px;
+  }
+
+  &--primary {
+    background: var(--color-button-primary);
+
+    &:hover {
+      background: var(--color-button-primary-hover);
+    }
+
+    &:active {
+      background: var(--color-button-primary-active);
+    }
+  }
+
+  &--secondary {
+    background: var(--color-button-secondary);
+
+    &:hover {
+      background: var(--color-button-secondary-hover);
+    }
+
+    &:active {
+      background: var(--color-button-secondary-active);
+    }
+  }
+
+  &--warning {
+    background: var(--color-button-warning);
+
+    &:hover {
+      background: var(--color-button-warning-hover);
+    }
+
+    &:active {
+      background: var(--color-button-warning-active);
+    }
+  }
+
+  &--with-icon {
+    padding-left: 8px;
+  }
+}

src/frontend/styles/components/header.pcss

@@ -12,9 +12,9 @@
     line-height: 40px;
   }
 
-  a {
+  &__menu-link,
+  &__logo {
     display: inline-block;
-    text-decoration: none;
   }
 
   &__logo {
@@ -55,24 +55,22 @@
       a {
         @media (--mobile) {
           font-size: 0;
-          padding: 8px;
+          padding: 0 4px;
+          margin-right: 0;
+        }
+      }
+
+      .docs-button__icon {
+        @media (--mobile) {
           margin-right: 0;
         }
       }
     }
 
-    a:not(.docs-header__button) {
+    &-link {
-      color: inherit;
-
       &:hover {
         color: var(--color-link-active);
       }
     }
   }
-
-  &__button {
-    @apply --button;
-    @apply --button-primary;
-    margin: auto 30px auto auto;
-  }
 }

src/frontend/styles/components/page.pcss

@@ -5,6 +5,7 @@
 
   &__header {
     display: flex;
+    align-items: center;
     color: var(--color-text-second);
 
     @media (--mobile) {
@@ -40,11 +41,8 @@
     }
 
     &-button {
-      @apply --button;
+      margin-left: 20px;
-      @apply --button-primary;
+      text-decoration: none;
-      padding: 5px 10px;
-      font-size: 13px;
-      margin-left: 10px;
     }
   }
 

src/frontend/styles/components/writing.pcss

@@ -31,9 +31,10 @@
 }
 
 .writing-buttons {
-  &__remove {
+  display: flex;
-    @apply --button;
+
-    @apply --button-danger;
+  button:not(:last-child) {
+    margin-right: 20px;
   }
 }
 

src/frontend/styles/main.pcss

@@ -8,6 +8,7 @@
 @import './components/page.pcss';
 @import './components/landing.pcss';
 @import './components/auth.pcss';
+@import './components/button.pcss';
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;
@@ -19,3 +20,8 @@ body {
 svg {
   fill: currentColor;
 }
+
+a {
+  text-decoration: none;
+  color: inherit
+}

src/frontend/styles/vars.pcss

@@ -3,10 +3,22 @@
   --color-text-second: #5d6068;
   --color-line-gray: #E8E8EB;
   --color-link-active: #2071cc;
-  --color-button-danger: #ff5159;
   --color-bg-light: #f8f7fa;
   --color-page-active: #ff1767;
 
+  --color-button-primary: #3389FF;
+  --color-button-primary-hover: #2E7AE6;
+  --color-button-primary-active: #296DCC;
+
+  --color-button-secondary: #717682;
+  --color-button-secondary-hover: #5D6068;
+  --color-button-secondary-active: #4B4F5B;
+
+  --color-button-warning: #EF5C5C;
+  --color-button-warning-hover: #D65151;
+  --color-button-warning-active: #BD4848;
+
+
   /**
    * Site layout sizes
    */
@@ -47,15 +59,6 @@
     }
   }
 
-  --button-danger {
-    background: var(--color-button-danger);
-    color: #fff;
-    box-shadow: none;
-
-    &:hover {
-      background: color-mod(var(--color-button-danger) blackness(+10%));
-    }
-  }
 
   --button-primary {
     background: var(--color-link-active);

src/frontend/svg/check.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.374 7.293a1 1 0 0 1 0 1.414L11.04 16.04a1 1 0 0 1-1.414 0l-3.333-3.333a1 1 0 1 1 1.414-1.414l2.626 2.626 6.627-6.626a1 1 0 0 1 1.414 0Z"/>
+</svg>

src/frontend/svg/pencil.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.917 6.75a.9.9 0 0 0-.637.264l-7.734 7.734-.477 1.75 1.75-.478 7.734-7.734a.899.899 0 0 0-.636-1.536Zm-.919-1.317a2.4 2.4 0 0 1 2.616 3.914l-7.875 7.875a.75.75 0 0 1-.333.193l-3.209.875a.75.75 0 0 1-.92-.92l.874-3.21a.75.75 0 0 1 .194-.332l7.875-7.875a2.4 2.4 0 0 1 .778-.52Z"/>
+</svg>

src/frontend/svg/plus.svg

@@ -1,3 +1,3 @@
-<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M6.44 4.64h3.7a.9.9 0 1 1 0 1.8h-3.7v3.7a.9.9 0 1 1-1.8 0v-3.7H.9a.9.9 0 0 1 0-1.8h3.74V.9a.9.9 0 0 1 1.8 0v3.74z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 5a1 1 0 0 0-1 1v5H6a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5V6a1 1 0 0 0-1-1Z"/>
 </svg>

src/frontend/svg/trash.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.75 7h-3v-.75A2.25 2.25 0 0 0 12.5 4H11a2.25 2.25 0 0 0-2.25 2.25V7h-3a.75.75 0 0 0 0 1.5h.75l.75 8.25A2.25 2.25 0 0 0 9.5 19H14a2.25 2.25 0 0 0 2.25-2.25L17 8.5h.75a.75.75 0 1 0 0-1.5Zm-7.5-.75A.75.75 0 0 1 11 5.5h1.5a.75.75 0 0 1 .75.75V7h-3v-.75Zm4.5 10.5a.75.75 0 0 1-.75.75H9.5a.75.75 0 0 1-.75-.75L8 8.5h7.5l-.75 8.25Z"/>
+</svg>