Base Components

.eslintrc.json

@@ -31,7 +31,7 @@
           "error",
           {
             "type": "element",
-            "prefix": "app",
+            "prefix": ["app", "design"],
             "style": "kebab-case"
           }
         ],

ComponentDocs.md

@@ -0,0 +1,31 @@
+# Cryptic Components
+
+
+Style classes :
+- primary
+- success
+- warning
+- danger
+- info
+
+---
+
+## Button
+
+### Example
+
+```html
+ <app-styled-button (click)="login()" flavor="primary" [disabled]="!form.valid">Log in</app-styled-button>
+ ```
+
+---
+
+## Radio Button
+
+### Example
+
+```html
+// ADD EXAMPLES FOR ALL THE DEFAULT COMPONENTS //
+```
+
+---

package.json

@@ -24,6 +24,7 @@
     "@angular/platform-browser": "~13.2.5",
     "@angular/platform-browser-dynamic": "~13.2.5",
     "@angular/router": "~13.2.5",
+    "@fontsource/jost": "^4.5.4",
     "@sentry/angular": "^6.18.2",
     "ng-particles": "^2.40.2",
     "rxjs": "~7.5.0",

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ const routes: Routes = [
   {path: '', loadChildren: () => import('./control-center/control-center.module').then(m => m.ControlCenterModule)},
   {path: 'desktop', loadChildren: () => import('./desktop/desktop.module').then(m => m.DesktopModule)},
   {path: '', loadChildren: () => import('./account/account.module').then(m => m.AccountModule)},
+  { path: 'design', loadChildren: () => import('./base-components/base-components.module').then(m => m.BaseComponentsModule) },
   {path: '**', redirectTo: '/'}
 ];
 

src/app/base-components/base-components-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BaseComponentsComponent } from './base-components.component';
+
+const routes: Routes = [{ path: '', component: BaseComponentsComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BaseComponentsRoutingModule { }

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

@@ -0,0 +1,109 @@
+<div class="page">
+<div class="componentContainer">
+  <h2>Buttons - Primary</h2>
+  <design-button (click)="pressedAlert('Primary')" [disabled]="false" flavor="primary" class="component">
+    Primary
+  </design-button>
+  <design-button [disabled]="true" flavor="primary" class="component">
+    Primary disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Success')" [disabled]="false" flavor="success" class="component">
+    Success
+  </design-button>
+  <design-button [disabled]="true" flavor="success" class="component">
+    Success disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Warning')" [disabled]="false" flavor="warning" class="component">
+    Warning
+  </design-button>
+  <design-button [disabled]="true" flavor="warning" class="component">
+    Warning disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Danger')" [disabled]="false" flavor="danger" class="component">
+    Danger
+  </design-button>
+  <design-button [disabled]="true" flavor="danger" class="component">
+    Danger disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Info')" [disabled]="false" flavor="info" class="component">
+    Info
+  </design-button>
+  <design-button [disabled]="true" flavor="info" class="component">
+    Info disabled
+  </design-button>
+</div>
+<div class="componentContainer">
+  <h2>Buttons - Outlined</h2>
+  <design-button-outline (click)="pressedAlert('Primary')" [disabled]="false" flavor="primary" class="component">
+    Primary
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="primary" class="component">
+    Primary disabled
+  </design-button-outline>
+  <design-button-outline (click)="pressedAlert('Success')" [disabled]="false" flavor="success" class="component">
+    Success
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="success" class="component">
+    Success disabled
+  </design-button-outline>
+  <design-button-outline (click)="pressedAlert('Warning')" [disabled]="false" flavor="warning" class="component">
+    Warning
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="warning" class="component">
+    Warning disabled
+  </design-button-outline>
+  <design-button-outline (click)="pressedAlert('Danger')" [disabled]="false" flavor="danger" class="component">
+    Danger
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="danger" class="component">
+    Danger disabled
+  </design-button-outline>
+  <design-button-outline (click)="pressedAlert('Info')" [disabled]="false" flavor="info" class="component">
+    Info
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="info" class="component">
+    Info disabled
+  </design-button-outline>
+</div>
+<div class="componentContainer">
+  <h2>Buttons - Text only</h2>
+  <design-button-text (click)="pressedAlert('Primary')" [disabled]="false" flavor="primary" class="component">
+    Primary
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="primary" class="component">
+    Primary disabled
+  </design-button-text>
+  <design-button-text (click)="pressedAlert('Success')" [disabled]="false" flavor="success" class="component">
+    Success
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="success" class="component">
+    Success disabled
+  </design-button-text>
+  <design-button-text (click)="pressedAlert('Warning')" [disabled]="false" flavor="warning" class="component">
+    Warning
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="warning" class="component">
+    Warning disabled
+  </design-button-text>
+  <design-button-text (click)="pressedAlert('Danger')" [disabled]="false" flavor="danger" class="component">
+    Danger
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="danger" class="component">
+    Danger disabled
+  </design-button-text>
+  <design-button-text (click)="pressedAlert('Info')" [disabled]="false" flavor="info" class="component">
+    Info
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="info" class="component">
+    Info disabled
+  </design-button-text>
+
+</div>
+
+<div class="componentContainer">
+  <h2>Progressbar</h2>
+  <design-progressbar></design-progressbar>
+  <design-progressbar value="50"></design-progressbar>
+  <design-progressbar value="0"></design-progressbar>
+</div>
+<!-- Cloudflare trigger -->

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

@@ -0,0 +1,17 @@
+.componentContainer {
+  display: inline-grid;
+  width: 300px;
+  margin: 30px;
+  padding: 1em;
+  border: 3px solid #ffffff;
+}
+
+.component {
+  padding-bottom: 10px;
+}
+
+.page {
+  height: 100%;
+  overflow: auto;
+  background: #2F2F36;
+}

src/app/base-components/base-components.component.spec.ts

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

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-base-components',
+  templateUrl: './base-components.component.html',
+  styleUrls: ['./base-components.component.scss']
+})
+export class BaseComponentsComponent {
+
+  constructor() { }
+
+  pressedAlert(name: string) {
+    alert(name + " was pressed!");
+  }
+}

