Select all that apply.
+
Skip this step
diff --git a/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss b/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss
index 3332e3bc8..f817a1365 100644
--- a/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss
+++ b/src/app/onboarding/components/create-new-archive/create-new-archive.component.scss
@@ -1,6 +1,7 @@
/* @format */
@import '../welcome-screen/welcome-screen.component.scss';
@import 'variables';
+@import 'fonts';
form {
margin: 0;
@@ -230,3 +231,21 @@ h3 {
.new-account-screens-container {
width: 95%;
}
+
+.heading-container {
+ width: 50%;
+ & > .heading {
+ color: white;
+ font-family: 'UsualRegular', sans-serif;
+ }
+}
+
+.create-new-archive {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 64px;
+
+ @media screen and (max-width: 768px) {
+ flex-direction: column;
+ }
+}
diff --git a/src/app/onboarding/components/create-new-archive/create-new-archive.component.spec.ts b/src/app/onboarding/components/create-new-archive/create-new-archive.component.spec.ts
index cf0f50dc1..c142148d7 100644
--- a/src/app/onboarding/components/create-new-archive/create-new-archive.component.spec.ts
+++ b/src/app/onboarding/components/create-new-archive/create-new-archive.component.spec.ts
@@ -82,55 +82,6 @@ describe('CreateNewArchiveComponent #onboarding', () => {
expect(outputs.progress.emit).toHaveBeenCalledWith(0);
});
- it('should NOT show disabled-overlay when selectedValue is truthy', async () => {
- const { find, instance, fixture } = await shallow.render();
- instance.screen = 'create';
-
- const childComponent = find('pr-archive-type-select').componentInstance;
- childComponent.valueChange.emit('Some Value');
-
- fixture.detectChanges();
-
- const overlayDiv = find('.disabled-overlay');
-
- expect(overlayDiv.length).toBe(0);
- });
-
- it('should enable the next button if a name has been inputted', async () => {
- const { find, instance, fixture } = await shallow.render();
- instance.screen = 'create';
- const childComponent = find('pr-archive-type-select').componentInstance;
- childComponent.valueChange.emit('Some Value');
-
- instance.name = 'Some Name';
-
- fixture.detectChanges();
-
- const button = find('.chart-path').nativeElement;
-
- expect(button.disabled).toBe(false);
- });
-
- it('should show disabled-overlay when selectedValue is falsy', async () => {
- const { find, instance } = await shallow.render();
-
- instance.selectedValue = '';
- const overlayDiv = find('.disabled-overlay');
-
- expect(overlayDiv.length).toBe(1);
- });
-
- it('should show the goals screen after selecting a value and inputting a name and then clicking next', async () => {
- const { find, instance, fixture } = await shallow.render();
- instance.screen = 'create';
-
- find('.chart-path').triggerEventHandler('click', null);
-
- fixture.detectChanges();
-
- expect(instance.screen).toBe('goals');
- });
-
it('the next button should be disabled if no goals have been selected', async () => {
const { find, instance, fixture } = await shallow.render();
instance.screen = 'goals';
diff --git a/src/app/onboarding/components/create-new-archive/create-new-archive.component.ts b/src/app/onboarding/components/create-new-archive/create-new-archive.component.ts
index 46a4819cc..2497f4b1d 100644
--- a/src/app/onboarding/components/create-new-archive/create-new-archive.component.ts
+++ b/src/app/onboarding/components/create-new-archive/create-new-archive.component.ts
@@ -9,19 +9,29 @@ import {
OnDestroy,
Input,
} from '@angular/core';
-import { ArchiveVO } from '@models/archive-vo';
+import { ArchiveType, ArchiveVO } from '@models/archive-vo';
import { ApiService } from '@shared/services/api/api.service';
import { AnalyticsService } from '@shared/services/analytics/analytics.service';
import { MixpanelAction } from '@shared/services/mixpanel/mixpanel.service';
+import {
+ UntypedFormBuilder,
+ UntypedFormGroup,
+ Validators,
+} from '@angular/forms';
import {
reasons,
goals,
OnboardingTypes,
} from '../../shared/onboarding-screen';
import { Dialog } from '../../../dialog/dialog.service';
-import { ArchiveType } from '../../../models/archive-vo';
+import { archiveOptions } from '../glam/types/archive-types';
-type NewArchiveScreen = 'goals' | 'reasons' | 'create';
+type NewArchiveScreen =
+ | 'goals'
+ | 'reasons'
+ | 'create'
+ | 'start'
+ | 'name-archive';
@Component({
selector: 'pr-create-new-archive',
@@ -44,26 +54,46 @@ export class CreateNewArchiveComponent implements OnInit, OnDestroy {
public archiveType: string;
public archiveName: string = '';
- public screen: NewArchiveScreen = 'create';
+ public screen: NewArchiveScreen = 'start';
public loading: boolean = false;
public selectedGoals: string[] = [];
public selectedReasons: string[] = [];
public selectedValue: string = '';
- public name: string = '';
+ public nameForm: UntypedFormGroup;
public goals = goals;
public reasons = reasons;
+ public headerText = 'Personal';
archiveTypeTag: OnboardingTypes;
+ public buttonOptions = {
+ archiveType: 'Personal',
+ article: 'a',
+ };
+
+ public isGlam = false;
+
+ public name = '';
+
+ public buttonText = '';
skipOnboarding: Observable<{ name: string }>;
subscription: Subscription;
constructor(
+ private fb: UntypedFormBuilder,
private api: ApiService,
private dialog: Dialog,
private accountService: AccountService,
private analytics: AnalyticsService,
- ) {}
+ ) {
+ this.nameForm = fb.group({
+ name: ['', [Validators.required]],
+ });
+ this.isGlam = localStorage.getItem('isGlam') === 'true';
+ if (!this.isGlam) {
+ this.screen = 'create';
+ }
+ }
ngOnInit(): void {
if (this.pendingArchive) {
@@ -148,8 +178,9 @@ export class CreateNewArchiveComponent implements OnInit, OnDestroy {
public async onSubmit(): Promise
{
try {
this.loading = true;
+ const fullName = this.name;
const archive = new ArchiveVO({
- fullName: this.name,
+ fullName,
type: this.archiveType,
});
@@ -199,16 +230,6 @@ export class CreateNewArchiveComponent implements OnInit, OnDestroy {
}
}
- public onValueChange(value: {
- type: ArchiveType;
- tag: OnboardingTypes;
- }): void {
- this.selectedValue = `${value.type}+${value.tag}`;
- this.archiveType = value.type;
- this.archiveTypeTag = value.tag as OnboardingTypes;
- this.setName(this.archiveTypeTag);
- }
-
public makeMyArchive(): void {
const account = this.accountService.getAccount();
this.analytics.notifyObservers({
@@ -262,11 +283,42 @@ export class CreateNewArchiveComponent implements OnInit, OnDestroy {
private setName(archiveTypeTag: OnboardingTypes): void {
switch (archiveTypeTag) {
case OnboardingTypes.unsure:
- this.name = this.accountService.getAccount().fullName;
+ const name = this.accountService.getAccount().fullName;
+ this.name = name;
break;
default:
this.name = '';
break;
}
}
+
+ public getArchiveType = (type: string): string => {
+ return archiveOptions.find((val) => val.type === type).text;
+ };
+
+ public navigate(event): void {
+ this.screen = event;
+ }
+
+ public handleCreationScreenEvents(event: Record): void {
+ this.archiveTypeTag = event.tag as OnboardingTypes;
+ this.archiveType = event.type;
+ this.headerText = event.headerText;
+ this.screen = 'name-archive';
+ }
+
+ public navigateToGoals(event: string) {
+ this.name = event;
+ this.screen = 'goals';
+ }
+
+ public onValueChange(value: {
+ type: ArchiveType;
+ tag: OnboardingTypes;
+ }): void {
+ this.selectedValue = `${value.type}+${value.tag}`;
+ this.archiveType = value.type;
+ this.archiveTypeTag = value.tag as OnboardingTypes;
+ this.setName(this.archiveTypeTag);
+ }
}
diff --git a/src/app/onboarding/components/glam/types/archive-types.ts b/src/app/onboarding/components/glam/types/archive-types.ts
index cec1ea2f6..32aee7d25 100644
--- a/src/app/onboarding/components/glam/types/archive-types.ts
+++ b/src/app/onboarding/components/glam/types/archive-types.ts
@@ -57,3 +57,73 @@ export const archiveDescriptions = {
'type:other': '',
'type:unsure': '',
};
+
+export const archiveOptionsWithArticle = [
+ {
+ type: OnboardingTypes.myself,
+ text: 'a Personal',
+ },
+ {
+ type: OnboardingTypes.individual,
+ text: 'an Individual',
+ },
+ {
+ type: OnboardingTypes.family,
+ text: 'a Family',
+ },
+ {
+ type: OnboardingTypes.famhist,
+ text: 'a History',
+ },
+ {
+ type: OnboardingTypes.community,
+ text: 'a Community',
+ },
+ {
+ type: OnboardingTypes.org,
+ text: 'an Organization',
+ },
+ {
+ type: OnboardingTypes.other,
+ text: 'a Personal',
+ },
+ {
+ type: OnboardingTypes.unsure,
+ text: 'a Personal',
+ },
+];
+
+export const archiveCreationHeaderText = [
+ {
+ type: OnboardingTypes.myself,
+ text: 'Personal',
+ },
+ {
+ type: OnboardingTypes.individual,
+ text: 'Individual',
+ },
+ {
+ type: OnboardingTypes.family,
+ text: 'Family',
+ },
+ {
+ type: OnboardingTypes.famhist,
+ text: 'History',
+ },
+ {
+ type: OnboardingTypes.community,
+ text: 'Community',
+ },
+ {
+ type: OnboardingTypes.org,
+ text: 'Organization',
+ },
+ {
+ type: OnboardingTypes.other,
+ text: 'Personal',
+ },
+ {
+ type: OnboardingTypes.unsure,
+ text: 'Personal',
+ },
+];
\ No newline at end of file
diff --git a/src/app/onboarding/components/name-archive-screen/name-archive-screen.component.html b/src/app/onboarding/components/name-archive-screen/name-archive-screen.component.html
new file mode 100644
index 000000000..a79425c35
--- /dev/null
+++ b/src/app/onboarding/components/name-archive-screen/name-archive-screen.component.html
@@ -0,0 +1,47 @@
+
+
+
+ Name your new archive. This is the legal or official name of the person,
+ family, group, or organization the archive is about. You can edit the name
+ later if needed.
+
+
+
+
+
+
;
+
+ beforeEach(async () => {
+ shallow = new Shallow(NameArchiveScreenComponent, OnboardingModule).import(
+ ReactiveFormsModule,
+ );
+ });
+
+ it('should create', async () => {
+ const { instance } = await shallow.render();
+
+ expect(instance).toBeTruthy();
+ });
+
+ it('should initialize with default values', async () => {
+ const { instance } = await shallow.render();
+
+ expect(instance.nameForm).toBeTruthy();
+ expect(instance.nameForm.controls['name'].value).toBe('');
+ });
+
+ it('should patch the form value with input name on init', async () => {
+ const { instance } = await shallow.render({
+ bind: { name: 'Test Archive' },
+ });
+ instance.ngOnInit();
+
+ expect(instance.nameForm.controls['name'].value).toBe('Test Archive');
+ });
+
+ it('should emit backToCreate event when backToCreate is called', async () => {
+ const { instance, outputs } = await shallow.render();
+ instance.backToCreate();
+
+ expect(outputs.backToCreateEmitter.emit).toHaveBeenCalledWith('create');
+ });
+
+ it('should emit archiveCreated event with form value when createArchive is called and form is valid', async () => {
+ const { instance, outputs } = await shallow.render();
+ instance.nameForm.controls['name'].setValue('Valid Archive Name');
+ instance.createArchive();
+
+ expect(outputs.archiveCreatedEmitter.emit).toHaveBeenCalledWith(
+ 'Valid Archive Name',
+ );
+ });
+
+ it('should not emit archiveCreated event when createArchive is called and form is invalid', async () => {
+ const { instance, outputs } = await shallow.render();
+ instance.nameForm.controls['name'].setValue('');
+ instance.createArchive();
+
+ expect(outputs.archiveCreatedEmitter.emit).not.toHaveBeenCalled();
+ });
+
+ it('should call backToCreate when Back button is clicked', async () => {
+ const { fixture, instance } = await shallow.render();
+ spyOn(instance, 'backToCreate');
+ const backButton = fixture.debugElement.query(By.css('.back-button'));
+ backButton.triggerEventHandler('buttonClick', null);
+
+ expect(instance.backToCreate).toHaveBeenCalled();
+ });
+
+ it('should call createArchive when create archive button is clicked', async () => {
+ const { fixture, instance } = await shallow.render();
+ spyOn(instance, 'createArchive');
+ instance.nameForm.controls['name'].setValue('Valid Archive Name');
+ fixture.detectChanges();
+
+ const createButton = fixture.debugElement.query(
+ By.css('.create-archive-button'),
+ );
+ createButton.triggerEventHandler('buttonClick', null);
+
+ expect(instance.createArchive).toHaveBeenCalled();
+ });
+
+ it('should call createArchive when create archive button is clicked and form is valid', async () => {
+ const { fixture, instance } = await shallow.render();
+ instance.nameForm.controls['name'].setValue('Valid Archive Name');
+ fixture.detectChanges();
+
+ spyOn(instance, 'createArchive');
+
+ const createButton = fixture.debugElement.query(
+ By.css('.create-archive-button'),
+ );
+
+ createButton.triggerEventHandler('buttonClick', null);
+
+ expect(instance.createArchive).toHaveBeenCalled();
+ });
+});
diff --git a/src/app/onboarding/components/name-archive-screen/name-archive-screen.component.ts b/src/app/onboarding/components/name-archive-screen/name-archive-screen.component.ts
new file mode 100644
index 000000000..8340d634f
--- /dev/null
+++ b/src/app/onboarding/components/name-archive-screen/name-archive-screen.component.ts
@@ -0,0 +1,40 @@
+/* @format */
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+ UntypedFormBuilder,
+ UntypedFormGroup,
+ Validators,
+} from '@angular/forms';
+
+@Component({
+ selector: 'pr-name-archive-screen',
+ templateUrl: './name-archive-screen.component.html',
+ styleUrl: './name-archive-screen.component.scss',
+})
+export class NameArchiveScreenComponent implements OnInit {
+ public nameForm: UntypedFormGroup;
+
+ @Input() name = '';
+ @Output() backToCreateEmitter = new EventEmitter();
+ @Output() archiveCreatedEmitter = new EventEmitter();
+
+ constructor(private fb: UntypedFormBuilder) {
+ this.nameForm = fb.group({
+ name: ['', [Validators.required]],
+ });
+ }
+
+ ngOnInit(): void {
+ this.nameForm.patchValue({ name: this.name });
+ }
+
+ public backToCreate(): void {
+ this.backToCreateEmitter.emit('create');
+ }
+
+ public createArchive(): void {
+ if (this.nameForm.valid) {
+ this.archiveCreatedEmitter.emit(this.nameForm.value.name);
+ }
+ }
+}
diff --git a/src/app/onboarding/components/onboarding/onboarding.component.scss b/src/app/onboarding/components/onboarding/onboarding.component.scss
index 38e9e1ae7..a2710cbd0 100644
--- a/src/app/onboarding/components/onboarding/onboarding.component.scss
+++ b/src/app/onboarding/components/onboarding/onboarding.component.scss
@@ -1,7 +1,19 @@
/* @format */
+@import 'variables';
+
$mobile-breakpoint: 950px;
$mobile-transition-breakpoint: 1200px;
+:host(.glam) {
+ background: $linear-gradient-background;
+ display: block;
+ height: 100vh;
+
+ @include beforeDesktop {
+ height: auto;
+ }
+}
+
.onboarding {
@media only screen and (max-width: $mobile-transition-breakpoint) {
width: 75%;
@@ -10,7 +22,7 @@ $mobile-transition-breakpoint: 1200px;
width: auto;
margin: 20px;
}
- width: 50%;
+ width: 70%;
margin: 0 auto;
}
@@ -35,11 +47,18 @@ $mobile-transition-breakpoint: 1200px;
}
.progress-chunk {
+ opacity: 0.1;
&.completed {
background-color: #5261b7;
+ opacity: 1;
+ }
+
+ &.completed-glam {
+ background: linear-gradient(90deg, #8d0085 0%, #ff9400 100%);
+ opacity: 1;
}
width: 30%;
- height: 10px;
+ height: 4px;
background-color: #eaeaea;
transition: background-color 0.3s;
}
@@ -94,4 +113,7 @@ pr-create-new-archive {
display: flex;
align-items: center;
flex-direction: column;
+ @media screen and (max-width: 770px) {
+ flex-direction: column;
+ }
}
diff --git a/src/app/onboarding/components/onboarding/onboarding.component.ts b/src/app/onboarding/components/onboarding/onboarding.component.ts
index 46ee6997d..28e620f6f 100644
--- a/src/app/onboarding/components/onboarding/onboarding.component.ts
+++ b/src/app/onboarding/components/onboarding/onboarding.component.ts
@@ -1,6 +1,11 @@
/* @format */
import { Location } from '@angular/common';
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import {
+ ChangeDetectorRef,
+ Component,
+ HostBinding,
+ OnInit,
+} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { OnboardingScreen } from '@onboarding/shared/onboarding-screen';
import { ArchiveVO } from '@models/archive-vo';
@@ -31,6 +36,8 @@ export class OnboardingComponent implements OnInit {
public acceptedInvite: boolean = false;
+ public isGlam = false;
+
constructor(
private route: ActivatedRoute,
private location: Location,
@@ -43,6 +50,8 @@ export class OnboardingComponent implements OnInit {
if (route.snapshot.data.onboardingScreen) {
this.screen = route.snapshot.data.onboardingScreen as OnboardingScreen;
}
+
+ this.isGlam = localStorage.getItem('isGlam') === 'true';
}
ngOnInit(): void {
@@ -78,6 +87,10 @@ export class OnboardingComponent implements OnInit {
});
}
+ @HostBinding('class.glam') get glamClass() {
+ return this.isGlam;
+ }
+
public setScreen(screen: OnboardingScreen): void {
this.screen = screen;
if (this.selectedPendingArchive) {
@@ -134,7 +147,8 @@ export class OnboardingComponent implements OnInit {
public getProgressChunkClasses(num: number) {
return {
'progress-chunk': true,
- completed: this.progress >= num,
+ completed: this.progress >= num && !this.isGlam,
+ 'completed-glam': this.progress >= num && this.isGlam,
};
}
diff --git a/src/app/onboarding/components/select-archive-type-screen/select-archive-type-screen.component.html b/src/app/onboarding/components/select-archive-type-screen/select-archive-type-screen.component.html
new file mode 100644
index 000000000..7bf012464
--- /dev/null
+++ b/src/app/onboarding/components/select-archive-type-screen/select-archive-type-screen.component.html
@@ -0,0 +1,26 @@
+
+
+
+
With my first archive, I plan to capture and preserve material about…
+
+
+
+
;
+
+ beforeEach(async () => {
+ shallow = new Shallow(SelectArchiveTypeScreenComponent, OnboardingModule);
+ });
+
+ it('should create', async () => {
+ const { instance } = await shallow.render();
+
+ expect(instance).toBeTruthy();
+ });
+
+ it('should initialize with default values', async () => {
+ const { instance } = await shallow.render();
+
+ expect(instance.selectedValue).toBe('');
+ expect(instance.buttonText).toBe('');
+ expect(instance['headerText']).toBe('');
+ expect(instance['tag']).toBe('');
+ expect(instance['type']).toBe('');
+ });
+
+ it('should emit navigation event when navigate is called with start', async () => {
+ const { instance, outputs } = await shallow.render();
+ instance.navigate('start');
+
+ expect(outputs.navigationEmitter.emit).toHaveBeenCalledWith('start');
+ });
+
+ it('should emit submit event when navigate is called with other screen', async () => {
+ const { instance, outputs } = await shallow.render();
+ instance['type'] = 'mockType';
+ instance['tag'] = 'mockTag';
+ instance['headerText'] = 'mockHeaderText';
+
+ instance.navigate('name-archive');
+
+ expect(outputs.submitEmitter.emit).toHaveBeenCalledWith({
+ screen: 'name-archive',
+ type: 'mockType',
+ tag: 'mockTag',
+ headerText: 'mockHeaderText',
+ });
+ });
+
+ it('should call navigate with start when Back button is clicked', async () => {
+ const { fixture, instance } = await shallow.render();
+ spyOn(instance, 'navigate');
+ const backButton = fixture.debugElement.query(By.css('.back-button'));
+ backButton.triggerEventHandler('buttonClick', null);
+
+ expect(instance.navigate).toHaveBeenCalledWith('start');
+ });
+
+ it('should call navigate with name-archive when create archive button is clicked', async () => {
+ const { fixture, instance } = await shallow.render();
+ spyOn(instance, 'navigate');
+ instance.selectedValue = 'someValue';
+ fixture.detectChanges();
+
+ const createButton = fixture.debugElement.query(
+ By.css('.create-archive-button'),
+ );
+ createButton.triggerEventHandler('buttonClick', null);
+
+ expect(instance.navigate).toHaveBeenCalledWith('name-archive');
+ });
+});
diff --git a/src/app/onboarding/components/select-archive-type-screen/select-archive-type-screen.component.ts b/src/app/onboarding/components/select-archive-type-screen/select-archive-type-screen.component.ts
new file mode 100644
index 000000000..502d56291
--- /dev/null
+++ b/src/app/onboarding/components/select-archive-type-screen/select-archive-type-screen.component.ts
@@ -0,0 +1,45 @@
+/* @format */
+import { Component, Output, EventEmitter } from '@angular/core';
+import { generateElementText } from '../../utils/utils';
+import {
+ archiveOptionsWithArticle,
+ archiveCreationHeaderText,
+ archiveOptions,
+} from '../glam/types/archive-types';
+
+@Component({
+ selector: 'pr-select-archive-type-screen',
+ templateUrl: './select-archive-type-screen.component.html',
+ styleUrl: './select-archive-type-screen.component.scss',
+})
+export class SelectArchiveTypeScreenComponent {
+ selectedValue = '';
+ buttonText = '';
+ public headerText: string = '';
+ public tag: string = '';
+ public type: string = '';
+
+ @Output() navigationEmitter = new EventEmitter();
+ @Output() submitEmitter = new EventEmitter>();
+
+ public navigate(screen) {
+ if (screen === 'start') {
+ this.navigationEmitter.emit(screen);
+ } else {
+ this.submitEmitter.emit({
+ screen,
+ type: this.type,
+ tag: this.tag,
+ headerText: this.headerText,
+ });
+ }
+ }
+
+ public onValueChange(event: string): void {
+ this.tag = event;
+ this.type = archiveOptions.find((val) => val.type === event).value;
+ this.selectedValue = `${this.type}+${event}`;
+ this.buttonText = generateElementText(event, archiveOptionsWithArticle);
+ this.headerText = generateElementText(event, archiveCreationHeaderText);
+ }
+}
diff --git a/src/app/onboarding/onboarding.module.ts b/src/app/onboarding/onboarding.module.ts
index 2586e68bc..55eee5426 100644
--- a/src/app/onboarding/onboarding.module.ts
+++ b/src/app/onboarding/onboarding.module.ts
@@ -15,11 +15,17 @@ import { CoreModule } from '@core/core.module';
import { SkipOnboardingDialogComponent } from '@core/components/skip-onboarding-dialog/skip-onboarding-dialog.component';
import { DialogModule } from '../dialog/dialog.module';
import { DialogCdkModule } from '../dialog-cdk/dialog-cdk.module';
+import { ComponentsModule } from '../component-library/components.module';
import { OnboardingRoutingModule } from './onboarding.routes';
import { OnboardingComponent } from './components/onboarding/onboarding.component';
import { WelcomeScreenComponent } from './components/welcome-screen/welcome-screen.component';
import { CreateNewArchiveComponent } from './components/create-new-archive/create-new-archive.component';
import { ArchiveTypeSelectComponent } from './components/archive-type-select/archive-type-select.component';
+import { ArchiveCreationStartScreenComponent } from './components/archive-creation-start-screen/archive-creation-start-screen.component';
+import { SelectArchiveTypeScreenComponent } from './components/select-archive-type-screen/select-archive-type-screen.component';
+import { NameArchiveScreenComponent } from './components/name-archive-screen/name-archive-screen.component';
+import { GlamArchiveTypeSelectComponent } from './components/glam/archive-type-select/archive-type-select.component';
+import { ArchiveTypeIconComponent } from './components/glam/archive-type-icon/archive-type-icon.component';
@NgModule({
declarations: [
@@ -27,6 +33,9 @@ import { ArchiveTypeSelectComponent } from './components/archive-type-select/arc
WelcomeScreenComponent,
CreateNewArchiveComponent,
ArchiveTypeSelectComponent,
+ ArchiveCreationStartScreenComponent,
+ SelectArchiveTypeScreenComponent,
+ NameArchiveScreenComponent,
],
imports: [
CommonModule,
@@ -36,6 +45,9 @@ import { ArchiveTypeSelectComponent } from './components/archive-type-select/arc
DialogModule,
DialogCdkModule,
FontAwesomeModule,
+ ComponentsModule,
+ GlamArchiveTypeSelectComponent,
+ ArchiveTypeIconComponent,
],
})
export class OnboardingModule {
diff --git a/src/app/onboarding/utils/utils.ts b/src/app/onboarding/utils/utils.ts
new file mode 100644
index 000000000..1f41b3018
--- /dev/null
+++ b/src/app/onboarding/utils/utils.ts
@@ -0,0 +1,6 @@
+export function generateElementText(
+ type: string,
+ options: Record[]
+ ): string {
+ return options.find((val) => val.type === type).text;
+ }
\ No newline at end of file
diff --git a/src/assets/svg/onboarding/arrow-right.svg b/src/assets/svg/onboarding/arrow-right.svg
new file mode 100644
index 000000000..70b04f9c7
--- /dev/null
+++ b/src/assets/svg/onboarding/arrow-right.svg
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/src/assets/svg/onboarding/back.svg b/src/assets/svg/onboarding/back.svg
new file mode 100644
index 000000000..beaa6ab8c
--- /dev/null
+++ b/src/assets/svg/onboarding/back.svg
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/src/assets/svg/onboarding/plus.svg b/src/assets/svg/onboarding/plus.svg
new file mode 100644
index 000000000..34a6eea90
--- /dev/null
+++ b/src/assets/svg/onboarding/plus.svg
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 000000000..8c4423c24
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,21 @@
+@import 'fonts';
+
+@mixin pageTitle {
+ font-family: 'UsualLight', sans-serif;
+ font-size: 32px;
+ font-style: normal;
+ font-weight: 350;
+ line-height: 48px;
+ letter-spacing: -0.64px;
+ color: white;
+ padding: 0;
+}
+
+@mixin pageText {
+ font-family: 'UsualLight', sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 22px;
+ color: white;
+}
\ No newline at end of file
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 3bd3f355c..84eecef47 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -101,6 +101,8 @@ $form-label-dark: rgba(255, 255, 255, 0.64);
$form-error-red: rgba(240, 68, 56, 1);
+$linear-gradient-background: linear-gradient(90deg, #131b4a 0%, #364493 100%);
+
@mixin public-centered {
max-width: $public-max-width;
margin-left: auto;