JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: update onboarding tour: overview step

Browse Source 
WHAT:
updated overview step of onboarding tour. It shows upload data methods instead of tour steps now

WHY:
new onboarding tour

Change-Id: I7ffe9b2b91c2e17dd0c27e5e80a15301f6de16aa
This commit is contained in:
VitaliiShpital 2020-12-04 14:47:12 +02:00 committed by Vitalii Shpital
parent d5f1245cc7
commit 701474acd5
15 changed files with 159 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/satellite/src/components/onboardingTour/steps/AddPaymentStep.vue
View File

@ -160,12 +160,12 @@ export default class AddPaymentStep extends Vue {
.payment-step {
font-family: 'font_regular', sans-serif;
margin-top: 75px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 0 140px 200px 140px;
padding: 0 0 200px 0;
max-width: 750px;
position: relative;
&__title {
@ -302,18 +302,4 @@ export default class AddPaymentStep extends Vue {
border-top: 1px solid #afb7c1;
border-bottom: 1px solid #afb7c1;
}
@media screen and (max-width: 1550px) {
.payment-step {
padding: 0 70px 200px 70px;
}
}
@media screen and (max-width: 800px) {
.payment-step {
padding: 0 25px 200px 25px;
}
}
</style>

30
web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
View File

@ -8,27 +8,35 @@ import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import FourthStepIcon from '@/../static/images/common/four.svg';
import FirstStepIcon from '@/../static/images/common/one.svg';
import ThirdStepIcon from '@/../static/images/common/three.svg';
import SecondStepIcon from '@/../static/images/common/two.svg';
import { RouteConfig } from '@/router';
@Component({
components: {
VButton,
FirstStepIcon,
ThirdStepIcon,
SecondStepIcon,
FourthStepIcon,
},
})
export default class OverviewStep extends Vue {
/**
* Holds button click logic.
* Sets tour state to adding payment method state.
* Redirects to next step (adding payment method).
*/
public onClick(): void {
this.$emit('setAddPaymentState');
public onAddPaymentClick(): void {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.PaymentStep).path);
}
/**
* Holds button click logic.
* Redirects to next step (creating access grant).
*/
public onCreateGrantClick(): void {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
}
/**
* Indicates if paywall is enabled.
*/
public get isPaywallEnabled(): boolean {
return this.$store.state.paymentsModule.isPaywallEnabled;
}
}
</script>

73
web/satellite/src/components/onboardingTour/steps/overviewStep.html
View File

@ -2,50 +2,47 @@
<!--See LICENSE for copying information.-->
<div class="overview-area">
<h1 class="overview-area__title">Welcome to Storj</h1>
<h1 class="overview-area__title">
Welcome to Storj.
<br/>
Let’s Get Started.
</h1>
<p class="overview-area__sub-title">
You’re just a few steps away from uploading your first object to the 100% secure, decentralized cloud. After
adding payment, you’ll create a project, API key, get set up with Storj, and start uploading objects.
Follow the docs to start storing data using method below.
</p>
<div class="overview-area__steps-area">
<div class="overview-area__steps-area__step">
<FirstStepIcon class="overview-area__steps-area__step__icon"/>
<img class="overview-step-image" src="@/../static/images/onboardingTour/card.png" alt="card image">
<h2 class="overview-area__steps-area__step__title">Add Payment</h2>
<span class="overview-area__steps-area__step__subtitle">
Get 50 GB free to try Storj. Cancel anytime.
</span>
</div>
<div class="overview-area__steps-area__step second-step">
<SecondStepIcon class="overview-area__steps-area__step__icon"/>
<img class="overview-step-image" src="@/../static/images/onboardingTour/project.jpg" alt="project image">
<h2 class="overview-area__steps-area__step__title">Name Your Project</h2>
<span class="overview-area__steps-area__step__subtitle">
Projects are where buckets are created for storing data.
</span>
</div>
<div class="overview-area__steps-area__step third-step">
<ThirdStepIcon class="overview-area__steps-area__step__icon"/>
<img class="overview-step-image" src="@/../static/images/onboardingTour/api-key.jpg" alt="api keys image">
<h2 class="overview-area__steps-area__step__title">Create an API Key</h2>
<span class="overview-area__steps-area__step__subtitle">
Generate access to your project to upload data.
</span>
</div>
<div class="overview-area__steps-area__step">
<FourthStepIcon class="overview-area__steps-area__step__icon"/>
<img class="overview-step-image" src="@/../static/images/onboardingTour/uplink.jpg" alt="uplink image">
<h2 class="overview-area__steps-area__step__title">Upload Data</h2>
<span class="overview-area__steps-area__step__subtitle">
Store your data on the secure, decentralized cloud.
</span>
<img class="overview-area__steps-area__step__image" src="@/../static/images/onboardingTour/cli.png" alt="cli image">
<h2 class="overview-area__steps-area__step__title">CLI Tool</h2>
<p class="overview-area__steps-area__step__info">
Quickly upload data directly through the command line interface.
</p>
<a
class="overview-area__steps-area__step__link"
href="https://documentation.storj.io/setup/cli"
target="_blank"
ref="noopener noreferrer"
>
CLI Docs >
</a>
</div>
</div>
<div class="overview-area__divider"/>
<p class="overview-area__next-label">Next</p>
<VButton
class="get-started-button"
label="Get Started"
width="251px"
height="56px"
:on-press="onClick"
v-if="isPaywallEnabled"
class="overview-area__cta"
label="Add a Payment Method"
width="252px"
height="48px"
:on-press="onAddPaymentClick"
/>
<VButton
v-else
class="overview-area__cta"
label="Create an Access Grant"
width="252px"
height="48px"
:on-press="onCreateGrantClick"
/>
</div>

95
web/satellite/src/components/onboardingTour/steps/overviewStep.scss
View File

@ -8,8 +8,7 @@ h2 {
}
.overview-area {
width: auto;
padding: 75px;
padding: 60px 75px;
display: flex;
flex-direction: column;
align-items: center;
@ -17,47 +16,38 @@ h2 {
font-family: 'font_regular', sans-serif;
background-color: #fff;
border-radius: 6px;
margin-top: 25px;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 32px;
line-height: 39px;
color: #1b2533;
margin-bottom: 25px;
margin: 0 0 15px 0;
font-weight: bold;
font-size: 32px;
line-height: 47px;
text-align: center;
}
&__sub-title {
font-size: 16px;
line-height: 26px;
color: #354049;
margin-bottom: 60px;
margin: 0 0 60px 0;
text-align: center;
max-width: 815px;
font-size: 14px;
line-height: 22px;
color: #000;
}
&__steps-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
margin-bottom: 60px;
&__step {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
max-width: 190px;
width: 190px;
&__icon {
position: absolute;
top: -15px;
left: 80px;
}
&__title {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 26px;
text-align: center;
@ -65,51 +55,50 @@ h2 {
margin: 15px 0 5px 0;
}
&__subtitle {
font-family: 'font_regular', sans-serif;
&__info {
font-weight: 300;
font-size: 14px;
line-height: 17px;
text-align: center;
color: #61666b;
color: #1b2533;
word-break: break-word;
}
&__link {
margin-top: 30px;
font-family: 'font_bold', sans-serif;
font-size: 16px;
line-height: 26px;
color: #0068dc;
justify-self: flex-end;
}
}
}
&__divider {
width: 100%;
height: 1px;
background-color: rgba(118, 131, 148, 0.4);
}
&__next-label {
font-weight: normal;
font-size: 16px;
line-height: 26px;
color: #768394;
margin: 30px 0;
}
}
.second-step {
margin: 0 25px 0 50px;
}
.third-step {
margin: 0 50px 0 25px;
}
@media screen and (max-width: 1450px) {
@media screen and (max-width: 1050px) {
.overview-area {
padding: 75px 30px;
}
.second-step {
margin: 0 10px 0 20px;
}
.third-step {
margin: 0 20px 0 10px;
padding: 60px 30px;
}
}
@media screen and (max-width: 900px) {
.overview-area {
&__steps-area {
flex-direction: column;
&__step {
margin: 0 0 30px 0;
}
}
padding: 30px 20px;
}
}

BIN
web/satellite/static/images/onboardingTour/api-key.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
web/satellite/static/images/onboardingTour/card.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
web/satellite/static/images/onboardingTour/cli.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
web/satellite/static/images/onboardingTour/developer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
web/satellite/static/images/onboardingTour/filezilla.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
web/satellite/static/images/onboardingTour/gateway.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
web/satellite/static/images/onboardingTour/project.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

BIN
web/satellite/static/images/onboardingTour/uplink.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.9 KiB

1
web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts
View File

@ -6,7 +6,6 @@ import Vuex from 'vuex';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
import { RouteConfig } from '@/router';

23
web/satellite/tests/unit/onboardingTour/steps/OverviewStep.spec.ts
View File

@ -1,18 +1,33 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
import Vuex from 'vuex';
import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
import { PaymentsHttpApi } from '@/api/payments';
import { router } from '@/router';
import { makePaymentsModule, PAYMENTS_MUTATIONS } from '@/store/modules/payments';
import { mount } from '@vue/test-utils';
describe('OverviewStep.vue', () => {
const paymentsApi = new PaymentsHttpApi();
const paymentsModule = makePaymentsModule(paymentsApi);
const store = new Vuex.Store({ modules: { paymentsModule }});
describe('OverviewStep.vue', (): void => {
it('renders correctly', async (): Promise<void> => {
const wrapper = mount(OverviewStep);
const wrapper = mount(OverviewStep, {
router,
store,
});
await store.commit(PAYMENTS_MUTATIONS.SET_PAYWALL_ENABLED_STATUS, true);
expect(wrapper).toMatchSnapshot();
await wrapper.find('.get-started-button').trigger('click');
await store.commit(PAYMENTS_MUTATIONS.SET_PAYWALL_ENABLED_STATUS, false);
expect(wrapper.emitted()).toHaveProperty('setAddPaymentState');
expect(wrapper).toMatchSnapshot();
});
});

77
web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap
View File

@ -2,45 +2,52 @@
exports[`OverviewStep.vue renders correctly 1`] = `
<div class="overview-area">
<h1 class="overview-area__title">Welcome to Storj</h1>
<h1 class="overview-area__title">
Welcome to Storj.
<br>
Let’s Get Started.
</h1>
<p class="overview-area__sub-title">
You’re just a few steps away from uploading your first object to the 100% secure, decentralized cloud. After
adding payment, you’ll create a project, API key, get set up with Storj, and start uploading objects.
Follow the docs to start storing data using method below.
</p>
<div class="overview-area__steps-area">
<div class="overview-area__steps-area__step"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="overview-area__steps-area__step__icon">
<circle cx="15" cy="15" r="15" fill="#519CFF"></circle>
<path d="M17.0916 9.36364H14.7791L11.8984 11.1875V13.3693L14.5632 11.6989H14.6314V21H17.0916V9.36364Z" fill="white"></path>
</svg> <img src="@/../static/images/onboardingTour/card.png" alt="card image" class="overview-step-image">
<h2 class="overview-area__steps-area__step__title">Add Payment</h2> <span class="overview-area__steps-area__step__subtitle">
Get 50 GB free to try Storj. Cancel anytime.
</span>
</div>
<div class="overview-area__steps-area__step second-step"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="overview-area__steps-area__step__icon">
<circle cx="15" cy="15" r="15" fill="#519CFF"></circle>
<path d="M11.4041 21H19.6996V18.9886H14.8132V18.9091L16.5121 17.2443C18.9041 15.0625 19.5462 13.9716 19.5462 12.6477C19.5462 10.6307 17.8984 9.20455 15.4041 9.20455C12.9609 9.20455 11.2848 10.6648 11.2905 12.9489H13.6257C13.62 11.8352 14.3246 11.1534 15.3871 11.1534C16.4098 11.1534 17.1712 11.7898 17.1712 12.8125C17.1712 13.7386 16.603 14.375 15.5462 15.392L11.4041 19.2273V21Z" fill="white"></path>
</svg> <img src="@/../static/images/onboardingTour/project.jpg" alt="project image" class="overview-step-image">
<h2 class="overview-area__steps-area__step__title">Name Your Project</h2> <span class="overview-area__steps-area__step__subtitle">
Projects are where buckets are created for storing data.
</span>
</div>
<div class="overview-area__steps-area__step third-step"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="overview-area__steps-area__step__icon">
<circle cx="15" cy="15" r="15" fill="#519CFF"></circle>
<path d="M15.4709 21.1591C18.0845 21.1591 19.9538 19.7216 19.9482 17.733C19.9538 16.2841 19.0334 15.25 17.3232 15.0341V14.9432C18.6243 14.7102 19.522 13.7898 19.5163 12.483C19.522 10.6477 17.9141 9.20455 15.505 9.20455C13.1186 9.20455 11.3232 10.6023 11.2891 12.6136H13.647C13.6754 11.7273 14.4879 11.1534 15.4936 11.1534C16.4879 11.1534 17.1527 11.7557 17.147 12.6307C17.1527 13.5455 16.3743 14.1648 15.255 14.1648H14.1697V15.9716H15.255C16.5732 15.9716 17.397 16.6307 17.3913 17.5682C17.397 18.4943 16.6016 19.1307 15.4766 19.1307C14.3913 19.1307 13.5788 18.5625 13.5334 17.7102H11.0561C11.0959 19.7443 12.9141 21.1591 15.4709 21.1591Z" fill="white"></path>
</svg> <img src="@/../static/images/onboardingTour/api-key.jpg" alt="api keys image" class="overview-step-image">
<h2 class="overview-area__steps-area__step__title">Create an API Key</h2> <span class="overview-area__steps-area__step__subtitle">
Generate access to your project to upload data.
</span>
</div>
<div class="overview-area__steps-area__step"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="overview-area__steps-area__step__icon">
<circle cx="15" cy="15" r="15" fill="#2582FF"></circle>
<path d="M10.8452 18.9545H16.4304V21H18.7827V18.9545H20.2259V16.983H18.7827V9.36364H15.7031L10.8452 17.017V18.9545ZM16.4759 16.983H13.3224V16.892L16.3849 12.0455H16.4759V16.983Z" fill="white"></path>
</svg> <img src="@/../static/images/onboardingTour/uplink.jpg" alt="uplink image" class="overview-step-image">
<h2 class="overview-area__steps-area__step__title">Upload Data</h2> <span class="overview-area__steps-area__step__subtitle">
Store your data on the secure, decentralized cloud.
</span>
<div class="overview-area__steps-area__step"><img src="@/../static/images/onboardingTour/cli.png" alt="cli image" class="overview-area__steps-area__step__image">
<h2 class="overview-area__steps-area__step__title">CLI Tool</h2>
<p class="overview-area__steps-area__step__info">
Quickly upload data directly through the command line interface.
</p> <a href="https://documentation.storj.io/setup/cli" target="_blank" class="overview-area__steps-area__step__link">
CLI Docs &gt;
</a>
</div>
</div>
<div class="get-started-button container" style="width: 251px; height: 56px;"><span class="label">Get Started</span></div>
<div class="overview-area__divider"></div>
<p class="overview-area__next-label">Next</p>
<div class="overview-area__cta container" style="width: 252px; height: 48px;"><span class="label">Add a Payment Method</span></div>
</div>
`;
exports[`OverviewStep.vue renders correctly 2`] = `
<div class="overview-area">
<h1 class="overview-area__title">
Welcome to Storj.
<br>
Let’s Get Started.
</h1>
<p class="overview-area__sub-title">
Follow the docs to start storing data using method below.
</p>
<div class="overview-area__steps-area">
<div class="overview-area__steps-area__step"><img src="@/../static/images/onboardingTour/cli.png" alt="cli image" class="overview-area__steps-area__step__image">
<h2 class="overview-area__steps-area__step__title">CLI Tool</h2>
<p class="overview-area__steps-area__step__info">
Quickly upload data directly through the command line interface.
</p> <a href="https://documentation.storj.io/setup/cli" target="_blank" class="overview-area__steps-area__step__link">
CLI Docs &gt;
</a>
</div>
</div>
<div class="overview-area__divider"></div>
<p class="overview-area__next-label">Next</p>
<div class="overview-area__cta container" style="width: 252px; height: 48px;"><span class="label">Create an Access Grant</span></div>
</div>
`;