diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 408717b14f..a446062686 100644 --- a/src/app/home/home.module.ts +++ b/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 { } diff --git a/src/app/home/landing-page/landing-page.component.html b/src/app/home/landing-page/landing-page.component.html index 707719bb0e..03786d52ee 100644 --- a/src/app/home/landing-page/landing-page.component.html +++ b/src/app/home/landing-page/landing-page.component.html @@ -61,12 +61,5 @@

-
-
-

The Principles

-
-
Carbon is Open
-
Carbon is Modular
-
Carbon is Consistent
-
+ 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..cf137f5b7b --- /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..84b74aa959 --- /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__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%; + } + } +} 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..e69de29bb2 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..894bbab151 --- /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..c67da8e589 --- /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..9fa19d7805 --- /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; + + // 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"); + } +} 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..e69de29bb2 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..6089edda1a --- /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..8e64c1a2c1 --- /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..c112f93945 --- /dev/null +++ b/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 {} + diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json index a89d47bd4c..f9141d2fec 100644 --- a/src/tsconfig.app.json +++ b/src/tsconfig.app.json @@ -2,6 +2,7 @@ "compilerOptions": { "sourceMap": true, "declaration": false, + "resolveJsonModule": true, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true,