diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts index 5105086607..29392c5702 100644 --- a/e2e/src/app.e2e-spec.ts +++ b/e2e/src/app.e2e-spec.ts @@ -1,16 +1,16 @@ -import { AppPage } from "./app.po"; -import { browser, logging } from "protractor"; +import { AppPage } from './app.po'; +import { browser, logging } from 'protractor'; -describe("workspace-project App", () => { +describe('workspace-project App', () => { let page: AppPage; beforeEach(() => { page = new AppPage(); }); - it("should display welcome message", () => { + it('should display welcome message', () => { page.navigateTo(); - expect(page.getTitleText()).toEqual("Welcome to carbon-angular-tutorial!"); + expect(page.getTitleText()).toEqual('Welcome to carbon-angular-tutorial!'); }); afterEach(async () => { diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts index 74de389f2e..8bd75de874 100644 --- a/e2e/src/app.po.ts +++ b/e2e/src/app.po.ts @@ -1,4 +1,4 @@ -import { browser, by, element } from "protractor"; +import { browser, by, element } from 'protractor'; export class AppPage { navigateTo() { @@ -6,6 +6,6 @@ export class AppPage { } getTitleText() { - return element(by.css("app-root h1")).getText() as Promise; + return element(by.css('app-root h1')).getText() as Promise; } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6bec4a3eb3..e546cdcfd7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,7 +11,7 @@ import { Notification20Module } from '@carbon/icons-angular/lib/notification/20' import { UserAvatar20Module } from '@carbon/icons-angular/lib/user--avatar/20'; import { AppSwitcher20Module } from '@carbon/icons-angular/lib/app-switcher/20'; import { HeaderComponent } from './header/header.component'; - +import { TableModule } from 'carbon-components-angular'; @NgModule({ declarations: [ AppComponent, @@ -25,7 +25,8 @@ import { HeaderComponent } from './header/header.component'; UIShellModule, Notification20Module, UserAvatar20Module, - AppSwitcher20Module + AppSwitcher20Module, + TableModule ], bootstrap: [AppComponent] }) diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 263087858f..4e70209b52 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -3,12 +3,17 @@ import { CommonModule } from '@angular/common'; import { HomeRoutingModule } from './home-routing.module'; import { LandingPageComponent } from './landing-page/landing-page.component'; +import { BreadcrumbModule, ButtonModule, GridModule, TabsModule } from 'carbon-components-angular'; @NgModule({ declarations: [LandingPageComponent], imports: [ CommonModule, - HomeRoutingModule + HomeRoutingModule, + GridModule, + BreadcrumbModule, + ButtonModule, + TabsModule ] }) 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..4a2bf82e51 100644 --- a/src/app/home/landing-page/landing-page.component.html +++ b/src/app/home/landing-page/landing-page.component.html @@ -1 +1,70 @@ -

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
+
+
\ No newline at end of file diff --git a/src/app/home/landing-page/landing-page.component.scss b/src/app/home/landing-page/landing-page.component.scss index e69de29bb2..9a9dc5dc97 100644 --- a/src/app/home/landing-page/landing-page.component.scss +++ b/src/app/home/landing-page/landing-page.component.scss @@ -0,0 +1,69 @@ +.landing-page__illo { + max-width: 100%; + } + +@import '~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family'; +@import '~carbon-components/scss/globals/scss/typography'; + +.landing-page__banner { + padding-top: $spacing-05; + padding-bottom: $spacing-07 * 4; +} + @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'); + } \ No newline at end of file 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..12c5efea01 100644 --- a/src/app/home/landing-page/landing-page.component.spec.ts +++ b/src/app/home/landing-page/landing-page.component.spec.ts @@ -2,13 +2,16 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { LandingPageComponent } from './landing-page.component'; +import { BreadcrumbModule, ButtonModule, GridModule, TabsModule } from 'carbon-components-angular'; + describe('LandingPageComponent', () => { let component: LandingPageComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ LandingPageComponent ] + declarations: [ LandingPageComponent ], + imports : [BreadcrumbModule, ButtonModule, GridModule, TabsModule] }) .compileComponents(); })); diff --git a/src/app/repositories/repo-page/repo-page.component.html b/src/app/repositories/repo-page/repo-page.component.html index 97046993ff..77a24ab668 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!

+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/repositories/repo-page/repo-page.component.scss b/src/app/repositories/repo-page/repo-page.component.scss index e69de29bb2..f4e2be9d9f 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; +} \ No newline at end of file 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..0c8ea24749 100644 --- a/src/app/repositories/repo-page/repo-page.component.spec.ts +++ b/src/app/repositories/repo-page/repo-page.component.spec.ts @@ -1,14 +1,16 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RepoPageComponent } from './repo-page.component'; - +import { GridModule, TableModule } from 'carbon-components-angular'; +import { RepoTableComponent } from '../repo-table/repo-table.component'; describe('RepoPageComponent', () => { let component: RepoPageComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ RepoPageComponent ] + declarations: [ RepoPageComponent, RepoTableComponent ], + imports: [GridModule, TableModule] }) .compileComponents(); })); 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..9b2d55691e --- /dev/null +++ b/src/app/repositories/repo-table/repo-table.component.html @@ -0,0 +1,11 @@ + + +

Carbon Repositories

+

A collection of public Carbon repositories.

+ + + + \ No newline at end of file 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..d75d3ac346 --- /dev/null +++ b/src/app/repositories/repo-table/repo-table.component.spec.ts @@ -0,0 +1,29 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RepoTableComponent } from './repo-table.component'; +import { TableModule } from 'carbon-components-angular'; + +describe('RepoTableComponent', () => { + let component: RepoTableComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RepoTableComponent ], + imports: [ + 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..f6a517de3d --- /dev/null +++ b/src/app/repositories/repo-table/repo-table.component.ts @@ -0,0 +1,55 @@ +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..d5fe02e14c 100644 --- a/src/app/repositories/repositories.module.ts +++ b/src/app/repositories/repositories.module.ts @@ -3,12 +3,16 @@ 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], + declarations: [RepoPageComponent, RepoTableComponent], imports: [ CommonModule, - RepositoriesRoutingModule + RepositoriesRoutingModule, + GridModule, + TableModule ] }) 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..646326564a --- /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 .bx--tabs__nav { + right: 0; + } + + // forces the navigation items to be displayed at all viewport sizes + .cds--header__nav { + display: block; + } \ No newline at end of file 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..912eb4df35 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,8 +4,10 @@ // $carbon--theme: $carbon--theme--g90; // $carbon--theme: $carbon--theme--g10; +$feature-flags: ( + grid-columns-16: true +); + @import "~carbon-components/scss/globals/scss/styles"; +@import './assets/scss/carbon-overrides.scss'; -.bx--header__nav { - display: block; -}