@useloops/design-system/dist/systems/Platform/TestItem/TestItem.js

The official React based Loops design system

"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@number-flow/react"),s=require("merge-sx"),a=require("react"),n=require("react-truncate-list"),o=require("../../BrandCore/Icon/Icon.js"),i=require("../../WebCore/IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");var l=require("../../WebCore/Label/Label.js"),d=require("../../WebCore/Menu/Menu.js"),c=require("../../WebCore/ProgressBar/ProgressBar.js"),p=require("../../WebCore/Skeleton/Skeleton.js"),m=require("../../WebCore/Surface/Surface.js"),u=require("../../WebCore/Typography/Typography.js"),x=require("../TestStatus/TestStatus.js");function g(e){return e&&e.__esModule?e:{default:e}}var h=g(r);const j=({animated:r,label:s,primaryText:a,secondaryText:n})=>{const o=a.match(/\d{1,2}:\d{2}/),i=a.split(":"),l=!isNaN(Number(a)),d=n.includes("%")&&!isNaN(Number(n.replace("%","")));return e.jsxs(t.Stack,{sx:{background:e=>e.custom.palette.surface.default,minWidth:"92px",border:e=>`1px solid ${e.custom.palette.neutral[100]}`,borderRadius:1,padding:e=>`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`,color:e=>e.custom.palette.text.primary,flexShrink:0,height:"100%"},direction:{sm:"row",md:"row",lg:"column"},alignItems:"center",gap:{sm:1,md:1,lg:0},children:[e.jsx(u,{component:"p",sx:{width:"100%",textAlign:{md:"left",lg:"center"},fontSize:e=>e.custom.typography.body.sm},children:s}),e.jsx(u,{component:"h3",sx:{fontSize:e=>({sm:e.custom.typography.body.sm,md:e.custom.typography.body.md,lg:e.custom.typography.body.xxl}),fontWeight:500,flexShrink:0},monospaced:!0,children:e.jsx(e.Fragment,{children:o||l?e.jsx(e.Fragment,{children:o?e.jsxs(e.Fragment,{children:[e.jsx(h.default,{value:Number(i[0]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:r}),":",e.jsx(h.default,{value:Number(i[1]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:r})]}):e.jsx(h.default,{value:Number(a),animated:r})}):e.jsx(e.Fragment,{children:a})})}),e.jsx(u,{component:"p",sx:{color:e=>e.custom.palette.text.secondary,fontSize:e=>e.custom.typography.body.sm,flexShrink:0},monospaced:!0,children:d?e.jsxs(e.Fragment,{children:[e.jsx(h.default,{value:Number(n.replace("%","")),animated:r}),"%"]}):n})]})},y=({animated:r,iconName:a,label:n,value:i,slotProps:l})=>e.jsxs(t.Box,{display:"flex",alignItems:"center",gap:.5,children:[e.jsx(o.default,{name:a,...l?.icon,sx:s.mergeSx({color:e=>e.custom.palette.icon.secondary},l?.icon?.sx)}),e.jsxs(u,{monospaced:!0,component:"p",sx:e=>({fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.primary,"& > span":{color:e=>e.custom.palette.text.secondary,[e.breakpoints.up("lg")]:{display:"inline"},[e.breakpoints.down("lg")]:{display:"none"},[e.containerQueries.up("lg")]:{display:"inline"},[e.containerQueries.down("lg")]:{display:"none"}}}),children:[e.jsx(h.default,{value:i,animated:r})," ",e.jsx("span",{children:n})]})]});module.exports=({animated:r=!0,status:g,menuItems:h,title:f,tags:b,stats:S,user:w,slotProps:k,loading:v=!1,...C})=>{const[T,B]=a.useState(!1);return e.jsx(m,{variation:"raised",borderradius:"lg",...C,sx:s.mergeSx({padding:e=>e.spacing(e.custom.padding.md),border:e=>`1px solid ${e.custom.palette.stroke.light}`,width:"100%",cursor:"pointer","&:hover .TestItem__Menu":{opacity:1}},C.sx),children:e.jsxs(t.Stack,{component:"article",gap:2,children:[e.jsxs(t.Stack,{component:"header",gap:1,justifyContent:"space-between",children:[e.jsxs(t.Stack,{direction:"row",justifyContent:"space-between",alignItems:"center",gap:1,children:[v?e.jsx(p,{sx:{width:90,height:32}}):e.jsx(x,{status:g,...k?.status}),!v&&Boolean(h?.length)&&e.jsx(d.default,{trigger:e.jsx(i,{icon:e.jsx(o.default,{name:"more-horizontal",size:16}),variation:"outlined",className:"TestItem__Menu",sx:{width:28,aspectRatio:1,borderRadius:"100% !important",transition:"opacity 0.3s ease",opacity:0,"&:focus":{background:e=>`${e.custom.palette.interaction.press} !important`,opacity:1}}}),bindOn:["toggle"],menuItems:h,width:128,offset:[0,8],placement:"bottom-end",...k?.menu})]}),v?e.jsx(p,{}):e.jsx(u,{component:"h1",weight:"bold",...k?.title,sx:s.mergeSx({fontSize:e=>e.custom.typography.body.xl},k?.title?.sx),children:f})]}),e.jsx(t.Box,{children:v?e.jsx(t.Box,{display:"flex",flexDirection:"row",gap:.5,children:[...new Array(3).fill(void 0)].map((t,r)=>e.jsx(p,{sx:{maxWidth:50}},`test-item-skeleton-${r}`))}):Boolean(b?.length)&&e.jsx(n.TruncatedList,{style:{display:"flex",flexWrap:"wrap",maxHeight:30,gap:"4px",listStyleType:"none",paddingInlineStart:0,margin:0,...T&&{maxHeight:"none"}},alwaysShowTruncator:T,renderTruncator:({hiddenItemsCount:t})=>t>0?e.jsx(l,{body:`+${t}`,weight:"light",onClick:e=>{e.stopPropagation(),B(!0)},...k?.tagsExpand,sx:s.mergeSx({background:e=>e.custom.palette.neutral[50]},k?.tagsExpand?.sx)}):e.jsx(i,{sizing:"sm",icon:e.jsx(o.default,{name:"chevron-up",size:16}),onClick:e=>{e.stopPropagation(),B(!1)},...k?.tagsCollapse,sx:s.mergeSx({color:e=>e.custom.palette.icon.primary},k?.tagsCollapse?.sx)}),children:b.map(t=>e.jsx(l,{body:t,weight:"light",...k?.pill,sx:s.mergeSx({background:e=>e.custom.palette.neutral[50]},k?.pill?.sx)},t))})}),!v&&S?.progress&&e.jsx(m,{variation:"sunken",borderradius:"md",sx:{border:e=>`1px solid ${e.custom.palette.neutral[100]}`,padding:e=>e.spacing(e.custom.padding.md)},children:e.jsxs(t.Stack,{gap:2,children:[e.jsx(c,{variation:"determinate",value:S.progress.percentage}),e.jsxs(t.Box,{gap:{sm:.5,md:1},justifyContent:"stretch",sx:e=>({display:"grid",[e.breakpoints.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.breakpoints.down("lg")]:{gridTemplateColumns:"auto"},[e.containerQueries.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.containerQueries.down("lg")]:{gridTemplateColumns:"auto"}}),children:[e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Completed",primaryText:S.progress.completed.toString(),secondaryText:`of ${S.progress.total}`})}),e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Incomplete",primaryText:S.progress.incomplete.toString(),secondaryText:`${S.progress.incompletePercentage}%`})}),e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Duration",primaryText:S.progress.averageDuration,secondaryText:"average"})})]})]})}),e.jsxs(t.Box,{component:"footer",display:"flex",flexDirection:"row",justifyContent:w?"space-between":"end",gap:1,children:[w&&e.jsx(t.Box,{display:"flex",alignItems:"center",gap:1,children:v?e.jsxs(e.Fragment,{children:[e.jsx(p,{sx:{borderRadius:"50%",width:24,aspectRatio:1,flexShrink:0}}),e.jsx(p,{sx:{width:100}})]}):e.jsx(e.Fragment,{children:e.jsx(u,{component:"p",clamp:1,sx:{fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.secondary},children:w.activityDescription})})}),!v&&"draft"!==g&&e.jsxs(t.Box,{display:"flex",alignItems:"center",gap:2,flexShrink:0,children:[e.jsx(y,{animated:r,iconName:"data-bar",label:"answers",value:S?.count?.answers??0}),e.jsx(y,{animated:r,iconName:"comment-filled",label:"comments",value:S?.count?.comments??0,slotProps:{icon:{size:20}}})]})]})]})})};