Base Components | Add checkboxes, switches and radiobuttons

ComponentDocs.md

@@ -25,7 +25,45 @@ Style classes :
 ### Example
 
 ```html
-// ADD EXAMPLES FOR ALL THE DEFAULT COMPONENTS //
+<design-radiobutton
+  label="Disabled Checked"
+  [disabled]="true"
+  [checked]="true"
+  [id]="'disabled_checked_radiobutton'"
+  [name]="'radiobutton'">
+</design-radiobutton>
 ```
 
 ---
+
+## Checkbox
+
+### Example
+
+```html
+<design-checkbox
+  label="Disabled Checked"
+  [disabled]="true"
+  [checked]="true"
+  [id]="'disabled_checked_checkbox'"
+  [name]="'disabled_checked_checkbox'">
+</design-checkbox>
+```
+
+---
+
+## Switches
+
+### Example
+
+```html
+<design-switch
+  label="Disabled Checked"
+  [disabled]="true"
+  [(checked)]="buttonStates.disabled_checked_switch"
+  [id]="'disabled_checked_switch'"
+  [name]="'disabled_checked_switch'">
+</design-switch>
+```
+
+---

src/app/base-components/base-components.component.html

@@ -106,4 +106,102 @@ <h2>Progressbar</h2>
   <design-progressbar value="50"></design-progressbar>
   <design-progressbar value="0"></design-progressbar>
 </div>
+
+<div class="componentContainer">
+  <h2>Switch, Checkbox & Radio Buttons</h2>
+  <div class="switches">
+    <design-switch
+      label="Default"
+      [(checked)]="buttonStates.default_switch"
+      [id]="'default_switch'"
+      [name]="'default_switch'">
+    </design-switch>
+
+    <design-switch
+      label="Checked"
+      [(checked)]="buttonStates.checked_switch"
+      [id]="'checked_switch'"
+      [name]="'checked_switch'">
+    </design-switch>
+
+    <design-switch
+      label="Disabled"
+      [(checked)]="buttonStates.disabled_switch"
+      [disabled]="true"
+      [id]="'disabled_switch'"
+      [name]="'disabled_switch'">
+    </design-switch>
+
+    <design-switch
+      label="Disabled Checked"
+      [disabled]="true"
+      [(checked)]="buttonStates.disabled_checked_switch"
+      [id]="'disabled_checked_switch'"
+      [name]="'disabled_checked_switch'">
+    </design-switch>
+
+
+  </div>
+  <br>
+  <div class="checkboxes">
+    <design-checkbox
+      label="Default"
+      [id]="'default_checkbox'"
+      [name]="'default_checkbox'">
+    </design-checkbox>
+
+    <design-checkbox
+      label="Checked"
+      [checked]="true"
+      [id]="'checked_checkbox'"
+      [name]="'checked_checkbox'">
+    </design-checkbox>
+
+    <design-checkbox
+      label="Disabled"
+      [disabled]="true"
+      [id]="'disabled_checkbox'"
+      [name]="'disabled_checkbox'">
+    </design-checkbox>
+
+    <design-checkbox
+      label="Disabled Checked"
+      [disabled]="true"
+      [checked]="true"
+      [id]="'disabled_checked_checkbox'"
+      [name]="'disabled_checked_checkbox'">
+    </design-checkbox>
+  </div>
+  <br>
+
+  <div class="radiobutton">
+    <design-radiobutton
+      label="Default"
+      [id]="'default_radiobutton'"
+      [name]="'radiobutton'">
+    </design-radiobutton>
+
+    <design-radiobutton
+      label="Checked" 
+      [checked]="true"
+      [id]="'checked_radiobutton'"
+      [name]="'radiobutton'">
+    </design-radiobutton>
+
+    <design-radiobutton
+      label="Disabled" 
+      [disabled]="true"
+      [id]="'disabled_radiobutton'"
+      [name]="'radiobutton'">
+    </design-radiobutton>
+
+    <design-radiobutton
+      label="Disabled Checked" 
+      [disabled]="true"
+      [checked]="true"
+      [id]="'disabled_checked_radiobutton'"
+      [name]="'radiobutton'">
+    </design-radiobutton>
+  </div>
+</div> 
 <!-- Cloudflare trigger -->

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!");

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 { }

src/core/components/checkbox/checkbox.component.html

@@ -0,0 +1,12 @@
+<div class="checkbox-comp">
+  <label [for]="id">{{label}}</label>
+  <input
+    type="checkbox"
+    [id]="id"
+    [name]="name"
+    [class.disabled]="disabled"
+    [disabled]="disabled"
+    [checked]="checked"
+    class="checkbox"
+  >
+</div>

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;
+      }
+    }
+  }
+}

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<CheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CheckboxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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;
+
+}

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 { }

src/core/components/radiobutton/radiobutton.component.html

@@ -0,0 +1,14 @@
+<div class="radiobutton-comp">
+  <label [for]="id">
+    {{label}}
+  </label>
+  <input
+    type="radio"
+    class="radiobutton"
+    [id]="id"
+    [name]="name"
+    [class.disabled]="disabled"
+    [disabled]="disabled"
+    [checked]="checked"
+  >
+</div>

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;
+      }
+    }
+  }
+}

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<RadiobuttonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RadiobuttonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RadiobuttonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});