Static Sections for Site Navigation - Pt2 (#14292)
* schema file undelete description * update with main * update with origin * add sections in Admin * Add "Section" radio btns to New-Link form * Ensure links created in correct section * Ensure links created in correct section pt2 * fix styling in admin * complete section split on frontend * start on specs * complete specs * remove unnecessary Cypress test file * address all a11y comments in PR review * fix broken specs due to a11y changes
This commit is contained in:
Arit Amana
GitHub
parent
1826e50564
commit
e589b11c77
7 changed files with 192 additions and 135 deletions
|
|
@ -7,7 +7,8 @@ module Admin
|
|||
layout "admin"
|
||||
|
||||
def index
|
||||
@navigation_links = NavigationLink.ordered
|
||||
@default_nav_links = NavigationLink.default_section.ordered
|
||||
@other_nav_links = NavigationLink.other_section.ordered
|
||||
end
|
||||
|
||||
def create
|
||||
|
|
|
|||
|
|
@ -24,6 +24,22 @@
|
|||
<div data-svg-icon-upload-target="svgIconMessageValidate"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<fieldset aria-describedby="section-description">
|
||||
<legend class="fs-l">Section</legend>
|
||||
<div class="grid gap-4 grid-cols-2 l:grid-cols-3">
|
||||
<label class="rich-selector crayons-field crayons-field--radio">
|
||||
<%= form.radio_button :section, "default", checked: true, class: "crayons-radio" %>
|
||||
<div class="crayons-field__label">Default</div>
|
||||
</label>
|
||||
<label class="rich-selector crayons-field crayons-field--radio">
|
||||
<%= form.radio_button :section, "other", class: "crayons-radio" %>
|
||||
<div class="crayons-field__label">Other</div>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div id="section-description" class="alert alert-info">Determines which section the link will be displayed in</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<%= form.label :position %>
|
||||
<%= form.number_field :position, class: "form-control" %>
|
||||
|
|
|
|||
|
|
@ -2,26 +2,63 @@
|
|||
<div class="my-5"> Configure the left sidebar navigation links that appear at <a href="<%= app_url %>"><%= app_url %></a> using the form below:</div>
|
||||
|
||||
<%= render "add_navigation_link_modal" %>
|
||||
<% @navigation_links.each do |link| %>
|
||||
<div class="flex pt-5 items-center">
|
||||
<div class="mr-5"><%= link[:position] %></div>
|
||||
<div class="admin-navigation-links">
|
||||
<a href="<%= link[:url] %>" class="crayons-link crayons-link--block bg-base-20">
|
||||
<div class="crayons-icon crayons-icon--default">
|
||||
<%= link[:icon].html_safe %>
|
||||
<div class="pt-8">
|
||||
<h2 class="fw-bold fs-base">
|
||||
<%= community_name %>
|
||||
</h2>
|
||||
<ul class="ml-0">
|
||||
<% @default_nav_links.each_with_index do |link, index| %>
|
||||
<li class="flex <% index.zero? ? "pt-4" : "pt-5" %> items-center">
|
||||
<div class="mr-5"><%= link[:position] %></div>
|
||||
<div class="admin-navigation-links">
|
||||
<a href="<%= link[:url] %>" class="crayons-link crayons-link--block bg-base-20">
|
||||
<div class="crayons-icon crayons-icon--default">
|
||||
<%= link[:icon].html_safe %>
|
||||
</div>
|
||||
<%= link[:name] %><span id="reading-list-count" class="crayons-indicator"></span>
|
||||
</a>
|
||||
</div>
|
||||
<%= link[:name] %><span id="reading-list-count" class="crayons-indicator"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mx-5">
|
||||
<div class="mx-3">
|
||||
<%= render partial: "edit_navigation_link_modal", locals: { link: link } %>
|
||||
</div>
|
||||
<div class="mx-3">
|
||||
<%= link_to "Delete", admin_navigation_link_path(link), data: { confirm: "Are you sure?" }, method: :delete, class: "color-accent-danger" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="flex items-center mx-5">
|
||||
<div class="mx-3">
|
||||
<%= render partial: "edit_navigation_link_modal", locals: { link: link } %>
|
||||
</div>
|
||||
<div class="mx-3">
|
||||
<%= link_to "Delete", admin_navigation_link_path(link), data: { confirm: "Are you sure?" }, method: :delete, class: "color-accent-danger" %>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pb-8">
|
||||
<h2 class="mt-9 fw-bold fs-base">
|
||||
Other
|
||||
</h2>
|
||||
<ul class="ml-0">
|
||||
<% @other_nav_links.each_with_index do |link, index| %>
|
||||
<li class="flex <% if index == 0 %>pt-4<% else %>pt-5<% end %> items-center">
|
||||
<div class="mr-5"><%= link[:position] %></div>
|
||||
<div class="admin-navigation-links">
|
||||
<a href="<%= link[:url] %>" class="crayons-link crayons-link--block bg-base-20">
|
||||
<div class="crayons-icon crayons-icon--default">
|
||||
<%= link[:icon].html_safe %>
|
||||
</div>
|
||||
<%= link[:name] %><span id="reading-list-count" class="crayons-indicator"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mx-5">
|
||||
<div class="mx-3">
|
||||
<%= render partial: "edit_navigation_link_modal", locals: { link: link } %>
|
||||
</div>
|
||||
<div class="mx-3">
|
||||
<%= link_to "Delete", admin_navigation_link_path(link), data: { confirm: "Are you sure?" }, method: :delete, class: "color-accent-danger" %>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,44 @@
|
|||
<% nav_links = NavigationLink.all.ordered.to_a %>
|
||||
<% default_nav_links = NavigationLink.default_section.ordered.to_a %>
|
||||
<% other_nav_links = NavigationLink.other_section.ordered.to_a %>
|
||||
|
||||
<nav class="mb-6 <% unless user_signed_in? %>mt-4<% end %>" aria-label="Primary sidebar nav">
|
||||
<a href="<%= root_path %>" class="crayons-link crayons-link--block">
|
||||
<%= inline_svg_tag("twemoji/house.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
|
||||
Home
|
||||
</a>
|
||||
<% unless user_signed_in? %>
|
||||
<a href="<%= sign_up_path %>" class="crayons-link crayons-link--block fw-bold">
|
||||
<%= inline_svg_tag("twemoji/handshake.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
|
||||
Sign In/Up
|
||||
</a>
|
||||
<% end %>
|
||||
<div class="sidebar-navigation-links spec-sidebar-navigation-links">
|
||||
<% nav_links[0..4].each do |link| %>
|
||||
<nav class="mb-6 <% unless user_signed_in? %>mt-4<% end %>" aria-labelledby="default-nav-heading">
|
||||
<h2 id="default-nav-heading" class="mb-1 fs-base">
|
||||
<%= community_name %>
|
||||
</h2>
|
||||
<ul class="default-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
|
||||
<li>
|
||||
<a href="<%= root_path %>" class="crayons-link crayons-link--block">
|
||||
<%= inline_svg_tag("twemoji/house.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<% unless user_signed_in? %>
|
||||
<a href="<%= sign_up_path %>" class="crayons-link crayons-link--block fw-bold">
|
||||
<%= inline_svg_tag("twemoji/handshake.svg", class: "crayons-icon crayons-icon--default", aria_hidden: true) %>
|
||||
Sign In/Up
|
||||
</a>
|
||||
<% end %>
|
||||
</li>
|
||||
<% default_nav_links.each do |link| %>
|
||||
<%= render "layouts/sidebar_nav_link", link: link %>
|
||||
<% end %>
|
||||
|
||||
<% if nav_links.length > 5 %>
|
||||
<a href="javascript:void(0)" class="crayons-link crayons-link--secondary crayons-link--block crayons-link--block--indented fs-s js-nav-more-trigger">More...</a>
|
||||
|
||||
<div class="hidden js-nav-more spec-nav-more">
|
||||
<% nav_links[5..].each do |link| %>
|
||||
<%= render "layouts/sidebar_nav_link", link: link %>
|
||||
<% end %>
|
||||
<div class="flex justify-around p-4 mt-4 border-solid border-0 border-t-1 border-base-10">
|
||||
<%= render partial: "layouts/social_media" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<% if other_nav_links.any? %>
|
||||
<nav class="mb-6 <%= "mt-4" if user_signed_in? %>" aria-labelledby="other-nav-heading">
|
||||
<h2 id="other-nav-heading" class="mt-6 mb-2 fs-base">
|
||||
Other
|
||||
</h2>
|
||||
<ul class="other-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
|
||||
<% other_nav_links.each do |link| %>
|
||||
<%= render "layouts/sidebar_nav_link", link: link %>
|
||||
<% end %>
|
||||
</ul>
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<div class="flex justify-around p-4 mt-4 border-solid border-0 border-t-1 border-base-10">
|
||||
<%= render partial: "layouts/social_media" %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<% if !link.display_only_when_signed_in || (link.display_only_when_signed_in && user_signed_in?) %>
|
||||
<a href="<%= link.url %>" class="sidebar-navigation-link crayons-link crayons-link--block">
|
||||
<span class="crayons-icon crayons-icon--default">
|
||||
<%= link.icon.html_safe %>
|
||||
</span>
|
||||
<%= link.name %>
|
||||
<% if link.url.include?("readinglist") %>
|
||||
<span id="reading-list-count" class="crayons-indicator"></span>
|
||||
<% end %>
|
||||
</a>
|
||||
<li>
|
||||
<a href="<%= link.url %>" class="sidebar-navigation-link crayons-link crayons-link--block">
|
||||
<span class="crayons-icon crayons-icon--default">
|
||||
<%= link.icon.html_safe %>
|
||||
</span>
|
||||
<%= link.name %>
|
||||
<% if link.url.include?("readinglist") %>
|
||||
<span id="reading-list-count" class="crayons-indicator"></span>
|
||||
<% end %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
describe('Home Page Left Sidebar', () => {
|
||||
beforeEach(() => {
|
||||
cy.testSetup();
|
||||
});
|
||||
|
||||
it('should open the "More" links', () => {
|
||||
// Go to home page
|
||||
cy.visit('/');
|
||||
|
||||
// Click on the More... button in the nav
|
||||
cy.get('#page-content-inner').within(() => {
|
||||
cy.findByRole('link', { name: 'More...' })
|
||||
.click()
|
||||
.should('not.be.visible');
|
||||
cy.findByText('Nav link 5').should('be.visible');
|
||||
// visit another page with InstantClick
|
||||
cy.findByText('Nav link 0').click();
|
||||
});
|
||||
|
||||
// go back to the homepage with InstantClick
|
||||
cy.intercept('/?i=i').as('homepage');
|
||||
cy.findAllByRole('link', { name: 'DEV(local) Home' }).first().click();
|
||||
cy.wait('@homepage');
|
||||
|
||||
// Wait for home page to load
|
||||
cy.findByRole('heading', { name: 'Posts' });
|
||||
// repeat and assert
|
||||
cy.get('#page-content-inner').within(() => {
|
||||
cy.findByRole('link', { name: 'More...' })
|
||||
.click()
|
||||
.should('not.be.visible');
|
||||
cy.findByText('Nav link 5').should('be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -41,19 +41,64 @@ RSpec.describe "User visits a homepage", type: :system do
|
|||
display_only_when_signed_in: true,
|
||||
position: 1)
|
||||
create(:navigation_link,
|
||||
name: "Shop",
|
||||
icon: "<svg xmlns='http://www.w3.org/2000/svg'/></svg>",
|
||||
display_only_when_signed_in: false,
|
||||
position: 2)
|
||||
create(:navigation_link,
|
||||
:other_section_link,
|
||||
name: "Podcasts",
|
||||
icon: "<svg xmlns='http://www.w3.org/2000/svg'/></svg>",
|
||||
display_only_when_signed_in: false,
|
||||
position: nil)
|
||||
create(:navigation_link,
|
||||
:other_section_link,
|
||||
name: "Privacy Policy",
|
||||
icon: "<svg xmlns='http://www.w3.org/2000/svg'/></svg>",
|
||||
display_only_when_signed_in: false,
|
||||
position: 1)
|
||||
visit "/"
|
||||
end
|
||||
|
||||
it "shows the correct count of links" do
|
||||
visit "/"
|
||||
expect(page).to have_selector(".spec-sidebar-navigation-links", count: 2)
|
||||
|
||||
within(".spec-sidebar-navigation-links", match: :first) do
|
||||
it "shows expected number of links when signed out" do
|
||||
within("nav[aria-labelledby='default-nav-heading']", match: :first) do
|
||||
expect(page).to have_selector(".sidebar-navigation-link", count: 1)
|
||||
end
|
||||
|
||||
within("nav[aria-labelledby='other-nav-heading']", match: :first) do
|
||||
expect(page).to have_selector(".sidebar-navigation-link", count: 2)
|
||||
end
|
||||
end
|
||||
|
||||
it "shows the Other section when other nav links exist" do
|
||||
within("nav[aria-labelledby='other-nav-heading']", match: :first) do
|
||||
expect(page).to have_selector(".other-navigation-links")
|
||||
end
|
||||
|
||||
NavigationLink.other_section.destroy_all
|
||||
visit "/"
|
||||
|
||||
expect(page).not_to have_selector("nav[aria-labelledby='other-nav-heading']")
|
||||
end
|
||||
|
||||
it "hides link when display_only_when_signed_in is true" do
|
||||
within("nav[aria-labelledby='default-nav-heading']", match: :first) do
|
||||
expect(page).to have_selector(".default-navigation-links .sidebar-navigation-link", count: 1)
|
||||
end
|
||||
end
|
||||
|
||||
it "shows links in their correct section and order" do
|
||||
create(:navigation_link,
|
||||
name: "Mock",
|
||||
icon: "<svg xmlns='http://www.w3.org/2000/svg'/></svg>",
|
||||
display_only_when_signed_in: false,
|
||||
position: 3)
|
||||
visit "/"
|
||||
|
||||
within("nav[aria-labelledby='default-nav-heading']", match: :first) do
|
||||
expect(page).to have_selector(".default-navigation-links li:nth-child(3)", text: "Shop")
|
||||
expect(page).to have_selector(".default-navigation-links li:nth-child(4)", text: "Mock")
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
@ -115,7 +160,7 @@ RSpec.describe "User visits a homepage", type: :system do
|
|||
end
|
||||
end
|
||||
|
||||
context "when rendering < 5 navigation links" do
|
||||
describe "navigation_links" do
|
||||
let!(:navigation_link_1) do
|
||||
create(:navigation_link,
|
||||
name: "Reading List",
|
||||
|
|
@ -126,6 +171,7 @@ RSpec.describe "User visits a homepage", type: :system do
|
|||
end
|
||||
let!(:navigation_link_2) do
|
||||
create(:navigation_link,
|
||||
:other_section_link,
|
||||
name: "Podcasts",
|
||||
icon: "<svg xmlns='http://www.w3.org/2000/svg'/></svg>",
|
||||
display_only_when_signed_in: false,
|
||||
|
|
@ -143,59 +189,37 @@ RSpec.describe "User visits a homepage", type: :system do
|
|||
visit "/"
|
||||
end
|
||||
|
||||
it "shows the correct count of links" do
|
||||
within(".spec-sidebar-navigation-links", match: :first) do
|
||||
expect(page).to have_selector(".sidebar-navigation-link", count: 3)
|
||||
end
|
||||
end
|
||||
|
||||
it "shows the correct navigation_links" do
|
||||
within(".spec-sidebar-navigation-links", match: :first) do
|
||||
within("nav[aria-labelledby='default-nav-heading']", match: :first) do
|
||||
expect(page).to have_text(navigation_link_1.name)
|
||||
expect(page).to have_text(navigation_link_2.name)
|
||||
expect(page).to have_text(navigation_link_3.name)
|
||||
end
|
||||
|
||||
within("nav[aria-labelledby='other-nav-heading']", match: :first) do
|
||||
expect(page).to have_text(navigation_link_2.name)
|
||||
end
|
||||
end
|
||||
|
||||
it "shows the correct urls" do
|
||||
within(".spec-sidebar-navigation-links", match: :first) do
|
||||
within("nav[aria-labelledby='default-nav-heading']", match: :first) do
|
||||
expect(page).to have_link(href: navigation_link_1.url)
|
||||
expect(page).to have_link(href: navigation_link_2.url)
|
||||
expect(page).to have_link(href: navigation_link_3.url)
|
||||
end
|
||||
end
|
||||
|
||||
it "shows the correct order of the links" do
|
||||
within(".spec-sidebar-navigation-links", match: :first) do
|
||||
sidebar_navigation_link1 = page.find(".sidebar-navigation-link:nth-child(1)")
|
||||
expect(sidebar_navigation_link1).to have_text(navigation_link_1.name)
|
||||
|
||||
sidebar_navigation_link2 = page.find(".sidebar-navigation-link:nth-child(2)")
|
||||
expect(sidebar_navigation_link2).to have_text(navigation_link_3.name)
|
||||
|
||||
sidebar_navigation_link3 = page.find(".sidebar-navigation-link:nth-child(3)")
|
||||
expect(sidebar_navigation_link3).to have_text(navigation_link_2.name)
|
||||
within("nav[aria-labelledby='other-nav-heading']", match: :first) do
|
||||
expect(page).to have_link(href: navigation_link_2.url)
|
||||
end
|
||||
end
|
||||
|
||||
it "shows the count when the url /readinglist is added" do
|
||||
within(".spec-sidebar-navigation-links", match: :first) do
|
||||
within(".sidebar-navigation-link:nth-child(1)") do
|
||||
expect(page).to have_selector("#reading-list-count")
|
||||
end
|
||||
it "shows expected # of links when signed in" do
|
||||
within("nav[aria-labelledby='default-nav-heading']", match: :first) do
|
||||
expect(page).to have_selector(".sidebar-navigation-link", count: 2) # it's count: 1 when signed out
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
context "when rendering > 5 navigation links" do
|
||||
before do
|
||||
create_list(:navigation_link, 7)
|
||||
end
|
||||
|
||||
it "shows some in the 'More' section" do
|
||||
visit "/"
|
||||
within(".spec-nav-more", match: :first) do
|
||||
expect(page).to have_selector(".sidebar-navigation-link", count: 2)
|
||||
it "shows link when display_only_when_signed_in is true" do
|
||||
within("nav[aria-labelledby='default-nav-heading']", match: :first) do
|
||||
expect(page).to have_selector(".default-navigation-links li:nth-child(4)", text: "Beauty")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue