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