UNPKG

@cavilha/rating

Version:

A component that serve to indicate an assessment status, contemplating different viewing options.

2 lines (1 loc) 10.7 kB
import e from"react";import a from"@cavilha/text";import t from"@cavilha/box";import i from"@cavilha/flex";import{styled as M}from"@cavilha/theme";import{Container as r,Row as n,Col as l}from"@cavilha/layout";import*as o from"@radix-ui/react-progress";import c from"@cavilha/icon";import{faStar as N}from"@fortawesome/pro-solid-svg-icons";var s=80,g=M(t,{display:"inline-flex",height:"".concat(16,"px"),position:"relative",width:"".concat(s,"px"),backgroundColor:"transparent",mt:"$letterSpacings$large",ml:"$letterSpacings$large","&::before":{backgroundRepeat:"repeat-x",backgroundSize:"".concat(16,"px"),content:"",display:"block",height:"".concat(16,"px"),left:"$none",position:"absolute",right:"$none",width:"".concat(s,"px")},"& span":{display:"block",textIndent:"-10000px",marginRight:"$small2",height:"".concat(16,"px"),maxWidth:"".concat(s,"px"),position:"absolute",overflow:"hidden","&::before":{textAlign:"center",backgroundRepeat:"repeat-x",backgroundSize:"".concat(16,"px"),bottom:"$none",content:"",display:"block",height:"".concat(16,"px"),left:"$none",position:"absolute",right:"$none",textIndent:"10000px",top:"$none"}},variants:{disabled:{true:{"&::before":{backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNiAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzY1NjIgMS4yNDIxOUwxMC41NzAzIDQuODc4OTFMMTQuNTYyNSA1LjQ1MzEyQzE1LjI3MzQgNS41NjI1IDE1LjU3NDIgNi40Mzc1IDE1LjA1NDcgNi45NTcwM0wxMi4xNTYyIDkuNzQ2MDlMMTIuODM5OCAxMy43MTA5QzEyLjk0OTIgMTQuNDIxOSAxMi4yMTA5IDE0Ljk2ODggMTEuNTU0NyAxNC42NDA2TDggMTIuNzgxMkw0LjQxNzk3IDE0LjY2OEMzLjc2MTcyIDE0Ljk5NjEgMy4wMjM0NCAxNC40NDkyIDMuMTMyODEgMTMuNzM4M0wzLjgxNjQxIDkuNzczNDRMMC45MTc5NjkgNi45NTcwM0MwLjM5ODQzOCA2LjQzNzUgMC42OTkyMTkgNS41NjI1IDEuNDEwMTYgNS40NTMxMkw1LjQwMjM0IDQuODc4OTFMNy4yMDcwMyAxLjI0MjE5QzcuNTM1MTYgMC41ODU5MzggOC40NjQ4NCAwLjYxMzI4MSA4Ljc2NTYyIDEuMjQyMTlaIiBmaWxsPSIjQ0NDQ0NDIi8+Cjwvc3ZnPgo=')",marginRight:"$small1"},"& span":{"&::before":{backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNiAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzY1NjIgMS4yNDIxOUwxMC41NzAzIDQuODc4OTFMMTQuNTYyNSA1LjQ1MzEyQzE1LjI3MzQgNS41NjI1IDE1LjU3NDIgNi40Mzc1IDE1LjA1NDcgNi45NTcwM0wxMi4xNTYyIDkuNzQ2MDlMMTIuODM5OCAxMy43MTA5QzEyLjk0OTIgMTQuNDIxOSAxMi4yMTA5IDE0Ljk2ODggMTEuNTU0NyAxNC42NDA2TDggMTIuNzgxMkw0LjQxNzk3IDE0LjY2OEMzLjc2MTcyIDE0Ljk5NjEgMy4wMjM0NCAxNC40NDkyIDMuMTMyODEgMTMuNzM4M0wzLjgxNjQxIDkuNzczNDRMMC45MTc5NjkgNi45NTcwM0MwLjM5ODQzOCA2LjQzNzUgMC42OTkyMTkgNS41NjI1IDEuNDEwMTYgNS40NTMxMkw1LjQwMjM0IDQuODc4OTFMNy4yMDcwMyAxLjI0MjE5QzcuNTM1MTYgMC41ODU5MzggOC40NjQ4NCAwLjYxMzI4MSA4Ljc2NTYyIDEuMjQyMTlaIiBmaWxsPSIjQ0NDQ0NDIi8+Cjwvc3ZnPgo=')"}}},false:{"&::before":{backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNiAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjU2MjUgNS40NTMxMkwxMC41NzAzIDQuODc4OTFMOC43NjU2MiAxLjI0MjE5QzguNjAxNTYgMC45MTQwNjIgOC4zMDA3OCAwLjc1IDcuOTcyNjYgMC43NUM3LjY3MTg4IDAuNzUgNy4zNzEwOSAwLjkxNDA2MiA3LjIwNzAzIDEuMjQyMTlMNS40MDIzNCA0Ljg3ODkxTDEuNDEwMTYgNS40NTMxMkMwLjY5OTIxOSA1LjU2MjUgMC4zOTg0MzggNi40Mzc1IDAuOTE3OTY5IDYuOTU3MDNMMy44MTY0MSA5Ljc0NjA5TDMuMTMyODEgMTMuNzM4M0MzLjA1MDc4IDE0LjMxMjUgMy40ODgyOCAxNC43NSA0LjAwNzgxIDE0Ljc1QzQuMTQ0NTMgMTQuNzUgNC4yODEyNSAxNC43MjI3IDQuNDE3OTcgMTQuNjY4TDggMTIuNzgxMkwxMS41NTQ3IDE0LjY2OEMxMS42OTE0IDE0LjcyMjcgMTEuODI4MSAxNC43NzczIDExLjk2NDggMTQuNzc3M0MxMi40ODQ0IDE0Ljc3NzMgMTIuOTIxOSAxNC4zMTI1IDEyLjgzOTggMTMuNzM4M0wxMi4xNTYyIDkuNzczNDRMMTUuMDU0NyA2Ljk4NDM4QzE1LjU3NDIgNi40Mzc1IDE1LjI3MzQgNS41NjI1IDE0LjU2MjUgNS40NTMxMlpNMTAuNzg5MSA5LjUyNzM0TDExLjM5MDYgMTMuMDgyTDguMTkxNDEgMTEuNDE0MUM4LjA1NDY5IDExLjMzMiA3LjkxNzk3IDExLjMzMiA3Ljc4MTI1IDExLjQxNDFMNC41ODIwMyAxMy4wODJMNS4xODM1OSA5LjUyNzM0QzUuMjEwOTQgOS4zOTA2MiA1LjE1NjI1IDkuMjUzOTEgNS4wNzQyMiA5LjE0NDUzTDIuNDc2NTYgNi42Mjg5MUw2LjA1ODU5IDYuMTA5MzhDNi4xOTUzMSA2LjA4MjAzIDYuMzMyMDMgNiA2LjM4NjcyIDUuODYzMjhMOCAyLjYwOTM4TDkuNTg1OTQgNS44NjMyOEM5LjY0MDYyIDYgOS43NzczNCA2LjA4MjAzIDkuOTE0MDYgNi4xMDkzOEwxMy40OTYxIDYuNjI4OTFMMTAuODk4NCA5LjE0NDUzQzEwLjgxNjQgOS4yNTM5MSAxMC43NjE3IDkuMzkwNjIgMTAuNzg5MSA5LjUyNzM0WiIgZmlsbD0iI0ZGQUE1MCIvPgo8L3N2Zz4K')",marginRight:"$small2"},"& span":{"&::before":{backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNiAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzY1NjIgMS4yNDIxOUwxMC41NzAzIDQuODc4OTFMMTQuNTYyNSA1LjQ1MzEyQzE1LjI3MzQgNS41NjI1IDE1LjU3NDIgNi40Mzc1IDE1LjA1NDcgNi45NTcwM0wxMi4xNTYyIDkuNzQ2MDlMMTIuODM5OCAxMy43MTA5QzEyLjk0OTIgMTQuNDIxOSAxMi4yMTA5IDE0Ljk2ODggMTEuNTU0NyAxNC42NDA2TDggMTIuNzgxMkw0LjQxNzk3IDE0LjY2OEMzLjc2MTcyIDE0Ljk5NjEgMy4wMjM0NCAxNC40NDkyIDMuMTMyODEgMTMuNzM4M0wzLjgxNjQxIDkuNzczNDRMMC45MTc5NjkgNi45NTcwM0MwLjM5ODQzOCA2LjQzNzUgMC42OTkyMTkgNS41NjI1IDEuNDEwMTYgNS40NTMxMkw1LjQwMjM0IDQuODc4OTFMNy4yMDcwMyAxLjI0MjE5QzcuNTM1MTYgMC41ODU5MzggOC40NjQ4NCAwLjYxMzI4MSA4Ljc2NTYyIDEuMjQyMTlaIiBmaWxsPSIjRkZBQTUwIi8+Cjwvc3ZnPgo=')"}}}}},defaultVariants:{disabled:!1}}),u=M(t,{variants:{active:{true:{"& .cav-scale-container":{border:"1px solid $neutral2",borderRadius:"$radii$small",p:"$none $small1"},"& span":{color:"$secondary4 !important"},"& .cav-rating-box":{backgroundColor:"$secondary4 !important","& span":{color:"$alwaysWhite !important"}},"&:hover .cav-rating-box":{"& span":{color:"$alwaysWhite !important"}},"& div > div > i > svg path":{fill:"$secondary4"},"& div > div > div > div":{backgroundColor:"$secondary4"}},false:{"& span":{color:"$neutral5"},"& .cav-rating-box":{backgroundColor:"$neutral2","& span":{color:"$neutral5"},"&:hover":{color:"$alwaysWhite"}}}}}}),d=M(i,{cursor:"pointer",minWidth:"250px",maxWidth:"346px",justifyContent:"center",border:"1px solid transparent","& div > i > svg path":{fill:"$primary1"},variants:{active:{true:{border:"1px solid $neutral2",borderRadius:"$radii$small","& div > i > svg path":{fill:"$secondary4"},"& div:nth-child(3) > div > div":{backgroundColor:"$secondary4"}}},disabled:{true:{"& span":{color:"$neutral3"},"& div > i > svg path":{fill:"$neutral3"}},false:{"&:hover":{border:"1px solid $neutral2",borderRadius:"$radii$small","& div > i > svg path":{fill:"$secondary4"},"& div:nth-child(3) > div > div":{backgroundColor:"$secondary4"}}}}},"& span":{"@sm":{fontSize:"$bodyXSmall"},"@md":{fontSize:"$bodySmall"},"@lg":{fontSize:"$bodyMedium"}}}),D=M(o.Root,{background:"$neutral2",mt:"$small2",position:"relative",overflow:"hidden",borderRadius:"$radii$small",height:8,minWidth:"100%"}),m=M(o.Indicator,{boxSizing:"border-box",position:"absolute",transition:"width 660ms cubic-bezier(0.65, 0, 0.35, 1)",height:"100%",variants:{disabled:{true:{backgroundColor:"transparent"},false:{backgroundColor:"$secondary2"}}}}),I=M(r,{margin:0}),j=M(n,{margin:0});t.toString=function(){return".cav-rating-box"};var T=function(M){var r,n,l=M.ratioValue,o=M.disabled,c=M.counter,N=M.active,s=M.className,d=void 0===s?"":s,D=100*l/5;return e.createElement(u,{active:N,className:d},e.createElement(i,{alignItems:"center",css:(r={cursor:"pointer","& span":{color:!0===o?"$neutral4":"$neutral5"}},r["& ".concat(t)]={backgroundColor:"$neutral2"},r["&:hover"]=(n={"& span":{color:!0===o?"$neutral4":"$secondary4"}},n["& ".concat(t)]={backgroundColor:!0===o?"$neutral2":"$secondary4","& span":{color:!0===o?"$neutral4":"$white"}},n),r)},e.createElement(g,{disabled:o},e.createElement(a,{as:"span",css:{width:"".concat(D,"%")}})),e.createElement(a,{as:"span",size:"bodySmall",weight:"regular",css:{mx:"$small1","@sm":{fontSize:"$bodyXSmall"},"@md":{fontSize:"$bodySmall"},"@lg":{fontSize:"$bodyMedium"}}},"e acima"),e.createElement(t,{className:"cav-rating-box",css:{pb:"$letterSpacings$large",px:"$small2",borderRadius:"$radii$small"}},e.createElement(a,{weight:"semibold",size:"bodyXSmall",as:"span",role:"button"},o?0:c))))};t.toString=function(){return".cav-rating-box"};var z=function(M){var r=M.ratioValue,n=M.counter,l=M.link,o=M.mode,c=M.className,N=void 0===c?"":c,s=100*r/5;return e.createElement(i,{alignItems:"center",css:{cursor:"pointer","& a":{textDecoration:"none","&:hover":{textDecoration:"underline",color:"$secondary4"}},"& span":{"@sm":{fontSize:"$bodyXSmall"},"@md":{fontSize:"$bodySmall"},"@lg":{fontSize:"$bodyMedium"}}},className:N},e.createElement(g,null,e.createElement(a,{as:"span",css:{width:"".concat(s,"%")}})),"default"===o&&e.createElement(e.Fragment,null,e.createElement(a,{as:"span",size:"bodySmall",weight:"bold",css:{ml:"$small1"}},r),e.createElement(t,{className:"cav-rating-box"},e.createElement(a,{weight:"regular",size:"bodyXSmall",as:"span",css:{mx:"$letterSpacings$large"}},"|"),e.createElement(a,{weight:"regular",size:"bodyXSmall",as:"a",href:l||"https://www.madeiramadeira.com.br/",css:{textDecoration:"underline",color:"$secondary4 !important"}},n," avaliações"))),"score"===o&&e.createElement(a,{as:"span",size:"bodySmall",weight:"bold",css:{ml:"$small1"}},r),"counter"===o&&e.createElement(t,{className:"cav-rating-box",css:{ml:"$small1"}},e.createElement(a,{weight:"regular",size:"bodyXSmall",as:"span"},"(",n,")")))};a.toString=function(){return".cav-rating-text"},i.toString=function(){return".cav-scale-container"};var x=function(t){var i=t.ratioValue,M=t.disabled,r=t.counter,n=t.scale,o=t.active,s=t.className,g=void 0===s?"":s;return e.createElement(u,{className:g},e.createElement(d,{disabled:M,className:"cav-scale-container",active:o},e.createElement(I,null,e.createElement(j,null,e.createElement(l,{sm:1,noGutters:!0},e.createElement(a,{as:"span",size:"bodySmall",weight:"bold",className:"cav-rating-text"},i)),e.createElement(l,{sm:1,noGutters:!0},e.createElement(c,{icon:N,iconSize:14})),e.createElement(l,{sm:8,noGutters:!0},e.createElement(D,null,e.createElement(m,{style:{width:"".concat(n,"%")},disabled:M}))),e.createElement(l,{sm:2},e.createElement(a,{size:"bodySmall",as:"span",className:"cav-rating-text"},"(",r,")"))))))},y=function(t){var i=t.ratioValue,M=t.className,r=void 0===M?"":M,n=100*i/5;return e.createElement(g,{className:r},e.createElement(a,{as:"span",css:{width:"".concat(n,"%")}}))},E=function(a){var t=a.disabled,i=void 0!==t&&t,M=a.active,r=void 0!==M&&M,n=a.counter,l=a.ratioValue,o=void 0===l?5:l,c=a.link,N=a.type,s=void 0===N?"filterAverage":N,g=a.mode,u=a.scale,d=a.className,D=void 0===d?"":d;return{star:e.createElement(y,{ratioValue:o,className:D}),scale:e.createElement(x,{ratioValue:o,disabled:i,counter:n,scale:u,active:r,className:D}),info:e.createElement(z,{ratioValue:o,counter:n,link:c,mode:g,className:D}),filterAverage:e.createElement(T,{ratioValue:o,disabled:i,counter:n,active:r,className:D})}[s]};export{E as default};