commit	05b37297177e8a342668c15e5d6f738b51f7aedd	[log] [tgz]
author	Michael Lando <ml636r@att.com>	Mon May 21 20:19:48 2018 +0000
committer	Gerrit Code Review <gerrit@onap.org>	Mon May 21 20:19:48 2018 +0000
tree	e236c96df52a13f935292db8aa73e84d0c41ad8a
parent	884dfb789593d2a3cc319047ab1f0215778aec9f [diff]
parent	1994c98063c27a41797dec01f2ca9fcbe33ceab0 [diff]

tree: e236c96df52a13f935292db8aa73e84d0c41ad8a

README.md

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

@import "path_to_node_modules/sdc-ui/css/style.css";

HTML

<link rel="stylesheet" href="path_to_node_modules/sdc-ui/css/style.css">

As Module (Using loading tool, i.e. Webpack)

import 'sdc-ui/css/style.css';

Angular CLI projects

You can add this line to style.css file:

@import "../node_modules/sdc-ui/css/style.css";

React Code examples

Importing particular component

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

import {Button} from 'sdc-ui/lib/react';

// inside component rendering...
render(){
	return (
		<Button>I am a Button</Button>
	);
}

Importing the entire library

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

  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. Head to 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

Deploying storybook to a fork's github pages

Having some trouble? Have an issue?

For bugs and issues, please use the 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. Contributions submitted not in this format and guidelines will not be considered.