UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

44 lines (41 loc) 1.53 kB
import { forwardRef, Children, isValidElement, cloneElement } from 'react'; import styled, { css } from 'styled-components'; import * as Banner_tokens from './Banner.tokens.js'; import { Icon } from '../Icon/index.js'; import { bordersTemplate } from '@equinor/eds-utils'; import { jsx } from 'react/jsx-runtime'; const { info, warning } = Banner_tokens; const StyledBannerIcon = styled.span.withConfig({ displayName: "BannerIcon__StyledBannerIcon", componentId: "sc-7ow3zc-0" })(({ theme, $variant }) => { return css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(theme.entities.icon.border), $variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right); }); const BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon({ children, variant = 'info', ...rest }, ref) { const childrenWithColor = Children.map(children, child => { const color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color; return /*#__PURE__*/isValidElement(child) && child.type === Icon && /*#__PURE__*/cloneElement(child, { color }) || child; }); const props = { ref, ...rest }; return /*#__PURE__*/jsx(StyledBannerIcon, { $variant: variant, ...props, children: childrenWithColor }); }); export { BannerIcon };