diff --git a/app/frontend/stylesheets/application.tailwind.css b/app/frontend/stylesheets/application.tailwind.css index d0a90c65f2..18e7e00038 100644 --- a/app/frontend/stylesheets/application.tailwind.css +++ b/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 diff --git a/app/helpers/story_shares_helper.rb b/app/helpers/story_shares_helper.rb index 872b5a06b5..9d35bea0a3 100644 --- a/app/helpers/story_shares_helper.rb +++ b/app/helpers/story_shares_helper.rb @@ -14,6 +14,7 @@ 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 @@ -21,6 +22,10 @@ module StorySharesHelper "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 diff --git a/app/views/story_shares/_search_scope.html.erb b/app/views/story_shares/_search_scope.html.erb index 32b4a38214..6da49127fc 100644 --- a/app/views/story_shares/_search_scope.html.erb +++ b/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" %>

<%= lead %> “<%= params[:query] %>” in the title, the story text, the author’s or second author’s name, or the spotlighted facilitator’s name.

diff --git a/app/views/story_shares/_tag_chips.html.erb b/app/views/story_shares/_tag_chips.html.erb index a8b1a8a79d..6febb0e280 100644 --- a/app/views/story_shares/_tag_chips.html.erb +++ b/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 %><% end %><%= category.display_name %> <% end %> <% end %> diff --git a/app/views/story_shares/_tag_links.html.erb b/app/views/story_shares/_tag_links.html.erb index db7b488742..623cb8a38d 100644 --- a/app/views/story_shares/_tag_links.html.erb +++ b/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 %> diff --git a/spec/helpers/story_shares_helper_spec.rb b/spec/helpers/story_shares_helper_spec.rb new file mode 100644 index 0000000000..b3cd463a9c --- /dev/null +++ b/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