Commit 00cd763a authored by Martin Wortschack's avatar Martin Wortschack

Merge branch...

Merge branch '217345-follow-up-from-move-registrations-progress-bar-and-make-it-configurable' into 'master'

Use semantic HTML in Progress Bar component

See merge request gitlab-org/gitlab!40380
parents 6f811da0 2d894a4e
......@@ -29,9 +29,9 @@ export default {
};
</script>
<template>
<div class="bar d-flex">
<div v-for="(step, index) in steps" :key="index" :class="classObject(index)">
{{ index + 1 }}. {{ step }}
</div>
</div>
<ol class="bar gl-display-flex gl-p-0 gl-m-0">
<li v-for="(step, index) in steps" :key="index" :class="classObject(index)">
{{ step }}
</li>
</ol>
</template>
......@@ -43,6 +43,9 @@ $subscriptions-full-width-lg: 541px;
width: 400px;
}
list-style-position: inside;
list-style-type: decimal;
.phase {
border-bottom: 5px solid $gray-100;
color: $gray-500;
......
---
title: Use semantic HTML in Progress Bar component
merge_request: 40380
author:
type: changed
......@@ -13,7 +13,7 @@ RSpec.describe 'New group screen', :js do
it 'shows the progress bar with the correct steps' do
expect(page).to have_content('Create your group')
expect(page).to have_content('1. Your profile 2. Your GitLab group 3. Your first project')
expect(page).to have_content('Your profile Your GitLab group Your first project')
end
it 'autofills the group path' do
......
......@@ -19,12 +19,12 @@ RSpec.describe 'New project screen', :js do
it 'shows the progress bar with the correct steps' do
expect(subject).to have_content('Create/import your first project')
expect(subject).to have_content('1. Your profile 2. Your GitLab group 3. Your first project')
expect(subject).to have_content('Your profile Your GitLab group Your first project')
end
context 'when in the subscription flow' do
let(:in_subscription_flow) { true }
it { is_expected.to have_content('1. Your profile 2. Checkout 3. Your GitLab group 4. Your first project') }
it { is_expected.to have_content('Your profile Checkout Your GitLab group Your first project') }
end
end
......@@ -22,14 +22,14 @@ RSpec.describe 'Welcome screen', :js do
it 'shows the welcome page without a progress bar' do
expect(page).to have_content('Welcome to GitLab.com')
expect(page).not_to have_content('1. Your profile')
expect(page).not_to have_content('Your profile')
end
context 'when in the subscription flow' do
let(:in_subscription_flow) { true }
it 'shows the progress bar with the correct steps' do
expect(page).to have_content('1. Your profile 2. Checkout 3. Your GitLab group')
expect(page).to have_content('Your profile Checkout Your GitLab group')
end
end
......@@ -37,14 +37,14 @@ RSpec.describe 'Welcome screen', :js do
let(:part_of_onboarding_issues_experiment) { true }
it 'shows the progress bar with the correct steps' do
expect(page).to have_content('1. Your profile 2. Your GitLab group 3. Your first project')
expect(page).to have_content('Your profile Your GitLab group Your first project')
end
context 'when in the invitation flow' do
let(:in_invitation_flow) { true }
it 'does not show the progress bar' do
expect(page).not_to have_content('1. Your profile')
expect(page).not_to have_content('Your profile')
end
end
end
......@@ -54,7 +54,7 @@ RSpec.describe 'Welcome screen', :js do
let(:part_of_onboarding_issues_experiment) { true }
it 'shows the progress bar with the correct steps' do
expect(page).to have_content('1. Your profile 2. Checkout 3. Your GitLab group 4. Your first project')
expect(page).to have_content('Your profile Checkout Your GitLab group Your first project')
end
end
end
......
......@@ -22,21 +22,21 @@ RSpec.describe 'Welcome screen', :js do
it 'shows the group edit page without a progress bar' do
expect(page).to have_content('Create your group')
expect(page).not_to have_content('1. Your profile')
expect(page).not_to have_content('Your profile')
end
context 'when showing for a new user' do
let(:params) { { new_user: true } }
it 'shows the progress bar with the correct steps' do
expect(page).to have_content('1. Your profile 2. Checkout 3. Your GitLab group')
expect(page).to have_content('Your profile Checkout Your GitLab group')
end
context 'when part of the onboarding issues experiment' do
let(:part_of_onboarding_issues_experiment) { true }
it 'shows the progress bar with the correct steps' do
expect(page).to have_content('1. Your profile 2. Checkout 3. Your GitLab group 4. Your first project')
expect(page).to have_content('Your profile Checkout Your GitLab group Your first project')
end
end
end
......
......@@ -10,8 +10,8 @@ describe('Progress Bar', () => {
});
};
const firstStep = () => wrapper.find('.bar div:nth-child(1)');
const secondStep = () => wrapper.find('.bar div:nth-child(2)');
const firstStep = () => wrapper.find('.bar li:nth-child(1)');
const secondStep = () => wrapper.find('.bar li:nth-child(2)');
beforeEach(() => {
createComponent({ currentStep: 'b', steps: ['a', 'b'] });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment