Rename feeds + update feeds' tabs UI (#15435)

* Rename feeds + update feeds' tabs UI

* rspec updates

* change relevance to relevant

app/views/articles/index.html.erb

@@ -43,14 +43,16 @@
         <nav class="-mx-3 m:mx-0 s:flex items-center justify-between" aria-label="<%= t("views.stories.sort.aria_label") %>">
           <ul class="crayons-navigation crayons-navigation--horizontal">
             <li>
-              <a data-text="Feed" href="<%= list_path %>/" class="crayons-navigation__item <%= "crayons-navigation__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"
-                <%= %w[week month year infinity latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.feed") %></a>
+              <a data-text="<%= t("views.stories.sort.relevant") %>" href="<%= list_path %>/" class="crayons-navigation__item <%= "crayons-navigation__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"
+                <%= %w[week month year infinity latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.relevant") %></a>
             </li>
             <li>
-              <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.latest") %></a>
+              <a data-text="<%= t("views.stories.sort.latest") %>" href="<%= list_path %>/latest" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>>
+                <%= t("views.stories.sort.latest") %>
+              </a>
             </li>
             <li>
-              <a data-text="Top" href="<%= list_path %>/top/week"
+              <a data-text="<%= t("views.stories.sort.top") %>" href="<%= list_path %>/top/week"
                 class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>"
                 <%= timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
                   <%= t("views.stories.sort.top") %>
@@ -60,16 +62,22 @@
           <% if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>
             <ul class="crayons-navigation crayons-navigation--horizontal fs-base">
               <li>
-                <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.week") %></a>
+                <a data-text="<%= t("views.stories.sort.week") %>" href="<%= list_path %>/top/week" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>>
+                  <%= t("views.stories.sort.week") %>
+                </a>
               </li>
               <li>
-                <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.month") %></a>
+                <a data-text="<%= t("views.stories.sort.month") %>" href="<%= list_path %>/top/month" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>>
+                  <%= t("views.stories.sort.month") %>
+                </a>
               </li>
               <li>
-                <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.year") %></a>
+                <a data-text="<%= t("views.stories.sort.year") %>" href="<%= list_path %>/top/year" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>>
+                  <%= t("views.stories.sort.year") %>
+                </a>
               </li>
               <li>
-                <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
+                <a data-text="<%= t("views.stories.sort.infinity") %>" href="<%= list_path %>/top/infinity" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
                   <%= t("views.stories.sort.infinity") %>
                 </a>
               </li>

app/views/stories/tagged_articles/index.html.erb

@@ -50,46 +50,58 @@
     <%= render "stories/tagged_articles/sidebar" %>
     <main class="articles-list" id="main-content" data-follow-button-container="true">
       <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls">
-        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden" id="on-page-nav-butt-left" aria-label="<%= t("views.stories.menu.aria_left") %>">
+        <h1 class="screen-reader-only"><%= t("views.stories.heading") %></h1>
+        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden mb-auto" id="on-page-nav-butt-left" aria-label="<%= t("views.stories.menu.aria_left") %>">
           <div class="crayons-icon nav-icon ">
             <%= inline_svg_tag("hamburger.svg", aria: true, title: t("views.hamburger.icon_left")) %>
           </div>
         </button>
         <% if user_signed_in? %>
           <div class="flex-1 flex items-center justify-between">
-            <h2 class="crayons-subtitle-2"><%= t("views.stories.heading") %></h2>
-            <nav class="crayons-tabs hidden s:flex" aria-label="<%= t("views.stories.sort.aria_tagged") %>">
-              <ul class="crayons-tabs__list">
+            <nav class="-mx-3 m:mx-0 s:flex items-center justify-between w-100" aria-label="<%= t("views.stories.sort.aria_tagged") %>">
+              <ul class="crayons-navigation crayons-navigation--horizontal">
                 <li>
-                  <a data-text="Feed" href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"
-                  <%= %w[week month year infinity latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.feed") %></a>
+                  <a data-text="<%= t("views.stories.sort.relevant") %>" href="<%= list_path %>/" class="crayons-navigation__item <%= "crayons-navigation__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"
+                    <%= %w[week month year infinity latest].exclude?(params[:timeframe]) ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.relevant") %></a>
                 </li>
                 <li>
-                  <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.week") %></a>
+                  <a data-text="<%= t("views.stories.sort.latest") %>" href="<%= list_path %>/latest" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>>
+                    <%= t("views.stories.sort.latest") %>
+                  </a>
                 </li>
                 <li>
-                  <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.month") %></a>
-                </li>
-                <li>
-                  <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.year") %></a>
-                </li>
-                <li>
-                  <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.infinity") %></a>
-                </li>
-                <li>
-                  <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? ' aria-current="page"'.html_safe : "" %>><%= t("views.stories.sort.latest") %></a>
+                  <a data-text="<%= t("views.stories.sort.top") %>" href="<%= list_path %>/top/week"
+                    class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>"
+                    <%= timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
+                      <%= t("views.stories.sort.top") %>
+                  </a>
                 </li>
               </ul>
+              <% if timeframe_check("week") || timeframe_check("month") || timeframe_check("year") || timeframe_check("infinity") %>
+              <ul class="crayons-navigation crayons-navigation--horizontal fs-base">
+                <li>
+                  <a data-text="<%= t("views.stories.sort.week") %>" href="<%= list_path %>/top/week" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? ' aria-current="page"'.html_safe : "" %>>
+                    <%= t("views.stories.sort.week") %>
+                  </a>
+                </li>
+                <li>
+                  <a data-text="<%= t("views.stories.sort.month") %>" href="<%= list_path %>/top/month" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? ' aria-current="page"'.html_safe : "" %>>
+                    <%= t("views.stories.sort.month") %>
+                  </a>
+                </li>
+                <li>
+                  <a data-text="<%= t("views.stories.sort.year") %>" href="<%= list_path %>/top/year" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? ' aria-current="page"'.html_safe : "" %>>
+                    <%= t("views.stories.sort.year") %>
+                  </a>
+                </li>
+                <li>
+                  <a data-text="<%= t("views.stories.sort.infinity") %>" href="<%= list_path %>/top/infinity" class="crayons-navigation__item <%= "crayons-navigation__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? ' aria-current="page"'.html_safe : "" %>>
+                    <%= t("views.stories.sort.infinity") %>
+                  </a>
+                </li>
+              </ul>
+              <% end %>
             </nav>
-
-            <select class="crayons-select s:hidden ml-2 s:ml-auto w-auto" id="feed-filter-select" aria-label="feed-filter-select">
-              <option value="<%= list_path %>/" <% if ["week", "month", "year", "infinity", "latest"].exclude?(params[:timeframe]) %> selected<% end %>><%= t("views.stories.sort.feed") %></option>
-              <option value="<%= list_path %>/top/week" <% if timeframe_check("week") %> selected<% end %>><%= t("views.stories.sort.week") %></option>
-              <option value="<%= list_path %>/top/month" <% if timeframe_check("month") %> selected<% end %>><%= t("views.stories.sort.month") %></option>
-              <option value="<%= list_path %>/top/year" <% if timeframe_check("year") %> selected<% end %>><%= t("views.stories.sort.year") %></option>
-              <option value="<%= list_path %>/top/infinity" <% if timeframe_check("infinity") %> selected<% end %>><%= t("views.stories.sort.infinity") %></option>
-              <option value="<%= list_path %>/latest" <% if timeframe_check("latest") %> selected<% end %>><%= t("views.stories.sort.latest") %></option>
-            </select>
           </div>
         <% else %>
           <div class="flex-1 flex items-center justify-between">
@@ -97,7 +109,7 @@
           </div>
         <% end %>
 
-        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden" id="on-page-nav-butt-right" aria-label="<%= t("views.stories.menu.aria_right") %>">
+        <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden mb-auto" id="on-page-nav-butt-right" aria-label="<%= t("views.stories.menu.aria_right") %>">
           <div class="crayons-icon nav-icon ">
             <%= inline_svg_tag("hamburger.svg", aria: true, title: t("views.hamburger.icon_right")) %>
           </div>

config/locales/views/stories/en.yml

@@ -15,7 +15,7 @@ en:
       sort:
         aria_label: View posts by
         aria_tagged: View tagged posts by
-        feed: Feed
+        relevant: Relevant
         week: Week
         month: Month
         year: Year

config/locales/views/stories/fr.yml

@@ -15,7 +15,7 @@ fr:
       sort:
         aria_label: View posts by
         aria_tagged: View tagged posts by
-        feed: Fil
+        relevant: Pertinent
         week: Semaine
         month: Mois
         year: Année

cypress/integration/seededFlows/homeFeedFlows/feedNavigation.spec.js

@@ -11,13 +11,13 @@ describe('Home Feed Navigation', () => {
     });
   });
 
-  it('should show Feed by default', () => {
+  it('should show Relevant by default', () => {
     cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
-      cy.findByRole('link', { name: 'Feed' }).as('feed');
+      cy.findByRole('link', { name: 'Relevant' }).as('relevant');
       cy.findByRole('link', { name: 'Top' }).as('top');
       cy.findByRole('link', { name: 'Latest' }).as('latest');
 
-      cy.get('@feed').should('have.attr', 'aria-current', 'page');
+      cy.get('@relevant').should('have.attr', 'aria-current', 'page');
 
       cy.get('@top').should('not.have.attr', 'aria-current');
       cy.get('@latest').should('not.have.attr', 'aria-current');

cypress/integration/seededFlows/tagsFlows/tagIndexNavigation.spec.js

@@ -8,48 +8,46 @@ describe('Tag index page navigation', () => {
     });
   });
 
-  it('shows Feed by default', () => {
+  it('shows Relevant by default', () => {
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
-      cy.findByRole('link', { name: 'Feed' }).as('feed');
-      cy.findByRole('link', { name: 'Week' }).as('week');
-      cy.findByRole('link', { name: 'Month' }).as('month');
-      cy.findByRole('link', { name: 'Year' }).as('year');
-      cy.findByRole('link', { name: 'Infinity' }).as('infinity');
+      cy.findByRole('link', { name: 'Relevant' }).as('relevant');
+      cy.findByRole('link', { name: 'Top' }).as('top');
       cy.findByRole('link', { name: 'Latest' }).as('latest');
 
-      cy.findByRole('link', { name: 'Feed' }).should(
-        'have.attr',
-        'aria-current',
-        'page',
-      );
+      cy.get('@relevant').should('have.attr', 'aria-current', 'page');
 
-      cy.get('@week').should('not.have.attr', 'aria-current');
-      cy.get('@month').should('not.have.attr', 'aria-current');
-      cy.get('@year').should('not.have.attr', 'aria-current');
-      cy.get('@infinity').should('not.have.attr', 'aria-current');
+      cy.get('@top').should('not.have.attr', 'aria-current');
       cy.get('@latest').should('not.have.attr', 'aria-current');
     });
   });
 
-  it('should navigate to Week view', () => {
+  it('should navigate to Week view by default for Top', () => {
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
-      cy.findByRole('link', { name: 'Week' }).as('week');
-      cy.get('@week').should('not.have.attr', 'aria-current');
-      cy.get('@week').click();
+      cy.findByRole('link', { name: 'Top' }).as('top');
+      cy.get('@top').click();
     });
 
     cy.url().should('contain', '/top/week');
     // Get a fresh handle to elements, as we've navigated to a new page
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
-      cy.findByRole('link', { name: 'Week' }).should(
-        'have.attr',
-        'aria-current',
-        'page',
-      );
+      cy.findByRole('link', { name: 'Week' }).as('week');
+
+      cy.get('@week').should('have.attr', 'aria-current', 'page');
+
+      cy.get('@week').click(); // should not change the page
+      cy.url().should('contain', '/top/week'); // so the url stays the same
     });
   });
 
   it('should navigate to Month view', () => {
+    cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
+      cy.findByRole('link', { name: 'Top' }).as('top');
+      cy.get('@top').click();
+    });
+
+    // this url check serves to wait for the page transition
+    cy.url().should('contain', '/top/week');
+
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
       cy.findByRole('link', { name: 'Month' }).as('month');
       cy.get('@month').should('not.have.attr', 'aria-current');
@@ -68,6 +66,14 @@ describe('Tag index page navigation', () => {
   });
 
   it('should navigate to Year view', () => {
+    cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
+      cy.findByRole('link', { name: 'Top' }).as('top');
+      cy.get('@top').click();
+    });
+
+    // this url check serves to wait for the page transition
+    cy.url().should('contain', '/top/week');
+
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
       cy.findByRole('link', { name: 'Year' }).as('year');
       cy.get('@year').should('not.have.attr', 'aria-current');
@@ -86,6 +92,14 @@ describe('Tag index page navigation', () => {
   });
 
   it('should navigate to Infinity view', () => {
+    cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
+      cy.findByRole('link', { name: 'Top' }).as('top');
+      cy.get('@top').click();
+    });
+
+    // this url check serves to wait for the page transition
+    cy.url().should('contain', '/top/week');
+
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
       cy.findByRole('link', { name: 'Infinity' }).as('infinity');
       cy.get('@infinity').should('not.have.attr', 'aria-current');
@@ -102,22 +116,4 @@ describe('Tag index page navigation', () => {
       );
     });
   });
