@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 10.3 kB
JavaScript
import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{useTheme as r,Stack as i,Box as a}from"@mui/material";import n from"@number-flow/react";import{mergeSx as s}from"merge-sx";import{useState as p}from"react";import{TruncatedList as l}from"react-truncate-list";import m from"../../BrandCore/Icon/Icon.js";import"../../../utils/formValidation/misc.js";import"../../BrandCore/primitiveVariables.js";import"../../WebCore/utils/typography.util.js";import"../../WebCore/AnnualController/AnnualController.js";import"../../WebCore/SelectItem/SelectItem.js";import"../../WebCore/Accordion/Accordion.js";import"../../WebCore/Animations/FadeIn.js";import d from"../../WebCore/Typography/Typography.js";import"@mui/icons-material";import"../../WebCore/AutocompleteBaseField/_partials/AutocompleteListbox.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledPopper.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteField.js";import"../../WebCore/AutocompleteBaseField/_partials/AutocompleteChip.js";import"../../WebCore/AutocompleteBaseField/_partials/StyledAutocompleteInput.js";import"../../WebCore/Badge/Badge.js";import"../../WebCore/Breadcrumb/Breadcrumb.js";import"../../WebCore/Button/Button.js";import"../../WebCore/ButtonBase/ButtonBase.js";import"../../WebCore/ButtonTabGroup/_partials/ActiveIndicator.js";import"../../WebCore/ButtonTabGroup/_partials/ButtonTabsWrapper.js";import"../../WebCore/ButtonTabGroup/_partials/TabButton.js";import"../../WebCore/Checkbox/StyledCheckbox.js";import"../../WebCore/InputFieldBase/InputFieldBase.js";import"../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js";import"../../WebCore/InputLabelBase/StyledInputLabelBase.js";import"../../WebCore/Differential/DifferentialContainer.js";import"../../WebCore/Differential/DifferentialRadio.js";import"../../WebCore/DropdownMenu/StyledMenu.js";import"../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js";import"../../WebCore/FormGenerator/FormGenerator.js";import"../../WebCore/GridOverlay/GridOverlay.js";import"html-react-parser";import c from"../../WebCore/IconButton/IconButton.js";import"../../WebCore/IconButtonBase/IconButtonBase.js";import"../../WebCore/IconButtonGroup/IconButtonGroup.js";import"../../WebCore/Image/Image.js";import"../../WebCore/KbdGroup/Kbd.js";import"../../WebCore/KbdGroup/KbdGroup.js";import u from"../../WebCore/KeyValueLabel/KeyValueLabel.js";import b from"../../WebCore/Label/Label.js";import"../../WebCore/Likert/LikertContainer.js";import"../../WebCore/Likert/LikertLabel.js";import"../../WebCore/Likert/LikertRadio.js";import"../../WebCore/Link/StyledLink.js";import"@lottiefiles/dotlottie-react";import"../../WebCore/LoopsAiButton/LoopsAiButton.js";import"markdown-to-jsx";import g from"../../WebCore/Menu/Menu.js";import"../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js";import"../../WebCore/ModalLayout/_partials/ModalContentWrapper.js";import C from"../../WebCore/Surface/Surface.js";import"../../WebCore/NavigationButton/NavigationButton.js";import"material-ui-popup-state/hooks";import"../../WebCore/Nudge/NudgeButton.js";import"../../WebCore/NumberField/NumberField.js";import"../../BrandCore/colorRamps.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import"../../WebCore/Progress/Progress.js";import"../../WebCore/Pill/StyledPill.js";import y from"../../WebCore/ProgressBar/ProgressBar.js";import"../../WebCore/Radio/StyledRadio.js";import"../../WebCore/Select/StyledSelect.js";import"../../WebCore/RankItem/RankItemContainer.js";import"../../WebCore/RankItem/RankItemLabel.js";import"../../WebCore/SortableList/SortableList.js";import"../../WebCore/SortableList/components/SortableItem/SortableItem.js";import"../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js";import"@tiptap/extension-placeholder";import"@tiptap/starter-kit";import"mui-tiptap";import"../../WebCore/RichTextField/StyledRichTextEditor.js";import h from"../../WebCore/Skeleton/Skeleton.js";import"../../WebCore/Slider/StyledSlider.js";import"../../WebCore/StarRating/StarRating.js";import"../../WebCore/Switch/StyledSwitch.js";import"../../WebCore/Textarea/Textarea.js";import"../../WebCore/TrialCard/TrialCardContainers.js";import"../../WebCore/TrialCard/TrialPill.js";import"../../WebCore/UserMenu/UserMenuButton.js";import"../../WebCore/VideoModal/VideoModal.js";import x from"../TestStatus/TestStatus.js";const j=({animated:n=!0,status:j,menuItems:S,title:B,tags:I,stats:k,user:T,slotProps:w,loading:v=!1,...L})=>{const A=r(),[N,R]=p(!1);return e(C,{variation:"raised",borderradius:"lg",...L,sx:s({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}},L.sx),children:t(i,{component:"article",gap:2,children:[t(i,{component:"header",gap:1,justifyContent:"space-between",children:[t(i,{direction:"row",justifyContent:"space-between",alignItems:"center",gap:1,children:[v?e(h,{sx:{width:90,height:32}}):e(x,{status:j,...w?.status}),!v&&Boolean(S?.length)&&e(g,{trigger:e(c,{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:S,width:128,offset:[0,8],placement:"bottom-end",...w?.menu})]}),v?e(h,{}):e(d,{component:"h1",weight:"bold",...w?.title,sx:s({fontSize:e=>e.custom.typography.body.xl},w?.title?.sx),children:B})]}),e(a,{children:v?e(a,{display:"flex",flexDirection:"row",gap:.5,children:[...new Array(3).fill(void 0)].map((t,o)=>e(h,{sx:{maxWidth:50}},`test-item-skeleton-${o}`))}):Boolean(I?.length)&&e(l,{style:{display:"flex",flexWrap:"wrap",alignItems:"center",maxHeight:56,gap:A.m.xs,listStyleType:"none",paddingInlineStart:0,margin:0,...N&&{maxHeight:"none"}},alwaysShowTruncator:N,renderTruncator:({hiddenItemsCount:t})=>t>0?e(b,{body:`+${t}`,weight:"light",onClick:e=>{e.stopPropagation(),R(!0)},...w?.tagsExpand,sx:s({background:e=>e.custom.palette.neutral[50]},w?.tagsExpand?.sx)}):e(c,{sizing:"sm",icon:e(m,{name:"chevron-up",size:16}),onClick:e=>{e.stopPropagation(),R(!1)},...w?.tagsCollapse,sx:s({color:e=>e.custom.palette.icon.primary},w?.tagsCollapse?.sx)}),children:I.map(({category:t,selection:o})=>e(u,{keyString:t,valueString:o},t))})}),!v&&k?.progress&&e(C,{variation:"sunken",borderradius:"md",sx:{border:e=>`1px solid ${e.custom.palette.neutral[100]}`,padding:e=>e.spacing(e.custom.padding.md)},children:t(i,{gap:2,children:[e(y,{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(f,{animated:n,label:"Completed",primaryText:k.progress.completed.toString(),secondaryText:`of ${k.progress.total}`})}),e(a,{flexBasis:0,flexGrow:1,children:e(f,{animated:n,label:"Incomplete",primaryText:k.progress.incomplete.toString(),secondaryText:`${k.progress.incompletePercentage}%`})}),e(a,{flexBasis:0,flexGrow:1,children:e(f,{animated:n,label:"Duration",primaryText:k.progress.averageDuration,secondaryText:"average"})})]})]})}),t(a,{component:"footer",display:"flex",flexDirection:"row",justifyContent:T?"space-between":"end",gap:1,children:[T&&e(a,{display:"flex",alignItems:"center",gap:1,children:v?t(o,{children:[e(h,{sx:{borderRadius:"50%",width:24,aspectRatio:1,flexShrink:0}}),e(h,{sx:{width:100}})]}):e(o,{children:e(d,{component:"p",clamp:1,sx:{fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.secondary},children:T.activityDescription})})}),!v&&"draft"!==j&&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}}})]})]})]})})},f=({animated:r,label:a,primaryText:s,secondaryText:p})=>{const l=s.match(/\d{1,2}:\d{2}/),m=s.split(":"),c=!isNaN(Number(s)),u=p.includes("%")&&!isNaN(Number(p.replace("%","")));return t(i,{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(d,{component:"p",sx:{width:"100%",textAlign:{md:"left",lg:"center"},fontSize:e=>e.custom.typography.body.sm},children:a}),e(d,{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,l||c?{children:l?t(o,{children:[e(n,{value:Number(m[0]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:r}),":",e(n,{value:Number(m[1]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:r})]}):e(n,{value:Number(s),animated:r})}:{children:s})})}),e(d,{component:"p",sx:{color:e=>e.custom.palette.text.secondary,fontSize:e=>e.custom.typography.body.sm,flexShrink:0},monospaced:!0,children:u?t(o,{children:[e(n,{value:Number(p.replace("%","")),animated:r}),"%"]}):p})]})},W=({animated:o,iconName:r,label:i,value:p,slotProps:l})=>t(a,{display:"flex",alignItems:"center",gap:.5,children:[e(m,{name:r,...l?.icon,sx:s({color:e=>e.custom.palette.icon.secondary},l?.icon?.sx)}),t(d,{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:p,animated:o})," ",e("span",{children:i})]})]});export{j as default};