Age range story chips use the AWBW rust orange

app/frontend/stylesheets/application.tailwind.css

@@ -24,6 +24,7 @@
      `primary`, green is `success`, orange is `accent`. These add the rest, the
      cream page surface, and the display serif used for headlines. */
   --color-brand-cream: #fcfaeb;
+  --color-brand-rust: #c84607;
   --font-display: "Fraunces", "Lato", serif;
 
   /* Each brand colour as a full 50–950 scale, so it is used exactly like a

app/helpers/story_shares_helper.rb

@@ -14,13 +14,18 @@ module StorySharesHelper
 
   SECTOR_TAG_CHIP = "bg-brand-magenta-50 text-brand-magenta-700 hover:bg-brand-magenta-100 inline-flex items-center rounded-full text-xs font-medium transition-colors".freeze
   AUDIENCE_TAG_CHIP = "bg-brand-amber-100 text-brand-amber-800 hover:bg-brand-amber-200 inline-flex items-center rounded-full text-xs font-medium transition-colors".freeze
+  AGE_RANGE_TAG_CHIP = "bg-brand-rust text-white hover:bg-brand-rust/85 inline-flex items-center rounded-full text-xs font-medium transition-colors".freeze
 
   STORY_IMAGE_ASPECT = "aspect-[3/2]".freeze
   STORY_BANNER_ASPECT = "aspect-[4/3] sm:aspect-[2/1]".freeze
   STORY_IMAGE_GUIDANCE = "Images look best as landscape photos in a 3:2 shape, at least 1800 × 1200 pixels. " \
     "A recent phone photo taken sideways works well. Tall images show in full on a blurred background. " \
     "Some spots trim the edges, so keep the main subject near the center.".freeze
 
+  def audience_tag_chip_class(category)
+    category.category_type&.name == AgeGroupTaggable::AGE_RANGE_CATEGORY_TYPE ? AGE_RANGE_TAG_CHIP : AUDIENCE_TAG_CHIP
+  end
+
   def story_share_slot_theme(index)
     SLOT_THEMES[index % SLOT_THEMES.size]
   end

app/views/story_shares/_search_scope.html.erb

@@ -1,5 +1,5 @@
 <%# What a typed search matched: tag links (when any tag has visible stories), then the text fields searched. %>
 <% tag_links = @matching_sectors.map { |sector| link_to sector.name, story_shares_path(sector_names_all: sector.name), class: "#{StorySharesHelper::SECTOR_TAG_CHIP} px-2.5 py-0.5" } +
-               @matching_audiences.map { |category| link_to category.display_name, story_shares_path(category_names_all: category.name), class: "#{StorySharesHelper::AUDIENCE_TAG_CHIP} px-2.5 py-0.5" } %>
+               @matching_audiences.map { |category| link_to category.display_name, story_shares_path(category_names_all: category.name), class: "#{audience_tag_chip_class(category)} px-2.5 py-0.5" } %>
 <% lead = tag_links.any? ? safe_join([ "Stories tagged ", to_sentence(tag_links, two_words_connector: " or ", last_word_connector: ", or "), ", or with" ]) : "Stories with" %>
 <p class="mb-8 text-sm leading-7 text-gray-700"><%= lead %> “<%= params[:query] %>” in the title, the story text, the author’s or second author’s name, or the spotlighted facilitator’s name.</p>

app/views/story_shares/_tag_chips.html.erb

@@ -6,7 +6,6 @@
 <% compact = local_assigns.fetch(:compact, false) %>
 <% chip_pad = compact ? "px-2 py-0.5" : "px-3 py-1" %>
 <% sector_chip = "#{StorySharesHelper::SECTOR_TAG_CHIP} #{chip_pad}" %>
-<% audience_chip = "#{StorySharesHelper::AUDIENCE_TAG_CHIP} #{chip_pad}" %>
 <% primary_sector = story.primary_sector %>
 <% primary_category = story.primary_category %>
 <% sectors = story.sectors.sort_by { |sector| [ sector == primary_sector ? 0 : 1, sector.name.downcase ] } %>
@@ -22,7 +21,7 @@
       <% end %>
     <% end %>
     <% audiences.each do |category| %>
-      <%= link_to story_shares_path(category_names_all: category.name), class: audience_chip, title: ("Primary category" if category.object == primary_category) do %>
+      <%= link_to story_shares_path(category_names_all: category.name), class: "#{audience_tag_chip_class(category)} #{chip_pad}", title: ("Primary category" if category.object == primary_category) do %>
         <% if category.object == primary_category %><i class="fa-solid fa-star mr-1 text-amber-400" aria-hidden="true"></i><% end %><%= category.display_name %>
       <% end %>
     <% end %>

app/views/story_shares/_tag_links.html.erb

@@ -5,6 +5,6 @@
     <%= link_to sector.name, story_shares_path(sector_names_all: sector.name), class: "#{StorySharesHelper::SECTOR_TAG_CHIP} px-3 py-1" %>
   <% end %>
   <% audiences.each do |category| %>
-    <%= link_to category.display_name, story_shares_path(category_names_all: category.name), class: "#{StorySharesHelper::AUDIENCE_TAG_CHIP} px-3 py-1" %>
+    <%= link_to category.display_name, story_shares_path(category_names_all: category.name), class: "#{audience_tag_chip_class(category)} px-3 py-1" %>
   <% end %>
 </div>

spec/helpers/story_shares_helper_spec.rb

@@ -0,0 +1,15 @@
+require "rails_helper"
+
+RSpec.describe StorySharesHelper, type: :helper do
+  describe "#audience_tag_chip_class" do
+    it "uses the age range chip for an age range category" do
+      category = build(:category, category_type: build(:category_type, name: AgeGroupTaggable::AGE_RANGE_CATEGORY_TYPE))
+      expect(helper.audience_tag_chip_class(category)).to eq(StorySharesHelper::AGE_RANGE_TAG_CHIP)
+    end
+
+    it "uses the audience chip for a story population category" do
+      category = build(:category, category_type: build(:category_type, name: CategoriesTaggable::STORY_POPULATION_CATEGORY_TYPE))
+      expect(helper.audience_tag_chip_class(category)).to eq(StorySharesHelper::AUDIENCE_TAG_CHIP)
+    end
+  end
+end