af-connect-components 0.0.25 → 0.0.26

package/projects/af-connect-components/src/lib/af-connect-card/af-connect-card-header/af-connect-card-header.component.scss

@@ -0,0 +1,209 @@
+@import '../../../styles/breakpoints.scss';
+
+:host {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+:host(.beneficiaries-header) {
+  .buttons-container {
+    align-self: flex-start;
+  }
+}
+
+:host(.restricted-fund-card-header) {
+  padding: 0.8rem;
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 0;
+  }
+
+  > .border-line {
+    border: 1px solid var(--toggle-button-grey-color);
+    opacity: 0.3;
+    margin: 0.2rem;
+  }
+}
+
+:host(.policies-header) {
+  flex-grow: 0;
+}
+
+:host(.document-card-header) {
+  .card-header.small {
+    gap: 0.5rem;
+
+    .title-container {
+      gap: 0.25rem;
+    }
+  }
+}
+
+.card-header-base {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  color: var(--primary-dark-teal-color);
+  align-items: center;
+  justify-content: space-between;
+
+  @include media(tabletTreshold) {
+    gap: 6px;
+  }
+}
+
+.buttons-container {
+  display: flex;
+  gap: 1rem;
+
+  @include media(tabletTreshold) {
+    justify-content: flex-start;
+  }
+}
+
+:host(.claims-header) {
+  .buttons-container {
+    display: contents;
+  }
+}
+
+.border-line {
+  width: 100%;
+  margin-top: 0.85rem;
+  border-bottom: 1px solid var(--primary-dark-teal-color);
+
+  &.small {
+    display: none;
+  }
+}
+
+.inner-title-container {
+  display: flex;
+  gap: 12px;
+}
+
+.heading-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.title-container-base {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 16px;
+  font-family: var(--standard-font-family-hero-new-semibold);
+
+  @include media(mobileBreakPointTreshold) {
+    font-size: 0.875rem;
+    gap: 1px;
+  }
+}
+
+.subtitle-base {
+  font-size: 14px;
+  font-family: var(--standard-font-family-hero-new);
+
+  @include media(mobileBreakPointTreshold) {
+    font-size: 0.75rem;
+  }
+}
+
+.orange-base {
+  color: var(--bright-orange-color);
+  font-family: var(--standard-font-family-hero-new-bold);
+  opacity: 1;
+}
+
+.card-header {
+  &.normal {
+    @extend .card-header-base;
+
+    .title-container {
+      @extend .title-container-base;
+      color: var(--primary-dark-teal-color);
+    }
+
+    .subtitle {
+      @extend .subtitle-base;
+      color: var(--primary-connected-orange-color);
+
+      &.orange {
+        @extend .orange-base;
+      }
+    }
+  }
+
+  &.small {
+    @extend .card-header-base;
+
+    .title-container {
+      @extend .title-container-base;
+      color: var(--secondary-black-color);
+      font-weight: 600;
+      gap: 0px;
+
+      @include media(mobileBreakPointTreshold) {
+        font-size: 14px;
+      }
+    }
+
+    .subtitle {
+      @extend .subtitle-base;
+      opacity: 0.5;
+      color: var(--main-black-color);
+
+      &.orange {
+        @extend .orange-base;
+      }
+
+      @include media(mobileBreakPointTreshold) {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+:host(.claims-header) {
+  .card-header {
+    &.normal {
+      .subtitle {
+        color: var(--claim-subtitle-color);
+
+        @include media(mobileBreakPointTreshold) {
+          color: var(--claim-info-grey);
+        }
+      }
+    }
+  }
+
+  .title-container {
+    width: 100%;
+  }
+
+  .inner-title-container {
+    justify-content: space-between;
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    .title-container-base {
+      flex-direction: row;
+    }
+
+    .inner-title-container {
+      display: block;
+    }
+
+    .subtitle {
+      margin-top: 2px;
+      margin-left: -10px;
+    }
+
+    .border-line {
+      margin-top: 0.35rem;
+    }
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-card/af-connect-card-header/af-connect-card-header.component.spec.ts

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

package/projects/af-connect-components/src/lib/af-connect-card/af-connect-card-header/af-connect-card-header.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-card-header',
+  templateUrl: './af-connect-card-header.component.html',
+  styleUrls: ['./af-connect-card-header.component.scss']
+})
+export class AfConnectCardHeaderComponent {
+  @Input() title: string;
+  @Input() subTitle: string;
+  @Input() variant: 'normal' | 'small' = 'normal';
+  @Input() hideBorderLine: boolean;
+  @Input() subtitleColor: 'grey' | 'orange' = 'grey';
+  @Output() onClick = new EventEmitter();
+
+  ngOnInit(): void {}
+
+  toggleMobileContent() {
+    this.onClick.emit();
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-card/af-connect-card.component.html

@@ -0,0 +1,4 @@
+<div [class]="['card', variant]">
+    <ng-content></ng-content>
+  </div>
+  

package/projects/af-connect-components/src/lib/af-connect-card/af-connect-card.component.scss

@@ -0,0 +1,100 @@
+@import '../../styles/breakpoints.scss';
+
+$regular-border-radius: 12px;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 49%;
+
+  @include media(tabletTreshold) {
+    min-width: 100%;
+  }
+}
+
+:host(.full-width) {
+  width: 100%;
+  // use ngClass="full-width" on afc-card
+}
+
+:host(.document-card) {
+  user-select: none;
+}
+
+:host(.beneficiary-mobile-card) {
+  @include media(tabletTreshold) {
+    .small {
+      border: 1px solid var(--primary-dark-teal-color);
+      max-height: fit-content;
+    }
+  }
+}
+
+:host(.restricted-fund-card, .restricted-fund-mobile-card) {
+  .card {
+    gap: 1rem;
+  }
+}
+
+.base-card {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  border-radius: $regular-border-radius;
+  background: var(--main-white-color);
+  border: 1px solid var(--primary-dark-teal-color);
+}
+
+.card {
+  &.large {
+    @extend .base-card;
+    padding: 2rem 2.5rem 2.5rem 2.5rem;
+
+    @include media(mobileBreakPointTreshold) {
+      padding: 1rem 1rem 1.5rem 1rem;
+      border-radius: 5px;
+      border-color: var(--warm-grey-color);
+    }
+  }
+
+  &.normal {
+    @extend .base-card;
+
+    border-radius: $regular-border-radius;
+    padding: 23px 18px 13px 18px;
+
+    @include media(tabletTreshold) {
+      padding: 12px 9px 6px 9px;
+    }
+  }
+
+  &.small {
+    @extend .base-card;
+    border-radius: 5px;
+    padding: 18px 15px;
+
+    @include media(tabletTreshold) {
+      padding: 0.75rem 1rem;
+    }
+  }
+}
+
+:host(.statement-card) {
+  width: auto;
+  cursor: pointer;
+
+  .card.small {
+    padding: 12px 14px;
+    border-radius: 3px;
+  }
+}
+
+:host(.expandable-card) {
+  .card {
+    &.small {
+      @include media(tabletTreshold) {
+        padding: 0.75rem 0.5rem 0.75rem 0.75rem;
+      }
+    }
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-card/af-connect-card.component.spec.ts

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

package/projects/af-connect-components/src/lib/af-connect-card/af-connect-card.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-card',
+  templateUrl: './af-connect-card.component.html',
+  styleUrls: ['./af-connect-card.component.scss']
+})
+export class AfConnectCardComponent {
+  @Input() variant: 'large' | 'normal' | 'small' = 'normal';
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/projects/af-connect-components/src/lib/af-connect-chart/af-connect-chart.component.html

@@ -0,0 +1 @@
+<p>af-connect-chart works!</p>

package/projects/af-connect-components/src/lib/af-connect-chart/af-connect-chart.component.spec.ts

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

package/projects/af-connect-components/src/lib/af-connect-chart/af-connect-chart.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-chart',
+  templateUrl: './af-connect-chart.component.html',
+  styleUrls: ['./af-connect-chart.component.scss']
+})
+export class AfConnectChartComponent {
+
+}

package/projects/af-connect-components/src/lib/af-connect-chip/af-connect-chip.component.html

@@ -0,0 +1,15 @@
+<div
+  [ngClass]="['chip', variant]"
+  [ngStyle]="{
+    borderRadius: borderRadius + 'px',
+    background: additionalStyle && additionalStyle.background ? additionalStyle.background : ''
+  }"
+>
+  <div
+    [ngStyle]="{
+      color: additionalStyle && additionalStyle.color ? additionalStyle.color : ''
+    }"
+  >
+    <ng-content></ng-content>
+  </div>
+</div>

package/projects/af-connect-components/src/lib/af-connect-chip/af-connect-chip.component.scss

@@ -0,0 +1,125 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+$border-radius: 1rem;
+$padding-top: 5.6px;
+
+.small {
+  padding: 0.3rem 0.75rem;
+  border-radius: $border-radius;
+}
+
+.medium {
+  min-width: 54px;
+  min-height: 28px;
+  border-radius: $border-radius;
+  font-weight: 500;
+}
+
+.green-chip {
+  background: var(--secondary-egg-shell-color);
+  color: var(--primary-dark-teal-color);
+}
+
+.chip {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--standard-font-family-hero-new);
+  width: fit-content;
+
+  &.greenish-text {
+    @extend .green-chip;
+    @extend .small;
+
+    @include media(mobileBreakPointTreshold) {
+      font-size: 0.75rem;
+      padding: 5px 10px;
+      gap: 0px;
+    }
+  }
+
+  &.greenish-count {
+    @extend .green-chip;
+    @extend .medium;
+  }
+
+  &.percentage {
+    background: var(--primary-catalyst-yellow-color-low-opacity);
+    color: var(--primary-connected-orange-color);
+    font-family: var(--standard-font-family-hero-new-semibold);
+    @extend .medium;
+  }
+
+  &.status {
+    @extend .green-chip;
+    min-height: 26px;
+    font-weight: normal;
+    border-radius: $border-radius;
+    padding: 0px 15px 0px 15px;
+  }
+
+  &.claims {
+    border-radius: $border-radius;
+    padding: $padding-top 15px;
+  }
+
+  &.case-number {
+    border-radius: $border-radius;
+    border: 1px solid var(--primary-dark-teal-color);
+    color: var(--primary-dark-teal-color);
+    padding: $padding-top 0.75rem;
+    font-family: var(--standard-font-family-hero-new-semibold);
+
+    @include media(mobileBreakPointTreshold) {
+      display: none;
+    }
+  }
+
+  &.dot {
+    background: var(--secondary-egg-shell-color);
+    color: var(--primary-dark-teal-color);
+    padding: 0px 5px 0px 5px;
+    border-radius: $border-radius;
+    min-height: 10px;
+    display: inline-block;
+  }
+
+  &.dot-orange {
+    @extend .dot;
+    background: var(--primary-catalyst-yellow-color);
+  }
+
+  &.dot-teal {
+    @extend .dot;
+    background: var(--primary-dark-teal-color);
+  }
+}
+
+:host(.transaction-modal) {
+  .chip {
+    font-family: var(--standard-font-family-hero-new-bold);
+    font-size: 14px;
+    padding: 6px 18px;
+    @include media(mobileBreakPointTreshold) {
+      font-size: 0.875rem;
+      padding: 8px 18px;
+    }
+  }
+}
+
+:host(.transaction-mobile) {
+  .chip {
+    @include media(mobileBreakPointTreshold) {
+      font-size: 0.875rem;
+      padding: 8px 18px;
+      font-family: var(--standard-font-family-hero-new-bold);
+    }
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-chip/af-connect-chip.component.spec.ts

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

package/projects/af-connect-components/src/lib/af-connect-chip/af-connect-chip.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-chip',
+  templateUrl: './af-connect-chip.component.html',
+  styleUrls: ['./af-connect-chip.component.scss']
+})
+export class AfConnectChipComponent {
+  @Input() title: string;
+  @Input() borderRadius: number;
+  @Input() additionalStyle: { background?: string; color?: string };
+  @Input() variant:
+    | 'greenish-text'
+    | 'greenish-count'
+    | 'percentage'
+    | 'status'
+    | 'claims'
+    | 'dot'
+    | 'dot-orange'
+    | 'dot-teal'
+    | 'case-number' = 'greenish-text';
+}

package/projects/af-connect-components/src/lib/af-connect-components.component.spec.ts

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

package/projects/af-connect-components/src/lib/af-connect-components.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-components',
+  template: `
+    <p>
+      af-connect-components works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class AfConnectComponentsComponent {
+
+}