groovinads-ui 1.0.4 → 1.0.5

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.
Files changed (59) hide show
  1. package/.storybook/preview-head.html +3 -0
  2. package/dist/index.es.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Button/Button.jsx +22 -37
  6. package/src/scss/abstracts/_borders-radius.scss +0 -6
  7. package/src/scss/abstracts/_colors.scss +0 -33
  8. package/src/scss/abstracts/_fonts.scss +0 -8
  9. package/src/scss/abstracts/_helpers.scss +0 -7
  10. package/src/scss/abstracts/_media-queries.scss +0 -6
  11. package/src/scss/abstracts/_mixins.scss +0 -143
  12. package/src/scss/abstracts/_spinner-duration.scss +0 -1
  13. package/src/scss/abstracts/_variables.scss +0 -2
  14. package/src/scss/animations/_alertToUp.scss +0 -10
  15. package/src/scss/animations/_aurora.scss +0 -17
  16. package/src/scss/animations/_colors.scss +0 -15
  17. package/src/scss/animations/_dash.scss +0 -13
  18. package/src/scss/animations/_fadeCopyFromLeft.scss +0 -10
  19. package/src/scss/animations/_goAndBack.scss +0 -8
  20. package/src/scss/animations/_inputUp.scss +0 -10
  21. package/src/scss/animations/_shake.scss +0 -22
  22. package/src/scss/animations/_showIn.scss +0 -8
  23. package/src/scss/animations/_showMenu.scss +0 -12
  24. package/src/scss/animations/_statusLine.scss +0 -9
  25. package/src/scss/animations/_toDown.scss +0 -8
  26. package/src/scss/animations/_toastFromLeft.scss +0 -10
  27. package/src/scss/animations/_toastFromRight.scss +0 -10
  28. package/src/scss/base/_base.scss +0 -14
  29. package/src/scss/base/_typography.scss +0 -188
  30. package/src/scss/components/_alerts.scss +0 -115
  31. package/src/scss/components/_breadcrumb.scss +0 -30
  32. package/src/scss/components/_buttons.scss +0 -808
  33. package/src/scss/components/_checks.scss +0 -105
  34. package/src/scss/components/_dropdown-deck.scss +0 -115
  35. package/src/scss/components/_dropdowns.scss +0 -131
  36. package/src/scss/components/_img-404.scss +0 -6
  37. package/src/scss/components/_inputs.scss +0 -279
  38. package/src/scss/components/_login-source.scss +0 -19
  39. package/src/scss/components/_modals.scss +0 -89
  40. package/src/scss/components/_nav-tabs.scss +0 -38
  41. package/src/scss/components/_pills.scss +0 -88
  42. package/src/scss/components/_radio.scss +0 -102
  43. package/src/scss/components/_shadows.scss +0 -18
  44. package/src/scss/components/_spinner.scss +0 -20
  45. package/src/scss/components/_status-icon.scss +0 -61
  46. package/src/scss/components/_switch.scss +0 -77
  47. package/src/scss/components/_tabulator.scss +0 -386
  48. package/src/scss/components/_textareas.scss +0 -22
  49. package/src/scss/components/_toast.scss +0 -129
  50. package/src/scss/custom/_campaign-id.scss +0 -56
  51. package/src/scss/custom/_img-not-found.scss +0 -7
  52. package/src/scss/custom/_modal-edit.scss +0 -10
  53. package/src/scss/index.scss +0 -9
  54. package/src/scss/layout/_aurora.scss +0 -39
  55. package/src/scss/layout/_authentication.scss +0 -65
  56. package/src/scss/layout/_footer.scss +0 -21
  57. package/src/scss/layout/_main.scss +0 -41
  58. package/src/scss/layout/_navbar.scss +0 -64
  59. package/src/scss/views/_skeleton.scss +0 -266
