UNPKG

azure-devops-ui

Version:

React components for building web UI in Azure DevOps

1 lines 2.16 kB
import"../../CommonImports";import"../../Core/core.css";import"./Card.css";import*as React from"react";import{Button}from"../../Button";import{Header}from"../../Header";import{IconSize}from"../../Icon";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Card";import{css}from"../../Util";import{CardContent}from"./CardContent";import{CustomCard}from"./CustomCard";const Card=a=>{const{collapsible:e,collapsed:t=!1,titleProps:r={},headerCommandBarItems:s,onCollapseClick:o,renderHeader:l}=a,c=r["text"],n=document.body.classList.contains("card-expand-collapse-aria-label-fix");return React.createElement(CustomCard,{className:css(a.className,(c||s)&&"bolt-card-with-header")},e?React.createElement(Observer,{collapsed:t},e=>React.createElement(React.Fragment,null,(c||s||l)&&React.createElement("div",{className:"flex-row"},React.createElement(Button,{ariaExpanded:!e.collapsed,ariaLabel:n&&c?c:(c?c+" ":"")+(e.collapsed?Resources.ExpandButtonAriaLabel:Resources.CollapseButtonAriaLabel),subtle:!0,iconProps:{iconName:e.collapsed?"ChevronRightMed":"ChevronDownMed",size:IconSize.small},className:"bolt-card-expand-button flex-self-start",onClick:o}),l?l():React.createElement(CardHeader,Object.assign({},a,{headerClassName:css(a.headerClassName,"bolt-card-expandable-header",e.collapsed&&"bolt-card-header-collapsed")}))),!e.collapsed&&React.createElement(CardContent,Object.assign({},a.contentProps),a.children))):React.createElement(React.Fragment,null,l?l():(c||s)&&React.createElement(CardHeader,Object.assign({},a)),React.createElement(CardContent,Object.assign({},a.contentProps),a.children)))},CardHeader=e=>{var{collapsible:e,titleProps:a={},headerBreakpoints:t,headerClassName:r,headerCommandBarItems:s,headerDescriptionProps:o={},headerIconProps:l}=e,{text:a,className:c,id:n,size:d,ariaLevel:m}=a;return React.createElement(Header,{className:css(r,"bolt-card-header",e&&"bolt-card-header-collapsible"),commandBarClassName:"justify-end",commandBarItems:s,description:o.text,descriptionClassName:o.className,headerBreakpoints:t,titleId:n,titleIconProps:l,title:a,titleAriaLevel:m,titleClassName:c,titleSize:d})};export{Card};