diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a22517397c..5efac346e4 100644 --- a/src/app/app-routing.module.ts +++ b/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 {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6bec4a3eb3..fe9c0c21ad 100644 --- a/src/app/app.module.ts +++ b/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 {} diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 263087858f..3c6fb199b5 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -1,6 +1,11 @@ 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'; @@ -8,7 +13,11 @@ import { LandingPageComponent } from './landing-page/landing-page.component'; declarations: [LandingPageComponent], imports: [ CommonModule, - HomeRoutingModule - ] + HomeRoutingModule, + BreadcrumbModule, + GridModule, + ButtonModule, + TabsModule, + ], }) -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 8d1873e93e..b7a95b31fb 100644 --- a/src/app/home/landing-page/landing-page.component.html +++ b/src/app/home/landing-page/landing-page.component.html @@ -1 +1,93 @@ -

landing-page works!

+
+
+
+ + + Getting started + + +

+ Design & build with Carbon +

+
+
+
+
+ + +
+
+
+

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

The Principles

+
+
Carbon is Open
+
Carbon is Modular
+
+ Carbon is Consistent +
+
+
diff --git a/src/app/home/landing-page/landing-page.component.scss b/src/app/home/landing-page/landing-page.component.scss index e69de29bb2..a654029cec 100644 --- a/src/app/home/landing-page/landing-page.component.scss +++ b/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"); +} diff --git a/src/app/home/landing-page/landing-page.component.spec.ts b/src/app/home/landing-page/landing-page.component.spec.ts index 463ba36fda..2474f4f9df 100644 --- a/src/app/home/landing-page/landing-page.component.spec.ts +++ b/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(() => { diff --git a/src/app/repositories/repo-page/repo-page.component.html b/src/app/repositories/repo-page/repo-page.component.html index 97046993ff..75a582ed9d 100644 --- a/src/app/repositories/repo-page/repo-page.component.html +++ b/src/app/repositories/repo-page/repo-page.component.html @@ -1 +1,7 @@ -

repo-page works!

+
+
+
+ +
+
+
diff --git a/src/app/repositories/repo-page/repo-page.component.scss b/src/app/repositories/repo-page/repo-page.component.scss index e69de29bb2..a06188b8c4 100644 --- a/src/app/repositories/repo-page/repo-page.component.scss +++ b/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; +} diff --git a/src/app/repositories/repo-page/repo-page.component.spec.ts b/src/app/repositories/repo-page/repo-page.component.spec.ts index 25364e32e9..41fc12d7af 100644 --- a/src/app/repositories/repo-page/repo-page.component.spec.ts +++ b/src/app/repositories/repo-page/repo-page.component.spec.ts @@ -1,6 +1,7 @@ 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; @@ -8,9 +9,9 @@ describe('RepoPageComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ RepoPageComponent ] - }) - .compileComponents(); + declarations: [RepoPageComponent, RepoTableComponent], + imports: [GridModule, TableModule], + }).compileComponents(); })); beforeEach(() => { diff --git a/src/app/repositories/repo-table/repo-table.component.html b/src/app/repositories/repo-table/repo-table.component.html new file mode 100644 index 0000000000..c3078d07fc --- /dev/null +++ b/src/app/repositories/repo-table/repo-table.component.html @@ -0,0 +1,10 @@ + + +

Carbon Repositories

+

+ A collection of public Carbon repositories. +

+ + + + diff --git a/src/app/repositories/repo-table/repo-table.component.scss b/src/app/repositories/repo-table/repo-table.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/repositories/repo-table/repo-table.component.spec.ts b/src/app/repositories/repo-table/repo-table.component.spec.ts new file mode 100644 index 0000000000..884f69e38e --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/app/repositories/repo-table/repo-table.component.ts b/src/app/repositories/repo-table/repo-table.component.ts new file mode 100644 index 0000000000..d3a05d337a --- /dev/null +++ b/src/app/repositories/repo-table/repo-table.component.ts @@ -0,0 +1,64 @@ +import { Component, OnInit } from '@angular/core'; + +import { + TableModel, + TableItem, + TableHeaderItem, +} from 'carbon-components-angular'; + +@Component({ + selector: 'app-repo-table', + templateUrl: './repo-table.component.html', + styleUrls: ['./repo-table.component.scss'], +}) +export class RepoTableComponent implements OnInit { + model = new TableModel(); + + constructor() {} + + ngOnInit() { + this.model.data = [ + [ + new TableItem({ + data: 'Repo 1', + expandedData: 'Row description', + }), + new TableItem({ data: 'Date' }), + new TableItem({ data: 'Date' }), + new TableItem({ data: '123' }), + new TableItem({ data: '456' }), + new TableItem({ data: 'Links' }), + ], + [ + new TableItem({ + data: 'Repo 2', + expandedData: 'Row description', + }), + new TableItem({ data: 'Date' }), + new TableItem({ data: 'Date' }), + new TableItem({ data: '123' }), + new TableItem({ data: '456' }), + new TableItem({ data: 'Links' }), + ], + [ + new TableItem({ + data: 'Repo 3', + expandedData: 'Row description', + }), + new TableItem({ data: 'Date' }), + new TableItem({ data: 'Date' }), + new TableItem({ data: '123' }), + new TableItem({ data: '456' }), + new TableItem({ data: 'Links' }), + ], + ]; + this.model.header = [ + new TableHeaderItem({ data: 'Name' }), + new TableHeaderItem({ data: 'Created' }), + new TableHeaderItem({ data: 'Updated' }), + new TableHeaderItem({ data: 'Open Issues' }), + new TableHeaderItem({ data: 'Stars' }), + new TableHeaderItem({ data: 'Links' }), + ]; + } +} diff --git a/src/app/repositories/repositories.module.ts b/src/app/repositories/repositories.module.ts index f0cd4578a6..d1b3706ece 100644 --- a/src/app/repositories/repositories.module.ts +++ b/src/app/repositories/repositories.module.ts @@ -3,12 +3,11 @@ import { CommonModule } from '@angular/common'; import { RepositoriesRoutingModule } from './repositories-routing.module'; import { RepoPageComponent } from './repo-page/repo-page.component'; +import { GridModule, TableModule } from 'carbon-components-angular'; +import { RepoTableComponent } from './repo-table/repo-table.component'; @NgModule({ - declarations: [RepoPageComponent], - imports: [ - CommonModule, - RepositoriesRoutingModule - ] + declarations: [RepoPageComponent, RepoTableComponent], + imports: [CommonModule, RepositoriesRoutingModule, GridModule, TableModule], }) -export class RepositoriesModule { } +export class RepositoriesModule {} diff --git a/src/assets/scss/carbon-overrides.scss b/src/assets/scss/carbon-overrides.scss new file mode 100644 index 0000000000..505306dc4d --- /dev/null +++ b/src/assets/scss/carbon-overrides.scss @@ -0,0 +1,27 @@ +// makes the grid fit the entire width of the page +.cds--grid--full-width { + padding-left: 1rem; + padding-right: 1rem; +} + +// removes excess padding for nested full width grids +.cds--grid--full-width .cds--grid--full-width { + padding-left: 0; + padding-right: 0; +} + +// removes extraneous row margins in the full width grid +.cds--grid--full-width .cds--row { + margin-left: 0; + margin-right: 0; +} + +// aligns the tabs to the right +.landing-page__r2 .cds--tabs__nav { + right: 0; +} + +// forces the navigation items to be displayed at all viewport sizes +.cds--header__nav { + display: block; +} diff --git a/src/assets/tab-illo.png b/src/assets/tab-illo.png new file mode 100644 index 0000000000..736f59dd64 Binary files /dev/null and b/src/assets/tab-illo.png differ diff --git a/src/styles.scss b/src/styles.scss index ab04f659aa..1215975730 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,7 +5,12 @@ // $carbon--theme: $carbon--theme--g10; @import "~carbon-components/scss/globals/scss/styles"; +@import "./assets/scss/carbon-overrides.scss"; .bx--header__nav { display: block; } + +$feature-flags: ( + grid-columns-16: true, +); diff --git a/src/typings.d.ts b/src/typings.d.ts index dc6483d61d..8a49231ba6 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -1,4 +1 @@ -/* SystemJS module definition */ -declare var module: { - id: string; -}; +declare module '@carbon/icons/*';