-
-  it('should navigate to Latest view', () => {
-    cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
-      cy.findByRole('link', { name: 'Latest' }).as('latest');
-      cy.get('@latest').should('not.have.attr', 'aria-current');
-      cy.get('@latest').click();
-    });
-
-    cy.url().should('contain', '/latest');
-    // Get a fresh handle to elements, as we've navigated to a new page
-    cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
-      cy.findByRole('link', { name: 'Latest' }).should(
-        'have.attr',
-        'aria-current',
-        'page',
-      );
-    });
-  });
 });

spec/requests/stories/tagged_articles_spec.rb

@@ -129,7 +129,7 @@ RSpec.describe "Stories::TaggedArticlesIndex", type: :request do
 
           it "shows tags and renders properly", :aggregate_failures do
             get "/t/#{tag.name}"
-            expect(response.body).to include("crayons-tabs__item crayons-tabs__item--current")
+            expect(response.body).to include("crayons-navigation__item crayons-navigation__item--current")
             has_mod_action_button
             does_not_paginate
             sets_remember_token
@@ -150,7 +150,7 @@ RSpec.describe "Stories::TaggedArticlesIndex", type: :request do
           it "renders properly even if site config is private" do
             allow(Settings::UserExperience).to receive(:public).and_return(false)
             get "/t/#{tag.name}"
