aboutsummaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
Diffstat (limited to 'README.md')
-rw-r--r--README.md111
1 files changed, 111 insertions, 0 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e83552b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,111 @@
+# SDC-UI 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.
+
+
+### Usage
+
+#### Link the library's CSS file
+There are several options to link to sdc-ui CSS file:
+
+###### 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';
+```
+###### Angular CLI projects
+You can add this line to style.css file:
+```js
+@import "../node_modules/sdc-ui/css/style.css";
+```
+
+#### React Code examples
+###### Importing particular component
+```js
+import Button from 'sdc-ui/lib/react/Button.js';
+
+// inside component rendering...
+render(){
+ return (
+ <Button>I am a Button</Button>
+ );
+}
+```
+###### 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>
+ );
+}
+```
+###### Importing the entire library
+```js
+import SDCUI from 'sdc-ui';
+
+// inside component rendering...
+render(){
+ return (
+ <SDCUI.React.Button>I am still a Button</SDCUI.React.Button>
+ );
+}
+```
+
+#### Using the library in Angular (2-5)
+###### Add the library to your module
+```js
+ import { SdcUiComponentsModule, SdcUiComponents } from 'sdc-ui/lib/angular';
+
+ @NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule,
+ SdcUiComponentsModule
+ ],
+ providers: [
+ SdcUiComponents.ModalService
+ ],
+ bootstrap: [AppComponent]
+ })
+ export class AppModule { }
+```
+
+
+### 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`.
+
+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/sdc-ui/wiki/Adding-a-new-component)
+
+[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
+
+### 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`).
+* 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.