groundfloor-react-ui 1.2.9 → 1.2.10
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/dist/index.es.js +432 -422
- package/dist/index.js +444 -434
- package/package.json +15 -43
- package/rollup.config.js +6 -6
- package/assets/fonts/Averta/Averta-Black.woff2 +0 -0
- package/assets/fonts/Averta/Averta-BlackItalic.woff2 +0 -0
- package/assets/fonts/Averta/Averta-Bold.woff2 +0 -0
- package/assets/fonts/Averta/Averta-BoldItalic.woff2 +0 -0
- package/assets/fonts/Averta/Averta-ExtraBold.woff2 +0 -0
- package/assets/fonts/Averta/Averta-ExtraBoldItalic.woff2 +0 -0
- package/assets/fonts/Averta/Averta-ExtraThin.woff2 +0 -0
- package/assets/fonts/Averta/Averta-ExtraThinItalic.woff2 +0 -0
- package/assets/fonts/Averta/Averta-Light.woff2 +0 -0
- package/assets/fonts/Averta/Averta-LightItalic.woff2 +0 -0
- package/assets/fonts/Averta/Averta-Regular.woff2 +0 -0
- package/assets/fonts/Averta/Averta-RegularItalic.woff2 +0 -0
- package/assets/fonts/Averta/Averta-SemiBold.woff2 +0 -0
- package/assets/fonts/Averta/Averta-SemiBoldItalic.woff2 +0 -0
- package/assets/fonts/Averta/Averta-Thin.woff2 +0 -0
- package/assets/fonts/Averta/Averta-ThinItalic.woff2 +0 -0
- package/assets/fonts/Beauty/BeautyDemo.woff +0 -0
- package/assets/icons/app-logo.svg +0 -3
- package/assets/icons/arrow-down.svg +0 -3
- package/assets/icons/arrow-rotate.svg +0 -1
- package/assets/icons/arrow-up.svg +0 -3
- package/assets/icons/bell.svg +0 -3
- package/assets/icons/check.svg +0 -3
- package/assets/icons/checkmark.svg +0 -3
- package/assets/icons/chevron-down.svg +0 -3
- package/assets/icons/chevron-left.svg +0 -3
- package/assets/icons/chevron-right.svg +0 -3
- package/assets/icons/cloud-icon.svg +0 -3
- package/assets/icons/connection.svg +0 -3
- package/assets/icons/cross-icon.svg +0 -3
- package/assets/icons/default.svg +0 -1
- package/assets/icons/door-internal-active.svg +0 -1
- package/assets/icons/edit-icon.svg +0 -3
- package/assets/icons/ellipses-horizontal.svg +0 -3
- package/assets/icons/ellipses.svg +0 -3
- package/assets/icons/email.svg +0 -3
- package/assets/icons/eye-hide-view.svg +0 -1
- package/assets/icons/eye-hide.svg +0 -1
- package/assets/icons/file-attach-white.svg +0 -3
- package/assets/icons/file-attach.svg +0 -3
- package/assets/icons/file-icon.svg +0 -1
- package/assets/icons/file-upload.svg +0 -3
- package/assets/icons/functional-equation-regular.svg +0 -147
- package/assets/icons/hamburger-menu.svg +0 -3
- package/assets/icons/heart.svg +0 -18
- package/assets/icons/image.svg +0 -3
- package/assets/icons/info.svg +0 -3
- package/assets/icons/jpg-icon.svg +0 -3
- package/assets/icons/magnifier.svg +0 -3
- package/assets/icons/menu-ellipse-two.svg +0 -1
- package/assets/icons/menu-ellipse.svg +0 -53
- package/assets/icons/pause-all.svg +0 -1
- package/assets/icons/pdf-icon.svg +0 -3
- package/assets/icons/pen-icon.svg +0 -3
- package/assets/icons/plus-outlined.svg +0 -3
- package/assets/icons/resume.svg +0 -1
- package/assets/icons/sign-icon.svg +0 -3
- package/assets/icons/star.svg +0 -3
- package/assets/icons/trash-icon.svg +0 -59
- package/assets/icons/triangle-down.svg +0 -3
- package/assets/icons/users.svg +0 -11
- package/assets/icons/view.svg +0 -3
- package/assets/icons/watcher.svg +0 -3
- package/assets/icons/zoom-in-white.svg +0 -1
- package/assets/styles/global.css +0 -0
- package/assets/styles/global.scss +0 -0
- package/components/Accordion/Accordion.js +0 -167
- package/components/Accordion/AccordionSB.js +0 -170
- package/components/Accordion/AccordionSBfooter.js +0 -171
- package/components/Accordion/index.js +0 -4
- package/components/ArrowBar/ArrowBar.js +0 -276
- package/components/ArrowBar/index.js +0 -2
- package/components/Avatar/Avatar.js +0 -171
- package/components/Avatar/AvatarSB.js +0 -255
- package/components/Avatar/AvatarSBfooter.js +0 -279
- package/components/Avatar/index.js +0 -4
- package/components/Banner/Banner.js +0 -70
- package/components/Banner/index.js +0 -2
- package/components/Breadcrumb/Breadcrumb.js +0 -225
- package/components/Breadcrumb/index.js +0 -2
- package/components/Button/PrimaryButton.js +0 -167
- package/components/Button/SecondaryButton.js +0 -156
- package/components/Button/TinyButton.js +0 -101
- package/components/Button/index.js +0 -6
- package/components/Cards/Card.js +0 -43
- package/components/Cards/CardRef.js +0 -71
- package/components/Cards/DocumentCard.js +0 -215
- package/components/Cards/index.js +0 -5
- package/components/Content/Content.js +0 -50
- package/components/Content/index.js +0 -1
- package/components/DesignComponent/StyledComponent/StyledComponent.js +0 -326
- package/components/DesignComponent/StyledComponent/index.js +0 -1
- package/components/DesignComponent/index.js +0 -1
- package/components/Divider/Divider.js +0 -56
- package/components/Divider/index.js +0 -2
- package/components/Drawer/Drawer.js +0 -84
- package/components/Drawer/index.js +0 -2
- package/components/ErrorBoundary/ErrorBoundary.js +0 -44
- package/components/ErrorBoundary/index.js +0 -1
- package/components/FilterChip/FilterChip.js +0 -70
- package/components/FilterChip/index.js +0 -1
- package/components/Footer/Footer.js +0 -57
- package/components/Footer/FooterContent.js +0 -98
- package/components/Footer/index.js +0 -3
- package/components/Form/FormComponent.js +0 -244
- package/components/Form/HeaderComponent.js +0 -64
- package/components/Form/SubmitComponent.js +0 -63
- package/components/Form/index.js +0 -5
- package/components/GroupAvatars/GroupAvatars.js +0 -139
- package/components/GroupAvatars/index.js +0 -1
- package/components/GroupButtons/ButtonPopup.js +0 -191
- package/components/GroupButtons/GroupButtons.js +0 -150
- package/components/GroupButtons/GroupButtonsPopup.js +0 -163
- package/components/GroupButtons/index.js +0 -3
- package/components/GroupStatusCircle/GroupStatusCircle.js +0 -135
- package/components/GroupStatusCircle/index.js +0 -1
- package/components/Header/Header.js +0 -58
- package/components/Header/index.js +0 -1
- package/components/HyperLink/HyperLink.js +0 -114
- package/components/HyperLink/index.js +0 -1
- package/components/Icon/Icon.js +0 -176
- package/components/Icon/index.js +0 -1
- package/components/Images/Image.js +0 -107
- package/components/Images/index.js +0 -2
- package/components/Inputs/CheckBoxInput.js +0 -341
- package/components/Inputs/ColorInput.js +0 -145
- package/components/Inputs/DateSelect.js +0 -461
- package/components/Inputs/DropdownSelect.js +0 -689
- package/components/Inputs/DropzoneInput.js +0 -450
- package/components/Inputs/NumericInput.js +0 -177
- package/components/Inputs/PasswordInput.js +0 -267
- package/components/Inputs/RadioInput.js +0 -292
- package/components/Inputs/SearchInput.js +0 -19
- package/components/Inputs/Signature.js +0 -369
- package/components/Inputs/TextArea.js +0 -214
- package/components/Inputs/TextInput.js +0 -251
- package/components/Inputs/TimeInput.js +0 -186
- package/components/Inputs/ToggleSwitch.js +0 -189
- package/components/Inputs/index.js +0 -15
- package/components/Label/Label.js +0 -48
- package/components/Label/index.js +0 -1
- package/components/Loaders/Loader.js +0 -179
- package/components/Loaders/index.js +0 -2
- package/components/Modal/ModalComp.js +0 -216
- package/components/Modal/index.js +0 -1
- package/components/Overlay/Overlay.js +0 -158
- package/components/Overlay/index.js +0 -1
- package/components/Pagination/Pagination.js +0 -59
- package/components/Pagination/index.js +0 -1
- package/components/ProgressBar/ProgressBar.js +0 -101
- package/components/ProgressBar/index.js +0 -1
- package/components/ProgressSteps/ProgressSteps.js +0 -121
- package/components/ProgressSteps/index.js +0 -1
- package/components/Rating/Rating.js +0 -258
- package/components/Rating/index.js +0 -1
- package/components/SecondaryLink/DarkSecondaryLink.js +0 -97
- package/components/SecondaryLink/LightSecondaryLink.js +0 -93
- package/components/SecondaryLink/index.js +0 -3
- package/components/Sidebar/Navbar.js +0 -306
- package/components/Sidebar/Sidebar.js +0 -207
- package/components/Sidebar/index.js +0 -3
- package/components/StatusChip/PrimaryStatusChip.js +0 -78
- package/components/StatusChip/SecondaryStatusChip.js +0 -78
- package/components/StatusChip/SlimPrimaryStatusChip.js +0 -92
- package/components/StatusChip/SlimSecondaryStatusChip.js +0 -93
- package/components/StatusChip/index.js +0 -6
- package/components/StatusCircle/StatusCircle.js +0 -64
- package/components/StatusCircle/index.js +0 -1
- package/components/Tables/Table.js +0 -178
- package/components/Tables/index.js +0 -1
- package/components/Tooltip/Tooltip.js +0 -581
- package/components/Tooltip/index.js +0 -1
- package/components/Typography/Typography.js +0 -77
- package/components/Typography/index.js +0 -2
- package/components/constants/colors.js +0 -33
- package/components/constants/defaultStyle.js +0 -804
- package/components/constants/defaultThemeColor.js +0 -16
- package/components/constants/index.js +0 -7
- package/components/constants/utils.js +0 -31
- package/components/global/FontStyle.js +0 -131
- package/components/global/index.js +0 -1
- package/index.js +0 -41
package/assets/icons/resume.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#2e56f4;}</style></defs><path class="cls-1" d="M24,12,0,0V24Z"/></svg>
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="23" height="17" viewBox="0 0 23 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4919 0.469661C21.4919 0.469661 21.4927 0.469661 21.4935 0.470442L21.4935 0.470422C22.2458 1.00014 22.4466 2.06732 21.9411 2.85482L21.3568 3.76654L18.6302 1.85794L19.2138 0.936842C19.2138 0.936842 19.2138 0.936061 19.2145 0.936061C19.7193 0.148561 20.7396 -0.060019 21.4919 0.469661ZM12.8287 11.4032L12.81 14.4742C12.8053 14.5039 12.824 14.5297 12.8514 14.5352C12.8639 14.5367 12.8764 14.5352 12.8881 14.5274L15.6757 13.3492L21.0147 4.68745L18.1741 2.74057L12.8287 11.4032ZM11.6916 7.26789C11.2142 5.85961 9.65961 5.20995 8.23719 5.74995C6.01654 6.59005 5.65513 9.45668 6.63008 12.0049L6.7317 12.2595C7.01005 12.9291 7.3479 13.5236 7.75506 14.0393L7.90633 14.2236L7.7904 14.3086L7.64283 14.4049C6.71979 14.9803 6.0144 14.8962 5.42701 14.0152C5.11735 13.5506 5.01096 13.0618 4.98516 12.1083L4.9715 11.0336C4.93862 9.71545 4.77544 9.05726 4.19647 8.353C3.38847 7.36761 1.96488 7.43564 0.945348 8.25562C0.724649 8.43312 0.689631 8.75593 0.867134 8.97662C1.04464 9.19732 1.36744 9.23234 1.58814 9.05484C2.21276 8.55248 3.00273 8.51473 3.40378 9.00383C3.8507 9.54747 3.94804 10.1185 3.95265 11.5636L3.95515 11.9049C3.97323 13.2011 4.09831 13.871 4.57361 14.5841C5.54707 16.0442 6.94271 16.1268 8.36769 15.1564L8.59557 14.9923L8.64733 14.9496L8.7923 15.0647C9.63186 15.7067 10.6739 16.1324 11.9605 16.325C12.2406 16.3669 12.5016 16.1738 12.5435 15.8937C12.5855 15.6136 12.3924 15.3525 12.1123 15.3106L11.8424 15.2657C10.8696 15.0866 10.0777 14.7507 9.43059 14.26L9.42233 14.2526L9.48822 14.1872C10.0623 13.5879 10.5767 12.8898 10.926 12.2524C11.8691 10.5302 12.2094 8.7956 11.6916 7.26789ZM8.60065 6.70903C9.49902 6.36798 10.4363 6.75969 10.7202 7.59715C11.1306 8.8078 10.8446 10.2657 10.0264 11.7596L9.90522 11.9708C9.60656 12.4692 9.20064 13.0019 8.76026 13.4641L8.67833 13.5456L8.63441 13.4951C8.20642 12.9789 7.86423 12.3595 7.58793 11.6382C6.78908 9.55027 7.0745 7.28639 8.60065 6.70903Z" fill="#2E56F4"/>
|
|
3
|
-
</svg>
|
package/assets/icons/star.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M19.6464 7.09946C19.5855 6.92303 19.4747 6.76806 19.3274 6.65335C19.1802 6.53863 19.0028 6.4691 18.8169 6.45319L13.3284 5.65259L10.8687 0.665684C10.7897 0.5026 10.6664 0.365063 10.5128 0.268828C10.3593 0.172592 10.1817 0.121552 10.0005 0.121552C9.81934 0.121552 9.6418 0.172592 9.48826 0.268828C9.33473 0.365063 9.2114 0.5026 9.13242 0.665684L6.67273 5.64294L1.18424 6.45319C1.00572 6.47857 0.837879 6.55347 0.699776 6.66941C0.561672 6.78535 0.458832 6.93768 0.402924 7.10911C0.351748 7.27663 0.347156 7.45493 0.38964 7.62487C0.432124 7.7948 0.520081 7.94996 0.644071 8.0737L4.62781 11.932L3.66322 17.4109C3.62879 17.5917 3.64682 17.7786 3.71519 17.9496C3.78355 18.1205 3.8994 18.2683 4.04906 18.3755C4.19492 18.4797 4.36696 18.5413 4.54586 18.5532C4.72477 18.5651 4.90346 18.527 5.06187 18.443L10.0005 15.8675L14.9199 18.4526C15.0553 18.529 15.2082 18.5689 15.3636 18.5684C15.568 18.5691 15.7672 18.5049 15.9327 18.3851C16.0824 18.2779 16.1982 18.1301 16.2666 17.9592C16.335 17.7883 16.353 17.6014 16.3186 17.4205L15.354 11.9417L19.3377 8.08334C19.477 7.96535 19.5799 7.81027 19.6346 7.63611C19.6892 7.46195 19.6933 7.27586 19.6464 7.09946ZM13.7142 10.9578C13.6011 11.0672 13.5164 11.2027 13.4677 11.3523C13.4189 11.5019 13.4075 11.6612 13.4345 11.8163L14.129 15.8579L10.5021 13.9287C10.3626 13.8544 10.2069 13.8155 10.0488 13.8155C9.89066 13.8155 9.73498 13.8544 9.59542 13.9287L5.96858 15.8579L6.66308 11.8163C6.69003 11.6612 6.67862 11.5019 6.62987 11.3523C6.58111 11.2027 6.49647 11.0672 6.38335 10.9578L3.4896 8.06405L7.5505 7.47565C7.70676 7.45392 7.85531 7.39418 7.98311 7.30169C8.11092 7.2092 8.21409 7.08677 8.28358 6.94513L10.0005 3.27006L11.814 6.95478C11.8835 7.09641 11.9866 7.21884 12.1144 7.31134C12.2422 7.40383 12.3908 7.46356 12.547 7.4853L16.608 8.0737L13.7142 10.9578Z" fill="#2A50FD"/>
|
|
3
|
-
</svg>
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
-
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
-
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
|
5
|
-
<style type="text/css">
|
|
6
|
-
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#3A58A4;}
|
|
7
|
-
.st1{fill:#3A58A4;}
|
|
8
|
-
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#3957A3;}
|
|
9
|
-
.st3{fill:#3957A3;}
|
|
10
|
-
.st4{fill:#2972B8;}
|
|
11
|
-
.st5{fill:#138338;}
|
|
12
|
-
.st6{fill:#3C5BA6;}
|
|
13
|
-
.st7{fill:#DD0B18;}
|
|
14
|
-
.st8{fill:#3CAA37;}
|
|
15
|
-
.st9{fill:#1C2243;}
|
|
16
|
-
.st10{fill:#FFFFFF;}
|
|
17
|
-
.st11{fill:#FAD3D0;}
|
|
18
|
-
.st12{fill:#51C1E3;}
|
|
19
|
-
.st13{fill:#F59A15;}
|
|
20
|
-
.st14{fill:#1E2243;}
|
|
21
|
-
.st15{fill:#DD0C15;}
|
|
22
|
-
.st16{fill:#E94B46;}
|
|
23
|
-
.st17{fill:#F6A542;}
|
|
24
|
-
.st18{fill:#4DB486;}
|
|
25
|
-
.st19{fill:#474850;}
|
|
26
|
-
.st20{fill:#3B59A5;}
|
|
27
|
-
.st21{fill-rule:evenodd;clip-rule:evenodd;fill:#3C5BA6;}
|
|
28
|
-
.st22{fill-rule:evenodd;clip-rule:evenodd;fill:#3B59A5;}
|
|
29
|
-
.st23{fill:#929EAC;}
|
|
30
|
-
.st24{fill-rule:evenodd;clip-rule:evenodd;fill:#0A9639;}
|
|
31
|
-
.st25{fill:#0A9639;}
|
|
32
|
-
.st26{fill:#C11718;}
|
|
33
|
-
.st27{fill-rule:evenodd;clip-rule:evenodd;fill:#39AA35;}
|
|
34
|
-
.st28{fill:#39AA35;}
|
|
35
|
-
.st29{fill:#D4D7E3;}
|
|
36
|
-
.st30{fill-rule:evenodd;clip-rule:evenodd;fill:#D4D7E3;}
|
|
37
|
-
.st31{opacity:0.1;}
|
|
38
|
-
.st32{fill-rule:evenodd;clip-rule:evenodd;fill:#1DA741;}
|
|
39
|
-
.st33{fill:#18122C;}
|
|
40
|
-
.st34{fill:#110D1D;}
|
|
41
|
-
.st35{fill:#18142B;}
|
|
42
|
-
.st36{fill-rule:evenodd;clip-rule:evenodd;fill:#1F2244;}
|
|
43
|
-
.st37{fill:#1E2143;}
|
|
44
|
-
.st38{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
|
45
|
-
.st39{fill:#6B747F;}
|
|
46
|
-
.st40{fill-rule:evenodd;clip-rule:evenodd;fill:#F49913;}
|
|
47
|
-
.st41{fill:#020203;}
|
|
48
|
-
</style>
|
|
49
|
-
<g>
|
|
50
|
-
<path class="st39" d="M5,22.13C5.08,23.19,5.96,24,7.02,24h9.95c1.06,0,1.94-0.81,2.02-1.87l1.21-14.58l-16.42,0L5,22.13z
|
|
51
|
-
M15.46,10.96c0.03-0.38,0.35-0.66,0.73-0.63c0.38,0.03,0.66,0.35,0.63,0.73l-0.63,9.57c-0.03,0.38-0.35,0.66-0.73,0.63
|
|
52
|
-
c-0.38-0.03-0.66-0.35-0.63-0.73L15.46,10.96z M11.32,10.99c0-0.38,0.3-0.68,0.68-0.68c0.38,0,0.68,0.3,0.68,0.68v9.57
|
|
53
|
-
c0,0.38-0.3,0.68-0.68,0.68c-0.38,0-0.68-0.3-0.68-0.68V10.99z M7.83,10.31c0.38-0.03,0.71,0.25,0.73,0.63l0.63,9.57
|
|
54
|
-
c0.03,0.38-0.25,0.71-0.63,0.73c-0.38,0.03-0.71-0.25-0.73-0.63L7.2,11.04C7.15,10.66,7.45,10.33,7.83,10.31z"/>
|
|
55
|
-
<path class="st39" d="M19.73,3.46h-3.79C15.71,1.52,14.07,0,12.08,0H11.9c-2,0-3.64,1.52-3.84,3.46H4.27c-1.21,0-2.2,0.98-2.2,2.2
|
|
56
|
-
c0,0.3,0.23,0.53,0.53,0.53h18.8c0.3,0,0.53-0.23,0.53-0.53C21.93,4.45,20.94,3.46,19.73,3.46L19.73,3.46z M11.92,2.05h0.18
|
|
57
|
-
c0.86,0,1.57,0.61,1.77,1.42l-3.71,0C10.33,2.65,11.06,2.05,11.92,2.05L11.92,2.05z"/>
|
|
58
|
-
</g>
|
|
59
|
-
</svg>
|
package/assets/icons/users.svg
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g clip-path="url(#clip0_230_6893)">
|
|
3
|
-
<path d="M10.9998 0.923828C5.45056 0.923828 0.916504 5.4581 0.916504 11.0072C0.916504 16.5562 5.42782 21.0905 10.9998 21.0905C16.5719 21.0905 21.0832 16.5792 21.0832 11.0072C21.0832 5.43515 16.5489 0.923828 10.9998 0.923828ZM5.78904 18.0004C6.87183 16.1504 8.87931 14.9552 11.0449 14.9552C13.2105 14.9552 15.1958 16.1057 16.2786 17.9556C14.8127 19.0613 12.9854 19.738 11.0228 19.738C9.0374 19.7371 7.23304 19.0833 5.78904 18.0005V18.0004ZM17.2936 17.053C15.9402 14.9103 13.6165 13.6245 11.0449 13.6245C8.496 13.6245 6.10478 14.978 4.77404 17.0987C3.24038 15.5193 2.29294 13.3765 2.29294 11.008C2.2701 6.20241 6.1953 2.27731 11.0001 2.27731C15.8048 2.27731 19.7299 6.20241 19.7299 11.0072C19.7299 13.3529 18.8053 15.4737 17.2936 17.053V17.053Z" fill="#2E56F4"/>
|
|
4
|
-
<path d="M10.9997 5.07471C9.03716 5.07471 7.41309 6.67604 7.41309 8.66133C7.41309 10.6239 9.01442 12.2479 10.9997 12.2479C12.985 12.2479 14.5863 10.6466 14.5863 8.66133C14.5863 6.67604 12.9621 5.07471 10.9997 5.07471ZM10.9997 10.8719C9.78157 10.8719 8.76657 9.87968 8.76657 8.6388C8.76657 7.42067 9.75883 6.40567 10.9997 6.40567C12.2406 6.40567 13.2328 7.39793 13.2328 8.6388C13.2328 9.87968 12.2177 10.8719 10.9997 10.8719Z" fill="#2E56F4"/>
|
|
5
|
-
</g>
|
|
6
|
-
<defs>
|
|
7
|
-
<clipPath id="clip0_230_6893">
|
|
8
|
-
<rect width="22" height="22" fill="white" transform="translate(0 0.00714111)"/>
|
|
9
|
-
</clipPath>
|
|
10
|
-
</defs>
|
|
11
|
-
</svg>
|
package/assets/icons/view.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M19.6519 8.31959C17.7015 3.79111 14.0323 0.981323 10.0735 0.981323C6.11473 0.981323 2.44559 3.79111 0.49516 8.31959C0.441993 8.44141 0.414551 8.5729 0.414551 8.70581C0.414551 8.83873 0.441993 8.97022 0.49516 9.09204C2.44559 13.6205 6.11473 16.4303 10.0735 16.4303C14.0323 16.4303 17.7015 13.6205 19.6519 9.09204C19.7051 8.97022 19.7325 8.83873 19.7325 8.70581C19.7325 8.5729 19.7051 8.44141 19.6519 8.31959ZM10.0735 14.4992C7.0127 14.4992 4.11602 12.288 2.44559 8.70581C4.11602 5.12358 7.0127 2.91245 10.0735 2.91245C13.1344 2.91245 16.031 5.12358 17.7015 8.70581C16.031 12.288 13.1344 14.4992 10.0735 14.4992ZM10.0735 4.84357C9.30965 4.84357 8.56292 5.07009 7.92778 5.49447C7.29264 5.91886 6.7976 6.52206 6.50528 7.2278C6.21296 7.93353 6.13647 8.7101 6.2855 9.4593C6.43452 10.2085 6.80236 10.8967 7.34251 11.4368C7.88265 11.977 8.57084 12.3448 9.32004 12.4938C10.0692 12.6429 10.8458 12.5664 11.5515 12.2741C12.2573 11.9817 12.8605 11.4867 13.2849 10.8516C13.7093 10.2164 13.9358 9.4697 13.9358 8.70581C13.9358 7.68148 13.5289 6.69911 12.8045 5.97479C12.0802 5.25048 11.0979 4.84357 10.0735 4.84357ZM10.0735 10.6369C9.69159 10.6369 9.31823 10.5237 9.00066 10.3115C8.68308 10.0993 8.43557 9.79769 8.2894 9.44482C8.14324 9.09196 8.105 8.70367 8.17951 8.32907C8.25403 7.95447 8.43795 7.61038 8.70802 7.34031C8.97809 7.07023 9.32218 6.88631 9.69679 6.8118C10.0714 6.73728 10.4597 6.77553 10.8125 6.92169C11.1654 7.06785 11.467 7.31537 11.6792 7.63294C11.8914 7.95051 12.0047 8.32387 12.0047 8.70581C12.0047 9.21798 11.8012 9.70917 11.439 10.0713C11.0769 10.4335 10.5857 10.6369 10.0735 10.6369Z" fill="#2A50FD"/>
|
|
3
|
-
</svg>
|
package/assets/icons/watcher.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.656738 6.70582C0.656738 6.70582 4.63454 0.455765 10.3157 0.455765C16.0544 0.455765 19.9747 6.70582 19.9747 6.70582C19.9747 6.70582 17.1336 12.9559 10.3157 12.9559C3.55432 12.9559 0.656738 6.70582 0.656738 6.70582ZM6.33889 6.70581C6.33889 8.92161 8.0998 10.6825 10.3156 10.6825C12.5314 10.6825 14.2923 8.92161 14.2923 6.70581C14.2923 4.49001 12.5314 2.7291 10.3156 2.7291C8.0998 2.7291 6.33889 4.49001 6.33889 6.70581ZM10.3157 8.41028C11.2574 8.41028 12.0201 7.64753 12.0201 6.70582C12.0201 5.76411 11.2574 5.00136 10.3157 5.00136C9.37395 5.00136 8.6112 5.76411 8.6112 6.70582C8.6112 7.64753 9.37395 8.41028 10.3157 8.41028Z" fill="#2A50FD"/>
|
|
3
|
-
</svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M22.6,10.6H13.4V1.4a1.4,1.4,0,1,0-2.8,0v9.2H1.4a1.4,1.4,0,1,0,0,2.8h9.2v9.2a1.4,1.4,0,1,0,2.8,0V13.4h9.2a1.4,1.4,0,0,0,0-2.8Z" transform="translate(0 0)"/></svg>
|
package/assets/styles/global.css
DELETED
|
File without changes
|
|
File without changes
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
3
|
-
import styled, { useTheme } from 'styled-components';
|
|
4
|
-
import { Card, CardRef } from '../Cards';
|
|
5
|
-
import defaultThemeColor from '../constants/defaultThemeColor';
|
|
6
|
-
import { Icon } from '../Icon';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Primary UI component for user interaction
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
const Wrapper = styled.div`
|
|
13
|
-
display: flex;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
align-items: center;
|
|
16
|
-
|
|
17
|
-
span {
|
|
18
|
-
margin-right: 5px;
|
|
19
|
-
margin-left: 5px;
|
|
20
|
-
font-size: 12px;
|
|
21
|
-
color: ${({ theme }) => theme.neutral['neutral-3']};
|
|
22
|
-
}
|
|
23
|
-
`;
|
|
24
|
-
|
|
25
|
-
export const Accordion = ({
|
|
26
|
-
customStylesAccordionContainer,
|
|
27
|
-
customStylesAccordionTogggle,
|
|
28
|
-
customStylesAccordionIcon,
|
|
29
|
-
customStylesAccordionContent,
|
|
30
|
-
toggleIconAnimation,
|
|
31
|
-
icon,
|
|
32
|
-
content,
|
|
33
|
-
contentToggle,
|
|
34
|
-
toggleState,
|
|
35
|
-
contentIsOpen,
|
|
36
|
-
id,
|
|
37
|
-
...props
|
|
38
|
-
}) => {
|
|
39
|
-
// const [contentIsOpen, setContentIsOpen] = useState(false);
|
|
40
|
-
const contentRef = useRef(null); //Used to get the height of the content
|
|
41
|
-
const activeTheme = useTheme() || defaultThemeColor;
|
|
42
|
-
const [height, setHeight] = useState(0)
|
|
43
|
-
const [contentVisibility, setcontentVisibility] = useState(false);
|
|
44
|
-
|
|
45
|
-
// useEffect(() => {
|
|
46
|
-
// setHeight(contentRef.current.scrollHeight);
|
|
47
|
-
// }, [content])
|
|
48
|
-
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
setcontentVisibility(contentIsOpen)
|
|
51
|
-
}, [contentIsOpen])
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
return (
|
|
55
|
-
<Card
|
|
56
|
-
customStyles={customStylesAccordionContainer}
|
|
57
|
-
type={'accordionContainer'}
|
|
58
|
-
{...props}
|
|
59
|
-
header={
|
|
60
|
-
<Card
|
|
61
|
-
customStyles={customStylesAccordionTogggle}
|
|
62
|
-
type={'accordionToggle'}
|
|
63
|
-
{...props}
|
|
64
|
-
onClick={() => {
|
|
65
|
-
setcontentVisibility(!contentVisibility);
|
|
66
|
-
}}
|
|
67
|
-
header={contentToggle} //Label of the toggle
|
|
68
|
-
content={
|
|
69
|
-
//Icon of the toggle
|
|
70
|
-
|
|
71
|
-
<Wrapper theme={activeTheme}>
|
|
72
|
-
<span>{!contentVisibility ? 'Click to open' : 'Click to hide'}</span>
|
|
73
|
-
<div
|
|
74
|
-
style={
|
|
75
|
-
toggleIconAnimation && contentVisibility
|
|
76
|
-
? {
|
|
77
|
-
transform: 'rotate(180deg)',
|
|
78
|
-
transition: 'transform ease 95ms',
|
|
79
|
-
background: 'transparent',
|
|
80
|
-
}
|
|
81
|
-
: {
|
|
82
|
-
transform: 'rotate(0deg)',
|
|
83
|
-
transition: 'transform ease 95ms',
|
|
84
|
-
background: 'transparent',
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
>
|
|
88
|
-
{icon ? (
|
|
89
|
-
icon
|
|
90
|
-
) : (
|
|
91
|
-
<Icon
|
|
92
|
-
icon='chevron-down'
|
|
93
|
-
size={11}
|
|
94
|
-
transform={'translate(0px,-1px)'}
|
|
95
|
-
color='#A9B1B8'
|
|
96
|
-
/>
|
|
97
|
-
)}
|
|
98
|
-
</div>
|
|
99
|
-
</Wrapper>
|
|
100
|
-
}
|
|
101
|
-
/>
|
|
102
|
-
}
|
|
103
|
-
content={
|
|
104
|
-
|
|
105
|
-
<CardRef
|
|
106
|
-
customStyles={customStylesAccordionContent}
|
|
107
|
-
type={'accordionContent'}
|
|
108
|
-
ref={contentRef}
|
|
109
|
-
// contentIsOpen={contentIsOpen}
|
|
110
|
-
{...props}
|
|
111
|
-
style={
|
|
112
|
-
contentVisibility
|
|
113
|
-
? { minHeight: contentRef.current.scrollHeight + 'px', borderColor: activeTheme.borderColor }
|
|
114
|
-
: { height: '0px', borderBottom: 'none' }
|
|
115
|
-
}
|
|
116
|
-
id={id}
|
|
117
|
-
content={content}
|
|
118
|
-
/>
|
|
119
|
-
}
|
|
120
|
-
/>
|
|
121
|
-
);
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
Accordion.propTypes = {
|
|
125
|
-
/**
|
|
126
|
-
* Custom style for the Container
|
|
127
|
-
*/
|
|
128
|
-
customStylesAccordionContainer: PropTypes.object,
|
|
129
|
-
/**
|
|
130
|
-
* Custom style for the Toggle
|
|
131
|
-
*/
|
|
132
|
-
customStylesAccordionTogggle: PropTypes.object,
|
|
133
|
-
/**
|
|
134
|
-
* Custom style for the Icon
|
|
135
|
-
*/
|
|
136
|
-
customStylesAccordionIcon: PropTypes.object,
|
|
137
|
-
/**
|
|
138
|
-
* Custom style for the Content
|
|
139
|
-
*/
|
|
140
|
-
customStylesAccordionContent: PropTypes.object,
|
|
141
|
-
/**
|
|
142
|
-
* Toggle icon animation if false the icon does not rotate
|
|
143
|
-
*/
|
|
144
|
-
toggleIconAnimation: PropTypes.bool,
|
|
145
|
-
/**
|
|
146
|
-
* Icon to apply rotation animation when toggle accordion
|
|
147
|
-
*/
|
|
148
|
-
icon: PropTypes.any,
|
|
149
|
-
/**
|
|
150
|
-
* Element to be inside the content of the accordion
|
|
151
|
-
*/
|
|
152
|
-
content: PropTypes.any,
|
|
153
|
-
/**
|
|
154
|
-
* String or element to be display in the header of the accordion
|
|
155
|
-
*/
|
|
156
|
-
contentToggle: PropTypes.any,
|
|
157
|
-
toggleState: PropTypes.func,
|
|
158
|
-
id: PropTypes.string
|
|
159
|
-
};
|
|
160
|
-
|
|
161
|
-
Accordion.defaultProps = {
|
|
162
|
-
contentToggle: 'Toggle',
|
|
163
|
-
content: 'Content',
|
|
164
|
-
toggleIconAnimation: true,
|
|
165
|
-
toggleState: () => { },
|
|
166
|
-
id: ''
|
|
167
|
-
};
|
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Card, CardRef } from '../Cards';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Primary UI component for user interaction
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
export const AccordionSB = ({
|
|
10
|
-
customStylesAccordionContainer,
|
|
11
|
-
customStylesAccordionTogggle,
|
|
12
|
-
customStylesAccordionIcon,
|
|
13
|
-
customStylesAccordionContent,
|
|
14
|
-
toggleIconAnimation,
|
|
15
|
-
icon,
|
|
16
|
-
content,
|
|
17
|
-
contentToggle,
|
|
18
|
-
isSelected,
|
|
19
|
-
index,
|
|
20
|
-
handleClick,
|
|
21
|
-
isAccordionOpen,
|
|
22
|
-
id,
|
|
23
|
-
customSelectCardColor,
|
|
24
|
-
|
|
25
|
-
...props
|
|
26
|
-
}) => {
|
|
27
|
-
const [contentIsOpen, setContentIsOpen] = useState(false);
|
|
28
|
-
const contentRef = useRef(null); //Used to get the height of the content
|
|
29
|
-
|
|
30
|
-
const [customStylesContainer, setCustomStylesContainer] = useState({});
|
|
31
|
-
const [customStylesTogggle, setCustomStylesTogggle] = useState({});
|
|
32
|
-
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
if (isSelected) {
|
|
35
|
-
setCustomStylesContainer((prev) => {
|
|
36
|
-
return {
|
|
37
|
-
...prev,
|
|
38
|
-
backgroundColor: customSelectCardColor || '#2444d8',
|
|
39
|
-
marginBottom: '15.5px',
|
|
40
|
-
marginTop: index !== 0 ? '15.5px' : '0px',
|
|
41
|
-
};
|
|
42
|
-
});
|
|
43
|
-
setCustomStylesTogggle((prev) => {
|
|
44
|
-
return {
|
|
45
|
-
...prev,
|
|
46
|
-
backgroundColor: customSelectCardColor || '#2444d8',
|
|
47
|
-
paddingTop: '14px',
|
|
48
|
-
paddingBottom: '14px',
|
|
49
|
-
paddingLeft: '14px',
|
|
50
|
-
};
|
|
51
|
-
});
|
|
52
|
-
} else {
|
|
53
|
-
setCustomStylesContainer({});
|
|
54
|
-
setCustomStylesTogggle({});
|
|
55
|
-
}
|
|
56
|
-
}, [isSelected]);
|
|
57
|
-
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
if (isAccordionOpen) {
|
|
60
|
-
setContentIsOpen(true);
|
|
61
|
-
} else {
|
|
62
|
-
setContentIsOpen(false);
|
|
63
|
-
}
|
|
64
|
-
}, [isAccordionOpen]);
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<Card
|
|
68
|
-
customStyles={{
|
|
69
|
-
...customStylesAccordionContainer,
|
|
70
|
-
...customStylesContainer,
|
|
71
|
-
}}
|
|
72
|
-
type={'accordionContainer'}
|
|
73
|
-
{...props}
|
|
74
|
-
header={
|
|
75
|
-
//Header of Accordion
|
|
76
|
-
<Card
|
|
77
|
-
customStyles={{
|
|
78
|
-
...customStylesAccordionTogggle,
|
|
79
|
-
...customStylesTogggle,
|
|
80
|
-
}}
|
|
81
|
-
type={'accordionToggle'}
|
|
82
|
-
{...props}
|
|
83
|
-
// onClick={() => { setContentIsOpen(!contentIsOpen) }}
|
|
84
|
-
onClick={() => {
|
|
85
|
-
if (!contentIsOpen) {
|
|
86
|
-
handleClick(index);
|
|
87
|
-
}
|
|
88
|
-
setContentIsOpen(!contentIsOpen);
|
|
89
|
-
}}
|
|
90
|
-
header={contentToggle} //Label of the toggle
|
|
91
|
-
content={
|
|
92
|
-
//Icon of the toggle
|
|
93
|
-
<div
|
|
94
|
-
style={
|
|
95
|
-
toggleIconAnimation && contentIsOpen
|
|
96
|
-
? {
|
|
97
|
-
transform: 'rotate(180deg)',
|
|
98
|
-
transition: 'transform ease 95ms',
|
|
99
|
-
background: 'transparent',
|
|
100
|
-
}
|
|
101
|
-
: { transform: 'rotate(0deg)', background: 'transparent' }
|
|
102
|
-
}
|
|
103
|
-
>
|
|
104
|
-
{icon}
|
|
105
|
-
</div>
|
|
106
|
-
}
|
|
107
|
-
/>
|
|
108
|
-
}
|
|
109
|
-
content={
|
|
110
|
-
//Body of Accordion
|
|
111
|
-
<CardRef
|
|
112
|
-
customStyles={customStylesAccordionContent}
|
|
113
|
-
type={'accordionContent'}
|
|
114
|
-
ref={contentRef}
|
|
115
|
-
// contentIsOpen={contentIsOpen}
|
|
116
|
-
{...props}
|
|
117
|
-
style={
|
|
118
|
-
contentIsOpen
|
|
119
|
-
? { height: contentRef.current.scrollHeight + 'px' }
|
|
120
|
-
: { height: '0px', borderBottom: 'none' }
|
|
121
|
-
}
|
|
122
|
-
id={id}
|
|
123
|
-
content={content}
|
|
124
|
-
/>
|
|
125
|
-
}
|
|
126
|
-
/>
|
|
127
|
-
);
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
AccordionSB.propTypes = {
|
|
131
|
-
/**
|
|
132
|
-
* Custom style for the Container
|
|
133
|
-
*/
|
|
134
|
-
customStylesAccordionContainer: PropTypes.object,
|
|
135
|
-
/**
|
|
136
|
-
* Custom style for the Toggle
|
|
137
|
-
*/
|
|
138
|
-
customStylesAccordionTogggle: PropTypes.object,
|
|
139
|
-
/**
|
|
140
|
-
* Custom style for the Icon
|
|
141
|
-
*/
|
|
142
|
-
customStylesAccordionIcon: PropTypes.object,
|
|
143
|
-
/**
|
|
144
|
-
* Custom style for the Content
|
|
145
|
-
*/
|
|
146
|
-
customStylesAccordionContent: PropTypes.object,
|
|
147
|
-
/**
|
|
148
|
-
* Toggle icon animation if false the icon does not rotate
|
|
149
|
-
*/
|
|
150
|
-
toggleIconAnimation: PropTypes.bool,
|
|
151
|
-
/**
|
|
152
|
-
* Icon to apply rotation animation when toggle accordion
|
|
153
|
-
*/
|
|
154
|
-
icon: PropTypes.any,
|
|
155
|
-
/**
|
|
156
|
-
* Element to be inside the content of the accordion
|
|
157
|
-
*/
|
|
158
|
-
content: PropTypes.any,
|
|
159
|
-
/**
|
|
160
|
-
* String or element to be display in the header of the accordion
|
|
161
|
-
*/
|
|
162
|
-
contentToggle: PropTypes.any,
|
|
163
|
-
id: PropTypes.string,
|
|
164
|
-
};
|
|
165
|
-
|
|
166
|
-
AccordionSB.defaultProps = {
|
|
167
|
-
contentToggle: 'Toggle',
|
|
168
|
-
content: 'Content',
|
|
169
|
-
id: '',
|
|
170
|
-
};
|
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Card, CardRef } from '../Cards';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Primary UI component for user interaction
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
export const AccordionSBfooter = ({
|
|
10
|
-
customStylesAccordionContainer,
|
|
11
|
-
customStylesAccordionTogggle,
|
|
12
|
-
customStylesAccordionIcon,
|
|
13
|
-
customStylesAccordionContent,
|
|
14
|
-
toggleIconAnimation,
|
|
15
|
-
icon,
|
|
16
|
-
content,
|
|
17
|
-
contentToggle,
|
|
18
|
-
isSelected,
|
|
19
|
-
index,
|
|
20
|
-
handleClick,
|
|
21
|
-
isAccordionOpen,
|
|
22
|
-
disable,
|
|
23
|
-
id,
|
|
24
|
-
...props
|
|
25
|
-
}) => {
|
|
26
|
-
const [contentIsOpen, setContentIsOpen] = useState(false);
|
|
27
|
-
const contentRef = useRef(null); //Used to get the height of the content
|
|
28
|
-
|
|
29
|
-
const [customStylesContainer, setCustomStylesContainer] = useState({});
|
|
30
|
-
const [customStylesTogggle, setCustomStylesTogggle] = useState({});
|
|
31
|
-
|
|
32
|
-
useEffect(() => {
|
|
33
|
-
if (isSelected) {
|
|
34
|
-
setCustomStylesContainer((prev) => {
|
|
35
|
-
return {
|
|
36
|
-
...prev,
|
|
37
|
-
backgroundColor: '#2444d8',
|
|
38
|
-
marginBottom: '15.5px',
|
|
39
|
-
marginTop: index !== 0 ? '15.5px' : '0px',
|
|
40
|
-
};
|
|
41
|
-
});
|
|
42
|
-
setCustomStylesTogggle((prev) => {
|
|
43
|
-
return {
|
|
44
|
-
...prev,
|
|
45
|
-
backgroundColor: '#2444d8',
|
|
46
|
-
paddingTop: '14px',
|
|
47
|
-
paddingBottom: '14px',
|
|
48
|
-
paddingLeft: '14px',
|
|
49
|
-
};
|
|
50
|
-
});
|
|
51
|
-
} else {
|
|
52
|
-
setCustomStylesContainer({});
|
|
53
|
-
setCustomStylesTogggle({});
|
|
54
|
-
}
|
|
55
|
-
}, [isSelected]);
|
|
56
|
-
// console.log("customStylesContainer", customStylesContainer)
|
|
57
|
-
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
if (isAccordionOpen) {
|
|
60
|
-
setContentIsOpen(true);
|
|
61
|
-
} else {
|
|
62
|
-
setContentIsOpen(false);
|
|
63
|
-
}
|
|
64
|
-
}, [isAccordionOpen]);
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<Card
|
|
68
|
-
customStyles={{
|
|
69
|
-
...customStylesAccordionContainer,
|
|
70
|
-
...customStylesContainer,
|
|
71
|
-
}}
|
|
72
|
-
type={'accordionContainer'}
|
|
73
|
-
{...props}
|
|
74
|
-
header={
|
|
75
|
-
//Header of Accordion
|
|
76
|
-
<Card
|
|
77
|
-
customStyles={{
|
|
78
|
-
...customStylesAccordionTogggle,
|
|
79
|
-
...customStylesTogggle,
|
|
80
|
-
}}
|
|
81
|
-
type={'accordionToggle'}
|
|
82
|
-
{...props}
|
|
83
|
-
// onClick={() => { setContentIsOpen(!contentIsOpen) }}
|
|
84
|
-
onClick={() => {
|
|
85
|
-
if (disable) return;
|
|
86
|
-
if (!contentIsOpen) {
|
|
87
|
-
handleClick(index);
|
|
88
|
-
}
|
|
89
|
-
setContentIsOpen(!contentIsOpen);
|
|
90
|
-
}}
|
|
91
|
-
header={contentToggle} //Label of the toggle
|
|
92
|
-
content={
|
|
93
|
-
//Icon of the toggle
|
|
94
|
-
<div
|
|
95
|
-
style={
|
|
96
|
-
toggleIconAnimation && contentIsOpen
|
|
97
|
-
? {
|
|
98
|
-
transform: 'rotate(180deg)',
|
|
99
|
-
transition: 'transform ease 95ms',
|
|
100
|
-
background: 'transparent',
|
|
101
|
-
}
|
|
102
|
-
: { transform: 'rotate(0deg)', background: 'transparent' }
|
|
103
|
-
}
|
|
104
|
-
>
|
|
105
|
-
{icon}
|
|
106
|
-
</div>
|
|
107
|
-
}
|
|
108
|
-
/>
|
|
109
|
-
}
|
|
110
|
-
content={
|
|
111
|
-
//Body of Accordion
|
|
112
|
-
<CardRef
|
|
113
|
-
customStyles={customStylesAccordionContent}
|
|
114
|
-
type={'accordionContent'}
|
|
115
|
-
ref={contentRef}
|
|
116
|
-
// contentIsOpen={contentIsOpen}
|
|
117
|
-
{...props}
|
|
118
|
-
style={
|
|
119
|
-
contentIsOpen
|
|
120
|
-
? { height: contentRef.current.scrollHeight + 'px' }
|
|
121
|
-
: { height: '0px', borderBottom: 'none' }
|
|
122
|
-
}
|
|
123
|
-
id={id}
|
|
124
|
-
content={content}
|
|
125
|
-
/>
|
|
126
|
-
}
|
|
127
|
-
/>
|
|
128
|
-
);
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
AccordionSBfooter.propTypes = {
|
|
132
|
-
/**
|
|
133
|
-
* Custom style for the Container
|
|
134
|
-
*/
|
|
135
|
-
customStylesAccordionContainer: PropTypes.object,
|
|
136
|
-
/**
|
|
137
|
-
* Custom style for the Toggle
|
|
138
|
-
*/
|
|
139
|
-
customStylesAccordionTogggle: PropTypes.object,
|
|
140
|
-
/**
|
|
141
|
-
* Custom style for the Icon
|
|
142
|
-
*/
|
|
143
|
-
customStylesAccordionIcon: PropTypes.object,
|
|
144
|
-
/**
|
|
145
|
-
* Custom style for the Content
|
|
146
|
-
*/
|
|
147
|
-
customStylesAccordionContent: PropTypes.object,
|
|
148
|
-
/**
|
|
149
|
-
* Toggle icon animation if false the icon does not rotate
|
|
150
|
-
*/
|
|
151
|
-
toggleIconAnimation: PropTypes.bool,
|
|
152
|
-
/**
|
|
153
|
-
* Icon to apply rotation animation when toggle accordion
|
|
154
|
-
*/
|
|
155
|
-
icon: PropTypes.any,
|
|
156
|
-
/**
|
|
157
|
-
* Element to be inside the content of the accordion
|
|
158
|
-
*/
|
|
159
|
-
content: PropTypes.any,
|
|
160
|
-
/**
|
|
161
|
-
* String or element to be display in the header of the accordion
|
|
162
|
-
*/
|
|
163
|
-
contentToggle: PropTypes.any,
|
|
164
|
-
id: PropTypes.string
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
AccordionSBfooter.defaultProps = {
|
|
168
|
-
contentToggle: 'Toggle',
|
|
169
|
-
content: 'Content',
|
|
170
|
-
id: ''
|
|
171
|
-
};
|