-            expect(response.body).to include("crayons-tabs__item crayons-tabs__item--current")
+            expect(response.body).to include("crayons-navigation__item crayons-navigation__item--current")
           end
 
           it "does not render pagination even with many posts" do
@@ -174,7 +174,7 @@ RSpec.describe "Stories::TaggedArticlesIndex", type: :request do
           end
 
           def shows_sign_in_notice
-            expect(response.body).not_to include("crayons-tabs__item crayons-tabs__item--current")
+            expect(response.body).not_to include("crayons-navigation__item crayons-navigation__item--current")
             expect(response.body).to include("for the ability sort posts by")
           end
 

spec/system/articles/user_visits_articles_by_tag_spec.rb

@@ -68,10 +68,10 @@ RSpec.describe "User visits articles by tag", type: :system do
       within("header.spec__tag-header") { expect(page).to have_button(I18n.t("core.following")) }
     end
 
-    it "shows time buttons" do
+    it "shows top level sort options" do
       within("#on-page-nav-controls") do
-        expect(page).to have_link("Week", href: "/t/functional/top/week")
-        expect(page).to have_link("Infinity", href: "/t/functional/top/infinity")
+        expect(page).to have_link("Relevant", href: "/t/functional/")
+        expect(page).to have_link("Top", href: "/t/functional/top/week")
         expect(page).to have_link("Latest", href: "/t/functional/latest")
       end
     end