@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.8 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),i=require("@mui/icons-material"),r=require("@mui/material"),t=require("react"),s=require("../../WebCore/IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");var n=require("../../WebCore/ProgressBar/ProgressBar.js"),o=require("../../WebCore/Surface/Surface.js"),a=require("../../WebCore/Typography/Typography.js"),l=require("./StyledOnboardingCard.js"),c=require("./Timeline.js");const m=({completed:i,total:r})=>e.jsx(a,{component:"p",variation:"lg",sx:{fontWeight:500},children:`${i} of ${r} tasks completed`});module.exports=({cardTitle:d,cardSubtitle:g,welcomeImageUrl:p,welcomeImageAltDescription:u,items:x=[]})=>{const[j,h]=t.useState(!0),b=r.useTheme(),f=()=>h(!j),q=x.length,v=x.filter(e=>e.complete).length,C=v/q*100;return e.jsxs(o,{variation:"raised",borderradius:"lg",sx:{display:"flex",flexDirection:"row",[b.breakpoints.down("lgNav")]:{flexDirection:"column"},gap:e=>({sm:e.spacing(e.custom.padding.md),lg:e.spacing(e.custom.margin.lg)}),padding:e=>({sm:e.spacing(e.custom.margin.md),lg:e.spacing(e.custom.margin.lg)})},children:[e.jsxs(l.WelcomeMessageContainer,{children:[e.jsx(r.Box,{component:"img",src:p,alt:u,sx:{width:{sm:56,lg:72},height:{sm:56,lg:72}}}),e.jsx(a,{component:"h1",variation:"md",fontWeight:500,children:d}),e.jsx(l.Subtitle,{component:"p",variation:"lg",children:g})]}),e.jsxs(l.ProgressContainer,{children:[e.jsxs(r.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"start",width:"100%",height:"36px",paddingBottom:e=>e.spacing(e.custom.padding.sm)},children:[e.jsx(m,{completed:v,total:q}),j&&e.jsx(s,{sizing:"sm",variation:"outlined",icon:e.jsx(i.ExpandLess,{}),onClick:f})]}),e.jsx(n,{variation:"determinate",value:C}),e.jsx(c,{expanded:j,onToggleExpanded:f,items:x})]})]})};