Add text-only field && make more elements optional && style changes

assets/javascripts/wizard/initializers/custom.js.es6

@@ -9,6 +9,7 @@ export default {
     const ajax = requirejs('wizard/lib/ajax').ajax;
     const StepModel = requirejs('wizard/models/step').default;
     const WizardStep = requirejs('wizard/components/wizard-step').default;
+    const WizardField = requirejs('wizard/components/wizard-field').default;
     const getUrl = requirejs('discourse-common/lib/get-url').default;
     const FieldModel = requirejs('wizard/models/wizard-field').default;
     const autocomplete = requirejs('discourse/lib/autocomplete').default;
@@ -139,6 +140,15 @@ export default {
       }
     });
 
+    WizardField.reopen({
+      inputComponentName: function() {
+        const type = this.get('field.type');
+        const id = this.get('field.id');
+        if (type === 'text-only') return false;
+        return (type === 'component') ? Ember.String.dasherize(id) : `wizard-field-${type}`;
+      }.property('field.type', 'field.id')
+    });
+
     FieldModel.reopen({
       check() {
         let valid = this.get('valid');

assets/javascripts/wizard/templates/components/wizard-field.hbs

@@ -0,0 +1,19 @@
+<label for={{field.id}}>
+  {{#if field.label}}
+    <span class='label-value'>{{field.label}}</span>
+  {{/if}}
+
+  {{#if field.description}}
+    <div class='field-description'>{{{field.description}}}</div>
+  {{/if}}
+</label>
+
+{{#if inputComponentName}}
+  <div class='input-area'>
+    {{component inputComponentName field=field step=step fieldClass=fieldClass wizard=wizard}}
+  </div>
+{{/if}}
+
+{{#if field.errorDescription}}
+  <div class='field-error-description'>{{{field.errorDescription}}}</div>
+{{/if}}

assets/javascripts/wizard/templates/components/wizard-step.hbs

@@ -3,14 +3,14 @@
     <h1 class='wizard-step-title'>{{step.title}}</h1>
   {{/if}}
 
-  {{#if bannerImage}}
-    <img src={{bannerImage}} class="wizard-step-banner">
-  {{/if}}
-
   {{#if step.description}}
     <p class='wizard-step-description'>{{{step.description}}}</p>
   {{/if}}
 
+  {{#if bannerImage}}
+    <img src={{bannerImage}} class="wizard-step-banner">
+  {{/if}}
+
   {{#wizard-step-form step=step}}
     {{#each step.fields as |field|}}
       {{wizard-field field=field step=step wizard=wizard}}

assets/stylesheets/wizard/wizard_custom.scss

@@ -67,6 +67,10 @@
       text-align: center;
     }
 
+    .inline-list > * {
+      display: inline-block;
+    }
+
     .tip {
       position: absolute;
       bottom: 0;
@@ -86,6 +90,7 @@
     width: initial;
     max-width: 660px;
     max-height: 300px;
+    margin-bottom: 0;
   }
 
   .control-group {
@@ -360,18 +365,16 @@ img.avatar {
   }
 }
 
-.checkbox-field {
+.wizard-column .checkbox-field {
-  display: inline-block;
+  float: left;
-  width: 100%;
 
   &> label {
-    float: left;
+    float: right;
   }
 
   &> .input-area {
-    float: right;
+    float: left;
-    margin: 0 20px !important;
+    margin: 15px 20px !important;
-    padding: 10px 0;
 
     input {
       cursor: pointer;
@@ -380,6 +383,31 @@ img.avatar {
   }
 }
 
+.wizard-column .wizard-field {
+  clear: both;
+  margin-bottom: 1em;
+
+  .field-label {
+    font-weight: 400;
+  }
+
+  .field-description {
+    color: #333;
+
+    img {
+      width: 40px;
+      height: 40px;
+      vertical-align: middle;
+      padding-bottom: 5px;
+      margin-right: 10px;
+    }
+
+    input {
+      margin: 0 5px;
+    }
+  }
+}
+
 @keyframes rotate-forever {
   0% {
     transform: rotate(0deg);

lib/field.rb

@@ -1,6 +1,6 @@
 class CustomWizard::Field
   def self.types
-    @types ||= ['text', 'textarea', 'dropdown', 'image', 'checkbox', 'user-selector']
+    @types ||= ['text', 'textarea', 'dropdown', 'image', 'checkbox', 'user-selector', 'text-only']
   end
 
   def self.require_assets

lib/wizard_edits.rb

@@ -131,7 +131,7 @@ end
 
   def description
     return object.description if object.description
-    I18n.t("#{object.key || i18n_key}.description", default: '')
+    I18n.t("#{object.key || i18n_key}.description", default: '', base_url: Discourse.base_url)
   end
 
   def placeholder