feat(tutorial): complete step 4

src/app/home/home.module.ts

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

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

@@ -1,6 +1,6 @@
 <div ibmGrid class="bx--grid--full-width landing-page">
 	<div ibmRow class="landing-page__banner">
-		<div ibmCol [columnNumbers]="{'lg': 16}">
+		<div ibmCol [columnNumbers]="{ lg: 16 }">
 			<ibm-breadcrumb noTrailingSlash="true" ariaLabel="Page navigation">
 				<ibm-breadcrumb-item href="/">
 					Getting started
@@ -15,45 +15,64 @@ <h1 class="landing-page__heading">
 		<div ibmCol class="bx--no-gutter">
 			<ibm-tabs ariaLabel="Tab navigation">
 				<ibm-tab heading="About">
-					<div ibmGrid class="bx--grid--no-gutter bx--grid--full-width">
+					<div
+						ibmGrid
+						class="bx--grid--no-gutter bx--grid--full-width"
+					>
 						<div ibmRow class="landing-page__tab-content">
-							<div ibmCol [columnNumbers]="{'md': 4, 'lg': 7}">
+							<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.
+									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>Learn more</button>
 							</div>
-							<div ibmCol class="bx--offset-lg-1" [columnNumbers]="{'md': 4, 'lg': 8}">
+							<div
+								ibmCol
+								class="bx--offset-lg-1"
+								[columnNumbers]="{ md: 4, lg: 8 }"
+							>
 								<img
-								class="landing-page__illo"
-								src="../../../assets/tab-illo.png"
-								alt="Carbon illustration"
+									class="landing-page__illo"
+									src="../../../assets/tab-illo.png"
+									alt="Carbon illustration"
 								/>
 							</div>
 						</div>
 					</div>
 				</ibm-tab>
 				<ibm-tab heading="Design">
-					<div ibmGrid class="bx--grid--no-gutter bx--grid--full-width">
+					<div
+						ibmGrid
+						class="bx--grid--no-gutter bx--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 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="bx--grid--no-gutter bx--grid--full-width">
+					<div
+						ibmGrid
+						class="bx--grid--no-gutter bx--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 ibmCol [columnNumbers]="{ lg: 16 }">
+								Carbon provides styles and components in
+								Vanilla, React, Angular, and Vue for anyone
+								building on the web.
 							</div>
 						</div>
 					</div>
@@ -62,11 +81,12 @@ <h2 class="landing-page__subheading">
 		</div>
 	</div>
 	<div ibmRow class="landing-page__r3">
-		<div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">
+		<app-info-section></app-info-section>
+		<!-- <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 ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">Carbon is Consistent</div> -->
 	</div>
 </div>

src/app/info/info-card/info-card.component.html

@@ -0,0 +1,10 @@
+<div class="info-card">
+	<h4 class="info-card__heading">
+		{{ splitHeading[0] }}
+		<strong>{{ splitHeading[1] }}</strong>
+	</h4>
+	<div class="info-card__body">{{ content }}</div>
+	<div class="info-card__icon">
+		<ng-content></ng-content>
+	</div>
+</div>

src/app/info/info-card/info-card.component.scss

@@ -0,0 +1,26 @@
+@import "~carbon-components/scss/globals/scss/typography";
+@import "~carbon-components/scss/globals/scss/layout";
+
+.info-card {
+	display: flex;
+	flex-direction: column;
+
+	.info-card__heading {
+		@include type-style("productive-heading-03");
+	}
+
+	.info-card__body {
+		margin-top: $spacing-06;
+		flex-grow: 1;
+		@include type-style("body-long-01");
+
+		// prevent large line lengths between small and medium viewports
+		@include breakpoint-between(321px, md) {
+			max-width: 75%;
+		}
+	}
+
+	.info-card__icon {
+		margin-top: $spacing-09;
+	}
+}

src/app/info/info-card/info-card.component.spec.ts

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

src/app/info/info-card/info-card.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from "@angular/core";
+
+@Component({
+	selector: "app-info-card",
+	templateUrl: "./info-card.component.html",
+	styleUrls: ["./info-card.component.scss"],
+})
+export class InfoCardComponent implements OnInit {
+	@Input() heading;
+	@Input() content;
+	splitHeading;
+
+	constructor() {}
+
+	ngOnInit() {
+		// create the split title to get bold styles
+		this.splitHeading = this.createArrayFromPhrase(this.heading);
+	}
+
+	// Take in a phrase and separate the third word in an array
+	createArrayFromPhrase(phrase) {
+		const splitPhrase = phrase.split(" ");
+		const thirdWord = splitPhrase.pop();
+		return [splitPhrase.join(" "), thirdWord];
+	}
+}

src/app/info/info-section/info-section.component.html

@@ -0,0 +1,29 @@
+<section ibmRow class="info-section info-section__r1">
+	<div ibmCol [columnNumbers]="{ md: 4, lg: 4 }">
+		<h3 class="info-section__heading">{{ heading }}</h3>
+	</div>
+	<app-info-card
+		ibmCol
+		[columnNumbers]="{ md: 4, lg: 4 }"
+		[heading]="items[0].heading"
+		[content]="items[0].content"
+	>
+		<ibm-icon-person-favorite32></ibm-icon-person-favorite32>
+	</app-info-card>
+	<app-info-card
+		ibmCol
+		[columnNumbers]="{ md: 4, lg: 4 }"
+		[heading]="items[1].heading"
+		[content]="items[1].content"
+	>
+		<ibm-icon-application32></ibm-icon-application32>
+	</app-info-card>
+	<app-info-card
+		ibmCol
+		[columnNumbers]="{ md: 4, lg: 4 }"
+		[heading]="items[2].heading"
+		[content]="items[2].content"
+	>
+		<ibm-icon-globe32></ibm-icon-globe32>
+	</app-info-card>
+</section>