UNPKG

@cgi-learning-hub/ui

Version:

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

2 lines (1 loc) 1.88 kB
"use strict";const r=require("react/jsx-runtime"),m=require("../../MoreVert-C-Rhn-xK.cjs"),d=require("@mui/material"),j=require("../EllipsisWithTooltip/EllipsisWithTooltip.cjs.js"),o=require("./style.cjs.js"),y=({isSelected:s=!1,onSelect:u=()=>{},image:x,title:c,defaultImage:h,propertyItems:p=[],infoIcons:l=[],size:t="md",width:i,onClick:n=()=>{},hasNoButtonOnFocus:b=!1})=>(l=l.slice(0,3),r.jsx(d.Box,{sx:{width:i&&t==="md"?i:"320px"},children:r.jsxs(o.StyledCard,{selected:s,size:t,onClick:n,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),n==null||n())},role:"button",tabIndex:0,"aria-label":`Resource card for ${c}`,children:[r.jsx(o.SelectedIcon,{onClick:e=>{e.preventDefault(),e.stopPropagation(),u()},onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),e.stopPropagation(),u())},className:"selected-icon",selected:s,role:"button",tabIndex:0,"aria-label":s?"Unselect card":"Select card",hasNoButtonOnFocus:b,children:r.jsx(m.MoreVertIcon,{})}),r.jsx(d.Stack,{sx:{width:t=="sm"?110:"100%",display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},children:r.jsx(o.ResourceCardImage,{image:x,defaultImage:h,size:t,role:"img","aria-label":`Image for ${c}`})}),r.jsxs(o.ResourceCardBody,{size:t,children:[r.jsx(j,{typographyProps:{variant:"h4",component:"p"},tooltipProps:{placement:"bottom",arrow:!0},children:c}),p.length>0&&p.map((e,a)=>r.jsxs(o.ResourcePropertyItem,{size:t,role:"group","aria-label":`Property ${a}`,children:[e.icon,r.jsx(o.ResourcePropertyText,{isLast:a===p.length-1,size:t,width:i,children:e.text})]},`property-${a}`)),r.jsx(o.PublicIconWrapper,{size:t,children:l.length>0&&l.map((e,a)=>r.jsx(d.Tooltip,{title:e.text,placement:"top",arrow:!0,children:r.jsx(o.ResourceIconItem,{size:t,role:"button",tabIndex:0,"aria-label":e.text,children:e.icon})},`info-${a}`))})]})]})}));module.exports=y;