beyond_canvas 0.14.0.pre → 0.15.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 413213c4a08e89d845c81df70145ba9199b3a7fcd0852b91a964062443be9a6f
-  data.tar.gz: '0495d437686458f797a597da6716ea0cd9cc717ab54a412866cad47d297ea8e8'
+  metadata.gz: d367f6132c52453a85ad880605b90ba30811ef32da9bc28dd1f685e8554c2e41
+  data.tar.gz: 91a7c9f2f15564fe0752aeed2b682f938d595b82e48df9b1148e72dbe3429b98
 SHA512:
-  metadata.gz: 9613c59e575b54a73863f15c0c1ba3465a8eb66fd70285fb9f2d5a05c932e903168323352024578843ab4b4250f38fecce589e1b731a9f323d1b5c9e58a87a3f
-  data.tar.gz: a77e782a6c1876b45dda3d5baa0b2c992f57e6f299ec7994b5a9e1530cfba8730342646038cf3aa4876e1bfe568bf9fa68fd75d877035317bb23f31c693a0112
+  metadata.gz: de56ea97d47081b565a4ba795ab8ee105ba9faf0ff6cbb6e42f852ef160b68804885714583c5d7c3090bdf720a80d53d6cc028664368a81abd1f5a8839d8df13
+  data.tar.gz: 12cd7fb3261b4fce0f620cc8179ff160ed17f62f82eae55a67e6316986b90c842dcb4ed15c8c68a54108bd4e45ff5614da3d08918c994f204e6c8a98dd9078f8

data/app/assets/images/icons/checkbox_checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="16" height="16" viewBox="0 0 24 24"><path fill="#97C344" d="M0 0v24h24V0H0zm9.6 18.4l-5.8-5.6 2-2.1 3.7 3.6L18 5.6l2.1 2.1L9.6 18.4z"></path></svg>

data/app/assets/images/icons/checkbox_unchecked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffff;" width="16" height="16" viewBox="0 0 24 24"><path fill="#c2bf9d" d="M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z"></path></svg>

data/app/assets/images/icons/radiobutton_checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="18" height="18" viewBox="0 0 24 24"><path fill="#97C344" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6zm0-15.9c-3.4 0-6.3 2.8-6.3 6.3s2.8 6.2 6.3 6.2 6.2-2.8 6.2-6.2-2.8-6.3-6.2-6.3z"></path></svg>

data/app/assets/images/icons/radiobutton_unchecked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="18" height="18" viewBox="0 0 24 24"><path fill="#c2bf9d" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path></svg>

data/app/assets/stylesheets/beyond_canvas/base.scss

@@ -1,15 +1,18 @@
 @import "bourbon";
 
+@import "settings/breakpoints";
 @import "settings/variables";
 @import "settings/reset_css";
 @import "settings/typography";
 
+@import "utilities/functions";
 @import "utilities/mixins";
 
 @import "components/actions";
 @import "components/buttons";
 @import "components/cards";
 @import "components/comments";
+@import "components/containers";
 @import "components/flash";
 @import "components/forms";
 @import "components/inputs";

data/app/assets/stylesheets/beyond_canvas/components/_containers.scss

