feat(tutorial): complete step 2

e2e/src/app.e2e-spec.ts

@@ -1,16 +1,16 @@
-import { AppPage } from "./app.po";
-import { browser, logging } from "protractor";
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
 
-describe("workspace-project App", () => {
+describe('workspace-project App', () => {
 	let page: AppPage;
 
 	beforeEach(() => {
 		page = new AppPage();
 	});
 
-	it("should display welcome message", () => {
+	it('should display welcome message', () => {
 		page.navigateTo();
-		expect(page.getTitleText()).toEqual("Welcome to carbon-angular-tutorial!");
+		expect(page.getTitleText()).toEqual('Welcome to carbon-angular-tutorial!');
 	});
 
 	afterEach(async () => {

e2e/src/app.po.ts

@@ -1,11 +1,11 @@
-import { browser, by, element } from "protractor";
+import { browser, by, element } from 'protractor';
 
 export class AppPage {
 	navigateTo() {
 		return browser.get(browser.baseUrl) as Promise<any>;
 	}
 
 	getTitleText() {
-		return element(by.css("app-root h1")).getText() as Promise<string>;
+		return element(by.css('app-root h1')).getText() as Promise<string>;
 	}
 }

src/app/app.module.ts

@@ -11,7 +11,7 @@ import { Notification20Module } from '@carbon/icons-angular/lib/notification/20'
 import { UserAvatar20Module } from '@carbon/icons-angular/lib/user--avatar/20';
 import { AppSwitcher20Module } from '@carbon/icons-angular/lib/app-switcher/20';
 import { HeaderComponent } from './header/header.component';
-
+import { TableModule } from 'carbon-components-angular';
 @NgModule({
 	declarations: [
 		AppComponent,
@@ -25,7 +25,8 @@ import { HeaderComponent } from './header/header.component';
 		UIShellModule,
 		Notification20Module,
 		UserAvatar20Module,
-		AppSwitcher20Module
+		AppSwitcher20Module,
+		TableModule
 	],
 	bootstrap: [AppComponent]
 })

src/app/home/home.module.ts

@@ -3,12 +3,17 @@ import { CommonModule } from '@angular/common';
 
 import { HomeRoutingModule } from './home-routing.module';
 import { LandingPageComponent } from './landing-page/landing-page.component';
+import { BreadcrumbModule, ButtonModule, GridModule, TabsModule } from 'carbon-components-angular';
 
 @NgModule({
 	declarations: [LandingPageComponent],
 	imports: [
 		CommonModule,
-		HomeRoutingModule
+		HomeRoutingModule,
+		GridModule,
+		BreadcrumbModule,
+		ButtonModule,
+		TabsModule
 	]
 })
 export class HomeModule { }

src/app/home/landing-page/landing-page.component.html

@@ -1 +1,70 @@
-<p>landing-page works!</p>
+<div ibmGrid class="cds--grid--full-width landing-page">
+    <div ibmRow class="landing-page__banner">
+      <div ibmCol [columnNumbers]="{'lg': 16}">
+        <ibm-breadcrumb noTrailingSlash="true" ariaLabel="Page navigation">
+            <ibm-breadcrumb-item href="/"> Getting started </ibm-breadcrumb-item>
+          </ibm-breadcrumb>
+          <h1 class="landing-page__heading">Design &amp; build with Carbon</h1>
+      </div>
+    </div>
+    <div ibmRow class="landing-page__r2">
+        <div ibmCol class="cds--no-gutter">
+          <ibm-tabs ariaLabel="Tab navigation">
+            <ibm-tab heading="About">
+                <div ibmGrid class="cds--grid--no-gutter cds--grid--full-width">
+                  <div ibmRow class="landing-page__tab-content">
+                    <div ibmCol [columnNumbers]="{'md': 4, 'lg': 7}">
+                      <h2 class="landing-page__subheading">
+                        What is Carbon?
+                      </h2>
+                      <p class="landing-page__p">
+                        Carbon is IBM’s open-source design system for digital
+                        products and experiences. With the IBM Design Language
+                        as its foundation, the system consists of working code,
+                        design tools and resources, human interface guidelines,
+                        and a vibrant community of contributors.
+                      </p>
+                      <button ibmButton="primary">Learn more</button>
+                    </div>
+                    <div ibmCol class="cds--offset-lg-1" [columnNumbers]="{'md': 4, 'lg': 8}">
+                      <img  
+                      class="landing-page__illo"
+                      src="../../../assets/tab-illo.png"
+                      alt="Carbon illustration"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </ibm-tab>
+            <ibm-tab heading="Design">
+              <div ibmGrid class="cds--grid--no-gutter cds--grid--full-width">
+                <div ibmRow class="landing-page__tab-content">
+                  <div ibmCol [columnNumbers]="{'lg': 16}">
+                    Rapidly build beautiful and accessible experiences. The Carbon kit
+                    contains all resources you need to get started.
+                  </div>
+                </div>
+              </div>
+            </ibm-tab>
+            <ibm-tab heading="Develop">
+              <div ibmGrid class="cds--grid--no-gutter cds--grid--full-width">
+                <div ibmRow class="landing-page__tab-content">
+                  <div ibmCol [columnNumbers]="{'lg': 16}">
+                    Carbon provides styles and components in Vanilla, React, Angular,
+                    and Vue for anyone building on the web.
+                  </div>
+                </div>
+              </div>
+            </ibm-tab>
+          </ibm-tabs>
+        </div>
+      </div>
+      <div ibmRow class="landing-page__r3">
+        <div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">
+          <h3 class="landing-page__label">The Principles</h3>
+        </div>
+        <div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">Carbon is Open</div>
+        <div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">Carbon is Modular</div>
+        <div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">Carbon is Consistent</div>
+      </div>
+  </div> 

src/app/home/landing-page/landing-page.component.scss

@@ -0,0 +1,69 @@
+.landing-page__illo {
+    max-width: 100%;
+  }
+
+@import '~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family';
+@import '~carbon-components/scss/globals/scss/typography';
+
+.landing-page__banner {
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07 * 4;
+}
+  @mixin landing-page-background() {
+    background-color: $ui-01;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -$spacing-05;
+      top: 0;
+      right: -$spacing-05;
+      bottom: 0;
+      background: $ui-01;
+      z-index: -1;
+    }
+  }
+  .landing-page__banner {
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07 * 4;
+    @include landing-page-background;
+  }
+
+  .landing-page__heading {
+    @include type-style('productive-heading-05');
+  }
+
+  .landing-page__r2 {
+    margin-top: rem(-40px);
+  }
+
+  .landing-page__tab-content {
+    padding-top: $layout-05;
+    padding-bottom: $layout-05;
+  }
+
+  .landing-page__subheading {
+    @include type-style('productive-heading-03');
+    @include carbon--font-weight('semibold');
+  }
+
+  .landing-page__p {
+    @include type-style('productive-heading-03');
+    margin-top: $spacing-06;
+    margin-bottom: $spacing-08;
+
+    @include carbon--breakpoint-between((320px + 1), md) {
+      max-width: 75%;
+    }
+  }
+
+  .landing-page__r3 {
+    padding-top: $spacing-09;
+    padding-bottom: $spacing-09;
+    @include landing-page-background;
+  }
+
+  .landing-page__label {
+    @include type-style('heading-01');
+  }

src/app/home/landing-page/landing-page.component.spec.ts

@@ -2,13 +2,16 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LandingPageComponent } from './landing-page.component';
 
+import { BreadcrumbModule, ButtonModule, GridModule, TabsModule } from 'carbon-components-angular';
+
 describe('LandingPageComponent', () => {
 	let component: LandingPageComponent;
 	let fixture: ComponentFixture<LandingPageComponent>;
 
 	beforeEach(async(() => {
 		TestBed.configureTestingModule({
-			declarations: [ LandingPageComponent ]
+			declarations: [ LandingPageComponent ],
+			imports : [BreadcrumbModule, ButtonModule, GridModule, TabsModule]
 		})
 		.compileComponents();
 	}));

src/app/repositories/repo-page/repo-page.component.html

@@ -1 +1,7 @@
-<p>repo-page works!</p>
+<div ibmGrid class="cds--grid--full-width cds--grid--no-gutter repo-page">
+    <div ibmRow class="repo-page__r1">
+      <div ibmCol [columnNumbers]="{'lg': 16}">
+        <app-repo-table></app-repo-table>
+      </div>
+    </div>
+  </div>

src/app/repositories/repo-page/repo-page.component.scss

@@ -0,0 +1,6 @@
+@import '~carbon-components/scss/globals/scss/typography';
+
+.repo-page .cds--row {
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
+}

src/app/repositories/repo-page/repo-page.component.spec.ts

@@ -1,14 +1,16 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RepoPageComponent } from './repo-page.component';
-
+import { GridModule, TableModule } from 'carbon-components-angular';
+import { RepoTableComponent } from '../repo-table/repo-table.component';
 describe('RepoPageComponent', () => {
 	let component: RepoPageComponent;
 	let fixture: ComponentFixture<RepoPageComponent>;
 
 	beforeEach(async(() => {
 		TestBed.configureTestingModule({
-			declarations: [ RepoPageComponent ]
+			declarations: [ RepoPageComponent, RepoTableComponent ],
+			imports: [GridModule, TableModule]
 		})
 		.compileComponents();
 	}));

src/app/repositories/repo-table/repo-table.component.html

@@ -0,0 +1,11 @@
+<ibm-table-container>
+    <ibm-table-header>
+        <h4 ibmTableHeaderTitle>Carbon Repositories</h4>
+        <p ibmTableHeaderDescription>A collection of public Carbon repositories.</p>
+    </ibm-table-header>
+    <ibm-table
+        [model]="model"
+        [showSelectionColumn]="false"
+        [striped]="false">
+    </ibm-table>
+</ibm-table-container>

src/app/repositories/repo-table/repo-table.component.spec.ts

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

src/app/repositories/repo-table/repo-table.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+
+import {
+	TableModel,
+	TableItem,
+	TableHeaderItem,
+} from 'carbon-components-angular';
+
+@Component({
+	selector: 'app-repo-table',
+	templateUrl: './repo-table.component.html',
+	styleUrls: ['./repo-table.component.scss']
+})
+export class RepoTableComponent implements OnInit {
+	model = new TableModel();
+
+	constructor() {}
+
+	ngOnInit() {
+		this.model.data = [
+			[
+				new TableItem({ data: 'Repo 1', expandedData: 'Row description' }),
+				new TableItem({ data: 'Date' }),
+				new TableItem({ data: 'Date' }),
+				new TableItem({ data: '123' }),
+				new TableItem({ data: '456' }),
+				new TableItem({ data: 'Links' }),
+			],
+			[
+				new TableItem({ data: 'Repo 2', expandedData: 'Row description' }),
+				new TableItem({ data: 'Date' }),
+				new TableItem({ data: 'Date' }),
+				new TableItem({ data: '123' }),
+				new TableItem({ data: '456' }),
+				new TableItem({ data: 'Links' }),
+			],
+			[
+				new TableItem({ data: 'Repo 3', expandedData: 'Row description' }),
+				new TableItem({ data: 'Date' }),
+				new TableItem({ data: 'Date' }),
+				new TableItem({ data: '123' }),
+				new TableItem({ data: '456' }),
+				new TableItem({ data: 'Links' }),
+			],
+		];
+		this.model.header = [
+			new TableHeaderItem({ data: 'Name' }),
+			new TableHeaderItem({ data: 'Created' }),
+			new TableHeaderItem({ data: 'Updated' }),
+			new TableHeaderItem({ data: 'Open Issues' }),
+			new TableHeaderItem({ data: 'Stars' }),
+			new TableHeaderItem({ data: 'Links' }),
+		];
+	}
+}

src/app/repositories/repositories.module.ts

@@ -3,12 +3,16 @@ import { CommonModule } from '@angular/common';
 
 import { RepositoriesRoutingModule } from './repositories-routing.module';
 import { RepoPageComponent } from './repo-page/repo-page.component';
+import { GridModule, TableModule } from 'carbon-components-angular';
+import { RepoTableComponent } from './repo-table/repo-table.component';
 
 @NgModule({
-	declarations: [RepoPageComponent],
+	declarations: [RepoPageComponent, RepoTableComponent],
 	imports: [
 		CommonModule,
-		RepositoriesRoutingModule
+		RepositoriesRoutingModule,
+		GridModule,
+		TableModule
 	]
 })
 export class RepositoriesModule { }