@unbxd-ui/unbxd-react-components 0.2.99 → 0.2.101-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +4 -0
- package/.eslintrc.js +38 -0
- package/CONTRIBUTE.md +105 -0
- package/components/Form/RangeSlider.js +3 -7
- package/components/core.css +1 -3
- package/components/theme.css +0 -2
- package/package.json +23 -13
- package/src/Intro.stories.mdx +119 -0
- package/src/components/Accordian/Accordian.js +89 -0
- package/src/components/Accordian/Accordian.stories.js +92 -0
- package/src/components/Accordian/accordianCore.scss +8 -0
- package/src/components/Accordian/accordianTheme.scss +6 -0
- package/src/components/Accordian/index.js +3 -0
- package/src/components/Button/Button.js +67 -0
- package/src/components/Button/Button.stories.js +103 -0
- package/src/components/Button/DropdownButton.js +60 -0
- package/src/components/Button/DropdownButton.stories.js +38 -0
- package/src/components/Button/buttonTheme.css +1 -0
- package/src/components/Button/buttonTheme.scss +45 -0
- package/src/components/Button/index.js +5 -0
- package/src/components/DataLoader/DataLoader.js +86 -0
- package/src/components/DataLoader/DataLoader.stories.js +72 -0
- package/src/components/DataLoader/index.js +3 -0
- package/src/components/Form/Checkbox.js +73 -0
- package/src/components/Form/DragDropFileUploader.js +67 -0
- package/src/components/Form/Dropdown.js +415 -0
- package/src/components/Form/FileUploader.js +64 -0
- package/src/components/Form/Form.js +83 -0
- package/src/components/Form/FormElementWrapper.js +22 -0
- package/src/components/Form/Input.js +121 -0
- package/src/components/Form/RadioList.js +86 -0
- package/src/components/Form/RangeSlider.js +100 -0
- package/src/components/Form/ServerPaginatedDDList.js +226 -0
- package/src/components/Form/Textarea.js +76 -0
- package/src/components/Form/Toggle.js +96 -0
- package/src/components/Form/form.css +1 -0
- package/src/components/Form/formCore.scss +142 -0
- package/src/components/Form/formTheme.scss +27 -0
- package/src/components/Form/index.js +13 -0
- package/src/components/Form/stories/Checkbox.stories.js +41 -0
- package/src/components/Form/stories/DragDropFileUploader.stories.js +21 -0
- package/src/components/Form/stories/Dropdown.stories.js +124 -0
- package/src/components/Form/stories/FileUploader.stories.js +21 -0
- package/src/components/Form/stories/FormDefault.stories.js +87 -0
- package/src/components/Form/stories/RadioList.stories.js +48 -0
- package/src/components/Form/stories/RangeSlider.stories.js +84 -0
- package/src/components/Form/stories/TextInput.stories.js +77 -0
- package/src/components/Form/stories/Textarea.stories.js +43 -0
- package/src/components/Form/stories/Toggle.stories.js +14 -0
- package/src/components/Form/stories/form.stories.js +216 -0
- package/src/components/InlineModal/InlineModal.js +135 -0
- package/src/components/InlineModal/InlineModal.stories.js +54 -0
- package/src/components/InlineModal/index.js +4 -0
- package/src/components/InlineModal/inlineModal.css +1 -0
- package/src/components/InlineModal/inlineModalCore.scss +31 -0
- package/src/components/InlineModal/inlineModalTheme.scss +16 -0
- package/src/components/List/List.js +72 -0
- package/src/components/List/index.js +3 -0
- package/src/components/List/list.stories.js +28 -0
- package/src/components/List/listCore.css +1 -0
- package/src/components/List/listCore.scss +6 -0
- package/src/components/Modal/Modal.js +99 -0
- package/src/components/Modal/Modal.stories.js +54 -0
- package/src/components/Modal/index.js +3 -0
- package/src/components/Modal/modal.css +1 -0
- package/src/components/Modal/modalCore.scss +34 -0
- package/src/components/NotificationComponent/NotificationComponent.js +58 -0
- package/src/components/NotificationComponent/NotificationComponent.stories.js +28 -0
- package/src/components/NotificationComponent/index.js +3 -0
- package/src/components/NotificationComponent/notificationComponent.css +1 -0
- package/src/components/NotificationComponent/notificationTheme.scss +30 -0
- package/src/components/ProgressBar/ProgressBar.js +45 -0
- package/src/components/ProgressBar/ProgressBar.stories.js +14 -0
- package/src/components/ProgressBar/index.js +3 -0
- package/src/components/ProgressBar/progressBarCore.css +1 -0
- package/src/components/ProgressBar/progressBarCore.scss +14 -0
- package/src/components/ProgressBar/progressBarTheme.css +0 -0
- package/src/components/ProgressBar/progressBarTheme.scss +0 -0
- package/src/components/Table/BaseTable.js +306 -0
- package/src/components/Table/PaginationComponent.js +73 -0
- package/src/components/Table/Table.js +295 -0
- package/src/components/Table/Table.stories.js +198 -0
- package/src/components/Table/index.js +8 -0
- package/src/components/Table/table.css +1 -0
- package/src/components/Table/tableCore.scss +94 -0
- package/src/components/Table/tableTheme.scss +34 -0
- package/src/components/TabsComponent/TabsComponent.js +99 -0
- package/src/components/TabsComponent/TabsComponent.stories.js +69 -0
- package/src/components/TabsComponent/index.js +3 -0
- package/src/components/TabsComponent/tabs.css +1 -0
- package/src/components/TabsComponent/tabsCore.scss +59 -0
- package/src/components/TabsComponent/tabsTheme.css +0 -0
- package/src/components/TabsComponent/tabsTheme.scss +0 -0
- package/src/components/Tooltip/Tooltip.js +87 -0
- package/src/components/Tooltip/Tooltip.stories.js +16 -0
- package/src/components/Tooltip/index.js +3 -0
- package/src/components/Tooltip/tooltipCore.scss +22 -0
- package/src/components/Tooltip/tooltipTheme.scss +21 -0
- package/src/components/core.css +1 -0
- package/src/components/core.scss +29 -0
- package/src/components/index.js +38 -0
- package/src/components/theme.css +1 -0
- package/src/components/theme.scss +11 -0
- package/src/core/Validators.js +34 -0
- package/src/core/customHooks.js +20 -0
- package/src/core/dataLoader.js +143 -0
- package/src/core/dataLoader.stories.js +123 -0
- package/src/core/index.js +3 -0
- package/src/core/utils.js +95 -0
- package/src/index.js +68 -0
- package/vscode-templates/NewStoryTemplate.stories.js +8 -0
- package/core/Validators.js +0 -48
- package/core/customHooks.js +0 -41
- package/core/dataLoader.js +0 -235
- package/core/dataLoader.stories.js +0 -153
- package/core/index.js +0 -31
- package/core/utils.js +0 -112
- package/index.js +0 -193
- /package/{Readme.md → README.md} +0 -0
- /package/{components → src/components}/Accordian/accordianCore.css +0 -0
- /package/{components → src/components}/Accordian/accordianTheme.css +0 -0
- /package/{components/Button/buttonTheme.css → src/components/Button/button.css} +0 -0
- /package/{components → src/components}/Form/formCore.css +0 -0
- /package/{components → src/components}/Form/formTheme.css +0 -0
- /package/{components → src/components}/InlineModal/inlineModalCore.css +0 -0
- /package/{components → src/components}/InlineModal/inlineModalTheme.css +0 -0
- /package/{components/List/listCore.css → src/components/List/list.css} +0 -0
- /package/{components → src/components}/List/listTheme.css +0 -0
- /package/{components/Modal/modalTheme.css → src/components/List/listTheme.scss} +0 -0
- /package/{components → src/components}/Modal/modalCore.css +0 -0
- /package/{components/ProgressBar/progressBarTheme.css → src/components/Modal/modalTheme.css} +0 -0
- /package/{components/TabsComponent/tabsTheme.css → src/components/Modal/modalTheme.scss} +0 -0
- /package/{components → src/components}/NotificationComponent/notificationTheme.css +0 -0
- /package/{components/ProgressBar/progressBarCore.css → src/components/ProgressBar/progressBar.css} +0 -0
- /package/{components → src/components}/Table/tableCore.css +0 -0
- /package/{components → src/components}/Table/tableTheme.css +0 -0
- /package/{components → src/components}/TabsComponent/tabsCore.css +0 -0
- /package/{components → src/components}/Tooltip/tooltipCore.css +0 -0
- /package/{components → src/components}/Tooltip/tooltipTheme.css +0 -0
package/.babelrc
ADDED
package/.eslintrc.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
"env": {
|
|
3
|
+
"browser": true,
|
|
4
|
+
"es6": true,
|
|
5
|
+
"amd": true,
|
|
6
|
+
"node": true
|
|
7
|
+
},
|
|
8
|
+
"extends": [
|
|
9
|
+
"eslint:recommended",
|
|
10
|
+
"plugin:react/recommended"
|
|
11
|
+
],
|
|
12
|
+
"globals": {
|
|
13
|
+
"Atomics": "readonly",
|
|
14
|
+
"SharedArrayBuffer": "readonly"
|
|
15
|
+
},
|
|
16
|
+
"parser": "babel-eslint",
|
|
17
|
+
"parserOptions": {
|
|
18
|
+
"ecmaFeatures": {
|
|
19
|
+
"jsx": true
|
|
20
|
+
},
|
|
21
|
+
"ecmaVersion": 2018,
|
|
22
|
+
"sourceType": "module"
|
|
23
|
+
},
|
|
24
|
+
"plugins": [
|
|
25
|
+
"react",
|
|
26
|
+
"babel"
|
|
27
|
+
],
|
|
28
|
+
"rules": {
|
|
29
|
+
"react/prop-types": [2, { ignore: ["children"] }],
|
|
30
|
+
"no-unsafe-finally": 0,
|
|
31
|
+
"no-func-assign": 0
|
|
32
|
+
},
|
|
33
|
+
"settings": {
|
|
34
|
+
"react": {
|
|
35
|
+
"version": "detect"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
};
|
package/CONTRIBUTE.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
## Setting up the project for development
|
|
2
|
+
|
|
3
|
+
### Prerequisites
|
|
4
|
+
|
|
5
|
+
Install [npm](https://www.npmjs.com/get-npm)
|
|
6
|
+
|
|
7
|
+
### Setting Up
|
|
8
|
+
|
|
9
|
+
Install the npm packages using the following command
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Start the JS build with watcher using the following command
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
npm run build -- --watch
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
To watch SCSS files & compile them to CSS use the following command
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
npm run scss -- --watch
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
**Note:** Prefix all the CSS classNames with namespace `"RCB-"`
|
|
28
|
+
|
|
29
|
+
### Linting your JS files
|
|
30
|
+
|
|
31
|
+
Run the following command to lint the JS code
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
npm run lint
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Or Install your editor specific plugin by referring to [this link](https://eslint.org/docs/user-guide/integrations)
|
|
38
|
+
|
|
39
|
+
### Viewing the components
|
|
40
|
+
|
|
41
|
+
View the available components along with their accepted props using [storybook](https://storybook.js.org/)
|
|
42
|
+
|
|
43
|
+
To start the storybook run the following command
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
npm run storybook
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
The storybook can then be viewed at http://localhost:6006/
|
|
50
|
+
|
|
51
|
+
### Publishing the storybook to github pages
|
|
52
|
+
|
|
53
|
+
Run the following command to publish the storybook to github pages:
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
npm run deploy-storybook
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Publishing the package to npm
|
|
60
|
+
|
|
61
|
+
First login to npm using the following command:
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
npm login
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Then run the following command to publish the package to npm:
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
npm run publish
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
This publishes the package to [unbxd-ui](https://www.npmjs.com/settings/unbxd-ui/packages) org on npm.
|
|
74
|
+
To be able to publish to this org you need to get yourself added on the team. Contact Divya or Manu for the same.
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
### Creating new stories for the components
|
|
78
|
+
|
|
79
|
+
To help boostrap a new story file, use the following steps
|
|
80
|
+
|
|
81
|
+
1. Install the VS Code extension [File Templates](https://marketplace.visualstudio.com/items?itemName=brpaz.file-templates)
|
|
82
|
+
2. Place the templates in the location expected by the extension
|
|
83
|
+
- In Mac,
|
|
84
|
+
```cp ./vscode-templates/NewStoryTemplate.stories.js $HOME/Library/Application\ Support/Code/User/FileTemplates```
|
|
85
|
+
|
|
86
|
+
- In Linux,
|
|
87
|
+
```cp ./vscode-templates/NewStoryTemplate.stories.js $HOME/.config/Code/User/FileTemplates```
|
|
88
|
+
|
|
89
|
+
- In Windows,
|
|
90
|
+
```cp ./vscode-templates/NewStoryTemplate.stories.js C:\Users\User\AppData\Roaming\Code\User\FileTemplates```
|
|
91
|
+
3. To use the templates you can do one of the following:
|
|
92
|
+
- In VSCode, right click on the folder where you want to generate the new file. You should see an option "Files : New from template". Selecting this option a list of available templates should appear. Just select your template and the file will be created.
|
|
93
|
+
- You can also do the same from the Command Palette. In this case the new file will be created in the root directory of the project.
|
|
94
|
+
- Its also possible to do the other way around and create a template based on an open file. For that "right-click" on any opened file and you should see the option of the context menu.
|
|
95
|
+
|
|
96
|
+
**Note:** The template will expect the Component name as a parameter
|
|
97
|
+
|
|
98
|
+
## FAQs
|
|
99
|
+
1) I am getting error "No PostCSS Config found"
|
|
100
|
+
|
|
101
|
+
Create a file called postcss.config.js in `/lib/components/` folder
|
|
102
|
+
|
|
103
|
+
## TODO
|
|
104
|
+
|
|
105
|
+
- Minify JS / CSS
|
|
@@ -15,7 +15,7 @@ var _Form = require("./Form");
|
|
|
15
15
|
|
|
16
16
|
var _FormElementWrapper = _interopRequireDefault(require("./FormElementWrapper"));
|
|
17
17
|
|
|
18
|
-
var _excluded = ["label", "name", "min", "max", "className", "value", "defaultValue", "appearance", "onChange", "disabled", "showBubble", "inputStyle", "bubbleStyle"
|
|
18
|
+
var _excluded = ["label", "name", "min", "max", "className", "value", "defaultValue", "appearance", "onChange", "disabled", "showBubble", "inputStyle", "bubbleStyle"];
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
21
|
|
|
@@ -63,7 +63,6 @@ var RangeSlider = function RangeSlider(props) {
|
|
|
63
63
|
inputStyle = _props$inputStyle === void 0 ? {} : _props$inputStyle,
|
|
64
64
|
_props$bubbleStyle = props.bubbleStyle,
|
|
65
65
|
bubbleStyle = _props$bubbleStyle === void 0 ? {} : _props$bubbleStyle,
|
|
66
|
-
inputClassName = props.inputClassName,
|
|
67
66
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
68
67
|
|
|
69
68
|
var _useContext = (0, _react.useContext)(_Form.FormContext),
|
|
@@ -104,7 +103,7 @@ var RangeSlider = function RangeSlider(props) {
|
|
|
104
103
|
id: name,
|
|
105
104
|
defaultValue: defaultValue,
|
|
106
105
|
disabled: disabled,
|
|
107
|
-
className: "RCB-form-el RCB-input-range ".concat(
|
|
106
|
+
className: "RCB-form-el RCB-input-range ".concat(className),
|
|
108
107
|
onChange: onInputChange
|
|
109
108
|
}, restProps), {}, {
|
|
110
109
|
showBubble: showBubble
|
|
@@ -133,11 +132,8 @@ var RangeSlider = function RangeSlider(props) {
|
|
|
133
132
|
};
|
|
134
133
|
|
|
135
134
|
RangeSlider.propTypes = {
|
|
136
|
-
/** Pass any additional classNames to Input component container */
|
|
137
|
-
className: _propTypes["default"].string,
|
|
138
|
-
|
|
139
135
|
/** Pass any additional classNames to Input component */
|
|
140
|
-
|
|
136
|
+
className: _propTypes["default"].string,
|
|
141
137
|
|
|
142
138
|
/** Minimum value for range slider */
|
|
143
139
|
min: _propTypes["default"].string.isRequired,
|
package/components/core.css
CHANGED
|
@@ -1,3 +1 @@
|
|
|
1
|
-
.RCB-form-el-inline{margin:20px 0;display:inline-block}.RCB-form-el-inline .RCB-form-el-label{margin-right:15px}.RCB-form-el-inline .RCB-toggle{display:inline-block}.RCB-form-el-block{margin:20px 0}.RCB-form-el-block .RCB-form-el-label{display:block}.RCB-dropdown .RCB-list-item{list-style-type:none;padding:10px;cursor:pointer}.RCB-dropdown .RCB-list-item:hover{background-color:#eee}.RCB-dropdown .RCB-list-item.selected{background-color:#eee}.RCB-dd-with-create .RCB-inline-modal-body{display:flex;flex-direction:column}.RCB-dd-with-create .RCB-inline-modal-body .RCB-list{flex:1;overflow:scroll}.RCB-dd-with-create .RCB-dd-create-cta{padding:10px;text-align:center;border:1px solid #bfbfbf;cursor:pointer}.RCB-clear-selected{background:#f2f0f0;padding:3px 6px;font-size:11px;border-radius:15px;border:1px solid #ccc}.RCB-selection-wrapper{float:right}.RCB-selection-wrapper .RCB-select-arrow{float:unset}.RCB-select-arrow{float:right;font-size:12px;color:#96a9bc;margin-right:12px;margin-left:8px}.RCB-select-arrow:after{content:"\25BC";vertical-align:middle}.RCB-dd-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:70%;vertical-align:top;white-space:nowrap}.RCB-file-input{cursor:pointer}.RCB-drag-drop-uploader{border:2px dashed rgba(104,128,145,0.42);padding:20px;text-align:center}.RCB-drag-over{background:#f3f3f3}.RCB-toggle{padding:2px 3px;background-color:#FFF;border:1px solid #CCC;border-radius:20px;box-sizing:content-box;cursor:pointer}.RCB-toggle.active{background-color:#2cb191}.RCB-toggle.active .RCB-toggle-knob{background-color:#FFF}.RCB-toggle-disable{cursor:not-allowed;opacity:0.8}.RCB-toggle-knob{background-color:#8399ae;border-radius:50
|
|
2
|
-
|
|
3
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2NvcmUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9CQUFvQixhQUFhLENBQUMsb0JBQW9CLENBQUMsdUNBQXVDLGlCQUFpQixDQUFDLGdDQUFnQyxvQkFBb0IsQ0FBQyxtQkFBbUIsYUFBYSxDQUFDLHNDQUFzQyxhQUFhLENBQUMsNkJBQTZCLG9CQUFvQixDQUFDLFlBQVksQ0FBQyxjQUFjLENBQUMsbUNBQW1DLHFCQUFxQixDQUFDLHNDQUFzQyxxQkFBcUIsQ0FBQywyQ0FBMkMsWUFBWSxDQUFDLHFCQUFxQixDQUFDLHFEQUFxRCxNQUFNLENBQUMsZUFBZSxDQUFDLHVDQUF1QyxZQUFZLENBQUMsaUJBQWlCLENBQUMsd0JBQXdCLENBQUMsY0FBYyxDQUFDLG9CQUFvQixrQkFBa0IsQ0FBQyxlQUFlLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLHFCQUFxQixDQUFDLHVCQUF1QixXQUFXLENBQUMseUNBQXlDLFdBQVcsQ0FBQyxrQkFBa0IsV0FBVyxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsaUJBQWlCLENBQUMsZUFBZSxDQUFDLHdCQUF3QixlQUFlLENBQUMscUJBQXFCLENBQUMsY0FBYyxvQkFBb0IsQ0FBQyxlQUFlLENBQUMsc0JBQXNCLENBQUMsYUFBYSxDQUFDLGtCQUFrQixDQUFDLGtCQUFrQixDQUFDLGdCQUFnQixjQUFjLENBQUMsd0JBQXdCLHdDQUF3QyxDQUFDLFlBQVksQ0FBQyxpQkFBaUIsQ0FBQyxlQUFlLGtCQUFrQixDQUFDLFlBQVksZUFBZSxDQUFDLHFCQUFxQixDQUFDLHFCQUFxQixDQUFDLGtCQUFrQixDQUFDLHNCQUFzQixDQUFDLGNBQWMsQ0FBQyxtQkFBbUIsd0JBQXdCLENBQUMsb0NBQW9DLHFCQUFxQixDQUFDLG9CQUFvQixrQkFBa0IsQ0FBQyxXQUFXLENBQUMsaUJBQWlCLHdCQUF3QixDQUFDLGlCQUFpQixDQUE0Ryw2QkFBNkIsQ0FBQyxXQUFXLGNBQWMsQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLFdBQVcsQ0FBQywwQkFBMEIsQ0FBQyxZQUFZLENBQUMsc0JBQXNCLENBQUMsa0JBQWtCLENBQUMsU0FBUyxDQUFDLGdCQUFnQixlQUFlLENBQUMsWUFBWSxDQUFDLGtCQUFrQixZQUFZLENBQUMsa0JBQWtCLENBQUMsaUJBQWlCLE1BQU0sQ0FBQyxpQkFBaUIsY0FBYyxDQUFDLHdCQUF3QixXQUFXLENBQUMsa0JBQWtCLGlCQUFpQixDQUFDLG9CQUFvQixDQUFDLG9EQUFvRCxZQUFZLENBQUMsMERBQTBELGFBQWEsQ0FBQyx1QkFBdUIsaUJBQWlCLENBQUMsU0FBUyxDQUFDLHNDQUFzQyxNQUFNLENBQUMsdUNBQXVDLE9BQU8sQ0FBQyxVQUFVLFFBQVEsQ0FBQyxTQUFTLENBQUMsV0FBVyx3QkFBd0IsQ0FBQyxVQUFVLENBQUMsMEJBQTBCLFVBQVUsQ0FBQyxpQkFBaUIsY0FBYyxDQUFDLG1CQUFtQixlQUFlLENBQUMsa0JBQWtCLGVBQWUsQ0FBQyxrQkFBa0IsZUFBZSxDQUFDLDRCQUE0QixXQUFXLENBQUMsNkJBQTZCLFdBQVcsQ0FBQywwQ0FBMEMsb0JBQW9CLENBQUMsd0NBQXdDLFFBQVEsQ0FBQyw0Q0FBNEMsc0JBQXNCLENBQUMsU0FBUyxDQUFDLGtCQUFrQixvQkFBb0IsQ0FBQyxrQkFBa0IsQ0FBQyx3QkFBd0IsQ0FBQyx3QkFBd0IsQ0FBQyxxQkFBcUIsQ0FBQyxnQkFBZ0IsQ0FBQyxlQUFlLENBQUMsY0FBYyxhQUFhLENBQUMsb0JBQW9CLENBQUMsYUFBYSxDQUFDLDBCQUEwQiw4QkFBOEIsQ0FBQyx1QkFBdUIsVUFBVSxDQUFDLG1CQUFtQixDQUFDLGtCQUFrQixDQUFDLGFBQWEsaUJBQWlCLENBQUMsb0JBQW9CLFlBQVksQ0FBQyxlQUFlLG9CQUFvQixDQUFDLFlBQVksQ0FBQyxjQUFjLENBQUMsd0JBQXdCLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQyx3QkFBd0IsQ0FBQyxpQkFBaUIsQ0FBQyxTQUFTLENBQUMscUJBQXFCLHFCQUFxQixDQUFDLG9DQUFvQyxvQkFBb0IsQ0FBQyw2Q0FBNkMsZUFBZSxDQUFDLFdBQVcsQ0FBQyxrQ0FBa0MsYUFBYSxDQUFDLDJDQUEyQyxjQUFjLENBQUMsVUFBVSxDQUFDLGlCQUFpQixvQkFBb0IsQ0FBQyx3QkFBd0IsQ0FBQyxZQUFZLENBQUMsMEJBQTBCLGFBQWEsQ0FBQyxrQkFBa0IsbUJBQW1CLENBQUMsa0JBQWtCLENBQUMsVUFBVSxDQUFDLGtCQUFrQixVQUFVLENBQUMsaUJBQWlCLENBQUMsZUFBZSxDQUFDLG9CQUFvQixXQUFXLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLGtCQUFrQixDQUFDLGFBQWEsb0JBQW9CLENBQUMsaUJBQWlCLENBQUMsaURBQWlELG9CQUFvQixDQUFDLGlEQUFpRCxvQkFBb0IsQ0FBQyxrQkFBa0IsWUFBWSxDQUFDLGlCQUFpQixDQUFDLFNBQVMsQ0FBQyxxQkFBcUIsY0FBYyxDQUFDLFVBQVUsb0JBQW9CLENBQUMsWUFBWSxZQUFZLENBQUMsZ0JBQWdCLG1CQUFtQixDQUFDLG9DQUFvQyxrQkFBa0IsQ0FBQyxtQkFBbUIiLCJmaWxlIjoiY29yZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuUkNCLWZvcm0tZWwtaW5saW5le21hcmdpbjoyMHB4IDA7ZGlzcGxheTppbmxpbmUtYmxvY2t9LlJDQi1mb3JtLWVsLWlubGluZSAuUkNCLWZvcm0tZWwtbGFiZWx7bWFyZ2luLXJpZ2h0OjE1cHh9LlJDQi1mb3JtLWVsLWlubGluZSAuUkNCLXRvZ2dsZXtkaXNwbGF5OmlubGluZS1ibG9ja30uUkNCLWZvcm0tZWwtYmxvY2t7bWFyZ2luOjIwcHggMH0uUkNCLWZvcm0tZWwtYmxvY2sgLlJDQi1mb3JtLWVsLWxhYmVse2Rpc3BsYXk6YmxvY2t9LlJDQi1kcm9wZG93biAuUkNCLWxpc3QtaXRlbXtsaXN0LXN0eWxlLXR5cGU6bm9uZTtwYWRkaW5nOjEwcHg7Y3Vyc29yOnBvaW50ZXJ9LlJDQi1kcm9wZG93biAuUkNCLWxpc3QtaXRlbTpob3ZlcntiYWNrZ3JvdW5kLWNvbG9yOiNlZWV9LlJDQi1kcm9wZG93biAuUkNCLWxpc3QtaXRlbS5zZWxlY3RlZHtiYWNrZ3JvdW5kLWNvbG9yOiNlZWV9LlJDQi1kZC13aXRoLWNyZWF0ZSAuUkNCLWlubGluZS1tb2RhbC1ib2R5e2Rpc3BsYXk6ZmxleDtmbGV4LWRpcmVjdGlvbjpjb2x1bW59LlJDQi1kZC13aXRoLWNyZWF0ZSAuUkNCLWlubGluZS1tb2RhbC1ib2R5IC5SQ0ItbGlzdHtmbGV4OjE7b3ZlcmZsb3c6c2Nyb2xsfS5SQ0ItZGQtd2l0aC1jcmVhdGUgLlJDQi1kZC1jcmVhdGUtY3Rhe3BhZGRpbmc6MTBweDt0ZXh0LWFsaWduOmNlbnRlcjtib3JkZXI6MXB4IHNvbGlkICNiZmJmYmY7Y3Vyc29yOnBvaW50ZXJ9LlJDQi1jbGVhci1zZWxlY3RlZHtiYWNrZ3JvdW5kOiNmMmYwZjA7cGFkZGluZzozcHggNnB4O2ZvbnQtc2l6ZToxMXB4O2JvcmRlci1yYWRpdXM6MTVweDtib3JkZXI6MXB4IHNvbGlkICNjY2N9LlJDQi1zZWxlY3Rpb24td3JhcHBlcntmbG9hdDpyaWdodH0uUkNCLXNlbGVjdGlvbi13cmFwcGVyIC5SQ0Itc2VsZWN0LWFycm93e2Zsb2F0OnVuc2V0fS5SQ0Itc2VsZWN0LWFycm93e2Zsb2F0OnJpZ2h0O2ZvbnQtc2l6ZToxMnB4O2NvbG9yOiM5NmE5YmM7bWFyZ2luLXJpZ2h0OjEycHg7bWFyZ2luLWxlZnQ6OHB4fS5SQ0Itc2VsZWN0LWFycm93OmFmdGVye2NvbnRlbnQ6XCJcXDI1QkNcIjt2ZXJ0aWNhbC1hbGlnbjptaWRkbGV9LlJDQi1kZC1sYWJlbHtkaXNwbGF5OmlubGluZS1ibG9jaztvdmVyZmxvdzpoaWRkZW47dGV4dC1vdmVyZmxvdzplbGxpcHNpczttYXgtd2lkdGg6NzAlO3ZlcnRpY2FsLWFsaWduOnRvcDt3aGl0ZS1zcGFjZTpub3dyYXB9LlJDQi1maWxlLWlucHV0e2N1cnNvcjpwb2ludGVyfS5SQ0ItZHJhZy1kcm9wLXVwbG9hZGVye2JvcmRlcjoycHggZGFzaGVkIHJnYmEoMTA0LDEyOCwxNDUsMC40Mik7cGFkZGluZzoyMHB4O3RleHQtYWxpZ246Y2VudGVyfS5SQ0ItZHJhZy1vdmVye2JhY2tncm91bmQ6I2YzZjNmM30uUkNCLXRvZ2dsZXtwYWRkaW5nOjJweCAzcHg7YmFja2dyb3VuZC1jb2xvcjojRkZGO2JvcmRlcjoxcHggc29saWQgI0NDQztib3JkZXItcmFkaXVzOjIwcHg7Ym94LXNpemluZzpjb250ZW50LWJveDtjdXJzb3I6cG9pbnRlcn0uUkNCLXRvZ2dsZS5hY3RpdmV7YmFja2dyb3VuZC1jb2xvcjojMmNiMTkxfS5SQ0ItdG9nZ2xlLmFjdGl2ZSAuUkNCLXRvZ2dsZS1rbm9ie2JhY2tncm91bmQtY29sb3I6I0ZGRn0uUkNCLXRvZ2dsZS1kaXNhYmxle2N1cnNvcjpub3QtYWxsb3dlZDtvcGFjaXR5OjAuOH0uUkNCLXRvZ2dsZS1rbm9ie2JhY2tncm91bmQtY29sb3I6IzgzOTlhZTtib3JkZXItcmFkaXVzOjUwJTstd2Via2l0LXRyYW5zaXRpb246dHJhbnNmb3JtIC4zcyBlYXNlOy1tb3otdHJhbnNpdGlvbjp0cmFuc2Zvcm0gLjNzIGVhc2U7LW1zLXRyYW5zaXRpb246dHJhbnNmb3JtIC4zcyBlYXNlO3RyYW5zaXRpb246dHJhbnNmb3JtIC4zcyBlYXNlfS5SQ0ItbW9kYWx7cG9zaXRpb246Zml4ZWQ7dG9wOjA7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTtiYWNrZ3JvdW5kOnJnYmEoMCwwLDAsMC44KTtkaXNwbGF5OmZsZXg7anVzdGlmeS1jb250ZW50OmNlbnRlcjthbGlnbi1pdGVtczpjZW50ZXI7ei1pbmRleDoyfS5SQ0ItbW9kYWwtYm9keXtiYWNrZ3JvdW5kOiNGRkY7cGFkZGluZzoyMHB4fS5SQ0ItbW9kYWwtaGVhZGVye2Rpc3BsYXk6ZmxleDttYXJnaW4tYm90dG9tOjEwcHh9LlJDQi1tb2RhbC10aXRsZXtmbGV4OjF9LlJDQi1tb2RhbC1jbG9zZXtjdXJzb3I6cG9pbnRlcn0uUkNCLW1vZGFsLWNsb3NlOmJlZm9yZXtjb250ZW50OlwiWFwifS5SQ0ItaW5saW5lLW1vZGFse3Bvc2l0aW9uOnJlbGF0aXZlO2Rpc3BsYXk6aW5saW5lLWJsb2NrfS5SQ0ItaW5saW5lLW1vZGFsLmhvdmVyLW9wZW4gLlJDQi1pbmxpbmUtbW9kYWwtYm9keXtkaXNwbGF5Om5vbmV9LlJDQi1pbmxpbmUtbW9kYWwuaG92ZXItb3Blbjpob3ZlciAuUkNCLWlubGluZS1tb2RhbC1ib2R5e2Rpc3BsYXk6YmxvY2t9LlJDQi1pbmxpbmUtbW9kYWwtYm9keXtwb3NpdGlvbjphYnNvbHV0ZTt6LWluZGV4OjF9LlJDQi1pbmxpbmUtbW9kYWwtYm9keS5SQ0ItYWxpZ24tbGVmdHtsZWZ0OjB9LlJDQi1pbmxpbmUtbW9kYWwtYm9keS5SQ0ItYWxpZ24tcmlnaHR7cmlnaHQ6MH0uUkNCLWxpc3R7bWFyZ2luOjA7cGFkZGluZzowfS5SQ0ItdGFibGV7Ym9yZGVyLWNvbGxhcHNlOmNvbGxhcHNlO3dpZHRoOjEwMCV9LlJDQi10aC5SQ0ItZXhwYW5kLWNvbHVtbnt3aWR0aDo1MHB4fS5SQ0ItdGgtc29ydGFibGV7Y3Vyc29yOnBvaW50ZXJ9LlJDQi10aC1zb3J0OmFmdGVye2NvbnRlbnQ6XCJcXDJCMERcIn0uUkNCLXRoLWFzYzphZnRlcntjb250ZW50OlwiXFwyNUIyXCJ9LlJDQi10aC1kc2M6YWZ0ZXJ7Y29udGVudDpcIlxcMjVCQ1wifS5SQ0ItdHIgLmV4cGFuZC1vcGVuOmJlZm9yZXtjb250ZW50Olwi4pa8XCJ9LlJDQi10ciAuZXhwYW5kLWNsb3NlOmJlZm9yZXtjb250ZW50Olwi4pa2XCJ9LlJDQi1wYWdpbmF0ZS13cmFwcGVyIC5SQ0ItcGVyLXBhZ2UtY291bnR7ZGlzcGxheTppbmxpbmUtYmxvY2t9LlJDQi1wYWdpbmF0ZS13cmFwcGVyIC5SQ0ItZm9ybS1lbC1jb250e21hcmdpbjowfS5SQ0ItcGFnaW5hdGUtd3JhcHBlciAuUkNCLWlubGluZS1tb2RhbC1idG57YmFja2dyb3VuZDp0cmFuc3BhcmVudDtwYWRkaW5nOjB9LlJDQi1wYWdpbmF0ZS1uYXZ7ZGlzcGxheTppbmxpbmUtYmxvY2s7Ym9yZGVyLXJhZGl1czoxMnB4O2JvcmRlcjpzb2xpZCAxcHggIzgzOTlhZTtiYWNrZ3JvdW5kLWNvbG9yOiNmNmY3Zjk7dmVydGljYWwtYWxpZ246bWlkZGxlO21hcmdpbi1sZWZ0OjE1cHg7b3ZlcmZsb3c6aGlkZGVufS5SQ0ItcGFnZS1uYXZ7cGFkZGluZzowIDVweDt0ZXh0LWRlY29yYXRpb246bm9uZTtjb2xvcjppbmhlcml0fS5SQ0ItcGFnZS1uYXY6Zmlyc3QtY2hpbGR7Ym9yZGVyLXJpZ2h0OnNvbGlkIDFweCAjODM5OWFlfS5SQ0ItcGFnZS1uYXYuZGlzYWJsZWR7Y29sb3I6I2NjYztwb2ludGVyLWV2ZW50czpub25lO2N1cnNvcjpub3QtYWxsb3dlZH0uUkNCLW5vLWRhdGF7dGV4dC1hbGlnbjpjZW50ZXJ9LlJDQi10YWJzLWNvbnRhaW5lcntkaXNwbGF5OmZsZXh9LlJDQi10YWItdGl0bGV7bGlzdC1zdHlsZS10eXBlOm5vbmU7cGFkZGluZzoxMHB4O2N1cnNvcjpwb2ludGVyfS5SQ0ItdGFiLXRpdGxlLnNlbGVjdGVke2JhY2tncm91bmQ6I0ZGRjtmb250LXdlaWdodDpib2xkO2JvcmRlcjoxcHggc29saWQgI2NhY2FjYTtwb3NpdGlvbjpyZWxhdGl2ZTt6LWluZGV4OjF9LlJDQi10YWJzLWhvcml6b250YWx7ZmxleC1kaXJlY3Rpb246Y29sdW1ufS5SQ0ItdGFicy1ob3Jpem9udGFsIC5SQ0ItdGFiLXRpdGxle2Rpc3BsYXk6aW5saW5lLWJsb2NrfS5SQ0ItdGFicy1ob3Jpem9udGFsIC5SQ0ItdGFiLXRpdGxlLnNlbGVjdGVke2JvcmRlci1ib3R0b206MDtib3R0b206LTFweH0uUkNCLXRhYnMtdmVydGljYWwgLlJDQi10YWItdGl0bGV7ZGlzcGxheTpibG9ja30uUkNCLXRhYnMtdmVydGljYWwgLlJDQi10YWItdGl0bGUuc2VsZWN0ZWR7Ym9yZGVyLXJpZ2h0OjA7cmlnaHQ6LTFweH0uUkNCLXRhYi1jb250ZW50e2xpc3Qtc3R5bGUtdHlwZTpub25lO2JvcmRlcjoxcHggc29saWQgI2NhY2FjYTtwYWRkaW5nOjEwcHh9LlJDQi10YWItY29udGVudC5zZWxlY3RlZHtkaXNwbGF5OmJsb2NrfS5SQ0ItdGFiLWRpc2FibGVke3BvaW50ZXItZXZlbnRzOm5vbmU7Y3Vyc29yOm5vdC1hbGxvd2VkO2NvbG9yOiNjY2N9LlJDQi1wcm9ncmVzcy1iYXJ7d2lkdGg6MTAwJTtwb3NpdGlvbjpyZWxhdGl2ZTtiYWNrZ3JvdW5kOiNjY2N9LlJDQi1wcm9ncmVzcy12YWx1ZXtoZWlnaHQ6MTAwJTtwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtiYWNrZ3JvdW5kOiMzZDk1NjV9LlJDQi10b29sdGlwe2Rpc3BsYXk6aW5saW5lLWJsb2NrO3Bvc2l0aW9uOnJlbGF0aXZlfS5SQ0ItdG9vbHRpcCAuUkNCLXRvb2x0aXAtYm9keS5SQ0ItdG9vbHRpcC1ob3ZlcntkaXNwbGF5OmlubGluZS1ibG9ja30uUkNCLXRvb2x0aXAgLlJDQi10b29sdGlwLWJvZHkuUkNCLXRvb2x0aXAtY2xpY2t7ZGlzcGxheTppbmxpbmUtYmxvY2t9LlJDQi10b29sdGlwLWJvZHl7ZGlzcGxheTpub25lO3Bvc2l0aW9uOmFic29sdXRlO3otaW5kZXg6MX0uUkNCLWFjY29yZGlhbi10aXRsZXtjdXJzb3I6cG9pbnRlcn0uUkNCLWxpc3R7bGlzdC1zdHlsZS10eXBlOm5vbmV9LlJDQi1oaWRkZW57ZGlzcGxheTpub25lfS5SQ0Itbm8tcG9pbnRlcntwb2ludGVyLWV2ZW50czpub25lfS5SQ0ItZGlzYWJsZWQgLlJDQi1pbmxpbmUtbW9kYWwtYnRue2N1cnNvcjpub3QtYWxsb3dlZDtwb2ludGVyLWV2ZW50czpub25lfVxuIl19 */
|
|
1
|
+
.RCB-form-el-inline{margin:20px 0;display:inline-block}.RCB-form-el-inline .RCB-form-el-label{margin-right:15px}.RCB-form-el-inline .RCB-toggle{display:inline-block}.RCB-form-el-block{margin:20px 0}.RCB-form-el-block .RCB-form-el-label{display:block}.RCB-dropdown .RCB-list-item{list-style-type:none;padding:10px;cursor:pointer}.RCB-dropdown .RCB-list-item:hover{background-color:#eee}.RCB-dropdown .RCB-list-item.selected{background-color:#eee}.RCB-dd-with-create .RCB-inline-modal-body{display:flex;flex-direction:column}.RCB-dd-with-create .RCB-inline-modal-body .RCB-list{flex:1;overflow:scroll}.RCB-dd-with-create .RCB-dd-create-cta{padding:10px;text-align:center;border:1px solid #bfbfbf;cursor:pointer}.RCB-clear-selected{background:#f2f0f0;padding:3px 6px;font-size:11px;border-radius:15px;border:1px solid #ccc}.RCB-selection-wrapper{float:right}.RCB-selection-wrapper .RCB-select-arrow{float:unset}.RCB-select-arrow{float:right;font-size:12px;color:#96a9bc;margin-right:12px;margin-left:8px}.RCB-select-arrow:after{content:"\25BC";vertical-align:middle}.RCB-dd-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:70%;vertical-align:top;white-space:nowrap}.RCB-file-input{cursor:pointer}.RCB-drag-drop-uploader{border:2px dashed rgba(104,128,145,0.42);padding:20px;text-align:center}.RCB-drag-over{background:#f3f3f3}.RCB-toggle{padding:2px 3px;background-color:#FFF;border:1px solid #CCC;border-radius:20px;box-sizing:content-box;cursor:pointer}.RCB-toggle.active{background-color:#2cb191}.RCB-toggle.active .RCB-toggle-knob{background-color:#FFF}.RCB-toggle-disable{cursor:not-allowed;opacity:0.8}.RCB-toggle-knob{background-color:#8399ae;border-radius:50%;-webkit-transition:transform .3s ease;-moz-transition:transform .3s ease;-ms-transition:transform .3s ease;transition:transform .3s ease}.RCB-modal{position:fixed;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center;z-index:2}.RCB-modal-body{background:#FFF;padding:20px}.RCB-modal-header{display:flex;margin-bottom:10px}.RCB-modal-title{flex:1}.RCB-modal-close{cursor:pointer}.RCB-modal-close:before{content:"X"}.RCB-inline-modal{position:relative;display:inline-block}.RCB-inline-modal.hover-open .RCB-inline-modal-body{display:none}.RCB-inline-modal.hover-open:hover .RCB-inline-modal-body{display:block}.RCB-inline-modal-body{position:absolute;z-index:1}.RCB-inline-modal-body.RCB-align-left{left:0}.RCB-inline-modal-body.RCB-align-right{right:0}.RCB-list{margin:0;padding:0}.RCB-table{border-collapse:collapse;width:100%}.RCB-th.RCB-expand-column{width:50px}.RCB-th-sortable{cursor:pointer}.RCB-th-sort:after{content:"\2B0D"}.RCB-th-asc:after{content:"\25B2"}.RCB-th-dsc:after{content:"\25BC"}.RCB-tr .expand-open:before{content:"▼"}.RCB-tr .expand-close:before{content:"▶"}.RCB-paginate-wrapper .RCB-per-page-count{display:inline-block}.RCB-paginate-wrapper .RCB-form-el-cont{margin:0}.RCB-paginate-wrapper .RCB-inline-modal-btn{background:transparent;padding:0}.RCB-paginate-nav{display:inline-block;border-radius:12px;border:solid 1px #8399ae;background-color:#f6f7f9;vertical-align:middle;margin-left:15px;overflow:hidden}.RCB-page-nav{padding:0 5px;text-decoration:none;color:inherit}.RCB-page-nav:first-child{border-right:solid 1px #8399ae}.RCB-page-nav.disabled{color:#ccc;pointer-events:none;cursor:not-allowed}.RCB-no-data{text-align:center}.RCB-tabs-container{display:flex}.RCB-tab-title{list-style-type:none;padding:10px;cursor:pointer}.RCB-tab-title.selected{background:#FFF;font-weight:bold;border:1px solid #cacaca;position:relative;z-index:1}.RCB-tabs-horizontal{flex-direction:column}.RCB-tabs-horizontal .RCB-tab-title{display:inline-block}.RCB-tabs-horizontal .RCB-tab-title.selected{border-bottom:0;bottom:-1px}.RCB-tabs-vertical .RCB-tab-title{display:block}.RCB-tabs-vertical .RCB-tab-title.selected{border-right:0;right:-1px}.RCB-tab-content{list-style-type:none;border:1px solid #cacaca;padding:10px}.RCB-tab-content.selected{display:block}.RCB-tab-disabled{pointer-events:none;cursor:not-allowed;color:#ccc}.RCB-progress-bar{width:100%;position:relative;background:#ccc}.RCB-progress-value{height:100%;position:absolute;top:0;background:#3d9565}.RCB-tooltip{display:inline-block;position:relative}.RCB-tooltip .RCB-tooltip-body.RCB-tooltip-hover{display:inline-block}.RCB-tooltip .RCB-tooltip-body.RCB-tooltip-click{display:inline-block}.RCB-tooltip-body{display:none;position:absolute;z-index:1}.RCB-accordian-title{cursor:pointer}.RCB-list{list-style-type:none}.RCB-hidden{display:none}.RCB-no-pointer{pointer-events:none}.RCB-disabled .RCB-inline-modal-btn{cursor:not-allowed;pointer-events:none}
|
package/components/theme.css
CHANGED
|
@@ -1,3 +1 @@
|
|
|
1
1
|
.RCB-btn{border-radius:3px;cursor:pointer}.RCB-btn-default:hover{background:#f3f3f3}.RCB-btn-primary{background:#1fa7fd;color:#FFF;border:0}.RCB-btn-primary:hover{background:#208dd2}.RCB-btn-secondary{background:#FFF;border:1px solid #95c7e7}.RCB-btn-secondary:hover{background:#eef8ff}.RCB-btn-small{padding:6px 8px}.RCB-btn-medium{padding:10px 15px}.RCB-btn-large{padding:15px 22px}.RCB-form-error{font-size:12px;color:#d25b5b}.RCB-dd-search{position:relative}.RCB-dd-search-icon{position:absolute;top:5px;left:10px}.RCB-dd-search-icon:before{content:"\1F50D"}.RCB-dd-search-ip{width:100%;padding:10px 30px;border:none;border-bottom:1px solid #CCC}.RCB-inline-modal-btn{display:inline-block;background:#FFF;border:1px solid #eee;padding:10px;border-radius:3px;cursor:pointer}.RCB-inline-modal-body{background:#FFF;border:1px solid #efeeee;box-shadow:0 9px 12px 0 rgba(0,0,0,0.15)}.RCB-notif{padding:10px;border-radius:3px}.RCB-notif-success{color:#129274;border:solid 1px #2cb191;background-color:#edfffb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75178;background-color:#fff3f6}.RCB-notif-warning{color:#445870;border:solid 1px #efbf6a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #45b5c1;background-color:#f4fcff}.RCB-table td{padding:10px}.RCB-th{background-color:#2287b4;color:#FFF;font-weight:normal;padding:10px}.RCB-even-tr{background-color:#FFF}.RCB-odd-tr{background-color:#dcf1fa}.RCB-expanded-row{background-color:#ecf2f4}.RCB-paginate-bar{background-color:#a3c9db;text-align:right;font-size:14px;padding:5px;border-radius:5px 5px 0 0}.RCB-tooltip-btn{display:inline-block;font-style:italic;font-size:12px;color:#9199AA;background-color:#F8FAFB;border:1px solid #D0DDE2;padding:0px 6px;border-radius:50%;text-align:center}.RCB-tooltip-body{background:#FFF;padding:10px;border-radius:4px;box-shadow:0px 1px 7px 0px #ccc;margin-left:15px}.RCB-accordian-title{padding:10px;border:1px solid #ccc}
|
|
2
|
-
|
|
3
|
-
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RoZW1lLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxTQUFTLGlCQUFpQixDQUFDLGNBQWMsQ0FBQyx1QkFBdUIsa0JBQWtCLENBQUMsaUJBQWlCLGtCQUFrQixDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsdUJBQXVCLGtCQUFrQixDQUFDLG1CQUFtQixlQUFlLENBQUMsd0JBQXdCLENBQUMseUJBQXlCLGtCQUFrQixDQUFDLGVBQWUsZUFBZSxDQUFDLGdCQUFnQixpQkFBaUIsQ0FBQyxlQUFlLGlCQUFpQixDQUFDLGdCQUFnQixjQUFjLENBQUMsYUFBYSxDQUFDLGVBQWUsaUJBQWlCLENBQUMsb0JBQW9CLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsMkJBQTJCLGdCQUFnQixDQUFDLGtCQUFrQixVQUFVLENBQUMsaUJBQWlCLENBQUMsV0FBVyxDQUFDLDRCQUE0QixDQUFDLHNCQUFzQixvQkFBb0IsQ0FBQyxlQUFlLENBQUMscUJBQXFCLENBQUMsWUFBWSxDQUFDLGlCQUFpQixDQUFDLGNBQWMsQ0FBQyx1QkFBdUIsZUFBZSxDQUFDLHdCQUF3QixDQUFDLHdDQUF3QyxDQUFDLFdBQVcsWUFBWSxDQUFDLGlCQUFpQixDQUFDLG1CQUFtQixhQUFhLENBQUMsd0JBQXdCLENBQUMsd0JBQXdCLENBQUMsaUJBQWlCLGFBQWEsQ0FBQyx3QkFBd0IsQ0FBQyx3QkFBd0IsQ0FBQyxtQkFBbUIsYUFBYSxDQUFDLHdCQUF3QixDQUFDLHdCQUF3QixDQUFDLGdCQUFnQixhQUFhLENBQUMsd0JBQXdCLENBQUMsd0JBQXdCLENBQUMsY0FBYyxZQUFZLENBQUMsUUFBUSx3QkFBd0IsQ0FBQyxVQUFVLENBQUMsa0JBQWtCLENBQUMsWUFBWSxDQUFDLGFBQWEscUJBQXFCLENBQUMsWUFBWSx3QkFBd0IsQ0FBQyxrQkFBa0Isd0JBQXdCLENBQUMsa0JBQWtCLHdCQUF3QixDQUFDLGdCQUFnQixDQUFDLGNBQWMsQ0FBQyxXQUFXLENBQUMseUJBQXlCLENBQUMsaUJBQWlCLG9CQUFvQixDQUFDLGlCQUFpQixDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsd0JBQXdCLENBQUMsd0JBQXdCLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLGlCQUFpQixDQUFDLGtCQUFrQixlQUFlLENBQUMsWUFBWSxDQUFDLGlCQUFpQixDQUFDLCtCQUErQixDQUFDLGdCQUFnQixDQUFDLHFCQUFxQixZQUFZLENBQUMscUJBQXFCIiwiZmlsZSI6InRoZW1lLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5SQ0ItYnRue2JvcmRlci1yYWRpdXM6M3B4O2N1cnNvcjpwb2ludGVyfS5SQ0ItYnRuLWRlZmF1bHQ6aG92ZXJ7YmFja2dyb3VuZDojZjNmM2YzfS5SQ0ItYnRuLXByaW1hcnl7YmFja2dyb3VuZDojMWZhN2ZkO2NvbG9yOiNGRkY7Ym9yZGVyOjB9LlJDQi1idG4tcHJpbWFyeTpob3ZlcntiYWNrZ3JvdW5kOiMyMDhkZDJ9LlJDQi1idG4tc2Vjb25kYXJ5e2JhY2tncm91bmQ6I0ZGRjtib3JkZXI6MXB4IHNvbGlkICM5NWM3ZTd9LlJDQi1idG4tc2Vjb25kYXJ5OmhvdmVye2JhY2tncm91bmQ6I2VlZjhmZn0uUkNCLWJ0bi1zbWFsbHtwYWRkaW5nOjZweCA4cHh9LlJDQi1idG4tbWVkaXVte3BhZGRpbmc6MTBweCAxNXB4fS5SQ0ItYnRuLWxhcmdle3BhZGRpbmc6MTVweCAyMnB4fS5SQ0ItZm9ybS1lcnJvcntmb250LXNpemU6MTJweDtjb2xvcjojZDI1YjVifS5SQ0ItZGQtc2VhcmNoe3Bvc2l0aW9uOnJlbGF0aXZlfS5SQ0ItZGQtc2VhcmNoLWljb257cG9zaXRpb246YWJzb2x1dGU7dG9wOjVweDtsZWZ0OjEwcHh9LlJDQi1kZC1zZWFyY2gtaWNvbjpiZWZvcmV7Y29udGVudDpcIlxcMUY1MERcIn0uUkNCLWRkLXNlYXJjaC1pcHt3aWR0aDoxMDAlO3BhZGRpbmc6MTBweCAzMHB4O2JvcmRlcjpub25lO2JvcmRlci1ib3R0b206MXB4IHNvbGlkICNDQ0N9LlJDQi1pbmxpbmUtbW9kYWwtYnRue2Rpc3BsYXk6aW5saW5lLWJsb2NrO2JhY2tncm91bmQ6I0ZGRjtib3JkZXI6MXB4IHNvbGlkICNlZWU7cGFkZGluZzoxMHB4O2JvcmRlci1yYWRpdXM6M3B4O2N1cnNvcjpwb2ludGVyfS5SQ0ItaW5saW5lLW1vZGFsLWJvZHl7YmFja2dyb3VuZDojRkZGO2JvcmRlcjoxcHggc29saWQgI2VmZWVlZTtib3gtc2hhZG93OjAgOXB4IDEycHggMCByZ2JhKDAsMCwwLDAuMTUpfS5SQ0Itbm90aWZ7cGFkZGluZzoxMHB4O2JvcmRlci1yYWRpdXM6M3B4fS5SQ0Itbm90aWYtc3VjY2Vzc3tjb2xvcjojMTI5Mjc0O2JvcmRlcjpzb2xpZCAxcHggIzJjYjE5MTtiYWNrZ3JvdW5kLWNvbG9yOiNlZGZmZmJ9LlJDQi1ub3RpZi1lcnJvcntjb2xvcjojZDI1YjViO2JvcmRlcjpzb2xpZCAxcHggI2U3NTE3ODtiYWNrZ3JvdW5kLWNvbG9yOiNmZmYzZjZ9LlJDQi1ub3RpZi13YXJuaW5ne2NvbG9yOiM0NDU4NzA7Ym9yZGVyOnNvbGlkIDFweCAjZWZiZjZhO2JhY2tncm91bmQtY29sb3I6I2ZmZmFmMn0uUkNCLW5vdGlmLWluZm97Y29sb3I6IzUwOURCOTtib3JkZXI6c29saWQgMXB4ICM0NWI1YzE7YmFja2dyb3VuZC1jb2xvcjojZjRmY2ZmfS5SQ0ItdGFibGUgdGR7cGFkZGluZzoxMHB4fS5SQ0ItdGh7YmFja2dyb3VuZC1jb2xvcjojMjI4N2I0O2NvbG9yOiNGRkY7Zm9udC13ZWlnaHQ6bm9ybWFsO3BhZGRpbmc6MTBweH0uUkNCLWV2ZW4tdHJ7YmFja2dyb3VuZC1jb2xvcjojRkZGfS5SQ0Itb2RkLXRye2JhY2tncm91bmQtY29sb3I6I2RjZjFmYX0uUkNCLWV4cGFuZGVkLXJvd3tiYWNrZ3JvdW5kLWNvbG9yOiNlY2YyZjR9LlJDQi1wYWdpbmF0ZS1iYXJ7YmFja2dyb3VuZC1jb2xvcjojYTNjOWRiO3RleHQtYWxpZ246cmlnaHQ7Zm9udC1zaXplOjE0cHg7cGFkZGluZzo1cHg7Ym9yZGVyLXJhZGl1czo1cHggNXB4IDAgMH0uUkNCLXRvb2x0aXAtYnRue2Rpc3BsYXk6aW5saW5lLWJsb2NrO2ZvbnQtc3R5bGU6aXRhbGljO2ZvbnQtc2l6ZToxMnB4O2NvbG9yOiM5MTk5QUE7YmFja2dyb3VuZC1jb2xvcjojRjhGQUZCO2JvcmRlcjoxcHggc29saWQgI0QwRERFMjtwYWRkaW5nOjBweCA2cHg7Ym9yZGVyLXJhZGl1czo1MCU7dGV4dC1hbGlnbjpjZW50ZXJ9LlJDQi10b29sdGlwLWJvZHl7YmFja2dyb3VuZDojRkZGO3BhZGRpbmc6MTBweDtib3JkZXItcmFkaXVzOjRweDtib3gtc2hhZG93OjBweCAxcHggN3B4IDBweCAjY2NjO21hcmdpbi1sZWZ0OjE1cHh9LlJDQi1hY2NvcmRpYW4tdGl0bGV7cGFkZGluZzoxMHB4O2JvcmRlcjoxcHggc29saWQgI2NjY31cbiJdfQ== */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unbxd-ui/unbxd-react-components",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.101-beta.1",
|
|
4
4
|
"description": "React components library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react components",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"publish": "npm run publish-css && npm run build && npm run copypackage && npm run copyscss && cd lib && npm publish"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@storybook/addon-a11y": "^
|
|
39
|
-
"@storybook/addon-storysource": "^
|
|
38
|
+
"@storybook/addon-a11y": "^7.0.25",
|
|
39
|
+
"@storybook/addon-storysource": "^7.0.25",
|
|
40
40
|
"bluebird": "^3.7.2",
|
|
41
41
|
"dequal": "^1.0.1",
|
|
42
42
|
"lodash.clonedeep": "^4.5.0",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"react-dom": "^16.14.0",
|
|
45
45
|
"react-window": "^1.8.6",
|
|
46
46
|
"react-window-infinite-loader": "^1.0.7",
|
|
47
|
+
"sass": "^1.63.6",
|
|
47
48
|
"whatwg-fetch": "^3.6.2"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
@@ -53,28 +54,37 @@
|
|
|
53
54
|
"@babel/plugin-proposal-export-default-from": "^7.14.5",
|
|
54
55
|
"@babel/preset-env": "^7.15.8",
|
|
55
56
|
"@babel/preset-react": "^7.14.5",
|
|
56
|
-
"@storybook/addon-actions": "^
|
|
57
|
-
"@storybook/addon-console": "^
|
|
58
|
-
"@storybook/addon-docs": "^
|
|
57
|
+
"@storybook/addon-actions": "^7.0.25",
|
|
58
|
+
"@storybook/addon-console": "^2.0.0",
|
|
59
|
+
"@storybook/addon-docs": "^7.0.25",
|
|
59
60
|
"@storybook/addon-info": "^5.3.21",
|
|
60
|
-
"@storybook/addon-links": "^
|
|
61
|
-
"@storybook/addons": "^
|
|
62
|
-
"@storybook/react": "^
|
|
63
|
-
"@storybook/storybook-deployer": "^2.8.
|
|
61
|
+
"@storybook/addon-links": "^7.0.25",
|
|
62
|
+
"@storybook/addons": "^7.0.25",
|
|
63
|
+
"@storybook/react": "^7.0.25",
|
|
64
|
+
"@storybook/storybook-deployer": "^2.8.16",
|
|
65
|
+
"autoprefixer": "^10.4.14",
|
|
64
66
|
"babel-eslint": "^10.1.0",
|
|
65
67
|
"babel-loader": "^8.2.3",
|
|
68
|
+
"cross-env": "^7.0.3",
|
|
66
69
|
"css-loader": "^3.6.0",
|
|
67
70
|
"eslint": "^6.8.0",
|
|
68
71
|
"eslint-plugin-babel": "^5.3.1",
|
|
69
72
|
"eslint-plugin-react": "^7.26.1",
|
|
70
73
|
"mini-css-extract-plugin": "^0.8.2",
|
|
71
|
-
"node-sass": "^
|
|
72
|
-
"optimize-css-assets-webpack-plugin": "^
|
|
73
|
-
"postcss-cli": "^
|
|
74
|
+
"node-sass": "^8.0.0",
|
|
75
|
+
"optimize-css-assets-webpack-plugin": "^6.0.1",
|
|
76
|
+
"postcss-cli": "^10.1.0",
|
|
74
77
|
"sass-loader": "^7.3.1",
|
|
75
78
|
"storybook-readme": "^5.0.9",
|
|
76
79
|
"terser-webpack-plugin": "^1.4.5",
|
|
77
80
|
"webpack": "^4.46.0",
|
|
78
81
|
"webpack-cli": "^3.3.12"
|
|
82
|
+
},
|
|
83
|
+
"overrides": {
|
|
84
|
+
"fbjs": "^3.0.5",
|
|
85
|
+
"marked": "^5.1.0",
|
|
86
|
+
"prismjs": "^1.29.0",
|
|
87
|
+
"glob-parent": "5.1.2",
|
|
88
|
+
"parse-url": "^8.1.0"
|
|
79
89
|
}
|
|
80
90
|
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title="Design System|Introduction" />
|
|
4
|
+
|
|
5
|
+
## Introduction to the RCB (React Components Bundle) library
|
|
6
|
+
|
|
7
|
+
RCB contains a bunch of low level components (atoms of a design system) that you can use individually
|
|
8
|
+
or combine them to make additional components (molecules of a design system) to build web pages.
|
|
9
|
+
|
|
10
|
+
## Using the components library
|
|
11
|
+
|
|
12
|
+
First, install the package from npm
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
npm install react-components-bundle
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Next, import the required components. There are 2 ways to achieve this.
|
|
19
|
+
|
|
20
|
+
If you want a minimal footprint from the RCB library and include only the components which you use,
|
|
21
|
+
then import the components individually as shown below.
|
|
22
|
+
This enables tree shaking and therefore components that you did not use will not get included in your final bundle.
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
import Button from "react-components-bundle/components/Button";
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
If size of the bundle does not matter or you will use all/most of the components in the RCB library,
|
|
29
|
+
then you can import the components as shown below:
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
import { Button } from "react-components-bundle";
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Using core CSS
|
|
36
|
+
|
|
37
|
+
Finally, include the core CSS like below,
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
import "react-components-bundle/components/core.css";
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
The core CSS file will contain the core styles without which the component will not behave as expected.
|
|
44
|
+
Hence do not forget to include this.
|
|
45
|
+
|
|
46
|
+
### Using theme CSS
|
|
47
|
+
|
|
48
|
+
Theme CSS file will contain the styles which suggests a theme for all the components but is not a must have to use the library.
|
|
49
|
+
|
|
50
|
+
You can use the theme CSS in 2 ways:
|
|
51
|
+
|
|
52
|
+
**1. Use individual component CSS**
|
|
53
|
+
|
|
54
|
+
You can import the individual files for each of the components like below:
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
import "react-components-bundle/components/Table/tableTheme.css";
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
**2. Include the bundled CSS file which has all component's CSS**
|
|
61
|
+
|
|
62
|
+
You can import the bundled CSS file which contains all the component's CSS like below:
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
import "react-components-bundle/components/theme.css";
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Library structure
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
react-components-bundle
|
|
72
|
+
│
|
|
73
|
+
│
|
|
74
|
+
└─── components
|
|
75
|
+
│ │
|
|
76
|
+
│ └─── Button
|
|
77
|
+
│ │
|
|
78
|
+
│ └─── DataLoader
|
|
79
|
+
│ │
|
|
80
|
+
│ └─── Form
|
|
81
|
+
│ │ │
|
|
82
|
+
│ │ └─── Input
|
|
83
|
+
│ │ │
|
|
84
|
+
│ │ └─── Checkbox
|
|
85
|
+
│ │ │
|
|
86
|
+
│ │ └─── DragDropFileUploader
|
|
87
|
+
│ │ │
|
|
88
|
+
│ │ └─── Dropdown
|
|
89
|
+
│ │ │
|
|
90
|
+
│ │ └─── FileUploader
|
|
91
|
+
│ │ │
|
|
92
|
+
│ │ └─── RadioList
|
|
93
|
+
│ │ │
|
|
94
|
+
│ │ └─── RangeSlider
|
|
95
|
+
│ │ │
|
|
96
|
+
│ │ └─── TextArea
|
|
97
|
+
│ │ │
|
|
98
|
+
│ │ └─── Toggle
|
|
99
|
+
│ │
|
|
100
|
+
│ └─── InlineModal
|
|
101
|
+
│ │
|
|
102
|
+
│ └─── List
|
|
103
|
+
│ │
|
|
104
|
+
│ └─── Modal
|
|
105
|
+
│ │
|
|
106
|
+
│ └─── NotificationComponent
|
|
107
|
+
│ │
|
|
108
|
+
│ └─── ProgressBar
|
|
109
|
+
│ │
|
|
110
|
+
│ └─── Table
|
|
111
|
+
│ │
|
|
112
|
+
│ └─── TabsComponent
|
|
113
|
+
│
|
|
114
|
+
└─── core
|
|
115
|
+
│
|
|
116
|
+
└─── dataLoader
|
|
117
|
+
│
|
|
118
|
+
└─── utils
|
|
119
|
+
```
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import React, { useState, cloneElement } from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import List from "../List";
|
|
4
|
+
|
|
5
|
+
const ALL = "ALL";
|
|
6
|
+
|
|
7
|
+
const getDefaultOpenedItems = (items = [], defaultOpen) =>{
|
|
8
|
+
let arr = [];
|
|
9
|
+
if(items.length > 0) {
|
|
10
|
+
items.forEach((item) => {
|
|
11
|
+
const {
|
|
12
|
+
id
|
|
13
|
+
} = item;
|
|
14
|
+
if(id === defaultOpen || defaultOpen === ALL ) {
|
|
15
|
+
arr.push(id)
|
|
16
|
+
}
|
|
17
|
+
})
|
|
18
|
+
}
|
|
19
|
+
return arr;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const AccordianItem = (props) => {
|
|
23
|
+
const {
|
|
24
|
+
itemData,
|
|
25
|
+
allowOneOpen,
|
|
26
|
+
openedItems,
|
|
27
|
+
setOpenedItems
|
|
28
|
+
} = props;
|
|
29
|
+
const { titleComponent, bodyComponent, id } = itemData;
|
|
30
|
+
const isOpen = openedItems.find(item => item === id) ? true: false;
|
|
31
|
+
const onItemClick = () => {
|
|
32
|
+
let newList = [id];
|
|
33
|
+
if(!allowOneOpen) {
|
|
34
|
+
newList = isOpen ? openedItems.filter(item => item !== id) : [...openedItems, id]
|
|
35
|
+
}
|
|
36
|
+
setOpenedItems(newList)
|
|
37
|
+
}
|
|
38
|
+
return <li className={`RCB-accordian-item ${isOpen ? "RCB-accordian-open" : "RCB-accordian-close"}`}>
|
|
39
|
+
<div className="RCB-accordian-title" onClick={onItemClick}>{cloneElement(titleComponent, { isOpen: isOpen })}</div>
|
|
40
|
+
{isOpen && <div className="RCB-accordian-body">{bodyComponent}</div>}
|
|
41
|
+
</li>
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
AccordianItem.propTypes = {
|
|
45
|
+
itemData: PropTypes.shape({
|
|
46
|
+
id: PropTypes.string.isRequired,
|
|
47
|
+
titleComponent: PropTypes.element.isRequired,
|
|
48
|
+
bodyComponent: PropTypes.element.isRequired,
|
|
49
|
+
}),
|
|
50
|
+
setOpenedItems: PropTypes.func,
|
|
51
|
+
openedItems: PropTypes.array,
|
|
52
|
+
allowOneOpen: PropTypes.bool
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
const Accordian = ({defaultOpen, items, allowOneOpen}) => {
|
|
57
|
+
const defaultOpened = getDefaultOpenedItems(items, defaultOpen);
|
|
58
|
+
const [openedItems, setOpenedItems] = useState(defaultOpened);
|
|
59
|
+
return (<div className={`RCB-accordian`}>
|
|
60
|
+
{
|
|
61
|
+
<List
|
|
62
|
+
items={items}
|
|
63
|
+
openedItems={openedItems}
|
|
64
|
+
defaultOpen={defaultOpen}
|
|
65
|
+
allowOneOpen={allowOneOpen}
|
|
66
|
+
setOpenedItems={setOpenedItems}
|
|
67
|
+
ListItem={AccordianItem} />
|
|
68
|
+
}
|
|
69
|
+
</div>);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
Accordian.propTypes = {
|
|
73
|
+
defaultOpen: PropTypes.string,
|
|
74
|
+
items: PropTypes.arrayOf(PropTypes.shape({
|
|
75
|
+
id: PropTypes.string.isRequired,
|
|
76
|
+
titleComponent: PropTypes.element.isRequired,
|
|
77
|
+
bodyComponent: PropTypes.element.isRequired,
|
|
78
|
+
})).isRequired,
|
|
79
|
+
// /* set to false if you want more than one accordian item to be open at a time */
|
|
80
|
+
allowOneOpen: PropTypes.bool
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
Accordian.defaultProps = {
|
|
84
|
+
allowOneOpen: false,
|
|
85
|
+
defaultOpen:"",//"ALL","ID","",
|
|
86
|
+
items:[]
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export default Accordian;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import React, { Fragment, useState } from "react";
|
|
2
|
+
import Accordian from "./Accordian";
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Accordian',
|
|
7
|
+
component: Accordian,
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const AccordianBody = () => {
|
|
11
|
+
const [count, setRandomNumber] = useState(1);
|
|
12
|
+
const onSetRandom = ()=>{
|
|
13
|
+
setRandomNumber(Math.round(Math.random()*10))
|
|
14
|
+
}
|
|
15
|
+
return <div style={{padding:'20px'}}>
|
|
16
|
+
<h3>This is accordian body</h3>
|
|
17
|
+
<button onClick={onSetRandom}> changed to {count}</button>
|
|
18
|
+
</div>
|
|
19
|
+
}
|
|
20
|
+
const AccordianTitle = ({id}) => {
|
|
21
|
+
return <div>
|
|
22
|
+
{`Title ${id}`}
|
|
23
|
+
</div>
|
|
24
|
+
}
|
|
25
|
+
const Template = (args) => <Accordian {...args} />;
|
|
26
|
+
|
|
27
|
+
export const Default = Template.bind();
|
|
28
|
+
Default.args = {
|
|
29
|
+
items: [{
|
|
30
|
+
id: "41",
|
|
31
|
+
titleComponent: <AccordianTitle id={'41'}/>,
|
|
32
|
+
bodyComponent: <AccordianBody/>,
|
|
33
|
+
}, {
|
|
34
|
+
id: "42",
|
|
35
|
+
titleComponent: <AccordianTitle id={'42'}/>,
|
|
36
|
+
bodyComponent: <AccordianBody/>
|
|
37
|
+
}, {
|
|
38
|
+
id: "43",
|
|
39
|
+
titleComponent: <AccordianTitle id={'43'}/>,
|
|
40
|
+
bodyComponent: <AccordianBody/>
|
|
41
|
+
}, {
|
|
42
|
+
id: "44",
|
|
43
|
+
titleComponent: <AccordianTitle id={'44'}/>,
|
|
44
|
+
bodyComponent: <AccordianBody/>
|
|
45
|
+
}],
|
|
46
|
+
defaultOpen:""
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export const DefaultOpen = Template.bind();
|
|
50
|
+
DefaultOpen.args = {
|
|
51
|
+
items: [{
|
|
52
|
+
id: "41",
|
|
53
|
+
titleComponent: <AccordianTitle id={'41'}/>,
|
|
54
|
+
bodyComponent: <AccordianBody/>,
|
|
55
|
+
}, {
|
|
56
|
+
id: "42",
|
|
57
|
+
titleComponent: <AccordianTitle id={'42'}/>,
|
|
58
|
+
bodyComponent: <AccordianBody/>
|
|
59
|
+
}, {
|
|
60
|
+
id: "43",
|
|
61
|
+
titleComponent: <AccordianTitle id={'43'}/>,
|
|
62
|
+
bodyComponent: <AccordianBody/>
|
|
63
|
+
}, {
|
|
64
|
+
id: "44",
|
|
65
|
+
titleComponent: <AccordianTitle id={'44'}/>,
|
|
66
|
+
bodyComponent: <AccordianBody/>
|
|
67
|
+
}],
|
|
68
|
+
defaultOpen:"42"
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export const OpenAtLeastOneAlways = Template.bind();
|
|
72
|
+
OpenAtLeastOneAlways.args = {
|
|
73
|
+
items: [{
|
|
74
|
+
id: "411",
|
|
75
|
+
titleComponent: <AccordianTitle id={'41'}/>,
|
|
76
|
+
bodyComponent: <AccordianBody/>,
|
|
77
|
+
}, {
|
|
78
|
+
id: "421",
|
|
79
|
+
titleComponent: <AccordianTitle id={'42'}/>,
|
|
80
|
+
bodyComponent: <AccordianBody/>
|
|
81
|
+
}, {
|
|
82
|
+
id: "431",
|
|
83
|
+
titleComponent: <AccordianTitle id={'43'}/>,
|
|
84
|
+
bodyComponent: <AccordianBody/>
|
|
85
|
+
}, {
|
|
86
|
+
id: "441",
|
|
87
|
+
titleComponent: <AccordianTitle id={'44'}/>,
|
|
88
|
+
bodyComponent: <AccordianBody/>
|
|
89
|
+
}],
|
|
90
|
+
defaultOpen:"421",
|
|
91
|
+
allowOneOpen:true
|
|
92
|
+
}
|