@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
101 lines (100 loc) • 3.12 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useContext } from 'react';
import classnames from 'classnames';
import Flex from "../flex/Flex.js";
import { SectionParams } from "../section/Section.js";
import { combineLabelledBy } from "../../shared/component-helper.js";
import CardContext from "./CardContext.js";
import Space from "../Space.js";
import useId from "../../shared/helpers/useId.js";
function Card(props) {
var _ref;
const nestedContext = useContext(CardContext);
const {
className,
stack,
direction,
gap,
spacing,
innerSpace,
alignSelf = 'stretch',
align,
divider = 'space',
rowGap,
responsive = !nestedContext?.isNested,
filled,
outset,
title,
children,
...rest
} = props;
const titleId = useId();
const falseWhenSmall = {
small: false,
medium: true,
large: true
};
const trueWhenSmall = {
small: true,
medium: false,
large: false
};
const basisSpace = {
top: 'medium',
right: 'medium',
bottom: 'large',
left: 'medium'
};
const smallSpace = responsive ? {
...basisSpace,
right: 0,
left: 0
} : basisSpace;
const params = SectionParams({
className: classnames('dnb-card', className, responsive && 'dnb-card--responsive', filled && 'dnb-card--filled', !innerSpace && innerSpace != null && 'dnb-card--no-inner-space'),
breakout: responsive ? trueWhenSmall : false,
outset: nestedContext?.isNested ? false : outset === true ? falseWhenSmall : outset,
roundedCorner: responsive ? falseWhenSmall : true,
outline: 'var(--card-outline-color)',
outlineWidth: 'var(--card-outline-width)',
backgroundColor: 'var(--card-background-color)',
innerSpace: innerSpace !== null && innerSpace !== void 0 ? innerSpace : {
small: smallSpace,
medium: basisSpace,
large: basisSpace
},
...rest,
'aria-labelledby': combineLabelledBy(rest, title && titleId)
});
return React.createElement(Flex.Item, _extends({
alignSelf: alignSelf,
element: "section"
}, params), React.createElement(Card.Provider, {
disableCardBreakout: true
}, React.createElement(Flex.Container, {
direction: direction !== null && direction !== void 0 ? direction : 'vertical',
divider: divider,
alignSelf: alignSelf,
align: stack ? 'stretch' : align,
wrap: !stack,
gap: (_ref = gap !== null && gap !== void 0 ? gap : spacing) !== null && _ref !== void 0 ? _ref : stack ? 'medium' : false,
rowGap: rowGap
}, title && React.createElement(Space, {
id: titleId,
className: "dnb-card__title"
}, title), children)));
}
Card._supportsSpacingProps = true;
Card.Provider = function CardProvider({
disableCardBreakout,
children
}) {
const context = useContext(CardContext) || {};
context.isNested = disableCardBreakout !== null && disableCardBreakout !== void 0 ? disableCardBreakout : context?.isNested;
return React.createElement(CardContext.Provider, {
value: context
}, children);
};
export default Card;
//# sourceMappingURL=Card.js.map