[deploy] Add footer toggle to Onboarding's user-follow slide (#7266)
This commit is contained in:
Mac Siri
GitHub
parent
73c16c9a9d
commit
f4c9df2d8e
4 changed files with 94 additions and 21 deletions
|
|
@ -45,6 +45,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.toggle-bottom {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
// terms and conditions view
|
||||
.terms-and-conditions-wrapper {
|
||||
$content-height: 358px;
|
||||
|
|
@ -149,12 +153,29 @@
|
|||
align-self: flex-end;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
border-top: 2px solid var(--box-darker);
|
||||
line-height: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.selection-status-content {
|
||||
display: block;
|
||||
padding: $su-4;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: $su-4;
|
||||
font-weight: $fw-bold;
|
||||
line-height: $lh-base;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
color: var(--accent-brand);
|
||||
font-size: $fs-s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -169,6 +190,7 @@
|
|||
.onboarding-modal-scroll-container {
|
||||
height: auto;
|
||||
min-height: 436px;
|
||||
border-bottom: 1px solid var(--base-20);
|
||||
@media screen and (min-width: $breakpoint-s) {
|
||||
max-height: 500px;
|
||||
overflow-y: scroll;
|
||||
|
|
|
|||
|
|
@ -299,12 +299,33 @@ describe('<Onboarding />', () => {
|
|||
const followUsers = onboardingSlides.find(<FollowUsers />);
|
||||
|
||||
onboardingSlides.find('.user').first().simulate('click');
|
||||
expect(onboardingSlides.find('p').last().text()).toBe(
|
||||
"You're following 1 person",
|
||||
);
|
||||
onboardingSlides.find('.user').last().simulate('click');
|
||||
expect(onboardingSlides.find('p').last().text()).toBe(
|
||||
"You're following 2 people",
|
||||
);
|
||||
expect(followUsers.state('selectedUsers').length).toBe(2);
|
||||
onboardingSlides.find('.next-button').simulate('click');
|
||||
await flushPromises();
|
||||
expect(onboardingSlides.state().currentSlide).toBe(5);
|
||||
});
|
||||
|
||||
test('should have a functioning select-all toggle', async () => {
|
||||
fetch.once({});
|
||||
const followUsers = onboardingSlides.find(<FollowUsers />);
|
||||
|
||||
expect(onboardingSlides.find('button').last().text()).toBe(
|
||||
'Select all 3 people',
|
||||
);
|
||||
onboardingSlides.find('button').last().simulate('click');
|
||||
expect(onboardingSlides.find('button').last().text()).toBe(
|
||||
'Deselect all',
|
||||
);
|
||||
expect(followUsers.state('selectedUsers').length).toBe(3);
|
||||
});
|
||||
|
||||
it('should step backward', async () => {
|
||||
fetch.once(fakeTagsResponse);
|
||||
onboardingSlides.find('.back-button').simulate('click');
|
||||
|
|
|
|||
|
|
@ -294,7 +294,7 @@ preact-render-spy (1 nodes)
|
|||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="onboarding-content">
|
||||
<div class="onboarding-content toggle-bottom">
|
||||
<header class="onboarding-content-header">
|
||||
<h1 class="title">Suggested people to follow</h1>
|
||||
<h2 class="subtitle">Let's review a few things first</h2>
|
||||
|
|
@ -304,7 +304,7 @@ preact-render-spy (1 nodes)
|
|||
type="button"
|
||||
onClick={[Function onClick]}
|
||||
onKeyDown={[Function onKeyDown]}
|
||||
class="user content-row selected"
|
||||
class="user content-row unselected"
|
||||
>
|
||||
<figure class="user-avatar-container">
|
||||
<img
|
||||
|
|
@ -321,14 +321,14 @@ preact-render-spy (1 nodes)
|
|||
type="button"
|
||||
class="user-following-status"
|
||||
>
|
||||
Following
|
||||
Follow
|
||||
</button>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={[Function onClick]}
|
||||
onKeyDown={[Function onKeyDown]}
|
||||
class="user content-row selected"
|
||||
class="user content-row unselected"
|
||||
>
|
||||
<figure class="user-avatar-container">
|
||||
<img
|
||||
|
|
@ -345,14 +345,14 @@ preact-render-spy (1 nodes)
|
|||
type="button"
|
||||
class="user-following-status"
|
||||
>
|
||||
Following
|
||||
Follow
|
||||
</button>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={[Function onClick]}
|
||||
onKeyDown={[Function onKeyDown]}
|
||||
class="user content-row selected"
|
||||
class="user content-row unselected"
|
||||
>
|
||||
<figure class="user-avatar-container">
|
||||
<img
|
||||
|
|
@ -369,18 +369,19 @@ preact-render-spy (1 nodes)
|
|||
type="button"
|
||||
class="user-following-status"
|
||||
>
|
||||
Following
|
||||
Follow
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="onboarding-selection-status">
|
||||
<div class="selection-status-content">
|
||||
<p>You're not following anyone</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={[Function onClick]}
|
||||
>
|
||||
Select All ✅
|
||||
Select all 3 people
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@ class FollowUsers extends Component {
|
|||
},
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.setState({ users: data, selectedUsers: data });
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
this.setState({ users: data });
|
||||
});
|
||||
|
||||
const csrfToken = getContentOfToken('csrf-token');
|
||||
|
|
@ -79,7 +79,7 @@ class FollowUsers extends Component {
|
|||
let { selectedUsers } = this.state;
|
||||
|
||||
if (!selectedUsers.includes(user)) {
|
||||
this.setState(prevState => ({
|
||||
this.setState((prevState) => ({
|
||||
selectedUsers: [...prevState.selectedUsers, user],
|
||||
}));
|
||||
} else {
|
||||
|
|
@ -92,20 +92,52 @@ class FollowUsers extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
userFollowCountMessage() {
|
||||
const { users, selectedUsers } = this.state;
|
||||
let followingStatus;
|
||||
if (selectedUsers.length === 0) {
|
||||
followingStatus = "You're not following anyone";
|
||||
} else if (selectedUsers.length === 1) {
|
||||
followingStatus = "You're following 1 person";
|
||||
} else if (selectedUsers.length === users.length) {
|
||||
followingStatus = `You're following ${selectedUsers.length} people (everyone)`;
|
||||
} else {
|
||||
followingStatus = `You're following ${selectedUsers.length} people`;
|
||||
}
|
||||
|
||||
return followingStatus;
|
||||
}
|
||||
|
||||
renderFollowToggle() {
|
||||
const { users, selectedUsers } = this.state;
|
||||
if (users.length === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return (
|
||||
<button type="button" onClick={() => this.handleSelectAll()}>
|
||||
{selectedUsers.length !== users.length
|
||||
? `Select all ${users.length} people`
|
||||
: 'Deselect all'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { users, selectedUsers } = this.state;
|
||||
const { prev } = this.props;
|
||||
|
||||
return (
|
||||
<div className="onboarding-main">
|
||||
<Navigation prev={prev} next={this.handleComplete} />
|
||||
<div className="onboarding-content">
|
||||
<div className="onboarding-content toggle-bottom">
|
||||
<header className="onboarding-content-header">
|
||||
<h1 className="title">Suggested people to follow</h1>
|
||||
<h2 className="subtitle">Let's review a few things first</h2>
|
||||
</header>
|
||||
|
||||
<div className="onboarding-modal-scroll-container">
|
||||
{users.map(user => (
|
||||
{users.map((user) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => this.handleClick(user)}
|
||||
|
|
@ -136,11 +168,8 @@ class FollowUsers extends Component {
|
|||
</div>
|
||||
<div className="onboarding-selection-status">
|
||||
<div className="selection-status-content">
|
||||
<button type="button" onClick={() => this.handleSelectAll()}>
|
||||
Select All
|
||||
{' '}
|
||||
{selectedUsers.length === users.length ? '✅' : ''}
|
||||
</button>
|
||||
<p>{this.userFollowCountMessage()}</p>
|
||||
{this.renderFollowToggle()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue