@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
44 lines (41 loc) • 1.53 kB
JavaScript
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 };