New step to choose emoji set

app/assets/javascripts/wizard/templates/components/radio-button.hbs

@@ -6,6 +6,11 @@
     {{/if}}
     {{label}}
   </span>
+  {{#if extraLabel}}
+    <span class='extra-label'>
+      {{{extraLabel}}}
+    </span>
+  {{/if}}
 </div>
 <div class='radio-description'>
   {{description}}

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

@@ -3,6 +3,7 @@
     {{radio-button value=field.value
                    radioValue=c.id
                    label=c.label
+                   extraLabel=c.extra_label
                    icon=c.icon
                    description=c.description
                    onChange="changed"}}

app/assets/stylesheets/wizard.scss

@@ -48,6 +48,36 @@ body.wizard {
   z-index: 10;
 }
 
+.wizard-step-emoji {
+
+  .radio-area {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    input {
+      flex: 1 0 0;
+    }
+
+    span {
+      flex: 10 0 0;
+    }
+
+    span.extra-label {
+      flex: 20 0 0;
+    }
+  }
+
+  .emoji-preview {
+    margin-left: 1em;
+    img {
+      height: 20px;
+      width: 20px;
+      padding-right: 0.5em;
+    }
+  }
+}
+
 .wizard-column {
   position: relative;
   z-index: 11;

app/serializers/wizard_field_choice_serializer.rb

@@ -1,5 +1,5 @@
 class WizardFieldChoiceSerializer < ApplicationSerializer
-  attributes :id, :label, :description, :icon, :data
+  attributes :id, :label, :extra_label, :description, :icon, :data
 
   def id
     object.id
@@ -18,6 +18,14 @@ class WizardFieldChoiceSerializer < ApplicationSerializer
     I18n.t("#{i18nkey}.label", default: id)
   end
 
+  def extra_label
+    object.extra_label
+  end
+
+  def include_extra_label?
+    object.extra_label.present?
+  end
+
   def description
     I18n.t("#{i18nkey}.description", default: "")
   end

config/locales/server.en.yml

@@ -3329,6 +3329,10 @@ en:
             label: "Large Icon"
             description: "Icon used to represent your site on mobile devices. Recommended size is 144px by 144px."
 
+      emoji:
+        title: "Emoji Style"
+        description: "We offer several different ways to display emoji. Choose your favorite!"
+
       invites:
         title: "Invite Staff"
         description: "You’re almost ready! Let’s invite some staff members to help you <a href='https://blog.discourse.org/2014/08/building-a-discourse-community/' target='blank'>seed your discussions</a> with interesting topics and replies."

lib/wizard/builder.rb

@@ -1,4 +1,5 @@
 require_dependency 'introduction_updater'
+require_dependency 'emoji_set_site_setting'
 
 class Wizard
   class Builder
@@ -168,6 +169,32 @@ class Wizard
         end
       end
 
+      @wizard.append_step('emoji') do |step|
+        sets = step.add_field({
+          id: 'emoji_set',
+          type: 'radio',
+          required: true,
+          value: SiteSetting.emoji_set
+        })
+
+        emoji = ["smile", "+1", "tada", "poop"]
+
+        EmojiSetSiteSetting.values.each do |set|
+          imgs = emoji.map do |e|
+            "<img src='/images/emoji/#{set[:value]}/#{e}.png'>"
+          end
+
+          sets.add_choice(set[:value], {
+            label: I18n.t("js.#{set[:name]}"),
+            extra_label: "<span class='emoji-preview'>#{imgs.join}</span>"
+          })
+
+          step.on_update do |updater|
+            updater.apply_settings(:emoji_set)
+          end
+        end
+      end
+
       @wizard.append_step('invites') do |step|
         step.add_field(id: 'invite_list', type: 'component')
 

lib/wizard/field.rb

@@ -1,13 +1,14 @@
 class Wizard
 
   class Choice
-    attr_reader :id, :label, :icon, :data
+    attr_reader :id, :label, :icon, :data, :extra_label
     attr_accessor :field
 
     def initialize(id, opts)
       @id = id
       @data = opts[:data]
       @label = opts[:label]
+      @extra_label = opts[:extra_label]
       @icon = opts[:icon]
     end
   end

spec/components/step_updater_spec.rb

@@ -204,6 +204,17 @@ describe Wizard::StepUpdater do
     end
   end
 
+  context "emoji step" do
+    it "updates the fields correctly" do
+      updater = wizard.create_updater('emoji', emoji_set: "twitter")
+      updater.update
+
+      expect(updater).to be_success
+      expect(wizard.completed_steps?('emoji')).to eq(true)
+      expect(SiteSetting.emoji_set).to eq('twitter')
+    end
+  end
+
 
   context "invites step" do
     let(:invites) {