@equinor/eds-core-react/dist/esm/components/Banner/BannerIcon.js

The React implementation of the Equinor Design System

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 };