mod-arch-shared
Version:
Shared UI components and utilities for modular architecture micro-frontend projects
26 lines • 2 kB
JavaScript
import * as React from 'react';
import { Button, ButtonVariant, Flex, FlexItem, Stack, StackItem, } from '@patternfly/react-core';
import { sectionTypeBackgroundColor } from '../../components/design/utils';
import DividedGalleryItem from '../../components/design/DividedGalleryItem';
const HEADER_ICON_SIZE = 40;
const HEADER_ICON_PADDING = 2;
const InfoGalleryItem = ({ title, imgSrc, sectionType, description, isOpen, onClick, testId, ...rest }) => (React.createElement(DividedGalleryItem, { "data-testid": testId, ...rest },
React.createElement(Stack, { hasGutter: true },
React.createElement(StackItem, null,
React.createElement(Flex, { gap: { default: 'gapMd' }, direction: { default: isOpen ? 'column' : 'row' }, alignItems: { default: isOpen ? 'alignItemsFlexStart' : 'alignItemsCenter' } },
React.createElement(FlexItem, { style: {
display: 'inline-block',
width: HEADER_ICON_SIZE,
height: HEADER_ICON_SIZE,
padding: HEADER_ICON_PADDING,
borderRadius: HEADER_ICON_SIZE / 2,
background: sectionTypeBackgroundColor(sectionType),
} },
React.createElement("img", { width: HEADER_ICON_SIZE - HEADER_ICON_PADDING * 2, height: HEADER_ICON_SIZE - HEADER_ICON_PADDING * 2, src: imgSrc, alt: "" })),
onClick ? (React.createElement(Button, { "data-testid": testId ? `${testId}-button` : undefined, variant: ButtonVariant.link, isInline: true, onClick: onClick, style: {
fontSize: 'var(--pf-v6-global--FontSize--md)',
fontWeight: 'var(--pf-v6-global--FontWeight--bold)',
} }, title)) : (React.createElement(FlexItem, null, title)))),
isOpen ? React.createElement(StackItem, { isFilled: true }, description) : null)));
export default InfoGalleryItem;
//# sourceMappingURL=InfoGalleryItem.js.map