fix(form) : add checkbox form + fix sprit + add new svg

src/app/shared/components/checkbox-form/checkbox-form.component.html

+<button
+  (click)="clicked()"
+  [ngClass]="{ selected: isChecked }"
+  fxLayout="row"
+  fxLayoutAlign=" center"
+  fxLayoutGap="17px"
+>
+  <div class="checkmark">
+    <svg class="validate" aria-hidden="true">
+      <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+    </svg>
+  </div>
+  <svg aria-hidden="true">
+    <use [attr.xlink:href]="'assets/form/sprite.svg#' + iconSvg"></use>
+  </svg>
+  <p>{{ text }}</p>
+</button>

src/app/shared/components/checkbox-form/checkbox-form.component.scss

+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+
+svg {
+  width: 40px;
+  height: 100%;
+  fill: $secondary-color;
+  stroke: $secondary-color;
+  &.validate {
+    width: 13px;
+    height: 100%;
+    stroke: $green-1;
+    display: none;
+  }
+}
+
+button {
+  width: 296px;
+  background: $grey-6;
+  border-radius: 4px;
+  padding: 0 16px;
+  height: 65px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  margin: 8px 0;
+  &.selected {
+    background: $green-1;
+    .validate {
+      display: initial;
+    }
+    p {
+      color: $white;
+    }
+    .checkmark {
+      width: 20px;
+      height: 20px;
+      border: none;
+    }
+  }
+  p {
+    @include cn-bold-16;
+  }
+  .checkmark {
+    width: 18px;
+    height: 18px;
+    background: $white;
+    border: 1px solid $grey-3;
+  }
+}

src/app/shared/components/checkbox-form/checkbox-form.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CheckboxFormComponent } from './checkbox-form.component';
+
+describe('CheckboxFormComponent', () => {
+  let component: CheckboxFormComponent;
+  let fixture: ComponentFixture<CheckboxFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CheckboxFormComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CheckboxFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/checkbox-form/checkbox-form.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-checkbox-form',
+  templateUrl: './checkbox-form.component.html',
+  styleUrls: ['./checkbox-form.component.scss'],
+})
+export class CheckboxFormComponent implements OnInit {
+  @Input() public isChecked: boolean;
+  @Input() public text: string;
+  @Input() public iconSvg: string;
+  @Output() checkEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  clicked() {
+    this.isChecked = !this.isChecked;
+    this.checkEvent.emit(this.isChecked);
+  }
+}

src/app/shared/components/index.ts

@@ -8,6 +8,7 @@ import { ValidatorFormComponent } from './validator-form/validator-form.componen
 import { CreateAccountFormComponent } from './create-account-form/create-account-form.component';
 import { AddressAutocompleteComponent } from './address-autocomplete/address-autocomplete.component';
 import { StructureTypePickerComponent } from './structure-type-picker/structure-type-picker.component';
+import { CheckboxFormComponent } from './checkbox-form/checkbox-form.component';
 // tslint:disable-next-line: max-line-length
 export {
   LogoCardComponent,
@@ -20,6 +21,7 @@ export {
   CreateAccountFormComponent,
   AddressAutocompleteComponent,
   StructureTypePickerComponent,
+  CheckboxFormComponent,
 };
 
 // tslint:disable-next-line:variable-name
@@ -34,4 +36,5 @@ export const SharedComponents = [
   CreateAccountFormComponent,
   AddressAutocompleteComponent,
   StructureTypePickerComponent,
+  CheckboxFormComponent,
 ];

src/app/shared/components/structure-type-picker/structure-type-picker.component.html

@@ -20,7 +20,7 @@
       [ngClass]="{ selectedChoice: choice == pickedChoice }"
     >
       <svg *ngIf="choice == pickedChoice" class="validate" aria-hidden="true">
-        <use [attr.xlink:href]="'assets/form/sprite.svg#validateVector'"></use>
+        <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
       </svg>
       {{ choice }}
     </button>

src/app/shared/components/structure-type-picker/structure-type-picker.component.scss

@@ -89,5 +89,6 @@ svg {
     width: 13px;
     height: 10px;
     margin-left: -17px;
+    stroke: $white;
   }
 }

src/app/shared/shared.module.ts

