@cavilha/badge
Version:
A badge component used to highlight data features such as status, types, a numeric feature, or tagging an item.
2 lines (1 loc) • 1.74 kB
JavaScript
"use strict";var o=require("react"),t=require("@cavilha/theme");function a(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var r=a(o),e=t.styled("span",{display:"inline-block",textAlign:"center",fontFamily:"$untitled",fontWeight:"$semibold",textTransform:"uppercase",fontSize:"$bodySmall",maxHeight:22,borderRadius:"$small",padding:"1px $small2",marginRight:"$small2",variants:{align:{topRight:{top:0,right:0,position:"absolute",marginRight:0},topLeft:{top:0,left:0,position:"absolute"},bottomRight:{bottom:0,right:0,position:"absolute",marginRight:0},bottomLeft:{bottom:0,left:0,position:"absolute",marginRight:0}},type:{text:{borderRadius:"$small",padding:"1px $small2"},count:{borderRadius:"$medium"},dot:{borderRadius:"$medium",height:"$small2",width:"$small2",padding:"0"}},color:{default:{backgroundColor:"$neutral2",color:"$neutral5"},light:{boxShadow:"inset 0 0 0 1px $colors$neutral2",color:"$neutral5"},dark:{backgroundColor:"$neutral5",color:"$mono1"},success:{backgroundColor:"$success2",color:"$alwaysWhite"},danger:{backgroundColor:"$danger2",color:"$alwaysWhite"},warning:{backgroundColor:"$warning2",color:"$alwaysBlack"},info:{backgroundColor:"$info4",color:"$alwaysWhite"},transparent:{backgroundColor:"transparent",color:"$neutral5"}}},defaultVariants:{color:"default"}});module.exports=function(o){var t=o.count,a=void 0===t?"":t,l=o.showZero,n=void 0===l||l,i=o.overflowCount,s=void 0===i?99:i,d=o.dot,u=void 0!==d&&d,c=o.text,g=o.children,m=o.color,$=o.align,p=o.css,b=a>s?"".concat(s,"+"):a,f="0"===b||0===b;if(u||f&&!n)return r.default.createElement(e,{color:m,type:"dot",align:$,css:p});var h=b||f?"count":"text";return r.default.createElement(e,{color:m,type:h,align:$,css:p},g||("count"===h?b:c))};