Style emoji with flexbox

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    cfa-styleguide (0.5.6)
+    cfa-styleguide (0.5.7)
       autoprefixer-rails
       bourbon
       jquery-rails
@@ -55,7 +55,7 @@ GEM
     addressable (2.5.2)
       public_suffix (>= 2.0.2, < 4.0)
     arel (9.0.0)
-    autoprefixer-rails (9.4.6)
+    autoprefixer-rails (9.4.7)
       execjs
     bourbon (5.1.0)
       sass (~> 3.4)

app/assets/stylesheets/atoms/_emoji-specs.scss

@@ -37,3 +37,8 @@
   width: 1.8em;
   height: 1.8em;
 }
+
+.emoji-container {
+  display: flex;
+  flex-wrap: wrap;
+}

app/controllers/cfa/styleguide/pages_controller.rb

@@ -12,22 +12,16 @@ def emojis
         classes = Dir.chdir(File.expand_path('../../../assets/stylesheets/atoms', File.dirname(__FILE__))) do
           File.read('_emoji.scss').scan(/\.(\S*) {.*/)
         end
-        emojis = []
-        emoji_pairs = []
+        @emojis = []
+        @emoji_pairs = []
 
-        classes.each do |c|
-          if c[0].include?('emoji-pair')
-            emoji_pairs.push(c[0])
+        classes.each do |css_class|
+          if css_class[0].include?('emoji-pair')
+            @emoji_pairs.push(css_class[0])
           else
-            emojis.push(c[0])
+            @emojis.push(css_class[0])
           end
         end
-
-        emojis
-        emoji_pairs
-
-        @emojis = emojis
-        @emoji_pairs = emoji_pairs
       end
     end
   end

app/views/cfa/styleguide/pages/emojis.html.erb

@@ -28,11 +28,11 @@
       <p class="text--help">Emojis</p>
     </div>
     <div class="grid__item width-three-fourths">
-      <div class="grid">
-        <% @emojis.each do |c| %>
+      <div class="emoji-container">
+        <% @emojis.each do |css_class| %>
           <div class="grid__item width-one-sixth">
-            <div class="emoji emoji--big <%= "#{c}" %>"></div>
-            <p><%= c %></p>
+            <div class="emoji emoji--big <%= "#{css_class}" %>"></div>
+            <p class="text--help"><%= css_class %></p>
           </div>
         <% end %>
       </div>
@@ -47,10 +47,10 @@
     </div>
     <div class="grid__item width-three-fourths">
       <div class="grid">
-        <% @emoji_pairs.each do |c| %>
+        <% @emoji_pairs.each do |css_class| %>
           <div class="grid__item width-one-fourth">
-            <div class="emoji emoji--big <%= "#{c}" %>"></div>
-            <p><%= c %></p>
+            <div class="emoji emoji--big <%= "#{css_class}" %>"></div>
+            <p class="text--help"><%= css_class %></p>
           </div>
         <% end %>
       </div>

lib/cfa/styleguide/version.rb

@@ -1,5 +1,5 @@
 module Cfa
   module Styleguide
-    VERSION = "0.5.6"
+    VERSION = "0.5.7"
   end
 end