From 1ea127b4fde7993a44fad7e4729aa7775e1a6f84 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 10:43:29 -0400 Subject: [PATCH 1/9] chore(readme): update readme to make getting started more useful --- README.md | 54 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 6cde083ae3..af27f48cdc 100644 --- a/README.md +++ b/README.md @@ -3,15 +3,59 @@ An _Angular_ implementation of the Carbon Design System ### Getting started -``` +Assuming we're starting with a new @angular/cli project: + +```shell $ npx @angular/cli new my-project $ cd my-project -$ npm i carbon-components-angular carbon-components -$ # include carbon css -$ # import components -$ npm start +$ npm i --save-dev carbon-components-angular carbon-components +``` + +Then we need to rename `src/styles.css` to `src/styles.scss` and include carbon-components: + +```scss +@import "~carbon-components/scss/globals/scss/styles.scss"; ``` +And make sure the `angular.json` is configured to pick up our new file: + +```javascript +// ... +"projects": { + "demo-project": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "prefix": "app", + "schematics": {}, + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo-project", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.scss" // <-- this line specifically + ], + } + } + } + } +} +// ... +``` + +_Finally_ we can run `npm start` and start building out our application! + +> *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` is our recommended setup. + #### Bundler Your project should use a module bundler - we recommend [webpack](https://webpack.js.org/). From c84a39b23c8b7ceeb2c116dc686fb9fde62b8f6d Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 10:45:54 -0400 Subject: [PATCH 2/9] remove line about bundler ... --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index af27f48cdc..dd6fd7b044 100644 --- a/README.md +++ b/README.md @@ -56,10 +56,6 @@ _Finally_ we can run `npm start` and start building out our application! > *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` is our recommended setup. -#### Bundler - -Your project should use a module bundler - we recommend [webpack](https://webpack.js.org/). - ### Contributing #### Quickstart From 9045055b7fefe8dffada9d118480d62dbe9a3a9f Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 10:47:27 -0400 Subject: [PATCH 3/9] update resources links --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dd6fd7b044..2a331474f6 100644 --- a/README.md +++ b/README.md @@ -109,8 +109,8 @@ To keep our build dependancies local we use npm scripts to run our webpack, gulp - `npm test` to run tests ### Resources - - [Style guide (WIP)](#) - - [General component API guidelines (WIP)](#) + - [Style guide (WIP)](https://github.com/IBM/carbon-components-angular/wiki/Style-guide) + - [General component API guidelines (WIP)](https://github.com/IBM/carbon-components-angular/wiki/Component-API-guidelines) - [Angular style guide](https://angular.io/styleguide) - [I18N tooling](https://angular.io/docs/ts/latest/cookbook/i18n.html) - (Angular 2+ doesn't have anything like ngAria, instead here's [The A11Y Project](http://a11yproject.com/), [WAI-ARIA specs](https://www.w3.org/TR/wai-aria/), and [WAI-ARIA Authoring Practices](https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/)) From 682c7718329f12dc524f8c1c003084cee47dda11 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 10:48:20 -0400 Subject: [PATCH 4/9] remove some outdated warnings --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 2a331474f6..c562cfd3e3 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ _Finally_ we can run `npm start` and start building out our application! ### Contributing #### Quickstart -- fork ibm/carbon-components-angular and clone it locally +- fork IBM/carbon-components-angular and clone it locally - run `npm install` to grab all the dependencies, then `npm run storybook` to start storybook - **if you are adding a component**: - add a folder with your component code, styles, tests and story under `src` @@ -69,7 +69,6 @@ _Finally_ we can run `npm start` and start building out our application! - consider adding or modifying a test case to cover the fix - follow the [Angular style guide](https://angular.io/styleguide) - be sure to run `npm test` and `npm run lint` to make sure the tests and linter pass -- DO NOT change the version number. - submit a PR #### Pull request guidelines From 9be80aa053b788e9c446374f3ea139a2d3662ca0 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 10:56:38 -0400 Subject: [PATCH 5/9] add style flag! --- README.md | 39 ++------------------------------------- 1 file changed, 2 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index c562cfd3e3..322079ea9d 100644 --- a/README.md +++ b/README.md @@ -6,52 +6,17 @@ An _Angular_ implementation of the Carbon Design System Assuming we're starting with a new @angular/cli project: ```shell -$ npx @angular/cli new my-project +$ npx @angular/cli new my-project --style=scss $ cd my-project $ npm i --save-dev carbon-components-angular carbon-components ``` -Then we need to rename `src/styles.css` to `src/styles.scss` and include carbon-components: +Then we need to include carbon-components in `src/styles.css`: ```scss @import "~carbon-components/scss/globals/scss/styles.scss"; ``` -And make sure the `angular.json` is configured to pick up our new file: - -```javascript -// ... -"projects": { - "demo-project": { - "root": "", - "sourceRoot": "src", - "projectType": "application", - "prefix": "app", - "schematics": {}, - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/demo-project", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "src/tsconfig.app.json", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" // <-- this line specifically - ], - } - } - } - } -} -// ... -``` - _Finally_ we can run `npm start` and start building out our application! > *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` is our recommended setup. From 5870994f6eb33f1570494bfea4de0849f06c0e4b Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 11:07:09 -0400 Subject: [PATCH 6/9] a few minor fixes --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 322079ea9d..e8d6d61cb0 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,10 @@ Assuming we're starting with a new @angular/cli project: ```shell $ npx @angular/cli new my-project --style=scss $ cd my-project -$ npm i --save-dev carbon-components-angular carbon-components +$ npm i --save-dev carbon-components-angular carbon-components @ngx-translate/core ``` -Then we need to include carbon-components in `src/styles.css`: +Then we need to include carbon-components in `src/styles.scss`: ```scss @import "~carbon-components/scss/globals/scss/styles.scss"; From ba92b51c340a9dc78317fdbffeca484eadc68d52 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 11:46:53 -0400 Subject: [PATCH 7/9] translations! --- README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/README.md b/README.md index e8d6d61cb0..8d7d9d99d6 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,29 @@ Then we need to include carbon-components in `src/styles.scss`: @import "~carbon-components/scss/globals/scss/styles.scss"; ``` +And set up our translations in `src/app/app.module.ts`: + +```ts +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { TranslateModule } from '@ngx-translate/core'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + TranslateModule.forRoot() + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } +``` + _Finally_ we can run `npm start` and start building out our application! > *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` is our recommended setup. From 0110e93670c12d70ab4a38a7b996418cfaa4a7f1 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 11:59:36 -0400 Subject: [PATCH 8/9] make translations actually work! --- .storybook/bootstrap.module.ts | 16 ++++++++++++++++ src/dropdown/dropdown.stories.ts | 7 ++++--- 2 files changed, 20 insertions(+), 3 deletions(-) create mode 100644 .storybook/bootstrap.module.ts diff --git a/.storybook/bootstrap.module.ts b/.storybook/bootstrap.module.ts new file mode 100644 index 0000000000..9c2404a70f --- /dev/null +++ b/.storybook/bootstrap.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from "@angular/core"; +import { TranslateModule, TranslateService } from "@ngx-translate/core"; +const en = require("./../src/i18n/en.json"); + +@NgModule({ + imports: [ + TranslateModule.forRoot() + ] +}) +export class BootstrapModule { + constructor(private translateService: TranslateService) { + this.translateService.setDefaultLang("en"); + this.translateService.use("en"); + this.translateService.setTranslation("en", en); + } +} diff --git a/src/dropdown/dropdown.stories.ts b/src/dropdown/dropdown.stories.ts index cb255b1057..41741232bd 100644 --- a/src/dropdown/dropdown.stories.ts +++ b/src/dropdown/dropdown.stories.ts @@ -3,16 +3,17 @@ import { withNotes } from "@storybook/addon-notes"; import { action } from "@storybook/addon-actions"; import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular"; -import { TranslateModule } from "@ngx-translate/core"; - import { DropdownModule } from "../"; +// needed to init ngx translate and load the translations +import { BootstrapModule } from "../../.storybook/bootstrap.module"; + storiesOf("Dropdown", module) .addDecorator( moduleMetadata({ imports: [ DropdownModule, - TranslateModule.forRoot() + BootstrapModule ], }) ) From dd0b151b72b1c293a4f4aed623cfe68c4395477e Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Wed, 22 Aug 2018 14:22:42 -0400 Subject: [PATCH 9/9] add scss --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8d7d9d99d6..aec1dc980b 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ export class AppModule { } _Finally_ we can run `npm start` and start building out our application! -> *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` is our recommended setup. +> *Note:* This isn't the only way to bootstrap a `carbon-components-angular` application, but the combination of `@angular/cli` and the `carbon-components` scss is our recommended setup. ### Contributing