UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

62 lines (59 loc) 1.87 kB
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 };