@@ -0,0 +1,37 @@
+$columns: 2, 3, 4;
+
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  &--center {
+    justify-content: center;
+  }
+
+  &__column {
+
+    @each $column in $columns {
+
+      &--#{$column} {
+        width: 100%;
+
+        @media (min-width: $laptop) {
+          width: calc((100% - (#{$column} - 1) * #{$container-spacing}) / #{$column});
+
+          &:not(:last-child) {
+            margin-right: $container-spacing;
+          }
+        }
+
+        &:not(:last-child) {
+          margin-bottom: $container-spacing;
+
+          @media (min-width: $laptop) {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/beyond_canvas/components/_inputs.scss

@@ -1,3 +1,5 @@
+$controls: checkbox, radio;
+
 #{$all-text-inputs},
 select {
   background-color: $white;
@@ -52,11 +54,55 @@ select {
     margin-top: 1px;
   }
 
+  @each $control in $controls {
+
+    &__#{$control} {
+      display: flex;
+      align-items: center;
+
+      .input__#{$control}__control {
+        @if $control == checkbox {
+          @include size(16px);
+        } @else if $control == radio {
+          @include size(18px);
+        }
+
+        cursor: pointer;
+        margin-right: 7px;
+      }
+
+      input[type=#{$control}] + .input__#{$control}__control {
+        @if $control == checkbox {
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $checkbox-unchecked-background, '#', '%23')};' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $checkbox-unchecked-color, '#', '%23')}' d='M0 0v24h24V0H0zm21.5 21.5h-19v-19h19v19z'%3E%3C/path%3E%3C/svg%3E%0A");
+        } @else if $control == radio {
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $radio-unchecked-background, '#', '%23')};' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $radio-unchecked-color, '#', '%23')}' d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z'%3E%3C/path%3E%3C/svg%3E");
+        }
+      }
+
+      input[type=#{$control}]:checked + .input__#{$control}__control {
+        @if $control == checkbox {
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $checkbox-checked-background, '#', '%23')};' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $checkbox-checked-color, '#', '%23')}' d='M0 0v24h24V0H0zm9.6 18.4l-5.8-5.6 2-2.1 3.7 3.6L18 5.6l2.1 2.1L9.6 18.4z'%3E%3C/path%3E%3C/svg%3E%0A");
+        } @else if $control == radio {
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background: #{str-replace('' + $radio-checked-background, '#', '%23')};' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='#{str-replace('' + $radio-checked-color, '#', '%23')}' d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6zm0-15.9c-3.4 0-6.3 2.8-6.3 6.3s2.8 6.2 6.3 6.2 6.2-2.8 6.2-6.2-2.8-6.3-6.2-6.3z'%3E%3C/path%3E%3C/svg%3E");
+        }
+      }
+
+      + div .input__label {
+        line-height: 1;
+      }
+
+      + div .input__hint {
+        line-height: 1;
+        margin-top: 4px;
+      }
+    }
+  }
+
   &__file {
     display: flex;
     align-items: center;
 
-    &__label {
+    &__control {
       display: inline-block;
     }
 

data/app/assets/stylesheets/beyond_canvas/settings/_breakpoints.scss

@@ -0,0 +1,6 @@
+$mobile-s:  321px !global;
+$mobile-m:  376px !global;
+$mobile-l:  426px !global;
+$tablet:    769px !global;
+$laptop:   1025px !global;
+$laptop-l: 1441px !global;

data/app/assets/stylesheets/beyond_canvas/settings/_variables.scss

@@ -70,6 +70,12 @@ $card-separator-color: rgb(222, 222, 222) !default;
 $card-separator-spacing: 50px !global;
 $card-title-color: rgb(247, 133, 96) !default;
 
+// ************************************************************
+// Containers
+// ************************************************************
+
+$container-spacing: 30px !global;
+
 // ************************************************************
 // Labels
 // ************************************************************
@@ -84,6 +90,24 @@ $input-border-color: rgb(217, 216, 195) !default;
 $input-border-color-focus: $palette-primary !default;
 $input-errors-color: $palette-danger !default;
 
+// ************************************************************
+// Checkboxes
+// ************************************************************
+
+$checkbox-checked-color: #97C344 !default;
+$checkbox-checked-background: #ffffff !default;
+$checkbox-unchecked-color: #C2BF9D !default;
+$checkbox-unchecked-background: #ffffff !default;
+
+// ************************************************************
+// Radiobuttons
+// ************************************************************
+
+$radio-checked-color: #97C344 !default;
+$radio-checked-background: #ffffff !default;
+$radio-unchecked-color: #C2BF9D !default;
+$radio-unchecked-background: #ffffff !default;
+
 // ************************************************************
 // Hints
 // ************************************************************

data/app/assets/stylesheets/beyond_canvas/utilities/_functions.scss

@@ -0,0 +1,15 @@
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

data/app/form_builders/beyond_canvas/form_builder.rb

@@ -2,18 +2,39 @@
 
 module BeyondCanvas
   class FormBuilder < ActionView::Helpers::FormBuilder # :nodoc:
+    ############################################################################
+    # Wrappers
+    ############################################################################
+
     def field_wrapper(attribute, args, &block)
-      label = args[:label].presence || attribute.to_s.humanize
+      label = args[:label] == false ? nil : args[:label].presence || attribute.to_s.humanize
 
       errors = object.errors[attribute].join(', ') if object.respond_to?(:errors) && object.errors.include?(attribute)
 
       @template.content_tag(:div, class: 'form__row') do
         @template.content_tag(:label, label, class: 'input__label') +
-          @template.content_tag(:div, class: 'relative') do
-            block.call +
-              (@template.content_tag(:label, errors, class: 'input__error') if errors.present?)
-          end +
-          (@template.content_tag(:div, args[:hint].html_safe, class: 'input__hint') if args[:hint].present?)
+        @template.content_tag(:div, class: 'relative') do
+          block.call +
+            (@template.content_tag(:label, errors, class: 'input__error') if errors.present?)
+        end +
+        (@template.content_tag(:div, args[:hint].html_safe, class: 'input__hint') if args[:hint].present?)
+      end
+    end
+
+    def inline_wrapper(attribute, args, &block)
+      label = args[:label] == false ? nil : args[:label].presence || attribute.to_s.humanize
+
+      errors = object.errors[attribute].join(', ') if object.respond_to?(:errors) && object.errors.include?(attribute)
+
+      @template.content_tag(:div, class: 'form__row') do
+        @template.content_tag(:div, class: 'relative', style: 'display: flex; align-items: center;') do
+          block.call +
+            @template.content_tag(:div) do
+              @template.content_tag(:label, label, class: 'input__label') +
+              (@template.content_tag(:div, args[:hint].html_safe, class: 'input__hint') if args[:hint].present?)
+            end +
+            (@template.content_tag(:label, errors, class: 'input__error') if errors.present?)
+        end
       end
     end
 
@@ -25,9 +46,39 @@ module BeyondCanvas
       end
     end
 
+    def check_box(attribute, args = {})
+      inline_wrapper(attribute, args) do
+        filed_identifyer = filed_identifyer(attribute)
+
+        args.merge!(id: filed_identifyer)
+            .merge!(hidden: true)
+
+        @template.content_tag(:div, class: 'input__checkbox') do
+          super(attribute, args) +
+            @template.content_tag(:label, nil, class: 'input__checkbox__control', for: filed_identifyer)
+        end
+      end
+    end
+
+    def radio_button(attribute, value, args = {})
+      args.merge!(label: value) unless args[:label]
+
+      inline_wrapper(attribute, args) do
+        filed_identifyer = filed_identifyer(attribute)
+
+        args.merge!(id: filed_identifyer)
+            .merge!(hidden: true)
+
+        @template.content_tag(:div, class: 'input__radio') do
+          super(attribute, value, args) +
+            @template.content_tag(:label, nil, class: 'input__radio__control', for: filed_identifyer)
+        end
+      end
+    end
+
     def file_field(attribute, args = {})
       field_wrapper(attribute, args) do
-        filed_identifyer = "#{attribute}_#{(Time.now.to_f * 1000).to_i}"
+        filed_identifyer = filed_identifyer(attribute)
 
         args.merge!(id: filed_identifyer)
             .merge!(hidden: true)
@@ -39,7 +90,7 @@ module BeyondCanvas
           super(attribute, args) +
             @template.content_tag(:label,
                                   for: filed_identifyer,
-                                  class: 'input__file__label button__transparent--primary') do
+                                  class: 'input__file__control button__transparent--primary') do
               args[:data][:button_text] || 'Choose file'
             end +
             @template.content_tag(:span,
@@ -48,5 +99,11 @@ module BeyondCanvas
         end
       end
     end
+
+    private
+
+    def filed_identifyer(attribute)
+      "#{attribute}_#{DateTime.now.strftime('%Q') + rand(10_000).to_s}"
+    end
   end
 end

data/lib/beyond_canvas/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module BeyondCanvas
-  VERSION = '0.14.0.pre'
+  VERSION = '0.15.0.pre'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: beyond_canvas
 version: !ruby/object:Gem::Version
-  version: 0.14.0.pre
+  version: 0.15.0.pre
 platform: ruby
 authors:
 - Unai Abrisketa
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-19 00:00:00.000000000 Z
+date: 2020-05-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: beyond_api
@@ -169,18 +169,23 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/beyond_canvas_manifest.js
+- app/assets/images/icons/checkbox_checked.svg
+- app/assets/images/icons/checkbox_unchecked.svg
 - app/assets/images/icons/file.svg
 - app/assets/images/icons/flash_checkbox.svg
 - app/assets/images/icons/flash_close.svg
 - app/assets/images/icons/flash_error.svg
 - app/assets/images/icons/flash_info.svg
 - app/assets/images/icons/flash_warning.svg
+- app/assets/images/icons/radiobutton_checked.svg
+- app/assets/images/icons/radiobutton_unchecked.svg
 - app/assets/javascripts/beyond_canvas/base.js
 - app/assets/stylesheets/beyond_canvas/base.scss
 - app/assets/stylesheets/beyond_canvas/components/_actions.scss
 - app/assets/stylesheets/beyond_canvas/components/_buttons.scss
 - app/assets/stylesheets/beyond_canvas/components/_cards.scss
 - app/assets/stylesheets/beyond_canvas/components/_comments.scss
+- app/assets/stylesheets/beyond_canvas/components/_containers.scss
 - app/assets/stylesheets/beyond_canvas/components/_flash.scss
 - app/assets/stylesheets/beyond_canvas/components/_forms.scss
 - app/assets/stylesheets/beyond_canvas/components/_inputs.scss
@@ -195,9 +200,11 @@ files:
 - app/assets/stylesheets/beyond_canvas/components/_tables.scss
 - app/assets/stylesheets/beyond_canvas/components/_texts.scss
 - app/assets/stylesheets/beyond_canvas/mailer.scss
+- app/assets/stylesheets/beyond_canvas/settings/_breakpoints.scss
 - app/assets/stylesheets/beyond_canvas/settings/_reset_css.scss
 - app/assets/stylesheets/beyond_canvas/settings/_typography.scss
 - app/assets/stylesheets/beyond_canvas/settings/_variables.scss
+- app/assets/stylesheets/beyond_canvas/utilities/_functions.scss
 - app/assets/stylesheets/beyond_canvas/utilities/_mixins.scss
 - app/controllers/beyond_canvas/application_controller.rb
 - app/controllers/beyond_canvas/system_controller.rb