src/app/base-components/base-components.module.ts

@@ -0,0 +1,24 @@
+import { ProgressbarModule } from './../../core/components/progressbar/progressbar.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BaseComponentsRoutingModule } from './base-components-routing.module';
+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";
+
+@NgModule({
+  declarations: [
+    BaseComponentsComponent,
+  ],
+  imports: [
+    CommonModule,
+    BaseComponentsRoutingModule,
+    ButtonModule,
+    ButtonOutlineModule,
+    ButtonTextModule,
+    ProgressbarModule
+  ]
+})
+export class BaseComponentsModule { }

src/core/components/buttons/_buttons.scss

@@ -0,0 +1,8 @@
+$b-padding: 8px;
+$b-border-radius: 8px;
+$b-width: 100%;
+$b-color: white;
+$b-border: none;
+$b-font-size: 20px;
+$b-margin-right: 10px;
+$b-cursor: pointer;

src/core/components/buttons/button-outline/button-outline.component.html

@@ -0,0 +1,3 @@
+<button (click)="onClick.emit($event)" [class]="flavor" [disabled]="disabled">
+  <ng-content></ng-content>
+</button>

src/core/components/buttons/button-outline/button-outline.component.scss

@@ -0,0 +1,66 @@
+@use "sass:list";
+@import "src/global-styles/theme-colors";
+@import "../buttons";
+
+$flavors: (
+  primary: (
+    $primary-default,
+    $primary-disabled,
+  ),
+  success: (
+    $success-default,
+    $success-disabled,
+  ),
+  warning: (
+    $warning-default,
+    $warning-disabled,
+  ),
+  danger: (
+    $danger-default,
+    $danger-disabled,
+  ),
+  info: (
+    $info-default,
+    $info-disabled,
+  ),
+);
+
+button {
+  padding: 6px;
+  background: none;
+  border: 2px solid;
+  border-radius: $b-border-radius;
+  width: $b-width;
+  color: $b-color;
+  font-size: $b-font-size;
+  margin-right: $b-margin-right;
+  cursor: $b-cursor;
+
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @each $name, $colors in $flavors {
+    &.#{$name} {
+      border-color: list.nth($colors, 1);
+      color: list.nth($colors, 1);
+
+      &:disabled {
+        border-color: list.nth($colors, 2);
+        color: list.nth($colors, 2);
+        cursor: default;
+      }
+
+      &:hover:not([disabled]) {
+        border-color: list.nth($colors, 1);
+        background: list.nth($colors, 1);
+        @if $name == "danger" or $name == "info" {
+          color: $light-font;
+        } @else {
+          color: $dark-font;
+        }
+      }
+    }
+  }
+}