@@ -0,0 +1,3 @@
1
+ <link rel="stylesheet" href="http://ui.groovinads.com/styles.min.css">
2
+ <!-- Fontawesome kit -->
3
+ <script src="https://kit.fontawesome.com/79f14073fb.js" crossorigin="anonymous"></script>
package/dist/index.es.js CHANGED
@@ -1 +1 @@
1
- import n from"react";!function(n,t){void 0===t&&(t={});var o=t.insertAt;if(n&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}(".btn{align-items:center;background-color:#3930b1;border-color:transparent;border-radius:.375rem;box-shadow:0 0 0 rgba(57,48,177,.35);color:#fff;display:flex;flex-direction:row;font-family:Roboto,sans-serif;font-size:1rem;font-weight:700;gap:.5rem;height:3rem;justify-content:center;line-height:1rem;padding:1em 1.5em;transform:translateY(0);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out,transform .15s ease-in-out,border-color .15s ease-in-out;white-space:nowrap;width:100%}@media (min-width:768px){.btn{width:auto}}.btn:hover{background-color:#3930b1;border-color:#3930b1;box-shadow:0 6px 16px rgba(57,48,177,.35);color:#fff;transform:translateY(-.146rem)}.btn:active,.btn:first-child:active{background-color:#3930b1!important;border-color:#3930b1!important;color:#fff!important}.btn:not(:has(span)){padding:1em;width:auto}.btn .icon,.btn i{height:1em;width:1em}.btn i,.btn span{transition:color .15s ease-in-out}.btn.btn-secondary{background-color:#e9e7f9;border-color:#e9e7f9;color:#3930b1}.btn.btn-secondary:hover{background-color:#3930b1;border-color:#3930b1;box-shadow:none;color:#fff;transform:translate(0)}.btn.btn-terciary{background-color:transparent;border-color:transparent;color:#3930b1}.btn.btn-terciary .icon path,.btn.btn-terciary .icon.caret path{fill:#3930b1}.btn.btn-terciary.show,.btn.btn-terciary:active,.btn.btn-terciary:hover{background-color:rgba(0,0,75,.1)!important;border-color:rgba(0,0,75,.05);box-shadow:none;color:#3930b1!important;transform:translate(0)}.btn.btn-terciary.show span,.btn.btn-terciary:active span,.btn.btn-terciary:hover span{color:#3930b1}.btn.btn-terciary.show .icon path,.btn.btn-terciary:active .icon path,.btn.btn-terciary:hover .icon path{fill:#3930b1}.btn.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(0,0,75,.5)}.btn.btn-terciary.danger,.btn.btn-terciary.danger i,.btn.btn-terciary.danger span{color:#e63137}.btn.btn-terciary.danger:active,.btn.btn-terciary.danger:hover{background-color:#fce7e8!important;border-color:#fce7e8!important;color:#e63137!important}.btn.btn-terciary.danger:active i,.btn.btn-terciary.danger:active span,.btn.btn-terciary.danger:hover i,.btn.btn-terciary.danger:hover span{color:#e63137}.btn.btn-outline{background-color:transparent;border:1px solid #3930b1;color:#3930b1}.btn.btn-outline .icon,.btn.btn-outline i,.btn.btn-outline span{color:#3930b1}.btn.btn-outline .icon path,.btn.btn-outline i path,.btn.btn-outline span path{fill:#3930b1}.btn.btn-outline:hover{background-color:#e9e7f9;border-color:#3930b1;box-shadow:none;color:#3930b1;transform:translate(0)}.btn.btn-outline:hover .icon,.btn.btn-outline:hover i,.btn.btn-outline:hover span{color:#3930b1}.btn.btn-outline:hover .icon path,.btn.btn-outline:hover i path,.btn.btn-outline:hover span path{fill:#3930b1}.btn.btn-outline.show,.btn.btn-outline:active{background-color:#3930b1!important;border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.show .icon,.btn.btn-outline.show i,.btn.btn-outline.show span,.btn.btn-outline:active .icon,.btn.btn-outline:active i,.btn.btn-outline:active span{color:#fff}.btn.btn-outline.show .icon path,.btn.btn-outline.show i path,.btn.btn-outline.show span path,.btn.btn-outline:active .icon path,.btn.btn-outline:active i path,.btn.btn-outline:active span path{fill:#fff}.btn.btn-outline.grey{border-color:#767676}.btn.btn-outline.grey .icon,.btn.btn-outline.grey i,.btn.btn-outline.grey span{color:#767676}.btn.btn-outline.grey .icon path,.btn.btn-outline.grey i path,.btn.btn-outline.grey span path{fill:#767676}.btn.btn-outline.grey:active,.btn.btn-outline.grey:hover{border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.grey:active .icon,.btn.btn-outline.grey:active i,.btn.btn-outline.grey:active span,.btn.btn-outline.grey:hover .icon,.btn.btn-outline.grey:hover i,.btn.btn-outline.grey:hover span{color:#fff}.btn.btn-outline.grey:active .icon path,.btn.btn-outline.grey:active i path,.btn.btn-outline.grey:active span path,.btn.btn-outline.grey:hover .icon path,.btn.btn-outline.grey:hover i path,.btn.btn-outline.grey:hover span path{fill:#fff}.btn.btn-outline.grey:active:hover,.btn.btn-outline.grey:hover:hover{background-color:#3930b1;border-color:#3930b1;color:#fff}.btn.btn-outline.grey.show{border-color:#3930b1}.btn.btn-outline.grey.show .icon,.btn.btn-outline.grey.show i,.btn.btn-outline.grey.show span{color:#fff}.btn.btn-outline.grey.show .icon path,.btn.btn-outline.grey.show i path,.btn.btn-outline.grey.show span path{fill:#fff}.btn.btn-outline.grey:active{border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.grey:active .icon,.btn.btn-outline.grey:active i,.btn.btn-outline.grey:active span{color:#fff}.btn.oauth{align-items:center;height:inherit;justify-content:flex-start;margin-bottom:1rem;max-width:300px;padding:.5rem 1.5rem;width:100%}.btn.oauth.google{align-items:center;background-color:#fff;border:1px solid #efefef;display:flex;justify-content:center}.btn.oauth.google span{color:#767676}.btn.oauth.google:hover{background-color:#fff;border:1px solid #efefef}.btn.oauth.linkedin{background-color:#1877f2;border:1px solid #1877f2}.btn.oauth.linkedin span{color:#fff}.btn.oauth.linkedin:hover{background-color:#1877f2;border:1px solid #1877f2}.btn.oauth.facebook{background-color:#0077b5;border:1px solid #0077b5}.btn.oauth.facebook span{color:#fff}.btn.oauth.facebook:hover{background-color:#0077b5;border:1px solid #0077b5}.btn.oauth.microsoft{background-color:#fff;border:1px solid #8c8c8c}.btn.oauth.microsoft span{color:#5e5e5e}.btn.oauth.microsoft:hover{background-color:#fff;border:1px solid #8c8c8c}.btn.oauth.apple{background-color:#000;border:1px solid #000}.btn.oauth.apple span{color:#fff}.btn.oauth.apple:hover{background-color:#000;border:1px solid #000}.btn.oauth .logo{height:1.5rem;margin-right:1rem;width:1.5rem}.btn.btn-input{align-items:flex-start;background-color:#fff;border:1px solid #767676;color:#767676;font-weight:400;height:auto;justify-content:space-between;min-height:3rem;padding:1em .75em}.btn.btn-input:active,.btn.btn-input:hover{background-color:#fff!important;box-shadow:none;color:#767676!important;transform:translate(0)}.btn.btn-input .highlighted{color:#091a12;font-weight:700}.btn.btn-input.not-validated{background-color:#fce7e8!important;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E\");background-position:right calc(.375em + .1875rem) center;background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem);border-color:#e63137;border-top-right-radius:0;padding-right:calc(1.5em + .75rem)}.btn.btn-input.not-validated:focus{border-color:#e63137;box-shadow:0 0 0 .25rem rgba(230,49,55,.25)}.btn.btn-input.not-validated:focus~.label{color:#e63137}.btn.btn-input.not-validated~.label{color:#e63137}.btn.btn-input .label{transition:transform .2s cubic-bezier(0,0,.2,1),color .2s cubic-bezier(0,0,.2,1),top .2s cubic-bezier(0,0,.2,1)}.btn.btn-input .wrapper{display:flex;flex-wrap:wrap;gap:.5rem}.btn.btn-input:has(.wrapper) .label{position:absolute;text-shadow:2px 2px 1px #fff,2px -2px 1px #fff,-2px 2px 1px #fff,-2px -2px 1px #fff,2px 0 1px #fff,0 2px 1px #fff,-2px 0 1px #fff,0 -2px 1px #fff;top:-.5em;transform:scale(.85) translateX(-.5em)}.btn.btn-input.show{border-color:#746ec8;box-shadow:0 0 0 2px #746ec8}.btn.btn-input.show .label{color:#746ec8}.btn:has(.avatar){padding:.375em}.btn:has(.avatar) .avatar{border-radius:100%;box-shadow:none;overflow:hidden;transition:box-shadow .15s ease-in-out}.btn:has(.avatar) .avatar img{height:2.375em;width:2.375em}.btn:has(.avatar) span{color:#767676;display:none;max-width:144px;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease-in-out;white-space:nowrap}@media (min-width:768px){.btn:has(.avatar) span{display:block}}.btn:has(.avatar).show{background-color:#e9e7f9;border-color:#e9e7f9}.btn:has(.avatar).show .avatar{box-shadow:0 0 0 3px #3930b1}.btn.btn-xs{border-radius:.1875rem;font-size:.875rem;height:2.375rem;line-height:1em;padding:.75em 1.375em}.btn.btn-xs:not(:has(span)){padding:.75em}.btn.btn-lg{border-radius:.5rem;font-size:1.25rem;height:3.75rem;line-height:1em;padding:1.25em 2.25em}.btn.btn-lg:not(:has(span)){padding:1.25em}.btn.btn-success{background-color:#5bbb84;border-color:#5bbb84}.btn.btn-success.btn-secondary{background-color:#d6eee0;border-color:#d6eee0;color:#31754e}.btn.btn-success.btn-secondary:active,.btn.btn-success.btn-secondary:first-child:active,.btn.btn-success.btn-secondary:hover{background-color:#5bbb84!important;border-color:#5bbb84!important;color:#fff!important}.btn.btn-success.btn-terciary{background-color:transparent;border-color:transparent;color:#5bbb84}.btn.btn-success.btn-terciary .icon path,.btn.btn-success.btn-terciary .icon.caret path{fill:#5bbb84}.btn.btn-success.btn-terciary.show,.btn.btn-success.btn-terciary:active,.btn.btn-success.btn-terciary:hover{background-color:#d6eee0!important;border-color:rgba(49,117,78,.05)!important;color:#31754e!important}.btn.btn-success.btn-terciary.show span,.btn.btn-success.btn-terciary:active span,.btn.btn-success.btn-terciary:hover span{color:#31754e}.btn.btn-success.btn-terciary.show .icon path,.btn.btn-success.btn-terciary:active .icon path,.btn.btn-success.btn-terciary:hover .icon path{fill:#31754e}.btn.btn-success.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(49,117,78,.5)}.btn.btn-success.btn-outline{background-color:transparent;border:1px solid #5bbb84;color:#31754e}.btn.btn-success.btn-outline .icon,.btn.btn-success.btn-outline i,.btn.btn-success.btn-outline span{color:#5bbb84}.btn.btn-success.btn-outline .icon path,.btn.btn-success.btn-outline i path,.btn.btn-success.btn-outline span path{fill:#5bbb84}.btn.btn-success.btn-outline:active,.btn.btn-success.btn-outline:hover{background-color:rgba(91,187,132,.2)!important;border-color:#5bbb84!important;color:#5bbb84}.btn.btn-success.btn-outline:active .icon,.btn.btn-success.btn-outline:active i,.btn.btn-success.btn-outline:active span,.btn.btn-success.btn-outline:hover .icon,.btn.btn-success.btn-outline:hover i,.btn.btn-success.btn-outline:hover span{color:#5bbb84}.btn.btn-success.btn-outline:active .icon path,.btn.btn-success.btn-outline:active i path,.btn.btn-success.btn-outline:active span path,.btn.btn-success.btn-outline:hover .icon path,.btn.btn-success.btn-outline:hover i path,.btn.btn-success.btn-outline:hover span path{fill:#5bbb84}.btn.btn-danger{background-color:#e63137;border-color:#e63137}.btn.btn-danger.btn-secondary{background-color:#fce7e8;border-color:#fce7e8;color:#e63137}.btn.btn-danger.btn-secondary:active,.btn.btn-danger.btn-secondary:first-child:active,.btn.btn-danger.btn-secondary:hover{background-color:#e63137!important;border-color:#e63137!important;color:#fff!important}.btn.btn-danger.btn-terciary{background-color:transparent;border-color:transparent;color:#e63137}.btn.btn-danger.btn-terciary .icon path,.btn.btn-danger.btn-terciary .icon.caret path{fill:#e63137}.btn.btn-danger.btn-terciary.show,.btn.btn-danger.btn-terciary:active,.btn.btn-danger.btn-terciary:hover{background-color:#fce7e8!important;border-color:#fce7e8!important;color:#e63137!important}.btn.btn-danger.btn-terciary.show span,.btn.btn-danger.btn-terciary:active span,.btn.btn-danger.btn-terciary:hover span{color:#e63137}.btn.btn-danger.btn-terciary.show .icon path,.btn.btn-danger.btn-terciary:active .icon path,.btn.btn-danger.btn-terciary:hover .icon path{fill:#e63137}.btn.btn-danger.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(230,49,55,.5)}.btn.btn-danger.btn-outline{background-color:transparent;border:1px solid #e63137;color:#e63137}.btn.btn-danger.btn-outline .icon,.btn.btn-danger.btn-outline i,.btn.btn-danger.btn-outline span{color:#e63137}.btn.btn-danger.btn-outline .icon path,.btn.btn-danger.btn-outline i path,.btn.btn-danger.btn-outline span path{fill:#e63137}.btn.btn-danger.btn-outline:active,.btn.btn-danger.btn-outline:hover{background-color:rgba(230,49,55,.2)!important;border-color:#e63137!important;color:#e63137}.btn.btn-danger.btn-outline:active .icon,.btn.btn-danger.btn-outline:active i,.btn.btn-danger.btn-outline:active span,.btn.btn-danger.btn-outline:hover .icon,.btn.btn-danger.btn-outline:hover i,.btn.btn-danger.btn-outline:hover span{color:#e63137}.btn.btn-danger.btn-outline:active .icon path,.btn.btn-danger.btn-outline:active i path,.btn.btn-danger.btn-outline:active span path,.btn.btn-danger.btn-outline:hover .icon path,.btn.btn-danger.btn-outline:hover i path,.btn.btn-danger.btn-outline:hover span path{fill:#e63137}.btn.btn-warning{background-color:#f3a905;border-color:#f3a905}.btn.btn-warning.btn-secondary{background-color:#feedc6;border-color:#feedc6;color:#aa5509}.btn.btn-warning.btn-secondary:active,.btn.btn-warning.btn-secondary:first-child:active,.btn.btn-warning.btn-secondary:hover{background-color:#f3a905!important;border-color:#f3a905!important;color:#fff!important}.btn.btn-warning.btn-terciary{background-color:transparent;border-color:transparent;color:#f3a905}.btn.btn-warning.btn-terciary .icon path,.btn.btn-warning.btn-terciary .icon.caret path{fill:#f3a905}.btn.btn-warning.btn-terciary.show,.btn.btn-warning.btn-terciary:active,.btn.btn-warning.btn-terciary:hover{background-color:#feedc6!important;border-color:rgba(170,85,9,.05)!important;color:#aa5509!important}.btn.btn-warning.btn-terciary.show span,.btn.btn-warning.btn-terciary:active span,.btn.btn-warning.btn-terciary:hover span{color:#aa5509}.btn.btn-warning.btn-terciary.show .icon path,.btn.btn-warning.btn-terciary:active .icon path,.btn.btn-warning.btn-terciary:hover .icon path{fill:#aa5509}.btn.btn-warning.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(170,85,9,.5)}.btn.btn-warning.btn-outline{background-color:transparent;border:1px solid #f3a905;color:#aa5509}.btn.btn-warning.btn-outline .icon,.btn.btn-warning.btn-outline i,.btn.btn-warning.btn-outline span{color:#f3a905}.btn.btn-warning.btn-outline .icon path,.btn.btn-warning.btn-outline i path,.btn.btn-warning.btn-outline span path{fill:#f3a905}.btn.btn-warning.btn-outline:active,.btn.btn-warning.btn-outline:hover{background-color:rgba(243,169,5,.2)!important;border-color:#f3a905!important;color:#f3a905}.btn.btn-warning.btn-outline:active .icon,.btn.btn-warning.btn-outline:active i,.btn.btn-warning.btn-outline:active span,.btn.btn-warning.btn-outline:hover .icon,.btn.btn-warning.btn-outline:hover i,.btn.btn-warning.btn-outline:hover span{color:#f3a905}.btn.btn-warning.btn-outline:active .icon path,.btn.btn-warning.btn-outline:active i path,.btn.btn-warning.btn-outline:active span path,.btn.btn-warning.btn-outline:hover .icon path,.btn.btn-warning.btn-outline:hover i path,.btn.btn-warning.btn-outline:hover span path{fill:#f3a905}.btn.btn-link{background-color:transparent;border-color:transparent;color:#24b8ce;font-weight:400;transition-duration:0}.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{background-color:transparent!important;border-color:transparent!important;box-shadow:none;color:#3930b1!important;transform:none}.btn.btn-link span{transition:none}.btn.btn-processing{pointer-events:none}.btn.btn-processing .fa-spin{animation-duration:.75s}.btn:disabled{opacity:.4;pointer-events:none}");const t=({variant:t,size:o,onClick:e,children:r,icon:b,iconPosition:a,className:i,style:c,processing:l})=>{let s=`btn ${i}`;"default"!==t&&(s+=` btn-${t}`),"md"!==o&&(s+=` btn-${o}`),"default"!==c&&(s+=` btn-${c}`),l&&(s+=" btn-processing");const d=l?n.createElement(n.Fragment,null,n.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),r&&n.createElement("span",null,r,"…")):b?"end"===a?n.createElement(n.Fragment,null,r&&n.createElement("span",null,r),n.createElement("i",{className:`fa-solid ${b}`,"aria-hidden":"true"})):n.createElement(n.Fragment,null,n.createElement("i",{className:`fa-solid ${b}`,"aria-hidden":"true"}),r&&n.createElement("span",null,r)):r&&n.createElement("span",null,r);return n.createElement("button",{className:s,onClick:e},d)};export{t as Button};
1
+ import e from"react";const n=({variant:n,size:a,onClick:t,children:i,icon:l,iconPosition:s,className:r,style:o,processing:c})=>{let d=`btn ${r}`;"default"!==n&&(d+=` btn-${n}`),"md"!==a&&(d+=` btn-${a}`),"default"!==o&&(d+=` btn-${o}`),c&&(d+=" btn-processing");const m=c?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),i&&e.createElement("span",null,i,"…")):l?"end"===s?e.createElement(e.Fragment,null,i&&e.createElement("span",null,i),e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"}),i&&e.createElement("span",null,i)):i&&e.createElement("span",null,i);return e.createElement("button",{className:d,onClick:t},m)};n.propTypes={variant:(void 0)(["primary","secondary","terciary","outline"]),size:(void 0)(["xs","md","lg"]),onClick:void 0,children:void 0,icon:void 0,iconPosition:(void 0)(["start","end"]),className:void 0,style:(void 0)(["default","success","danger","warning","link"]),processing:void 0},n.defaultProps={variant:"primary",size:"md",onClick:null,icon:null,iconPosition:"start",className:"",style:"default",processing:!1};export{n as Button};
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var n=require("react");!function(n,t){void 0===t&&(t={});var o=t.insertAt;if(n&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}(".btn{align-items:center;background-color:#3930b1;border-color:transparent;border-radius:.375rem;box-shadow:0 0 0 rgba(57,48,177,.35);color:#fff;display:flex;flex-direction:row;font-family:Roboto,sans-serif;font-size:1rem;font-weight:700;gap:.5rem;height:3rem;justify-content:center;line-height:1rem;padding:1em 1.5em;transform:translateY(0);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out,transform .15s ease-in-out,border-color .15s ease-in-out;white-space:nowrap;width:100%}@media (min-width:768px){.btn{width:auto}}.btn:hover{background-color:#3930b1;border-color:#3930b1;box-shadow:0 6px 16px rgba(57,48,177,.35);color:#fff;transform:translateY(-.146rem)}.btn:active,.btn:first-child:active{background-color:#3930b1!important;border-color:#3930b1!important;color:#fff!important}.btn:not(:has(span)){padding:1em;width:auto}.btn .icon,.btn i{height:1em;width:1em}.btn i,.btn span{transition:color .15s ease-in-out}.btn.btn-secondary{background-color:#e9e7f9;border-color:#e9e7f9;color:#3930b1}.btn.btn-secondary:hover{background-color:#3930b1;border-color:#3930b1;box-shadow:none;color:#fff;transform:translate(0)}.btn.btn-terciary{background-color:transparent;border-color:transparent;color:#3930b1}.btn.btn-terciary .icon path,.btn.btn-terciary .icon.caret path{fill:#3930b1}.btn.btn-terciary.show,.btn.btn-terciary:active,.btn.btn-terciary:hover{background-color:rgba(0,0,75,.1)!important;border-color:rgba(0,0,75,.05);box-shadow:none;color:#3930b1!important;transform:translate(0)}.btn.btn-terciary.show span,.btn.btn-terciary:active span,.btn.btn-terciary:hover span{color:#3930b1}.btn.btn-terciary.show .icon path,.btn.btn-terciary:active .icon path,.btn.btn-terciary:hover .icon path{fill:#3930b1}.btn.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(0,0,75,.5)}.btn.btn-terciary.danger,.btn.btn-terciary.danger i,.btn.btn-terciary.danger span{color:#e63137}.btn.btn-terciary.danger:active,.btn.btn-terciary.danger:hover{background-color:#fce7e8!important;border-color:#fce7e8!important;color:#e63137!important}.btn.btn-terciary.danger:active i,.btn.btn-terciary.danger:active span,.btn.btn-terciary.danger:hover i,.btn.btn-terciary.danger:hover span{color:#e63137}.btn.btn-outline{background-color:transparent;border:1px solid #3930b1;color:#3930b1}.btn.btn-outline .icon,.btn.btn-outline i,.btn.btn-outline span{color:#3930b1}.btn.btn-outline .icon path,.btn.btn-outline i path,.btn.btn-outline span path{fill:#3930b1}.btn.btn-outline:hover{background-color:#e9e7f9;border-color:#3930b1;box-shadow:none;color:#3930b1;transform:translate(0)}.btn.btn-outline:hover .icon,.btn.btn-outline:hover i,.btn.btn-outline:hover span{color:#3930b1}.btn.btn-outline:hover .icon path,.btn.btn-outline:hover i path,.btn.btn-outline:hover span path{fill:#3930b1}.btn.btn-outline.show,.btn.btn-outline:active{background-color:#3930b1!important;border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.show .icon,.btn.btn-outline.show i,.btn.btn-outline.show span,.btn.btn-outline:active .icon,.btn.btn-outline:active i,.btn.btn-outline:active span{color:#fff}.btn.btn-outline.show .icon path,.btn.btn-outline.show i path,.btn.btn-outline.show span path,.btn.btn-outline:active .icon path,.btn.btn-outline:active i path,.btn.btn-outline:active span path{fill:#fff}.btn.btn-outline.grey{border-color:#767676}.btn.btn-outline.grey .icon,.btn.btn-outline.grey i,.btn.btn-outline.grey span{color:#767676}.btn.btn-outline.grey .icon path,.btn.btn-outline.grey i path,.btn.btn-outline.grey span path{fill:#767676}.btn.btn-outline.grey:active,.btn.btn-outline.grey:hover{border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.grey:active .icon,.btn.btn-outline.grey:active i,.btn.btn-outline.grey:active span,.btn.btn-outline.grey:hover .icon,.btn.btn-outline.grey:hover i,.btn.btn-outline.grey:hover span{color:#fff}.btn.btn-outline.grey:active .icon path,.btn.btn-outline.grey:active i path,.btn.btn-outline.grey:active span path,.btn.btn-outline.grey:hover .icon path,.btn.btn-outline.grey:hover i path,.btn.btn-outline.grey:hover span path{fill:#fff}.btn.btn-outline.grey:active:hover,.btn.btn-outline.grey:hover:hover{background-color:#3930b1;border-color:#3930b1;color:#fff}.btn.btn-outline.grey.show{border-color:#3930b1}.btn.btn-outline.grey.show .icon,.btn.btn-outline.grey.show i,.btn.btn-outline.grey.show span{color:#fff}.btn.btn-outline.grey.show .icon path,.btn.btn-outline.grey.show i path,.btn.btn-outline.grey.show span path{fill:#fff}.btn.btn-outline.grey:active{border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.grey:active .icon,.btn.btn-outline.grey:active i,.btn.btn-outline.grey:active span{color:#fff}.btn.oauth{align-items:center;height:inherit;justify-content:flex-start;margin-bottom:1rem;max-width:300px;padding:.5rem 1.5rem;width:100%}.btn.oauth.google{align-items:center;background-color:#fff;border:1px solid #efefef;display:flex;justify-content:center}.btn.oauth.google span{color:#767676}.btn.oauth.google:hover{background-color:#fff;border:1px solid #efefef}.btn.oauth.linkedin{background-color:#1877f2;border:1px solid #1877f2}.btn.oauth.linkedin span{color:#fff}.btn.oauth.linkedin:hover{background-color:#1877f2;border:1px solid #1877f2}.btn.oauth.facebook{background-color:#0077b5;border:1px solid #0077b5}.btn.oauth.facebook span{color:#fff}.btn.oauth.facebook:hover{background-color:#0077b5;border:1px solid #0077b5}.btn.oauth.microsoft{background-color:#fff;border:1px solid #8c8c8c}.btn.oauth.microsoft span{color:#5e5e5e}.btn.oauth.microsoft:hover{background-color:#fff;border:1px solid #8c8c8c}.btn.oauth.apple{background-color:#000;border:1px solid #000}.btn.oauth.apple span{color:#fff}.btn.oauth.apple:hover{background-color:#000;border:1px solid #000}.btn.oauth .logo{height:1.5rem;margin-right:1rem;width:1.5rem}.btn.btn-input{align-items:flex-start;background-color:#fff;border:1px solid #767676;color:#767676;font-weight:400;height:auto;justify-content:space-between;min-height:3rem;padding:1em .75em}.btn.btn-input:active,.btn.btn-input:hover{background-color:#fff!important;box-shadow:none;color:#767676!important;transform:translate(0)}.btn.btn-input .highlighted{color:#091a12;font-weight:700}.btn.btn-input.not-validated{background-color:#fce7e8!important;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E\");background-position:right calc(.375em + .1875rem) center;background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem);border-color:#e63137;border-top-right-radius:0;padding-right:calc(1.5em + .75rem)}.btn.btn-input.not-validated:focus{border-color:#e63137;box-shadow:0 0 0 .25rem rgba(230,49,55,.25)}.btn.btn-input.not-validated:focus~.label{color:#e63137}.btn.btn-input.not-validated~.label{color:#e63137}.btn.btn-input .label{transition:transform .2s cubic-bezier(0,0,.2,1),color .2s cubic-bezier(0,0,.2,1),top .2s cubic-bezier(0,0,.2,1)}.btn.btn-input .wrapper{display:flex;flex-wrap:wrap;gap:.5rem}.btn.btn-input:has(.wrapper) .label{position:absolute;text-shadow:2px 2px 1px #fff,2px -2px 1px #fff,-2px 2px 1px #fff,-2px -2px 1px #fff,2px 0 1px #fff,0 2px 1px #fff,-2px 0 1px #fff,0 -2px 1px #fff;top:-.5em;transform:scale(.85) translateX(-.5em)}.btn.btn-input.show{border-color:#746ec8;box-shadow:0 0 0 2px #746ec8}.btn.btn-input.show .label{color:#746ec8}.btn:has(.avatar){padding:.375em}.btn:has(.avatar) .avatar{border-radius:100%;box-shadow:none;overflow:hidden;transition:box-shadow .15s ease-in-out}.btn:has(.avatar) .avatar img{height:2.375em;width:2.375em}.btn:has(.avatar) span{color:#767676;display:none;max-width:144px;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease-in-out;white-space:nowrap}@media (min-width:768px){.btn:has(.avatar) span{display:block}}.btn:has(.avatar).show{background-color:#e9e7f9;border-color:#e9e7f9}.btn:has(.avatar).show .avatar{box-shadow:0 0 0 3px #3930b1}.btn.btn-xs{border-radius:.1875rem;font-size:.875rem;height:2.375rem;line-height:1em;padding:.75em 1.375em}.btn.btn-xs:not(:has(span)){padding:.75em}.btn.btn-lg{border-radius:.5rem;font-size:1.25rem;height:3.75rem;line-height:1em;padding:1.25em 2.25em}.btn.btn-lg:not(:has(span)){padding:1.25em}.btn.btn-success{background-color:#5bbb84;border-color:#5bbb84}.btn.btn-success.btn-secondary{background-color:#d6eee0;border-color:#d6eee0;color:#31754e}.btn.btn-success.btn-secondary:active,.btn.btn-success.btn-secondary:first-child:active,.btn.btn-success.btn-secondary:hover{background-color:#5bbb84!important;border-color:#5bbb84!important;color:#fff!important}.btn.btn-success.btn-terciary{background-color:transparent;border-color:transparent;color:#5bbb84}.btn.btn-success.btn-terciary .icon path,.btn.btn-success.btn-terciary .icon.caret path{fill:#5bbb84}.btn.btn-success.btn-terciary.show,.btn.btn-success.btn-terciary:active,.btn.btn-success.btn-terciary:hover{background-color:#d6eee0!important;border-color:rgba(49,117,78,.05)!important;color:#31754e!important}.btn.btn-success.btn-terciary.show span,.btn.btn-success.btn-terciary:active span,.btn.btn-success.btn-terciary:hover span{color:#31754e}.btn.btn-success.btn-terciary.show .icon path,.btn.btn-success.btn-terciary:active .icon path,.btn.btn-success.btn-terciary:hover .icon path{fill:#31754e}.btn.btn-success.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(49,117,78,.5)}.btn.btn-success.btn-outline{background-color:transparent;border:1px solid #5bbb84;color:#31754e}.btn.btn-success.btn-outline .icon,.btn.btn-success.btn-outline i,.btn.btn-success.btn-outline span{color:#5bbb84}.btn.btn-success.btn-outline .icon path,.btn.btn-success.btn-outline i path,.btn.btn-success.btn-outline span path{fill:#5bbb84}.btn.btn-success.btn-outline:active,.btn.btn-success.btn-outline:hover{background-color:rgba(91,187,132,.2)!important;border-color:#5bbb84!important;color:#5bbb84}.btn.btn-success.btn-outline:active .icon,.btn.btn-success.btn-outline:active i,.btn.btn-success.btn-outline:active span,.btn.btn-success.btn-outline:hover .icon,.btn.btn-success.btn-outline:hover i,.btn.btn-success.btn-outline:hover span{color:#5bbb84}.btn.btn-success.btn-outline:active .icon path,.btn.btn-success.btn-outline:active i path,.btn.btn-success.btn-outline:active span path,.btn.btn-success.btn-outline:hover .icon path,.btn.btn-success.btn-outline:hover i path,.btn.btn-success.btn-outline:hover span path{fill:#5bbb84}.btn.btn-danger{background-color:#e63137;border-color:#e63137}.btn.btn-danger.btn-secondary{background-color:#fce7e8;border-color:#fce7e8;color:#e63137}.btn.btn-danger.btn-secondary:active,.btn.btn-danger.btn-secondary:first-child:active,.btn.btn-danger.btn-secondary:hover{background-color:#e63137!important;border-color:#e63137!important;color:#fff!important}.btn.btn-danger.btn-terciary{background-color:transparent;border-color:transparent;color:#e63137}.btn.btn-danger.btn-terciary .icon path,.btn.btn-danger.btn-terciary .icon.caret path{fill:#e63137}.btn.btn-danger.btn-terciary.show,.btn.btn-danger.btn-terciary:active,.btn.btn-danger.btn-terciary:hover{background-color:#fce7e8!important;border-color:#fce7e8!important;color:#e63137!important}.btn.btn-danger.btn-terciary.show span,.btn.btn-danger.btn-terciary:active span,.btn.btn-danger.btn-terciary:hover span{color:#e63137}.btn.btn-danger.btn-terciary.show .icon path,.btn.btn-danger.btn-terciary:active .icon path,.btn.btn-danger.btn-terciary:hover .icon path{fill:#e63137}.btn.btn-danger.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(230,49,55,.5)}.btn.btn-danger.btn-outline{background-color:transparent;border:1px solid #e63137;color:#e63137}.btn.btn-danger.btn-outline .icon,.btn.btn-danger.btn-outline i,.btn.btn-danger.btn-outline span{color:#e63137}.btn.btn-danger.btn-outline .icon path,.btn.btn-danger.btn-outline i path,.btn.btn-danger.btn-outline span path{fill:#e63137}.btn.btn-danger.btn-outline:active,.btn.btn-danger.btn-outline:hover{background-color:rgba(230,49,55,.2)!important;border-color:#e63137!important;color:#e63137}.btn.btn-danger.btn-outline:active .icon,.btn.btn-danger.btn-outline:active i,.btn.btn-danger.btn-outline:active span,.btn.btn-danger.btn-outline:hover .icon,.btn.btn-danger.btn-outline:hover i,.btn.btn-danger.btn-outline:hover span{color:#e63137}.btn.btn-danger.btn-outline:active .icon path,.btn.btn-danger.btn-outline:active i path,.btn.btn-danger.btn-outline:active span path,.btn.btn-danger.btn-outline:hover .icon path,.btn.btn-danger.btn-outline:hover i path,.btn.btn-danger.btn-outline:hover span path{fill:#e63137}.btn.btn-warning{background-color:#f3a905;border-color:#f3a905}.btn.btn-warning.btn-secondary{background-color:#feedc6;border-color:#feedc6;color:#aa5509}.btn.btn-warning.btn-secondary:active,.btn.btn-warning.btn-secondary:first-child:active,.btn.btn-warning.btn-secondary:hover{background-color:#f3a905!important;border-color:#f3a905!important;color:#fff!important}.btn.btn-warning.btn-terciary{background-color:transparent;border-color:transparent;color:#f3a905}.btn.btn-warning.btn-terciary .icon path,.btn.btn-warning.btn-terciary .icon.caret path{fill:#f3a905}.btn.btn-warning.btn-terciary.show,.btn.btn-warning.btn-terciary:active,.btn.btn-warning.btn-terciary:hover{background-color:#feedc6!important;border-color:rgba(170,85,9,.05)!important;color:#aa5509!important}.btn.btn-warning.btn-terciary.show span,.btn.btn-warning.btn-terciary:active span,.btn.btn-warning.btn-terciary:hover span{color:#aa5509}.btn.btn-warning.btn-terciary.show .icon path,.btn.btn-warning.btn-terciary:active .icon path,.btn.btn-warning.btn-terciary:hover .icon path{fill:#aa5509}.btn.btn-warning.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(170,85,9,.5)}.btn.btn-warning.btn-outline{background-color:transparent;border:1px solid #f3a905;color:#aa5509}.btn.btn-warning.btn-outline .icon,.btn.btn-warning.btn-outline i,.btn.btn-warning.btn-outline span{color:#f3a905}.btn.btn-warning.btn-outline .icon path,.btn.btn-warning.btn-outline i path,.btn.btn-warning.btn-outline span path{fill:#f3a905}.btn.btn-warning.btn-outline:active,.btn.btn-warning.btn-outline:hover{background-color:rgba(243,169,5,.2)!important;border-color:#f3a905!important;color:#f3a905}.btn.btn-warning.btn-outline:active .icon,.btn.btn-warning.btn-outline:active i,.btn.btn-warning.btn-outline:active span,.btn.btn-warning.btn-outline:hover .icon,.btn.btn-warning.btn-outline:hover i,.btn.btn-warning.btn-outline:hover span{color:#f3a905}.btn.btn-warning.btn-outline:active .icon path,.btn.btn-warning.btn-outline:active i path,.btn.btn-warning.btn-outline:active span path,.btn.btn-warning.btn-outline:hover .icon path,.btn.btn-warning.btn-outline:hover i path,.btn.btn-warning.btn-outline:hover span path{fill:#f3a905}.btn.btn-link{background-color:transparent;border-color:transparent;color:#24b8ce;font-weight:400;transition-duration:0}.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{background-color:transparent!important;border-color:transparent!important;box-shadow:none;color:#3930b1!important;transform:none}.btn.btn-link span{transition:none}.btn.btn-processing{pointer-events:none}.btn.btn-processing .fa-spin{animation-duration:.75s}.btn:disabled{opacity:.4;pointer-events:none}");exports.Button=({variant:t,size:o,onClick:e,children:r,icon:b,iconPosition:a,className:i,style:c,processing:l})=>{let s=`btn ${i}`;"default"!==t&&(s+=` btn-${t}`),"md"!==o&&(s+=` btn-${o}`),"default"!==c&&(s+=` btn-${c}`),l&&(s+=" btn-processing");const d=l?n.createElement(n.Fragment,null,n.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),r&&n.createElement("span",null,r,"…")):b?"end"===a?n.createElement(n.Fragment,null,r&&n.createElement("span",null,r),n.createElement("i",{className:`fa-solid ${b}`,"aria-hidden":"true"})):n.createElement(n.Fragment,null,n.createElement("i",{className:`fa-solid ${b}`,"aria-hidden":"true"}),r&&n.createElement("span",null,r)):r&&n.createElement("span",null,r);return n.createElement("button",{className:s,onClick:e},d)};
1
+ "use strict";var e=require("react");const n=({variant:n,size:t,onClick:a,children:i,icon:l,iconPosition:s,className:r,style:c,processing:o})=>{let d=`btn ${r}`;"default"!==n&&(d+=` btn-${n}`),"md"!==t&&(d+=` btn-${t}`),"default"!==c&&(d+=` btn-${c}`),o&&(d+=" btn-processing");const m=o?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),i&&e.createElement("span",null,i,"…")):l?"end"===s?e.createElement(e.Fragment,null,i&&e.createElement("span",null,i),e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"}),i&&e.createElement("span",null,i)):i&&e.createElement("span",null,i);return e.createElement("button",{className:d,onClick:a},m)};n.propTypes={variant:(void 0)(["primary","secondary","terciary","outline"]),size:(void 0)(["xs","md","lg"]),onClick:void 0,children:void 0,icon:void 0,iconPosition:(void 0)(["start","end"]),className:void 0,style:(void 0)(["default","success","danger","warning","link"]),processing:void 0},n.defaultProps={variant:"primary",size:"md",onClick:null,icon:null,iconPosition:"start",className:"",style:"default",processing:!1},exports.Button=n;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "groovinads-ui",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.es.js",
6
6
  "repository": "git@bitbucket.org:groovinads/react-components.git",
@@ -1,20 +1,5 @@
1
- /* import React from 'react';
2
-
3
- //STYLES
4
- //import 'https://brands.groovinads.com/css/scss/components/_buttons.scss';
5
-
6
- const Button = ({ children, ...props }) => {
7
- return <button {...props}>{children}</button>;
8
- }
9
-
10
- export default Button;
11
- */
12
-
13
1
  import React from 'react';
14
- // import PropTypes from 'prop-types';
15
-
16
- // STYLES
17
- import '../../scss/components/_buttons.scss';
2
+ import * as PropTypes from 'prop-types';
18
3
 
19
4
  const Button = ({
20
5
  variant,
@@ -78,27 +63,27 @@ const Button = ({
78
63
  );
79
64
  };
80
65
 
81
- // Button.propTypes = {
82
- // variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
83
- // size: PropTypes.oneOf(['xs', 'md', 'lg']),
84
- // onClick: PropTypes.func,
85
- // children: PropTypes.node,
86
- // icon: PropTypes.node,
87
- // iconPosition: PropTypes.oneOf(['start', 'end']),
88
- // className: PropTypes.string,
89
- // style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
90
- // processing: PropTypes.bool,
91
- // };
66
+ Button.propTypes = {
67
+ variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
68
+ size: PropTypes.oneOf(['xs', 'md', 'lg']),
69
+ onClick: PropTypes.func,
70
+ children: PropTypes.node,
71
+ icon: PropTypes.node,
72
+ iconPosition: PropTypes.oneOf(['start', 'end']),
73
+ className: PropTypes.string,
74
+ style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
75
+ processing: PropTypes.bool,
76
+ };
92
77
 
93
- // Button.defaultProps = {
94
- // variant: 'primary',
95
- // size: 'md',
96
- // onClick: null,
97
- // icon: null,
98
- // iconPosition: 'start',
99
- // className: '',
100
- // style: 'default',
101
- // processing: false,
102
- // };
78
+ Button.defaultProps = {
79
+ variant: 'primary',
80
+ size: 'md',
81
+ onClick: null,
82
+ icon: null,
83
+ iconPosition: 'start',
84
+ className: '',
85
+ style: 'default',
86
+ processing: false,
87
+ };
103
88
 
104
89
  export default Button;
@@ -1,6 +0,0 @@
1
- // Borders radius
2
- $border-radius-xs: 0.1875rem;
3
- $border-radius-sm: 0.375rem;
4
- $border-radius-md: 0.5rem;
5
- $border-radius-lg: 0.75rem;
6
- $border-radius-xl: 1rem;
@@ -1,33 +0,0 @@
1
- // Groovinads colors
2
- $ga-brand-dark: #00004b;
3
- $ga-brand-midtone: #3930b1;
4
- $ga-brand-light: #24b8ce;
5
-
6
- // Neutrals
7
- $grey-dark: #767676;
8
- $grey-light: #efefef;
9
- $white: #ffffff;
10
- $black: #000000;
11
-
12
- // Secondary colors
13
- $secondary-blue-light: #2d85e5;
14
- $secondary-blue: #12355b;
15
- $secondary-violet-light: #9191db;
16
- $secondary-violet: #746ec8;
17
- $secondary-dark: #091a12;
18
-
19
- // Messaging
20
- $error: #e63137;
21
- $warning: #f3a905;
22
- $safeWarning: #aa5509;
23
- $warning-bg: #FEEDC6;
24
- $success: #5bbb84;
25
- $safeSuccess: #31754e;
26
- $success-bg: #D6EEE0;
27
-
28
- // Brands
29
- $linkedin-brand: #1877f2;
30
- $facebook-brand: #0077B5;
31
- $microsoft-font: #5e5e5e;
32
- $microsoft-border: #8c8c8c;
33
- $google-brand: #70757a;
@@ -1,8 +0,0 @@
1
- // Fonts family
2
- $font-family-primary: 'Baloo 2';
3
- $font-family-secondary: 'Roboto';
4
- $font-family-code: 'Roboto Mono';
5
- $font-family-icon: 'Font Awesome 6 Pro';
6
-
7
- // Font size
8
- $font-size: 16px;
@@ -1,7 +0,0 @@
1
- @forward 'variables';
2
- @forward 'fonts';
3
- @forward 'borders-radius';
4
- @forward 'media-queries';
5
- @forward 'colors';
6
- @forward 'mixins';
7
- @forward 'spinner-duration';
@@ -1,6 +0,0 @@
1
- // Media Queries
2
- $xxl: '(min-width: 1400px)';
3
- $xl: '(min-width: 1200px)';
4
- $lg: '(min-width: 992px)';
5
- $md: '(min-width: 768px)';
6
- $sm: '(min-width: 576px)';
@@ -1,143 +0,0 @@
1
- @use 'fonts' as f;
2
- @use 'borders-radius' as br;
3
-
4
- @mixin font-family($font_family, $font_size, $font_color, $font_weight) {
5
- @if $font_family == f.$font-family-primary {
6
- font-family: f.$font-family-primary, sans-serif;
7
- }
8
-
9
- @if $font_family == f.$font-family-secondary {
10
- font-family: f.$font-family-secondary, sans-serif;
11
- }
12
-
13
- @if $font_family == f.$font-family-code {
14
- font-family: f.$font-family-code, monospace;
15
- }
16
-
17
- font: {
18
- size: $font_size;
19
- weight: $font_weight;
20
- }
21
- color: $font_color;
22
- }
23
-
24
- @mixin transition($properties, $duration, $easing) {
25
- $value: ();
26
- @each $property in $properties {
27
- @if length($value) > 0 {
28
- $value: append($value, unquote(',') #{$property} $duration $easing);
29
- } @else {
30
- $value: append($value, #{$property} $duration $easing);
31
- }
32
- }
33
- transition: $value;
34
- }
35
-
36
- @mixin respond-to($media) {
37
- @media #{$media} {
38
- @content;
39
- }
40
- }
41
-
42
- @mixin shadow($depth, $color, $direction) {
43
- @if $depth == 1 {
44
- @if $direction != x {
45
- box-shadow: 0px 1px 1px rgba($color, 0.25),
46
- 0px 1px 3px 1px rgba($color, 0.2);
47
- } @else {
48
- box-shadow: 1px 0px 1px rgba($color, 0.25),
49
- 1px 0px 3px 1px rgba($color, 0.2);
50
- }
51
- }
52
-
53
- @if $depth == 2 {
54
- @if $direction != x {
55
- box-shadow: 0 10px 20px rgba($color, 0.19), 0px 6px 6px rgba($color, 0.23);
56
- } @else {
57
- box-shadow: 10px 0px 20px rgba($color, 0.19),
58
- 6px 0px 6px rgba($color, 0.23);
59
- }
60
- }
61
-
62
- @if $depth == 3 {
63
- @if $direction != x {
64
- box-shadow: 0px 14px 28px rgba($color, 0.25),
65
- 0px 10px 10px rgba($color, 0.22);
66
- } @else {
67
- box-shadow: 14px 0px 28px rgba($color, 0.25),
68
- 10px 0px 10px rgba($color, 0.22);
69
- }
70
- }
71
-
72
- @if $depth == 4 {
73
- @if $direction != x {
74
- box-shadow: 0px 19px 38px rgba($color, 0.3),
75
- 0px 15px 12px rgba($color, 0.22);
76
- } @else {
77
- box-shadow: 19px 0px 38px rgba($color, 0.3),
78
- 15px 0px 12px rgba($color, 0.22);
79
- }
80
- }
81
- }
82
-
83
- @mixin scrollbars(
84
- $size,
85
- $foreground-color,
86
- $background-color: mix($foreground-color, white, 50%)
87
- ) {
88
- // For Google Chrome
89
- &::-webkit-scrollbar {
90
- width: $size;
91
- height: $size;
92
- }
93
-
94
- &::-webkit-scrollbar-thumb {
95
- background: $foreground-color;
96
- border-radius: br.$border-radius-sm;
97
- @include transition(background-color, 0.15s, ease-in-out);
98
-
99
- &:hover {
100
- background-color: mix($foreground-color, black, 75%);
101
- }
102
- }
103
-
104
- &::-webkit-scrollbar-track {
105
- background: $background-color;
106
- padding: 10px;
107
- }
108
-
109
- // For Internet Explorer
110
- & {
111
- scrollbar-face-color: $foreground-color;
112
- scrollbar-track-color: $background-color;
113
- }
114
- }
115
-
116
- @mixin multipleEllipsisText($lineCount, $maxHeight, $lineHeight) {
117
- max-height: $maxHeight;
118
- -webkit-line-clamp: $lineCount;
119
- -moz-line-clamp: $lineCount;
120
- -ms-line-clamp: $lineCount;
121
- line-clamp: $lineCount;
122
- text-overflow: ellipsis;
123
- overflow: hidden;
124
- line-height: $lineHeight;
125
- display: -webkit-box;
126
- -webkit-box-orient: vertical;
127
- word-break: break-word;
128
- }
129
-
130
- @mixin simpleEllipsisText {
131
- overflow: hidden;
132
- white-space: nowrap;
133
- text-overflow: ellipsis;
134
- }
135
-
136
- @mixin setLabelTo($properties) {
137
- transform: nth($properties, 1) nth($properties, 2) nth($properties, 3);
138
- padding: nth($properties, 4) nth($properties, 5);
139
- }
140
-
141
- @function commonTextShadow($color) {
142
- @return 2px 2px 1px $color, 2px -2px 1px $color, -2px 2px 1px $color, -2px -2px 1px $color, 2px 0px 1px $color, 0px 2px 1px $color, -2px 0px 1px $color, 0px -2px 1px $color;
143
- }
@@ -1 +0,0 @@
1
- $spinner-duration: 0.75s;
@@ -1,2 +0,0 @@
1
- // App logo
2
- $logo-width: 114px;
@@ -1,10 +0,0 @@
1
- @keyframes alertToUp {
2
- 0% {
3
- transform: translate3d(0,-100%,0);
4
- visibility: visible;
5
- }
6
-
7
- to {
8
- transform: translateZ(0);
9
- }
10
- }
@@ -1,17 +0,0 @@
1
- @keyframes aurora {
2
- 0% {
3
- background-position: left top;
4
- }
5
- 25% {
6
- background-position: right top;
7
- }
8
- 50% {
9
- background-position: right bottom;
10
- }
11
- 75% {
12
- background-position: left bottom;
13
- }
14
- 100% {
15
- background-position: left top;
16
- }
17
- }
@@ -1,15 +0,0 @@
1
- //Use
2
- @use '../abstracts/helpers' as h;
3
-
4
- @keyframes colors {
5
- 0%,
6
- 100% {
7
- stroke: h.$secondary-blue-light;
8
- }
9
- 25% {
10
- stroke: h.$ga-brand-light;
11
- }
12
- 75% {
13
- stroke: h.$ga-brand-midtone;
14
- }
15
- }
@@ -1,13 +0,0 @@
1
- @keyframes dash {
2
- 0% {
3
- stroke-dashoffset: 187;
4
- }
5
- 50% {
6
- stroke-dashoffset: 46.75;
7
- transform: rotate(135deg);
8
- }
9
- 100% {
10
- stroke-dashoffset: 187;
11
- transform: rotate(450deg);
12
- }
13
- }
@@ -1,10 +0,0 @@
1
- @keyframes fadeCopyFromLeft {
2
- 0% {
3
- opacity: 0;
4
- transform: translateX(0) translateY(-50%);
5
- }
6
- 100% {
7
- opacity: 1;
8
- transform: translateX(0) translateY(20%);
9
- }
10
- }
@@ -1,8 +0,0 @@
1
- @keyframes goAndBack {
2
- 0% {
3
- transform: translateX(-100%);
4
- }
5
- 100% {
6
- transform: translate(100%);
7
- }
8
- }
@@ -1,10 +0,0 @@
1
- @keyframes inputUp {
2
- 0% {
3
- opacity: 0;
4
- transform: translateY(30%);
5
- }
6
- 100% {
7
- opacity: 1;
8
- transform: translateY(0);
9
- }
10
- }
@@ -1,22 +0,0 @@
1
- @keyframes shakeIt {
2
- 10%,
3
- 90% {
4
- transform: translate3d(-2px, 0, 0);
5
- }
6
-
7
- 20%,
8
- 80% {
9
- transform: translate3d(4px, 0, 0);
10
- }
11
-
12
- 30%,
13
- 50%,
14
- 70% {
15
- transform: translate3d(-6px, 0, 0);
16
- }
17
-
18
- 40%,
19
- 60% {
20
- transform: translate3d(6px, 0, 0);
21
- }
22
- }
@@ -1,8 +0,0 @@
1
- @keyframes showIn {
2
- 0% {
3
- opacity: 0;
4
- }
5
- 100% {
6
- opacity: 1;
7
- }
8
- }
@@ -1,12 +0,0 @@
1
- // Animations
2
- @keyframes showMenu {
3
- 0% {
4
- opacity: 0;
5
- max-height: 0;
6
- }
7
-
8
- 100% {
9
- max-height: 50vh;
10
- opacity: 1;
11
- }
12
- }
@@ -1,9 +0,0 @@
1
- @keyframes statusLine {
2
- 72.5% {
3
- opacity: 0;
4
- }
5
-
6
- to {
7
- stroke-dashoffset: 0;
8
- }
9
- }
@@ -1,8 +0,0 @@
1
- @keyframes toDown {
2
- 0% {
3
- transform: translateY(-100%);
4
- }
5
- 100% {
6
- transform: translateY(0%);
7
- }
8
- }
@@ -1,10 +0,0 @@
1
- @keyframes toastFromLeft {
2
- 0% {
3
- transform: translate3d(-100%, 0, 0) scale(0);
4
- opacity: .5;
5
- }
6
- 100% {
7
- transform: translate3d(0, 0, 0) scale(1);
8
- opacity: 1;
9
- }
10
- }
@@ -1,10 +0,0 @@
1
- @keyframes toastFromRight {
2
- 0% {
3
- transform: translate3d(100%, 0, 0) scale(0);
4
- opacity: .5;
5
- }
6
- 100% {
7
- transform: translate3d(0, 0, 0) scale(1);
8
- opacity: 1;
9
- }
10
- }
@@ -1,14 +0,0 @@
1
- // Use
2
- @use '../abstracts/helpers' as h;
3
-
4
- body {
5
- background-color: h.$grey-light;
6
- @include h.scrollbars(0.5rem, transparent, transparent);
7
-
8
- &.modal-open {
9
- overflow: auto !important;
10
- &[style] {
11
- padding-right: 0px !important;
12
- }
13
- }
14
- }