Implements the remaining component library changes

app/app/urls.py

@@ -469,7 +469,6 @@
     re_path(r'^modal/extend_issue_deadline/?', dashboard.views.extend_issue_deadline, name='extend_issue_deadline'),
 
     # brochureware views
-    re_path(r'^sass_experiment/?', retail.views.sass_experiment, name='sass_experiment'),
     re_path(r'^homeold/?$', retail.views.index_old, name='homeold'),
     re_path(r'^home/?$', retail.views.index, name='home'),
     re_path(r'^landing/?$', retail.views.index, name='landing'),
@@ -485,6 +484,7 @@
     re_path(r'^activity/?', retail.views.activity, name='activity'),
     re_path(r'^townsquare/?', townsquare.views.town_square, name='townsquare'),
     re_path(r'^$', townsquare.views.landing_toggle, name='index'),
+    re_path(r'^styleguide/components/?', retail.views.styleguide_components, name='styleguide_components'),
     path('action/<int:offer_id>/<slug:offer_slug>/go', townsquare.views.offer_go, name='townsquare_offer_go'),
     path('action/new', townsquare.views.offer_new, name='townsquare_offer_new'),
     path(

app/assets/v2/js/base.js

@@ -154,7 +154,7 @@ $(document).ready(function() {
     $top_nav_notif.parents('.row').remove();
     localStorage['top_nav_notification_remove_' + top_nav_salt] = true;
   };
-  
+
   // display (if it holds a message and hasn't been closed) or remove #top_nav_notification
   if (top_nav_salt == 0 || localStorage['top_nav_notification_remove_' + top_nav_salt]) {
     remove_top_row();
@@ -225,32 +225,17 @@ $(document).ready(function() {
     $(event.target).parents('.faq_parent').find('.answer').toggleClass('show');
   });
 
-
-  $('body').on('click', '.accordion', event => {
-    const element = $(event.target);
-    const panel = element[0].nextElementSibling;
-
-    if (panel) {
-      if (element.hasClass('active')) {
-        panel.style.maxHeight = 0;
-        panel.style.marginBottom = 0 + 'px';
-      } else {
-        panel.style.maxHeight = panel.scrollHeight + 'px';
-        panel.style.marginBottom = 10 + 'px';
-      }
-    }
-    element.toggleClass('active');
-  });
   attach_close_button();
 });
 
+
 const attach_close_button = function() {
   $('body').delegate('.alert .closebtn', 'click', function(e) {
     $(this).parents('.alert').remove();
-    $('.alert').each(function(index) {
+    $('.alert').not('.alert-static').each(function(index) {
       if (index == 0) $(this).css('top', 0);
       else {
-        let new_top = (index * 66) + 'px';
+        let new_top = (index * 70) + 'px';
 
         $(this).css('top', new_top);
       }
@@ -277,12 +262,12 @@ const _alert = function(msg, _class, remove_after_ms) {
     };
   }
   var numAlertsAlready = $('body > .alert:visible').length;
-  var top = numAlertsAlready * 44;
+  var top = numAlertsAlready * 70;
   var id = 'msg_' + parseInt(Math.random() * 10 ** 10);
 
   var html = function() {
     return (
-      `<div id="${id}" class="alert ${_class} g-font-muli" style="top: ${top}px">
+      `<div id="${id}" class="alert alert-fixed bs-alert alert-${_class} d-flex justify-content-between align-items-center shadow-sm py-3 font-weight-semibold font-body" style="top: ${top}px">
         <div class="message">
           <div class="content">
             ${alertMessage(msg)}

app/assets/v2/js/grants/_new.js

@@ -139,10 +139,6 @@ Vue.mixin({
         vm.$set(vm.errors, 'description', 'Please enter description for the grant');
       }
 
-      if (!vm.$refs.formNewGrant.reportValidity()) {
-        return false;
-      }
-
       if (Object.keys(vm.errors).length) {
         return false; // there are errors the user must correct
       }

app/assets/v2/js/pages/quests.new.js

@@ -5,7 +5,9 @@ $(document).ready(function() {
   const question_template = $('.form-group.question:last').clone();
   const answer_template = question_template.children('span:last').clone();
 
-  let video_toggle = function(e) {
+  $('.select2').select2();
+
+  const video_toggle = function(e) {
     var is_checked = $('#video_enabled').is(':checked');
 
     if (is_checked) {
@@ -17,14 +19,8 @@ $(document).ready(function() {
   };
 
   $(document).on('click', '#video_enabled', video_toggle);
-  video_toggle();
-
-  $(document).on('form#newkudos', 'submit', function(e) {
-    // e.preventDefault();
-    // console.log($(this).formdata);
-    // alert('hi');
 
-  });
+  video_toggle();
 
   $(document).on('click', '.add_answer', function(e) {
     e.preventDefault();
@@ -37,8 +33,8 @@ $(document).ready(function() {
     var last_answer = $(this).parents('.form-group.question').children('span:last');
 
     last_answer.after(answer_template.clone());
-
   });
+
   $(document).on('click', '.new_quest_background', function(e) {
     e.preventDefault();
     $('.new_quest_background').removeClass('selected');
@@ -62,7 +58,6 @@ $(document).ready(function() {
     last_question.after(question_template.clone());
   });
 
-
   $(document).on('click', '.close_answer', function(e) {
     e.preventDefault();
     if ($(this).parents('.question').find('span').length <= 1) {
@@ -73,6 +68,7 @@ $(document).ready(function() {
 
     ele.remove();
   });
+
   $(document).on('click', '.remove', function(e) {
     e.preventDefault();
     $(this).parents('.form-group').find('.hidden').removeClass('hidden');
@@ -83,7 +79,6 @@ $(document).ready(function() {
     $(this).remove();
   });
 
-
   $(document).on('click', '.close_question', function(e) {
     e.preventDefault();
     if ($('div.question').length <= 1) {

app/assets/v2/js/pages/quests.quest.quiz_style.js

@@ -51,7 +51,7 @@ var start_quiz = async function() {
       await toggle_character_class($('#protagonist'), [ 'heal', '' ]);
       await toggle_character_class($('#enemy'), [ 'harm', '' ]);
     }
-    
+
     var question_level_seconds_to_respond = response['question']['seconds_to_respond'];
     var prefix = '(' + question_number + '/' + question_count + ') - ';
     var question = prefix + response['question']['question'];
@@ -387,5 +387,5 @@ $(document).ready(function() {
   if (document.quest) {
     start_quest();
   }
-  
-});
+
+});

app/assets/v2/js/pages/styleguide-components.js

@@ -0,0 +1,223 @@
+Vue.component('v-select', VueSelect.VueSelect);
+Vue.use(VueQuillEditor);
+
+const djangoExample = `{% load i18n static compress %}
+
+...
+
+{% compress css file example_name %}
+  <link rel="stylesheet" type="text/x-scss" href={% static "v2/scss/*.scss" %} />
+{% endcompress %}`;
+
+const buttonExample = '<button class="btn btn-primary">...</button>';
+
+const inputExample = `<label for="text" class="font-caption letter-spacing text-black-60 text-uppercase">Example <span class="badge badge-greylight text-capitalize">Required</span></label>
+
+<input id="text" name="text" v-model="form.text" class="form__input form__input-lg" maxlength="150" type="text" placeholder="Example text input" required />
+
+<div class="text-danger" v-if="!form.text">
+  This is an error message
+</div>`;
+
+const selectExample = `<label class="font-caption letter-spacing text-black-60 text-uppercase" for="">Example <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span></label>
+
+<v-select placeholder="Select option" :options="selectOptions" label="label" v-model="form.select" :reduce="option => option.name" multiple>
+  <template #search="{attributes, events}">
+    <input
+      class="vs__search"
+      :required="!form.select.length"
+      v-bind="attributes"
+      v-on="events"
+    />
+  </template>
+  <template v-slot:option="option">
+    <span class="font-weight-semibold">[[ option.label ]]</span>
+  </template>
+</v-select>
+
+<div class="text-danger" v-if="!form.select.length">
+  This is an error message
+</div>`;
+
+const radioExample = `<span class="font-caption letter-spacing text-black-60 text-uppercase" for="">Example <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span></span>
+
+<div class="form__radio option">
+  <input name="radio" v-model="form.radio" id="radio1" type="radio" value="open" val-ui="radio" required />
+  <label class="filter-label" for="radio1">Option 1</label>
+</div>
+
+<div class="form__radio option">
+  <input name="radio" v-model="form.radio" id="radio2" type="radio" value="started" val-ui="radio" required />
+  <label class="filter-label" for="radio2">Option 2</label>
+</div>
+
+<div class="text-danger" v-if="!form.radio">
+  This is an error message
+</div>`;
+
+const checkboxExample = `<span class="font-caption letter-spacing text-black-60 text-uppercase" for="">Example <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span></span>
+
+<div class="checkbox_container">
+  <input name="checkbox" v-model="form.checkbox" id="checkbox" type="checkbox" value="1" required />
+  <span class="checkbox" ></span>
+  <div class="filter-label display-inline">
+    <label for="checkbox">Option 1</label>
+  </div>
+</div>
+
+<div class="text-danger" v-if="!form.checkbox">
+  This is an error message
+</div>`;
+
+const btnRadioExample = `<span class="font-caption letter-spacing text-black-60 text-uppercase" for="">Example 2 <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span></span>
+
+<div :class="\`btn-group-toggle d-flex flex-column flex-lg-row flex-wrap \${!form.btnRadio ? 'invalid' : ''}\`">
+  <label class="btn btn-radio d-flex align-items-center justify-content-center mr-2 mb-2 font-weight-bold py-2 px-4" :class="{'active': form.btnRadio === '1'}">
+    <input type="radio" name="btn-radio" id="btn-radio-2-1" value="1" v-model="form.btnRadio" required>Option 1
+  </label>
+
+  <label class="btn btn-radio d-flex align-items-center justify-content-center mr-2 mb-2 font-weight-bold py-2 px-4" :class="{'active': form.btnRadio === '2'}">
+    <input type="radio" name="btn-radio" id="btn-radio-2-2" value="2" v-model="form.btnRadio" required>Option 2
+  </label>
+
+  <label class="btn btn-radio d-flex align-items-center justify-content-center mr-2 mb-2 font-weight-bold py-2 px-4" :class="{'active': form.btnRadio === '3'}">
+    <input type="radio" name="btn-radio" id="btn-radio-2-3" value="3" v-model="form.btnRadio" required>Option 3
+  </label>
+</div>
+
+<div class="text-danger" v-if="!form.btnRadio">
+  This is an error message
+</div>`;
+
+const btnCheckboxExample = `<span class="font-caption letter-spacing text-black-60 text-uppercase" for="">Example 2 <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span></span>
+
+<div :class="\`btn-group-toggle d-flex flex-column flex-lg-row flex-wrap \${!form.btnCheckbox.length ? 'invalid' : ''}\`">
+  <label class="btn btn-radio d-flex align-items-center justify-content-center mr-2 mb-2 font-weight-bold py-2 px-4" :class="{'active': form.btnCheckbox.includes('1')}">
+    <input type="checkbox" name="btn-checkbox2-1" id="btn-checkbox-2-1" value="1" v-model="form.btnCheckbox" required>Option 1
+  </label>
+
+  <label class="btn btn-radio d-flex align-items-center justify-content-center mr-2 mb-2 font-weight-bold py-2 px-4" :class="{'active': form.btnCheckbox.includes('2')}">
+    <input type="checkbox" name="btn-checkbox2-2" id="btn-checkbox-2-2" value="2" v-model="form.btnCheckbox" required>Option 2
+  </label>
+
+  <label class="btn btn-radio d-flex align-items-center justify-content-center mr-2 mb-2 font-weight-bold py-2 px-4" :class="{'active': form.btnCheckbox.includes('3')}">
+    <input type="checkbox" name="btn-checkbox2-3" id="btn-checkbox-2-3" value="3" v-model="form.btnCheckbox" required>Option 3
+  </label>
+</div>
+
+<div class="text-danger" v-if="!form.btnCheckbox.length">
+  This is an error message
+</div>`;
+
+const richEditorExample = `<label for="rich_editor" class="font-caption letter-spacing text-black-60 text-uppercase">Example <span class="badge badge-greylight text-capitalize">Required</span></label>
+
+<quill-editor
+  ref="quillEditorExample"
+  v-model="form.rich_editor"
+  :class="\`editor \${!form.rich_editor ? 'invalid' : ''}\`"
+  :options="editorOptionPrio"
+></quill-editor>
+
+<div class="text-danger" v-if="!form.rich_editor">
+  This is an error message
+</div>`;
+
+const alertExample = `<div class="alert alert-static bs-alert alert-primary d-flex justify-content-between align-items-center shadow-sm py-3 font-weight-semibold font-body">
+  <div class="message">
+    <div class="content">Message</div>
+  </div>
+  <span class="closebtn">×</span>
+</div>`;
+
+const alertExample2 = '_alert(msg, type, closeAfter);';
+
+const accordionExample = `<div class="accordion-group gc-accordion" id="accordion-group">
+  <h5 class="accordion collapsed" id="headingOne" data-parent="#accordion-group" data-toggle="collapse" data-target="#collapseOne" aria-controls="collapseOne">
+    <span class="accordion-title">
+      Accordion Title 1
+    </span>
+  </h5>
+  <div class="accordion-panel collapse font-subheader text-grey-400" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordion-group">
+    <p>Accordion 1 content</p>
+  </div>
+</div>`;
+
+const tabsExample = `<b-tabs content-class="mt-3" v-model="tabSelected" >
+  <b-tab :title-link-class="'nav-line'">
+    <template v-slot:title>Tab 1</template>
+    <p>Tab 1 content</p>
+  </b-tab>
+
+  <b-tab :title-link-class="'nav-line'">
+    <template v-slot:title>Tab 2</template>
+    <p>Tab 2 content</p>
+  </b-tab>
+</b-tabs>`;
+
+Vue.mixin({
+  methods: {
+    openAlert: function(type) {
+      _alert('Message', type);
+    }
+  }
+});
+
+if (document.getElementById('styleguide-components')) {
+  appFormBounty = new Vue({
+    delimiters: [ '[[', ']]' ],
+    el: '#styleguide-components',
+    components: {
+      'vue-select': 'vue-select'
+    },
+    data() {
+      return {
+        djangoExample: djangoExample,
+        buttonExample: buttonExample,
+        inputExample: inputExample,
+        selectExample: selectExample,
+        radioExample: radioExample,
+        checkboxExample: checkboxExample,
+        btnRadioExample: btnRadioExample,
+        btnCheckboxExample: btnCheckboxExample,
+        richEditorExample: richEditorExample,
+        alertExample: alertExample,
+        alertExample2: alertExample2,
+        accordionExample: accordionExample,
+        tabsExample: tabsExample,
+        selectOptions: [
+          { 'name': 'north_america', 'label': 'North America'},
+          { 'name': 'oceania', 'label': 'Oceania'},
+          { 'name': 'latin_america', 'label': 'Latin America'},
+          { 'name': 'europe', 'label': 'Europe'},
+          { 'name': 'africa', 'label': 'Africa'},
+          { 'name': 'middle_east', 'label': 'Middle East'},
+          { 'name': 'india', 'label': 'India'},
+          { 'name': 'east_asia', 'label': 'East Asia'},
+          { 'name': 'southeast_asia', 'label': 'Southeast Asia'}
+        ],
+        tabSelected: 0,
+        form: {
+          select1: [],
+          select2: [],
+          btnCheckbox: [],
+          btnCheckbox2: [],
+          rich_editor: '',
+          rich_editor2: ''
+        },
+        editorOptionPrio: {
+          modules: {
+            toolbar: [
+              [ 'bold', 'italic', 'underline' ],
+              [{ 'align': [] }],
+              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+              [ 'link', 'code-block' ],
+              ['clean']
+            ]
+          },
+          theme: 'snow',
+          placeholder: 'Example rich text-editor'
+        }
+      };
+    }
+  });
+}