Issue #SB-13915 task: Static Card component

sb-ui-components-app/package.json

@@ -7,7 +7,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "lib": "ng build sb-ui-components --watch"
   },
   "private": true,
   "dependencies": {
@@ -30,9 +31,9 @@
     "@angular/cli": "~7.3.9",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

sb-ui-components-app/projects/sb-ui-components/src/lib/card/card.component.html

@@ -0,0 +1,31 @@
+<div class="sb-card" tabindex="0">
+  <div class="sb-card-body">
+    <div class="sb-card-metas">
+      <div class="sb-card-image mr-16">
+        <img src="assets/images/book.png">
+      </div>
+      <div class="sb-card-meta course">
+        <div class="sb-card-meta-item mb-16">
+          Topic : Global positioning system and its application
+        </div>
+        <div class="sb-card-meta-item">
+          Subtopic : Limits of artificial intelligence
+        </div>
+      </div>
+    </div>
+    <h4 class="sb-card-title">
+      Data Structure and Algorithm - Assignment 1 Paperback
+    </h4>
+    <div class="sb-card-org ellipsis">
+      Academy of European Law (ERA)
+    </div>
+  </div>
+  <div class="sb-card-progressbar">
+    <!--<sui-progress class="ui progress success">
+      <div class="bar" style="width: 100%;">
+        <div class="progress">100%</div>
+      </div>
+      <div class="label"></div>
+    </sui-progress>-->
+  </div>
+</div> 

sb-ui-components-app/projects/sb-ui-components/src/lib/card/card.component.scss

@@ -0,0 +1 @@
+.sb-card{width:292px;background-color:var(--white);border:0.5px solid #dedede;border-radius:4px;cursor:pointer;overflow:hidden;margin-top:3px;transition:box-shadow .3s ease-out, transform .3s ease-out, opacity .2s ease-out;transition-delay:.1s}.sb-card:hover{transform:translate(0, -3px);box-shadow:0 2px 7px 0 rgba(0,0,0,0.16)}.sb-card .sb-card-body{height:204px;padding:16px 16px 8px 16px;overflow:hidden}.sb-card .sb-card-metas{display:flex;align-items:flex-end}.sb-card .sb-card-image{width:70px;height:92px;border:0.5px solid var(--gray-100);background-color:var(--gray-0);border-radius:2px;box-sizing:border-box;overflow:hidden}.sb-card .sb-card-image img{width:70px;height:92px;object-fit:cover}.sb-card .sb-card-meta{height:92px;width:172px;display:flex;flex-wrap:wrap;flex-direction:column;overflow:hidden}.sb-card .sb-card-label{color:var(--primary-color);font-size:10.9994px;border:1px solid var(--primary-color);border-radius:2px;padding:4px 8px;height:24px}.sb-card .sb-card-badge{height:30px;width:30px;object-fit:contain}.sb-card .sb-card-meta-item{font-size:11.9994px;color:var(--gray-400);width:172px;line-height:17px}.sb-card .sb-card-title{color:var(--primary-color);font-size:14px;line-height:17.5px;font-weight:700;height:35px;margin:16px 0 8px 0;overflow:hidden}.sb-card .sb-card-org{font-size:14px;color:var(--gray-400)}.sb-card .sb-card-progressbar{height:4px}.sb-card .sb-card-progressbar .ui.progress .bar{border-radius:0 4px 4px 4px}.sb-card .sb-card-hover{position:absolute;top:0;max-width:292px;width:100%;height:100%;background-color:rgba(2,79,157,0.85);display:none}.sb-card .sb-card-hover .sb-card-hover-content{display:flex;align-items:center;height:100%;justify-content:center}.sb-card .sb-card-hover.sb-card-hover-gray{background:rgba(153,153,153,0.95)}.sb-card .sb-card-hover.sb-card-hover-gray .sb-exclamation-icon,.sb-card .sb-card-hover.sb-card-hover-gray p{color:white}.sb-card:hover{box-shadow:0 2px 7px 0 rgba(0,0,0,0.16)}.sb-card:hover .sb-card-hover{display:block}app-card[lang="ta"] .sb-card .sb-card-label{font-size:9px}app-card[lang="ta"] .sb-card .sb-card-meta-item{font-size:10px}app-card[lang="ta"] .sb-card .sb-card-title{font-size:11.9994px}app-card[lang="ta"] .sb-card .sb-card-org{font-size:11.9994px}app-card[lang="ur"] .sb-card .sb-card-label{font-size:9px}app-card[lang="ur"] .sb-card .sb-card-meta-item{font-size:10px}app-card[lang="ur"] .sb-card .sb-card-title{font-size:11.9994px}app-card[lang="ur"] .sb-card .sb-card-org{font-size:11.9994px}.sb-wspace-card{height:128px;max-width:292px;border:.5px solid var(--gray-0);border-left:4px solid var(--white);border-radius:4px;background:var(--white);padding:16px 24px;margin:0px 24px 24px 0}.sb-wspace-card .sb-wspace-title{margin-bottom:8px;font-size:16.002px;font-weight:700}.sb-wspace-card .sb-wspace-description{font-size:11.9994px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.sb-wspace-card:hover,.sb-wspace-card.active{border-left:4px solid var(--secondary-200);cursor:pointer;box-shadow:2px 5px 7px 0 rgba(0,0,0,0.2)}.sb-wspace-card:hover .sb-wspace-title,.sb-wspace-card.active .sb-wspace-title{color:var(--blue)}.sb-card-qr .sb-btn{border-radius:0;width:100%}.sb-card-qr:hover .sb-btn{background:var(--secondary-400)}.ui.card.sb-batch-card{border:1px solid var(--primary-200);box-shadow:none}.ui.card.sb-batch-card .item{padding:10px 0}.ui.card.sb-batch-card .item .content>.header{padding-bottom:5px}.ui.card.sb-batch-card>.sb-batch-card-content{padding:0 1rem;border-top:1px solid rgba(34,36,38,0.1)}.sb-batch-card .sb-batch-card-title{font-weight:600;font-size:1.18em}.sb-batch-card .item i.icon{font-size:16.002px}.sb-batch-card .sb-no-batch-found{background-color:var(--tertiary-0);border:1px solid var(--tertiary-100);padding:8px 16px;border-radius:4px;font-size:11.9994px}

sb-ui-components-app/projects/sb-ui-components/src/lib/card/card.component.spec.ts

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

sb-ui-components-app/projects/sb-ui-components/src/lib/card/card.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'sb-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss']
+})
+export class CardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

sb-ui-components-app/projects/sb-ui-components/src/lib/sb-ui-components.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { SbUiComponentsComponent } from './sb-ui-components.component';
+import { CardComponent } from './card/card.component';
 
 @NgModule({
-  declarations: [SbUiComponentsComponent],
+  declarations: [SbUiComponentsComponent, CardComponent],
   imports: [
   ],
-  exports: [SbUiComponentsComponent]
+  exports: [SbUiComponentsComponent, CardComponent]
 })
 export class SbUiComponentsModule { }

sb-ui-components-app/projects/sb-ui-components/src/public-api.ts

@@ -5,3 +5,4 @@
 export * from './lib/sb-ui-components.service';
 export * from './lib/sb-ui-components.component';
 export * from './lib/sb-ui-components.module';
+export * from './lib/card/card.component';

sb-ui-components-app/src/app/app.component.html

@@ -1,5 +1,4 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <sb-sb-ui-components></sb-sb-ui-components>
+<div>
+  <sb-card></sb-card>
 </div>
 <router-outlet></router-outlet>