diff --git a/ComponentDocs.md b/ComponentDocs.md index cbd08e27..cc9f1717 100644 --- a/ComponentDocs.md +++ b/ComponentDocs.md @@ -25,7 +25,45 @@ Style classes : ### Example ```html -// ADD EXAMPLES FOR ALL THE DEFAULT COMPONENTS // + + ``` --- + +## Checkbox + +### Example + +```html + + +``` + +--- + +## Switches + +### Example + +```html + + +``` + +--- \ No newline at end of file diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html index 5acf8f94..fb151e25 100644 --- a/src/app/base-components/base-components.component.html +++ b/src/app/base-components/base-components.component.html @@ -106,4 +106,102 @@

Progressbar

+ +
+

Switch, Checkbox & Radio Buttons

+
+ + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + +
+
+ +
+ + + + + + + + + + + +
+
diff --git a/src/app/base-components/base-components.component.ts b/src/app/base-components/base-components.component.ts index ec2fc41d..5e484345 100644 --- a/src/app/base-components/base-components.component.ts +++ b/src/app/base-components/base-components.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; @Component({ selector: 'app-base-components', @@ -7,7 +8,15 @@ import { Component } from '@angular/core'; }) export class BaseComponentsComponent { - constructor() { } + constructor() { + } + + buttonStates = { + default_switch: false, + checked_switch: true, + disabled_switch: false, + disabled_checked_switch: true, + } pressedAlert(name: string) { alert(name + " was pressed!"); diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts index ad75c8b0..2703ed02 100644 --- a/src/app/base-components/base-components.module.ts +++ b/src/app/base-components/base-components.module.ts @@ -7,6 +7,9 @@ import { BaseComponentsComponent } from './base-components.component'; import {ButtonModule} from "../../core/components/buttons/button/button.module"; import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/button-outline.module"; import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module"; +import { SwitchModule } from 'src/core/components/switch/switch.module'; +import { CheckboxModule } from 'src/core/components/checkbox/checkbox.module'; +import { RadiobuttonModule } from 'src/core/components/radiobutton/radiobutton.module'; @NgModule({ declarations: [ @@ -18,7 +21,10 @@ import {ButtonTextModule} from "../../core/components/buttons/button-text/button ButtonModule, ButtonOutlineModule, ButtonTextModule, - ProgressbarModule + ProgressbarModule, + SwitchModule, + CheckboxModule, + RadiobuttonModule ] }) export class BaseComponentsModule { } diff --git a/src/core/components/checkbox/checkbox.component.html b/src/core/components/checkbox/checkbox.component.html new file mode 100644 index 00000000..07ea99a6 --- /dev/null +++ b/src/core/components/checkbox/checkbox.component.html @@ -0,0 +1,12 @@ +
+ + +
\ No newline at end of file diff --git a/src/core/components/checkbox/checkbox.component.scss b/src/core/components/checkbox/checkbox.component.scss new file mode 100644 index 00000000..f2433090 --- /dev/null +++ b/src/core/components/checkbox/checkbox.component.scss @@ -0,0 +1,39 @@ +@import "src/global-styles/theme-colors"; + +.checkbox-comp { + display: flex; + align-items: center; + + label { + padding-right: 16px; + } + + .checkbox { + appearance: none; + width: 26px; + height: 26px; + padding: 2px; + margin: 0; + box-sizing: border-box; + background-clip: content-box !important; + background: transparent; + border: 2px solid white; + border-radius: 8px; + cursor: pointer; + + &:checked { + background: $primary-default; + border-color: $primary-default; + } + + &.disabled { + cursor: default; + border-color: $white-disabled; + + &:checked { + background: $primary-disabled; + border-color: $primary-disabled; + } + } + } +} \ No newline at end of file diff --git a/src/core/components/checkbox/checkbox.component.spec.ts b/src/core/components/checkbox/checkbox.component.spec.ts new file mode 100644 index 00000000..18fc8db0 --- /dev/null +++ b/src/core/components/checkbox/checkbox.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CheckboxComponent } from './checkbox.component'; + +describe('CheckboxComponent', () => { + let component: CheckboxComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CheckboxComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CheckboxComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/core/components/checkbox/checkbox.component.ts b/src/core/components/checkbox/checkbox.component.ts new file mode 100644 index 00000000..0de823f9 --- /dev/null +++ b/src/core/components/checkbox/checkbox.component.ts @@ -0,0 +1,18 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'design-checkbox', + templateUrl: './checkbox.component.html', + styleUrls: ['./checkbox.component.scss'] +}) +export class CheckboxComponent { + + @Input() disabled: boolean = false; + + @Input() checked: boolean = false; + + @Input() label: string = ''; + @Input() id: string; + @Input() name: string; + +} diff --git a/src/core/components/checkbox/checkbox.module.ts b/src/core/components/checkbox/checkbox.module.ts new file mode 100644 index 00000000..1864ffb9 --- /dev/null +++ b/src/core/components/checkbox/checkbox.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CheckboxComponent } from './checkbox.component'; + + + +@NgModule({ + declarations: [ + CheckboxComponent + ], + exports: [ + CheckboxComponent + ], + imports: [ + CommonModule + ] +}) +export class CheckboxModule { } diff --git a/src/core/components/radiobutton/radiobutton.component.html b/src/core/components/radiobutton/radiobutton.component.html new file mode 100644 index 00000000..134a642d --- /dev/null +++ b/src/core/components/radiobutton/radiobutton.component.html @@ -0,0 +1,14 @@ +
+ + +
\ No newline at end of file diff --git a/src/core/components/radiobutton/radiobutton.component.scss b/src/core/components/radiobutton/radiobutton.component.scss new file mode 100644 index 00000000..0561d500 --- /dev/null +++ b/src/core/components/radiobutton/radiobutton.component.scss @@ -0,0 +1,39 @@ +@import "src/global-styles/theme-colors"; + +.radiobutton-comp { + display: flex; + align-items: center; + + label { + padding-right: 16px; + } + + .radiobutton { + appearance: none; + width: 26px; + height: 26px; + padding: 2px; + margin: 0; + box-sizing: border-box; + background-clip: content-box !important; + background: transparent; + border: 2px solid white; + border-radius: 50px; + cursor: pointer; + + &:checked { + background: $primary-default; + border-color: $primary-default; + } + + &.disabled { + cursor: default; + border-color: $white-disabled; + + &:checked { + background: $primary-disabled; + border-color: $primary-disabled; + } + } + } +} \ No newline at end of file diff --git a/src/core/components/radiobutton/radiobutton.component.spec.ts b/src/core/components/radiobutton/radiobutton.component.spec.ts new file mode 100644 index 00000000..147d4c82 --- /dev/null +++ b/src/core/components/radiobutton/radiobutton.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RadiobuttonComponent } from './radiobutton.component'; + +describe('RadiobuttonComponent', () => { + let component: RadiobuttonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RadiobuttonComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RadiobuttonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/core/components/radiobutton/radiobutton.component.ts b/src/core/components/radiobutton/radiobutton.component.ts new file mode 100644 index 00000000..9a258a60 --- /dev/null +++ b/src/core/components/radiobutton/radiobutton.component.ts @@ -0,0 +1,18 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'design-radiobutton', + templateUrl: './radiobutton.component.html', + styleUrls: ['./radiobutton.component.scss'] +}) +export class RadiobuttonComponent { + + @Input() disabled: boolean = false; + + @Input() checked: boolean = false; + + @Input() label: string = ''; + @Input() id: string; + @Input() name: string; + +} diff --git a/src/core/components/radiobutton/radiobutton.module.ts b/src/core/components/radiobutton/radiobutton.module.ts new file mode 100644 index 00000000..bfd5809c --- /dev/null +++ b/src/core/components/radiobutton/radiobutton.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RadiobuttonComponent } from './radiobutton.component'; + + + +@NgModule({ + declarations: [ + RadiobuttonComponent + ], + exports: [ + RadiobuttonComponent + ], + imports: [ + CommonModule + ] +}) +export class RadiobuttonModule { } diff --git a/src/core/components/switch/switch.component.html b/src/core/components/switch/switch.component.html new file mode 100644 index 00000000..1feeeef2 --- /dev/null +++ b/src/core/components/switch/switch.component.html @@ -0,0 +1,14 @@ +
+ + + +
\ No newline at end of file diff --git a/src/core/components/switch/switch.component.scss b/src/core/components/switch/switch.component.scss new file mode 100644 index 00000000..6356f123 --- /dev/null +++ b/src/core/components/switch/switch.component.scss @@ -0,0 +1,60 @@ +@import "src/global-styles/theme-colors"; + +.switch-comp { + display: flex; + align-items: center; + + label { + padding-right: 16px; + } + + .switch { + appearance: none; + box-sizing: border-box; + width: 44px; + height: 26px; + border-radius: 8px; + border: 2px solid white; + cursor: pointer; + padding: 2px 20px 2px 2px; + margin: 0; + transition: all 0.17s ease-in-out; + + &:checked { + padding: 2px 2px 2px 20px; + border-color: $primary-default; + + &.disabled { + border-color: $primary-disabled; + + &::after { + background-color: $primary-disabled; + } + } + + &::after { + background-color: $primary-default; + } + } + + &::after { + content: ""; + transition: all 0.17s ease-in-out; + width: 18px; + height: 18px; + box-sizing: border-box; + border-radius: 4px; + display: block; + background: white; + } + + &.disabled { + cursor: default; + border-color: $white-disabled; + + &::after { + background-color: $white-disabled; + } + } + } +} \ No newline at end of file diff --git a/src/core/components/switch/switch.component.spec.ts b/src/core/components/switch/switch.component.spec.ts new file mode 100644 index 00000000..c96d22c0 --- /dev/null +++ b/src/core/components/switch/switch.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SwitchComponent } from './switch.component'; + +describe('SwitchComponent', () => { + let component: SwitchComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SwitchComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SwitchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/core/components/switch/switch.component.ts b/src/core/components/switch/switch.component.ts new file mode 100644 index 00000000..fee021e2 --- /dev/null +++ b/src/core/components/switch/switch.component.ts @@ -0,0 +1,24 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'design-switch', + templateUrl: './switch.component.html', + styleUrls: ['./switch.component.scss'] +}) +export class SwitchComponent { + + @Input() disabled: boolean = false; + + @Input() checked: boolean = false; + @Output() checkedChange = new EventEmitter(); + + @Input() label: string = ''; + @Input() id: string; + @Input() name: string; + + onChange() { + this.checked = !this.checked; + this.checkedChange.emit(this.checked); + } + +} diff --git a/src/core/components/switch/switch.module.ts b/src/core/components/switch/switch.module.ts new file mode 100644 index 00000000..569f8912 --- /dev/null +++ b/src/core/components/switch/switch.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SwitchComponent } from './switch.component'; + + + +@NgModule({ + declarations: [ + SwitchComponent + ], + exports: [ + SwitchComponent + ], + imports: [ + CommonModule + ] +}) +export class SwitchModule { } diff --git a/src/global-styles/_theme-colors.scss b/src/global-styles/_theme-colors.scss index 4288af91..0bae353c 100644 --- a/src/global-styles/_theme-colors.scss +++ b/src/global-styles/_theme-colors.scss @@ -23,6 +23,11 @@ $info-default: #3281F6; $info-hover: #245EB5; $info-disabled: #2D456C; +/*white*/ +$white-default: #FFFFFF; +$white-hover: #FFFFFF; +$white-disabled: #748781; + /*fonts*/ $labeled-disabled-font: #748781; $checkbox-disabled-font: $labeled-disabled-font;