@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
62 lines (59 loc) • 1.87 kB
JavaScript
import { forwardRef, Children, isValidElement } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import { spacingsTemplate, useToken } from '@equinor/eds-utils';
import { enabled } from './Banner.tokens.js';
import { BannerIcon } from './BannerIcon.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Divider } from '../Divider/Divider.js';
import { useEds } from '../EdsProvider/eds.context.js';
import { Paper } from '../Paper/Paper.js';
const Content = styled.div.withConfig({
displayName: "Banner__Content",
componentId: "sc-1ju451i-0"
})(({
theme,
$hasIcon
}) => {
return css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(theme.spacings), $hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
});
const NonMarginDivider = styled(Divider).withConfig({
displayName: "Banner__NonMarginDivider",
componentId: "sc-1ju451i-1"
})(["margin:0;height:2px;"]);
const Banner = /*#__PURE__*/forwardRef(function Banner({
children,
className,
elevation = 'none',
...rest
}, ref) {
const childrenWhereBannerIcon = Children.map(children, child => {
return /*#__PURE__*/isValidElement(child) && child.type === BannerIcon;
});
const hasIcon = childrenWhereBannerIcon.some(bool => bool);
const props = {
ref,
...rest
};
const {
density
} = useEds();
const token = useToken({
density
}, enabled);
return /*#__PURE__*/jsx(ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxs(Paper, {
...props,
className: className,
elevation: elevation,
role: "alert",
children: [/*#__PURE__*/jsx(Content, {
$hasIcon: hasIcon,
children: children
}), /*#__PURE__*/jsx(NonMarginDivider, {
color: "light"
})]
})
});
});
export { Banner };