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

The official React based Loops design system

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