diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 107 |
1 files changed, 50 insertions, 57 deletions
@@ -1,71 +1,66 @@ -# SDC-UI Style-Guide and Components +# ONAP-UI-ANGULAR Style-Guide and Components This project aims to create a unified UI styled components for multiple development teams who work on the same web-based applications. This repository contains the definition of all the basic widgets and reusable controllers. - +Note: the project is build of 3 different projects: +1. [onap-ui-common](https://github.com/onap-sdc/onap-ui-common) - contains HTML and SCSS files for all components +2. [onap-ui-angular](https://github.com/onap-sdc/onap-ui-angular) - contains Angular components according to the HTML defined in onap-ui-common +3. [onap-ui-react](https://github.com/onap-sdc/onap-ui-react) - contains React components according to the HTML defined in onap-ui-common + + ### Usage -#### Link the library's CSS file -There are several options to link to sdc-ui CSS file: +To start using this library you need to install 2 libraris: +1. onap-ui-angular or onap-ui-react. +2. onap-ui-common -###### SCSS -```scss -@import "path_to_node_modules/sdc-ui/css/style.css"; -``` -###### HTML -```html -<link rel="stylesheet" href="path_to_node_modules/sdc-ui/css/style.css"> -``` -###### As Module (Using loading tool, i.e. [Webpack](https://webpack.github.io/)) ```js -import 'sdc-ui/css/style.css'; +npm install --save-dev onap-ui-angular +npm install --save-dev onap-ui-common ``` + +#### Link the library's CSS file +The main CSS file is defined in onap-ui-common library. +There are several options to link it to your project: + ###### Angular CLI projects -You can add this line to style.css file: +You can add this line to src/style.css file: ```js -@import "../node_modules/sdc-ui/css/style.css"; +@import "node_modules/onap-ui-common/lib/style.css"; ``` -#### React Code examples -###### Importing particular component +Angular CLI project has angular.json file, that defines location of styles files. +By default angular.json contains the following definition: ```js -import Button from 'sdc-ui/lib/react/Button.js'; - -// inside component rendering... -render(){ - return ( - <Button>I am a Button</Button> - ); -} + "styles": [ + "src/styles.css" + ], ``` -###### Importing particular component from the react library -```js -import {Button} from 'sdc-ui/lib/react'; - -// inside component rendering... -render(){ - return ( - <Button>I am a Button</Button> - ); -} +So you can add to src/styles.css import of onap-ui-common styles. + +###### HTML +```html +<link rel="stylesheet" href="node_modules/onap-ui-common/lib/style.css"> ``` -###### Importing the entire library + +###### As Module (Using loading tool, i.e. [Webpack](https://webpack.github.io/)) ```js -import SDCUI from 'sdc-ui'; - -// inside component rendering... -render(){ - return ( - <SDCUI.React.Button>I am still a Button</SDCUI.React.Button> - ); -} +import 'onap-ui-common/lib/style.css'; ``` -#### Using the library in Angular (2-5) +###### Importing SCSS typography files +onap-ui-common also contains to SCSS files: +variables.scss +mixins.scss + +You can import these files to your project and get the same color scheme and variables line onap-ui-common. + + +#### Using the library in latest Angular (6) ###### Add the library to your module ```js - import { SdcUiComponentsModule, SdcUiComponents } from 'sdc-ui/lib/angular'; + import { SdcUiComponentsModule, SdcUiComponents } from 'onap-ui-angular'; @NgModule({ declarations: [ @@ -87,25 +82,23 @@ render(){ ### Running storybook -The components in this library are displayed via [storybook](https://github.com/storybooks/storybook). Head to [http://onap-sdc.github.io/sdc-ui](http://onap-sdc.github.io/sdc-ui) to see the components that are in `master`. +The components in this library are displayed via [storybook](https://github.com/storybooks/storybook). Head to [http://onap-sdc.github.io/onap-ui-angular](http://onap-sdc.github.io/onap-ui-angular) to see the components that are in `master`. While developing, just run `npm run storybook` in your terminal to launch a local storybook server where you can see your changes. For deploying storybook to your own fork repository, refer to the guides section below. -### Running component-lab -To see angular components in design run: npm run lab +### Useful guides +[Adding a new component](https://github.com/onap-sdc/onap-ui-angular/wiki/Adding-a-new-component) +[Deploying storybook to a fork's github pages](https://github.com/onap-sdc/onap-ui-angular/wiki/Deploying-storybook-to-a-fork's-github-pages) -### Useful guides -[Adding a new component](https://github.com/onap-sdc/sdc-ui/wiki/Adding-a-new-component) +[Understanding project build](https://github.com/onap-sdc/onap-ui-angular/wiki/Understanding-project-build) -[Deploying storybook to a fork's github pages](https://github.com/onap-sdc/sdc-ui/wiki/Deploying-storybook-to-a-fork's-github-pages) - ### Having some trouble? Have an issue? -For bugs and issues, please use the [issues](https://github.com/onap-sdc/sdc-ui/issues) page +For bugs and issues, please use the [issues](https://github.com/onap-sdc/onap-ui-angular/issues) page ### How to Contribute **Contribution can be made only by following these guide lines** -* This project combines both `React` & `Angular` framework libraries. Hence, every change in the basic HTML files structure, must be followed by changes on the frameworks files accordingly (under `src/react` and `src/angular`). +* This project combines both `React` & `Angular` framework libraries. Hence, every change in the basic HTML files structure, must be followed by changes on react and angular projects ([onap-ui-angular](https://github.com/onap-sdc/onap-ui-angular), [onap-ui-react](https://github.com/onap-sdc/onap-ui-react)). * There will be no any 3rd party UI framework imported (i.e. `Bootstrap`, `Material`, `Foundation`... etc.). -* Contribution are done only by the [contribution guide](https://github.com/onap-sdc/sdc-ui/wiki/Contribution-guide). Contributions submitted not in this format and guidelines will not be considered. +* Contribution are done only by the [contribution guide](https://github.com/onap-sdc/onap-ui-angular/wiki/Contribution-guide). Contributions submitted not in this format and guidelines will not be considered. |