@dossierhq/design
Version:
The design system for Dossier.
62 lines • 3.66 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { toClassName } from '../../utils/ClassNameUtils.js';
import { toFlexContainerClassName, toFlexItemClassName } from '../../utils/FlexboxUtils.js';
import { toSpacingClassName } from '../../utils/LayoutPropsUtils.js';
import { Dropdown } from '../Dropdown/Dropdown.js';
import { Icon } from '../Icon/Icon.js';
import { Tag } from '../Tag/Tag.js';
import { Text } from '../Text/Text.js';
export const Card2 = ({ className, children }) => {
return (_jsx("div", { className: toClassName('is-card-container', toFlexContainerClassName({ flexDirection: 'column' }), className), children: children }));
};
Card2.displayName = 'Card2';
Card2.Header = ({ noIcons, children }) => {
//TODO cleanup border bottom
return (_jsx("header", { className: toClassName(toFlexContainerClassName({ flexDirection: 'row', alignItems: 'center' }), toSpacingClassName(noIcons ? { paddingHorizontal: 3 } : { paddingLeft: 3 })), style: { borderBottom: '1px solid hsl(0deg, 0%, 93%)' }, children: children }));
};
Card2.Header.displayName = 'Card2.Header';
Card2.HeaderTitle = ({ children }) => {
return (_jsx(Text, { className: toClassName(toFlexItemClassName({ flexGrow: 1 }), toSpacingClassName({ paddingVertical: 2 })), textStyle: "headline5", marginBottom: 0, children: children }));
};
Card2.HeaderTitle.displayName = 'Card2.HeaderTitle';
Card2.HeaderTag = ({ children }) => {
return _jsx(Tag, { className: toSpacingClassName({ marginLeft: 2 }), children: children });
};
Card2.HeaderTag.displayName = 'Card2.HeaderTag';
// eslint-disable-next-line react/display-name
Card2.HeaderDropdown = ({ items, renderItem, onItemClick, }) => {
//TODO stop using card-header-icon class
return (_jsx(Dropdown, { left: true, items: items, onItemClick: onItemClick, renderItem: renderItem, renderTrigger: (triggerRef, onOpenDropdown) => (_jsx("button", { ref: triggerRef, className: "card-header-icon", onMouseDown: (event) => {
event.preventDefault();
onOpenDropdown();
}, children: _jsx(Icon, { icon: "chevronDown" }) })) }));
};
Card2.HeaderIconButton = ({ icon, onClick }) => {
//TODO stop using card-header-icon class
return (_jsx("button", { className: "card-header-icon", onClick: onClick, children: _jsx(Icon, { icon: icon }) }));
};
Card2.HeaderIconButton.displayName = 'Card2.HeaderIconButton';
Card2.Media = ({ children }) => {
return _jsx("div", { className: "card-media", children: children });
};
Card2.Media.displayName = 'Card2.Media';
Card2.Content = ({ style, noPadding, children }) => {
return (_jsx("div", { className: toClassName(noPadding ? '' : toSpacingClassName({ paddingHorizontal: 3, paddingVertical: 2 }), toFlexContainerClassName({ flexDirection: 'column' })), style: style, children: children }));
};
Card2.Content.displayName = 'Card2.Content';
Card2.Footer = ({ children }) => {
//TODO stop using card-footer class
return _jsx("footer", { className: "card-footer", children: children });
};
Card2.Footer.displayName = 'Card2.Footer';
Card2.FooterButton = ({ value, disabled, children, onClick }) => {
//TODO stop using bulma card classes
return (_jsx("button", { className: "card-footer-item button is-white card-footer-button", disabled: disabled, value: value, onClick: onClick, children: children }));
};
Card2.FooterButton.displayName = 'Card2.FooterButton';
Card2.FooterItem = ({ children }) => {
//TODO stop using bulma card classes
return _jsx("p", { className: "card-footer-item", children: children });
};
Card2.FooterItem.displayName = 'Card2.FooterItem';
//# sourceMappingURL=Card2.js.map