diff --git a/package-lock.json b/package-lock.json index bbaf95fbc5..11563dd16d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2763,7 +2763,7 @@ "builtins": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz", - "integrity": "sha1-y5T662HIaWRR2zZTThQi+U8K7og=", + "integrity": "sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==", "dev": true }, "bytes": { @@ -3558,7 +3558,7 @@ "debuglog": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz", - "integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=", + "integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==", "dev": true }, "decamelize": { @@ -4019,7 +4019,7 @@ "err-code": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/err-code/-/err-code-1.1.2.tgz", - "integrity": "sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=", + "integrity": "sha512-CJAN+O0/yA1CKfRn9SXOGctSpEM7DCon/r/5r2eXFMY2zCCJBasFhcM5I+1kh3Ap11FsQCX+vGHceNPvpWKhoA==", "dev": true }, "errno": { @@ -5246,7 +5246,7 @@ "humanize-ms": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", - "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=", + "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", "dev": true, "requires": { "ms": "^2.0.0" @@ -6111,7 +6111,7 @@ "jsonparse": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", - "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=", + "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==", "dev": true }, "jsprim": { @@ -8780,7 +8780,7 @@ "promise-retry": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-1.1.1.tgz", - "integrity": "sha1-ZznpaOMFHaIM5kl/srUPaRHfPW0=", + "integrity": "sha512-StEy2osPr28o17bIW776GtwO6+Q+M9zPiZkYfosciUUMYqjhU/ffwRAH0zN2+uvGyUsn8/YICIHRzLbPacpZGw==", "dev": true, "requires": { "err-code": "^1.0.0", @@ -8790,7 +8790,7 @@ "retry": { "version": "0.10.1", "resolved": "https://registry.npmjs.org/retry/-/retry-0.10.1.tgz", - "integrity": "sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=", + "integrity": "sha512-ZXUSQYTHdl3uS7IuCehYfMzKyIDBNoAuUblvy5oGO5UJSUTmStUUVPXbA9Qxd173Bgre53yCQczQuHgRWAdvJQ==", "dev": true } } @@ -11377,7 +11377,7 @@ "util-promisify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/util-promisify/-/util-promisify-2.1.0.tgz", - "integrity": "sha1-PCI2R2xNMsX/PEcAKt18E7moKlM=", + "integrity": "sha512-K+5eQPYs14b3+E+hmE2J6gCZ4JmMl9DbYS6BeP2CHq6WMuNxErxf5B/n0fz85L8zUuoO6rIzNNmIQDu/j+1OcA==", "dev": true, "requires": { "object.getownpropertydescriptors": "^2.0.3" @@ -11408,7 +11408,7 @@ "validate-npm-package-name": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz", - "integrity": "sha1-X6kS2B630MdK/BQN5zF/DKffQ34=", + "integrity": "sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==", "dev": true, "requires": { "builtins": "^1.0.3" diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 408717b14f..dd814ac856 100644 --- a/src/app/home/home.module.ts +++ b/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 {} diff --git a/src/app/home/landing-page/landing-page.component.html b/src/app/home/landing-page/landing-page.component.html index 707719bb0e..d025a1c535 100644 --- a/src/app/home/landing-page/landing-page.component.html +++ b/src/app/home/landing-page/landing-page.component.html @@ -1,6 +1,6 @@
-
+
Getting started @@ -15,45 +15,64 @@

-
+
-
+

What is Carbon?

- 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.

-
+
Carbon illustration
-
+
-
- Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started. +
+ Rapidly build beautiful and accessible + experiences. The Carbon kit contains all + resources you need to get started.
-
+
-
- Carbon provides styles and components in Vanilla, React, Angular, and Vue for anyone building on the web. +
+ Carbon provides styles and components in + Vanilla, React, Angular, and Vue for anyone + building on the web.
@@ -62,11 +81,12 @@

-
+ +
diff --git a/src/app/info/info-card/info-card.component.html b/src/app/info/info-card/info-card.component.html new file mode 100644 index 0000000000..2146292900 --- /dev/null +++ b/src/app/info/info-card/info-card.component.html @@ -0,0 +1,10 @@ +
+

+ {{ splitHeading[0] }} + {{ splitHeading[1] }} +

+
{{ content }}
+
+ +
+
diff --git a/src/app/info/info-card/info-card.component.scss b/src/app/info/info-card/info-card.component.scss new file mode 100644 index 0000000000..26c3b29739 --- /dev/null +++ b/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; + } +} diff --git a/src/app/info/info-card/info-card.component.spec.ts b/src/app/info/info-card/info-card.component.spec.ts new file mode 100644 index 0000000000..08d16aafc7 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InfoCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InfoCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/info/info-card/info-card.component.ts b/src/app/info/info-card/info-card.component.ts new file mode 100644 index 0000000000..d19ae7dd1e --- /dev/null +++ b/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]; + } +} diff --git a/src/app/info/info-section/info-section.component.html b/src/app/info/info-section/info-section.component.html new file mode 100644 index 0000000000..288aaa9d63 --- /dev/null +++ b/src/app/info/info-section/info-section.component.html @@ -0,0 +1,29 @@ +
+
+

