@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
95 lines (94 loc) • 3.89 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "align", "divider", "rowGap", "responsive", "filled", "outset", "title", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useContext } from 'react';
import classnames from 'classnames';
import Flex from '../flex/Flex';
import { SectionParams } from '../section/Section';
import { combineLabelledBy } from '../../shared/component-helper';
import CardContext from './CardContext';
import Space from '../Space';
import useId from '../../shared/helpers/useId';
function Card(props) {
var _ref;
const nestedContext = useContext(CardContext);
const {
className,
stack,
direction,
gap,
spacing,
innerSpace,
alignSelf = 'stretch',
align,
divider = 'space',
rowGap,
responsive = !(nestedContext !== null && nestedContext !== void 0 && nestedContext.isNested),
filled,
outset,
title,
children
} = props,
rest = _objectWithoutProperties(props, _excluded);
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 ? _objectSpread(_objectSpread({}, basisSpace), {}, {
right: 0,
left: 0
}) : basisSpace;
const params = SectionParams(_objectSpread(_objectSpread({
className: classnames('dnb-card', className, responsive && 'dnb-card--responsive', filled && 'dnb-card--filled'),
breakout: responsive ? trueWhenSmall : false,
outset: nestedContext !== null && nestedContext !== void 0 && nestedContext.isNested ? false : outset === true ? falseWhenSmall : outset,
roundedCorner: responsive ? falseWhenSmall : true,
outline: '--outline-card-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(CardContext.Provider, {
value: {
isNested: 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;
export default Card;
//# sourceMappingURL=Card.js.map