Generate emoji from css instead of image files

* Split create new stylesheet for emoji size classes * Add class name underneath emojis
codeforamerica · Jan 25, 2019 · a8694bc · a8694bc
1 parent ccda263
commit a8694bc
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 49 deletions.
diff --git a/app/assets/images/emojis/1f44d.png b/app/assets/images/emojis/1f44d.png
diff --git a/app/assets/stylesheets/atoms/_emoji-specs.scss b/app/assets/stylesheets/atoms/_emoji-specs.scss
@@ -0,0 +1,39 @@
+.emoji {
+  display: inline-block;
+  text-indent: -9999px;
+  height: 1em;
+  width: 1em;
+  content: '';
+  background-size: 100% auto;
+  position: relative;
+  background-repeat: no-repeat;
+}
+
+.emoji--inline {
+  top: .2em;
+}
+
+.emoji--huge {
+  width: 6em;
+  height: 6em;
+}
+
+.emoji--bigger {
+  width: 4em;
+  height: 4em;
+}
+
+.emoji--big {
+  width: 3em;
+  height: 3em;
+}
+
+.emoji--med {
+  width: 2.4em;
+  height: 2.4em;
+}
+
+.emoji--small {
+  width: 1.8em;
+  height: 1.8em;
+}
diff --git a/app/assets/stylesheets/atoms/_emoji.scss b/app/assets/stylesheets/atoms/_emoji.scss
@@ -1,43 +1,3 @@
-.emoji {
-  display: inline-block;
-  text-indent: -9999px;
-  height: 1em;
-  width: 1em;
-  content: '';
-  background-size: 100% auto;
-  position: relative;
-  background-repeat: no-repeat;
-}
-
-.emoji--inline {
-  top: .2em;
-}
-
-.emoji--huge {
-  width: 6em;
-  height: 6em;
-}
-
-.emoji--bigger {
-  width: 4em;
-  height: 4em;
-}
-
-.emoji--big {
-  width: 3em;
-  height: 3em;
-}
-
-.emoji--med {
-  width: 2.4em;
-  height: 2.4em;
-}
-
-.emoji--small {
-  width: 1.8em;
-  height: 1.8em;
-}
-
 .emoji--grinning-face {
   background-image: image-url('emojis/1f600.png');
 }

diff --git a/app/assets/stylesheets/cfa_styleguide_main.scss b/app/assets/stylesheets/cfa_styleguide_main.scss
@@ -15,6 +15,7 @@
 @import 'atoms/example';
 @import 'atoms/icons';
 @import 'atoms/emoji';
+@import 'atoms/emoji-specs';
 @import 'atoms/images';
 @import 'atoms/illustrations';
 @import 'atoms/layout';

diff --git a/app/controllers/cfa/styleguide/pages_controller.rb b/app/controllers/cfa/styleguide/pages_controller.rb
@@ -9,12 +9,25 @@ def form_builder
       end
 
       def emojis
-        @emojis = Dir.chdir(File.expand_path('../../../assets/images', File.dirname(__FILE__))) do
-          Dir.glob('emojis/*')
+        classes = Dir.chdir(File.expand_path('../../../assets/stylesheets/atoms', File.dirname(__FILE__))) do
+          File.read('_emoji.scss').scan(/\.(\S*) {.*/)
         end
-        @emoji_pairs = Dir.chdir(File.expand_path('../../../assets/images/', File.dirname(__FILE__))) do
-          Dir.glob('emoji_pairs/*')
+        emojis = []
+        emoji_pairs = []
+
+        classes.each do |c|
+          if c[0].include?('emoji-pair')
+            emoji_pairs.push(c[0])
+          else
+            emojis.push(c[0])
+          end
         end
+
+        emojis
+        emoji_pairs
+
+        @emojis = emojis
+        @emoji_pairs = emoji_pairs
       end
     end
   end

diff --git a/app/views/cfa/styleguide/pages/emojis.html.erb b/app/views/cfa/styleguide/pages/emojis.html.erb
@@ -1,4 +1,5 @@
 <% content_for(:template_name) { "styleguide" } %>
+<%#= stylesheet_link_tag "atoms/_emojis" %>
 
 <section class="slab slab--styleguide" id="atoms">
   <div class="grid">
@@ -28,9 +29,10 @@
     </div>
     <div class="grid__item width-three-fourths">
       <div class="grid">
-        <% @emojis.each do |path| %>
+        <% @emojis.each do |c| %>
           <div class="grid__item width-one-sixth">
-            <%= image_tag path, class: "emoji--big" %>
+            <div class="emoji emoji--big <%= "#{c}" %>"></div>
+            <p><%= c %></p>
           </div>
         <% end %>
       </div>
@@ -45,9 +47,10 @@
     </div>
     <div class="grid__item width-three-fourths">
       <div class="grid">
-        <% @emoji_pairs.each do |path| %>
-          <div class="grid__item width-one-sixth">
-            <%= image_tag path, class: "emoji--big" %>
+        <% @emoji_pairs.each do |c| %>
+          <div class="grid__item width-one-fourth">
+            <div class="emoji emoji--big <%= "#{c}" %>"></div>
+            <p><%= c %></p>
           </div>
         <% end %>
       </div>