@@ -10,7 +10,13 @@ import { SvgIconComponent } from './components/svg-icon/svg-icon.component';
 import { AddressAutocompleteComponent } from './components/address-autocomplete/address-autocomplete.component';
 @NgModule({
   imports: [CommonModule, RouterModule, FlexLayoutModule, ReactiveFormsModule],
-  declarations: [...SharedPipes, ...SharedComponents, ...SharedDirectives, SvgIconComponent, AddressAutocompleteComponent],
+  declarations: [
+    ...SharedPipes,
+    ...SharedComponents,
+    ...SharedDirectives,
+    SvgIconComponent,
+    AddressAutocompleteComponent,
+  ],
   exports: [
     ...SharedPipes,
     ...SharedComponents,

src/assets/form/sprite.svg

@@ -13,8 +13,8 @@
 <path d="M11.3335 4.44447C11.3335 4.44447 10.9446 4.88892 10.1668 4.88892C9.38905 4.88892 9.00016 4.44447 9.00016 4.44447V1.7778C9.00016 1.7778 9.38905 2.22225 10.1668 2.22225C10.9446 2.22225 11.3335 1.7778 11.3335 1.7778V4.44447Z" stroke="none"/>
 </symbol>
 
-<symbol id="validateVector" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.00002 5.81818L5.8889 9L12 2" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<symbol id="checkVector" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.00002 5.81818L5.8889 9L12 2" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
 </symbol>
 
 <symbol id="typeStructure_private" viewBox="0 0 20 45" xmlns="http://www.w3.org/2000/svg">
@@ -95,4 +95,31 @@
 <rect x="13.124" y="20" width="2" height="1" fill="white" stroke="none"/>
 </symbol>
 
+<symbol id="accesLibre" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
+<rect x="22" y="8" width="10" height="28" fill="white" stroke="#4F4F4F" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5V37L23 43.5L23 0.5L10 5ZM19 23C19 21.8954 19.8954 21 21 21V25C19.8954 25 19 24.1046 19 23Z" stroke="none"/>
+<rect x="33" y="35" width="3" height="2" fill="#4F4F4F" stroke="none"/>
+<rect x="7" y="35" width="3" height="2" fill="#4F4F4F" stroke="none"/>
+</symbol>
+
+<symbol id="surRdv" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1111 6C12.1293 6 11.3333 6.79594 11.3333 7.77778V9.55556H7.77778C6.79594 9.55556 6 10.3515 6 11.3333V36.2222C6 37.2041 6.79594 38 7.77778 38H36.2222C37.2041 38 38 37.2041 38 36.2222V11.3333C38 10.3515 37.2041 9.55556 36.2222 9.55556H32.6667V7.77778C32.6667 6.79594 31.8707 6 30.8889 6C29.9071 6 29.1111 6.79594 29.1111 7.77778V9.55556H14.8889V7.77778C14.8889 6.79594 14.093 6 13.1111 6ZM7.77778 16.2222V36.2222H36.2222V16.2222H7.77778Z" fill="#4F4F4F" stroke="none"/>
+<rect x="7.77783" y="15.7778" width="28.4444" height="20.4444" fill="white" stroke="none"/>
+<path d="M16.6666 26.3636L20.8148 30L27.3333 22" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+<symbol id="telephoneVisio" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M25.0419 30.0674L20.6788 34.4303L11.9528 25.7043L16.3158 21.3413C16.8339 20.8232 16.8339 19.9845 16.3158 19.4678L9.6911 12.8431C9.17304 12.325 8.33434 12.325 7.81763 12.8431L3.45459 17.2061C3.45459 31.8693 14.5112 42.9285 29.177 42.9285L33.5401 38.5656C34.0581 38.0474 34.0581 37.2088 33.5401 36.692L26.9153 30.0674C26.3986 29.5506 25.5587 29.5506 25.0419 30.0674Z" fill="#4F4F4F" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.6799 24.3312C32.7893 21.4558 31.6409 18.5585 29.2978 16.5266C26.982 14.5183 23.9945 13.785 21.192 14.2656L19.7273 12.5443C23.4085 11.5374 27.5084 12.3275 30.6082 15.0156C33.7509 17.741 35.1078 21.7601 34.5737 25.5945L32.6799 24.3312Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.935 24.7419C26.8751 23.2343 26.2165 21.7539 24.9866 20.6874C23.7682 19.6308 22.2271 19.1867 20.7391 19.3283L19.2476 17.5754C21.6325 16.923 24.2887 17.4349 26.2969 19.1764C28.333 20.9421 29.2121 23.546 28.866 26.0301L26.935 24.7419Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.9258 23.3934C39.2657 18.7937 37.5047 14.0969 33.7522 10.8427C30.0465 7.62914 25.2228 6.53725 20.7641 7.46158L19.3115 5.75444C24.6404 4.29671 30.5754 5.44046 35.0626 9.33177C39.6119 13.277 41.5761 19.095 40.8029 24.6457L38.9258 23.3934Z" stroke="none"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="44" height="44" fill="white"/>
+</clipPath>
+</defs>
+</symbol>
+
 </svg>
\ No newline at end of file