feat(tutorial): complete step 4

src/app/home/home.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { HomeRoutingModule } from './home-routing.module';
 import { LandingPageComponent } from './landing-page/landing-page.component';
+import { InfoModule } from "./../info/info.module";
 import {
 	BreadcrumbModule,
 	ButtonModule,
@@ -18,7 +19,7 @@ import {
 		BreadcrumbModule,
 		ButtonModule,
 		GridModule,
-		TabsModule
+		TabsModule, InfoModule
 	]
 })
 export class HomeModule { }

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

@@ -61,12 +61,5 @@ <h2 class="landing-page__subheading">
 			</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>
+	<app-info-section></app-info-section>
 </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__icon {
+    margin-top: $spacing-09;
+  }
+
+  .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%;
+    }
+  }
+}

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>

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

@@ -0,0 +1,62 @@
+@import "~carbon-components/scss/globals/scss/typography";
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family";
+
+@mixin info-section-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;
+  }
+}
+
+.info-section {
+  @include info-section-background;
+  display: flex;
+  height: fit-content;
+
+  // top border in only small breakpoints to prevent overrides
+  @include breakpoint-down(md) {
+    app-info-card:not(:nth-child(2)) {
+      border-top: 1px solid $ui-03;
+      padding-top: $spacing-09;
+    }
+  }
+
+  // left border in just the 2nd column items
+  @include breakpoint(md) {
+    app-info-card:nth-child(odd) {
+      border-left: 1px solid $ui-03;
+    }
+  }
+
+  // left border in all items
+  @include breakpoint(lg) {
+    app-info-card {
+      margin-top: 0;
+      border-left: 1px solid $ui-03;
+    }
+  }
+
+  .app-info-card {
+    margin-top: $spacing-09;
+  }
+
+  &.info-section__r1 {
+    padding-top: $spacing-09;
+    padding-bottom: $spacing-09;
+    height: auto;
+  }
+
+  .info-section__heading {
+    @include type-style("heading-01");
+    @include font-weight("semibold");
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import * as data from '../info.json';
+
+@Component({
+  selector: 'app-info-section',
+  templateUrl: './info-section.component.html',
+  styleUrls: ['./info-section.component.scss'],
+})
+export class InfoSectionComponent implements OnInit {
+  heading = data.title;
+  items = data.items;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/info/info.json

@@ -0,0 +1,17 @@
+{
+	"title": "The Principles",
+	"items": [
+	  {
+		"heading": "Carbon is Open",
+		"content": "It's a distributed effort, guided by the principles of the open-source movement. Carbon's users are also it's makers, and everyone is encouraged to contribute."
+	  },
+	  {
+		"heading": "Carbon is Modular",
+		"content": "Carbon's modularity ensures maximum flexibility in execution. It's components are designed to work seamlessly with each other, in whichever combination suits the needs of the user."
+	  },
+	  {
+		"heading": "Carbon is Consistent",
+		"content": "Based on the comprehensive IBM Design Language, every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences."
+	  }
+	]
+  }

src/app/info/info.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+
+import { PersonFavorite32Module } from "@carbon/icons-angular/lib/person--favorite/32";
+import { Globe32Module } from "@carbon/icons-angular/lib/globe/32";
+import { Application32Module } from "@carbon/icons-angular/lib/application/32";
+
+import { GridModule } from "carbon-components-angular";
+import { InfoSectionComponent } from "./info-section/info-section.component";
+import { InfoCardComponent } from "./info-card/info-card.component";
+
+@NgModule({
+  declarations: [InfoSectionComponent, InfoCardComponent],
+  imports: [
+    PersonFavorite32Module,
+    Globe32Module,
+    Application32Module,
+  ],
+  exports: [InfoSectionComponent, InfoCardComponent],
+})
+export class InfoModule {}
+

src/tsconfig.app.json

@@ -2,6 +2,7 @@
 	"compilerOptions": {
 		"sourceMap": true,
 		"declaration": false,
+		"resolveJsonModule": true,
 		"moduleResolution": "node",
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,