Adding a new component - onap-sdc/sdc-ui GitHub Wiki
Adding a new component
To add a new component to this project, and to its showcase powered by storybook, follow the following simple guidelines. Throughout this guide, we will pretend to be adding a new component called myComponent.
1. Create a new feature branch
In your forked repository, after making sure your master
branch is synced with original repository's master
, create a new branch named feature/myComponent.
2. Add .html and .scss files
- Under the components directory at the root of the project, create a new directory with the name of your component.
- Create one .scss file, declaring the appropriate classes and rules for your component, following the css guidelines in terms of hierarchy and naming methodology. Make sure to name your file by the following convention: _myComponent.scss.
- Create multiple .html files, one for each of the possible styles of your component, using the classes you declared in the .scss file.
3. Import your .scss file
Add the appropriate import for your new .scss file in scss/_components.scss:
@import ../components/myComponent.scss;
4. Implement the React and Angular2 components
The next step is to use your html and scss structure and implement them in React and Angular2.
React
Create a new file under src/react and name it MyComponent.js, and implement the component. Make sure to exporting your component as a default.
// src/react/MyComponent.js
import React from 'react';
class MyComponent extends React.Component {
render() {
...
}
}
export default MyComponent;
Now, attach the component to the library's react default and named export objects.
// src/react/index.js
import Button from './Button.js';
+ import MyComponent from './MyComponent.js';
export {
Button,
+ MyComponent
};
export default {
Button,
+ MyComponent
}
5. Add your component to storybook
See Adding a component to storybook.
6. Push and create a new pull request
Push your branch to your fork's origin/feature/myComponent, and create a new pull request from your fork to the original repo.
7. Release if needed
If your changes require a new release to npm
, please contact the administrators.
Hurray! your component is live at the showcase, and if it was released can be consumed from npm.