- <% component.with_footer do %>
-
diff --git a/config/routes.rb b/config/routes.rb
index 1a883e63e5..49ca12fce3 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -89,6 +89,7 @@
resources :lessons, only: :show do
resources :project_submissions, except: :show, controller: 'lessons/project_submissions'
resource :completion, only: %i[create destroy], controller: 'lessons/completions'
+ resource :course_contents, only: :show, controller: 'lessons/course_contents'
end
resources :project_submissions, only: :index do
diff --git a/spec/components/lessons/sidebar/completion_icon_component_spec.rb b/spec/components/lessons/sidebar/completion_icon_component_spec.rb
new file mode 100644
index 0000000000..cc4a9b0d41
--- /dev/null
+++ b/spec/components/lessons/sidebar/completion_icon_component_spec.rb
@@ -0,0 +1,41 @@
+require 'rails_helper'
+
+RSpec.describe Lessons::Sidebar::CompletionIconComponent, type: :component do
+ context 'when the lesson is completed' do
+ it 'fills the icon with the completed color' do
+ lesson = create(:lesson)
+ lesson.completed = true
+
+ render_inline(described_class.new(lesson:))
+
+ expect(page).to have_css('[data-test-id="lesson-sidebar-completion"].text-teal-600')
+ end
+
+ it 'labels the icon "Lesson completed"' do
+ lesson = create(:lesson)
+ lesson.completed = true
+
+ render_inline(described_class.new(lesson:))
+
+ expect(page).to have_css('svg title', text: 'Lesson completed', visible: :all)
+ end
+ end
+
+ context 'when the lesson is incomplete' do
+ it 'fills the icon with the incomplete color' do
+ lesson = create(:lesson)
+
+ render_inline(described_class.new(lesson:))
+
+ expect(page).to have_css('[data-test-id="lesson-sidebar-completion"].text-gray-300')
+ end
+
+ it 'labels the icon "Lesson not completed"' do
+ lesson = create(:lesson)
+
+ render_inline(described_class.new(lesson:))
+
+ expect(page).to have_css('svg title', text: 'Lesson not completed', visible: :all)
+ end
+ end
+end
diff --git a/spec/components/lessons/sidebar/lesson_component_spec.rb b/spec/components/lessons/sidebar/lesson_component_spec.rb
new file mode 100644
index 0000000000..15173b2cff
--- /dev/null
+++ b/spec/components/lessons/sidebar/lesson_component_spec.rb
@@ -0,0 +1,58 @@
+require 'rails_helper'
+
+RSpec.describe Lessons::Sidebar::LessonComponent, type: :component do
+ it 'renders the lesson title as a link' do
+ lesson = create(:lesson, title: 'HTML Basics')
+ component = described_class.new(lesson:, current_lesson: lesson)
+
+ render_inline(component)
+
+ expect(page).to have_link('HTML Basics', href: "/lessons/#{lesson.friendly_id}")
+ end
+
+ context 'when rendered as the current lesson' do
+ it 'marks the link with aria-current="page"' do
+ lesson = create(:lesson)
+ component = described_class.new(lesson:, current_lesson: lesson)
+
+ render_inline(component)
+
+ expect(page).to have_css('a[aria-current="page"]')
+ end
+ end
+
+ context 'when rendered as a sibling lesson' do
+ it 'does not set aria-current' do
+ lesson = create(:lesson)
+ other = create(:lesson, section: lesson.section)
+ component = described_class.new(lesson:, current_lesson: other)
+
+ render_inline(component)
+
+ expect(page).to have_no_css('a[aria-current]')
+ end
+ end
+
+ context 'when a current_user is given' do
+ it 'renders a completion icon' do
+ lesson = create(:lesson)
+ user = create(:user)
+ component = described_class.new(lesson:, current_lesson: lesson, current_user: user)
+
+ render_inline(component)
+
+ expect(page).to have_css('[data-test-id="lesson-sidebar-completion"]')
+ end
+ end
+
+ context 'when no current_user is given' do
+ it 'does not render the completion icon' do
+ lesson = create(:lesson)
+ component = described_class.new(lesson:, current_lesson: lesson)
+
+ render_inline(component)
+
+ expect(page).to have_no_css('[data-test-id="lesson-sidebar-completion"]')
+ end
+ end
+end
diff --git a/spec/components/lessons/sidebar/section_component_spec.rb b/spec/components/lessons/sidebar/section_component_spec.rb
new file mode 100644
index 0000000000..085a703bcb
--- /dev/null
+++ b/spec/components/lessons/sidebar/section_component_spec.rb
@@ -0,0 +1,51 @@
+require 'rails_helper'
+
+RSpec.describe Lessons::Sidebar::SectionComponent, type: :component do
+ it 'renders the section title' do
+ section = create(:section, title: 'Getting Started')
+ lesson = create(:lesson, section:)
+ component = described_class.new(section:, current_lesson: lesson)
+
+ render_inline(component)
+
+ expect(page).to have_content('Getting Started')
+ end
+
+ it 'renders one link per lesson in the section' do
+ section = create(:section)
+ lessons = create_list(:lesson, 3, section:)
+ section.reload
+ component = described_class.new(section:, current_lesson: lessons.first)
+
+ render_inline(component)
+
+ expect(page).to have_css('li', count: 3)
+ end
+
+ context 'when the section contains the current lesson' do
+ it 'renders
- <%= render NewTabTextLinkComponent.new(
- text: 'Edit on GitHub',
- href: github_edit_url(@lesson),
- classes: 'inline-flex items-center underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 text-sm'
- ) %>
- <%= render NewTabTextLinkComponent.new(
- text: 'Report broken link',
- href: github_report_url(@lesson, 'broken_link'),
- classes: 'inline-flex items-center underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 text-sm'
- ) %>
- <%= render NewTabTextLinkComponent.new(
- text: 'Report other issue/suggestion',
- href: github_report_url(@lesson, 'suggestion'),
- classes: 'inline-flex items-center underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 text-sm'
- ) %>
-
+ <%= render 'lessons/sub_navbar' %>
-
- <%= render NewTabTextLinkComponent.new(
- text: 'See lesson changelog',
- href: github_commits_url(@lesson),
- classes: 'inline-flex items-center underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 text-sm'
- ) %>
-
- <% end %>
- <% end %>
+
- <% if user_signed_in? && @lesson.accepts_submission? %>
-
+
-
- <% end %>
+
- <%= render 'lessons/project_solution', lesson: @lesson, project_submission: @project_submission %>
-
-
+ <%= render 'lessons/header', lesson: @lesson %>
+
+
+ <%= render ContentContainerComponent.new(classes: 'xl:mx-0 pb-6', data_attributes: { lesson_toc_target: 'lessonContent' }) do |component| %>
+ <%= @lesson.body.html_safe %>
-
+
-
- <%= render 'lesson_buttons', lesson: @lesson, course: @lesson.course, user: @user %>
+ <% component.with_footer do %>
+
-
+ <%= render NewTabTextLinkComponent.new(
+ text: 'Edit on GitHub',
+ href: github_edit_url(@lesson),
+ classes: 'inline-flex items-center underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 text-sm'
+ ) %>
+ <%= render NewTabTextLinkComponent.new(
+ text: 'Report broken link',
+ href: github_report_url(@lesson, 'broken_link'),
+ classes: 'inline-flex items-center underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 text-sm'
+ ) %>
+ <%= render NewTabTextLinkComponent.new(
+ text: 'Report other issue/suggestion',
+ href: github_report_url(@lesson, 'suggestion'),
+ classes: 'inline-flex items-center underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 text-sm'
+ ) %>
+
+
+
+ <%= render NewTabTextLinkComponent.new(
+ text: 'See lesson changelog',
+ href: github_commits_url(@lesson),
+ classes: 'inline-flex items-center underline hover:no-underline text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-300 text-sm'
+ ) %>
+
+ <% end %>
+ <% end %>
+
+ <% if user_signed_in? && @lesson.accepts_submission? %>
+
+
+ <% end %>
+
+
+ <%= render 'lessons/project_solution', lesson: @lesson, project_submission: @project_submission %>
+
+
+ <%= render 'lesson_buttons', lesson: @lesson, course: @lesson.course, user: @user %>
+
+
with the open attribute' do
+ section = create(:section)
+ lesson = create(:lesson, section:)
+ component = described_class.new(section:, current_lesson: lesson)
+
+ render_inline(component)
+
+ expect(page).to have_css('details[open]')
+ end
+ end
+
+ context 'when the section does not contain the current lesson' do
+ it 'renders
without the open attribute' do
+ section = create(:section)
+ create(:lesson, section:)
+ other_section = create(:section, course: section.course)
+ other_lesson = create(:lesson, section: other_section)
+ component = described_class.new(section:, current_lesson: other_lesson)
+
+ render_inline(component)
+
+ expect(page).to have_css('details')
+ expect(page).to have_no_css('details[open]')
+ end
+ end
+end
diff --git a/spec/components/lessons/sidebar_component_spec.rb b/spec/components/lessons/sidebar_component_spec.rb
new file mode 100644
index 0000000000..ea7d32e890
--- /dev/null
+++ b/spec/components/lessons/sidebar_component_spec.rb
@@ -0,0 +1,108 @@
+require 'rails_helper'
+
+RSpec.describe Lessons::SidebarComponent, type: :component do
+ def setup_course
+ path = create(:path)
+ course = create(:course, path:)
+ section_one = create(:section, course:)
+ section_two = create(:section, course:)
+ lesson_one = create(:lesson, section: section_one)
+ lesson_two = create(:lesson, section: section_two)
+ { course:, sections: [section_one, section_two], lesson_one:, lesson_two: }
+ end
+
+ it 'renders both the off-canvas drawer and the static desktop aside' do
+ data = setup_course
+ component = described_class.new(
+ course: data[:course],
+ sections: data[:sections],
+ current_lesson: data[:lesson_one],
+ )
+
+ render_inline(component)
+
+ expect(page).to have_css('.lesson-sidebar-drawer')
+ expect(page).to have_css('[data-test-id="lesson-sidebar"]')
+ end
+
+ it 'renders a details element for each section' do
+ data = setup_course
+ component = described_class.new(
+ course: data[:course],
+ sections: data[:sections],
+ current_lesson: data[:lesson_one],
+ )
+
+ render_inline(component)
+
+ within '[data-test-id="lesson-sidebar"]' do
+ expect(page).to have_css('details', count: 2)
+ end
+ end
+
+ it 'opens only the section that contains the current lesson' do
+ data = setup_course
+ component = described_class.new(
+ course: data[:course],
+ sections: data[:sections],
+ current_lesson: data[:lesson_two],
+ )
+
+ render_inline(component)
+
+ within '[data-test-id="lesson-sidebar"]' do
+ expect(page).to have_css('details[open]', count: 1)
+ end
+ end
+
+ it 'links back to the course via the course title' do
+ data = setup_course
+ component = described_class.new(
+ course: data[:course],
+ sections: data[:sections],
+ current_lesson: data[:lesson_one],
+ )
+
+ render_inline(component)
+
+ within '[data-test-id="lesson-sidebar"]' do
+ expect(page).to have_link(data[:course].title)
+ end
+ end
+
+ context 'when a current_user is given' do
+ it 'renders a course-progress bar reflecting their completions' do
+ data = setup_course
+ user = create(:user)
+ create(:lesson_completion, user:, lesson: data[:lesson_one], course: data[:course])
+ component = described_class.new(
+ course: data[:course],
+ sections: data[:sections],
+ current_lesson: data[:lesson_one],
+ current_user: user,
+ )
+
+ render_inline(component)
+
+ within '[data-test-id="lesson-sidebar"]' do
+ expect(page).to have_css('[role="progressbar"][aria-valuenow="50"]')
+ expect(page).to have_text('50% complete')
+ end
+ end
+ end
+
+ context 'when no current_user is given' do
+ it 'does not render a progress bar' do
+ data = setup_course
+ component = described_class.new(
+ course: data[:course],
+ sections: data[:sections],
+ current_lesson: data[:lesson_one],
+ )
+
+ render_inline(component)
+
+ expect(page).to have_no_css('[role="progressbar"]')
+ end
+ end
+end
diff --git a/spec/requests/lessons/course_contents_spec.rb b/spec/requests/lessons/course_contents_spec.rb
new file mode 100644
index 0000000000..06c09c8644
--- /dev/null
+++ b/spec/requests/lessons/course_contents_spec.rb
@@ -0,0 +1,31 @@
+require 'rails_helper'
+
+RSpec.describe 'Lesson course contents' do
+ describe 'GET #show' do
+ let(:course) { create(:course, path: create(:path, default_path: true)) }
+ let(:section) { create(:section, course:) }
+ let(:lesson) { create(:lesson, section:) }
+
+ it 'renders the sidebar' do
+ get lesson_course_contents_path(lesson)
+
+ expect(response).to have_http_status(:success)
+ expect(response.body).to include(course.title)
+ end
+
+ context 'when signed in' do
+ let(:user) { create(:user) }
+
+ before { sign_in(user) }
+
+ it 'marks completed lessons across the whole course' do
+ sibling = create(:lesson, section:)
+ create(:lesson_completion, user:, lesson: sibling, course:)
+
+ get lesson_course_contents_path(lesson)
+
+ expect(response.body).to include('Lesson completed')
+ end
+ end
+ end
+end
diff --git a/spec/system/lessons/sidebar_spec.rb b/spec/system/lessons/sidebar_spec.rb
new file mode 100644
index 0000000000..e4bcb75bfe
--- /dev/null
+++ b/spec/system/lessons/sidebar_spec.rb
@@ -0,0 +1,38 @@
+require 'rails_helper'
+
+RSpec.describe 'Lesson show sidebar' do
+ let(:user) { create(:user) }
+ let(:course) { create(:course, path: create(:path, default_path: true)) }
+
+ def build_curriculum(course)
+ section_one = create(:section, position: 1, course:, title: 'Getting Started')
+ section_two = create(:section, position: 2, course:, title: 'Advanced Topics')
+ {
+ current: create(:lesson, position: 1, section: section_one, title: 'Intro'),
+ sibling: create(:lesson, position: 2, section: section_one, title: 'Next Steps'),
+ other: create(:lesson, position: 1, section: section_two, title: 'Deep Dive')
+ }
+ end
+
+ before do
+ sign_in(user)
+ page.driver.resize(1400, 900)
+ end
+
+ it 'keeps manually expanded sections open after navigating' do
+ lessons = build_curriculum(course)
+
+ visit lesson_path(lessons[:current])
+
+ within('[data-test-id="lesson-sidebar"]') do
+ find('summary', text: 'Advanced Topics').click
+ click_link lessons[:other].title
+ end
+
+ within('[data-test-id="lesson-sidebar"]') do
+ expect(page).to have_css('details[open]', text: 'Advanced Topics')
+ expect(page).to have_css('details[open]', text: 'Getting Started')
+ expect(page).to have_css('a[aria-current="page"]', text: 'Deep Dive')
+ end
+ end
+end