feat: add md render type : process-card

projects/ledge-render/src/lib/components/ledge-card/colors.ts

@@ -0,0 +1,13 @@
+// random colors
+export default [
+ "#e55852",
+ "#e98832",
+ "#f0d668",
+ "#47c0af",
+ "#387fd5",
+ "#7753df",
+ "#079948",
+ "#00A2A1",
+ "#666666",
+ "#F37C20",
+];

projects/ledge-render/src/lib/components/ledge-card/ledge-card.component.html

@@ -0,0 +1,15 @@
+<div class="card">
+ <div
+ class="card-head"
+ [ngStyle]="getHeaderStyle()"
+ role="table"
+ aria-label="Destinations"
+ >
+ <div class="title">{{ data.header }}</div>
+ </div>
+ <div class="card-body">
+ <p *ngFor="let cell of data.cells; let index = index">
+ {{ cell }}
+ </p>
+ </div>
+</div>

projects/ledge-render/src/lib/components/ledge-card/ledge-card.component.scss

@@ -0,0 +1,51 @@
+.card {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ color: rgba(0, 0, 0, 0.65);
+ font-size: 14px;
+ font-variant: tabular-nums;
+ box-sizing: border-box;
+ line-height: 1.5;
+ list-style: none;
+ background-color: #f3f4f5;
+ border-radius: 2px;
+ transition: all 0.3s;
+ // border: 1px solid #e8e8e8;
+ max-width: 300px;
+ height: 100%;
+ &-head {
+ height: 60px;
+ padding: 0 24px;
+ color: rgba(0, 0, 0, 0.85);
+ font-size: 16px;
+ border-bottom: 1px solid #e8e8e8;
+ text-align: center;
+ .title {
+ display: inline-block;
+ flex: 1;
+ padding: 13px 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 18px;
+ font-weight: 600;
+ font-stretch: normal;
+ line-height: 1.89;
+ letter-spacing: 0.75px;
+ }
+ }
+ &-body {
+ padding: 20px 20px 0 20px;
+ zoom: 1;
+ p {
+ font-size: 14px;
+ font-style: normal;
+ line-height: 1.57;
+ letter-spacing: normal;
+ text-align: center;
+ color: #111111;
+ margin-bottom: 19px;
+ }
+ }
+}

projects/ledge-render/src/lib/components/ledge-card/ledge-card.component.spec.ts

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

projects/ledge-render/src/lib/components/ledge-card/ledge-card.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit, Input } from "@angular/core";
+import colors from "./colors";
+
+interface CardData {
+ header: string;
+ cells: string[];
+ index?: number;
+}
+
+interface HeaderStyle {
+ bg: string;
+ font: string;
+}
+
+@Component({
+ selector: "ledge-card",
+ templateUrl: "./ledge-card.component.html",
+ styleUrls: ["./ledge-card.component.scss"],
+})
+export class SkillCardComponent implements OnInit {
+ @Input()
+ data: CardData = {
+ header: "",
+ cells: [],
+ index: -1,
+ };
+ @Input()
+ headerStyle: HeaderStyle = {
+ bg: "#fff",
+ font: "#333",
+ };
+
+ constructor() {}
+
+ ngOnInit(): void {
+ console.log(this.data);
+ }
+
+ /**TODO */
+ getHeaderStyle() {
+ let idx = this.data.index;
+
+ if (!idx && idx !== 0) {
+ idx = Math.floor(Math.random() * 10);
+ }
+
+ return {
+ "background-color":
+ (this.headerStyle && this.headerStyle.bg) || colors[idx],
+ color: (this.headerStyle && this.headerStyle.font) || "#333",
+ };
+ }
+}

projects/ledge-render/src/lib/ledge-render.component.html

@@ -82,6 +82,18 @@
  </div>
  </div>
 
+ <div *ngSwitchCase="'process-card'" class="flex-table row">
+ <ng-container
+ *ngFor="let header of item.data.header; let index = index"
+ >
+ <ledge-card
+ class="column"
+ [headerStyle]="item.colors[index]"
+ [data]="{ header: header, cells: item.data.cells[index],index:index }"
+ ></ledge-card>
+ </ng-container>
+ </div>
+
  <div *ngSwitchCase="'list-style'">
  <div class="list-style list-style-{{item.config.type}}">
  <div *ngFor="let listItem of item.data;let index = index;" class="list-style-item item-{{index}}">