{{ heading }}

+
+ + + + + + + + + +
diff --git a/src/app/info/info-section/info-section.component.scss b/src/app/info/info-section/info-section.component.scss new file mode 100644 index 0000000000..2d860ff1ae --- /dev/null +++ b/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; + + &.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"); + } + + .app-info-card { + margin-top: $spacing-09; + } + + // 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; + } + } +} diff --git a/src/app/info/info-section/info-section.component.spec.ts b/src/app/info/info-section/info-section.component.spec.ts new file mode 100644 index 0000000000..070fe4fe51 --- /dev/null +++ b/src/app/info/info-section/info-section.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InfoSectionComponent } from './info-section.component'; + +describe('InfoSectionComponent', () => { + let component: InfoSectionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InfoSectionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InfoSectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/info/info-section/info-section.component.ts b/src/app/info/info-section/info-section.component.ts new file mode 100644 index 0000000000..1bf8def21b --- /dev/null +++ b/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() {} +} diff --git a/src/app/info/info.json b/src/app/info/info.json new file mode 100644 index 0000000000..dc4a2760db --- /dev/null +++ b/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." + } + ] +} diff --git a/src/app/info/info.module.ts b/src/app/info/info.module.ts new file mode 100644 index 0000000000..e4fe0a0a02 --- /dev/null +++ b/src/app/info/info.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { InfoCardComponent } from "./info-card/info-card.component"; +import { InfoSectionComponent } from "./info-section/info-section.component"; +import { GridModule } from "carbon-components-angular"; +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"; + +@NgModule({ + declarations: [InfoCardComponent, InfoSectionComponent], + imports: [ + CommonModule, + GridModule, + PersonFavorite32Module, + Globe32Module, + Application32Module, + ], + exports: [InfoCardComponent, InfoSectionComponent], +}) +export class InfoModule {} diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json index a89d47bd4c..057d79d205 100644 --- a/src/tsconfig.app.json +++ b/src/tsconfig.app.json @@ -5,22 +5,14 @@ "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, - "lib": [ - "es2016", - "dom", - "esnext.asynciterable" - ], + "lib": ["es2016", "dom", "esnext.asynciterable"], "outDir": "../out-tsc/app", "target": "es2015", "module": "esnext", "baseUrl": "", - "types": [] + "types": [], + "resolveJsonModule": true }, - "include": [ - "**/*" - ], - "exclude": [ - "test.ts", - "**/*.spec.ts" - ] + "include": ["**/*"], + "exclude": ["test.ts", "**/*.spec.ts"] } diff --git a/tsconfig.json b/tsconfig.json index 0aedc047fd..f9f053d54b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,20 +1,17 @@ { - "compileOnSave": false, - "compilerOptions": { - "importHelpers": true, - "outDir": "./dist/out-tsc", - "sourceMap": true, - "declaration": false, - "moduleResolution": "node", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "target": "es2015", - "lib": [ - "es2016", - "dom", - "esnext.asynciterable" - ], - "module": "esnext", - "baseUrl": "./" - } + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "target": "es2015", + "lib": ["es2016", "dom", "esnext.asynciterable"], + "module": "esnext", + "baseUrl": "./", + "resolveJsonModule": true + } }