@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.58 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("merge-sx"),t=require("react"),o=require("../../BrandCore/Icon/Icon.js"),a=require("../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js"),s=require("../../WebCore/IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");var n=require("../../WebCore/Menu/Menu.js"),d=require("../../WebCore/Skeleton/Skeleton.js"),l=require("../../WebCore/Surface/Surface.js"),c=require("../../WebCore/Typography/Typography.js"),p=require("../KpiIndicator/KpiIndicator.js"),m=require("./helpers/addTestKpiInteractionStates.js");const u=t.forwardRef(({colorScheme:t="purple",variation:u,title:x,description:h,loading:g,disabled:j=!1,onShowMoreClick:b,menuItems:f,active:y,...v},q)=>{const C=r.useTheme();return e.jsxs(l,{ref:q,interactive:!j,active:y,borderradius:"lg",variation:"raised",...v,sx:i.mergeSx({position:"relative",display:"flex",flexDirection:"column",gap:C.custom.margin.sm,border:`1px solid ${C.custom.palette.stroke.light}`,padding:C.custom.padding.md,..."dimmed"===u&&{border:`1px solid ${C.custom.palette.stroke.light}`},...m.addedStylesForExpandedableButton(C,C.custom.palette.surface.raised,{hover:!j,active:!j,selected:y})},v.sx),children:[e.jsxs(r.Stack,{direction:"row",gap:1,children:[e.jsxs(r.Stack,{direction:"row",gap:1,width:"100%",sx:{minHeight:"22px"},children:[e.jsx(e.Fragment,{children:g?e.jsx(d,{sx:{width:17,height:16}}):e.jsx(r.Box,{sx:{height:"22px",display:"flex",placeItems:"center"},children:e.jsx(p,{colorScheme:t,disabled:u&&"dimmed"===u||j})})}),g?e.jsx(d,{sx:{marginTop:"-1px"}}):e.jsx(c,{component:"p",variation:"md",weight:"bold",sx:{color:"dimmed"===u||j?C.custom.palette.text.disabled:C.custom.palette.text.primary},children:x})]}),!g&&Boolean(f?.length)&&e.jsx(n.default,{bindOn:j?[]:["focus","trigger"],trigger:e.jsx(s,{disabled:j,icon:e.jsx(o.default,{name:"more-horizontal",size:16}),variation:"outlined",className:"TestKPICard__Menu",sx:{width:28,aspectRatio:1,borderRadius:"100% !important",transition:"all 0.3s ease",opacity:0,transform:"scale(0.2)","&:focus":{background:`${C.custom.palette.interaction.press} !important`,opacity:1}}}),menuItems:f,width:128,offset:[0,-8],placement:"bottom-end"})]}),g?e.jsx(r.Box,{display:"flex",flexDirection:"column",gap:.5,children:[...new Array(3).fill(void 0)].map((r,i)=>e.jsx(d,{height:19},`TestKPICard__Skeleton--description-${i}`))}):e.jsx(a,{clamp:3,component:"p",variation:"sm",sizing:"sm",dimmed:"dimmed"===u,disabled:j,onShowMoreClick:b,children:h})]})});module.exports=u;