@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.75 kB
JavaScript
import{jsx as e,jsxs as n}from"react/jsx-runtime";import{Accordion as r,AccordionSummary as a,AccordionDetails as i,useTheme as o,Container as t,Grid as c}from"@mui/material";import{styled as d}from"@mui/material/styles";import{useState as p}from"react";import m from"../../BrandCore/Icon/Icon.js";import s from"../Typography/Typography.js";const l=({heading:r,items:a})=>{const{custom:i}=o(),[d,m]=p("");return e(t,{sx:{backgroundColor:i.palette.surface.default,color:i.palette.text.primary},children:n(c,{container:!0,sx:{alignItems:"center",display:"flex",justifyContent:"center",py:{sm:4,lg:6},gap:2},children:[e(c,{size:[12,12,12,8],children:e(s,{variation:"xl",component:"h2",fontWeight:500,sx:{textAlign:"center"},children:r})}),e(c,{size:[12,12,12,8],children:a?.map(r=>{return n(g,{expanded:d===r.heading,onChange:(a=r.heading,(e,n)=>{m(!!n&&a)}),children:[e(h,{"aria-controls":`${r.heading}-content`,id:`${r.heading}-header`,heading:r.heading,children:e(s,{variation:"lg",component:"p",fontWeight:500,children:r.heading})}),e(u,{children:"string"==typeof r.body?e(s,{variation:"lg",component:"p",sx:{whiteSpace:"break-spaces"},children:r.body}):r.body})]},r.heading);var a})})]})})},g=d(n=>e(r,{disableGutters:!0,elevation:0,square:!0,...n}))(()=>({"&.Mui-expanded::before":{opacity:1}})),h=d(n=>e(a,{expandIcon:e(m,{name:"chevron-down",size:24}),...n}))(({theme:e})=>({backgroundColor:e.custom.palette.surface.default,padding:`${e.spacing(1)} ${e.spacing(2)}`,minHeight:"none","& .MuiAccordionSummary-expandIconWrapper":{color:e.custom.palette.text.primary},"& .MuiAccordionSummary-content":{margin:0}})),u=d(i)(({theme:e})=>({padding:`0 ${e.spacing(2)} ${e.spacing(4)}`}));export{u as AccordionDetails,h as AccordionSummary,l as default};