Remove flare tag from title and hightlight it within the tags row (#10528)

* Remove flare tag from title and hightlight it within the tags row

* wrap flare tag # in a span with class crayons-tag__prefix

* updated buildArticleHTML.js to show flare tag in the tags row

* updated _single_story.html.erb to show flare tag in the tags row

* fixed missing opening tag

* removed crayons-story__flare-tag class and containers

* added .crayons-story__flare-tag back to stories.scss for search results

* added check for undefined tagList in buildArticleHTML.js

app/assets/javascripts/utilities/buildArticleHTML.js

@@ -25,8 +25,43 @@ function buildArticleHTML(article) {
 
   if (article) {
     var container = document.getElementById('index-container');
+
+    var flareTag = '';
+    var currentTag = '';
+    if (container) {
+      currentTag = JSON.parse(container.dataset.params).tag;
+    }
+    if (article.flare_tag && currentTag !== article.flare_tag.name) {
+      flareTag =
+        "<a href='/t/" +
+        article.flare_tag.name +
+        "' class='crayons-tag' style='background:" +
+        article.flare_tag.bg_color_hex +
+        ';color:' +
+        article.flare_tag.text_color_hex +
+        "'><span className='crayons-tag__prefix'>#</span>" +
+        article.flare_tag.name +
+        '</a>';
+    }
+    if (article.class_name === 'PodcastEpisode') {
+      flareTag = "<span class='crayons-story__flare-tag'>podcast</span>";
+    }
+    if (article.class_name === 'Comment') {
+      flareTag = "<span class='crayons-story__flare-tag'>comment</span>";
+    }
+    if (article.class_name === 'User') {
+      flareTag =
+        "<span class='crayons-story__flare-tag' style='background:#5874d9;color:white;'>person</span>";
+    }
+
     var tagString = '';
-    var tagList = article.tag_list || article.cached_tag_list_array;
+    var tagList = article.tag_list || article.cached_tag_list_array || [];
+    if (flareTag) {
+      tagList = tagList.filter(function (tag) {
+        return tag !== article.flare_tag.name;
+      });
+      tagString += flareTag;
+    }
     if (tagList) {
       tagList.forEach(function buildTagString(t) {
         tagString =
@@ -53,32 +88,6 @@ function buildArticleHTML(article) {
         '<span class="hidden s:inline">&nbsp;comments</span></a>';
     }
 
-    var flareTag = '';
-    var currentTag = '';
-    if (container) {
-      currentTag = JSON.parse(container.dataset.params).tag;
-    }
-    if (article.flare_tag && currentTag !== article.flare_tag.name) {
-      flareTag =
-        "<span class='crayons-story__flare-tag' style='background:" +
-        article.flare_tag.bg_color_hex +
-        ';color:' +
-        article.flare_tag.text_color_hex +
-        "'>#" +
-        article.flare_tag.name +
-        '</span>';
-    }
-    if (article.class_name === 'PodcastEpisode') {
-      flareTag = "<span class='crayons-story__flare-tag'>podcast</span>";
-    }
-    if (article.class_name === 'Comment') {
-      flareTag = "<span class='crayons-story__flare-tag'>comment</span>";
-    }
-    if (article.class_name === 'User') {
-      flareTag =
-        "<span class='crayons-story__flare-tag' style='background:#5874d9;color:white;'>person</span>";
-    }
-
     var rc = article.public_reactions_count;
     var reactionsCount = rc || '0';
     var reactionsDisplay = '';
@@ -278,7 +287,6 @@ function buildArticleHTML(article) {
       '" id="article-link-' +
       article.id +
       '">' +
-      flareTag +
       filterXSS(article.title) +
       '</a></h2>\
             <div class="crayons-story__tags">' +

app/assets/stylesheets/components/stories.scss

@@ -135,7 +135,7 @@
 
   &__flare-tag {
     font-weight: normal;
-    font-size: 0.6em;
+    // font-size: 0.6em;
     padding: 0.3em;
     vertical-align: middle;
     position: relative;

app/javascript/articles/Article.jsx

@@ -77,7 +77,7 @@ export const Article = ({
 
           <div className="crayons-story__indention">
             <ContentTitle article={article} />
-            <TagList tags={article.tag_list} />
+            <TagList tags={article.tag_list} flare_tag={article.flare_tag} />
 
             {article.class_name === 'Article' && (
               // eslint-disable-next-line no-underscore-dangle

app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap

@@ -83,12 +83,6 @@ Object {
                   href="/some-post/path"
                   id="article-link-62407"
                 >
-                  <span
-                    class="crayons-story__flare-tag"
-                    style="background: rgb(0, 0, 0); color: rgb(255, 255, 255);"
-                  >
-                    #javascript
-                  </span>
                   <span>
                     Unbranded Home Loan Account
                   </span>
@@ -100,6 +94,7 @@ Object {
                 <a
                   class="crayons-tag"
                   href="/t/javascript"
+                  style="background: rgb(0, 0, 0); color: rgb(255, 255, 255);"
                 >
                   <span
                     class="crayons-tag__prefix"
@@ -293,12 +288,6 @@ Object {
                 href="/some-post/path"
                 id="article-link-62407"
               >
-                <span
-                  class="crayons-story__flare-tag"
-                  style="background: rgb(0, 0, 0); color: rgb(255, 255, 255);"
-                >
-                  #javascript
-                </span>
                 <span>
                   Unbranded Home Loan Account
                 </span>
@@ -310,6 +299,7 @@ Object {
               <a
                 class="crayons-tag"
                 href="/t/javascript"
+                style="background: rgb(0, 0, 0); color: rgb(255, 255, 255);"
               >
                 <span
                   class="crayons-tag__prefix"

app/javascript/articles/components/ContentTitle.jsx

@@ -4,17 +4,6 @@ import { articlePropTypes } from '../../common-prop-types';
 export const ContentTitle = ({ article }) => (
   <h2 className="crayons-story__title">
     <a href={article.path} id={`article-link-${article.id}`}>
-      {article.flare_tag && (
-        <span
-          className="crayons-story__flare-tag"
-          style={{
-            background: article.flare_tag.bg_color_hex,
-            color: article.flare_tag.text_color_hex,
-          }}
-        >
-          {`#${article.flare_tag.name}`}
-        </span>
-      )}
       {article.class_name === 'PodcastEpisode' && (
         <span className="crayons-story__flare-tag">podcast</span>
       )}

app/javascript/articles/components/TagList.jsx

@@ -1,16 +1,35 @@
 import { h } from 'preact';
 import { tagPropTypes } from '../../common-prop-types';
 
-export const TagList = ({ tags = [] }) => (
-  <div className="crayons-story__tags">
-    {tags.map((tag) => (
-      <a className="crayons-tag" href={`/t/${tag}`}>
-        <span className="crayons-tag__prefix">#</span>
-        {tag}
-      </a>
-    ))}
-  </div>
-);
+export const TagList = ({ tags = [], flare_tag }) => {
+  let tagsToDisplay = tags;
+  if (flare_tag) {
+    tagsToDisplay = tagsToDisplay.filter((tag) => tag !== flare_tag.name);
+  }
+  return (
+    <div className="crayons-story__tags">
+      {flare_tag && (
+        <a
+          className="crayons-tag"
+          href={`/t/${flare_tag.name}`}
+          style={{
+            background: flare_tag.bg_color_hex,
+            color: flare_tag.text_color_hex,
+          }}
+        >
+          <span className="crayons-tag__prefix">#</span>
+          {flare_tag.name}
+        </a>
+      )}
+      {tagsToDisplay.map((tag) => (
+        <a className="crayons-tag" href={`/t/${tag}`}>
+          <span className="crayons-tag__prefix">#</span>
+          {tag}
+        </a>
+      ))}
+    </div>
+  );
+};
 
 TagList.propTypes = {
   tags: tagPropTypes.isRequired,

app/views/articles/_single_story.html.erb

@@ -51,11 +51,19 @@
     <div class="crayons-story__indention">
       <h2 class="crayons-story__title">
         <a href="<%= story.path %>" data-preload-image="<%= cloud_cover_url(story.main_image) %>" id="article-link-<%= story.id %>">
-          <%= render "articles/tag_identifier", story: story, tag: @tag %>
+          <%= story.title %>
         </a>
       </h2>
       <div class="crayons-story__tags">
-        <% story.cached_tag_list_array.each do |tag| %>
+        <% flare_tag = FlareTag.new(story, @tag).tag %>
+        <% if flare_tag %>
+          <a href="/t/<%= flare_tag.name %>" class="crayons-tag" style="background:<%= flare_tag.bg_color_hex %>;color:<%= flare_tag.text_color_hex %>"><span className="crayons-tag__prefix">#</span><%= flare_tag.name %></a>
+        <% end %>
+        <% tags_to_display = story.cached_tag_list_array
+           if flare_tag
+             tags_to_display = tags_to_display.reject { |tag| tag == flare_tag.name }
+           end %>
+        <% tags_to_display.each do |tag| %>
         <a href="/t/<%= tag %>" class="crayons-tag"><span class="crayons-tag__prefix">#</span><%= tag %></a>
         <% end %>
       </div>