feat(tutorial): complete step 2

src/app/app-routing.module.ts

@@ -4,16 +4,20 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
 	{
 		path: '',
-		loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
+		loadChildren: () =>
+			import('./home/home.module').then((m) => m.HomeModule),
 	},
 	{
 		path: 'repos',
-		loadChildren: () => import('./repositories/repositories.module').then(m => m.RepositoriesModule)
-	}
+		loadChildren: () =>
+			import('./repositories/repositories.module').then(
+				(m) => m.RepositoriesModule
+			),
+	},
 ];
 
 @NgModule({
-	imports: [RouterModule.forRoot(routes, {useHash: true})],
-	exports: [RouterModule]
+	imports: [RouterModule.forRoot(routes, { useHash: true })],
+	exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -13,10 +13,7 @@ import { AppSwitcher20Module } from '@carbon/icons-angular/lib/app-switcher/20';
 import { HeaderComponent } from './header/header.component';
 
 @NgModule({
-	declarations: [
-		AppComponent,
-		HeaderComponent
-	],
+	declarations: [AppComponent, HeaderComponent],
 	imports: [
 		BrowserModule,
 		BrowserAnimationsModule,
@@ -25,8 +22,8 @@ import { HeaderComponent } from './header/header.component';
 		UIShellModule,
 		Notification20Module,
 		UserAvatar20Module,
-		AppSwitcher20Module
+		AppSwitcher20Module,
 	],
-	bootstrap: [AppComponent]
+	bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/home/home.module.ts

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

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

@@ -1 +1,93 @@
-<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,66 @@
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family";
+@import "~carbon-components/scss/globals/scss/typography";
+
+.landing-page__illo {
+	max-width: 100%;
+}
+
+@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

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

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

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

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