The repository is an extension of Chi (Chi Design System).
The implementation provides Lumen designers with a UXPin integrated collection of components based on our own design system (CHI).
| Component | Chi URL | Status |
|---|---|---|
| Alert | Alert | ✅ Full Support |
| Badge | Badge | ✅ Full Support |
| Brand | Brand | ✅ Full Support |
| Checkbox | Checkbox | ✅ Full Support |
| Date Picker | Date Picker | ✅ Full Support |
| Dropdown Base | Dropdown Base | ✅ Full Support |
| Dropdown Icon | Dropdown Icon | ✅ Full Support |
| File Input | File Input | ✅ Full Support |
| Floating Button | Floating Button | ✅ Full Support |
| Icon | Icon | ✅ Full Support |
| Icon Button | Icon Button | ✅ Full Support |
| Label | Label | ✅ Full Support |
| Link | Link | ✅ Full Support |
| Marketing Icon | Marketing Icon | ✅ Full Support |
| Number Input | Number Input | ✅ Full Support |
| Page Title | Page Title | ✅ Full Support |
| Pagination | Pagination | ✅ Full Support |
| Picker Group | Picker Group | ✅ Full Support |
| Phone Input | Phone Input | ✅ Full Support |
| Price | Price | ✅ Full Support |
| Popover | Popover | ✅ Full Support |
| Primary Button | Primary Button | ✅ Full Support |
| Progress | Progress | ✅ Full Support |
| Radio | Radio | ✅ Full Support |
| Secondary Button | Secondary Button | ✅ Full Support |
| Select | Select | ✅ Full Support |
| Spinner | Spinner | ✅ Full Support |
| Stat Base | Stat Base | ✅ Full Support |
| Stat Compact | Stat Compact | ✅ Full Support |
| Step | Step | ✅ Full Support |
| Tabs | Tabs | ✅ Full Support |
| Tertiary Button | Tertiary Button | ✅ Full Support |
| Text | Text | ✅ Full Support |
| Text Input | Text Input | ✅ Full Support |
| Textarea | Textarea | ✅ Full Support |
| Toggle Switch | Toggle Switch | ✅ Full Support |
| Tooltip | Tooltip | ✅ Support as Tooltip property of Icon Button |
Currently, there are 3 Chi based UXPin Merge libraries
Chi Merge 2.1 (Lumen) (Production - based on Lumen styleguide 2.0 and Chi 5.4.0),
Chi Merge 1.0 (Lumen) (Production, Legacy - based on Lumen styleguide 1.0 and Chi 3.12.0),
Chi Merge (Dev) (Pre-production).
In order to be able to develop and make changes in them,
define environmental variables UXPIN_DEV_TOKEN and UXPIN_LUMEN_TOKEN.
- open the
.bash_profilefile and add these lines indicating corresponding token values:
export UXPIN_DEV_TOKEN="RESPECTIVE_TOKEN_GOES_HERE"
export UXPIN_LUMEN_TOKEN="RESPECTIVE_TOKEN_GOES_HERE"- Use command
$ source ~/.bash_profile- Try printing the defined variables by using:
$ echo $UXPIN_DEV_TOKENand
$ echo $UXPIN_LUMEN_TOKENIf respective values are printed, the environmental variable definition was successfully.
Chi assets are included by injecting them into <head> by UXPin components' wrapper.
Edit Chi assets URLs in /src/compoennts/UXPinWrapper/UXPinWrapper.js
Adding components to Merge is no different than creating normal React.js components. Merge accepts any standard approach to React. The only limitations that you should be aware of are:
- Components have to have default exports
- Components need to exist in separate directories
- Only one component is allowed per file and directory e.g.
./src/Tabs/Tabs.js - You have to add the component to
uxpin.config.jsfile
Alert.propTypes = {
size: PropTypes.oneOf(['sm', 'md', 'lg']), // Renders a Select with the provided options in UXPin UI
width: PropTypes.number, // Renders as a Number input in UXPin UI
icon: PropTypes.string, // Renders as a Text Input in UXPin UI
closable: PropTypes.bool, // Renders as a Checkbox in UXPin UI
};Alert.defaultProps = {
size: 'md',
width: 320,
icon: 'warning',
closable: true,
};Use PropTypes.func to add an interaction to the component
Button.propTypes = {
click: PropTypes.func, // Renders as an Interaction provider in UXPin UI
};and use the interaction prop as a function that can be triggered
const Button = (props) => (
<button
type="button"
className="chi-button"
onClick={props.click}>
Button Content
</button>
);Please note that you can also trigger an interaction function in custom scenarios by using props.interactionPropName().
$ npm push-dev$ npm push-lumen