azure-devops-ui
Version:
React components for building web UI in Azure DevOps
36 lines (35 loc) • 3.35 kB
JavaScript
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";
export const Card = props => {
const { collapsible, collapsed = false, titleProps = {}, headerCommandBarItems, onCollapseClick, renderHeader } = props;
const { text } = titleProps;
// TODO: FF cleanup target ('card-expand-collapse-aria-label-fix' document body class):
const isAriaLabelFixEnabled = document.body.classList.contains("card-expand-collapse-aria-label-fix");
return (React.createElement(CustomCard, { className: css(props.className, (text || headerCommandBarItems) && "bolt-card-with-header") }, collapsible ? (React.createElement(Observer, { collapsed: collapsed }, (observerProps) => (React.createElement(React.Fragment, null,
(text || headerCommandBarItems || renderHeader) && (React.createElement("div", { className: "flex-row" },
React.createElement(Button, { ariaExpanded: !observerProps.collapsed, ariaLabel:
// a11y: aria-expanded already communicates expand/collapse state;
// aria-label should only contain the button name, not the UI action
isAriaLabelFixEnabled && text
? text
: (text ? text + " " : "") + (observerProps.collapsed ? Resources.ExpandButtonAriaLabel : Resources.CollapseButtonAriaLabel), subtle: true, iconProps: { iconName: observerProps.collapsed ? "ChevronRightMed" : "ChevronDownMed", size: IconSize.small }, className: "bolt-card-expand-button flex-self-start", onClick: onCollapseClick }),
renderHeader ? (renderHeader()) : (React.createElement(CardHeader, Object.assign({}, props, { headerClassName: css(props.headerClassName, "bolt-card-expandable-header", observerProps.collapsed && "bolt-card-header-collapsed") }))))),
!observerProps.collapsed && React.createElement(CardContent, Object.assign({}, props.contentProps), props.children))))) : (React.createElement(React.Fragment, null,
renderHeader ? renderHeader() : (text || headerCommandBarItems) && React.createElement(CardHeader, Object.assign({}, props)),
React.createElement(CardContent, Object.assign({}, props.contentProps), props.children)))));
};
const CardHeader = props => {
const { collapsible, titleProps = {}, headerBreakpoints, headerClassName, headerCommandBarItems, headerDescriptionProps = {}, headerIconProps } = props;
const { text, className, id, size, ariaLevel } = titleProps;
return (React.createElement(Header, { className: css(headerClassName, "bolt-card-header", collapsible && "bolt-card-header-collapsible"), commandBarClassName: "justify-end", commandBarItems: headerCommandBarItems, description: headerDescriptionProps.text, descriptionClassName: headerDescriptionProps.className, headerBreakpoints: headerBreakpoints, titleId: id, titleIconProps: headerIconProps, title: text, titleAriaLevel: ariaLevel, titleClassName: className, titleSize: size }));
};